﻿/* =====================================================================
   style.css — общие стили темы Comodo5 (раньше назывался Ok.css).
   Подключается в Layout.cshtml и CartLayout.cshtml через Helper.GetVersionedPath:
   к адресу добавляется ?v=<дата изменения файла>, поэтому после правки браузеры
   сами загружают новую версию.
   ===================================================================== */

/* ---------- Светлая и тёмная тема ----------
   Цвета поверхностей, текста и рамок — переменные. Тема задаётся атрибутом data-bs-theme
   на <html> (его ставит скрипт в Layout/CartLayout до загрузки страницы, выбор — в подвале). */
:root,
[data-bs-theme="light"] {
    --oc-surface: #fff;
    --oc-surface-2: #f6f7f9;
    --oc-surface-3: #f1f3f6;
    --oc-surface-glass: rgba(255, 255, 255, .95);
    --oc-media: #f6f7f9;
    --oc-text-strong: #111827;
    --oc-text: #1f2937;
    --oc-text-2: #4b5563;
    --oc-text-muted: #6b7280;
    --oc-text-soft: #9ca3af;
    --oc-text-faint: #c4c9d2;
    --oc-border: rgba(0, 0, 0, .06);
    --oc-border-strong: #e5e7eb;
}

[data-bs-theme="dark"] {
    --oc-surface: #1b1f27;
    --oc-surface-2: #13161c;
    --oc-surface-3: #262b35;
    --oc-surface-glass: rgba(27, 31, 39, .95);
    /* фото товаров — на светлой плашке: у снимков белый фон */
    --oc-media: #eef0f3;
    --oc-text-strong: #f3f4f6;
    --oc-text: #e5e7eb;
    --oc-text-2: #cbd0d8;
    --oc-text-muted: #9ca3af;
    --oc-text-soft: #7b8494;
    --oc-text-faint: #4b5563;
    --oc-border: rgba(255, 255, 255, .08);
    --oc-border-strong: #343a46;
    --bs-body-bg: #13161c;
    --bs-body-color: #e5e7eb;
    --bs-secondary-bg: #1b1f27;
    --bs-tertiary-bg: #1b1f27;
    --bs-border-color: #343a46;
    color-scheme: dark;
}


/* ---------------------------------------------- */

/*
.badge-favorite {
    cursor: pointer;
}

.badge-add-to-favorites:not(.ProductCardFavorites) {
    display: none;
    color: black !important;
    background-color: #e0e0e0 !important;
}


.badge-remove-from-favorites:not(.ProductCardFavorites) {
    display: block;
    color: red !important;
}

.badge-add-to-favorites.ProductCardFavorites {
    display: block;
    color: black !important;
}

.badge-remove-from-favorites.ProductCardFavorites {
    display: block;
    color: red !important;
}
*/

.PriceFractionalPart, .PriceWithoutNacencaFractionalPart, .RecommendedPriceFractionalPart {
    font-size: 70%;
}

.navbar-brand {
    max-width: 300px;
}

.avatar {
    width: 50px !important;
    height: 50px !important;
}

.rating li {
    list-style-type: none;
    display: inline;
}

.rating ul {
    padding-left: 0rem;
}

/* ---------- MegaMenu (перенесено из Header.cshtml) ---------- */

.widget a img {
    max-width: 320px;
    height: 120px;
}

.widget-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.widget-list-link {
    display: block;
    transition: color .25s ease-in-out;
    color: #4b566b;
    font-size: .875rem;
    font-weight: normal;
}

.dropdown-menu a {
    text-decoration: none;
}

/* ================= Шапка сайта (Header.cshtml) ================= */

/* Верхняя тонкая полоса */
.oh-topbar {
    font-size: .8125rem;
    background: var(--oc-surface-2);
    border-bottom: 1px solid var(--oc-border);
}

    .oh-topbar a,
    .oh-topbar .dropdown-toggle {
        color: var(--oc-text-muted);
        text-decoration: none;
        transition: color .15s ease-in-out;
    }

        .oh-topbar a:hover,
        .oh-topbar .dropdown-toggle:hover {
            color: var(--bs-primary);
        }

    .oh-topbar .bi {
        margin-right: .15rem;
    }

    .oh-topbar img {
        margin-top: 0 !important;
    }

/* Основная полоса: белая, прилипает к верху, при прокрутке — тень */
.oh-main {
    background: var(--oc-surface);
    border-bottom: 1px solid var(--oc-border);
    transition: box-shadow .2s ease-in-out;
}

    .oh-main.is-stuck {
        box-shadow: 0 6px 20px rgba(17, 24, 39, .08);
        border-bottom-color: transparent;
    }

.oh-logo img {
    width: 140px;
    height: auto;
    transition: width .2s ease-in-out;
}

.oh-main.is-stuck .oh-logo img {
    width: 120px;
}

@media (max-width: 575.98px) {
    .oh-logo img,
    .oh-main.is-stuck .oh-logo img {
        width: 100px;
    }
}

/* Поиск: скруглённое поле с кнопкой внутри */
.oh-search {
    position: relative;
    max-width: 640px;
}

    .oh-search .form-control {
        height: 44px;
        padding-left: 1.25rem;
        padding-right: 3.25rem;
        border-radius: 999px;
        border: 1px solid transparent;
        background: var(--oc-surface-3);
        transition: background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    }

        .oh-search .form-control:focus {
            background: var(--oc-surface);
            border-color: var(--bs-primary);
            box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb), .15);
        }

    .oh-search button {
        position: absolute;
        top: 50%;
        right: 4px;
        transform: translateY(-50%);
        width: 36px;
        height: 36px;
        border: 0;
        border-radius: 50%;
        background: var(--bs-primary);
        color: #fff;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

        .oh-search button:hover {
            filter: brightness(.92);
        }

/* Кнопки-иконки справа: иконка + подпись */
.oh-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    min-width: 56px;
    padding: .35rem .5rem;
    border-radius: .75rem;
    color: var(--oc-text);
    text-decoration: none;
    line-height: 1.1;
    transition: background-color .15s ease-in-out, color .15s ease-in-out;
}

    .oh-action:hover,
    .oh-action[aria-expanded="true"] {
        background: var(--oc-surface-3);
        color: var(--bs-primary);
    }

.oh-action-icon {
    position: relative;
    display: inline-flex;
    font-size: 1.35rem;
}

.oh-action-label {
    font-size: .75rem;
    max-width: 80px;
}

@media (max-width: 575.98px) {
    .oh-action-label {
        display: none;
    }

    .oh-action {
        min-width: 40px;
    }
}

/* Счётчики избранного и корзины */
.oh-badge {
    position: absolute;
    top: -4px;
    right: -10px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    font-size: .6875rem;
    font-weight: 600;
    line-height: 18px;
    text-align: center;
    color: #fff;
    box-shadow: 0 0 0 2px #fff;
}

/* Кнопка меню (телефон, планшет) */
.oh-icon-btn {
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: .75rem;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--oc-text);
}

    .oh-icon-btn:hover {
        background: var(--oc-surface-3);
    }

/* Меню разделов (десктоп) */
.oh-menu {
    background: var(--oc-surface);
    border-bottom: 1px solid var(--oc-border);
}

    .oh-menu .nav-link {
        color: var(--oc-text);
        font-weight: 500;
        padding: .75rem 1rem !important;
        border-radius: 0;
        position: relative;
    }

        .oh-menu .nav-link:hover,
        .oh-menu .nav-item.active > .nav-link {
            color: var(--bs-primary);
        }

        .oh-menu .nav-link::after {
            transition: transform .15s ease-in-out;
        }

    .oh-menu .dropdown-menu {
        border: 0;
        border-radius: .75rem;
        box-shadow: 0 12px 32px rgba(17, 24, 39, .12);
    }

/* Выезжающее меню (телефон, планшет) */
.oh-offcanvas {
    max-width: 320px;
}

    .oh-offcanvas .nav-link {
        color: var(--oc-text);
        font-weight: 500;
        padding: .6rem 0;
    }

        .oh-offcanvas .nav-link:hover {
            color: var(--bs-primary);
        }

    .oh-offcanvas .navbar-nav {
        padding-right: 0 !important;
    }

/* ================= Контентное меню: третий уровень (SiteContentMenu.cshtml) ================= */

.dropdown-submenu {
    position: relative;
}

    .dropdown-submenu > .dropdown-menu {
        top: -.5rem;
        left: 100%;
        margin-left: .125rem;
    }

@media (hover: hover) and (min-width: 992px) {
    .dropdown-submenu:hover > .dropdown-menu {
        display: block;
    }
}

.oh-menu .dropdown-item.active,
.oh-menu .dropdown-item:active {
    color: var(--bs-primary);
    background-color: rgba(var(--bs-primary-rgb), .08);
}

/* ================= Мобильное меню (SideSiteContentMenu.cshtml) ================= */

.oh-side-menu .oh-side-chevron {
    transition: transform .2s ease-in-out;
}

.oh-side-menu .nav-link:not(.collapsed) .oh-side-chevron {
    transform: rotate(180deg);
}

.oh-side-menu .nav-link.active {
    color: var(--bs-primary);
}

.oh-side-sub {
    margin: 0 0 .5rem;
    padding-left: 1rem;
    border-left: 2px solid var(--oc-border);
}

    .oh-side-sub li {
        padding: .3rem 0;
    }

    .oh-side-sub a {
        color: var(--oc-text-2);
        text-decoration: none;
    }

        .oh-side-sub a:hover,
        .oh-side-sub a.active {
            color: var(--bs-primary);
        }

.oh-side-sub-3 {
    margin: .3rem 0 0;
    font-size: .875rem;
}

/* ================= Меню «Каталог» (MegaMenu.cshtml) ================= */

/* --- Десктоп --- */
.oh-mega-trigger {
    font-weight: 600;
}

.oh-mega-menu {
    width: min(1080px, 94vw);
    padding: 0;
    margin-top: .5rem !important;
    border: 0;
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 24px 48px rgba(17, 24, 39, .16);
}

.oh-mega-body {
    display: grid;
    grid-template-columns: 280px 1fr;
    min-height: 380px;
    max-height: 70vh;
}

/* Слева — список разделов */
.oh-mega-nav {
    margin: 0;
    padding: .75rem;
    list-style: none;
    background: #f7f8fa;
    border-right: 1px solid var(--oc-border);
    overflow-y: auto;
}

.oh-mega-nav-link {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .5rem .75rem;
    border-radius: .75rem;
    color: var(--oc-text);
    font-weight: 500;
    text-decoration: none;
    transition: background-color .15s ease-in-out, color .15s ease-in-out;
}

    .oh-mega-nav-link:hover,
    .oh-mega-nav-link.active {
        background: var(--oc-surface);
        color: var(--bs-primary);
        box-shadow: 0 2px 8px rgba(17, 24, 39, .06);
    }

.oh-mega-nav-arrow {
    font-size: .75rem;
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity .15s ease-in-out, transform .15s ease-in-out;
}

.oh-mega-nav-link.active .oh-mega-nav-arrow {
    opacity: 1;
    transform: none;
}

/* Миниатюра раздела (или иконка, если картинки нет) */
.oh-mega-thumb {
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    border-radius: .6rem;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #eef1f5;
    color: var(--oc-text-muted);
}

    .oh-mega-thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

/* Справа — подразделы выбранного раздела */
.oh-mega-panes {
    padding: 1.5rem 1.75rem;
    overflow-y: auto;
}

.oh-mega-pane {
    display: none;
}

    .oh-mega-pane.active {
        display: block;
        animation: oh-mega-fade .18s ease-out;
    }

@keyframes oh-mega-fade {
    from {
        opacity: 0;
        transform: translateY(4px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.oh-mega-pane-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.oh-mega-pane-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--oc-text-strong);
}

.oh-mega-pane-all {
    font-size: .875rem;
    color: var(--bs-primary);
    text-decoration: none;
    white-space: nowrap;
}

    .oh-mega-pane-all:hover {
        text-decoration: underline;
    }

.oh-mega-pane-body {
    display: grid;
    grid-template-columns: 1fr 260px;
    gap: 2rem;
    align-items: start;
}

.oh-mega-links {
    margin: 0;
    padding: 0;
    list-style: none;
    columns: 2 180px;
    column-gap: 2rem;
}

    .oh-mega-links li {
        break-inside: avoid;
        margin-bottom: .6rem;
    }

    .oh-mega-links a {
        color: var(--oc-text-2);
        text-decoration: none;
        transition: color .15s ease-in-out;
    }

        .oh-mega-links a:hover {
            color: var(--bs-primary);
        }

/* Подраздел со своими подпунктами (третий уровень) */
    .oh-mega-links-group {
        margin-bottom: 1.1rem !important;
    }

        .oh-mega-links-group > a,
        .oh-mega-links-group > span {
            font-weight: 600;
            color: var(--oc-text-strong);
        }

.oh-mega-links-3 {
    margin: .45rem 0 0;
    padding: 0;
    list-style: none;
    font-size: .875rem;
}

    .oh-mega-links-3 li {
        margin-bottom: .35rem;
    }

.oh-mega-more {
    color: var(--bs-primary) !important;
    font-weight: 500;
}

/* Карточка раздела с картинкой */
.oh-mega-promo {
    position: relative;
    display: block;
    border-radius: 1rem;
    overflow: hidden;
    aspect-ratio: 4 / 5;
    background: var(--oc-surface-3);
}

    .oh-mega-promo img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform .4s ease-in-out;
    }

    .oh-mega-promo:hover img {
        transform: scale(1.05);
    }

.oh-mega-promo-caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 2.5rem 1rem 1rem;
    color: #fff;
    font-weight: 600;
    background: linear-gradient(to top, rgba(17, 24, 39, .75), rgba(17, 24, 39, 0));
}

