/* ═══════════════════════════════════════════════════════════
   Auto Parts Marketplace — Custom Styles
   Accent: linear-gradient(135deg, #f97316, #ea580c) orange
   Background: #0f1117 (dark)
   Mobile-first, Bootstrap 5
═══════════════════════════════════════════════════════════ */

/* ── Страница товара: карусель слева, инфо справа ─────────── */
@media (min-width: 576px) {
    .aimeos.catalog-detail .product.row {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: flex-start !important;
    }
    .aimeos.catalog-detail .product.row > .col-sm-6 {
        flex: 0 0 50% !important;
        max-width: 50% !important;
        min-width: 0;
    }
    /* Правая колонка: небольшой отступ слева */
    .aimeos.catalog-detail .product.row > .col-sm-6:last-child {
        padding-left: 1.25rem;
    }
}

/* ── CSS-переменные акцента ────────────────────────────────── */
:root {
    --accent:      #f97316;
    --accent-dark: #ea580c;
    --accent-rgb:  249, 115, 22;
    --bg-base:     #0f1117;
    --bg-card:     #1a1d24;
    --border:      rgba(255,255,255,.08);
}

/* ── Артикул и коды — моноширинный шрифт ──────────────────── */
.prod-code,
.catalog-number,
.art-number {
    font-family: 'Roboto Mono', 'Courier New', monospace;
    letter-spacing: .02em;
}

/* ── Бейджи состояния товара ───────────────────────────────── */
.badge-new {
    background: rgba(74, 222, 128, .12);
    color: #4ade80;
    border: 1px solid rgba(74, 222, 128, .25);
    border-radius: 5px;
    padding: .15rem .45rem;
    font-size: .7rem; font-weight: 700; text-transform: uppercase;
}
.badge-used {
    background: rgba(251, 191, 36, .1);
    color: #fbbf24;
    border: 1px solid rgba(251, 191, 36, .22);
    border-radius: 5px;
    padding: .15rem .45rem;
    font-size: .7rem; font-weight: 700; text-transform: uppercase;
}

