/* =========================================================
   Магазин — слой дизайн-системы поверх Bootstrap.
   Порядок подключения: design-system.css → bootstrap → shop.css
   Здесь мы «мостим» переменные Bootstrap к нашим токенам и
   переоформляем компоненты каталога в технический стиль сайта.
   ========================================================= */

/* ---------- Мост Bootstrap → дизайн-токены ---------- */
:root {
    --bs-primary:            #2b7de9;
    --bs-primary-rgb:        43, 125, 233;
    --bs-link-color:         #2b7de9;
    --bs-link-color-rgb:     43, 125, 233;
    --bs-link-hover-color:   #1f66c4;

    --bs-body-font-family:   var(--font-sans);
    --bs-body-color:         var(--color-body);
    --bs-body-color-rgb:     55, 65, 81;
    --bs-body-bg:            var(--color-bg);

    --bs-secondary-color:    var(--color-muted);
    --bs-secondary-rgb:      107, 114, 128;
    --bs-success-rgb:        46, 158, 91;
    --bs-danger-rgb:         229, 72, 77;
    --bs-border-color:       var(--color-border);

    --bs-border-radius:      var(--radius-sm);
    --bs-border-radius-sm:   var(--radius-sm);
    --bs-border-radius-lg:   var(--radius-md);
}

/* Bootstrap перебивает наш body — возвращаем единый фон и шрифт */
body {
    font-family: var(--font-sans);
    color: var(--color-body);
    background-color: var(--color-bg);
}

/* Единая ширина контейнера, как на остальном сайте (Bootstrap иначе уже) */
.container {
    max-width: var(--container-max);
    padding-inline: var(--container-pad);
}

/* ---------- Кнопки сайта (header / footer) ----------
   Bootstrap грузится после design-system и сбрасывает форму .btn,
   поэтому возвращаем «таблеточную» геометрию нашим BEM-кнопкам. */