/* Раздел без картинки — подразделы на всю ширину */
.oh-mega-pane-body:not(:has(.oh-mega-promo)) {
    grid-template-columns: 1fr;
}

    .oh-mega-pane-body:not(:has(.oh-mega-promo)) .oh-mega-links {
        columns: 3 180px;
    }

.oh-mega-footer {
    padding: .75rem 1.75rem;
    border-top: 1px solid var(--oc-border);
    background: var(--oc-surface);
}

    .oh-mega-footer a {
        font-size: .875rem;
        font-weight: 500;
        color: var(--bs-primary);
        text-decoration: none;
    }

        .oh-mega-footer a:hover {
            text-decoration: underline;
        }

/* --- Телефон / планшет: гармошка в выезжающей панели --- */
.oh-mm {
    margin-bottom: .5rem;
}

.oh-mm-toggle,
.oh-mm-group-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    color: var(--oc-text);
    text-decoration: none;
}

.oh-mm-toggle {
    padding: .6rem 0;
    font-weight: 600;
}

.oh-mm-chevron {
    font-size: .8rem;
    transition: transform .2s ease-in-out;
}

.oh-mm-toggle:not(.collapsed) .oh-mm-chevron,
.oh-mm-group-toggle:not(.collapsed) .oh-mm-chevron {
    transform: rotate(180deg);
}

.oh-mm-list {
    padding: .25rem 0 .5rem;
}

.oh-mm-group-toggle {
    padding: .4rem .5rem;
    border-radius: .75rem;
    font-weight: 500;
}

    .oh-mm-group-toggle:hover,
    .oh-mm-group-toggle:not(.collapsed) {
        background: #f3f4f6;
        color: var(--bs-primary);
    }

.oh-mm-links {
    margin: .25rem 0 .5rem 3.25rem;
    padding: 0;
    list-style: none;
}

    .oh-mm-links li {
        padding: .3rem 0;
    }

    .oh-mm-links a {
        color: var(--oc-text-2);
        text-decoration: none;
    }

        .oh-mm-links a:hover {
            color: var(--bs-primary);
        }

.oh-mm-label {
    font-weight: 600;
    color: var(--oc-text-strong);
}

.oh-mm-links-3 {
    margin: .3rem 0 .2rem .9rem;
    padding: 0;
    list-style: none;
    font-size: .875rem;
}

.oh-mm-all {
    display: inline-block;
    margin: .5rem .5rem 0;
    font-weight: 500;
    color: var(--bs-primary);
    text-decoration: none;
}


/* =====================================================================
   Подвал (of-*)
   ===================================================================== */
.of-footer {
    margin-top: 4rem;
    font-size: .9rem;
    color: #9ca3af;
    background: #111827;
}

    .of-footer a {
        color: #d1d5db;
        text-decoration: none;
        transition: color .15s ease-in-out;
    }

        .of-footer a:hover {
            color: #fff;
        }

.of-footer-top {
    padding: 3.5rem 0 2.5rem;
}

.of-footer-logo img {
    width: 140px;
    height: auto;
    /* логотип на тёмном фоне — светлый */
    filter: brightness(0) invert(1);
    opacity: .9;
}

.of-footer-name {
    margin-top: 1rem;
    font-weight: 600;
    color: #fff;
    letter-spacing: .02em;
}

.of-footer-text {
    margin: .5rem 0 0;
    line-height: 1.6;
}

/* Соцсети — круглые кнопки */
.of-social {
    display: flex;
    gap: .5rem;
    margin-top: 1.25rem;
}

    .of-social a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 2.5rem;
        height: 2.5rem;
        border-radius: 50%;
        font-size: 1.1rem;
        background: rgba(255, 255, 255, .08);
        transition: background-color .15s ease-in-out, color .15s ease-in-out;
    }

        .of-social a:hover {
            color: #fff;
            background: var(--bs-primary);
        }

.of-social-text {
    font-size: .8rem;
    font-weight: 700;
}

/* Заголовок колонки: на телефоне — кнопка гармошки, с md — обычный заголовок */
.of-footer-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 1rem;
    padding: 0;
    border: 0;
    background: none;
    font-size: .8rem;
    font-weight: 600;
    text-align: start;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #fff;
}

    .of-footer-title .bi {
        transition: transform .2s ease-in-out;
    }

    .of-footer-title:not(.collapsed) .bi {
        transform: rotate(180deg);
    }

.of-links {
    margin: 0;
    padding: 0;
    list-style: none;
}

    .of-links li {
        margin-bottom: .6rem;
    }

.of-contacts .bi {
    margin-right: .5rem;
    color: #6b7280;
}

.of-subscribe {
    margin-top: .5rem;
}

@media (max-width: 767.98px) {
    .of-footer-title {
        margin-bottom: 0;
        padding: .9rem 0;
        border-bottom: 1px solid rgba(255, 255, 255, .08);
    }

    .of-footer-title-static {
        border-bottom: 0;
    }

    .of-links.collapse,
    .of-links.collapsing {
        padding-top: .75rem;
    }
}

@media (min-width: 768px) {
    /* колонки всегда раскрыты, заголовок не кликается */
    .of-footer-title {
        pointer-events: none;
    }
}

/* Нижняя полоса */
.of-footer-bottom {
    padding: 1.25rem 0;
    font-size: .8rem;
    border-top: 1px solid rgba(255, 255, 255, .08);
}

.of-payment {
    height: 28px;
    width: auto;
    filter: grayscale(100%) brightness(1.6);
    opacity: .7;
    transition: filter .3s ease, opacity .3s ease;
}

    .of-payment:hover {
        filter: none;
        opacity: 1;
    }

/* Плашка о cookie */
.of-cookie {
    position: fixed;
    z-index: 1080;
    left: 50%;
    bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    width: min(720px, calc(100% - 2rem));
    padding: 1rem 1.25rem;
    transform: translateX(-50%);
    border-radius: 1rem;
    background: #fff;
    box-shadow: 0 10px 30px rgba(17, 24, 39, .18);
}

    .of-cookie[hidden] {
        display: none;
    }

    .of-cookie p {
        margin: 0;
        font-size: .8rem;
        color: #374151;
    }

    .of-cookie .btn {
        flex-shrink: 0;
    }

@media (max-width: 575.98px) {
    .of-cookie {
        flex-direction: column;
        align-items: stretch;
    }
}


/* =====================================================================
   Карточка товара (oc-*) — в стиле шапки: белая карточка со скруглением,
   тонкая граница, мягкая тень при наведении, кнопки-«таблетки»
   ===================================================================== */
.oc-card {
    padding: .625rem;
    border: 1px solid var(--oc-border);
    border-radius: 1rem;
    background: var(--oc-surface);
    transition: box-shadow .2s ease-in-out, border-color .2s ease-in-out, transform .2s ease-in-out;
}

    .oc-card:hover {
        border-color: transparent;
        box-shadow: 0 12px 32px rgba(17, 24, 39, .10);
        transform: translateY(-2px);
    }

/* Картинка на светло-сером фоне, как верхняя полоса шапки */
.oc-card-media {
    border-radius: .75rem;
    background: var(--oc-surface-2);
}

    .oc-card-media img {
        padding: .75rem;
        mix-blend-mode: multiply; /* белый фон фото сливается с серой подложкой */
        transition: transform .35s ease-in-out;
    }

.oc-card:hover .oc-card-media img {
    transform: scale(1.04);
}

/* Бейджи акций — компактные */
.oc-card .badge {
    font-size: .6875rem;
    font-weight: 600;
    padding: .35em .65em;
    letter-spacing: .01em;
}

/* Избранное — белая круглая кнопка; на компьютере появляется при наведении на карточку */
.oc-card .badge-favorite {
    width: 36px !important;
    height: 36px !important;
    border: 0;
    background: var(--oc-surface);
    box-shadow: 0 2px 8px rgba(17, 24, 39, .10) !important;
    transition: opacity .2s ease-in-out, color .15s ease-in-out;
}

    .oc-card .badge-favorite:hover {
        color: var(--bs-danger);
    }

@media (hover: hover) {
    .oc-card .badge-add-to-favorites {
        opacity: 0;
    }

    .oc-card:hover .badge-add-to-favorites,
    .oc-card .badge-add-to-favorites:focus-visible {
        opacity: 1;
    }
}

.oc-card .card-body {
    padding: .875rem .25rem .25rem;
}

    .oc-card .card-body h3 a {
        color: var(--oc-text) !important;
    }

        .oc-card .card-body h3 a:hover {
            color: var(--bs-primary) !important;
        }

.oc-card .top-products-goods-rating {
    font-size: .75rem;
}

/* Цена */
.oc-card .top-products-goods-price,
.oc-card .top-products-goods-recommended-price {
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    color: var(--oc-text-strong);
}

.oc-sale {
    align-self: center;
    padding: .15rem .5rem;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 600;
    color: var(--bs-danger);
    background: rgba(var(--bs-danger-rgb), .1);
}

/* Кнопки — «таблетки» с иконкой (иконка через ::before — сохраняется, когда скрипт меняет текст кнопки) */
.oc-card .card-body .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    height: 42px;
    border-radius: 999px;
    font-weight: 500;
}

.oc-card .add-to-cart.btn-primary::before,
.oc-card .add-to-cart.btn-secondary::before {
    font-family: bootstrap-icons !important;
    font-weight: normal;
    line-height: 1;
}

.oc-card .add-to-cart.btn-primary::before {
    content: "\f243"; /* bi-cart2 */
}

.oc-card .add-to-cart.btn-secondary::before {
    content: "\f23a"; /* bi-cart-check */
}

@media (max-width: 575.98px) {
    .oc-card {
        padding: .5rem;
        border-radius: .875rem;
    }

    .oc-card .top-products-goods-price,
    .oc-card .top-products-goods-recommended-price {
        font-size: 1.05rem !important;
    }

    .oc-card .card-body .btn {
        height: 38px;
        font-size: .875rem;
    }
}


/* =====================================================================
   Корзина (PreCart) — в стиле шапки: белые панели со скруглением,
   светло-серые подложки, кнопки-«таблетки», акцент var(--bs-primary)
   ===================================================================== */

/* Шаги оформления */
.oc-steps {
    display: flex;
    justify-content: center;
    gap: .5rem;
    margin: 1rem 0 2rem;
    padding: 0;
    list-style: none;
    counter-reset: none;
}

.oc-step {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .875rem;
    color: var(--oc-text-soft);
}

    .oc-step + .oc-step::before {
        content: "";
        width: 2.5rem;
        height: 2px;
        margin-right: .5rem;
        border-radius: 2px;
        background: #e5e7eb;
    }

.oc-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    font-weight: 600;
    background: var(--oc-surface-3);
    color: var(--oc-text-muted);
}

.oc-step.is-active {
    color: var(--oc-text-strong);
    font-weight: 600;
}

    .oc-step.is-active .oc-step-num {
        color: #fff;
        background: var(--bs-primary);
        box-shadow: 0 0 0 .25rem rgba(var(--bs-primary-rgb), .15);
    }

@media (max-width: 575.98px) {
    .oc-step:not(.is-active) .oc-step-text {
        display: none;
    }

    .oc-step + .oc-step::before {
        width: 1.25rem;
    }
}

/* Панель */
.oc-panel {
    padding: 1.5rem;
    border: 1px solid var(--oc-border);
    border-radius: 1.25rem;
    background: var(--oc-surface);
    box-shadow: 0 6px 20px rgba(17, 24, 39, .04);
}

.oc-panel-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: .5rem;
}

.oc-panel-title {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--oc-text-strong);
}

.oc-back-link,
.oc-summary-back {
    font-size: .875rem;
    color: var(--oc-text-muted);
    text-decoration: none;
    white-space: nowrap;
    transition: color .15s ease-in-out;
}

    .oc-back-link:hover,
    .oc-summary-back:hover {
        color: var(--bs-primary);
    }

/* Строка товара */
.oc-cart-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.25rem 0;
    border-top: 1px solid var(--oc-border);
}

.oc-cart-list > .oc-cart-item:first-of-type {
    border-top: 0;
}

.oc-cart-check {
    align-self: center;
    margin: 0;
    padding: 0;
    min-height: 0;
}

    .oc-cart-check .form-check-input {
        width: 1.25rem;
        height: 1.25rem;
        margin: 0;
        border-radius: .4rem;
    }

.oc-cart-pic {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 96px;
    height: 96px;
    border-radius: .875rem;
    font-size: 1.5rem;
    color: var(--oc-text-faint);
    background: var(--oc-surface-2);
    overflow: hidden;
}

    .oc-cart-pic img {
        width: 100%;
        height: 100%;
        padding: .5rem;
        object-fit: contain;
        mix-blend-mode: multiply;
    }

.oc-cart-info {
    flex: 1 1 auto;
    min-width: 0;
}

.oc-cart-name {
    display: block;
    font-weight: 600;
    line-height: 1.35;
    color: var(--oc-text);
    text-decoration: none;
}

    .oc-cart-name:hover {
        color: var(--bs-primary);
    }

.oc-cart-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem 1rem;
    margin-top: .35rem;
    font-size: .8125rem;
    color: var(--oc-text-muted);
}

.oc-cart-note {
    margin-top: .35rem;
    font-size: .8125rem;
    font-weight: 500;
}

    .oc-cart-note.is-sale {
        color: var(--bs-danger);
    }

    .oc-cart-note.is-warn {
        color: #b45309;
    }

.oc-cart-kit-badge {
    display: inline-block;
    margin-bottom: .35rem;
    padding: .15rem .6rem;
    border-radius: 999px;
    font-size: .75rem;
    color: var(--oc-text-muted);
    background: var(--oc-surface-3);
}

