/* ==========================================================
   COOL Skin v1.3.7 — светлая тема по умолчанию, тёмная переключателем
   Все правила идут поверх SO-Emarket, родные файлы темы не меняются.
   Откат: удалить этот файл — сайт вернётся к прежнему виду.
   ========================================================== */
/* ---------- 1. Цвета и шрифты ---------- */
html {
    --cs-yellow: #F5C400;
    --cs-yellow-ink: #8F6E00;
    --cs-bg: #F6F6F8;
    --cs-surface: #FFFFFF;
    --cs-surface2: #ECECF0;
    --cs-text: #16161C;
    --cs-text2: #4A4A55;
    --cs-muted: #5E5E6B;
    --cs-line: #DCDCE3;
    --cs-shadow: 0 10px 28px rgba(20,20,40,.10);
    --cs-display: 'Unbounded','Manrope',Arial,sans-serif;
    --cs-body: 'Manrope',Arial,Helvetica,sans-serif;
    --cs-skull: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 32 32%22%3E%3Cpath fill=%22%2316161C%22 d=%22M16 3C9 3 5 8 5 14c0 4 2 6 4 7v4a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-4c2-1 4-3 4-7 0-6-4-11-11-11z%22/%3E%3Ccircle cx=%2211.5%22 cy=%2214%22 r=%223%22 fill=%22%23F5C400%22/%3E%3Ccircle cx=%2220.5%22 cy=%2214%22 r=%223%22 fill=%22%23F5C400%22/%3E%3Cpath d=%22M16 17.5l-1.6 3h3.2z%22 fill=%22%23F5C400%22/%3E%3Cpath d=%22M13 25v-3M16 25v-3M19 25v-3%22 stroke=%22%23F5C400%22 stroke-width=%221.4%22/%3E%3C/svg%3E");
    color-scheme: light;
}

html[data-theme="dark"] {
    --cs-yellow-ink: #F5C400;
    --cs-bg: #0B0B0F;
    --cs-surface: #17171E;
    --cs-surface2: #22222C;
    --cs-text: #F2F2F4;
    --cs-text2: #C9C9D1;
    --cs-muted: #8A8A96;
    --cs-line: #33333E;
    --cs-shadow: 0 10px 28px rgba(0,0,0,.45);
    --cs-skull: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 32 32%22%3E%3Cpath fill=%22%23F5C400%22 d=%22M16 3C9 3 5 8 5 14c0 4 2 6 4 7v4a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-4c2-1 4-3 4-7 0-6-4-11-11-11z%22/%3E%3Ccircle cx=%2211.5%22 cy=%2214%22 r=%223%22 fill=%22%230E0E12%22/%3E%3Ccircle cx=%2220.5%22 cy=%2214%22 r=%223%22 fill=%22%230E0E12%22/%3E%3Cpath d=%22M16 17.5l-1.6 3h3.2z%22 fill=%22%230E0E12%22/%3E%3Cpath d=%22M13 25v-3M16 25v-3M19 25v-3%22 stroke=%22%230E0E12%22 stroke-width=%221.4%22/%3E%3C/svg%3E");
    color-scheme: dark;
}

/* ---------- 2. Основа страницы ---------- */
html body, html body #wrapper, html body .wrapper-boxed {
    background: var(--cs-bg)!important;
    background-image: none!important;
    color: var(--cs-text);
    font-family: var(--cs-body)!important;
}

html body input,html body button,html body select,html body textarea {
    font-family: var(--cs-body)
}

@media (min-width: 1200px) {
    html body .wrapper-boxed .container, html body .wrapper-full .container, html body .container-fluid .container {
        max-width:1280px!important;
        padding: 4px 24px!important
    }
}

/* Старый анимированный логотип «kidnap» убираем, новый рисуется ниже */
html body section.content--layout, html body .word--kidnap {
    display: none!important
}

/* ---------- 3. Шапка ---------- */
html body .typeheader-33 {
    background: var(--cs-surface)!important;
    border-bottom: 1px solid var(--cs-line)!important
}

/* верхняя жёлтая полоса */
html body .typeheader-33 .header-top {
    background: var(--cs-yellow)!important;
    color: #111!important;
    font-size: 13px;
    font-weight: 700
}

html body .typeheader-33 .header-top a, html body .typeheader-33 .header-top .telephone {
    color: #111!important
}

html body .typeheader-33 .header-top .container {
    padding-top: 8px!important;
    padding-bottom: 8px!important
}

html body .typeheader-33 .header-top .row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0
}

html body .typeheader-33 .header-top .row::before, html body .typeheader-33 .header-top .row::after {
    display: none!important
}

html body .typeheader-33 .header-top [class*="col-"] {
    float: none;
    width: auto;
    padding: 0
}

html body .typeheader-33 .header-top-right {
    display: flex;
    justify-content: flex-end
}

/* основная строка: логотип · поиск · кнопки */
html body .typeheader-33 .header-middle {
    background: transparent!important;
    border: 0!important;
    padding: 18px 0!important
}

html body .typeheader-33 .header-middle .logo {
    position: relative;
    padding: 0 0 12px!important
}

@media (min-width: 768px) {
    html body .typeheader-33 .header-middle .container::before, html body .typeheader-33 .header-middle .container::after {
        display:none!important
    }

    html body .typeheader-33 .header-middle .container {
        display: flex;
        align-items: center;
        gap: 24px;
        flex-wrap: nowrap
    }

    html body .typeheader-33 .header-middle .logo {
        float: none!important;
        margin: 0!important;
        flex: 0 0 auto;
        width: auto!important
    }

    html body .typeheader-33 .header-middle .search-header-w {
        float: none!important;
        position: static!important;
        right: auto!important;
        left: auto!important;
        width: auto!important;
        margin: 0!important;
        flex: 1 1 auto;
        min-width: 0
    }

    html body .typeheader-33 .header-middle .midde-right {
        float: none!important;
        display: flex;
        align-items: center;
        gap: 10px;
        flex: 0 0 auto;
        margin: 0!important
    }
}

/* новый логотип C: череп + COOL + подпись */
html body .typeheader-33 .logo h1 {
    margin: 0!important;
    font-size: 0;
    line-height: 0
}

html body .typeheader-33 .logo h1 a {
    display: flex!important;
    align-items: center;
    gap: 12px;
    min-height: 48px;
    min-width: 150px;
    text-decoration: none!important
}

html body .typeheader-33 .logo h1 a::before {
    content: "";
    flex: none;
    width: 44px;
    height: 44px;
    background: var(--cs-skull) center/contain no-repeat
}

html body .typeheader-33 .logo h1 a::after {
    content: "COOL";
    font-family: var(--cs-display);
    font-weight: 700;
    font-size: 28px;
    line-height: 1;
    letter-spacing: -.01em;
    color: var(--cs-text)
}

html body .typeheader-33 .logo::after {
    content: "ПОДАРКИ И ГАДЖЕТЫ";
    position: absolute;
    left: 56px;
    bottom: 0;
    font-family: var(--cs-body);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .14em;
    line-height: 1;
    color: var(--cs-muted);
    white-space: nowrap
}

/* поиск */
html body .typeheader-33 #sosearchpro .search {
    align-items: center;
    float: none;
    width: 100%;
    margin: 0!important;
    padding: 4px!important;
    background: var(--cs-surface2)!important;
    border: 1px solid var(--cs-line)!important;
    border-radius: 999px!important
}

@media (min-width: 768px) {
    html body .typeheader-33 #sosearchpro .search {
        display:flex!important
    }
}

html body .typeheader-33 #sosearchpro .search input {
    flex: 1 1 auto;
    width: auto!important;
    height: 44px!important;
    padding: 0 20px!important;
    background: transparent!important;
    border: 0!important;
    border-radius: 0!important;
    box-shadow: none!important;
    color: var(--cs-text)!important;
    font-size: 15px
}

html body .typeheader-33 #sosearchpro .search input::placeholder {
    color: var(--cs-muted);
    opacity: 1
}

html body .typeheader-33 #sosearchpro .search button {
    flex: 0 0 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px!important;
    height: 44px!important;
    padding: 0!important;
    margin: 0!important;
    background: var(--cs-yellow)!important;
    color: #111!important;
    border: 0!important;
    border-radius: 50%!important;
    box-shadow: none!important;
    font-size: 16px
}

html body #sosearchpro .dropdown-menu {
    background: var(--cs-surface)!important;
    border: 1px solid var(--cs-line)!important;
    border-radius: 16px!important;
    box-shadow: var(--cs-shadow)!important;
    color: var(--cs-text)
}

/* кнопки справа: вход, сравнение, корзина */
html body .typeheader-33 .midde-right .link-lg, html body .typeheader-33 .midde-right .compare, html body .typeheader-33 .midde-right .shopping_cart {
    float: none!important;
    margin: 0!important;
    padding: 0!important;
    border: 0!important;
    background: none!important
}

html body .typeheader-33 .midde-right .link-lg a, html body .typeheader-33 .midde-right .compare a {
    display: inline-flex!important;
    align-items: center;
    gap: 8px;
    height: 44px;
    padding: 0 16px!important;
    border-radius: 999px;
    background: var(--cs-surface2)!important;
    color: var(--cs-text)!important;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none!important
}

html body .typeheader-33 .midde-right .link-lg i, html body .typeheader-33 .midde-right .compare i {
    margin: 0!important;
    font-size: 16px;
    color: inherit!important
}

html body .typeheader-33 .midde-right .compare span {
    display: none
}

html body .typeheader-33 .shopping_cart .btn-shopping-cart .top_cart {
    display: inline-flex!important;
    align-items: center;
    float: none!important;
    height: 44px;
    padding: 0 20px!important;
    background: var(--cs-yellow)!important;
    color: #111!important;
    border: 0!important;
    border-radius: 999px!important;
    font-weight: 700
}

html body .typeheader-33 .top_cart .shopcart {
    display: flex!important;
    align-items: center;
    gap: 10px;
    text-align: left
}

html body .typeheader-33 .top_cart .icon-c {
    display: inline-flex!important;
    align-items: center;
    width: auto!important;
    height: auto!important;
    background: none!important;
    line-height: 1
}

html body .typeheader-33 .top_cart .icon-c i {
    display: inline-block!important;
    font-size: 18px;
    color: #111!important
}

html body .typeheader-33 .top_cart .shopcart-inner {
    display: flex;
    flex-direction: column;
    line-height: 1.2
}

html body .typeheader-33 .top_cart .text-shopping-cart {
    margin: 0!important;
    font-size: 13px;
    font-weight: 700;
    color: #111!important;
    text-transform: none
}

html body .typeheader-33 .top_cart .total-shopping-cart {
    font-size: 11px;
    font-weight: 600;
    color: #111!important
}

html body .typeheader-33 .shoppingcart-box {
    background: var(--cs-surface)!important;
    border: 1px solid var(--cs-line)!important;
    border-radius: 16px!important;
    box-shadow: var(--cs-shadow)!important;
    color: var(--cs-text)
}

/* переключатель темы (создаётся скриптом) */
.cs-theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    margin-left: 12px;
    background: rgba(0,0,0,.12);
    color: #111;
    border: 0;
    border-radius: 50%;
    cursor: pointer
}

.cs-theme-toggle:hover {
    background: rgba(0,0,0,.22)
}

.cs-theme-toggle svg {
    width: 16px;
    height: 16px
}

.cs-theme-toggle.cs-floating {
    position: fixed;
    left: 16px;
    bottom: 16px;
    z-index: 9998;
    width: 44px;
    height: 44px;
    background: var(--cs-surface);
    color: var(--cs-text);
    border: 1px solid var(--cs-line);
    box-shadow: var(--cs-shadow)
}

/* ---------- 4. Главное меню (модуль SO Page Builder) ---------- */
html:root {
    --cm-bg: var(--cs-surface)
}

html body .cool-mega-menu {
    background: var(--cs-surface)!important;
    border-bottom: 1px solid var(--cs-line);
    overflow: visible!important
}

html body .cool-mega-menu::before, html body .cool-mega-menu::after, html body .cool-mega-menu .aurora-blob, html body .cool-mega-menu .cool-mega-menu-border {
    display: none!important
}

html body .cool-mega-menu .cool-pill {
    background: var(--cs-yellow)!important;
    box-shadow: none!important
}

html body .cool-menu-item>a {
    color: var(--cs-text2)!important;
    font-size: 14px;
    font-weight: 700
}

html body .cool-menu-item:hover>a, html body .cool-menu-item.is-open>a {
    color: #111!important
}

html body .cool-menu-item>a .chev {
    opacity: .6
}

html body .cool-menu-item:hover>a .chev, html body .cool-menu-item.is-open>a .chev {
    color: #111!important;
    opacity: 1
}

html body .cool-new-item>a {
    background: none!important;
    -webkit-text-fill-color: currentColor!important;
    animation: none!important;
    color: var(--cs-yellow-ink)!important
}

html body .cool-new-item:hover>a {
    color: #111!important
}

html body .cool-new-item>a::after {
    background: var(--cs-yellow-ink)!important;
    -webkit-text-fill-color: initial
}

/* выпадающие панели меню (JS переносит их в body) */
html body .cool-dropdown {
    background: var(--cs-surface)!important;
    border: 1px solid var(--cs-line)!important;
    border-radius: 20px!important;
    box-shadow: var(--cs-shadow)!important;
    -webkit-backdrop-filter: none!important;
    backdrop-filter: none!important
}

html body .cool-dropdown::before, html body .cool-dropdown::after {
    display: none!important
}

html body .cool-column h3 {
    color: var(--cs-muted)!important
}

html body .cool-column a {
    color: var(--cs-text2)!important
}

html body .cool-column a:hover, html body .cool-column a:focus-visible {
    color: var(--cs-text)!important
}

html body .cool-column a::before {
    background: var(--cs-surface2)!important
}

html body .cool-ico {
    background: var(--cs-surface2)!important;
    box-shadow: none!important
}

html body .cool-column a:hover .cool-ico, html body .cool-column a:focus-visible .cool-ico {
    background: var(--cs-yellow)!important;
    box-shadow: none!important
}

html body .cool-gifts-slider {
    background: var(--cs-surface2)!important;
    box-shadow: none!important;
    border-radius: 18px
}

/* мобильное меню */
@media (max-width: 768px) {
    html body :has(#mobileMenu) {
        background:var(--cs-bg)!important
    }

    html body .mobile-menu-container {
        background: var(--cs-bg)!important
    }

    html body #mobileMenu .mobile-menu-item {
        background: var(--cs-surface)!important;
        border-color: var(--cs-line)!important
    }

    html body #mobileMenu .mobile-menu-item.is-open {
        background: var(--cs-surface)!important;
        border-color: var(--cs-yellow)!important
    }

    html body #mobileMenu .mobile-menu-link, html body #mobileMenu .mobile-menu-link .cool-lbl {
        color: var(--cs-text)!important
    }

    html body #mobileMenu .mobile-menu-link.mobile-new-item {
        background: var(--cs-yellow)!important
    }

    html body #mobileMenu .mobile-menu-link.mobile-new-item, html body #mobileMenu .mobile-menu-link.mobile-new-item .cool-lbl {
        color: #111!important
    }

    html body #mobileMenu .mobile-menu-toggle {
        background: var(--cs-surface2)!important;
        color: var(--cs-text)!important
    }

    html body #mobileMenu .mobile-submenu-link, html body #mobileMenu .mobile-submenu-link:hover {
        background: var(--cs-surface2)!important;
        color: var(--cs-text)!important
    }

    html body #mobileMenu .mobile-submenu-heading, html body #mobileMenu .mobile-contact-title {
        color: var(--cs-muted)!important
    }

    html body #mobileMenu .mobile-contact-link {
        background: var(--cs-surface)!important;
        border-color: var(--cs-line)!important;
        color: var(--cs-text)!important
    }
}

/* ---------- 5. Подпорки старого Custom CSS, которые ломали сетку ---------- */
html body .col_nafd {
    background: transparent!important;
    top: 0!important;
    padding: 0!important
}