.btn--primary,
.btn--ghost,
.btn--sm,
.btn--lg,
.site-header .btn,
.site-footer .btn,
.vk-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    border-radius: var(--radius-pill);
    font-weight: 600;
    line-height: 1;
}
.btn--primary { background: var(--color-primary); color: #fff; border: 1px solid var(--color-primary); padding: 0.7rem 1.4rem; }
.btn--primary:hover { background: var(--color-primary-600); color: #fff; }
.btn--ghost { background: transparent; color: var(--color-primary); border: 1px solid var(--color-primary); padding: 0.7rem 1.4rem; }
.btn--ghost:hover { background: var(--color-primary-50); }
.btn--sm { padding: 0.5rem 1rem; font-size: var(--fs-small); }

/* ---------- Кнопки каталога (Bootstrap-классы) ---------- */
.btn { --bs-btn-font-weight: 600; --bs-btn-border-radius: var(--radius-sm); }
.btn-primary {
    --bs-btn-bg: var(--color-primary); --bs-btn-border-color: var(--color-primary);
    --bs-btn-hover-bg: var(--color-primary-600); --bs-btn-hover-border-color: var(--color-primary-600);
    --bs-btn-active-bg: var(--color-primary-600); --bs-btn-active-border-color: var(--color-primary-600);
    --bs-btn-disabled-bg: var(--color-primary); --bs-btn-disabled-border-color: var(--color-primary);
}
.btn-success {
    --bs-btn-bg: var(--color-success); --bs-btn-border-color: var(--color-success);
    --bs-btn-hover-bg: #268a4e; --bs-btn-hover-border-color: #268a4e;
    --bs-btn-active-bg: #268a4e; --bs-btn-active-border-color: #268a4e;
    --bs-btn-disabled-bg: var(--color-success); --bs-btn-disabled-border-color: var(--color-success);
}
.btn-outline-primary {
    --bs-btn-color: var(--color-primary); --bs-btn-border-color: var(--color-primary);
    --bs-btn-hover-bg: var(--color-primary); --bs-btn-hover-border-color: var(--color-primary);
    --bs-btn-active-bg: var(--color-primary); --bs-btn-active-border-color: var(--color-primary);
}
.btn-outline-secondary {
    --bs-btn-color: var(--color-muted); --bs-btn-border-color: var(--color-border);
    --bs-btn-hover-bg: var(--color-ink); --bs-btn-hover-border-color: var(--color-ink); --bs-btn-hover-color: #fff;
}
.btn-danger {
    --bs-btn-color: #fff; --bs-btn-border-color: var(--color-danger);
    --bs-btn-bg: var(--color-danger);
    --bs-btn-hover-bg: #c93a3f; --bs-btn-hover-border-color: #c93a3f; --bs-btn-hover-color: #fff;
}
/* Контурная: красный текст/рамка на прозрачном фоне, заливка только на hover. */
.btn-outline-danger {
    --bs-btn-color: var(--color-danger); --bs-btn-border-color: var(--color-danger);
    --bs-btn-bg: transparent;
    --bs-btn-hover-bg: var(--color-danger); --bs-btn-hover-border-color: var(--color-danger); --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: var(--color-danger); --bs-btn-active-border-color: var(--color-danger); --bs-btn-active-color: #fff;
}
.btn-secondary {
    --bs-btn-bg: var(--accent-muted); --bs-btn-border-color: var(--accent-muted);
    --bs-btn-hover-bg: #7f8c8d; --bs-btn-hover-border-color: #7f8c8d;
}

/* =========================================================
   Тулбар магазина (поиск + корзина под единой шапкой)
   ========================================================= */
.shop-toolbar {
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    position: sticky;
    top: 64px;            /* высота site-header */
    z-index: 90;
}
.shop-toolbar__inner {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    min-height: 56px;
    padding-block: var(--space-2);
}
.shop-toolbar__eyebrow {
    font-family: var(--font-mono);
    font-size: var(--fs-small);
    color: var(--color-primary);
    white-space: nowrap;
}
.shop-search { flex: 1; max-width: 560px; margin-left: auto; }
.shop-search .input-group { box-shadow: var(--shadow-sm); border-radius: var(--radius-pill); overflow: hidden; }
.shop-search .form-control {
    border: 1px solid var(--color-border); border-right: none;
    padding-left: var(--space-4); font-size: var(--fs-small);
}
.shop-search .form-control:focus { box-shadow: none; border-color: var(--color-border); }
.shop-search .btn {
    background: var(--color-primary); color: #fff; border: 1px solid var(--color-primary);
    padding-inline: var(--space-4);
}
.shop-search .btn:hover { background: var(--color-primary-600); }

.shop-cart-btn {
    position: relative;
    display: inline-flex; align-items: center; gap: var(--space-2);
    padding: 0.5rem 1rem;
    border: 1px solid var(--color-border); border-radius: var(--radius-pill);
    color: var(--color-ink); font-weight: 600; font-size: var(--fs-small);
    background: var(--color-surface); white-space: nowrap;
}
.shop-cart-btn:hover { border-color: var(--color-primary); color: var(--color-primary); }
.shop-cart-btn .cart-badge {
    font-family: var(--font-mono);
    min-width: 20px; height: 20px; padding: 0 5px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--color-primary); color: #fff;
    border-radius: var(--radius-pill); font-size: 0.72rem; line-height: 1;
}
.shop-cart-btn .cart-badge:empty,
.shop-cart-btn .cart-badge[data-count="0"] { display: none; }

@media (max-width: 768px) {
    .shop-toolbar__eyebrow { display: none; }
    .shop-toolbar { position: static; }
    .shop-search { margin-left: 0; }
    .shop-cart-btn span:not(.cart-badge) { display: none; } /* только иконка + счётчик */
}

/* =========================================================
   Хлебные крошки
   ========================================================= */
.breadcrumb {
    --bs-breadcrumb-divider-color: var(--color-border);
    font-family: var(--font-mono);
    font-size: var(--fs-small);
    margin-bottom: var(--space-6);
}
.breadcrumb-item a { color: var(--color-muted); }
.breadcrumb-item a:hover { color: var(--color-primary); }
.breadcrumb-item.active { color: var(--color-ink); }

/* =========================================================
   Заголовки разделов каталога
   ========================================================= */
.shop-pagehead { margin-bottom: var(--space-6); }
.shop-pagehead h1 { font-size: var(--fs-h2); margin-bottom: var(--space-1); }
.shop-pagehead .lead-count { color: var(--color-muted); font-size: var(--fs-small); }
.shop-pagehead .lead-count strong { color: var(--color-ink); font-family: var(--font-mono); }

/* SEO-описание категории */
.category-intro {
    max-width: 820px; margin-bottom: var(--space-6);
    color: var(--color-body); font-size: var(--fs-small); line-height: 1.7;
    border-left: 3px solid var(--color-primary); padding-left: var(--space-4);
}
.category-intro p { margin-bottom: var(--space-2); }

/* =========================================================
   Сайдбар категорий
   ========================================================= */
.category-sidebar {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}
.category-sidebar > .card-header {
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    color: var(--color-ink);
    font-weight: 700;
    border-radius: var(--radius-md) var(--radius-md) 0 0;
}
.category-sidebar > .card-header h5 { font-size: 1rem; }

/* Дерево категорий — ровные строки: имя · счётчик · стрелка */
.cat-node { margin-bottom: 2px; }
.cat-row {
    display: flex; align-items: center; gap: var(--space-2);
    padding: 6px 8px; border-radius: var(--radius-sm);
    transition: background var(--transition);
}
.cat-row:hover { background: var(--color-bg); }
.cat-row.is-active { background: var(--color-primary-50); }
.cat-row__name {
    flex: 1; min-width: 0; color: var(--color-body); font-size: var(--fs-small); font-weight: 500;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cat-row__name:hover { color: var(--color-primary); }
.cat-row.is-active .cat-row__name { color: var(--color-primary); font-weight: 600; }
.cat-row__count {
    flex-shrink: 0; font-family: var(--font-mono); font-size: 0.72rem; color: var(--color-muted);
    background: var(--color-bg); border: 1px solid var(--color-border);
    border-radius: var(--radius-pill); padding: 1px 7px; min-width: 26px; text-align: center;
}
.cat-row.is-active .cat-row__count { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
.cat-row__toggle {
    flex-shrink: 0; width: 24px; height: 24px; padding: 0;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--color-border); border-radius: var(--radius-sm);
    background: var(--color-surface); color: var(--color-muted); cursor: pointer;
    transition: border-color var(--transition), color var(--transition);
}
.cat-row__toggle:hover { border-color: var(--color-primary); color: var(--color-primary); }
.cat-row__toggle .bi-chevron-down { font-size: 0.7rem; transition: transform 0.25s ease; }
.cat-row__toggle:not(.collapsed) .bi-chevron-down { transform: rotate(180deg); }
.cat-sub { border-left: 1px solid var(--color-border); margin-left: 12px; padding-left: 6px; margin-top: 2px; }

.categories-tree::-webkit-scrollbar { width: 4px; }
.categories-tree::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 2px; }

/* «Все товары» в сайдбаре */
.sidebar-all-link {
    border: 1px solid var(--color-border) !important;
    border-radius: var(--radius-sm) !important;
    color: var(--color-body) !important;
    font-weight: 500;
}
.sidebar-all-link.bg-primary {
    background: var(--color-primary-50) !important;
    border-color: var(--color-primary) !important;
    color: var(--color-primary) !important;
}
.sidebar-all-link .badge { font-family: var(--font-mono); }

/* Блок «гарантия/доставка» под сайдбаром */
.sidebar-promo { border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); }
.sidebar-promo .card-title { font-size: var(--fs-small); color: var(--color-body); }