.oc-cart-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem 1.25rem;
    margin-top: .6rem;
}

.oc-cart-action {
    padding: 0;
    font-size: .8125rem;
    color: var(--oc-text-muted);
    text-decoration: none;
}

    .oc-cart-action:hover {
        color: var(--bs-primary);
    }

    .oc-cart-action.is-delete:hover {
        color: var(--bs-danger);
    }

/* Количество и цена */
.oc-cart-side {
    display: flex;
    flex-shrink: 0;
    flex-direction: column;
    align-items: flex-end;
    gap: .75rem;
    min-width: 9rem;
}

.oc-qty {
    display: inline-flex;
    align-items: center;
    height: 40px;
    padding: 3px;
    border-radius: 999px;
    background: var(--oc-surface-3);
}

    .oc-qty button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 34px;
        height: 34px;
        padding: 0;
        border: 0;
        border-radius: 50%;
        font-size: 1.1rem;
        color: var(--oc-text);
        background: var(--oc-surface);
        box-shadow: 0 1px 3px rgba(17, 24, 39, .08);
        transition: color .15s ease-in-out, background-color .15s ease-in-out;
    }

        .oc-qty button:hover:not(:disabled) {
            color: #fff;
            background: var(--bs-primary);
        }

        .oc-qty button:disabled {
            color: var(--oc-text-faint);
            box-shadow: none;
            background: transparent;
        }

    .oc-qty input {
        width: 2.75rem;
        padding: 0;
        border: 0;
        font-weight: 600;
        text-align: center;
        color: var(--oc-text-strong);
        background: transparent;
        outline: none;
    }

        .oc-qty input:disabled {
            color: var(--oc-text-soft);
        }

.oc-cart-qty-text {
    font-weight: 600;
    color: var(--oc-text-muted);
}

.oc-cart-price {
    text-align: end;
}

.oc-cart-total {
    font-size: 1.125rem;
    font-weight: 700;
    white-space: nowrap;
    color: var(--oc-text-strong);
}

    .oc-cart-total.is-sale {
        color: var(--bs-danger);
    }

.oc-cart-unit {
    margin-top: .15rem;
    font-size: .75rem;
    white-space: nowrap;
    color: var(--oc-text-soft);
}

/* Товар из комплекта — со сдвигом и полосой слева */
.oc-cart-item-kit {
    margin-left: .75rem;
    padding-left: 1rem;
    border-top: 0;
    border-left: 3px solid var(--oc-border-strong);
}

.oc-cart-kit-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    margin-top: .75rem;
    padding: .75rem 1rem;
    border-radius: .875rem;
    background: var(--oc-surface-2);
}

    .oc-cart-kit-head .form-check {
        margin: 0;
    }

.oc-pill-btn {
    border-radius: 999px;
    font-weight: 500;
    padding-left: 1rem;
    padding-right: 1rem;
}

/* Итог заказа */
.oc-summary {
    position: sticky;
    top: 1.5rem;
}

.oc-summary-title {
    margin: 0 0 1rem;
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--oc-text-strong);
}

.oc-summary-list {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: .9rem;
}

    .oc-summary-list li {
        display: flex;
        justify-content: space-between;
        gap: 1rem;
        padding: .35rem 0;
        color: var(--oc-text-strong);
    }

        .oc-summary-list li > span:first-child {
            color: var(--oc-text-muted);
        }

    .oc-summary-list .oc-summary-discount,
    .oc-summary-list .oc-summary-discount > span:first-child {
        color: var(--bs-danger);
    }

.oc-summary-total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-top: .75rem;
    padding-top: 1rem;
    border-top: 1px dashed var(--oc-border);
    font-weight: 600;
    color: var(--oc-text-strong);
}

    .oc-summary-total .sumrow {
        font-size: 1.5rem;
        font-weight: 700;
        white-space: nowrap;
    }

.oc-summary-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    width: 100%;
    height: 52px;
    margin-top: 1.25rem;
    border-radius: 999px;
    font-weight: 600;
}

    .oc-summary-btn.disabled {
        opacity: .5;
    }

.oc-summary-back {
    display: block;
    margin-top: .9rem;
    text-align: center;
}

/* Подсказки корзины («Бесплатная доставка» и т.п.) */
.oc-alert {
    border: 0;
    border-radius: 1rem;
    color: #1e40af;
    background: rgba(var(--bs-primary-rgb), .08);
}

/* Окно подтверждения удаления */
.oc-modal {
    border: 0;
    border-radius: 1.25rem;
    box-shadow: 0 20px 50px rgba(17, 24, 39, .18);
}

    .oc-modal .modal-body {
        padding: 2rem 1.5rem 1.5rem;
    }

.oc-modal-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    margin-bottom: 1rem;
    border-radius: 50%;
    font-size: 1.5rem;
    color: var(--bs-danger);
    background: rgba(var(--bs-danger-rgb), .1);
}

.oc-modal-title {
    margin-bottom: 1.5rem;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--oc-text-strong);
}

.oc-modal-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .5rem;
}

    .oc-modal-actions .btn {
        height: 44px;
        border-radius: 999px;
        font-weight: 500;
    }

/* Пустая корзина */
.oc-empty {
    max-width: 560px;
    margin: 0 auto;
    padding: 3rem 1.5rem;
    text-align: center;
}

.oc-empty-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 5rem;
    height: 5rem;
    margin-bottom: 1.25rem;
    border-radius: 50%;
    font-size: 2.25rem;
    color: var(--bs-primary);
    background: rgba(var(--bs-primary-rgb), .08);
}

.oc-empty-title {
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--oc-text-strong);
}

.oc-empty-text {
    margin: .5rem auto 1.5rem;
    max-width: 420px;
    color: var(--oc-text-muted);
}

@media (max-width: 991.98px) {
    .oc-summary {
        position: static;
    }
}

@media (max-width: 575.98px) {
    .oc-panel {
        padding: 1rem;
        border-radius: 1rem;
    }

    .oc-panel-title {
        font-size: 1.25rem;
    }

    .oc-panel-head .oc-back-link {
        display: none;
    }

    /* Телефон: количество и цена — отдельной строкой под товаром */
    .oc-cart-item {
        flex-wrap: wrap;
        gap: .75rem;
    }

    .oc-cart-pic {
        width: 72px;
        height: 72px;
    }

    .oc-cart-info {
        flex-basis: calc(100% - 72px - 1.25rem - 1.5rem);
    }

    .oc-cart-side {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        min-width: 0;
    }
}


/* =====================================================================
   Страницы оформления заказа (CartLayout, oc-checkout-*):
   светло-серый фон, белая шапка без меню, подвал одной строкой
   ===================================================================== */
.oc-checkout-body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: var(--oc-surface-2);
}

.oc-checkout-header {
    position: relative;
    padding: .75rem 0;
    background: var(--oc-surface);
    border-bottom: 1px solid var(--oc-border);
}

    /* логотип по центру независимо от ширины боковых блоков */
    .oc-checkout-header .oc-checkout-logo {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }

.oc-checkout-back,
.oc-checkout-phone {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    height: 40px;
    padding: 0 .9rem;
    border-radius: 999px;
    font-size: .875rem;
    font-weight: 500;
    color: var(--oc-text);
    background: var(--oc-surface-3);
    text-decoration: none;
    transition: color .15s ease-in-out, background-color .15s ease-in-out;
}

    .oc-checkout-back:hover,
    .oc-checkout-phone:hover {
        color: var(--bs-primary);
        background: rgba(var(--bs-primary-rgb), .08);
    }

.oc-checkout-secure {
    align-items: center;
    gap: .4rem;
    font-size: .8125rem;
    color: #16a34a;
}

.oc-checkout-main {
    flex: 1 0 auto;
    padding: 1.5rem 0 3rem;
}

.oc-checkout-footer {
    padding: 1.25rem 0;
    font-size: .8125rem;
    color: var(--oc-text-muted);
    background: var(--oc-surface);
    border-top: 1px solid var(--oc-border);
}

    .oc-checkout-footer a {
        color: var(--oc-text-muted);
        text-decoration: none;
    }

        .oc-checkout-footer a:hover {
            color: var(--bs-primary);
        }

@media (max-width: 767.98px) {
    .oc-checkout-back,
    .oc-checkout-phone {
        width: 40px;
        padding: 0;
        justify-content: center;
    }

    .oc-checkout-main {
        padding-top: 1rem;
    }
}


/* =====================================================================
   Оформление заказа: CartLogin, Cart, OrderSuccess (+ их частичные шаблоны).
   Бутстраповские карточки, поля и кнопки на страницах оформления
   приводятся к стилю шапки — без правки разметки доставки и оплаты
   ===================================================================== */

/* Пройденный шаг — зелёная галочка, ссылка назад */
.oc-step.is-done {
    color: #16a34a;
}

    .oc-step.is-done .oc-step-num {
        color: #fff;
        background: #16a34a;
        text-decoration: none;
    }

/* Карточки */
.oc-checkout-body .card {
    margin-bottom: 1.5rem;
    border: 1px solid var(--oc-border);
    border-radius: 1.25rem;
    background: var(--oc-surface);
    box-shadow: 0 6px 20px rgba(17, 24, 39, .04);
}

    .oc-checkout-body .card .card {
        margin-bottom: 0;
        border-radius: 1rem;
        box-shadow: none;
        background: var(--oc-surface-2);
    }

.oc-checkout-body .card-header {
    padding: 1.25rem 1.5rem .25rem;
    border-bottom: 0;
    background: transparent;
}

    .oc-checkout-body .card-header h2,
    .oc-checkout-body .card-header h3,
    .oc-checkout-body .card-header h4 {
        margin: 0;
        font-size: 1.125rem;
        font-weight: 700;
        color: var(--oc-text-strong);
    }

.oc-checkout-body .card-body {
    padding: 1rem 1.5rem 1.5rem;
}

.oc-checkout-body .card-footer {
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--oc-border);
    border-radius: 0 0 1.25rem 1.25rem;
    background: var(--oc-surface-2);
}

.oc-checkout-body .card.my-3,
.oc-checkout-body .card.my-2 {
    margin-top: 0 !important;
}

.oc-checkout-body .card.py-2 {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Поля ввода */
.oc-checkout-body .form-control,
.oc-checkout-body .form-select {
    border-color: var(--oc-border-strong);
    border-radius: .75rem;
    background-color: var(--oc-surface-2);
}

    .oc-checkout-body .form-control:focus,
    .oc-checkout-body .form-select:focus {
        border-color: var(--bs-primary);
        background-color: var(--oc-surface);
        box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb), .15);
    }