html body .stories.carousel {
    transform: none!important;
    left: 0!important;
    top: 0!important
}

html body .megamenu-style-dev {
    background: transparent!important;
    left: 0!important;
    top: 0!important;
    width: auto!important
}

html body .video-banner {
    width: 100%!important;
    left: 0!important;
    height: auto!important;
    aspect-ratio: 1231/320;
    border-radius: 28px;
    overflow: hidden
}

html body .video-banner .overlay h1 {
    font-family: var(--cs-display);
    font-size: clamp(20px,3.2vw,36px);
    text-align: center;
    padding: 0 16px
}

html body .row_un5z img {
    display: block;
    border-radius: 24px
}

/* ---------- 6. Заголовки блоков ---------- */
html body .modtitle {
    margin: 0 0 20px!important;
    padding: 0!important;
    background: none!important;
    border: 0!important;
    font-family: var(--cs-display)!important;
    font-size: 26px!important;
    font-weight: 700;
    line-height: 1.2;
    text-align: left!important;
    text-transform: none!important;
    color: var(--cs-text)!important
}

html body .modtitle span {
    position: static!important;
    display: inline!important;
    padding: 0!important;
    background: none!important;
    color: inherit!important;
    font-family: inherit!important;
    font-size: inherit!important;
    font-weight: inherit!important;
    line-height: inherit!important;
    text-transform: none!important;
    text-shadow: none!important;
    letter-spacing: inherit!important
}

html body .modtitle::before, html body .modtitle::after {
    display: none!important
}

/* ---------- 7. Вкладки и карточки товаров ---------- */
html body .listingtab-layout33 {
    background: transparent!important;
    margin-bottom: 56px
}

html body .listingtab-layout33 .so-listing-tabs .ltabs-tabs-container {
    padding: 0;
    margin: 0 0 20px;
    border: 0!important;
    background: none!important
}

html body .listingtab-layout33 .so-listing-tabs .ltabs-tabs-container, html body .listingtab-layout33 .so-listing-tabs .ltabs-tabs-wrap {
    display: block!important;
    width: 100%!important;
    text-align: left!important
}

html body .listingtab-layout33 .so-listing-tabs .ltabs-tabs-container .ltabs-tabs {
    display: flex!important;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-start!important;
    text-align: left!important;
    float: none!important;
    margin: 0!important;
    padding: 0!important;
    border: 0!important;
    list-style: none
}

html body .listingtab-layout33 li.ltabs-tab {
    float: none!important;
    margin: 0!important;
    padding: 0!important;
    border: 0!important;
    background: none!important
}

html body .listingtab-layout33 li.ltabs-tab::before, html body .listingtab-layout33 li.ltabs-tab::after {
    display: none!important
}

html body .listingtab-layout33 li.ltabs-tab>span {
    display: inline-flex!important;
    align-items: center;
    height: auto!important;
    min-height: 44px;
    padding: 0 20px!important;
    background: var(--cs-surface2)!important;
    color: var(--cs-text2)!important;
    border: 0!important;
    border-radius: 999px;
    font-size: 15px!important;
    font-weight: 600!important;
    line-height: 1.2!important;
    text-transform: none!important
}

html body .listingtab-layout33 li.ltabs-tab>span::before, html body .listingtab-layout33 li.ltabs-tab>span::after {
    display: none!important
}

html body .listingtab-layout33 li.ltabs-tab:hover>span, html body .listingtab-layout33 li.ltabs-tab.tab-sel>span {
    background: var(--cs-yellow)!important;
    color: #111!important
}

/* сетка вместо float-колонок темы */
html body .listingtab-layout33 .ltabs-items-inner {
    display: grid!important;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 24px;
    margin: 0!important;
    padding: 0!important;
    align-items: stretch
}

html body .listingtab-layout33 .ltabs-items-inner>[class*="clr"] {
    display: none!important
}

html body .listingtab-layout33 .ltabs-items-inner .ltabs-item {
    display: flex;
    float: none!important;
    clear: none!important;
    width: auto!important;
    max-width: none!important;
    min-width: 0px;
    margin: 0!important;
    padding: 0!important;
}

html body .listingtab-layout33 .ltabs-items-inner .ltabs-item .item-inner {
    display: flex;
    flex: 1 1 100%;
    min-width: 0px;
    margin: 0!important;
    padding: 0!important
}

html body .listingtab-layout33 .product-item-container {
    display: flex;
    flex-direction: column;
    flex: 1 1 100%;
    min-width: 0;
    margin: 0!important;
    padding: 14px!important;
    background: var(--cs-surface)!important;
    border: 1px solid var(--cs-line)!important;
    border-radius: 20px!important;
    box-shadow: none!important;
    overflow: hidden;
    transition: transform .2s ease,box-shadow .2s ease,border-color .2s ease
}

html body .listingtab-layout33 .product-item-container:hover {
    transform: translateY(-3px);
    border-color: var(--cs-yellow)!important;
    box-shadow: var(--cs-shadow)!important
}

html body .listingtab-layout33 .product-item-container .left-block {
    position: relative;
    float: none!important;
    width: 100%!important;
    margin: 0!important;
    padding: 0!important;
    t;border: 0!important;
}

html body .listingtab-layout33 .product-image-container {
    display: block;
    margin: 0!important;
    border: 0!important;
    border-radius: 14px;
    overflow: hidden;
    background: var(--cs-surface2)!important
}

html body .listingtab-layout33 .product-image-container a {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1/1;
}

html body .listingtab-layout33 .product-image-container img {
    display: block;
    width: 100%!important;
    height: 100%!important;
    max-width: none;
    object-fit: contain;
}

html[data-theme="dark"] body .listingtab-layout33 .product-image-container {
    background: #2A2A34!important
}

html body .listingtab-layout33 .product-item-container .right-block {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    float: none!important;
    width: 100%!important;
    margin: 0!important;
    padding: 25px 6px 6px!important;
    text-align: left!important;
    border: 0!important;
}

html body .listingtab-layout33 .product-item-container .caption {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: 0!important;
    text-align: left!important
}

html body .listingtab-layout33 .product-item-container .caption h4 {
    margin: 0 0 8px!important;
    min-height: 2.7em;
    font-family: var(--cs-body)!important;
    font-size: 16px!important;
    font-weight: 700;
    line-height: 1.35;
    text-align: left;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical
}

html body .listingtab-layout33 .product-item-container .caption h4 a {
    color: var(--cs-text)!important
}

html body .listingtab-layout33 .product-item-container .caption .rating {
    margin: 0 0 8px!important
}

html body .listingtab-layout33 .product-item-container .caption .rating .fa-star, html body .listingtab-layout33 .product-item-container .caption .rating .fa-star-o {
    color: var(--cs-yellow-ink)
}

html body .listingtab-layout33 .product-item-container .price {
    margin: auto 0 0!important;
    padding-top: 10px;
    font-family: var(--cs-display)!important;
    font-size: 20px!important;
    font-weight: 500;
    line-height: 1.2;
    color: var(--cs-text)!important
}

html body .listingtab-layout33 .product-item-container .price .price-new {
    color: var(--cs-text)!important
}

html body .listingtab-layout33 .product-item-container .price .price-old {
    color: var(--cs-muted)!important;
    font-size: 13px
}

html body .listingtab-layout33 .product-item-container .detail {
    display: none!important
}

html body .listingtab-layout33 .button-group .btn-button {
    background: var(--cs-surface)!important;
    color: var(--cs-text)!important;
    border: 1px solid var(--cs-line)!important;
    border-radius: 50%!important;
    box-shadow: var(--cs-shadow)
}

html body .listingtab-layout33 .button-group .btn-button:hover {
    background: var(--cs-yellow)!important;
    color: #111!important;
    border-color: var(--cs-yellow)!important
}

@media (max-width: 1199px) {
    html body .listingtab-layout33 .ltabs-items-inner {
        grid-template-columns:repeat(3,minmax(0,1fr))
    }
}

@media (max-width: 767px) {
    html body .listingtab-layout33 .ltabs-items-inner {
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap: 12px
    }

    html body .listingtab-layout33 .product-item-container {
        padding: 10px!important
    }

    html body .listingtab-layout33 .product-item-container .caption h4 {
        font-size: 14px!important
    }

    html body .listingtab-layout33 .product-item-container .price {
        font-size: 17px!important
    }
}

/* кнопка «Загрузить ещё» */
html body .listingtab-layout33 .ltabs-loadmore {
    margin: 32px 0 0!important
}

html body .listingtab-layout33 .so-listing-tabs .wap-listing-tabs .ltabs-items-container .ltabs-loadmore .ltabs-loadmore-btn {
    display: inline-flex!important;
    align-items: center;
    gap: 8px;
    min-height: 48px;
    padding: 0 32px!important;
    background: var(--cs-yellow)!important;
    color: #111!important;
    border-radius: 999px!important;
    font-size: 14px;
    font-weight: 700;
    line-height: 1!important;
    text-transform: none!important
}

html body .listingtab-layout33 .so-listing-tabs .wap-listing-tabs .ltabs-items-container .ltabs-loadmore .ltabs-loadmore-btn::before {
    display: none!important
}

html body .listingtab-layout33 .so-listing-tabs .wap-listing-tabs .ltabs-items-container .ltabs-loadmore .ltabs-loadmore-btn:hover {
    background: var(--cs-text)!important;
    color: var(--cs-bg)!important
}

/* ---------- 8. Отзывы ---------- */
html body .ex-reviews__head {
    margin: 0 0 20px;
    font-family: var(--cs-display);
    font-size: 26px;
    font-weight: 700;
    text-align: left;
    color: var(--cs-text)
}

html body .ex-reviews__carousel-inner-item {
    background: var(--cs-surface)!important;
    border: 1px solid var(--cs-line)!important;
    border-radius: 20px!important;
    box-shadow: none!important;
    color: var(--cs-text)
}

html body .ex-review-name, html body .ex-reviews__item-title a {
    color: var(--cs-text)!important
}

html body .ex-review-date, html body .votes-caption {
    color: var(--cs-muted)!important
}

html body .ex-reviews__item-text {
    color: var(--cs-text2)!important
}

/* ---------- 9. Футер (блок #cool-footer) ---------- */
html body .typefooter-33 {
    background: var(--cs-bg)!important
}

html body #cool-footer {
    margin-top: 56px;
    background: var(--cs-surface)!important;
    border-top: 1px solid var(--cs-line)
}

html body #cool-footer::before, html body #cool-footer .cf-glow, html body #cool-footer .cf-grid-bg, html body #cool-footer .cf-particles, html body #cool-footer .cf-corner {
    display: none!important
}

html body #cool-footer .cf-logo {
    background: none!important;
    -webkit-text-fill-color: currentColor!important;
    color: var(--cs-text)!important;
    animation: none!important;
    font-family: var(--cs-display)!important;
    font-size: 22px!important;
    letter-spacing: .02em!important
}

html body #cool-footer .cf-logo::after {
    display: none!important
}

html body #cool-footer .cf-tagline {
    color: var(--cs-muted)!important
}

html body #cool-footer .cf-tagline b {
    color: var(--cs-text)!important
}

html body #cool-footer .cf-status {
    background: var(--cs-surface2)!important;
    border-color: var(--cs-line)!important;
    color: var(--cs-text2)!important
}

html body #cool-footer .cf-col-title {
    color: var(--cs-text)!important;
    letter-spacing: .12em!important
}

html body #cool-footer .cf-col-title::after {
    background: var(--cs-yellow)!important
}

html body #cool-footer .cf-col ul li a {
    color: var(--cs-muted)!important
}

html body #cool-footer .cf-col ul li a:hover {
    color: var(--cs-text)!important
}

html body #cool-footer .cf-contact-item {
    background: var(--cs-surface2)!important;
    border-color: var(--cs-line)!important
}

html body #cool-footer .cf-contact-item:hover {
    background: var(--cs-surface2)!important;
    border-color: var(--cs-yellow)!important;
    box-shadow: none!important
}

html body #cool-footer .cf-cicon {
    background: var(--cs-yellow)!important
}

html body #cool-footer .cf-cicon svg {
    fill: #111!important
}

html body #cool-footer .cf-clabel {
    color: var(--cs-muted)!important
}

html body #cool-footer .cf-cvalue, html body #cool-footer .cf-cvalue a {
    color: var(--cs-text)!important
}

html body #cool-footer .cf-social-bar {
    border-color: var(--cs-line)!important
}

html body #cool-footer .cf-social-label {
    color: var(--cs-muted)!important
}

html body #cool-footer .cf-social-btn {
    background: var(--cs-surface2)!important;
    border-color: var(--cs-line)!important
}

html body #cool-footer .cf-social-btn svg {
    fill: var(--cs-text2)!important
}

html body #cool-footer .cf-social-btn:hover svg {
    fill: #fff!important
}

html body #cool-footer .cf-copy, html body #cool-footer .cf-made, html body #cool-footer .cf-bottom-links a {
    color: var(--cs-muted)!important
}

html body #cool-footer .cf-copy span {
    color: var(--cs-text)!important
}

/* ---------- 10. Плавающие кнопки ---------- */
html body .floating-call-btn {
    background: #1FA45A!important;
    box-shadow: 0 6px 18px rgba(31,164,90,.45)!important
}

html body #so-groups.so-groups-sticky>a {
    background: var(--cs-surface)!important;
    color: var(--cs-text)!important;
    border: 1px solid var(--cs-line)!important;
    box-shadow: none!important
}

html body #so-groups.so-groups-sticky>a:hover {
    background: var(--cs-yellow)!important;
    color: #111!important
}

/* ---------- 11. Доступность ---------- */
html body a:focus-visible, html body button:focus-visible, html body input:focus-visible {
    outline: 2px solid var(--cs-yellow-ink);
    outline-offset: 2px
}

@media (prefers-reduced-motion:reduce) {
    html body .listingtab-layout33 .product-item-container {
        transition: none
    }
}

/* ---------- 12. v1.0.2: отступы блоков, баннер, заголовки ---------- */
/* блоки внутри .container-fluid получают тот же отступ 24px, что и остальные */
html body .so-page-builder .container-fluid .row-style {
    margin-left: 0!important;
    margin-right: 0!important;
    padding-left: 24px!important;
    padding-right: 24px!important;
    box-sizing: border-box
}

html body .so-page-builder .container-fluid .col-style {
    padding-left: 0!important;
    padding-right: 0!important
}

/* верхний баннер: по ширине контента и со скруглением */
html body .row_un5z {
    margin-bottom: 32px!important
}

html body .row_un5z a {
    display: block;
    overflow: hidden;
    border-radius: 24px
}

html body .row_un5z img {
    display: block;
    width: 100%!important;
    height: auto;
    border-radius: 24px!important
}

/* заголовки блоков: жёлтая метка слева */
html body .modtitle {
    display: flex!important;
    align-items: center
}

html body .modtitle span::before, html body .ex-reviews__head::before {
    content: "";
    display: inline-block;
    width: 10px;
    height: 26px;
    margin-right: 14px;
    border-radius: 5px;
    background: var(--cs-yellow);
    vertical-align: -3px
}

html body .ex-reviews__head {
    display: flex;
    align-items: center
}

/* тёмная полоса над футером: фон и рамки контейнера футера */
html body .footer-container, html body .footer-container .footer-main {
    background: var(--cs-bg)!important;
    border: 0!important
}

/* ---------- 13. v1.1.0: футер, линии в шапке ---------- */
/* футер на всю ширину контейнера (отступ для блоков главной ему не нужен) */
html body footer .so-page-builder .container-fluid .row-style {
    padding-left: 0!important;
    padding-right: 0!important
}

/* синяя линия над футером: border-top: 2px solid #09abfe в теме */
html body footer.footer-container.typefooter-33 {
    border-top: 0!important;
    border-bottom: 0!important
}