/* =========================================================
   Панель фильтров
   ========================================================= */
.filter-card {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    background: var(--color-surface);
    padding: var(--space-4) var(--space-6);
    margin-bottom: var(--space-6);
}
.shop-filter {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    align-items: flex-end;
}
.shop-filter__group {
    flex: 1 1 160px;
    min-width: 0;
    display: flex; flex-direction: column; gap: var(--space-2);
}
.shop-filter__label { font-size: var(--fs-small); font-weight: 600; color: var(--color-ink); }
.shop-filter__price { display: flex; align-items: center; gap: var(--space-2); }
.shop-filter__price input { min-width: 0; }
.shop-filter__dash { color: var(--color-muted); flex-shrink: 0; }
.shop-filter__actions {
    flex: 1 1 220px;
    flex-direction: row;
    align-items: stretch;
    gap: var(--space-2);
}
.shop-filter__actions .btn { flex: 1; white-space: nowrap; }
.form-label { color: var(--color-ink); }
.form-control, .form-select {
    border-color: var(--color-border);
    color: var(--color-body);
}
.form-control:focus, .form-select:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-50);
}
.form-text { color: var(--color-muted); font-family: var(--font-mono); font-size: 0.75rem; }

/* Чип активных фильтров */
.active-filters {
    background: var(--color-primary-50);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-body);
}
.active-filters .badge { font-family: var(--font-mono); font-weight: 500; }

/* =========================================================
   Карточка товара
   ========================================================= */