.oc-checkout-body .input-group > .form-floating:not(:last-child) > .form-control,
.oc-checkout-body .input-group > .form-floating:not(:last-child) > .form-select {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.oc-checkout-body .input-group > .form-floating:not(:first-child) > .form-control,
.oc-checkout-body .input-group > .form-floating:not(:first-child) > .form-select {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.oc-checkout-body .form-check-input {
    border-color: var(--oc-border-strong);
}

/* Кнопки — «таблетки» */
.oc-checkout-body .btn:not(.btn-link):not(.btn-close):not(.btn-check + .btn) {
    border-radius: 999px;
    font-weight: 500;
}

.oc-checkout-body .btn-primary.w-100:not(.btn-sm) {
    min-height: 48px;
}

.oc-checkout-body .btn-block {
    display: block;
    width: 100%;
}

/* Выбор доставки, адреса и оплаты (btn-check + label) — плитки */
.oc-checkout-body .btn-check + .btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: .25rem .5rem;
    min-height: 56px;
    padding: .75rem 2.5rem .75rem 1rem;
    border: 1.5px solid var(--oc-border-strong);
    border-radius: 1rem;
    font-weight: 500;
    text-align: start;
    color: var(--oc-text);
    background: var(--oc-surface);
    box-shadow: none;
    transition: border-color .15s ease-in-out, background-color .15s ease-in-out;
}

    .oc-checkout-body .btn-check + .btn:hover {
        border-color: rgba(var(--bs-primary-rgb), .5);
        color: var(--oc-text);
        background: var(--oc-surface);
    }

    .oc-checkout-body .btn-check:checked + .btn,
    .oc-checkout-body .btn-check + .btn.active {
        border-color: var(--bs-primary);
        color: var(--oc-text-strong);
        background: rgba(var(--bs-primary-rgb), .06);
    }

        /* Отметка выбранной плитки */
        .oc-checkout-body .btn-check:checked + .btn::after,
        .oc-checkout-body .btn-check + .btn.active::after {
            content: "\f26a"; /* bi-check-circle-fill */
            position: absolute;
            right: .9rem;
            top: 50%;
            transform: translateY(-50%);
            font-family: bootstrap-icons !important;
            font-size: 1.1rem;
            color: var(--bs-primary);
        }

    .oc-checkout-body .btn-check + .btn .DeliveryPrice,
    .oc-checkout-body .btn-check + .btn .SumLeftToPay {
        font-weight: 600;
        color: var(--bs-primary);
    }

/* Сообщения */
.oc-checkout-body .alert {
    border: 0;
    border-radius: 1rem;
}

.oc-checkout-body .alert-success {
    color: #166534;
    background: #dcfce7;
}

.oc-checkout-body .alert-info {
    color: #1e40af;
    background: rgba(var(--bs-primary-rgb), .08);
}

.oc-checkout-body .alert-danger {
    color: #991b1b;
    background: #fee2e2;
}

.oc-checkout-body .modal-content {
    border: 0;
    border-radius: 1.25rem;
    box-shadow: 0 20px 50px rgba(17, 24, 39, .18);
}

/* ---------- Правая колонка «Ваш заказ» на странице Cart ---------- */
@media (min-width: 992px) {
    .oc-summary-col {
        position: sticky;
        top: 1.5rem;
    }
}

.oc-order-card .card-body {
    padding-top: .5rem;
    padding-bottom: .75rem;
}

/* Длинный список товаров прокручивается внутри карточки */
.oc-order-items {
    max-height: 40vh;
    overflow-y: auto;
}

.oc-order-item {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding: .75rem 0;
    border-top: 1px solid var(--oc-border);
}

    .oc-order-items > .oc-order-item:first-child {
        border-top: 0;
    }

    .oc-order-item.is-kit {
        padding-left: .75rem;
        border-top: 0;
        border-left: 3px solid var(--oc-border-strong);
    }

.oc-order-pic {
    position: relative;
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: .75rem;
    color: var(--oc-text-faint);
    background: var(--oc-surface-2);
}

    .oc-order-pic img {
        width: 100%;
        height: 100%;
        padding: .3rem;
        object-fit: contain;
        mix-blend-mode: multiply;
    }

/* Количество — кружок на углу фото */
.oc-order-qty {
    position: absolute;
    top: -.4rem;
    right: -.4rem;
    min-width: 1.35rem;
    height: 1.35rem;
    padding: 0 .3rem;
    border: 2px solid var(--oc-surface);
    border-radius: 999px;
    font-size: .7rem;
    font-weight: 700;
    line-height: 1.1rem;
    text-align: center;
    color: #fff;
    background: #6b7280;
}

.oc-order-info {
    flex: 1 1 auto;
    min-width: 0;
}

.oc-order-name {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: .875rem;
    font-weight: 500;
    line-height: 1.3;
    color: var(--oc-text);
    text-decoration: none;
}

a.oc-order-name:hover {
    color: var(--bs-primary);
}

.oc-order-meta {
    margin-top: .2rem;
    font-size: .75rem;
    color: var(--oc-text-soft);
}

.oc-order-sum {
    flex-shrink: 0;
    font-size: .9rem;
    font-weight: 700;
    white-space: nowrap;
    color: var(--oc-text-strong);
}

    .oc-order-sum.is-sale {
        color: var(--bs-danger);
    }

.oc-order-kit {
    margin-top: .5rem;
    padding: .5rem .75rem;
    border-radius: .75rem;
    font-size: .8125rem;
    font-weight: 600;
    background: var(--oc-surface-2);
}

.oc-order-totals {
    background: var(--oc-surface) !important;
}

    .oc-order-totals .oc-summary-list {
        font-size: .875rem;
    }

    .oc-order-totals .oc-summary-total {
        margin-top: .5rem;
    }

.oc-order-actions {
    padding: 0 .25rem;
}

    .oc-order-actions .oc-summary-btn {
        margin-top: 0;
    }

.oc-order-agree {
    margin: .75rem 0 0;
    font-size: .75rem;
    line-height: 1.45;
    text-align: center;
    color: var(--oc-text-soft);
}

    .oc-order-agree a {
        color: var(--oc-text-muted);
    }

.oc-summary-back.btn-link {
    padding: 0;
    text-decoration: none;
}

/* ---------- Вход при оформлении (CartLogin) ---------- */
.oc-auth {
    max-width: 480px;
    margin: 0 auto;
}

.oc-auth-intro {
    margin-bottom: 1.25rem;
    text-align: center;
    color: var(--oc-text-muted);
}

    .oc-auth-intro p {
        max-width: 380px;
        margin: .75rem auto 0;
        font-size: .9rem;
    }

.oc-auth-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    font-size: 1.75rem;
    color: var(--bs-primary);
    background: rgba(var(--bs-primary-rgb), .08);
}

.oc-auth .card-header h2 {
    font-size: 1.25rem;
}

.oc-auth .card-footer {
    text-align: center;
}

.oc-auth .icon-link {
    font-size: .875rem;
    font-weight: 500;
    text-decoration: none;
}

/* Выбор способа входа — плитки с радиокнопкой */
.oc-choice {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin: 0 0 .5rem;
    padding: .9rem 1rem;
    border: 1.5px solid var(--oc-border-strong);
    border-radius: 1rem;
    cursor: pointer;
    transition: border-color .15s ease-in-out, background-color .15s ease-in-out;
}

    .oc-choice .form-check-input {
        float: none;
        margin: 0;
    }

    .oc-choice .form-check-label {
        flex: 1 1 auto;
        font-weight: 500;
        cursor: pointer;
    }

        .oc-choice .form-check-label .bi {
            margin-right: .35rem;
            color: var(--oc-text-muted);
        }

    .oc-choice:has(.form-check-input:checked) {
        border-color: var(--bs-primary);
        background: rgba(var(--bs-primary-rgb), .06);
    }

/* ---------- Заказ оформлен (OrderSuccess) ---------- */
.oc-order-page {
    padding-top: 1.5rem;
}

.oc-order-hero {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 1.25rem;
    margin-bottom: 1.5rem;
}

.oc-order-hero-icon {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    font-size: 1.75rem;
    color: #fff;
    background: #16a34a;
    box-shadow: 0 0 0 .4rem rgba(22, 163, 74, .12);
}

    .oc-order-hero-icon.is-canceled {
        background: var(--bs-danger);
        box-shadow: 0 0 0 .4rem rgba(var(--bs-danger-rgb), .12);
    }

.oc-order-hero-title {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--oc-text-strong);
}

.oc-order-hero-sub {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    margin-top: .35rem;
    font-size: .875rem;
    color: var(--oc-text-muted);
}

    .oc-order-hero-sub .badge {
        font-weight: 500;
    }

.oc-order-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.oc-order-cancel {
    margin-top: .75rem;
    font-size: .875rem;
    color: var(--oc-text-muted);
    text-decoration: none;
}

    .oc-order-cancel:hover {
        color: var(--bs-danger);
    }

.oc-summary-list li > span:last-child {
    text-align: end;
}

/* История статусов — вертикальная линия с кружками */
.oc-timeline {
    position: relative;
    margin: 0;
    padding: 0 0 0 2.75rem;
    list-style: none;
}

    .oc-timeline::before {
        content: "";
        position: absolute;
        left: .95rem;
        top: .5rem;
        bottom: .5rem;
        width: 2px;
        background: #e5e7eb;
    }

.oc-timeline-item {
    position: relative;
    padding-bottom: 1.25rem;
}

    .oc-timeline-item:last-child {
        padding-bottom: 0;
    }

.oc-timeline-dot {
    position: absolute;
    left: -2.75rem;
    top: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: 3px solid var(--oc-surface);
    border-radius: 50%;
    font-size: .75rem;
    font-weight: 700;
    color: #fff;
    background: #16a34a;
}

.oc-timeline-item:last-child .oc-timeline-dot {
    box-shadow: 0 0 0 .25rem rgba(22, 163, 74, .15);
}

@media (max-width: 575.98px) {
    .oc-checkout-body .card-header {
        padding: 1rem 1rem .25rem;
    }

    .oc-checkout-body .card-body {
        padding: .75rem 1rem 1rem;
    }

    .oc-checkout-body .card-footer {
        padding: .875rem 1rem;
    }

    .oc-order-hero-title {
        font-size: 1.25rem;
    }

    .oc-order-hero-actions {
        width: 100%;
    }

        .oc-order-hero-actions .btn {
            flex: 1 1 0;
        }
}


/* =====================================================================
   Каталог: плитка (CataloguePartial) и список (CataloguePartialList).
   Карточка — общий oc-card, здесь только то, что есть в каталоге дополнительно
   ===================================================================== */
.oc-card-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.6em;
    margin: 0 0 .35rem;
    font-size: .9375rem;
    font-weight: 500;
    line-height: 1.3;
}

    .oc-card-title a {
        color: var(--oc-text);
        text-decoration: none;
    }

        .oc-card-title a:hover {
            color: var(--bs-primary);
        }

.oc-card-sub {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .15rem .75rem;
    font-size: .75rem;
    color: var(--oc-text-soft);
}

.oc-card-rating {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    font-weight: 600;
    color: var(--oc-text);
    text-decoration: none;
}

    .oc-card-rating .bi {
        color: #f59e0b;
    }

    .oc-card-rating:hover {
        color: var(--bs-primary);
    }

.oc-card-desc {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-top: .5rem;
    font-size: .8125rem;
    line-height: 1.45;
    color: var(--oc-text-muted);
}

    .oc-card-desc p {
        display: inline;
        margin: 0;
    }

.oc-card-vp {
    margin-top: .35rem;
    font-size: .8125rem;
    color: var(--oc-text-muted);
}

.oc-card-noimg {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: var(--oc-text-faint);
}

.oc-card .catalogue-price .PriceFractionalPart {
    font-size: .8em;
}

@media (max-width: 575.98px) {
    .oc-catalogue-grid .oc-card-desc {
        display: none;
    }
}

/* Список: картинка | описание | цена и кнопка */
.oc-card-row {
    display: grid;
    grid-template-columns: 200px minmax(0, 1fr) 220px;
    gap: 1.25rem;
    align-items: start;
    padding: .75rem;
}

    .oc-card-row .card-body.oc-card-row-info {
        padding: .5rem 0;
    }

    .oc-card-row .oc-card-title {
        min-height: 0;
        font-size: 1.0625rem;
    }

    .oc-card-row .oc-card-desc-long {
        -webkit-line-clamp: 3;
    }

.oc-card-row-buy {
    display: flex;
    flex-direction: column;
    align-self: stretch;
    justify-content: center;
    padding: .75rem .75rem .75rem 1.25rem;
    border-left: 1px solid var(--oc-border);
}

    .oc-card-row-buy .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: .4rem;
        height: 42px;
        border-radius: 999px;
        font-weight: 500;
    }

    .oc-card-row-buy .add-to-cart.btn-primary::before,
    .oc-card-row-buy .add-to-cart.btn-secondary::before {
        font-family: bootstrap-icons !important;
        font-weight: normal;
        line-height: 1;
    }

    .oc-card-row-buy .add-to-cart.btn-primary::before {
        content: "\f243";
    }

    .oc-card-row-buy .add-to-cart.btn-secondary::before {
        content: "\f23a";
    }

@media (max-width: 991.98px) {
    .oc-card-row {
        grid-template-columns: 160px minmax(0, 1fr) 190px;
        gap: 1rem;
    }
}

@media (max-width: 767.98px) {
    /* Телефон: картинка и описание в строку, цена с кнопкой — ниже на всю ширину */
    .oc-card-row {
        grid-template-columns: 110px minmax(0, 1fr);
        gap: .75rem;
        padding: .5rem;
    }

        .oc-card-row .oc-card-title {
            font-size: .9375rem;
        }

        .oc-card-row .oc-card-desc-long {
            -webkit-line-clamp: 2;
        }

    .oc-card-row-buy {
        grid-column: 1 / -1;
        padding: .75rem .25rem .25rem;
        border-left: 0;
        border-top: 1px solid var(--oc-border);
    }

        .oc-card-row-buy .mt-3 {
            margin-top: .5rem !important;
        }
}


/* =====================================================================
   Новости: лента (News), рубрика (NewsList), статья (NewsItem)
   ===================================================================== */
.oc-news-page {
    padding-top: 1rem;
}

.oc-news-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem 2rem;
    margin-bottom: 2rem;
}

.oc-news-h1 {
    margin: 0;
    font-size: 2rem;
    font-weight: 700;
    color: var(--oc-text-strong);
}

/* Рубрики — «таблетки» */
.oc-chips {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.oc-chip {
    display: inline-flex;
    align-items: center;
    height: 38px;
    padding: 0 1rem;
    border-radius: 999px;
    font-size: .875rem;
    font-weight: 500;
    color: var(--oc-text);
    background: var(--oc-surface-3);
    text-decoration: none;
    white-space: nowrap;
    transition: color .15s ease-in-out, background-color .15s ease-in-out;
}

    .oc-chip:hover {
        color: var(--bs-primary);
        background: rgba(var(--bs-primary-rgb), .08);
    }

    .oc-chip.is-active {
        color: #fff;
        background: var(--bs-primary);
    }

@media (max-width: 767.98px) {
    .oc-news-h1 {
        font-size: 1.5rem;
    }

    /* Рубрики на телефоне — в одну строку с прокруткой */
    .oc-news-head nav {
        width: 100%;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .oc-news-head .oc-chips {
        flex-wrap: nowrap;
    }
}

.oc-news-intro {
    margin-bottom: 2rem;
    color: var(--oc-text-2);
}

/* Карточка новости */
.oc-news-card {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    border: 1px solid var(--oc-border);
    border-radius: 1.25rem;
    background: var(--oc-surface);
    transition: box-shadow .2s ease-in-out, transform .2s ease-in-out, border-color .2s ease-in-out;
}

    .oc-news-card:hover {
        border-color: transparent;
        box-shadow: 0 12px 32px rgba(17, 24, 39, .10);
        transform: translateY(-2px);
    }

.oc-news-media {
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--oc-surface-3);
}

    .oc-news-media img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform .4s ease-in-out;
    }

.oc-news-card:hover .oc-news-media img {
    transform: scale(1.04);
}

.oc-news-noimg {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: 2.5rem;
    color: var(--oc-text-faint);
}

.oc-news-body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    padding: 1.25rem 1.25rem 1.1rem;
}

/* Бейдж рубрики — над растянутой ссылкой карточки, чтобы вёл в рубрику */
.oc-news-rubric {
    position: relative;
    z-index: 2;
    align-self: flex-start;
    margin-bottom: .6rem;
    padding: .2rem .65rem;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 600;
    color: var(--bs-primary);
    background: rgba(var(--bs-primary-rgb), .08);
    text-decoration: none;
}

    .oc-news-rubric:hover {
        color: #fff;
        background: var(--bs-primary);
    }