/* вертикальные линии и рамки вокруг логотипа и поиска */
html body .typeheader-33 .header-middle .logo, html body .typeheader-33 .header-middle .search-header-w, html body .typeheader-33 .header-middle #sosearchpro, html body .typeheader-33 .header-middle .midde-right {
    border: 0!important;
    box-shadow: none!important;
    outline: 0!important
}

/* ---------- 14. v1.1.2: исправления тёмной темы ---------- */
/* фон всей страницы, включая поля слева и справа от основного блока */
html {
    background: var(--cs-bg)!important
}

/* заголовки блоков: у темы правила с #content, поэтому берём тот же уровень специфичности */
html body #content .modtitle, html body #content .modtitle span, html body #content .cs-cats__title, html body #content .ex-reviews__head, html body #content .cs-hero__title {
    color: var(--cs-text)!important;
    -webkit-text-fill-color: var(--cs-text)!important;
    opacity: 1!important;
    text-shadow: none!important
}

/* шапка и меню: перебиваем возможные белые фоны темы */
html body #header, html body #header .header-middle, html body #header .header-bottom {
    background: var(--cs-surface)!important;
    border-color: var(--cs-line)!important
}

html body #header .header-bottom {
    padding: 0!important;
    min-height: 0!important;
    border: 0!important
}

html body #content .cool-mega-menu {
    background: var(--cs-surface)!important
}

html body #content .cool-menu-item>a {
    color: var(--cs-text2)!important
}

html body #content .cool-menu-item:hover>a, html body #content .cool-menu-item.is-open>a {
    color: #111!important
}

html body #content .cool-new-item>a {
    color: var(--cs-yellow-ink)!important
}

html body #content .cool-new-item:hover>a {
    color: #111!important
}

/* ---------- 15. v1.1.4: тёмная тема, белые подложки под блоками главной ---------- */
/* Обёртки контента в теме белые; в тёмной теме делаем их прозрачными, чтобы виден был тёмный фон страницы.
   В светлой теме это правило не действует. */
html[data-theme="dark"] body #content, html[data-theme="dark"] body #wrapper .so-page-builder, html[data-theme="dark"] body #wrapper .so-page-builder .container-fluid, html[data-theme="dark"] body #wrapper .so-page-builder .container, html[data-theme="dark"] body #wrapper .so-page-builder .row, html[data-theme="dark"] body #wrapper .so-page-builder [class*="col-"], html[data-theme="dark"] body #wrapper .so-page-builder .module, html[data-theme="dark"] body .main-container, html[data-theme="dark"] body .container-wrap, html[data-theme="dark"] body #wrapper > .container, html[data-theme="dark"] body #wrapper > .container-fluid {
    background: transparent!important
}

/* ==========================================================
   16. v1.2.0: страницы категории и товара
   Работает в обеих темах. Названия классов взяты из файла темы.
   ========================================================== */
/* ---- хлебные крошки: светло-серая полоса и чёрная плашка 58% заменены на аккуратную строку ---- */
html body .breadcrumbs {
    background: var(--cs-bg)!important;
    border-bottom: 1px solid var(--cs-line)
}

html body .breadcrumbs ul.breadcrumb {
    display: block!important;
    width: auto!important;
    margin: 0!important;
    padding: 14px 0!important;
    background: transparent!important;
    line-height: 1.4
}

html body .breadcrumbs ul.breadcrumb li {
    color: var(--cs-muted)
}

html body .breadcrumbs ul.breadcrumb li a {
    color: var(--cs-muted)!important;
    font-size: 14px
}

html body .breadcrumbs ul.breadcrumb li:last-child a {
    color: var(--cs-text)!important;
    font-weight: 700
}

html body .breadcrumbs ul.breadcrumb li a:hover {
    color: var(--cs-yellow-ink)!important
}

/* ---- заголовок категории ---- */
html body .title-category {
    color: var(--cs-text)!important;
    font-family: var(--cs-display)!important;
    font-size: 26px!important;
    font-weight: 700;
    text-transform: none!important;
    border-bottom: 1px solid var(--cs-line)!important;
    padding-bottom: 14px!important;
    margin-bottom: 24px!important
}

html body .title-category::after {
    background-color: var(--cs-yellow)!important;
    height: 3px;
    width: 80px;
    bottom: -1px
}

/* ---- панель над списком и под ним: вид сетки, сортировка, сравнение, страницы ---- */
html body .filters-panel label {
    color: var(--cs-muted)!important
}

html body .filters-panel .list-view .btn-gridview {
    color: var(--cs-muted)!important
}

html body .filters-panel .list-view button.btn {
    background: var(--cs-surface2)!important;
    border: 1px solid var(--cs-line)!important;
    border-radius: 10px!important
}

html body .filters-panel .list-view button.btn i {
    color: var(--cs-text2)!important
}

html body .filters-panel .list-view button.btn:hover, html body .filters-panel .list-view button.btn.active {
    background: var(--cs-yellow)!important;
    border-color: var(--cs-yellow)!important
}

html body .filters-panel .list-view button.btn:hover i, html body .filters-panel .list-view button.btn.active i {
    color: #111!important
}

html body .filters-panel select, html body .filters-panel .form-control, html body .filters-panel .product-compare a, html body .filters-panel .product-compare .btn {
    background: var(--cs-surface2)!important;
    color: var(--cs-text)!important;
    border: 1px solid var(--cs-line)!important;
    border-radius: 10px!important;
    box-shadow: none!important
}

html body .filters-panel.product-filter-bottom {
    border-top: 1px solid var(--cs-line)!important
}

html body .box-pagination .text-right, html body .filters-panel .text-right {
    color: var(--cs-muted)
}

html body .pagination>li>a, html body .pagination>li>span {
    background: var(--cs-surface)!important;
    color: var(--cs-text2)!important;
    border: 1px solid var(--cs-line)!important;
    border-radius: 10px!important
}

html body .pagination>li a:hover, html body .pagination>li span:hover {
    background: var(--cs-yellow)!important;
    color: #111!important;
    border-color: var(--cs-yellow)!important
}

html body .pagination>li.active, html body .pagination>li.active span, html body .pagination>li.active a {
    background: var(--cs-yellow)!important;
    color: #111!important;
    border-color: var(--cs-yellow)!important
}

/* ---- карточки в категории, «похожих товарах», результатах поиска ---- */
html body .products-list .product-layout .product-item-container {
    background: var(--cs-surface)!important;
    border: 1px solid var(--cs-line)!important;
    border-radius: 20px!important;
    box-shadow: none!important;
    overflow: hidden
}

html body .products-list .product-layout .product-item-container:hover {
    border-color: var(--cs-yellow)!important;
    box-shadow: var(--cs-shadow)!important
}

html body .products-list .product-layout .product-image-container {
    border-radius: 14px;
    overflow: hidden
}

html body .products-list .product-layout .caption h4, html body .products-list .product-layout .caption h4 a {
    color: var(--cs-text)!important;
    font-family: var(--cs-body)!important;
    font-weight: 700
}

html body .products-list .product-layout .caption .description, html body .products-list .product-layout .caption p {
    color: var(--cs-muted)!important
}

html body .products-list .product-layout .price, html body .products-list .product-layout .price .price-new {
    color: var(--cs-text)!important;
    font-family: var(--cs-display)!important;
    font-weight: 500
}

html body .products-list .product-layout .price .price-old {
    color: var(--cs-muted)!important
}

html body .products-list .product-layout .rating .fa-star, html body .products-list .product-layout .rating .fa-star-o {
    color: var(--cs-yellow-ink)
}

html body .products-list .product-layout .button-group .btn-button {
    background: var(--cs-surface)!important;
    color: var(--cs-text)!important;
    border: 1px solid var(--cs-line)!important;
    border-radius: 50%!important
}

html body .products-list .product-layout .button-group .btn-button:hover {
    background: var(--cs-yellow)!important;
    color: #111!important;
    border-color: var(--cs-yellow)!important
}

/* ---- страница товара ---- */
html body .product-view .content-product-right .title-product h1 {
    color: var(--cs-text)!important;
    -webkit-text-fill-color: var(--cs-text)!important;
    background: none!important;
    font-family: var(--cs-display)!important;
    font-size: 28px!important;
    font-weight: 700!important;
    line-height: 1.2;
    text-transform: none!important
}

html body .product-view .content-product-right .box-review, html body .product-view .content-product-right .box-review a, html body .product-view .content-product-right .box-review .rating {
    color: var(--cs-muted)!important
}

html body .product-view .content-product-right .box-review .rating .fa-star, html body .product-view .content-product-right .box-review .rating .fa-star-o {
    color: var(--cs-yellow-ink)!important
}

html body .product_page_price .price, html body .product_page_price .price-new {
    color: var(--cs-text)!important;
    font-family: var(--cs-display)!important;
    font-size: 32px!important;
    font-weight: 700!important
}

html body .product_page_price .price-old, html body .product_page_price .price-tax {
    color: var(--cs-muted)!important
}

html body .product-view .content-product-right .product-box-desc, html body .product-view .content-product-right .product-box-desc span, html body .product-view .content-product-right .product-box-desc .brand a {
    color: var(--cs-text2)!important
}

html body .product-view .content-product-right .product-box-desc .brand a:hover {
    color: var(--cs-yellow-ink)!important
}

html body .product-view .content-product-right label {
    color: var(--cs-text2)!important
}

html body .product-view .content-product-right input.form-control, html body .product-view .content-product-right select.form-control, html body .product-view .content-product-right .quantity-control input {
    background: var(--cs-surface2)!important;
    color: var(--cs-text)!important;
    border: 1px solid var(--cs-line)!important;
    border-radius: 10px!important;
    box-shadow: none!important
}

/* кнопка «В корзину» (кнопки «Купить в 1 клик» и «Купить» делает сторонний модуль, их подстроим по HTML страницы) */
html body #button-cart {
    background: var(--cs-yellow)!important;
    color: #111!important;
    border: 0!important;
    border-radius: 999px!important;
    font-weight: 700!important;
    box-shadow: none!important
}

html body #button-cart:hover {
    background: var(--cs-text)!important;
    color: var(--cs-bg)!important
}

/* вкладки «Описание» и «Отзывы» и сама область описания */
html body .producttab .tabsslider.horizontal-tabs .nav-tabs {
    background: var(--cs-surface)!important;
    border: 1px solid var(--cs-line)!important;
    border-radius: 20px 20px 0 0!important
}

html body .producttab .tabsslider.horizontal-tabs .nav-tabs li a {
    background: var(--cs-surface2)!important;
    color: var(--cs-text2)!important;
    border: 1px solid var(--cs-line)!important
}

html body .producttab .tabsslider.horizontal-tabs .nav-tabs li.active a, html body .producttab .tabsslider.horizontal-tabs .nav-tabs li:hover a {
    background: var(--cs-yellow)!important;
    border-color: var(--cs-yellow)!important;
    color: #111!important
}

html body .producttab .tabsslider.horizontal-tabs .tab-content, html body .producttab .tab-content>.tab-pane {
    background: var(--cs-surface)!important;
    color: var(--cs-text2)!important;
    border: 1px solid var(--cs-line);
    border-top: 0;
    border-radius: 0 0 20px 20px;
    padding: 24px!important
}

html body .producttab .tab-content h1, html body .producttab .tab-content h2, html body .producttab .tab-content h3, html body .producttab .tab-content h4 {
    color: var(--cs-text)!important
}

html[data-theme="dark"] body .producttab .tab-content p, html[data-theme="dark"] body .producttab .tab-content li, html[data-theme="dark"] body .producttab .tab-content td {
    color: var(--cs-text2)
}

/* ---------- 17. v1.3.0: доработки страниц товара и категории ---------- */
/* текст описания товара в тёмной теме: у части текста тёмный цвет прописан прямо в разметке.
   Исключены элементы внутри блоков со своим фоном (например, тёмная плашка «Обратите внимание»). */
html[data-theme="dark"] body .producttab .tab-content :where(p,li,span,td,th,strong,b,em,font):not([style*="background"] *) {
    color: var(--cs-text2)!important
}

/* названия товаров в карточках категории: уровень специфичности как у темы */
html body #content .products-list .product-layout .product-item-container .caption h4 a, html body #content .products-list .product-layout .product-item-container .caption h4 {
    color: var(--cs-text)!important
}

html body #content .products-list .product-layout .product-item-container .caption h4 a:hover {
    color: var(--cs-yellow-ink)!important
}

/* подпись «В виде сетки:» была белым прямоугольником */
html body .filters-panel .list-view .btn-gridview.btn-gridview {
    background: transparent!important;
    border: 0!important;
    box-shadow: none!important;
    color: var(--cs-muted)!important
}

/* ---------- 18. v1.3.3: мобильная версия ---------- */
/* каталог, поиск, производители: две карточки в ряд вместо одной большой */
@media (max-width: 767px) {
    html body .products-list > .product-layout.product-grid {
        width:50%!important;
        float: left;
        clear: none;
        padding-left: 6px!important;
        padding-right: 6px!important;
        margin-bottom: 12px
    }

    html body .products-list:has(> .product-layout.product-grid) {
        display: flex!important;
        flex-wrap: wrap;
        align-items: stretch
    }

    html body .products-list:has(> .product-layout.product-grid)::before, html body .products-list:has(> .product-layout.product-grid)::after {
        display: none!important
    }

    html body .products-list > .product-layout.product-grid .product-item-container {
        height: 100%;
        padding: 10px!important;
        border-radius: 16px!important
    }

    html body .products-list .product-layout .caption h4, html body .products-list .product-layout .caption h4 a {
        font-size: 13px!important;
        line-height: 1.3
    }

    html body .products-list .product-layout .price, html body .products-list .product-layout .price .price-new {
        font-size: 16px!important
    }

    /* в шапке на телефоне только значки, без подписей */
    html body .typeheader-33 .midde-right .link-lg span {
        display: none
    }

    html body .typeheader-33 .top_cart .text-shopping-cart {
        display: none
    }
}

/* ---------- чёрная полоса над подвалом ----------
   Обёртки подвала в Page Builder могли получить чёрный фон из настроек строки. Подвал рисует сам себя. */
html body footer.footer-container .so-page-builder .container-fluid, html body footer.footer-container .so-page-builder .container, html body footer.footer-container .so-page-builder .row, html body footer.footer-container .so-page-builder [class*="col-"], html body footer.footer-container .so-page-builder .module {
    background: transparent!important
}

/* ---------- 19. v1.3.4: мобильная шапка и меню за кнопкой ---------- */
.cs-burger,.cs-menu-close {
    display: none
}