/* Раскладка магазина: фиксированный сайдбар + гибкий контент */
.shop-layout {
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr);
    gap: var(--space-8);
    align-items: start;
}
.shop-sidebar { min-width: 0; }
.shop-main { min-width: 0; }
@media (max-width: 992px) {
    .shop-layout { grid-template-columns: 1fr; }
    .sticky-sidebar-container { position: static; max-height: none; margin-bottom: var(--space-8); }
}

.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: var(--space-6);
    align-items: stretch;
}

/* ---------- Карточка товара ---------- */
.pcard {
    display: flex; flex-direction: column; height: 100%;
    background: var(--color-surface); border: 1px solid var(--color-border);
    border-radius: var(--radius-md); overflow: hidden;
    transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.pcard:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--color-primary); }
.pcard__media {
    position: relative; aspect-ratio: 1 / 1; background: var(--color-bg);
    display: flex; align-items: center; justify-content: center; padding: var(--space-4);
    border-bottom: 1px solid var(--color-border);
}
.pcard__img { width: 100%; height: 100%; object-fit: contain; }
.pcard__img.lazy-image { opacity: 0; transition: opacity 0.3s ease; }
.pcard__img.lazy-image.loaded { opacity: 1; }
.pcard__noimg { font-family: var(--font-mono); font-size: var(--fs-small); color: var(--color-muted); }
.pcard__badge {
    position: absolute; top: var(--space-3); left: var(--space-3); z-index: 1;
    background: var(--color-danger); color: #fff; font-family: var(--font-mono);
    font-size: 0.75rem; font-weight: 700; padding: 3px 10px; border-radius: var(--radius-pill);
}
.pcard__body { padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-1); flex: 1; }
.pcard__cat { font-family: var(--font-mono); font-size: 0.7rem; color: var(--color-muted); text-transform: uppercase; letter-spacing: 0.03em; }
.pcard__title {
    font-size: 0.98rem; font-weight: 600; color: var(--color-ink); line-height: 1.35;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.pcard__title:hover { color: var(--color-primary); }
.pcard__variants { font-family: var(--font-mono); font-size: 0.75rem; color: var(--color-primary); }
.pcard__price { font-family: var(--font-mono); display: flex; align-items: baseline; gap: var(--space-2); margin-top: var(--space-2); }
.pcard__price-now { font-size: 1.25rem; font-weight: 700; color: var(--color-ink); }
.pcard__price-old { font-size: 0.85rem; color: var(--color-muted); text-decoration: line-through; }
.pcard__actions { margin-top: auto; padding-top: var(--space-4); display: grid; gap: var(--space-2); }
.pcard__actions .btn { width: 100%; }
.pcard__actions form { display: block; }

.badge.bg-danger { background: var(--color-danger) !important; }

/* =========================================================
   Деталь товара
   ========================================================= */
.product-detail-image-container {
    background: var(--color-bg);
    border-radius: var(--radius-md) var(--radius-md) 0 0;
}
.price-section .price-new,
.price-section .text-dark { font-family: var(--font-mono); color: var(--color-ink) !important; }
.price-section .price-old { font-family: var(--font-mono); }
.properties-section .table td { border-color: var(--color-border); }
.review-item { border-color: var(--color-border) !important; }

/* =========================================================
   Корзина / таблицы
   ========================================================= */
.table { --bs-table-border-color: var(--color-border); color: var(--color-body); }
.table > thead { --bs-table-bg: var(--color-bg); }
.table .text-primary { color: var(--color-primary) !important; font-family: var(--font-mono); }
.cart-mobile-view .card { border: 1px solid var(--color-border); border-radius: var(--radius-md); }

/* =========================================================
   Пагинация
   ========================================================= */
.pagination { --bs-pagination-border-color: var(--color-border); flex-wrap: wrap; gap: 2px; }
.page-link {
    font-family: var(--font-mono);
    color: var(--color-body);
    border-color: var(--color-border);
    min-width: 42px; text-align: center;
    --bs-pagination-hover-bg: var(--color-primary-50);
    --bs-pagination-hover-color: var(--color-primary);
    --bs-pagination-focus-box-shadow: 0 0 0 3px var(--color-primary-50);
}
.page-item.active .page-link {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}
.pagination-container .text-muted small { font-family: var(--font-mono); }

/* =========================================================
   Информационная страница (credits)
   ========================================================= */
.list-group-item.active { background: var(--color-primary) !important; border-color: var(--color-primary) !important; }
.card-header.bg-dark { background: var(--color-ink) !important; }
.card-header.bg-secondary { background: var(--color-muted) !important; }
.card-header.bg-primary { background: var(--color-primary) !important; }

/* =========================================================
   Уведомления (тосты добавления в корзину)
   ========================================================= */
.notification-container {
    position: fixed; top: 84px; right: 20px; z-index: 9999;
    max-width: 380px; width: 90%;
}
.custom-notification {
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--color-border);
    border-left: 3px solid var(--color-primary);
    background: var(--color-surface);
    margin-bottom: var(--space-3);
    transform: translateX(420px); opacity: 0;
    transition: transform 0.35s ease, opacity 0.35s ease;
    overflow: hidden;
}
.custom-notification.show { transform: translateX(0); opacity: 1; }
.custom-notification.is-clickable { cursor: pointer; }
.custom-notification.is-clickable:hover { box-shadow: 0 6px 20px rgba(0,0,0,.14); }
.custom-notification.is-clickable:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.notification-cta { display: block; margin-top: 3px; font-size: var(--fs-small); font-weight: 700; color: var(--color-primary); }
.custom-notification.success { border-left-color: var(--color-success); }
.custom-notification.danger  { border-left-color: var(--color-danger); }
.custom-notification.info    { border-left-color: var(--color-primary); }
.custom-notification .notification-content { color: var(--color-body); font-size: var(--fs-small); }
.notification-icon { font-size: 1.4rem; margin-right: var(--space-3); flex-shrink: 0; }
.notification-close {
    background: none; border: none; font-size: 1.1rem; color: var(--color-muted);
    cursor: pointer; width: 24px; height: 24px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; transition: background var(--transition);
}
.notification-close:hover { background: var(--color-bg); }