.oc-news-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0 0 .5rem;
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.35;
}

    .oc-news-title a {
        color: var(--oc-text-strong);
        text-decoration: none;
    }

.oc-news-card:hover .oc-news-title a {
    color: var(--bs-primary);
}

.oc-news-announce {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0 0 1rem;
    font-size: .9rem;
    line-height: 1.55;
    color: var(--oc-text-muted);
}

.oc-news-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .25rem 1rem;
    margin-top: auto;
    font-size: .8125rem;
    color: var(--oc-text-soft);
}

.oc-news-more {
    margin-left: auto;
    font-weight: 600;
    color: var(--bs-primary);
}

    .oc-news-more .bi {
        transition: transform .2s ease-in-out;
    }

.oc-news-card:hover .oc-news-more .bi {
    transform: translateX(3px);
}

/* Первая новость — крупно: картинка слева, текст справа */
@media (min-width: 768px) {
    .oc-news-card.is-featured {
        flex-direction: row;
    }

        .oc-news-card.is-featured .oc-news-media {
            flex: 0 0 58%;
            aspect-ratio: auto;
            min-height: 340px;
        }

        .oc-news-card.is-featured .oc-news-body {
            justify-content: center;
            padding: 2rem 2.25rem;
        }

        .oc-news-card.is-featured .oc-news-title {
            -webkit-line-clamp: 3;
            font-size: 1.625rem;
        }

        .oc-news-card.is-featured .oc-news-announce {
            -webkit-line-clamp: 4;
            font-size: 1rem;
        }

        .oc-news-card.is-featured .oc-news-meta {
            margin-top: 0;
        }
}

/* Пагинация — «таблетки» (разметку даёт Html.Pager) */
.oc-pager-nav {
    margin-top: 2.5rem;
}

.oc-pager {
    justify-content: center;
    flex-wrap: wrap;
    gap: .35rem;
    align-items: center;
}

    .oc-pager .page-link {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 40px;
        height: 40px;
        padding: 0 .75rem;
        border: 0;
        border-radius: 999px !important;
        font-weight: 500;
        color: var(--oc-text);
        background: var(--oc-surface-3);
    }

        .oc-pager .page-link:hover {
            color: var(--bs-primary);
            background: rgba(var(--bs-primary-rgb), .08);
        }

    .oc-pager .page-item.active .page-link {
        color: #fff;
        background: var(--bs-primary);
    }

/* Хлебные крошки */
.oc-crumbs {
    margin: 1rem 0 .5rem;
    font-size: .8125rem;
    flex-wrap: nowrap;
    overflow: hidden;
}

    .oc-crumbs .breadcrumb-item {
        white-space: nowrap;
    }

        .oc-crumbs .breadcrumb-item a {
            color: var(--oc-text-muted);
            text-decoration: none;
        }

            .oc-crumbs .breadcrumb-item a:hover {
                color: var(--bs-primary);
            }

        .oc-crumbs .breadcrumb-item.active {
            min-width: 0;
            color: var(--oc-text-soft);
        }

/* Статья */
.oc-article {
    max-width: 840px;
    padding-top: 1rem;
    padding-bottom: 2rem;
}

.oc-article-head .oc-news-rubric {
    display: inline-block;
    margin-bottom: 1rem;
}

.oc-article-title {
    margin: 0;
    font-size: 2.25rem;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -.01em;
    color: var(--oc-text-strong);
}

.oc-article-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem 1.5rem;
    margin: 1.25rem 0 1.75rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--oc-border);
}

.oc-article-meta-info {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.25rem;
    font-size: .875rem;
    color: var(--oc-text-muted);
}

    .oc-article-meta-info .bi {
        margin-right: .35rem;
        color: var(--oc-text-soft);
    }

.oc-article-cover {
    margin: 0 0 2rem;
    overflow: hidden;
    border-radius: 1.25rem;
    background: var(--oc-surface-3);
}

    .oc-article-cover img {
        display: block;
        width: 100%;
        max-height: 520px;
        object-fit: cover;
    }

/* Текст из редактора */
.oc-article-body {
    font-size: 1.0625rem;
    line-height: 1.75;
    color: var(--oc-text);
}

    .oc-article-body h2,
    .oc-article-body h3,
    .oc-article-body h4 {
        margin: 2rem 0 .75rem;
        font-weight: 700;
        line-height: 1.3;
        color: var(--oc-text-strong);
    }

    .oc-article-body p,
    .oc-article-body ul,
    .oc-article-body ol {
        margin-bottom: 1.15rem;
    }

    .oc-article-body a {
        color: var(--bs-primary);
        text-underline-offset: 3px;
    }

    .oc-article-body img,
    .oc-article-body video,
    .oc-article-body iframe {
        max-width: 100%;
        height: auto;
        border-radius: .875rem;
    }

    .oc-article-body blockquote {
        margin: 1.5rem 0;
        padding: 1rem 1.25rem;
        border-left: 4px solid var(--bs-primary);
        border-radius: 0 .875rem .875rem 0;
        font-style: italic;
        color: var(--oc-text-2);
        background: var(--oc-surface-2);
    }

    .oc-article-body table {
        display: block;
        max-width: 100%;
        overflow-x: auto;
        margin-bottom: 1.25rem;
        border-collapse: collapse;
        font-size: .9375rem;
    }

        .oc-article-body table td,
        .oc-article-body table th {
            padding: .5rem .75rem;
            border: 1px solid var(--oc-border-strong);
        }

        .oc-article-body table th {
            background: var(--oc-surface-2);
        }

/* Блоки под статьёй */
.oc-article-section {
    padding-top: 2.5rem;
    padding-bottom: 1rem;
    border-top: 1px solid var(--oc-border);
}

.oc-section-title {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--oc-text-strong);
}

.oc-slider-arrow {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    font-size: 1.125rem;
    color: var(--oc-text);
    background: var(--oc-surface-3);
    transition: background-color .15s ease-in-out, color .15s ease-in-out, opacity .15s ease-in-out;
}

    .oc-slider-arrow:hover {
        color: #fff;
        background: var(--bs-primary);
    }

@media (max-width: 575.98px) {
    .oc-article-title {
        font-size: 1.625rem;
    }

    .oc-article-body {
        font-size: 1rem;
    }

    .oc-article-cover {
        border-radius: 1rem;
    }
}


/* =====================================================================
   Карточка товара (ProductCard, oc-product-*)
   ===================================================================== */
.oc-product {
    padding-top: .5rem;
}

/* Галерея: фото на светло-серой подложке со скруглением */
.oc-product-gallery {
    position: relative;
    overflow: hidden;
    border-radius: 1.5rem;
    background: var(--oc-surface-2);
}

    /* фон у самого слайда: Swiper создаёт свой слой, и «multiply» смешивает картинку только с ним */
    .oc-product-gallery swiper-slide.product-gallery-slide {
        background: var(--oc-surface-2);
    }

    .oc-product-gallery .product-gallery-slide img {
        padding: 1.5rem;
        mix-blend-mode: multiply;
    }

.oc-product-badges {
    position: absolute;
    top: 1rem;
    left: 1rem;
    z-index: 5;
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    max-width: calc(100% - 2rem);
}

    .oc-product-badges .badge {
        font-size: .75rem;
        font-weight: 600;
        padding: .4em .75em;
    }

.oc-product-noimg span {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 4rem;
    color: var(--oc-text-faint);
}

/* Правая колонка: на компьютере прилипает под шапкой */
@media (min-width: 992px) {
    .oc-product-info {
        position: sticky;
        top: 6rem;
    }
}

.oc-product-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: .5rem;
}

.oc-product-sku {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem 1rem;
    font-size: .8125rem;
    color: var(--oc-text-soft);
}

    .oc-product-sku a {
        font-weight: 600;
        color: var(--bs-primary);
        text-decoration: none;
    }

.oc-product-title {
    margin: 0 0 .75rem;
    font-size: 1.875rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--oc-text-strong);
}

.oc-product-rating {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem 1.25rem;
    margin: 0 0 1.25rem;
    padding: 0;
    font-size: .875rem;
}

    .oc-product-rating li {
        display: inline-flex;
        align-items: center;
    }

    .oc-product-rating a {
        color: var(--oc-text-muted);
        text-decoration: none;
    }

        .oc-product-rating a:hover {
            color: var(--bs-primary);
        }

        .oc-product-rating a .bi {
            margin-right: .3rem;
        }

.oc-product-stars {
    gap: .1rem;
    color: #f59e0b;
}

    .oc-product-stars b {
        margin-left: .35rem;
        color: var(--oc-text-strong);
    }

/* Блок покупки */
.oc-buybox {
    padding: 1.5rem;
    border: 1px solid var(--oc-border);
    border-radius: 1.25rem;
    background: var(--oc-surface);
    box-shadow: 0 6px 20px rgba(17, 24, 39, .05);
}

.oc-buybox-price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .25rem .75rem;
}

.oc-buybox-current {
    font-size: 2.25rem;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -.01em;
    color: var(--oc-text-strong);
}

    .oc-buybox-current small {
        font-size: .6em;
        font-weight: 700;
    }

.oc-buybox-old {
    font-size: 1.125rem;
    color: var(--oc-text-soft);
    text-decoration: line-through;
}

.oc-buybox-vp {
    margin-top: .5rem;
    font-size: .875rem;
    color: var(--oc-text-muted);
}

.oc-buybox-stock {
    display: flex;
    flex-wrap: wrap;
    margin-top: 1rem;
}

.oc-stock {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .3rem .75rem;
    border-radius: 999px;
    font-size: .8125rem;
    font-weight: 600;
}

    .oc-stock.is-in {
        color: #166534;
        background: #dcfce7;
    }

    .oc-stock.is-out {
        color: var(--oc-text-muted);
        background: var(--oc-surface-3);
    }

.oc-buybox-discounts {
    display: flex;
    gap: .6rem;
    margin-top: 1rem;
    padding: .75rem 1rem;
    border-radius: 1rem;
    font-size: .875rem;
    color: #1e40af;
    background: rgba(var(--bs-primary-rgb), .08);
}

    .oc-buybox-discounts > .bi {
        font-size: 1.1rem;
    }

.oc-buybox-actions {
    display: flex;
    gap: .5rem;
    margin-top: 1.25rem;
}

    .oc-buybox-actions .btn:not(.oc-fav-btn) {
        flex: 1 1 auto;
        min-height: 54px;
        border-radius: 999px;
        font-size: 1.0625rem;
        font-weight: 600;
    }

    .oc-buybox-actions .AddToCartBtn::before,
    .oc-buybox-actions .GoodInCartBtn:not(:disabled)::before {
        margin-right: .5rem;
        font-family: bootstrap-icons !important;
        font-weight: normal;
        vertical-align: -.125em;
    }

    .oc-buybox-actions .AddToCartBtn::before {
        content: "\f243"; /* bi-cart2 */
    }

    .oc-buybox-actions .GoodInCartBtn:not(:disabled)::before {
        content: "\f23a"; /* bi-cart-check */
    }

/* Кнопка «Избранное» — круглая */
.oc-fav-btn {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    font-size: 1.25rem;
    color: var(--oc-text);
    background: var(--oc-surface-3);
}

    .oc-fav-btn:hover {
        color: var(--bs-danger);
        background: rgba(var(--bs-danger-rgb), .1);
    }

/* Спецпредложения: «купи N», скидка за количество */
.oc-offers {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px dashed var(--oc-border);
}

.oc-offers-title {
    font-size: .8125rem;
    font-weight: 600;
    color: var(--oc-text-muted);
}

.oc-offer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .65rem .9rem;
    border-radius: .875rem;
    font-size: .875rem;
    background: var(--oc-surface-2);
}

    .oc-offer .btn {
        flex-shrink: 0;
        border-radius: 999px;
        font-weight: 500;
    }

.oc-product-short {
    margin-top: 1.5rem;
    font-size: .9375rem;
    line-height: 1.65;
    color: var(--oc-text-2);
}

    .oc-product-short p:last-of-type {
        margin-bottom: 0;
    }

.oc-product-spec {
    display: flex;
    justify-content: space-between;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--oc-border);
    font-size: .875rem;
}

    .oc-product-spec span:first-child {
        color: var(--oc-text-muted);
    }

/* Секции под товаром */
.oc-product-section {
    margin-top: 2.5rem;
}

    .oc-product-section .oc-section-title,
    .oc-product-details .oc-section-title {
        margin-bottom: 1.25rem;
    }

.oc-product-details {
    margin-top: 1rem;
}

    .oc-product-details > div > .oc-panel {
        padding: 1.75rem;
    }

/* Характеристики: название — точечная линия — значение */
.oc-specs-group {
    margin: 1.25rem 0 .5rem;
    font-size: .9375rem;
    font-weight: 700;
    color: var(--oc-text-strong);
}

    .oc-specs-group:first-of-type {
        margin-top: 0;
    }

.oc-specs {
    margin: 0;
}

.oc-specs-row {
    display: flex;
    align-items: baseline;
    gap: .5rem;
    padding: .45rem 0;
    font-size: .9rem;
}

    .oc-specs-row dt {
        display: flex;
        flex: 1 1 auto;
        align-items: baseline;
        min-width: 0;
        font-weight: 400;
        color: var(--oc-text-muted);
    }

        .oc-specs-row dt::after {
            content: "";
            flex: 1 1 auto;
            margin: 0 .5rem;
            border-bottom: 1px dotted var(--oc-border-strong);
        }

    .oc-specs-row dd {
        flex: 0 1 50%;
        margin: 0;
        font-weight: 500;
        color: var(--oc-text-strong);
        text-align: end;
    }