@media (max-width: 767px) {
    /* жёлтая полоса: телефон слева, переключатель темы справа */ html body .typeheader-33 .header-top-left {
        display:block!important;
        flex: 1 1 auto;
        width: auto
    }

    html body .typeheader-33 .header-top .telephone {
        display: block!important;
        font-size: 0
    }

    html body .typeheader-33 .header-top .telephone a {
        font-size: 13px;
        font-weight: 800
    }

    /* основная строка: бургер · логотип · поиск · вход · корзина */
    html body .typeheader-33 .header-middle {
        padding: 10px 0!important
    }

    html body .typeheader-33 .header-middle .container {
        position: relative;
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        gap: 8px
    }

    html body .typeheader-33 .header-middle .container::before, html body .typeheader-33 .header-middle .container::after {
        display: none!important
    }

    html body .typeheader-33 .header-middle .logo {
        float: none!important;
        flex: 1 1 0;
        min-width: 0;
        width: auto!important;
        margin: 0!important;
        text-align: left
    }

    html body .typeheader-33 .header-middle .logo h1 a {
        min-width: 0;
        gap: 8px
    }

    html body .typeheader-33 .logo h1 a::before {
        width: 36px;
        height: 36px
    }

    html body .typeheader-33 .logo h1 a::after {
        font-size: 22px
    }

    html body .typeheader-33 .logo::after {
        left: 44px;
        font-size: 8px;
        letter-spacing: .1em
    }

    html body .typeheader-33 .header-middle .search-header-w {
        position: static!important;
        float: none!important;
        flex: 0 0 auto;
        width: auto!important;
        margin: 0!important;
        padding: 0!important
    }

    html body .typeheader-33 .header-middle .midde-right {
        float: none!important;
        display: flex;
        align-items: center;
        gap: 8px;
        flex: 0 0 auto;
        margin: 0!important
    }

    html body .typeheader-33 .search-header-w .icon-search {
        display: inline-flex!important;
        align-items: center;
        justify-content: center;
        width: 42px;
        height: 42px;
        line-height: 1;
        border-radius: 50%;
        background: var(--cs-surface2);
        cursor: pointer
    }

    html body .typeheader-33 .search-header-w .icon-search i {
        color: var(--cs-text);
        font-size: 17px
    }

    /* выпадающее окно поиска: на всю ширину шапки, под ней */
    html body .typeheader-33 .search-header-w #sosearchpro .search {
        position: absolute!important;
        top: calc(100% + 6px)!important;
        left: 15px!important;
        right: 15px!important;
        width: auto!important;
        z-index: 1000;
        box-shadow: var(--cs-shadow)
    }

    html body .typeheader-33 .midde-right .link-lg a {
        width: 42px;
        height: 42px;
        padding: 0!important;
        justify-content: center
    }

    html body .typeheader-33 .top_cart .items_cart2, html body .typeheader-33 .top_cart .items_carts {
        display: none
    }

    html body .typeheader-33 .shopping_cart .btn-shopping-cart .top_cart {
        height: 42px;
        padding: 0 14px!important
    }

    /* кнопка-бургер и меню на весь экран */
    .cs-burger {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        width: 42px;
        height: 42px;
        padding: 0;
        border: 0;
        border-radius: 50%;
        background: var(--cs-yellow);
        color: #111;
        cursor: pointer
    }

    .cs-burger svg {
        width: 20px;
        height: 20px
    }

    html body .mobile-menu-container {
        display: none!important
    }

    html.cs-menu-open {
        overflow: hidden
    }

    html.cs-menu-open body .mobile-menu-container {
        display: block!important;
        position: fixed!important;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 100000;
        min-height: 0!important;
        overflow-y: auto;
        padding: 68px 0 28px!important;
        border-radius: 0!important;
        background: var(--cs-bg)!important
    }

    html.cs-menu-open .cs-menu-close {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        position: fixed;
        top: 12px;
        right: 14px;
        z-index: 100001;
        height: 42px;
        padding: 0 18px;
        border: 0;
        border-radius: 999px;
        background: var(--cs-yellow);
        color: #111;
        font-family: inherit;
        font-size: 14px;
        font-weight: 800;
        cursor: pointer
    }
}

/* ---------- 20. v1.3.5: названия в каталоге, кнопки товара, отступы каталога на телефоне ---------- */
/* В каталоге и поиске название лежит в .right-block h4 a (а не в .caption, как на главной):
   тема задаёт ему цвет #222, поэтому в тёмной теме оно сливалось с карточкой. */
html body .products-list .product-item-container .right-block h4, html body .products-list .product-item-container .right-block h4 a {
    color: var(--cs-text)!important;
    font-family: var(--cs-body)!important;
    font-weight: 700
}

html body .products-list .product-item-container .right-block h4 a:hover {
    color: var(--cs-yellow-ink)!important
}

html body .products-list .product-item-container .right-block .price, html body .products-list .product-item-container .right-block .price .price-new {
    color: var(--cs-text)!important;
    font-family: var(--cs-display)!important;
    font-weight: 500
}

html body .products-list .product-item-container .right-block .price .price-old {
    color: var(--cs-muted)!important
}

html body .products-list .product-item-container .right-block .description, html body .products-list .product-item-container .right-block .description p {
    color: var(--cs-muted)!important
}

html body .products-list .product-item-container .right-block .rating .fa-star, html body .products-list .product-item-container .right-block .rating .fa-star-o {
    color: var(--cs-yellow-ink)
}

/* страница товара: «В корзину» и «Купить в 1 клик» в одном стиле (две овальные кнопки), лишнюю «Купить» прячет скрипт */
html body .cs-hide {
    display: none!important
}

html body #button-cart, html body .cs-btn-oneclick.cs-btn-oneclick {
    display: inline-flex!important;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    margin: 0 8px 8px 0;
    padding: 0 26px!important;
    border-radius: 999px!important;
    font-size: 14px!important;
    font-weight: 800!important;
    letter-spacing: .02em;
    line-height: 1!important;
    text-transform: uppercase;
    box-shadow: none!important
}

html body #button-cart {
    border: 2px solid var(--cs-yellow)!important
}

html body .cs-btn-oneclick.cs-btn-oneclick {
    background: transparent!important;
    color: var(--cs-text)!important;
    border: 2px solid var(--cs-text)!important
}

html body .cs-btn-oneclick.cs-btn-oneclick:hover {
    background: var(--cs-text)!important;
    color: var(--cs-bg)!important
}

/* телефон: у каталога и поиска есть поля слева и справа */
@media (max-width: 767px) {
    html body[class*="product-category"] #content, html body[class*="product-search"] #content, html body[class*="product-manufacturer"] #content, html body[class*="product-special"] #content {
        padding-left:12px!important;
        padding-right: 12px!important
    }

    html body .products-list .product-item-container .right-block h4, html body .products-list .product-item-container .right-block h4 a {
        font-size: 13px!important;
        line-height: 1.3
    }

    html body .products-list .product-item-container .right-block .price {
        font-size: 16px!important
    }

    html body .products-list .product-item-container .right-block {
        padding: 10px 4px 6px!important
    }
}

/* ==========================================================
   21. v1.3.6
   ========================================================== */
/* ---- шапка: поиск по центру, кнопка-лупа внутри поля, подпись логотипа не перекрывается ---- */
@media (min-width: 768px) {
    html body .typeheader-33 .header-middle .logo {
        min-width:250px
    }

    html body .typeheader-33 .header-middle .search-header-w {
        display: flex;
        justify-content: center
    }

    html body .typeheader-33 .header-middle #sosearchpro {
        width: 100%;
        max-width: 620px;
        margin: 0 auto
    }

    html body .typeheader-33 #sosearchpro .search {
        position: relative!important
    }

    html body .typeheader-33 #sosearchpro .search button {
        position: static!important;
        float: none!important;
        margin: 0!important;
        top: auto!important;
        right: auto!important;
        bottom: auto!important;
        left: auto!important;
        transform: none!important
    }
}

/* планшет и узкое окно: значки без подписей, чтобы всё помещалось */
@media (min-width: 768px) and (max-width:991px) {
    html body .typeheader-33 .midde-right .link-lg span {
        display:none
    }

    html body .typeheader-33 .midde-right .link-lg a {
        width: 44px;
        padding: 0!important;
        justify-content: center
    }

    html body .typeheader-33 .top_cart .text-shopping-cart, html body .typeheader-33 .top_cart .items_cart2, html body .typeheader-33 .top_cart .items_carts {
        display: none
    }
}

/* ---- вкладки «Бестселлеры / Новые поступления / По рейтингу»: без выпадающего списка и белой рамки ---- */
html body .listingtab-layout33 .so-listing-tabs .ltabs-tab-selected, html body .listingtab-layout33 .so-listing-tabs .ltabs-tab-arrow {
    display: none!important
}

html body .listingtab-layout33 .so-listing-tabs .ltabs-tabs-wrap, html body .listingtab-layout33 .so-listing-tabs .ltabs-tabs-wrap.ltabs-selectbox, html body .listingtab-layout33 .so-listing-tabs .ltabs-tabs-container {
    background: transparent!important;
    border: 0!important;
    box-shadow: none!important;
    padding: 0!important;
    height: auto!important;
    min-height: 0!important
}

@media (max-width: 991px) {
    /* на телефоне три кнопки в один ряд (если не помещаются, ряд прокручивается пальцем) */ html body .listingtab-layout33 .so-listing-tabs .ltabs-tabs-wrap .ltabs-tabs, html body .listingtab-layout33 .so-listing-tabs .ltabs-tabs-container .ltabs-tabs {
        position:static!important;
        display: flex!important;
        flex-wrap: nowrap!important;
        gap: 6px;
        width: 100%!important;
        max-height: none!important;
        overflow-x: auto;
        opacity: 1!important;
        visibility: visible!important;
        background: transparent!important;
        border: 0!important;
        box-shadow: none!important;
        padding: 0 0 4px!important;
        margin: 0!important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none
    }

    html body .listingtab-layout33 .so-listing-tabs .ltabs-tabs::-webkit-scrollbar {
        display: none
    }

    html body .listingtab-layout33 li.ltabs-tab {
        flex: 0 0 auto
    }

    html body .listingtab-layout33 li.ltabs-tab>span {
        min-height: 38px;
        padding: 0 14px!important;
        font-size: 13px!important;
        white-space: nowrap
    }
}

/* ---- отзывы на телефоне: не больше 4 строк текста ---- */
@media (max-width: 767px) {
    html body .ex-reviews__item-text {
        display:-webkit-box!important;
        -webkit-line-clamp: 4;
        -webkit-box-orient: vertical;
        overflow: hidden;
        max-height: none
    }
}

/* ---- единый вид кнопки «Оформить заказ / Перейти в корзину» ---- */
html body .btn-checkout, html body a.btn-checkout, html body #previewModal .btn {
    display: inline-flex!important;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 0 26px!important;
    border: 2px solid var(--cs-yellow)!important;
    border-radius: 999px!important;
    background: var(--cs-yellow)!important;
    color: #111!important;
    font-size: 14px!important;
    font-weight: 800!important;
    line-height: 1!important;
    text-transform: uppercase;
    text-decoration: none!important;
    box-shadow: none!important
}

html body .btn-checkout:hover, html body a.btn-checkout:hover, html body #previewModal .btn:hover {
    background: var(--cs-text)!important;
    border-color: var(--cs-text)!important;
    color: var(--cs-bg)!important
}

html body #previewModal .btn * {
    background: transparent!important;
    color: inherit!important
}

/* ---- окно «Добавлено в корзину! Что далее?» ---- */
html body #previewModal .modal-content {
    background: var(--cs-surface)!important;
    color: var(--cs-text)!important;
    border: 1px solid var(--cs-line)!important;
    border-radius: 24px!important;
    box-shadow: var(--cs-shadow)!important;
    overflow: hidden
}

html body #previewModal .modal-header {
    background: transparent!important;
    border-bottom: 1px solid var(--cs-line)!important;
    padding: 18px 24px
}

html body #previewModal .modal-title {
    color: var(--cs-text)!important;
    font-family: var(--cs-display)!important;
    font-size: 18px!important;
    font-weight: 700!important;
/* ==========================================================
   COOL Skin v1.3.7 — светлая тема по умолчанию, тёмная переключателем
   Все правила идут поверх SO-Emarket, родные файлы темы не меняются.
   Откат: удалить этот файл — сайт вернётся к прежнему виду.
   ========================================================== */

/* ---------- 1. Цвета и шрифты ---------- */
html{
  --cs-yellow:#F5C400;
  --cs-yellow-ink:#8F6E00;
  --cs-bg:#F6F6F8;
  --cs-surface:#FFFFFF;
  --cs-surface2:#ECECF0;
  --cs-text:#16161C;
  --cs-text2:#4A4A55;
  --cs-muted:#5E5E6B;
  --cs-line:#DCDCE3;
  --cs-shadow:0 10px 28px rgba(20,20,40,.10);
  --cs-display:'Unbounded','Manrope',Arial,sans-serif;
  --cs-body:'Manrope',Arial,Helvetica,sans-serif;
  --cs-skull:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 32 32%22%3E%3Cpath fill=%22%2316161C%22 d=%22M16 3C9 3 5 8 5 14c0 4 2 6 4 7v4a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-4c2-1 4-3 4-7 0-6-4-11-11-11z%22/%3E%3Ccircle cx=%2211.5%22 cy=%2214%22 r=%223%22 fill=%22%23F5C400%22/%3E%3Ccircle cx=%2220.5%22 cy=%2214%22 r=%223%22 fill=%22%23F5C400%22/%3E%3Cpath d=%22M16 17.5l-1.6 3h3.2z%22 fill=%22%23F5C400%22/%3E%3Cpath d=%22M13 25v-3M16 25v-3M19 25v-3%22 stroke=%22%23F5C400%22 stroke-width=%221.4%22/%3E%3C/svg%3E");
  color-scheme:light;
}
html[data-theme="dark"]{
  --cs-yellow-ink:#F5C400;
  --cs-bg:#0B0B0F;
  --cs-surface:#17171E;
  --cs-surface2:#22222C;
  --cs-text:#F2F2F4;
  --cs-text2:#C9C9D1;
  --cs-muted:#8A8A96;
  --cs-line:#33333E;
  --cs-shadow:0 10px 28px rgba(0,0,0,.45);
  --cs-skull:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 32 32%22%3E%3Cpath fill=%22%23F5C400%22 d=%22M16 3C9 3 5 8 5 14c0 4 2 6 4 7v4a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-4c2-1 4-3 4-7 0-6-4-11-11-11z%22/%3E%3Ccircle cx=%2211.5%22 cy=%2214%22 r=%223%22 fill=%22%230E0E12%22/%3E%3Ccircle cx=%2220.5%22 cy=%2214%22 r=%223%22 fill=%22%230E0E12%22/%3E%3Cpath d=%22M16 17.5l-1.6 3h3.2z%22 fill=%22%230E0E12%22/%3E%3Cpath d=%22M13 25v-3M16 25v-3M19 25v-3%22 stroke=%22%230E0E12%22 stroke-width=%221.4%22/%3E%3C/svg%3E");
  color-scheme:dark;
}

/* ---------- 2. Основа страницы ---------- */
html body,
html body #wrapper,
html body .wrapper-boxed{
 ??? background:var(--cs-bg)!important;
  background-image:none!important;
  color:var(--cs-text);
  font-family:var(--cs-body)!important;
}
html body input,html body button,html body select,html body textarea{font-family:var(--cs-body)}
@media (min-width:1200px){
  html body .wrapper-boxed .container,
  html body .wrapper-full .container,
  html body .container-fluid .container{max-width:1280px!important;padding:4px 24px!important}
}

/* Старый анимированный логотип «kidnap» убираем, новый рисуется ниже */
html body section.content--layout,
html body .word--kidnap{display:none!important}

/* ---------- 3. Шапка ---------- */
html body .typeheader-33{background:var(--cs-surface)!important;border-bottom:1px solid var(--cs-line)!important}