@media (max-width: 768px) {
    .notification-container { right: 10px; left: 10px; width: auto; max-width: none; top: 70px; }
}

/* ---------- Анимации ---------- */
.spinner { animation: shop-spin 1s linear infinite; }
@keyframes shop-spin { to { transform: rotate(360deg); } }
.cart-bounce { animation: shop-bounce 0.6s ease; }
@keyframes shop-bounce { 0%,20%,60%,100% { transform: translateY(0); } 40% { transform: translateY(-6px); } 80% { transform: translateY(-3px); } }

/* ---------- Lazy-load ---------- */
.lazy-image { opacity: 0; transition: opacity 0.3s ease-in-out; background: var(--color-bg); }
.lazy-image.loaded { opacity: 1; }
.lazy-load-placeholder {
    background: linear-gradient(90deg, var(--color-bg) 25%, #e8edf3 50%, var(--color-bg) 75%);
    background-size: 200% 100%; animation: shop-shimmer 1.5s infinite;
}
@keyframes shop-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* ---------- Пустые состояния ---------- */
.shop-empty { text-align: center; padding-block: var(--space-16); }
.shop-empty i { color: var(--color-border); }
.shop-empty h3 { color: var(--color-muted); margin-top: var(--space-4); }

/* =========================================================
   Структурная раскладка (восстановлено из старого shop.html)
   ========================================================= */
.sticky-sidebar-container {
    position: sticky; top: 132px; height: fit-content;
    max-height: calc(100vh - 150px); overflow-y: auto;
}
.categories-tree { max-height: 55vh; overflow-y: auto; scrollbar-width: thin; }

.toggle-subcategories {
    width: 30px; height: 30px; padding: 0;
    display: flex; align-items: center; justify-content: center;
}
.toggle-subcategories .bi-chevron-down { transition: transform 0.3s ease; font-size: 0.8rem; }
.toggle-subcategories:not(.collapsed) .bi-chevron-down { transform: rotate(180deg); }
.subcategories.collapse { transition: all 0.3s ease; }

/* Размеры изображений товара */
.product-card .product-image-desktop { height: 200px; }
.product-card .product-image-desktop img { height: 100%; object-fit: contain; }
.product-image-mobile { width: 100%; padding-bottom: 100%; position: relative; overflow: hidden; }
.product-image-mobile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.product-detail-image-container {
    position: relative; min-height: 300px;
    display: flex; align-items: center; justify-content: center;
}
.product-detail-image { max-height: 70vh; object-fit: contain; }

/* Цены (общие, вне карточки) */
.price-old { text-decoration: line-through; color: var(--color-muted); }
.price-new { color: var(--color-danger); font-weight: 700; }

@media (max-width: 768px) {
    .sticky-sidebar-container { position: static; max-height: none; margin-bottom: var(--space-8); }
    .product-detail-image { max-height: 50vh; }
    .product-detail-image-container { min-height: 200px; }
}