/* Таблица предзаказа */
.oc-table {
    font-size: .9rem;
}

    .oc-table thead th {
        border-bottom-width: 1px;
        font-size: .8125rem;
        font-weight: 600;
        color: var(--oc-text-muted);
        background: transparent;
    }

    .oc-table td {
        vertical-align: middle;
    }

    .oc-table .btn {
        border-radius: 999px;
    }

/* Плавающая панель покупки на телефоне */
.oc-sticky-buy {
    padding: .5rem 0;
    background: var(--oc-surface-glass);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--oc-border);
    box-shadow: 0 6px 20px rgba(17, 24, 39, .08);
}

    .oc-sticky-buy .btn:not(.oc-fav-btn) {
        min-height: 44px;
        border-radius: 999px;
        font-weight: 600;
    }

    .oc-sticky-buy .oc-fav-btn {
        width: 44px;
        height: 44px;
    }

.oc-sticky-pic {
    width: 48px;
    overflow: hidden;
    border-radius: .75rem;
    background: var(--oc-surface-2);
}

    .oc-sticky-pic img {
        object-fit: contain;
        mix-blend-mode: multiply;
    }

@media (max-width: 575.98px) {
    .oc-product-title {
        font-size: 1.375rem;
    }

    .oc-buybox {
        padding: 1.1rem;
    }

    .oc-buybox-current {
        font-size: 1.875rem;
    }

    .oc-product-gallery {
        border-radius: 1.25rem;
    }

    .oc-product-details > div > .oc-panel {
        padding: 1.25rem;
    }
}


/* =====================================================================
   Страница раздела каталога (Catalogue/Index)
   ===================================================================== */
.oc-catalogue-page {
    padding-top: 1rem;
    padding-bottom: 3rem;
}

.oc-catalogue-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .25rem 1rem;
    margin-bottom: 1.5rem;
}

.oc-catalogue-count {
    font-size: .9375rem;
    color: var(--oc-text-soft);
}

/* Панель над товарами: сортировка и вид */
.oc-catalogue-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.oc-sort {
    display: flex;
    align-items: center;
    gap: .5rem;
}

    .oc-sort label {
        display: inline-flex;
        align-items: center;
        gap: .4rem;
        font-size: .875rem;
        white-space: nowrap;
        color: var(--oc-text-muted);
    }

    .oc-sort .form-select {
        width: auto;
        height: 40px;
        padding-left: 1rem;
        border: 0;
        border-radius: 999px;
        font-size: .875rem;
        font-weight: 500;
        background-color: var(--oc-surface-3);
    }

        .oc-sort .form-select:focus {
            box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb), .15);
        }

.oc-view-switch {
    display: inline-flex;
    padding: 3px;
    border-radius: 999px;
    background: var(--oc-surface-3);
}

    .oc-view-switch button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 34px;
        height: 34px;
        border: 0;
        border-radius: 50%;
        color: var(--oc-text-muted);
        background: transparent;
        transition: color .15s ease-in-out, background-color .15s ease-in-out;
    }

        .oc-view-switch button:hover {
            color: var(--bs-primary);
        }

        .oc-view-switch button.active {
            color: var(--bs-primary);
            background: var(--oc-surface);
            box-shadow: 0 1px 3px rgba(17, 24, 39, .1);
        }

/* Левое меню подразделов */
.oc-cat-nav {
    padding: 1.25rem;
}

.oc-cat-nav-title {
    display: block;
    margin-bottom: .5rem;
    font-weight: 700;
    color: var(--oc-text-strong);
    text-decoration: none;
}

    .oc-cat-nav-title:hover,
    .oc-cat-nav-title.is-active {
        color: var(--bs-primary);
    }

.oc-cat-nav-list {
    margin: 0 0 .75rem;
    padding: 0;
    list-style: none;
}

    .oc-cat-nav-list a {
        display: block;
        padding: .4rem .75rem;
        border-radius: .625rem;
        font-size: .9rem;
        color: var(--oc-text-2);
        text-decoration: none;
        transition: color .15s ease-in-out, background-color .15s ease-in-out;
    }

        .oc-cat-nav-list a:hover {
            color: var(--bs-primary);
            background: var(--oc-surface-2);
        }

        .oc-cat-nav-list a.is-active {
            font-weight: 600;
            color: var(--bs-primary);
            background: rgba(var(--bs-primary-rgb), .08);
        }


/* =====================================================================
   Вход и регистрация (oc-auth-*): ModalLogin, Login, ForgotPassword, PasswordReset,
   Registration*, страницы-результаты. Бутстраповские карточки внутри .oc-auth-scope
   приводятся к стилю корзины без правки разметки скриптов
   ===================================================================== */
.oc-auth-page {
    padding-top: 2rem;
    padding-bottom: 4rem;
}

.oc-auth {
    max-width: 460px;
    margin: 0 auto;
}

.oc-auth-intro {
    margin-bottom: 1.25rem;
    text-align: center;
    color: var(--oc-text-muted);
}

    .oc-auth-intro p {
        max-width: 380px;
        margin: .5rem auto 0;
        font-size: .9rem;
    }

.oc-auth-intro-title {
    margin: .75rem 0 0;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--oc-text-strong);
}

/* Карточки */
.oc-auth-scope .card {
    margin-bottom: 0;
    border: 1px solid var(--oc-border);
    border-radius: 1.25rem;
    background: var(--oc-surface);
    box-shadow: 0 10px 30px rgba(17, 24, 39, .06);
}

.oc-auth-scope .card-header {
    padding: 1.5rem 1.5rem .25rem;
    border-bottom: 0;
    background: transparent;
}

    .oc-auth-scope .card-header h1,
    .oc-auth-scope .card-header h2,
    .oc-auth-scope .card-header h3 {
        margin: 0;
        font-size: 1.25rem;
        font-weight: 700;
        color: var(--oc-text-strong);
    }

.oc-auth-scope .card-body {
    padding: 1rem 1.5rem 1.5rem;
}

.oc-auth-scope .card-footer {
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--oc-border);
    border-radius: 0 0 1.25rem 1.25rem;
    font-size: .875rem;
    text-align: center;
    background: var(--oc-surface-2);
}

    .oc-auth-scope .card-footer .row {
        row-gap: .35rem;
    }

    .oc-auth-scope .card-footer p {
        margin: 0;
    }

.oc-auth-scope .icon-link,
.oc-auth-scope .card-footer a {
    font-weight: 500;
    text-decoration: none;
}

.oc-auth-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .5rem 1.5rem;
}

/* Поля */
.oc-auth-scope .form-control,
.oc-auth-scope .form-select {
    border-color: var(--oc-border-strong);
    border-radius: .75rem;
    background-color: var(--oc-surface-2);
}

    .oc-auth-scope .form-control:focus,
    .oc-auth-scope .form-select:focus {
        border-color: var(--bs-primary);
        background-color: var(--oc-surface);
        box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb), .15);
    }

.oc-auth-scope .input-group > .form-floating:not(:last-child) > .form-control,
.oc-auth-scope .input-group > .form-floating:not(:last-child) > .form-select {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.oc-auth-scope .input-group > .form-floating:not(:first-child) > .form-control,
.oc-auth-scope .input-group > .form-floating:not(:first-child) > .form-select {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.oc-auth-scope .form-check-input {
    border-color: var(--oc-border-strong);
}

.oc-auth-scope .form-check-label,
.oc-auth-scope .form-check label {
    font-size: .875rem;
}

/* Кнопки — «таблетки» */
.oc-auth-scope .btn:not(.btn-link):not(.btn-close) {
    border-radius: 999px;
    font-weight: 600;
}

.oc-auth-scope .btn-primary.w-100,
.oc-auth-scope .oc-auth-submit {
    min-height: 50px;
}

.oc-auth-scope .alert {
    border: 0;
    border-radius: 1rem;
    font-size: .875rem;
}

.oc-auth-scope .alert-danger {
    color: #991b1b;
    background: #fee2e2;
}

.oc-auth-scope .alert-success {
    color: #166534;
    background: #dcfce7;
}

/* Глазик в поле пароля */
.oc-auth-eye {
    position: absolute;
    top: 50%;
    right: .5rem;
    z-index: 5;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    color: var(--oc-text-muted);
    background: transparent;
    transform: translateY(-50%);
}

    .oc-auth-eye:hover {
        color: var(--bs-primary);
        background: rgba(var(--bs-primary-rgb), .08);
    }

/* Переключатель способа входа */
.oc-auth-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 1rem;
    padding: 4px;
    border-radius: 999px;
    background: var(--oc-surface-3);
}

    .oc-auth-tabs button {
        display: inline-flex;
        flex: 1 1 0;
        align-items: center;
        justify-content: center;
        gap: .4rem;
        height: 40px;
        border: 0;
        border-radius: 999px;
        font-size: .875rem;
        font-weight: 600;
        color: var(--oc-text-muted);
        background: transparent;
        transition: color .15s ease-in-out, background-color .15s ease-in-out;
    }

        .oc-auth-tabs button:hover {
            color: var(--bs-primary);
        }

        .oc-auth-tabs button.is-active {
            color: var(--oc-text-strong);
            background: var(--oc-surface);
            box-shadow: 0 1px 4px rgba(17, 24, 39, .1);
        }

/* Окно входа: без рамок у карточек, свой отступ */
.oc-auth-modal {
    max-width: 440px;
}

    .oc-auth-modal .modal-content {
        position: relative;
        padding: 1.75rem 1.25rem 1.25rem;
        border: 0;
        border-radius: 1.5rem;
        box-shadow: 0 24px 60px rgba(17, 24, 39, .2);
    }

    .oc-auth-modal .card {
        border: 0;
        box-shadow: none;
    }

    .oc-auth-modal .card-header {
        padding: .25rem .25rem .25rem;
    }

        .oc-auth-modal .card-header h2 {
            font-size: 1.0625rem;
        }

    .oc-auth-modal .card-body {
        padding: .75rem .25rem 1rem;
    }

    .oc-auth-modal .card-footer {
        border-radius: 1rem;
    }

    .oc-auth-modal .oc-auth-intro {
        margin-bottom: 1rem;
    }

.oc-auth-intro-title {
    font-size: 1.375rem;
}

.oc-auth-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 5;
}

/* Плитки выбора: способ подтверждения, «есть пригласивший / нет» */
.oc-auth-scope .oc-choice,
.oc-auth-scope .form-check:has(> input[name="NoSponsorFlag"]) {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin: 0 0 .5rem;
    padding: .9rem 1rem;
    border: 1.5px solid var(--oc-border-strong);
    border-radius: 1rem;
    cursor: pointer;
    transition: border-color .15s ease-in-out, background-color .15s ease-in-out;
}

    .oc-auth-scope .form-check:has(> input[name="NoSponsorFlag"]) .form-check-input,
    .oc-auth-scope .oc-choice .form-check-input {
        float: none;
        flex-shrink: 0;
        margin: 0;
    }

    .oc-auth-scope .form-check:has(> input[name="NoSponsorFlag"]) .form-check-label {
        cursor: pointer;
    }

    .oc-auth-scope .form-check:has(> input[name="NoSponsorFlag"]:checked) {
        border-color: var(--bs-primary);
        background: rgba(var(--bs-primary-rgb), .06);
    }

/* Регистрация — шире */
.oc-auth-wide .card-body .row {
    row-gap: .25rem;
}

/* Страницы-результаты */
.oc-auth-result {
    padding: 2.5rem 2rem;
    text-align: center;
}

.oc-auth-result-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4.5rem;
    height: 4.5rem;
    margin-bottom: 1.25rem;
    border-radius: 50%;
    font-size: 2rem;
}

    .oc-auth-result-icon.is-success {
        color: #16a34a;
        background: #dcfce7;
    }

    .oc-auth-result-icon.is-info {
        color: var(--bs-primary);
        background: rgba(var(--bs-primary-rgb), .1);
    }

    .oc-auth-result-icon.is-warn {
        color: #b45309;
        background: #fef3c7;
    }

.oc-auth-result-title {
    margin: 0 0 .75rem;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--oc-text-strong);
}

.oc-auth-result-text {
    margin: 0 auto;
    max-width: 360px;
    color: var(--oc-text-2);
}

.oc-auth-result-note {
    margin: .75rem auto 0;
    max-width: 360px;
    font-size: .8125rem;
    color: var(--oc-text-soft);
}

.oc-auth-id {
    display: inline-block;
    margin-top: .5rem;
    padding: .5rem 1.25rem;
    border-radius: 999px;
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: .04em;
    color: var(--bs-primary);
    background: rgba(var(--bs-primary-rgb), .08);
}

.oc-auth-result-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .5rem;
    margin-top: 1.75rem;
}

@media (max-width: 575.98px) {
    .oc-auth-page {
        padding-top: 1rem;
    }

    .oc-auth-scope .card-header {
        padding: 1.25rem 1.1rem .25rem;
    }

    .oc-auth-scope .card-body {
        padding: .75rem 1.1rem 1.25rem;
    }

    .oc-auth-result {
        padding: 2rem 1.25rem;
    }

    .oc-auth-result-actions .btn {
        flex: 1 1 100%;
    }
}

/* Плавающая подпись поля: у Bootstrap под ней белая плашка — на сером поле она видна прямоугольником */
.oc-auth-scope .form-floating > .form-control ~ label::after,
.oc-auth-scope .form-floating > .form-select ~ label::after,
.oc-checkout-body .form-floating > .form-control ~ label::after,
.oc-checkout-body .form-floating > .form-select ~ label::after {
    background-color: transparent !important;
}