/* ── Кнопки с акцентным градиентом ────────────────────────── */
.btn-accent {
    background: linear-gradient(135deg, var(--accent), var(--accent-dark));
    border: none; color: #fff;
    transition: opacity .2s, transform .15s;
}
.btn-accent:hover { opacity: .88; color: #fff; transform: translateY(-1px); }
.btn-accent:active { transform: none; opacity: 1; }

/* ── Filter-bar select — стиль для мобил ──────────────────── */
.filter-bar select:focus,
.filter-bar input:focus {
    outline: none;
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 2px rgba(var(--accent-rgb), .2);
}

/* ── Отступ контента на высоту navbar ───────────────── */
.content {
    padding-top: 80px !important;
    margin-top: 0 !important;
}

/* ── Логотип: текст DVS.IN.UA справа от иконки ────────────── */
.navbar-brand {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 10px !important;
}
.navbar-brand-text {
    display: none;
    font-weight: 800;
    font-size: 1.05rem;
    letter-spacing: .04em;
    color: #fff;
    line-height: 1.15;
    white-space: nowrap;
}
.navbar-brand-text span {
    background: linear-gradient(135deg, #f97316, #fb923c);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
@media (min-width: 768px) {
    .navbar-brand img   { height: 52px !important; }
    .navbar-brand-text  { display: block; }
}

/* ── Aimeos navbar: убрать стандартный фон и добавить тёмный ─ */
.navbar-top {
    background: rgba(26,29,36,.75) !important;
    border-bottom: 1px solid rgba(255,255,255,.07) !important;
    min-height: 80px !important;
    /* НЕ ставим backdrop-filter здесь — он создаёт stacking context
       и ломает position:fixed внутри (корзина zeynep) */
}
/* Корзина (zeynep offscreen drawer) — поверх всего */
.basket-mini .zeynep {
    z-index: 1060 !important;
}
/* Цвета внутри корзины (светлый фон — нужен тёмный текст) */
.basket-mini .zeynep,
.basket-mini .zeynep * {
    color: #1a1d24 !important;
}
.basket-mini .zeynep a { color: #f97316 !important; }
.basket-mini .zeynep .header,
.basket-mini .zeynep .header * { color: #fff !important; }

/* ── Страница товара (detail) — артикул моно ──────────────── */
.product-detail .catalog-code,
.product-detail .sku { font-family: 'Roboto Mono', monospace; }

/* ── Мобильная нижняя навигация (< 768px) ─────────────────── */
.mobile-bottom-nav {
    display: none;
    position: fixed; bottom: 0; left: 0; right: 0;
    background: #1a1d24;
    border-top: 1px solid rgba(255, 255, 255, .1);
    z-index: 1050;
    height: 60px;
    align-items: stretch;
    padding-bottom: env(safe-area-inset-bottom);
}

@media (max-width: 767.98px) {
    .mobile-bottom-nav { display: flex; }
    body { padding-bottom: 60px; }
}

.mobile-bottom-nav > a {
    flex: 1;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: .35rem 0;
    color: rgba(255, 255, 255, .4);
    text-decoration: none;
    font-size: .58rem; gap: 2px;
    transition: color .15s;
    position: relative;
    border: none;
}

.mobile-bottom-nav > a i {
    font-size: 1.3rem;
    line-height: 1;
}

.mobile-bottom-nav > a.active,
.mobile-bottom-nav > a:hover {
    color: #f97316;
}

.mobile-bottom-nav .bn-count {
    position: absolute;
    top: 5px; right: calc(50% - 18px);
    background: #f97316; color: #fff;
    border-radius: 8px;
    min-width: 16px; height: 16px;
    font-size: .55rem; font-weight: 700; line-height: 16px;
    text-align: center; padding: 0 3px;
    display: none;
}

/* ── Улучшение фокуса для accessibility ───────────────────── */
a:focus-visible,
button:focus-visible {
    outline: 2px solid #f97316;
    outline-offset: 2px;
}
body {
    background-color: var(--bg-base) !important;
    background-image: linear-gradient(rgba(15,17,23,.5), rgba(15,17,23,.5)), url('/images/fon.jpg') !important;
    background-size: cover !important;
    background-position: center center !important;
    background-attachment: fixed !important;
    color: #fff;
}

/* ── Глобальный белый текст на тёмном фоне ───────────────── */
body { color: #e0e0e0; }

/* Все элементы наследуют белый цвет, кроме корзины */
main p, main h1, main h2, main h3, main h4, main h5, main h6,
main span, main div, main li, main td, main th,
main label, main strong, main em, main small,
.aimeos p, .aimeos h1, .aimeos h2, .aimeos h3, .aimeos h4, .aimeos h5,
.aimeos span, .aimeos div, .aimeos li, .aimeos label,
.aimeos strong, .aimeos small {
    color: #e0e0e0;
}
main a:not(.btn):not([class*="btn"]):not(.nav-link) { color: #e0e0e0; }
main a:hover:not(.btn):not([class*="btn"]) { color: #f97316; }

/* Aimeos-ссылки — явно белые */
.aimeos a:link:not(.btn),
.aimeos a:visited:not(.btn) { color: #ffffff; }
.aimeos a:hover:not(.btn),
.aimeos a:active:not(.btn) { color: #f97316; }

/* Корзина — светлый фон, тёмный текст (override выше) */
.basket-mini .zeynep { color: #1a1d24 !important; }
.basket-mini .zeynep p,
.basket-mini .zeynep div,
.basket-mini .zeynep span,
.basket-mini .zeynep li,
.basket-mini .zeynep label,
.basket-mini .zeynep strong { color: #1a1d24 !important; }
.basket-mini .zeynep a { color: #f97316 !important; }
.basket-mini .zeynep .header,
.basket-mini .zeynep .header span,
.basket-mini .zeynep .header div { color: #fff !important; }

/* Aimeos-контейнеры — принудительно тёмный фон */
.aimeos .content-block,
.product-item-container,
.basket-standard .basket,
.checkout-standard .checkout,
.account-profile .profile {
    background: var(--bg-card) !important;
    border-radius: 10px;
    border: 1px solid var(--border);
}

/* Инпуты на Aimeos страницах */
main input, main select, main textarea {
    background: rgba(255,255,255,.07) !important;
    border-color: rgba(255,255,255,.15) !important;
    color: #fff !important;
    border-radius: 7px;
}
main input::placeholder, main textarea::placeholder { color: rgba(255,255,255,.35) !important; }
main input:focus, main select:focus, main textarea:focus {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 3px rgba(var(--accent-rgb),.2) !important;
    outline: none;
}

.hero-section {
    background: rgba(15,17,23,.46) !important;
}

footer {
    background-color: rgba(15,17,23,.46) !important;
}

/* ── Список товаров (OLX-стиль) — принудительно 100% ширина ─ */
.row-cols-2 > *,
.row-cols-sm-3 > *,
.row-cols-md-4 > *,
.row-cols-xl-5 > * {
    flex: 0 0 auto !important;
    width: 100% !important;
}

/* ── Aimeos catalog/lists — список вместо плитки (OLX-стиль) ─ */
.catalog-list-items.list {
    display: flex !important;
    flex-direction: column !important;
    gap: .6rem !important;
}
.catalog-list-items.list .product.row {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    background: #1a1d24;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 12px;
    overflow: hidden;
    transition: border-color .2s, box-shadow .2s;
    margin: 0 !important;
}
.catalog-list-items.list .product.row:hover {
    border-color: rgba(249,115,22,.4);
    box-shadow: 0 2px 14px rgba(249,115,22,.08);
}
/* Колонка с картинкой */
.catalog-list-items.list .list-column.col-6:first-child {
    flex: 0 0 160px !important;
    max-width: 160px !important;
    padding: 0 !important;
    position: relative;
}
.catalog-list-items.list .list-column.col-6:first-child .media-list {
    display: block; height: 120px; overflow: hidden;
}
.catalog-list-items.list .list-column.col-6:first-child img {
    width: 160px; height: 120px; object-fit: cover; display: block;
}
/* Колонка с описанием */
.catalog-list-items.list .list-column.col-6:last-child {
    flex: 1 !important;
    max-width: 100% !important;
    padding: .75rem 1rem !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
}
/* Заголовок товара */
.catalog-list-items.list .text-list h2 {
    font-size: .95rem !important;
    font-weight: 600 !important;
    margin-bottom: .3rem !important;
    color: #fff !important;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* Цена */
.catalog-list-items.list .price-list .value {
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    color: #4ade80 !important;
}
/* Убрать лишние отступы Bootstrap grid */
.catalog-list-items.list .product.row > * { padding: 0 !important; }

/* ── Пагинация по центру ─ */
nav.mt-4 {
    display: flex !important;
    justify-content: center !important;
    width: 100%;
}
nav.mt-4 ul.pagination {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    list-style: none !important;
    padding-left: 0 !important;
    margin: 0 !important;
}

@media (max-width: 575px) {
    .catalog-list-items.list .list-column.col-6:first-child,
    .catalog-list-items.list .list-column.col-6:first-child img { width: 110px !important; flex: 0 0 110px !important; max-width: 110px !important; }
    .catalog-list-items.list .list-column.col-6:first-child .media-list { height: 90px; }
    .catalog-list-items.list .list-column.col-6:first-child img { height: 90px; }
}
.sm-msg {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: .875rem; text-decoration: none !important;
    transition: opacity .2s;
}
.sm-msg:hover { opacity: .75; }
.sm-tg  { color: #60c8f8 !important; }
.sm-vb  { color: #a89ef8 !important; }
.sm-wa  { color: #4ade80 !important; }


.aimeos .common-summary-detail .headline {
    background-color: #383636;
}
.basket-mini .zeynep {
    background-color: #ffffff7a;
}
.aimeos-container {
    background-color: #ffffff7a;
}
.pagination .page-link {
    padding-left: 5px;
}

.aimeos.catalog-detail {
    background: #0f111700!important;
}