/* верхняя жёлтая полоса */
html body .typeheader-33 .header-top{background:var(--cs-yellow)!important;color:#111!important;font-size:13px;font-weight:700}
html body .typeheader-33 .header-top a,
html body .typeheader-33 .header-top .telephone{color:#111!important}
html body .typeheader-33 .header-top .container{padding-top:8px!important;padding-bottom:8px!important}
html body .typeheader-33 .header-top .row{display:flex;align-items:center;justify-content:space-between;margin:0}
html body .typeheader-33 .header-top .row::before,
html body .typeheader-33 .header-top .row::after{display:none!important}
html body .typeheader-33 .header-top [class*="col-"]{float:none;width:auto;padding:0}
html body .typeheader-33 .header-top-right{display:flex;justify-content:flex-end}

/* основная строка: логотип · поиск · кнопки */
html body .typeheader-33 .header-middle{background:transparent!important;border:0!important;padding:18px 0!important}
html body .typeheader-33 .header-middle .logo{position:relative;padding:0 0 12px!important}
@media (min-width:768px){
  html body .typeheader-33 .header-middle .container::before,
  html body .typeheader-33 .header-middle .container::after{display:none!important}
  html body .typeheader-33 .header-middle .container{display:flex;align-items:center;gap:24px;flex-wrap:nowrap}
  html body .typeheader-33 .header-middle .logo{float:none!important;margin:0!important;flex:0 0 auto;width:auto!important}
  html body .typeheader-33 .header-middle .search-header-w{float:none!important;position:static!important;right:auto!important;left:auto!important;width:auto!important;margin:0!important;flex:1 1 auto;min-width:0}
  html body .typeheader-33 .header-middle .midde-right{float:none!important;display:flex;align-items:center;gap:10px;flex:0 0 auto;margin:0!important}
}

/* новый логотип C: череп + COOL + подпись */
html body .typeheader-33 .logo h1{margin:0!important;font-size:0;line-height:0}
html body .typeheader-33 .logo h1 a{display:flex!important;align-items:center;gap:12px;min-height:48px;min-width:150px;text-decoration:none!important}
html body .typeheader-33 .logo h1 a::before{content:"";flex:none;width:44px;height:44px;background:var(--cs-skull) center/contain no-repeat}
html body .typeheader-33 .logo h1 a::after{content:"COOL";font-family:var(--cs-display);font-weight:700;font-size:28px;line-height:1;letter-spacing:-.01em;color:var(--cs-text)}
html body .typeheader-33 .logo::after{content:"ПОДАРКИ И ГАДЖЕТЫ";position:absolute;left:56px;bottom:0;font-family:var(--cs-body);font-size:10px;font-weight:700;letter-spacing:.14em;line-height:1;color:var(--cs-muted);white-space:nowrap}

/* поиск */
html body .typeheader-33 #sosearchpro .search{align-items:center;float:none;width:100%;margin:0!important;padding:4px!important;background:var(--cs-surface2)!important;border:1px solid var(--cs-line)!important;border-radius:999px!important}
@media (min-width:768px){html body .typeheader-33 #sosearchpro .search{display:flex!important}}
html body .typeheader-33 #sosearchpro .search input{flex:1 1 auto;width:auto!important;height:44px!important;padding:0 20px!important;background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important;color:var(--cs-text)!important;font-size:15px}
html body .typeheader-33 #sosearchpro .search input::placeholder{color:var(--cs-muted);opacity:1}
html body .typeheader-33 #sosearchpro .search button{flex:0 0 44px;display:inline-flex;align-items:center;justify-content:center;width:44px!important;height:44px!important;padding:0!important;margin:0!important;background:var(--cs-yellow)!important;color:#111!important;border:0!important;border-radius:50%!important;box-shadow:none!important;font-size:16px}
html body #sosearchpro .dropdown-menu{background:var(--cs-surface)!important;border:1px solid var(--cs-line)!important;border-radius:16px!important;box-shadow:var(--cs-shadow)!important;color:var(--cs-text)}

/* кнопки справа: вход, сравнение, корзина */
html body .typeheader-33 .midde-right .link-lg,
html body .typeheader-33 .midde-right .compare,
html body .typeheader-33 .midde-right .shopping_cart{float:none!important;margin:0!important;padding:0!important;border:0!important;background:none!important}
html body .typeheader-33 .midde-right .link-lg a,
html body .typeheader-33 .midde-right .compare a{display:inline-flex!important;align-items:center;gap:8px;height:44px;padding:0 16px!important;border-radius:999px;background:var(--cs-surface2)!important;color:var(--cs-text)!important;font-size:14px;font-weight:600;text-decoration:none!important}
html body .typeheader-33 .midde-right .link-lg i,
html body .typeheader-33 .midde-right .compare i{margin:0!important;font-size:16px;color:inherit!important}
html body .typeheader-33 .midde-right .compare span{display:none}
html body .typeheader-33 .shopping_cart .btn-shopping-cart .top_cart{display:inline-flex!important;align-items:center;float:none!important;height:44px;padding:0 20px!important;background:var(--cs-yellow)!important;color:#111!important;border:0!important;border-radius:999px!important;font-weight:700}
html body .typeheader-33 .top_cart .shopcart{display:flex!important;align-items:center;gap:10px;text-align:left}
html body .typeheader-33 .top_cart .icon-c{display:inline-flex!important;align-items:center;width:auto!important;height:auto!important;background:none!important;line-height:1}
html body .typeheader-33 .top_cart .icon-c i{display:inline-block!important;font-size:18px;color:#111!important}
html body .typeheader-33 .top_cart .shopcart-inner{display:flex;flex-direction:column;line-height:1.2}
html body .typeheader-33 .top_cart .text-shopping-cart{margin:0!important;font-size:13px;font-weight:700;color:#111!important;text-transform:none}
html body .typeheader-33 .top_cart .total-shopping-cart{font-size:11px;font-weight:600;color:#111!important}
html body .typeheader-33 .shoppingcart-box{background:var(--cs-surface)!important;border:1px solid var(--cs-line)!important;border-radius:16px!important;box-shadow:var(--cs-shadow)!important;color:var(--cs-text)}

/* переключатель темы (создаётся скриптом) */
.cs-theme-toggle{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;margin-left:12px;background:rgba(0,0,0,.12);color:#111;border:0;border-radius:50%;cursor:pointer}
.cs-theme-toggle:hover{background:rgba(0,0,0,.22)}
.cs-theme-toggle svg{width:16px;height:16px}
.cs-theme-toggle.cs-floating{position:fixed;left:16px;bottom:16px;z-index:9998;width:44px;height:44px;background:var(--cs-surface);color:var(--cs-text);border:1px solid var(--cs-line);box-shadow:var(--cs-shadow)}

/* ---------- 4. Главное меню (модуль SO Page Builder) ---------- */
html:root{--cm-bg:var(--cs-surface)}
html body .cool-mega-menu{background:var(--cs-surface)!important;border-bottom:1px solid var(--cs-line);overflow:visible!important}
html body .cool-mega-menu::before,
html body .cool-mega-menu::after,
html body .cool-mega-menu .aurora-blob,
html body .cool-mega-menu .cool-mega-menu-border{display:none!important}
html body .cool-mega-menu .cool-pill{background:var(--cs-yellow)!important;box-shadow:none!important}
html body .cool-menu-item>a{color:var(--cs-text2)!important;font-size:14px;font-weight:700}
html body .cool-menu-item:hover>a,
html body .cool-menu-item.is-open>a{color:#111!important}
html body .cool-menu-item>a .chev{opacity:.6}
html body .cool-menu-item:hover>a .chev,
html body .cool-menu-item.is-open>a .chev{color:#111!important;opacity:1}
html body .cool-new-item>a{background:none!important;-webkit-text-fill-color:currentColor!important;animation:none!important;color:var(--cs-yellow-ink)!important}
html body .cool-new-item:hover>a{color:#111!important}
html body .cool-new-item>a::after{background:var(--cs-yellow-ink)!important;-webkit-text-fill-color:initial}

/* выпадающие панели меню (JS переносит их в body) */
html body .cool-dropdown{background:var(--cs-surface)!important;border:1px solid var(--cs-line)!important;border-radius:20px!important;box-shadow:var(--cs-shadow)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
html body .cool-dropdown::before,
html body .cool-dropdown::after{display:none!important}
html body .cool-column h3{color:var(--cs-muted)!important}
html body .cool-column a{color:var(--cs-text2)!important}
html body .cool-column a:hover,
html body .cool-column a:focus-visible{color:var(--cs-text)!important}
html body .cool-column a::before{background:var(--cs-surface2)!important}
html body .cool-ico{background:var(--cs-surface2)!important;box-shadow:none!important}
html body .cool-column a:hover .cool-ico,
html body .cool-column a:focus-visible .cool-ico{background:var(--cs-yellow)!important;box-shadow:none!important}
html body .cool-gifts-slider{background:var(--cs-surface2)!important;box-shadow:none!important;border-radius:18px}

/* мобильное меню */
@media (max-width:768px){
  html body :has(#mobileMenu){background:var(--cs-bg)!important}
  html body .mobile-menu-container{background:var(--cs-bg)!important}
  html body #mobileMenu .mobile-menu-item{background:var(--cs-surface)!important;border-color:var(--cs-line)!important}
  html body #mobileMenu .mobile-menu-item.is-open{background:var(--cs-surface)!important;border-color:var(--cs-yellow)!important}
  html body #mobileMenu .mobile-menu-link,
  html body #mobileMenu .mobile-menu-link .cool-lbl{color:var(--cs-text)!important}
  html body #mobileMenu .mobile-menu-link.mobile-new-item{background:var(--cs-yellow)!important}
  html body #mobileMenu .mobile-menu-link.mobile-new-item,
  html body #mobileMenu .mobile-menu-link.mobile-new-item .cool-lbl{color:#111!important}
  html body #mobileMenu .mobile-menu-toggle{background:var(--cs-surface2)!important;color:var(--cs-text)!important}
  html body #mobileMenu .mobile-submenu-link,
  html body #mobileMenu .mobile-submenu-link:hover{background:var(--cs-surface2)!important;color:var(--cs-text)!important}
  html body #mobileMenu .mobile-submenu-heading,
  html body #mobileMenu .mobile-contact-title{color:var(--cs-muted)!important}
  html body #mobileMenu .mobile-contact-link{background:var(--cs-surface)!important;border-color:var(--cs-line)!important;color:var(--cs-text)!important}
}

/* ---------- 5. Подпорки старого Custom CSS, которые ломали сетку ---------- */
html body .col_nafd{background:transparent!important;top:0!important;padding:0!important}
html body .stories.carousel{transform:none!important;left:0!important;top:0!important}
html body .megamenu-style-dev{background:transparent!important;left:0!important;top:0!important;width:auto!important}
html body .video-banner{width:100%!important;left:0!important;height:auto!important;aspect-ratio:1231/320;border-radius:28px;overflow:hidden}
html body .video-banner .overlay h1{font-family:var(--cs-display);font-size:clamp(20px,3.2vw,36px);text-align:center;padding:0 16px}
html body .row_un5z img{display:block;border-radius:24px}

/* ---------- 6. Заголовки блоков ---------- */
html body .modtitle{margin:0 0 20px!important;padding:0!important;background:none!important;border:0!important;font-family:var(--cs-display)!important;font-size:26px!important;font-weight:700;line-height:1.2;text-align:left!important;text-transform:none!important;color:var(--cs-text)!important}
html body .modtitle span{position:static!important;display:inline!important;padding:0!important;background:none!important;color:inherit!important;font-family:inherit!important;font-size:inherit!important;font-weight:inherit!important;line-height:inherit!important;text-transform:none!important;text-shadow:none!important;letter-spacing:inherit!important}
html body .modtitle::before,
html body .modtitle::after{display:none!important}

/* ---------- 7. Вкладки и карточки товаров ---------- */
html body .listingtab-layout33{background:transparent!important;margin-bottom:56px}
html body .listingtab-layout33 .so-listing-tabs .ltabs-tabs-container{padding:0;margin:0 0 20px;border:0!important;background:none!important}
html body .listingtab-layout33 .so-listing-tabs .ltabs-tabs-container,
html body .listingtab-layout33 .so-listing-tabs .ltabs-tabs-wrap{display:block!important;width:100%!important;text-align:left!important}
html body .listingtab-layout33 .so-listing-tabs .ltabs-tabs-container .ltabs-tabs{display:flex!important;flex-wrap:wrap;gap:8px;justify-content:flex-start!important;text-align:left!important;float:none!important;margin:0!important;padding:0!important;border:0!important;list-style:none}
html body .listingtab-layout33 li.ltabs-tab{float:none!important;margin:0!important;padding:0!important;border:0!important;background:none!important}
html body .listingtab-layout33 li.ltabs-tab::before,
html body .listingtab-layout33 li.ltabs-tab::after{display:none!important}
html body .listingtab-layout33 li.ltabs-tab>span{display:inline-flex!important;align-items:center;height:auto!important;min-height:44px;padding:0 20px!important;background:var(--cs-surface2)!important;color:var(--cs-text2)!important;border:0!important;border-radius:999px;font-size:15px!important;font-weight:600!important;line-height:1.2!important;text-transform:none!important}
html body .listingtab-layout33 li.ltabs-tab>span::before,
html body .listingtab-layout33 li.ltabs-tab>span::after{display:none!important}
html body .listingtab-layout33 li.ltabs-tab:hover>span,
html body .listingtab-layout33 li.ltabs-tab.tab-sel>span{background:var(--cs-yellow)!important;color:#111!important}

/* сетка вместо float-колонок темы */
html body .listingtab-layout33 .ltabs-items-inner{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;margin:0!important;padding:0!important;align-items:stretch}
html body .listingtab-layout33 .ltabs-items-inner>[class*="clr"]{display:none!important}
html body .listingtab-layout33 .ltabs-items-inner .ltabs-item{display:flex;float:none!important;clear:none!important;width:auto!important;max-width:none!important;min-width:0;margin:0!important;padding:0!important}
html body .listingtab-layout33 .ltabs-items-inner .ltabs-item .item-inner{display:flex;flex:1 1 100%;min-width:0;margin:0!important;padding:0!important}

html body .listingtab-layout33 .product-item-container{display:flex;flex-direction:column;flex:1 1 100%;min-width:0;margin:0!important;padding:14px!important;background:var(--cs-surface)!important;border:1px solid var(--cs-line)!important;border-radius:20px!important;box-shadow:none!important;overflow:hidden;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
html body .listingtab-layout33 .product-item-container:hover{transform:translateY(-3px);border-color:var(--cs-yellow)!important;box-shadow:var(--cs-shadow)!important}
html body .listingtab-layout33 .product-item-container .left-block{position:relative;float:none!important;width:100%!important;margin:0!important;padding:0!important;border:0!important}
html body .listingtab-layout33 .product-image-container{display:block;margin:0!important;border:0!important;border-radius:14px;overflow:hidden;background:var(--cs-surface2)!important}
html body .listingtab-layout33 .product-image-container a{display:flex;align-items:center;justify-content:center;aspect-ratio:1/1}
html body .listingtab-layout33 .product-image-container img{display:block;width:100%!important;height:100%!important;max-width:none;object-fit:contain}
html[data-theme="dark"] body .listingtab-layout33 .product-image-container{background:#2A2A34!important}
html body .listingtab-layout33 .product-item-container .right-block{display:flex;flex-direction:column;flex:1 1 auto;float:none!important;width:100%!important;margin:0!important;padding:16px 6px 6px!important;text-align:left!important;border:0!important}
html body .listingtab-layout33 .product-item-container .caption{display:flex;flex-direction:column;flex:1 1 auto;padding:0!important;text-align:left!important}
html body .listingtab-layout33 .product-item-container .caption h4{margin:0 0 8px!important;min-height:2.7em;font-family:var(--cs-body)!important;font-size:16px!important;font-weight:700;line-height:1.35;text-align:left;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
html body .listingtab-layout33 .product-item-container .caption h4 a{color:var(--cs-text)!important}
html body .listingtab-layout33 .product-item-container .caption .rating{margin:0 0 8px!important}
html body .listingtab-layout33 .product-item-container .caption .rating .fa-star,
html body .listingtab-layout33 .product-item-container .caption .rating .fa-star-o{color:var(--cs-yellow-ink)}
html body .listingtab-layout33 .product-item-container .price{margin:auto 0 0!important;padding-top:10px;font-family:var(--cs-display)!important;font-size:20px!important;font-weight:500;line-height:1.2;color:var(--cs-text)!important}
html body .listingtab-layout33 .product-item-container .price .price-new{color:var(--cs-text)!important}
html body .listingtab-layout33 .product-item-container .price .price-old{color:var(--cs-muted)!important;font-size:13px}
html body .listingtab-layout33 .product-item-container .detail{display:none!important}
html body .listingtab-layout33 .button-group .btn-button{background:var(--cs-surface)!important;color:var(--cs-text)!important;border:1px solid var(--cs-line)!important;border-radius:50%!important;box-shadow:var(--cs-shadow)}
html body .listingtab-layout33 .button-group .btn-button:hover{background:var(--cs-yellow)!important;color:#111!important;border-color:var(--cs-yellow)!important}

@media (max-width:1199px){
  html body .listingtab-layout33 .ltabs-items-inner{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:767px){
  html body .listingtab-layout33 .ltabs-items-inner{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  html body .listingtab-layout33 .product-item-container{padding:10px!important}
  html body .listingtab-layout33 .product-item-container .caption h4{font-size:14px!important}
  html body .listingtab-layout33 .product-item-container .price{font-size:17px!important}
}

/* кнопка «Загрузить ещё» */
html body .listingtab-layout33 .ltabs-loadmore{margin:32px 0 0!important}
html body .listingtab-layout33 .so-listing-tabs .wap-listing-tabs .ltabs-items-container .ltabs-loadmore .ltabs-loadmore-btn{display:inline-flex!important;align-items:center;gap:8px;min-height:48px;padding:0 32px!important;background:var(--cs-yellow)!important;color:#111!important;border-radius:999px!important;font-size:14px;font-weight:700;line-height:1!important;text-transform:none!important}
html body .listingtab-layout33 .so-listing-tabs .wap-listing-tabs .ltabs-items-container .ltabs-loadmore .ltabs-loadmore-btn::before{display:none!important}
html body .listingtab-layout33 .so-listing-tabs .wap-listing-tabs .ltabs-items-container .ltabs-loadmore .ltabs-loadmore-btn:hover{background:var(--cs-text)!important;color:var(--cs-bg)!important}

/* ---------- 8. Отзывы ---------- */
html body .ex-reviews__head{margin:0 0 20px;font-family:var(--cs-display);font-size:26px;font-weight:700;text-align:left;color:var(--cs-text)}
html body .ex-reviews__carousel-inner-item{background:var(--cs-surface)!important;border:1px solid var(--cs-line)!important;border-radius:20px!important;box-shadow:none!important;color:var(--cs-text)}
html body .ex-review-name,
html body .ex-reviews__item-title a{color:var(--cs-text)!important}
html body .ex-review-date,
html body .votes-caption{color:var(--cs-muted)!important}
html body .ex-reviews__item-text{color:var(--cs-text2)!important}

/* ---------- 9. Футер (блок #cool-footer) ---------- */
html body .typefooter-33{background:var(--cs-bg)!important}
html body #cool-footer{margin-top:56px;background:var(--cs-surface)!important;border-top:1px solid var(--cs-line)}
html body #cool-footer::before,
html body #cool-footer .cf-glow,
html body #cool-footer .cf-grid-bg,
html body #cool-footer .cf-particles,
html body #cool-footer .cf-corner{display:none!important}
html body #cool-footer .cf-logo{background:none!important;-webkit-text-fill-color:currentColor!important;color:var(--cs-text)!important;animation:none!important;font-family:var(--cs-display)!important;font-size:22px!important;letter-spacing:.02em!important}
html body #cool-footer .cf-logo::after{display:none!important}
html body #cool-footer .cf-tagline{color:var(--cs-muted)!important}
html body #cool-footer .cf-tagline b{color:var(--cs-text)!important}
html body #cool-footer .cf-status{background:var(--cs-surface2)!important;border-color:var(--cs-line)!important;color:var(--cs-text2)!important}
html body #cool-footer .cf-col-title{color:var(--cs-text)!important;letter-spacing:.12em!important}
html body #cool-footer .cf-col-title::after{background:var(--cs-yellow)!important}
html body #cool-footer .cf-col ul li a{color:var(--cs-muted)!important}
html body #cool-footer .cf-col ul li a:hover{color:var(--cs-text)!important}
html body #cool-footer .cf-contact-item{background:var(--cs-surface2)!important;border-color:var(--cs-line)!important}
html body #cool-footer .cf-contact-item:hover{background:var(--cs-surface2)!important;border-color:var(--cs-yellow)!important;box-shadow:none!important}
html body #cool-footer .cf-cicon{background:var(--cs-yellow)!important}
html body #cool-footer .cf-cicon svg{fill:#111!important}
html body #cool-footer .cf-clabel{color:var(--cs-muted)!important}
html body #cool-footer .cf-cvalue,
html body #cool-footer .cf-cvalue a{color:var(--cs-text)!important}
html body #cool-footer .cf-social-bar{border-color:var(--cs-line)!important}
html body #cool-footer .cf-social-label{color:var(--cs-muted)!important}
html body #cool-footer .cf-social-btn{background:var(--cs-surface2)!important;border-color:var(--cs-line)!important}
html body #cool-footer .cf-social-btn svg{fill:var(--cs-text2)!important}
html body #cool-footer .cf-social-btn:hover svg{fill:#fff!important}
html body #cool-footer .cf-copy,
html body #cool-footer .cf-made,
html body #cool-footer .cf-bottom-links a{color:var(--cs-muted)!important}
html body #cool-footer .cf-copy span{color:var(--cs-text)!important}

/* ---------- 10. Плавающие кнопки ---------- */
html body .floating-call-btn{background:#1FA45A!important;box-shadow:0 6px 18px rgba(31,164,90,.45)!important}
html body #so-groups.so-groups-sticky>a{background:var(--cs-surface)!important;color:var(--cs-text)!important;border:1px solid var(--cs-line)!important;box-shadow:none!important}
html body #so-groups.so-groups-sticky>a:hover{background:var(--cs-yellow)!important;color:#111!important}

/* ---------- 11. Доступность ---------- */
html body a:focus-visible,
html body button:focus-visible,
html body input:focus-visible{outline:2px solid var(--cs-yellow-ink);outline-offset:2px}
@media (prefers-reduced-motion:reduce){
  html body .listingtab-layout33 .product-item-container{transition:none}
}

/* ---------- 12. v1.0.2: отступы блоков, баннер, заголовки ---------- */
/* блоки внутри .container-fluid получают тот же отступ 24px, что и остальные */
html body .so-page-builder .container-fluid .row-style{margin-left:0!important;margin-right:0!important;padding-left:24px!important;padding-right:24px!important;box-sizing:border-box}
html body .so-page-builder .container-fluid .col-style{padding-left:0!important;padding-right:0!important}

/* верхний баннер: по ширине контента и со скруглением */
html body .row_un5z{margin-bottom:32px!important}
html body .row_un5z a{display:block;overflow:hidden;border-radius:24px}
html body .row_un5z img{display:block;width:100%!important;height:auto;border-radius:24px!important}

/* заголовки блоков: жёлтая метка слева */
html body .modtitle{display:flex!important;align-items:center}
html body .modtitle span::before,
html body .ex-reviews__head::before{content:"";display:inline-block;width:10px;height:26px;margin-right:14px;border-radius:5px;background:var(--cs-yellow);vertical-align:-3px}
html body .ex-reviews__head{display:flex;align-items:center}

/* тёмная полоса над футером: фон и рамки контейнера футера */
html body .footer-container,
html body .footer-container .footer-main{background:var(--cs-bg)!important;border:0!important}

/* ---------- 13. v1.1.0: футер, линии в шапке ---------- */
/* футер на всю ширину контейнера (отступ для блоков главной ему не нужен) */
html body footer .so-page-builder .container-fluid .row-style{padding-left:0!important;padding-right:0!important}
/* синяя линия над футером: border-top: 2px solid #09abfe в теме */
html body footer.footer-container.typefooter-33{border-top:0!important;border-bottom:0!important}
/* вертикальные линии и рамки вокруг логотипа и поиска */
html body .typeheader-33 .header-middle .logo,
html body .typeheader-33 .header-middle .search-header-w,
html body .typeheader-33 .header-middle #sosearchpro,
html body .typeheader-33 .header-middle .midde-right{border:0!important;box-shadow:none!important;outline:0!important}

/* ---------- 14. v1.1.2: исправления тёмной темы ---------- */
/* фон всей страницы, включая поля слева и справа от основного блока */
html{background:var(--cs-bg)!important}

/* заголовки блоков: у темы правила с #content, поэтому берём тот же уровень специфичности */
html body #content .modtitle,
html body #content .modtitle span,
html body #content .cs-cats__title,
html body #content .ex-reviews__head,
html body #content .cs-hero__title{color:var(--cs-text)!important;-webkit-text-fill-color:var(--cs-text)!important;opacity:1!important;text-shadow:none!important}

/* шапка и меню: перебиваем возможные белые фоны темы */
html body #header,
html body #header .header-middle,
html body #header .header-bottom{background:var(--cs-surface)!important;border-color:var(--cs-line)!important}
html body #header .header-bottom{padding:0!important;min-height:0!important;border:0!important}
html body #content .cool-mega-menu{background:var(--cs-surface)!important}
html body #content .cool-menu-item>a{color:var(--cs-text2)!important}
html body #content .cool-menu-item:hover>a,
html body #content .cool-menu-item.is-open>a{color:#111!important}
html body #content .cool-new-item>a{color:var(--cs-yellow-ink)!important}
html body #content .cool-new-item:hover>a{color:#111!important}

/* ---------- 15. v1.1.4: тёмная тема, белые подложки под блоками главной ---------- */
/* Обёртки контента в теме белые; в тёмной теме делаем их прозрачными, чтобы виден был тёмный фон страницы.
   В светлой теме это правило не действует. */
html[data-theme="dark"] body #content,
html[data-theme="dark"] body #wrapper .so-page-builder,
html[data-theme="dark"] body #wrapper .so-page-builder .container-fluid,
html[data-theme="dark"] body #wrapper .so-page-builder .container,
html[data-theme="dark"] body #wrapper .so-page-builder .row,
html[data-theme="dark"] body #wrapper .so-page-builder [class*="col-"],
html[data-theme="dark"] body #wrapper .so-page-builder .module,
html[data-theme="dark"] body .main-container,
html[data-theme="dark"] body .container-wrap,
html[data-theme="dark"] body #wrapper > .container,
html[data-theme="dark"] body #wrapper > .container-fluid{background:transparent!important}

/* ==========================================================
   16. v1.2.0: страницы категории и товара
   Работает в обеих темах. Названия классов взяты из файла темы.
   ========================================================== */

/* ---- хлебные крошки: светло-серая полоса и чёрная плашка 58% заменены на аккуратную строку ---- */
html body .breadcrumbs{background:var(--cs-bg)!important;border-bottom:1px solid var(--cs-line)}
html body .breadcrumbs ul.breadcrumb{display:block!important;width:auto!important;margin:0!important;padding:14px 0!important;background:transparent!important;line-height:1.4}
html body .breadcrumbs ul.breadcrumb li{color:var(--cs-muted)}
html body .breadcrumbs ul.breadcrumb li a{color:var(--cs-muted)!important;font-size:14px}
html body .breadcrumbs ul.breadcrumb li:last-child a{color:var(--cs-text)!important;font-weight:700}
html body .breadcrumbs ul.breadcrumb li a:hover{color:var(--cs-yellow-ink)!important}

/* ---- заголовок категории ---- */
html body .title-category{color:var(--cs-text)!important;font-family:var(--cs-display)!important;font-size:26px!important;font-weight:700;text-transform:none!important;border-bottom:1px solid var(--cs-line)!important;padding-bottom:14px!important;margin-bottom:24px!important}
html body .title-category::after{background-color:var(--cs-yellow)!important;height:3px;width:80px;bottom:-1px}

/* ---- панель над списком и под ним: вид сетки, сортировка, сравнение, страницы ---- */
html body .filters-panel label{color:var(--cs-muted)!important}
html body .filters-panel .list-view .btn-gridview{color:var(--cs-muted)!important}
html body .filters-panel .list-view button.btn{background:var(--cs-surface2)!important;border:1px solid var(--cs-line)!important;border-radius:10px!important}
html body .filters-panel .list-view button.btn i{color:var(--cs-text2)!important}
html body .filters-panel .list-view button.btn:hover,
html body .filters-panel .list-view button.btn.active{background:var(--cs-yellow)!important;border-color:var(--cs-yellow)!important}
html body .filters-panel .list-view button.btn:hover i,
html body .filters-panel .list-view button.btn.active i{color:#111!important}
html body .filters-panel select,
html body .filters-panel .form-control,
html body .filters-panel .product-compare a,
html body .filters-panel .product-compare .btn{background:var(--cs-surface2)!important;color:var(--cs-text)!important;border:1px solid var(--cs-line)!important;border-radius:10px!important;box-shadow:none!important}
html body .filters-panel.product-filter-bottom{border-top:1px solid var(--cs-line)!important}
html body .box-pagination .text-right,
html body .filters-panel .text-right{color:var(--cs-muted)}
html body .pagination>li>a,
html body .pagination>li>span{background:var(--cs-surface)!important;color:var(--cs-text2)!important;border:1px solid var(--cs-line)!important;border-radius:10px!important}
html body .pagination>li a:hover,
html body .pagination>li span:hover{background:var(--cs-yellow)!important;color:#111!important;border-color:var(--cs-yellow)!important}
html body .pagination>li.active,
html body .pagination>li.active span,
html body .pagination>li.active a{background:var(--cs-yellow)!important;color:#111!important;border-color:var(--cs-yellow)!important}

/* ---- карточки в категории, «похожих товарах», результатах поиска ---- */
html body .products-list .product-layout .product-item-container{background:var(--cs-surface)!important;border:1px solid var(--cs-line)!important;border-radius:20px!important;box-shadow:none!important;overflow:hidden}
html body .products-list .product-layout .product-item-container:hover{border-color:var(--cs-yellow)!important;box-shadow:var(--cs-shadow)!important}
html body .products-list .product-layout .product-image-container{border-radius:14px;overflow:hidden}
html body .products-list .product-layout .caption h4,
html body .products-list .product-layout .caption h4 a{color:var(--cs-text)!important;font-family:var(--cs-body)!important;font-weight:700}
html body .products-list .product-layout .caption .description,
html body .products-list .product-layout .caption p{color:var(--cs-muted)!important}
html body .products-list .product-layout .price,
html body .products-list .product-layout .price .price-new{color:var(--cs-text)!important;font-family:var(--cs-display)!important;font-weight:500}
html body .products-list .product-layout .price .price-old{color:var(--cs-muted)!important}
html body .products-list .product-layout .rating .fa-star,
html body .products-list .product-layout .rating .fa-star-o{color:var(--cs-yellow-ink)}
html body .products-list .product-layout .button-group .btn-button{background:var(--cs-surface)!important;color:var(--cs-text)!important;border:1px solid var(--cs-line)!important;border-radius:50%!important}
html body .products-list .product-layout .button-group .btn-button:hover{background:var(--cs-yellow)!important;color:#111!important;border-color:var(--cs-yellow)!important}

/* ---- страница товара ---- */
html body .product-view .content-product-right .title-product h1{color:var(--cs-text)!important;-webkit-text-fill-color:var(--cs-text)!important;background:none!important;font-family:var(--cs-display)!important;font-size:28px!important;font-weight:700!important;line-height:1.2;text-transform:none!important}
html body .product-view .content-product-right .box-review,
html body .product-view .content-product-right .box-review a,
html body .product-view .content-product-right .box-review .rating{color:var(--cs-muted)!important}
html body .product-view .content-product-right .box-review .rating .fa-star,
html body .product-view .content-product-right .box-review .rating .fa-star-o{color:var(--cs-yellow-ink)!important}
html body .product_page_price .price,
html body .product_page_price .price-new{color:var(--cs-text)!important;font-family:var(--cs-display)!important;font-size:32px!important;font-weight:700!important}
html body .product_page_price .price-old,
html body .product_page_price .price-tax{color:var(--cs-muted)!important}
html body .product-view .content-product-right .product-box-desc,
html body .product-view .content-product-right .product-box-desc span,
html body .product-view .content-product-right .product-box-desc .brand a{color:var(--cs-text2)!important}
html body .product-view .content-product-right .product-box-desc .brand a:hover{color:var(--cs-yellow-ink)!important}
html body .product-view .content-product-right label{color:var(--cs-text2)!important}
html body .product-view .content-product-right input.form-control,
html body .product-view .content-product-right select.form-control,
html body .product-view .content-product-right .quantity-control input{background:var(--cs-surface2)!important;color:var(--cs-text)!important;border:1px solid var(--cs-line)!important;border-radius:10px!important;box-shadow:none!important}

/* кнопка «В корзину» (кнопки «Купить в 1 клик» и «Купить» делает сторонний модуль, их подстроим по HTML страницы) */
html body #button-cart{background:var(--cs-yellow)!important;color:#111!important;border:0!important;border-radius:999px!important;font-weight:700!important;box-shadow:none!important}
html body #button-cart:hover{background:var(--cs-text)!important;color:var(--cs-bg)!important}

/* вкладки «Описание» и «Отзывы» и сама область описания */
html body .producttab .tabsslider.horizontal-tabs .nav-tabs{background:var(--cs-surface)!important;border:1px solid var(--cs-line)!important;border-radius:20px 20px 0 0!important}
html body .producttab .tabsslider.horizontal-tabs .nav-tabs li a{background:var(--cs-surface2)!important;color:var(--cs-text2)!important;border:1px solid var(--cs-line)!important}
html body .producttab .tabsslider.horizontal-tabs .nav-tabs li.active a,
html body .producttab .tabsslider.horizontal-tabs .nav-tabs li:hover a{background:var(--cs-yellow)!important;border-color:var(--cs-yellow)!important;color:#111!important}
html body .producttab .tabsslider.horizontal-tabs .tab-content,
html body .producttab .tab-content>.tab-pane{background:var(--cs-surface)!important;color:var(--cs-text2)!important;border:1px solid var(--cs-line);border-top:0;border-radius:0 0 20px 20px;padding:24px!important}
html body .producttab .tab-content h1,
html body .producttab .tab-content h2,
html body .producttab .tab-content h3,
html body .producttab .tab-content h4{color:var(--cs-text)!important}
html[data-theme="dark"] body .producttab .tab-content p,
html[data-theme="dark"] body .producttab .tab-content li,
html[data-theme="dark"] body .producttab .tab-content td{color:var(--cs-text2)}

/* ---------- 17. v1.3.0: доработки страниц товара и категории ---------- */
/* текст описания товара в тёмной теме: у части текста тёмный цвет прописан прямо в разметке.
   Исключены элементы внутри блоков со своим фоном (например, тёмная плашка «Обратите внимание»). */
html[data-theme="dark"] body .producttab .tab-content :where(p,li,span,td,th,strong,b,em,font):not([style*="background"] *){color:var(--cs-text2)!important}

/* названия товаров в карточках категории: уровень специфичности как у темы */
html body #content .products-list .product-layout .product-item-container .caption h4 a,
html body #content .products-list .product-layout .product-item-container .caption h4{color:var(--cs-text)!important}
html body #content .products-list .product-layout .product-item-container .caption h4 a:hover{color:var(--cs-yellow-ink)!important}

/* подпись «В виде сетки:» была белым прямоугольником */
html body .filters-panel .list-view .btn-gridview.btn-gridview{background:transparent!important;border:0!important;box-shadow:none!important;color:var(--cs-muted)!important}

/* ---------- 18. v1.3.3: мобильная версия ---------- */
/* каталог, поиск, производители: две карточки в ряд вместо одной большой */
@media (max-width:767px){
  html body .products-list > .product-layout.product-grid{width:50%!important;float:left;clear:none;padding-left:6px!important;padding-right:6px!important;margin-bottom:12px}
  html body .products-list:has(> .product-layout.product-grid){display:flex!important;flex-wrap:wrap;align-items:stretch}
  html body .products-list:has(> .product-layout.product-grid)::before,
  html body .products-list:has(> .product-layout.product-grid)::after{display:none!important}
  html body .products-list > .product-layout.product-grid .product-item-container{height:100%;padding:10px!important;border-radius:16px!important}
  html body .products-list .product-layout .caption h4,
  html body .products-list .product-layout .caption h4 a{font-size:13px!important;line-height:1.3}
  html body .products-list .product-layout .price,
  html body .products-list .product-layout .price .price-new{font-size:16px!important}
  /* в шапке на телефоне только значки, без подписей */
  html body .typeheader-33 .midde-right .link-lg span{display:none}
  html body .typeheader-33 .top_cart .text-shopping-cart{display:none}
}

/* ---------- чёрная полоса над подвалом ----------
   Обёртки подвала в Page Builder могли получить чёрный фон из настроек строки. Подвал рисует сам себя. */
html body footer.footer-container .so-page-builder .container-fluid,
html body footer.footer-container .so-page-builder .container,
html body footer.footer-container .so-page-builder .row,
html body footer.footer-container .so-page-builder [class*="col-"],
html body footer.footer-container .so-page-builder .module{background:transparent!important}

/* ---------- 19. v1.3.4: мобильная шапка и меню за кнопкой ---------- */
.cs-burger,.cs-menu-close{display:none}

@media (max-width:767px){
  /* жёлтая полоса: телефон слева, переключатель темы справа */
  html body .typeheader-33 .header-top-left{display:block!important;flex:1 1 auto;width:auto}
  html body .typeheader-33 .header-top .telephone{display:block!important;font-size:0}
  html body .typeheader-33 .header-top .telephone a{font-size:13px;font-weight:800}

  /* основная строка: бургер · логотип · поиск · вход · корзина */
  html body .typeheader-33 .header-middle{padding:10px 0!important}
  html body .typeheader-33 .header-middle .container{position:relative;display:flex;flex-wrap:nowrap;align-items:center;gap:8px}
  html body .typeheader-33 .header-middle .container::before,
  html body .typeheader-33 .header-middle .container::after{display:none!important}
  html body .typeheader-33 .header-middle .logo{float:none!important;flex:1 1 0;min-width:0;width:auto!important;margin:0!important;text-align:left}
  html body .typeheader-33 .header-middle .logo h1 a{min-width:0;gap:8px}
  html body .typeheader-33 .logo h1 a::before{width:36px;height:36px}
  html body .typeheader-33 .logo h1 a::after{font-size:22px}
  html body .typeheader-33 .logo::after{left:44px;font-size:8px;letter-spacing:.1em}
  html body .typeheader-33 .header-middle .search-header-w{position:static!important;float:none!important;flex:0 0 auto;width:auto!important;margin:0!important;padding:0!important}
  html body .typeheader-33 .header-middle .midde-right{float:none!important;display:flex;align-items:center;gap:8px;flex:0 0 auto;margin:0!important}

  html body .typeheader-33 .search-header-w .icon-search{display:inline-flex!important;align-items:center;justify-content:center;width:42px;height:42px;line-height:1;border-radius:50%;background:var(--cs-surface2);cursor:pointer}
  html body .typeheader-33 .search-header-w .icon-search i{color:var(--cs-text);font-size:17px}
  /* выпадающее окно поиска: на всю ширину шапки, под ней */
  html body .typeheader-33 .search-header-w #sosearchpro .search{position:absolute!important;top:calc(100% + 6px)!important;left:15px!important;right:15px!important;width:auto!important;z-index:1000;box-shadow:var(--cs-shadow)}

  html body .typeheader-33 .midde-right .link-lg a{width:42px;height:42px;padding:0!important;justify-content:center}
  html body .typeheader-33 .top_cart .items_cart2,
  html body .typeheader-33 .top_cart .items_carts{display:none}
  html body .typeheader-33 .shopping_cart .btn-shopping-cart .top_cart{height:42px;padding:0 14px!important}

  /* кнопка-бургер и меню на весь экран */
  .cs-burger{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:42px;height:42px;padding:0;border:0;border-radius:50%;background:var(--cs-yellow);color:#111;cursor:pointer}
  .cs-burger svg{width:20px;height:20px}
  html body .mobile-menu-container{display:none!important}
  html.cs-menu-open{overflow:hidden}
  html.cs-menu-open body .mobile-menu-container{display:block!important;position:fixed!important;top:0;left:0;right:0;bottom:0;z-index:100000;min-height:0!important;overflow-y:auto;padding:68px 0 28px!important;border-radius:0!important;background:var(--cs-bg)!important}
  html.cs-menu-open .cs-menu-close{display:inline-flex;align-items:center;gap:6px;position:fixed;top:12px;right:14px;z-index:100001;height:42px;padding:0 18px;border:0;border-radius:999px;background:var(--cs-yellow);color:#111;font-family:inherit;font-size:14px;font-weight:800;cursor:pointer}
}

/* ---------- 20. v1.3.5: названия в каталоге, кнопки товара, отступы каталога на телефоне ---------- */
/* В каталоге и поиске название лежит в .right-block h4 a (а не в .caption, как на главной):
   тема задаёт ему цвет #222, поэтому в тёмной теме оно сливалось с карточкой. */
html body .products-list .product-item-container .right-block h4,
html body .products-list .product-item-container .right-block h4 a{color:var(--cs-text)!important;font-family:var(--cs-body)!important;font-weight:700}
html body .products-list .product-item-container .right-block h4 a:hover{color:var(--cs-yellow-ink)!important}
html body .products-list .product-item-container .right-block .price,
html body .products-list .product-item-container .right-block .price .price-new{color:var(--cs-text)!important;font-family:var(--cs-display)!important;font-weight:500}
html body .products-list .product-item-container .right-block .price .price-old{color:var(--cs-muted)!important}
html body .products-list .product-item-container .right-block .description,
html body .products-list .product-item-container .right-block .description p{color:var(--cs-muted)!important}
html body .products-list .product-item-container .right-block .rating .fa-star,
html body .products-list .product-item-container .right-block .rating .fa-star-o{color:var(--cs-yellow-ink)}

/* страница товара: «В корзину» и «Купить в 1 клик» в одном стиле (две овальные кнопки), лишнюю «Купить» прячет скрипт */
html body .cs-hide{display:none!important}
html body #button-cart,
html body .cs-btn-oneclick.cs-btn-oneclick{display:inline-flex!important;align-items:center;justify-content:center;min-height:46px;margin:0 8px 8px 0;padding:0 26px!important;border-radius:999px!important;font-size:14px!important;font-weight:800!important;letter-spacing:.02em;line-height:1!important;text-transform:uppercase;box-shadow:none!important}
html body #button-cart{border:2px solid var(--cs-yellow)!important}
html body .cs-btn-oneclick.cs-btn-oneclick{background:transparent!important;color:var(--cs-text)!important;border:2px solid var(--cs-text)!important}
html body .cs-btn-oneclick.cs-btn-oneclick:hover{background:var(--cs-text)!important;color:var(--cs-bg)!important}

/* телефон: у каталога и поиска есть поля слева и справа */
@media (max-width:767px){
  html body[class*="product-category"] #content,
  html body[class*="product-search"] #content,
  html body[class*="product-manufacturer"] #content,
  html body[class*="product-special"] #content{padding-left:12px!important;padding-right:12px!important}
  html body .products-list .product-item-container .right-block h4,
  html body .products-list .product-item-container .right-block h4 a{font-size:13px!important;line-height:1.3}
  html body .products-list .product-item-container .right-block .price{font-size:16px!important}
  html body .products-list .product-item-container .right-block{padding:10px 4px 6px!important}
}

/* ==========================================================
   21. v1.3.6
   ========================================================== */

/* ---- шапка: поиск по центру, кнопка-лупа внутри поля, подпись логотипа не перекрывается ---- */
@media (min-width:768px){
  html body .typeheader-33 .header-middle .logo{min-width:250px}
  html body .typeheader-33 .header-middle .search-header-w{display:flex;justify-content:center}
  html body .typeheader-33 .header-middle #sosearchpro{width:100%;max-width:620px;margin:0 auto}
  html body .typeheader-33 #sosearchpro .search{position:relative!important}
  html body .typeheader-33 #sosearchpro .search button{position:static!important;float:none!important;margin:0!important;top:auto!important;right:auto!important;bottom:auto!important;left:auto!important;transform:none!important}
}
/* планшет и узкое окно: значки без подписей, чтобы всё помещалось */
@media (min-width:768px) and (max-width:991px){
  html body .typeheader-33 .midde-right .link-lg span{display:none}
  html body .typeheader-33 .midde-right .link-lg a{width:44px;padding:0!important;justify-content:center}
  html body .typeheader-33 .top_cart .text-shopping-cart,
  html body .typeheader-33 .top_cart .items_cart2,
  html body .typeheader-33 .top_cart .items_carts{display:none}
}

/* ---- вкладки «Бестселлеры / Новые поступления / По рейтингу»: без выпадающего списка и белой рамки ---- */
html body .listingtab-layout33 .so-listing-tabs .ltabs-tab-selected,
html body .listingtab-layout33 .so-listing-tabs .ltabs-tab-arrow{display:none!important}
html body .listingtab-layout33 .so-listing-tabs .ltabs-tabs-wrap,
html body .listingtab-layout33 .so-listing-tabs .ltabs-tabs-wrap.ltabs-selectbox,
html body .listingtab-layout33 .so-listing-tabs .ltabs-tabs-container{background:transparent!important;border:0!important;box-shadow:none!important;padding:0!important;height:auto!important;min-height:0!important}
@media (max-width:991px){
  /* на телефоне три кнопки в один ряд (если не помещаются, ряд прокручивается пальцем) */
  html body .listingtab-layout33 .so-listing-tabs .ltabs-tabs-wrap .ltabs-tabs,
  html body .listingtab-layout33 .so-listing-tabs .ltabs-tabs-container .ltabs-tabs{position:static!important;display:flex!important;flex-wrap:nowrap!important;gap:6px;width:100%!important;max-height:none!important;overflow-x:auto;opacity:1!important;visibility:visible!important;background:transparent!important;border:0!important;box-shadow:none!important;padding:0 0 4px!important;margin:0!important;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  html body .listingtab-layout33 .so-listing-tabs .ltabs-tabs::-webkit-scrollbar{display:none}
  html body .listingtab-layout33 li.ltabs-tab{flex:0 0 auto}
  html body .listingtab-layout33 li.ltabs-tab>span{min-height:38px;padding:0 14px!important;font-size:13px!important;white-space:nowrap}
}

/* ---- отзывы на телефоне: не больше 4 строк текста ---- */
@media (max-width:767px){
  html body .ex-reviews__item-text{display:-webkit-box!important;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;max-height:none}
}

/* ---- единый вид кнопки «Оформить заказ / Перейти в корзину» ---- */
html body .btn-checkout,
html body a.btn-checkout,
html body #previewModal .btn{display:inline-flex!important;align-items:center;justify-content:center;min-height:46px;padding:0 26px!important;border:2px solid var(--cs-yellow)!important;border-radius:999px!important;background:var(--cs-yellow)!important;color:#111!important;font-size:14px!important;font-weight:800!important;line-height:1!important;text-transform:uppercase;text-decoration:none!important;box-shadow:none!important}
html body .btn-checkout:hover,
html body a.btn-checkout:hover,
html body #previewModal .btn:hover{background:var(--cs-text)!important;border-color:var(--cs-text)!important;color:var(--cs-bg)!important}
html body #previewModal .btn *{background:transparent!important;color:inherit!important}

/* ---- окно «Добавлено в корзину! Что далее?» ---- */
html body #previewModal .modal-content{background:var(--cs-surface)!important;color:var(--cs-text)!important;border:1px solid var(--cs-line)!important;border-radius:24px!important;box-shadow:var(--cs-shadow)!important;overflow:hidden}
html body #previewModal .modal-header{background:transparent!important;border-bottom:1px solid var(--cs-line)!important;padding:18px 24px}
html body #previewModal .modal-title{color:var(--cs-text)!important;font-family:var(--cs-display)!important;font-size:18px!important;font-weight:700!important;text-transform:none!important}
html body #previewModal .close{color:var(--cs-text)!important;opacity:.7;text-shadow:none}
html body #previewModal .modal-body{background:transparent!important;color:var(--cs-text)!important;padding:20px 24px 24px}
html body #previewModal .modal-body *:not(.btn):not(img){background-color:transparent!important;color:var(--cs-text)!important}
html body #previewModal .modal-body img{border-radius:16px}

/* ==========================================================
   22. v1.3.7: пагинация, единые карточки, страницы аккаунта
   ========================================================== */

/* ---- пагинация: у активной страницы жёлтым был сам <li> (квадрат), теперь жёлтая только «таблетка» внутри ---- */
html body .pagination>li.active{background:transparent!important;border:0!important;box-shadow:none!important}
html body .pagination>li.active>span,
html body .pagination>li.active>a{border-radius:10px!important}

/* ---- карточки товара: одинаковый вид на главной, в каталоге, поиске и «похожих товарах» ---- */
@media (min-width:768px){
  html body .listingtab-layout33 .ltabs-items-inner{gap:28px}
  html body .listingtab-layout33 .product-item-container,
  html body .products-list .product-layout .product-item-container{padding:18px!important;border-radius:24px!important}
  html body .listingtab-layout33 .product-image-container,
  html body .products-list .product-layout .product-image-container{border-radius:18px;overflow:hidden}
}

/* ---- хлебные крошки на страницах, где они не внутри полосы .breadcrumbs (например, авторизация) ---- */
html body ul.breadcrumb{display:block!important;width:auto!important;margin:0!important;padding:14px 0!important;background:transparent!important}
html body ul.breadcrumb li,
html body ul.breadcrumb li a{color:var(--cs-muted)!important}
html body ul.breadcrumb li:last-child a{color:var(--cs-text)!important;font-weight:700}
html body ul.breadcrumb li a:hover{color:var(--cs-yellow-ink)!important}

/* class*="account-"] */
html body[class*="account-"] .well{background:var(--cs-surface)!important;border:1px solid var(--cs-line)!important;border-radius:20px!important;box-shadow:none!important;padding:24px!important}
html body[class*="account-"] #content h1,html body[class*="account-"] #content h2,html body[class*="account-"] #content h3,html body[class*="account-"] #content h4,html body[class*="account-"] #content legend{color:var(--cs-text)!important;font-family:var(--cs-display)!important;text-transform:none!important}
html body[class*="account-"] #content h2{font-size:22px!important}
html body[class*="account-"] #content h3{font-size:16px!important}
html body[class*="account-"] #content p,html body[class*="account-"] #content label,html body[class*="account-"] #content td,html body[class*="account-"] #content th,html body[class*="account-"] #content li,html body[class*="account-"] #content .control-label{color:var(--cs-text2)!important}
html body[class*="account-"] #content a:not(.btn):not(.list-group-item){color:var(--cs-yellow-ink)!important}
html body[class*="account-"] .form-control,html body[class*="account-"] select.form-control,html body[class*="account-"] textarea.form-control{background:var(--cs-surface2)!important;color:var(--cs-text)!important;border:1px solid var(--cs-line)!important;border-radius:12px!important;min-height:46px;box-shadow:none!important}
html body[class*="account-"] .form-control:focus{border-color:var(--cs-yellow)!important}
html body[class*="account-"] .btn-primary,html body[class*="account-"] input.btn-primary,html body[class*="account-"] input[type="submit"].btn,html body[class*="account-"] button[type="submit"].btn{display:inline-flex!important;align-items:center;justify-content:center;min-height:46px;padding:0 26px!important;border:2px solid var(--cs-yellow)!important;border-radius:999px!important;background:var(--cs-yellow)!important;color:#111!important;font-size:14px!important;font-weight:800!important;line-height:1!important;text-transform:uppercase;box-shadow:none!important}
html body[class*="account-"] .btn-primary:hover,html body[class*="account-"] input.btn-primary:hover,html body[class*="account-"] input[type="submit"].btn:hover,html body[class*="account-"] button[type="submit"].btn:hover{background:var(--cs-text)!important;border-color:var(--cs-text)!important;color:var(--cs-bg)!important}
html body[class*="account-"] .btn-default{border:1px solid var(--cs-line)!important;border-radius:999px!important;background:var(--cs-surface2)!important;color:var(--cs-text)!important;box-shadow:none!important}
html body[class*="account-"] .list-group{border-radius:20px;overflow:hidden;box-shadow:none}
html body[class*="account-"] .list-group-item{background:var(--cs-surface)!important;color:var(--cs-text2)!important;border:0!important;border-bottom:1px solid var(--cs-line)!important;margin:0!important;padding:12px 18px!important}
html body[class*="account-"] a.list-group-item:hover{background:var(--cs-surface2)!important;color:var(--cs-text)!important}
html body[class*="account-"] a.list-group-item.active{background:var(--cs-yellow)!important;color:#111!important}

/* class*="information-"] */
html body[class*="information-"] .well{background:var(--cs-surface)!important;border:1px solid var(--cs-line)!important;border-radius:20px!important;box-shadow:none!important;padding:24px!important}
html body[class*="information-"] #content h1,html body[class*="information-"] #content h2,html body[class*="information-"] #content h3,html body[class*="information-"] #content h4,html body[class*="information-"] #content legend{color:var(--cs-text)!important;font-family:var(--cs-display)!important;text-transform:none!important}
html body[class*="information-"] #content h2{font-size:22px!important}
html body[class*="information-"] #content h3{font-size:16px!important}
html body[class*="information-"] #content p,html body[class*="information-"] #content label,html body[class*="information-"] #content td,html body[class*="information-"] #content th,html body[class*="information-"] #content li,html body[class*="information-"] #content .control-label{color:var(--cs-text2)!important}
html body[class*="information-"] #content a:not(.btn):not(.list-group-item){color:var(--cs-yellow-ink)!important}
html body[class*="information-"] .form-control,html body[class*="information-"] select.form-control,html body[class*="information-"] textarea.form-control{background:var(--cs-surface2)!important;color:var(--cs-text)!important;border:1px solid var(--cs-line)!important;border-radius:12px!important;min-height:46px;box-shadow:none!important}
html body[class*="information-"] .form-control:focus{border-color:var(--cs-yellow)!important}
html body[class*="information-"] .btn-primary,html body[class*="information-"] input.btn-primary,html body[class*="information-"] input[type="submit"].btn,html body[class*="information-"] button[type="submit"].btn{display:inline-flex!important;align-items:center;justify-content:center;min-height:46px;padding:0 26px!important;border:2px solid var(--cs-yellow)!important;border-radius:999px!important;background:var(--cs-yellow)!important;color:#111!important;font-size:14px!important;font-weight:800!important;line-height:1!important;text-transform:uppercase;box-shadow:none!important}
html body[class*="information-"] .btn-primary:hover,html body[class*="information-"] input.btn-primary:hover,html body[class*="information-"] input[type="submit"].btn:hover,html body[class*="information-"] button[type="submit"].btn:hover{background:var(--cs-text)!important;border-color:var(--cs-text)!important;color:var(--cs-bg)!important}
html body[class*="information-"] .btn-default{border:1px solid var(--cs-line)!important;border-radius:999px!important;background:var(--cs-surface2)!important;color:var(--cs-text)!important;box-shadow:none!important}
html body[class*="information-"] .list-group{border-radius:20px;overflow:hidden;box-shadow:none}
html body[class*="information-"] .list-group-item{background:var(--cs-surface)!important;color:var(--cs-text2)!important;border:0!important;border-bottom:1px solid var(--cs-line)!important;margin:0!important;padding:12px 18px!important}
html body[class*="information-"] a.list-group-item:hover{background:var(--cs-surface2)!important;color:var(--cs-text)!important}
html body[class*="information-"] a.list-group-item.active{background:var(--cs-yellow)!important;color:#111!important}
    text-transform: none!important
}

html body #previewModal .close {
    color: var(--cs-text)!important;
    opacity: .7;
    text-shadow: none
}

html body #previewModal .modal-body {
    background: transparent!important;
    color: var(--cs-text)!important;
    padding: 20px 24px 24px
}

html body #previewModal .modal-body *:not(.btn):not(img) {
    background-color: transparent!important;
    color: var(--cs-text)!important
}

html body #previewModal .modal-body img {
    border-radius: 16px
}

/* ==========================================================
   22. v1.3.7: пагинация, единые карточки, страницы аккаунта
   ========================================================== */
/* ---- пагинация: у активной страницы жёлтым был сам <li> (квадрат), теперь жёлтая только «таблетка» внутри ---- */
html body .pagination>li.active {
    background: transparent!important;
    border: 0!important;
    box-shadow: none!important
}

html body .pagination>li.active>span, html body .pagination>li.active>a {
    border-radius: 10px!important
}

/* ---- карточки товара: одинаковый вид на главной, в каталоге, поиске и «похожих товарах» ---- */
@media (min-width: 768px) {
    html body .listingtab-layout33 .ltabs-items-inner {
        gap: 12px;
    }

    html body .listingtab-layout33 .product-item-container, html body .products-list .product-layout .product-item-container {
        padding: 0px!important;
        border-radius: 10px!important;
    }

    html body .listingtab-layout33 .product-image-container, html body .products-list .product-layout .product-image-container {
        border-radius: 7px;
        overflow: hidden
    }
}

/* ---- хлебные крошки на страницах, где они не внутри полосы .breadcrumbs (например, авторизация) ---- */
html body ul.breadcrumb {
    display: block!important;
    width: auto!important;
    margin: 0!important;
    padding: 14px 0!important;
    background: transparent!important
}

html body ul.breadcrumb li, html body ul.breadcrumb li a {
    color: var(--cs-muted)!important
}

html body ul.breadcrumb li:last-child a {
    color: var(--cs-text)!important;
    font-weight: 700
}

html body ul.breadcrumb li a:hover {
    color: var(--cs-yellow-ink)!important
}

/* class*="account-"] */
html body[class*="account-"] .well {
    background: var(--cs-surface)!important;
    border: 1px solid var(--cs-line)!important;
    border-radius: 20px!important;
    box-shadow: none!important;
    padding: 24px!important
}

html body[class*="account-"] #content h1,html body[class*="account-"] #content h2,html body[class*="account-"] #content h3,html body[class*="account-"] #content h4,html body[class*="account-"] #content legend {
    color: var(--cs-text)!important;
    font-family: var(--cs-display)!important;
    text-transform: none!important
}

html body[class*="account-"] #content h2 {
    font-size: 22px!important
}

html body[class*="account-"] #content h3 {
    font-size: 16px!important
}

html body[class*="account-"] #content p,html body[class*="account-"] #content label,html body[class*="account-"] #content td,html body[class*="account-"] #content th,html body[class*="account-"] #content li,html body[class*="account-"] #content .control-label {
    color: var(--cs-text2)!important
}

html body[class*="account-"] #content a:not(.btn):not(.list-group-item) {
    color: var(--cs-yellow-ink)!important
}

html body[class*="account-"] .form-control,html body[class*="account-"] select.form-control,html body[class*="account-"] textarea.form-control {
    background: var(--cs-surface2)!important;
    color: var(--cs-text)!important;
    border: 1px solid var(--cs-line)!important;
    border-radius: 12px!important;
    min-height: 46px;
    box-shadow: none!important
}

html body[class*="account-"] .form-control:focus {
    border-color: var(--cs-yellow)!important
}

html body[class*="account-"] .btn-primary,html body[class*="account-"] input.btn-primary,html body[class*="account-"] input[type="submit"].btn,html body[class*="account-"] button[type="submit"].btn {
    display: inline-flex!important;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 0 26px!important;
    border: 2px solid var(--cs-yellow)!important;
    border-radius: 999px!important;
    background: var(--cs-yellow)!important;
    color: #111!important;
    font-size: 14px!important;
    font-weight: 800!important;
    line-height: 1!important;
    text-transform: uppercase;
    box-shadow: none!important
}

html body[class*="account-"] .btn-primary:hover,html body[class*="account-"] input.btn-primary:hover,html body[class*="account-"] input[type="submit"].btn:hover,html body[class*="account-"] button[type="submit"].btn:hover {
    background: var(--cs-text)!important;
    border-color: var(--cs-text)!important;
    color: var(--cs-bg)!important
}

html body[class*="account-"] .btn-default {
    border: 1px solid var(--cs-line)!important;
    border-radius: 999px!important;
    background: var(--cs-surface2)!important;
    color: var(--cs-text)!important;
    box-shadow: none!important
}

html body[class*="account-"] .list-group {
    border-radius: 20px;
    overflow: hidden;
    box-shadow: none
}

html body[class*="account-"] .list-group-item {
    background: var(--cs-surface)!important;
    color: var(--cs-text2)!important;
    border: 0!important;
    border-bottom: 1px solid var(--cs-line)!important;
    margin: 0!important;
    padding: 12px 18px!important
}

html body[class*="account-"] a.list-group-item:hover {
    background: var(--cs-surface2)!important;
    color: var(--cs-text)!important
}

html body[class*="account-"] a.list-group-item.active {
    background: var(--cs-yellow)!important;
    color: #111!important
}

/* class*="information-"] */
html body[class*="information-"] .well {
    background: var(--cs-surface)!important;
    border: 1px solid var(--cs-line)!important;
    border-radius: 20px!important;
    box-shadow: none!important;
    padding: 24px!important
}

html body[class*="information-"] #content h1,html body[class*="information-"] #content h2,html body[class*="information-"] #content h3,html body[class*="information-"] #content h4,html body[class*="information-"] #content legend {
    color: var(--cs-text)!important;
    font-family: var(--cs-display)!important;
    text-transform: none!important
}

html body[class*="information-"] #content h2 {
    font-size: 22px!important
}

html body[class*="information-"] #content h3 {
    font-size: 16px!important
}

html body[class*="information-"] #content p,html body[class*="information-"] #content label,html body[class*="information-"] #content td,html body[class*="information-"] #content th,html body[class*="information-"] #content li,html body[class*="information-"] #content .control-label {
    color: var(--cs-text2)!important
}

html body[class*="information-"] #content a:not(.btn):not(.list-group-item) {
    color: var(--cs-yellow-ink)!important
}

html body[class*="information-"] .form-control,html body[class*="information-"] select.form-control,html body[class*="information-"] textarea.form-control {
    background: var(--cs-surface2)!important;
    color: var(--cs-text)!important;
    border: 1px solid var(--cs-line)!important;
    border-radius: 12px!important;
    min-height: 46px;
    box-shadow: none!important
}

html body[class*="information-"] .form-control:focus {
    border-color: var(--cs-yellow)!important
}

html body[class*="information-"] .btn-primary,html body[class*="information-"] input.btn-primary,html body[class*="information-"] input[type="submit"].btn,html body[class*="information-"] button[type="submit"].btn {
    display: inline-flex!important;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 0 26px!important;
    border: 2px solid var(--cs-yellow)!important;
    border-radius: 999px!important;
    background: var(--cs-yellow)!important;
    color: #111!important;
    font-size: 14px!important;
    font-weight: 800!important;
    line-height: 1!important;
    text-transform: uppercase;
    box-shadow: none!important
}

html body[class*="information-"] .btn-primary:hover,html body[class*="information-"] input.btn-primary:hover,html body[class*="information-"] input[type="submit"].btn:hover,html body[class*="information-"] button[type="submit"].btn:hover {
    background: var(--cs-text)!important;
    border-color: var(--cs-text)!important;
    color: var(--cs-bg)!important
}

html body[class*="information-"] .btn-default {
    border: 1px solid var(--cs-line)!important;
    border-radius: 999px!important;
    background: var(--cs-surface2)!important;
    color: var(--cs-text)!important;
    box-shadow: none!important
}

html body[class*="information-"] .list-group {
    border-radius: 20px;
    overflow: hidden;
    box-shadow: none
}

html body[class*="information-"] .list-group-item {
    background: var(--cs-surface)!important;
    color: var(--cs-text2)!important;
    border: 0!important;
    border-bottom: 1px solid var(--cs-line)!important;
    margin: 0!important;
    padding: 12px 18px!important
}

html body[class*="information-"] a.list-group-item:hover {
    background: var(--cs-surface2)!important;
    color: var(--cs-text)!important
}

html body[class*="information-"] a.list-group-item.active {
    background: var(--cs-yellow)!important;
    color: #111!important
}