/* Оформление заказа (Cart): на телефоне блок «Ваш заказ» с товарами — первым, кнопка «Оформить» — последней.
   Колонка итога на телефоне «растворяется» (display: contents), и её части встают в общий порядок */
.oc-cart-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
    align-items: start;
}

    .oc-cart-grid .oc-summary-col {
        display: contents;
    }

    .oc-cart-grid .oc-order-card {
        order: 1;
        margin-bottom: 0;
    }

    .oc-cart-grid .oc-cart-main {
        order: 2;
        min-width: 0;
    }

    .oc-cart-grid .oc-order-actions {
        order: 3;
    }

@media (min-width: 992px) {
    .oc-cart-grid {
        grid-template-columns: minmax(0, 1fr) 380px;
    }

        .oc-cart-grid .oc-cart-main {
            grid-column: 1;
            grid-row: 1;
        }

        .oc-cart-grid .oc-summary-col {
            display: block;
            grid-column: 2;
            grid-row: 1;
        }

        .oc-cart-grid .oc-order-card {
            margin-bottom: 1.5rem;
        }
}

@media (min-width: 1200px) {
    .oc-cart-grid {
        grid-template-columns: minmax(0, 1fr) 420px;
    }
}

/* Заказ оформлен: «Спасибо», количество товаров, строка «Товары» в итогах */
.oc-order-hero-kicker {
    margin-bottom: .2rem;
    font-size: .875rem;
    font-weight: 600;
    color: #16a34a;
}

.oc-summary-count {
    margin-left: .35rem;
    font-size: .875rem;
    font-weight: 500;
    color: var(--oc-text-soft);
}

.oc-order-page .oc-steps {
    margin-top: 0;
}

.oc-order-page .oc-summary-list li > span:last-child {
    max-width: 60%;
    overflow-wrap: anywhere;
}

/* =====================================================================
   Витрины товаров (oc-goods): заголовок блока, «Смотреть все»,
   слайдер со стрелками-кругами, общие строки карточки.
   Используют все виджеты с товарами — свои <style> в виджетах больше не нужны
   ===================================================================== */
.oc-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

    .oc-section-head .oc-section-title {
        min-width: 0;
    }

.oc-section-title a {
    color: inherit;
    text-decoration: none;
    transition: color .15s ease-in-out;
}

    .oc-section-title a:hover {
        color: var(--bs-primary);
    }

.oc-section-count {
    display: inline-block;
    margin-left: .35rem;
    padding: .1rem .55rem;
    border-radius: 999px;
    font-size: .875rem;
    font-weight: 600;
    vertical-align: middle;
    color: var(--oc-text-muted);
    background: var(--oc-surface-3);
}

.oc-section-link {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    height: 40px;
    padding: 0 1rem;
    border-radius: 999px;
    font-size: .9375rem;
    font-weight: 500;
    white-space: nowrap;
    color: var(--oc-text);
    background: var(--oc-surface-3);
    text-decoration: none;
    transition: background-color .15s ease-in-out, color .15s ease-in-out;
}

    .oc-section-link:hover {
        color: #fff;
        background: var(--bs-primary);
    }

.oc-slider-arrows {
    gap: .5rem;
}

/* Слайдер: слайды одной высоты, место под тень карточки при наведении */
.oc-goods .slick-track {
    display: flex;
}

.oc-goods .slick-list {
    margin: -.5rem -10px -1.75rem;
    padding: .5rem 0 1.75rem;
}

.oc-goods .slick-slide {
    height: auto;
    margin: 0 10px;
}

    .oc-goods .slick-slide > div {
        height: 100%;
    }

.oc-goods .oc-slider-arrow.slick-disabled {
    opacity: .35;
    pointer-events: none;
}

/* Название в 2 строки и строки рейтинга/баллов одной высоты — цена и кнопка в ряду стоят ровно */
.oc-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.5em;
}

.oc-row {
    min-height: 1.5em;
}

@media (max-width: 575.98px) {
    .oc-section-head .oc-section-title {
        font-size: 1.25rem;
    }

    .oc-section-link {
        height: 36px;
        padding: 0 .875rem;
        font-size: .875rem;
    }
}


/* =====================================================================
   «Товар дня» (MarketingGroupsWidgetBig, oc-deal-*)
   ===================================================================== */
.oc-deal {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 2.5rem;
    align-items: center;
    padding: 1.5rem;
    border: 1px solid var(--oc-border);
    border-radius: 1.5rem;
    background: var(--oc-surface);
    box-shadow: 0 6px 20px rgba(17, 24, 39, .04);
}

.oc-deal-media {
    position: relative;
}

.oc-deal-pic {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
    border-radius: 1.125rem;
    font-size: 3rem;
    color: var(--oc-text-faint);
    background: var(--oc-media);
    overflow: hidden;
}

    .oc-deal-pic img {
        width: 100%;
        height: 100%;
        padding: 2rem;
        object-fit: contain;
        mix-blend-mode: multiply;
        transition: transform .45s ease-in-out;
    }

    .oc-deal-pic:hover img {
        transform: scale(1.04);
    }

.oc-deal-badges {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
    padding: 1rem 4rem 1rem 1rem;
}

.oc-deal-fav {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    font-size: 1.125rem;
    color: var(--oc-text);
    background: var(--oc-surface);
    box-shadow: 0 2px 8px rgba(17, 24, 39, .10);
    transition: color .15s ease-in-out;
}

    .oc-deal-fav:hover {
        color: var(--bs-danger);
    }

.oc-deal-body {
    padding: .5rem .5rem .5rem 0;
}

.oc-deal-top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem 1rem;
    margin-bottom: 1rem;
}

.oc-deal-label {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .35rem .85rem;
    border-radius: 999px;
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: #fff;
    background: var(--bs-danger);
}

.oc-deal-action {
    font-size: .9375rem;
    font-weight: 500;
    color: var(--oc-text-muted);
    text-decoration: none;
    transition: color .15s ease-in-out;
}

    .oc-deal-action:hover {
        color: var(--bs-primary);
    }

.oc-deal-title {
    margin: 0 0 1rem;
    font-size: clamp(1.5rem, 2.6vw, 2.25rem);
    font-weight: 700;
    line-height: 1.2;
}

    .oc-deal-title a {
        color: var(--oc-text-strong);
        text-decoration: none;
        transition: color .15s ease-in-out;
    }

        .oc-deal-title a:hover {
            color: var(--bs-primary);
        }

.oc-deal-text {
    margin-bottom: 1.25rem;
    font-size: 1.0625rem;
    line-height: 1.6;
    color: var(--oc-text-2);
}

.oc-deal-vp {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: 1rem;
    color: var(--oc-text-muted);
}

.oc-deal-price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .25rem 1rem;
    margin-bottom: 1.5rem;
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--oc-text-strong);
}

.oc-deal-old {
    font-size: 1.125rem;
    font-weight: 400;
    color: var(--oc-text-soft);
    text-decoration: line-through;
}

.oc-deal-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

    .oc-deal-buttons .btn {
        min-width: 10rem;
        height: 52px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

@media (max-width: 991.98px) {
    .oc-deal {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        padding: 1rem;
    }

    .oc-deal-body {
        padding: 0 .25rem .25rem;
    }
}

@media (max-width: 575.98px) {
    .oc-deal-price {
        font-size: 1.625rem;
    }

    .oc-deal-buttons .btn {
        flex: 1 1 100%;
    }
}


/* =====================================================================
   Комплекты (GoodsKitsWidget, PromoDetails, oc-kit-*)
   ===================================================================== */
.oc-kit {
    margin: 1.5rem 0;
    padding: 1.5rem;
    border: 1px solid var(--oc-border);
    border-radius: 1.25rem;
    background: var(--oc-surface);
    box-shadow: 0 6px 20px rgba(17, 24, 39, .04);
}

.oc-kit-head {
    display: flex;
    align-items: center;
    gap: .875rem;
    margin-bottom: 1.25rem;
}

.oc-kit-icon {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    font-size: 1.25rem;
    color: var(--bs-danger);
    background: rgba(var(--bs-danger-rgb), .1);
}

.oc-kit-label {
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--bs-danger);
}

.oc-kit-title {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--oc-text-strong);
}

.oc-kit-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 260px;
    gap: 1.5rem;
}

.oc-kit-items {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 1rem 2rem;
}

.oc-kit-pos {
    position: relative;
    min-width: 0;
}

.oc-kit-card {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.oc-kit-pic {
    position: relative;
    display: block;
    aspect-ratio: 1 / 1;
    margin-bottom: .625rem;
    border-radius: .875rem;
    background: var(--oc-media);
    overflow: hidden;
}

    .oc-kit-pic img {
        width: 100%;
        height: 100%;
        padding: .75rem;
        object-fit: contain;
        mix-blend-mode: multiply;
        transition: transform .35s ease-in-out;
    }

    .oc-kit-pic:hover img {
        transform: scale(1.04);
    }

.oc-kit-qty {
    position: absolute;
    top: .5rem;
    left: .5rem;
    padding: .15rem .5rem;
    border-radius: 999px;
    font-size: .6875rem;
    font-weight: 600;
    color: #fff;
    background: var(--bs-danger);
}

.oc-kit-name {
    margin-bottom: .35rem;
    font-size: .875rem;
    font-weight: 500;
    line-height: 1.25;
    color: var(--oc-text);
    text-decoration: none;
}

    .oc-kit-name:hover {
        color: var(--bs-primary);
    }

.oc-kit-vp {
    display: flex;
    align-items: center;
    gap: .35rem;
    margin-bottom: .25rem;
    font-size: .8125rem;
    color: var(--oc-text-muted);
}

.oc-kit-price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 .5rem;
    margin-top: auto;
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--oc-text-strong);
}

    .oc-kit-price del {
        font-size: .8125rem;
        font-weight: 400;
        color: var(--oc-text-soft);
    }

.oc-kit-swap {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: .35rem;
    margin-top: .5rem;
    padding: .3rem .75rem;
    border: 0;
    border-radius: 999px;
    font-size: .8125rem;
    font-weight: 500;
    color: var(--oc-text);
    background: var(--oc-surface-3);
    transition: background-color .15s ease-in-out, color .15s ease-in-out;
}

    .oc-kit-swap:hover {
        color: #fff;
        background: var(--bs-primary);
    }

/* «+» между товарами — по центру промежутка, на уровне картинки */
.oc-kit-plus {
    position: absolute;
    top: 0;
    right: -1rem;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin-top: calc(50% - 14px);
    border-radius: 50%;
    font-size: .875rem;
    color: var(--oc-text-muted);
    background: var(--oc-surface);
    box-shadow: 0 1px 4px rgba(17, 24, 39, .12);
    transform: translateX(50%);
}

.oc-kit-total {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    padding: 1.25rem;
    border-radius: 1rem;
    background: var(--oc-surface-2);
}

.oc-kit-total-title {
    font-size: .875rem;
    color: var(--oc-text-muted);
}

.oc-kit-sum {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--oc-text-strong);
}

.oc-kit-sum-old {
    font-size: .9375rem;
    color: var(--oc-text-soft);
}

.oc-kit-profit {
    align-self: flex-start;
    margin: .25rem 0;
    padding: .2rem .65rem;
    border-radius: 999px;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--bs-danger);
    background: rgba(var(--bs-danger-rgb), .1);
}

.oc-kit-total .btn {
    height: 48px;
    margin-top: .75rem !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

@media (max-width: 991.98px) {
    .oc-kit-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 575.98px) {
    .oc-kit {
        padding: 1rem;
    }

    .oc-kit-items {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1rem 1.5rem;
    }

    .oc-kit-plus {
        right: -.75rem;
    }
}

/* Окно выбора замены в комплекте */
.oc-kit-choose .oc-cart-item:first-child {
    border-top: 0;
}


/* =====================================================================
   Страница акции (PromoDetails, oc-promo-*)
   ===================================================================== */
.oc-promo-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
    align-items: center;
    margin-bottom: 1.5rem;
    padding: 2rem;
    border: 1px solid var(--oc-border);
    border-radius: 1.5rem;
    background: var(--oc-surface);
    box-shadow: 0 6px 20px rgba(17, 24, 39, .04);
}

    .oc-promo-hero.has-image {
        grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    }

.oc-promo-badges {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: 1rem;
}

.oc-promo-status {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .3rem .8rem;
    border-radius: 999px;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--oc-text-2);
    background: var(--oc-surface-3);
}

    .oc-promo-status.is-active {
        color: #fff;
        background: var(--bs-danger);
    }

    .oc-promo-status.is-ended {
        color: var(--oc-text-muted);
    }

.oc-promo-title {
    margin: 0 0 1rem;
    font-size: clamp(1.625rem, 3vw, 2.5rem);
    font-weight: 700;
    line-height: 1.15;
    color: var(--oc-text-strong);
}

.oc-promo-text {
    font-size: 1.0625rem;
    line-height: 1.65;
    color: var(--oc-text-2);
}

    .oc-promo-text img {
        max-width: 100%;
        height: auto;
        border-radius: .75rem;
    }

    .oc-promo-text > :last-child {
        margin-bottom: 0;
    }

.oc-promo-period {
    display: flex;
    align-items: baseline;
    gap: .5rem;
    margin-top: 1.25rem;
    font-size: .9375rem;
    color: var(--oc-text-muted);
}

.oc-promo-timer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem 1rem;
    margin-top: 1.25rem;
}

.oc-promo-timer-label {
    font-size: .9375rem;
    font-weight: 500;
    color: var(--oc-text);
}

.oc-timer {
    display: inline-flex;
    gap: .375rem;
}

.oc-timer-cell {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    min-width: 3.25rem;
    padding: .4rem .5rem;
    border-radius: .75rem;
    font-size: .6875rem;
    color: var(--oc-text-muted);
    background: var(--oc-surface-3);
}

    .oc-timer-cell b {
        font-size: 1.25rem;
        line-height: 1.1;
        font-variant-numeric: tabular-nums;
        color: var(--oc-text-strong);
    }

.oc-promo-hero-media {
    border-radius: 1.125rem;
    overflow: hidden;
    background: var(--oc-surface-2);
}

    .oc-promo-hero-media img {
        display: block;
        width: 100%;
        height: auto;
    }

@media (max-width: 767.98px) {
    .oc-promo-hero,
    .oc-promo-hero.has-image {
        grid-template-columns: 1fr;
        padding: 1.25rem;
    }

    .oc-promo-hero-media {
        order: -1;
    }
}


/* =====================================================================
   Подарки по акциям (Gifts, oc-gift-*)
   ===================================================================== */
.oc-gifts-lead {
    margin-bottom: 1rem;
    color: var(--oc-text-muted);
}

.oc-gift-group {
    margin-top: 1rem;
    padding: 1rem 1.25rem .25rem;
    border-radius: 1rem;
    background: var(--oc-surface-2);
}

.oc-gift-group-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem 1rem;
}

.oc-gift-group-title {
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--oc-text-strong);
}

.oc-gift-counter {
    padding: .2rem .7rem;
    border-radius: 999px;
    font-size: .8125rem;
    color: var(--oc-text-muted);
    background: var(--oc-surface);
}

    .oc-gift-counter b {
        color: var(--bs-danger);
    }

.oc-gift-group .oc-cart-item:first-child {
    border-top: 0;
}

.oc-gift-group .oc-cart-pic {
    background: var(--oc-surface);
}

.oc-gifts-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-top: 1.5rem;
}

@media (max-width: 575.98px) {
    .oc-gifts-footer .btn {
        flex: 1 1 100%;
    }

    .oc-gift-group .oc-cart-item {
        flex-wrap: wrap;
    }

    .oc-gift-group .oc-cart-side {
        min-width: 0;
        margin-left: auto;
    }
}

/* =====================================================================
   «Поделиться» (ShareLinksWidget, oc-share-*)
   ===================================================================== */
.oc-share {
    display: inline-block;
}

.oc-share-btn {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    height: 40px;
    padding: 0 1rem;
    border: 0;
    border-radius: 999px;
    font-size: .9375rem;
    font-weight: 500;
    white-space: nowrap;
    color: var(--oc-text);
    background: var(--oc-surface-3);
    transition: background-color .15s ease-in-out, color .15s ease-in-out;
}

    .oc-share-btn:hover,
    .oc-share-btn[aria-expanded="true"] {
        color: #fff;
        background: var(--bs-primary);
    }

.oc-share-menu {
    width: 330px;
    margin-top: .5rem !important;
    padding: 1rem;
    border: 1px solid var(--oc-border);
    border-radius: 1.25rem;
    background: var(--oc-surface);
    box-shadow: 0 16px 40px rgba(17, 24, 39, .14);
}

.oc-share-title {
    margin-bottom: .75rem;
    font-size: 1rem;
    font-weight: 700;
    color: var(--oc-text-strong);
}

.oc-share-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .375rem;
}

.oc-share-item {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .45rem .5rem;
    border-radius: .875rem;
    font-size: .875rem;
    font-weight: 500;
    color: var(--oc-text);
    text-decoration: none;
    transition: background-color .15s ease-in-out;
}

    .oc-share-item:hover {
        color: var(--oc-text-strong);
        background: var(--oc-surface-3);
    }

.oc-share-icon {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    font-size: 1rem;
    color: #fff;
}

    .oc-share-icon.is-vk { background: #0077ff; }
    .oc-share-icon.is-tg { background: #229ed9; }
    .oc-share-icon.is-wa { background: #25d366; }
    .oc-share-icon.is-ok { background: #ee8208; }

.oc-share-copy {
    display: flex;
    gap: .375rem;
    margin-top: .875rem;
    padding: 4px;
    border-radius: 999px;
    background: var(--oc-surface-3);
}

.oc-share-input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0 .75rem;
    border: 0;
    font-size: .8125rem;
    color: var(--oc-text-muted);
    background: transparent;
    outline: none;
    text-overflow: ellipsis;
}

.oc-share-copy-btn {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    gap: .3rem;
    height: 34px;
    padding: 0 .875rem;
    border: 0;
    border-radius: 999px;
    font-size: .8125rem;
    font-weight: 600;
    white-space: nowrap;
    color: #fff;
    background: var(--bs-primary);
    transition: background-color .15s ease-in-out;
}

    .oc-share-copy-btn.is-done {
        background: var(--bs-success);
    }

/* Кнопка рядом с заголовком товара — компактнее */
.oc-product-share .oc-share-btn {
    height: 36px;
    padding: 0 .875rem;
    font-size: .875rem;
}

@media (max-width: 575.98px) {
    .oc-product-share .oc-share-btn span {
        display: none;
    }

    .oc-product-share .oc-share-btn {
        width: 36px;
        padding: 0;
        justify-content: center;
    }

    .oc-share-menu {
        width: min(330px, calc(100vw - 2rem));
    }
}

/* =====================================================================
   Оформление заказа: промокод и бонусы (CartCouponsPartial, CartBonusPartial)
   ===================================================================== */
.oc-discounts {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

    .oc-discounts > div:empty {
        display: none;
    }

.oc-discount {
    padding: 1rem 1.125rem;
    border-radius: 1rem;
    background: var(--oc-surface-2);
}

.oc-discount-head {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-bottom: .75rem;
}

.oc-discount-icon {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    font-size: 1rem;
    color: var(--bs-primary);
    background: rgba(var(--bs-primary-rgb), .1);
}

    .oc-discount-icon.is-bonus {
        color: #d97706;
        background: rgba(245, 158, 11, .14);
    }

.oc-discount-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--oc-text-strong);
}

.oc-discount-label {
    display: block;
    margin-bottom: .4rem;
    font-size: .875rem;
    color: var(--oc-text-muted);
}

/* Поле и кнопка в одну строку: поле занимает всё свободное место */
.oc-discount-row {
    display: flex;
    gap: .5rem;
}

    .oc-discount-row .form-control {
        flex: 1 1 auto;
        min-width: 0;
        height: 44px;
        border-color: var(--oc-border-strong);
        border-radius: 999px;
        padding: 0 1rem;
        background: var(--oc-surface);
    }

    .oc-discount-row .btn {
        flex-shrink: 0;
        height: 44px;
        padding: 0 1.25rem;
    }

.oc-discount .btn.w-100 {
    height: 44px;
}

/* Применённый промокод / списанные бонусы */
.oc-discount-applied {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem 1rem;
    color: var(--oc-text);
}

.oc-discounts > div > .oc-discount-applied {
    padding: .875rem 1.125rem;
    border-radius: 1rem;
    background: rgba(22, 163, 74, .08);
}

/* Мои промокоды */
.oc-coupons {
    margin-top: 1rem;
    padding-top: .75rem;
    border-top: 1px solid var(--oc-border);
}

.oc-coupon {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .45rem 0;
}

    .oc-coupon + .oc-coupon {
        border-top: 1px dashed var(--oc-border);
    }

.oc-coupon-info {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .25rem .5rem;
    min-width: 0;
    font-size: .875rem;
}

.oc-coupon-code {
    font-weight: 600;
    letter-spacing: .02em;
    color: var(--oc-text-strong);
}

.oc-coupon-date {
    font-size: .8125rem;
    color: var(--oc-text-muted);
}

@media (max-width: 575.98px) {
    .oc-discount {
        padding: .875rem;
    }

    .oc-discount-row .btn {
        padding: 0 1rem;
    }
}

/* =====================================================================
   Тёмная тема: что не решают переменные
   ===================================================================== */

/* Фото товаров и новостей — на светлой плашке (снимки на белом фоне, multiply на тёмном их «гасит») */
[data-bs-theme="dark"] .oc-card-media,
[data-bs-theme="dark"] .oc-deal-pic,
[data-bs-theme="dark"] .oc-kit-pic,
[data-bs-theme="dark"] .oc-cart-pic,
[data-bs-theme="dark"] .oc-order-pic,
[data-bs-theme="dark"] .oc-sticky-pic,
[data-bs-theme="dark"] .oc-product-gallery,
[data-bs-theme="dark"] .oc-product-gallery swiper-slide.product-gallery-slide,
[data-bs-theme="dark"] .mySwiper2 swiper-slide,
[data-bs-theme="dark"] .oh-mega-thumb {
    background: var(--oc-media) !important;
}

[data-bs-theme="dark"] .oc-news-media {
    background: var(--oc-surface-3);
}

[data-bs-theme="dark"] .oc-news-noimg,
[data-bs-theme="dark"] .oc-card-noimg,
[data-bs-theme="dark"] .oc-product-noimg span {
    color: #9ca3af;
}

/* Логотип (тёмный рисунок) — светлый */
[data-bs-theme="dark"] .oh-logo img,
[data-bs-theme="dark"] .oc-checkout-logo img {
    filter: brightness(0) invert(1);
}

/* Тени на тёмном — глубже */
[data-bs-theme="dark"] .oc-card:hover,
[data-bs-theme="dark"] .oc-news-card:hover {
    box-shadow: 0 12px 32px rgba(0, 0, 0, .45);
}

/* Мягкие цветные плашки */
[data-bs-theme="dark"] .oc-stock.is-in,
[data-bs-theme="dark"] .oc-checkout-body .alert-success,
[data-bs-theme="dark"] .oc-auth-scope .alert-success {
    color: #86efac;
    background: rgba(22, 163, 74, .18);
}

[data-bs-theme="dark"] .oc-checkout-body .alert-danger,
[data-bs-theme="dark"] .oc-auth-scope .alert-danger {
    color: #fca5a5;
    background: rgba(220, 38, 38, .18);
}

[data-bs-theme="dark"] .oc-alert,
[data-bs-theme="dark"] .oc-checkout-body .alert-info,
[data-bs-theme="dark"] .oc-buybox-discounts {
    color: #93c5fd;
}

[data-bs-theme="dark"] .oc-auth-result-icon.is-success,
[data-bs-theme="dark"] .oc-step.is-done .oc-step-num {
    background-color: rgba(22, 163, 74, .25);
}

[data-bs-theme="dark"] .oc-auth-result-icon.is-warn {
    background: rgba(245, 158, 11, .2);
}

/* Баннер главной страницы */
[data-bs-theme="dark"] .mp-hero {
    background: linear-gradient(180deg, #1c2740 0%, #20223f 100%);
}

/* Плавающие подписи полей и поля Bootstrap */
[data-bs-theme="dark"] .form-floating > label {
    color: var(--oc-text-muted);
}

/* ---------- Переключатель темы в подвале ---------- */
.of-theme {
    display: inline-flex;
    padding: 3px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .08);
}

    .of-theme button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: .35rem;
        height: 32px;
        padding: 0 .75rem;
        border: 0;
        border-radius: 999px;
        font-size: .8125rem;
        font-weight: 500;
        color: #9ca3af;
        background: transparent;
        transition: color .15s ease-in-out, background-color .15s ease-in-out;
    }

        .of-theme button:hover {
            color: #fff;
        }

        .of-theme button.is-active {
            color: #111827;
            background: #fff;
        }

@media (max-width: 575.98px) {
    .of-theme button span {
        display: none;
    }
}

/* ---------- Тёмная тема: светлые блоки из шаблонов и из админки ----------
   Утилиты Bootstrap bg-light / bg-white / text-dark не зависят от темы, а в содержимом страниц
   из админки встречаются белые фоны, заданные прямо в разметке (style="background-color: white") */
[data-bs-theme="dark"] .bg-light,
[data-bs-theme="dark"] .bg-white,
[data-bs-theme="dark"] .bg-body-tertiary {
    background-color: var(--oc-surface) !important;
}

[data-bs-theme="dark"] .text-dark,
[data-bs-theme="dark"] .text-black {
    color: var(--oc-text-strong) !important;
}

[data-bs-theme="dark"] [style*="background-color: white"],
[data-bs-theme="dark"] [style*="background-color:white"],
[data-bs-theme="dark"] [style*="background-color: #fff"],
[data-bs-theme="dark"] [style*="background-color:#fff"],
[data-bs-theme="dark"] [style*="background: white"],
[data-bs-theme="dark"] [style*="background:white"],
[data-bs-theme="dark"] [style*="background: #fff"],
[data-bs-theme="dark"] [style*="background:#fff"] {
    background-color: transparent !important;
}

/* Блок «Новое в блоге» на главной (страница-виджет из админки: подписи на белых плашках) */
[data-bs-theme="dark"] .hero-head {
    background-color: var(--oc-surface);
}

    [data-bs-theme="dark"] .hero-head .heading {
        color: var(--oc-text-strong);
    }

    [data-bs-theme="dark"] .hero-head .hero-description {
        color: var(--oc-text-muted);
    }

/* Светлые кнопки Bootstrap (btn-light) в тёмной теме — тёмно-серые */
[data-bs-theme="dark"] .btn-light {
    --bs-btn-color: var(--oc-text);
    --bs-btn-bg: var(--oc-surface-3);
    --bs-btn-border-color: transparent;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #303643;
    --bs-btn-hover-border-color: transparent;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #303643;
    --bs-btn-active-border-color: transparent;
}

/* Полосы прокрутки внутри блоков — в цвет темы */
[data-bs-theme="dark"] * {
    scrollbar-color: #4b5563 transparent;
}
