/* === СКЕЛЕТОНЫ ЗАГРУЗКИ === */
.navi-skeleton-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin: 0;
}
.navi-skeleton-grid .navi-skeleton-card {
    flex: 1 1 calc(50% - 10px);
    max-width: calc(50% - 10px);
    background: #fff;
    border-radius: 10px;
    padding: 16px;
    border: 1px solid var(--navi-border, #E3E8EB);
    box-sizing: border-box;
}
.navi-skeleton-img,
.navi-skeleton-line,
.navi-skeleton-badge,
.navi-skeleton-btn {
    background: linear-gradient(90deg, #f0f2f5 25%, #e0e3e8 50%, #f0f2f5 75%);
    background-size: 200% 100%;
    animation: naviShimmer 1.5s infinite;
    border-radius: 8px;
}
.navi-skeleton-img {
    width: 100%;
    height: 120px;
    margin-bottom: 12px;
}
.navi-skeleton-line {
    height: 14px;
    margin-bottom: 8px;
}
.navi-skeleton-line.w-90 { width: 90%; }
.navi-skeleton-line.w-70 { width: 70%; }
.navi-skeleton-line.w-50 { width: 50%; }
.navi-skeleton-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 16px;
    gap: 12px;
}
.navi-skeleton-badge {
    width: 120px;
    height: 34px;
    border-radius: 8px;
}
.navi-skeleton-btn {
    width: 60px;
    height: 34px;
    border-radius: 8px;
}
@keyframes naviShimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
/* List-режим: скелетоны в одну колонку, компактнее */
.navi-view-list ~ .navi-skeleton-grid,
.navi-flex-row.navi-view-list .navi-skeleton-card {
    flex-direction: column;
}
.navi-skeleton-grid.navi-skeleton-list .navi-skeleton-card {
    flex: 1 1 100%;
    max-width: 100%;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 10px 16px;
}
.navi-skeleton-grid.navi-skeleton-list .navi-skeleton-img {
    width: 100px;
    height: 70px;
    margin-bottom: 0;
    flex-shrink: 0;
}
.navi-skeleton-grid.navi-skeleton-list .navi-skeleton-lines {
    flex: 1;
}
.navi-skeleton-grid.navi-skeleton-list .navi-skeleton-footer {
    margin-top: 0;
    flex-shrink: 0;
}
@media (max-width: 768px) {
    .navi-skeleton-grid .navi-skeleton-card {
        flex: 1 1 100%;
        max-width: 100%;
    }
    .navi-skeleton-grid.navi-skeleton-list .navi-skeleton-card {
        flex-direction: column;
        align-items: stretch;
    }
    .navi-skeleton-grid.navi-skeleton-list .navi-skeleton-img {
        width: 100%;
        height: 100px;
        margin-bottom: 12px;
    }
}

:root {
  --navi-accent: #18b79d;
  --navi-accent-hover: #20c9ac;
  --navi-dark: #1f2328;
  --navi-gray: #f4f6f8;
  --navi-border: rgba(0,0,0,.06);
  --navi-radius: 10px;
  --navi-font: Arial, sans-serif;
}
.page-bg-gray { background-color: #f9fafb; margin:0; padding:0; }
.catalog-wrapper { background-color: #f9fafb; padding: 20px 0; }

.page-bg-gray > section.page-sidebar,
.page-bg-gray > .catalog-wrapper > section.page-sidebar,
section.page-sidebar.page-section { padding-top: 0 !important; margin-top: 0 !important; }
.section-title.line-dabble.mb-20.mt-20 { margin-top: 0 !important; }

.navi-luis-title { margin: 0 0 16px 0 !important; padding: 0 !important; }
.navi-luis-title h1 { margin: 0 !important; padding: 0 0 8px 0 !important; }
.navi-category-grid { display:flex; flex-wrap:wrap; margin-right:-10px; margin-left:-10px; }
.navi-category-item { flex:0 0 20%; max-width:20%; padding:0 10px; margin-bottom:20px; }
@media (max-width:992px) { .navi-category-item { flex:0 0 25%; max-width:25%; } }
@media (max-width:768px) { .navi-category-item { flex:0 0 33.333%; max-width:33.333%; } }
@media (max-width:576px) { .navi-category-item { flex:0 0 50%; max-width:50%; } }
.navi-product-card { background:#fff; border-radius:var(--navi-radius); overflow:hidden; transition:all .18s; border:1px solid var(--navi-border); height:100%; display:flex; flex-direction:column; }
.navi-product-card:hover { transform:translateY(-3px); box-shadow:0 8px 20px rgba(0,0,0,.08); border-color:var(--navi-accent); }
.navi-product-link { text-decoration:none; color:inherit; display:flex; flex-direction:column; height:100%; }
.navi-product-img-wrap { position:relative; width:100%; padding-top:75%; overflow:hidden; background:#fff; }
.navi-product-img-wrap--cat { padding-top:65%; }
.navi-product-img-wrap img { position:absolute; top:0; left:0; width:100%; height:100%; object-fit:contain; padding:8px; transition:transform .18s; }
.navi-product-card:hover .navi-product-img-wrap img { transform:scale(1.03); }
.navi-product-title-wrap { padding:10px 8px; text-align:center; flex-grow:1; display:flex; align-items:center; justify-content:center; }
.navi-product-title { font-size:13px; font-weight:500; margin:0; color:var(--navi-dark); line-height:1.3; font-family:var(--navi-font); }
.navi-product-title--cat { font-size:14px; font-weight:600; }

.navi-flex-row { display:flex; flex-wrap:wrap; align-items:stretch; }
.navi-product-item { height:inherit; }

.navi-product-item { cursor: pointer; }
.navi-product-item .navi-btn,
.navi-product-item .compare-toggle-btn,
.navi-product-item .favorite-toggle-btn,
.navi-product-item a { cursor: pointer; }

.navi-product-item:hover .navi-product-detail { box-shadow: 0 6px 18px rgba(0,0,0,.08); }
.navi-product-detail { background:#fff; border-radius:var(--navi-radius); padding:16px; box-shadow:0 2px 8px rgba(0,0,0,.03); border:1px solid var(--navi-border); height:100%; display:flex; flex-direction:column; }
.navi-product-detail:hover { box-shadow:0 6px 18px rgba(0,0,0,.06); }
.navi-detail-name { font-size:16px; font-weight:600; color:var(--navi-dark); margin:0 0 12px; padding-bottom:10px; border-bottom:1px solid var(--navi-border); display:flex; justify-content:space-between; align-items:center; }
.navi-detail-image { position: relative; border-radius:8px; overflow:hidden; background:#fff; margin-bottom:10px; text-align:center; }
.navi-detail-image img { width:100%; height:auto; max-height:160px; object-fit:contain; }

.navi-flex-row:not(.navi-view-list) .navi-detail-image {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 180px !important;
}
.navi-flex-row:not(.navi-view-list) .navi-detail-image a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
}
.navi-flex-row:not(.navi-view-list) .navi-detail-image img {
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: 160px !important;
    object-fit: contain !important;
}
.navi-detail-model { font-size:14px; font-weight:500; color:var(--navi-dark); margin-bottom:6px; }

.navi-detail-model--full {
    margin: 0 0 12px 0;
    padding: 0;
    font-size: 14px;
    line-height: 1.3;
    color: var(--navi-dark);
    font-weight: 500;
}
.navi-detail-manufacturer { font-size:13px; color:#666; margin-bottom:4px; }
.navi-detail-manufacturer span { font-weight:700; color:var(--navi-dark); }
.navi-detail-info { padding-left:5px !important; }
.navi-detail-price { font-size:15px; color:var(--navi-dark); margin:8px 0; font-weight:500; white-space:nowrap; }
.navi-detail-price strong { font-size:18px; color:var(--navi-accent); margin-left:4px; }
.navi-detail-price small { font-weight:400; font-size:13px; color:var(--navi-dark); }
.navi-detail-short { margin-top:10px; }
.navi-detail-short-title { font-weight:600; margin-bottom:6px; color:var(--navi-dark); font-size:13px; text-decoration:underline; }
.navi-detail-params ul { list-style:none; padding:0; margin:0; }
.navi-detail-params li { padding:2px 0; font-size:13px; color:#555; }
.navi-detail-text { font-size:13px; color:#777; line-height:1.4; margin-top:6px; }
.navi-detail-footer { margin-top: auto; padding-top: 8px; border-top: 1px solid var(--navi-border); display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; align-items: center; column-gap: 16px; row-gap: 8px; }
.navi-detail-actions { display: contents !important; }
.navi-detail-status { display: contents !important; }
.navi-detail-status .d-md-none { display: contents !important; }
.navi-detail-buttons { display: contents !important; }
/* Col 1: цена (row 1) — слева, в формате "Цена: 1640 ₽ / шт" */
.navi-detail-footer .navi-mobile-price { grid-column: 1; grid-row: 1; justify-self: start; text-align: left; font-size: 15px; font-weight: 500; color: var(--navi-dark); white-space: nowrap; margin: 0; }
.navi-detail-footer .navi-mobile-price::before { content: "Цена: "; font-weight: 500; }
.navi-detail-footer .navi-mobile-price strong { font-size: 18px; color: var(--navi-accent); margin-left: 4px; }
.navi-detail-footer .navi-mobile-price small { font-weight: 400; font-size: 13px; color: var(--navi-dark); }
/* Col 1: наличие (row 2) — слева */
.navi-detail-footer .stock-badge-wrapper { grid-column: 1; grid-row: 2; justify-self: start; }
/* Col 2: обёртка кнопок-иконок (row 1) — корзина с текстом на десктопе */
.navi-detail-footer .navi-list-icon-row { grid-column: 2; grid-row: 1; display: flex; flex-direction: row; align-items: center; justify-content: flex-end; gap: 6px; width: 100%; }
.navi-detail-footer .navi-list-icon-row .navi-btn { white-space: nowrap; }
/* Скрыть цену сверху (десктопный блок) — показываем цену в footer */
.navi-flex-row:not(.navi-view-list) .navi-detail-info > .d-none.d-md-block { display: none !important; }
/* На десктопе grid: корзина с текстом, заполняет место */
@media (min-width: 1280px) {
    .navi-flex-row:not(.navi-view-list) .navi-detail-footer .navi-list-icon-row .add-to-cart-btn {
        padding: 7px 16px;
        flex: 1 1 auto;
        min-width: 120px;
        justify-content: center;
    }
    .navi-flex-row:not(.navi-view-list) .navi-detail-footer .navi-list-icon-row .add-to-cart-btn::after {
        content: "\00a0В корзину";
        font-size: 13px;
        font-weight: 600;
    }
}
/* Col 2: Подробнее (row 2) */
.navi-detail-footer .navi-detail-buttons .navi-btn:not(.navi-btn-icon):not(.compare-toggle-btn):not(.favorite-toggle-btn) { grid-column: 2; grid-row: 2; justify-self: end; width: 100%; justify-content: center; }
.stock-badge { display:inline-flex; align-items:center; padding:8px 16px; border-radius:8px; font-size:13px; font-weight:600; gap:6px; white-space:nowrap; position: relative; min-height:34px; min-width:180px; justify-content:center; border: none !important; box-shadow: none !important; }
.navi-badge-success { background:rgba(48,164,149,.1); color:#30A495; }
.navi-badge-danger { background:rgba(239,68,68,.1); color:#ef4444; }
.navi-badge-warning { background:rgba(255,193,7,.1); color:#b8860b; }
.stock-badge.navi-badge-success { background:rgba(48,164,149,.1); color:#30A495; }
.stock-badge.navi-badge-danger { background:rgba(239,68,68,.1); color:#ef4444; }
.stock-badge.navi-badge-warning { background:rgba(255,193,7,.1); color:#b8860b; }
.navi-title-badge { display:inline-block; padding:5px 14px; border-radius:8px; font-size:13px; font-weight:600; color:#fff; white-space:nowrap; letter-spacing:0.3px; flex-shrink:0; text-transform:uppercase; animation: gentleBlink 2s ease-in-out 3; }
@keyframes gentleBlink { 0%,100% { opacity:1; } 50% { opacity:0.4; } }

.navi-detail-image .navi-title-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 3;
    pointer-events: auto;
    box-shadow: 0 2px 8px rgba(0,0,0,.15);
}
.navi-btn { display:inline-flex; align-items:center; padding:8px 15px; border-radius:8px; font-size:13px; font-weight:600; transition:all .18s; text-decoration:none; border:2px solid transparent; cursor:pointer; gap:5px; white-space:nowrap; min-height:34px; box-sizing:border-box; }

.navi-btn.navi-btn-icon { padding: 7px 9px; }
.navi-btn-accent { background:var(--navi-accent); color:#fff; border-color:var(--navi-accent); }
.navi-btn-accent:hover { background:var(--navi-accent-hover); border-color:var(--navi-accent-hover); transform:translateY(-1px); box-shadow:0 4px 12px rgba(24,183,157,.25); }
.navi-btn-outline { background:transparent; color:#5F6F75; border-color:rgba(0,0,0,.15); }
.navi-btn-outline:hover { background:var(--navi-accent); color:#fff; border-color:var(--navi-accent); transform:translateY(-1px); box-shadow:0 4px 12px rgba(24,183,157,.25); }
.navi-btn-outline:disabled { opacity:0.5; cursor:not-allowed; background:rgba(0,0,0,0.03); color:#999; border-color:rgba(0,0,0,0.1); }
.navi-btn-outline:disabled:hover { transform:none; box-shadow:none; background:rgba(0,0,0,0.03); color:#999; }
.navi-filter-panel { background:#fff; padding:12px; border-radius:10px; border:1px solid #E3E8EB; font-size:13px; box-shadow:0 2px 8px rgba(31, 42, 46, .06); overflow:hidden; display:flex; flex-direction:column; align-self:stretch; height:100%; }
.navi-filter-label { font-weight:600; font-size:15px; margin-bottom:6px; display:inline-block; margin-right:8px; }
.navi-filter-sub-label { font-weight:600; font-size:13px; margin-bottom:4px; display:block; }
.buttonClear,.buttonVal { display:inline-flex; align-items:center; padding:4px 10px; border-radius:8px; font-size:13px; font-weight:500; transition:all .18s; border:1px solid rgba(0,0,0,.1); cursor:pointer; margin:0 4px 4px 0; gap:4px; }
.buttonClear { background: #fff5f5; border-color: #f5c6cb; color: #dc3545; }
.buttonVal { background: var(--navi-gray); color: var(--navi-dark); }
.buttonVal[data-filter="nal"] { background: #f0faf7; border-color: #b7e4d4; color: #18b79d; }
.buttonClear:hover { background: #f8d7da; border-color: #f1aeb5; color: #a71d2a; }
.buttonVal:hover { border-color: var(--navi-accent); color: var(--navi-accent); background: rgba(24,183,157,.05); }
.buttonVal[data-filter="nal"]:hover { background: #d4f1e9; }
.buttonVal.active,.buttonClear.active { background: var(--navi-accent)!important; color:#fff!important; border-color:var(--navi-accent)!important; }
.navi-filter-mobile { display:none; }
.navi-filter-mobile.open { display:block; }
.navi-filter-toggle { background: var(--navi-accent); color: #fff; border: none; padding: 12px 20px; border-radius: 10px; font-weight: 700; font-size: 15px; display: flex; align-items: center; justify-content: center; gap: 10px; width: auto; box-shadow: 0 4px 10px rgba(24,183,157,0.2); transition: background .18s, transform .18s; }
.navi-filter-toggle:active { transform: scale(0.97); }
.navi-filter-toggle.active { background: var(--navi-dark); box-shadow: 0 4px 10px rgba(31,35,40,0.3); }
.navi-description-block { background: #fff; border-radius: 10px; padding: 28px 32px; border: 1px solid rgba(24,183,157,0.15); box-shadow: 0 4px 14px rgba(0,0,0,0.03); margin-bottom: 30px; font-family: var(--navi-font); }

@media (max-width:768px) {
  .catalog-wrapper { overflow-x: hidden; }
  
  .navi-flex-row:not(.navi-view-list) .navi-product-detail > .row { display: grid !important; grid-template-columns: 1fr; gap: 8px; margin: 0 !important; }
  .navi-flex-row:not(.navi-view-list) .navi-product-detail > .row > .col-lg-6 { width: 100% !important; max-width: 100% !important; padding: 0 !important; }
  
  .navi-flex-row:not(.navi-view-list) .navi-product-detail > .row > .col-lg-6:first-child { grid-row: 2; }
  
  .navi-flex-row:not(.navi-view-list) .navi-detail-info { display: contents !important; }
  .navi-flex-row:not(.navi-view-list) .navi-detail-info .navi-detail-manufacturer { grid-row: 1; margin-bottom: 4px !important; }
  .navi-flex-row:not(.navi-view-list) .navi-detail-info .navi-detail-model,
  .navi-flex-row:not(.navi-view-list) .navi-detail-info .navi-detail-model--full { grid-row: 1; }
  .navi-flex-row:not(.navi-view-list) .navi-detail-info .navi-detail-short { grid-row: 3; margin-top: 8px; }
  .navi-flex-row:not(.navi-view-list) .navi-detail-info .navi-detail-price { grid-row: 3; }
  .navi-flex-row:not(.navi-view-list) .navi-detail-info > .d-none.d-md-block { grid-row: 3; }
  /* === FOOTER для grid-режима — идентично list-режиму ===
     CSS Grid 2 колонки × 2 ряда
     Col 1 (1fr): цена (row 1, центр), наличие (row 2, центр)
     Col 2 (auto): [🛒❤⚖] (row 1, вправо), [Подробнее] (row 2, вправо) */
  .navi-flex-row:not(.navi-view-list) .navi-detail-footer {
      display: grid !important;
      grid-template-columns: 1fr auto !important;
      grid-template-rows: auto auto !important;
      align-items: center !important;
      column-gap: 12px !important;
      row-gap: 8px !important;
      margin: 0 !important;
      padding: 8px 0 0 0 !important;
      border-top: 1px solid var(--navi-border);
  }
  .navi-flex-row:not(.navi-view-list) .navi-detail-footer .navi-detail-actions {
      display: contents !important;
  }
  .navi-flex-row:not(.navi-view-list) .navi-detail-footer .navi-detail-status {
      display: contents !important;
  }
  .navi-flex-row:not(.navi-view-list) .navi-detail-footer .navi-detail-status .d-md-none {
      display: contents !important;
  }
  .navi-flex-row:not(.navi-view-list) .navi-detail-footer .navi-detail-buttons {
      display: contents !important;
  }
  /* Col 1: цена (row 1) — слева */
  .navi-flex-row:not(.navi-view-list) .navi-detail-footer .navi-mobile-price {
      grid-column: 1 !important;
      grid-row: 1 !important;
      justify-self: start !important;
      text-align: left !important;
      font-size: 16px !important;
      font-weight: 700 !important;
      color: var(--navi-dark) !important;
      white-space: nowrap !important;
      margin: 0 !important;
  }
  .navi-flex-row:not(.navi-view-list) .navi-detail-footer .navi-mobile-price strong {
      font-size: 18px !important;
      color: var(--navi-accent) !important;
  }
  /* Col 1: наличие (row 2) — слева */
  .navi-flex-row:not(.navi-view-list) .navi-detail-footer .stock-badge-wrapper {
      grid-column: 1 !important;
      grid-row: 2 !important;
      justify-self: start !important;
      width: auto !important;
  }
  .navi-flex-row:not(.navi-view-list) .navi-detail-footer .stock-badge-wrapper .stock-badge {
      min-width: 120px !important;
      width: 100% !important;
  }
  /* Col 2: обёртка кнопок-иконок (row 1) — width:100% от col 2, крупные */
  .navi-flex-row:not(.navi-view-list) .navi-detail-footer .navi-list-icon-row {
      grid-column: 2 !important;
      grid-row: 1 !important;
      display: flex !important;
      flex-direction: row;
      align-items: center;
      justify-content: flex-end;
      gap: 8px;
      width: 100% !important;
  }
  .navi-flex-row:not(.navi-view-list) .navi-detail-footer .navi-list-icon-row .navi-btn {
      min-width: 44px !important;
      min-height: 44px !important;
      font-size: 16px !important;
      padding: 8px !important;
      justify-content: center !important;
  }
  /* Col 2: Подробнее (row 2) — width:100% от col 2 */
  .navi-flex-row:not(.navi-view-list) .navi-detail-footer .navi-detail-buttons .navi-btn:not(.navi-btn-icon):not(.compare-toggle-btn):not(.favorite-toggle-btn) {
      grid-column: 2 !important;
      grid-row: 2 !important;
      justify-self: end !important;
      width: 100% !important;
      justify-content: center !important;
      min-height: 44px !important;
      font-size: 13px;
      padding: 7px 10px;
  }
  /* Общие для мобильных кнопок (grid и list) */
  .navi-detail-buttons .detail-text { display: inline; }
  .navi-mobile-price { font-size: 16px; font-weight: 700; color: var(--navi-dark); white-space: nowrap; }
  .navi-mobile-price strong { font-size: 18px; color: var(--navi-accent); margin-right: 0; }
  .navi-mobile-price small { font-size: 13px; color: var(--navi-dark); }
  .navi-filter-toggle { font-size:14px; padding:10px 16px; }
  .navi-description-block { padding:20px; }
  .navi-detail-image { position: relative; }
  .compare-img-btn-mobile { position: absolute; bottom: 10px; right: 10px; width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,0.9); border: 1px solid rgba(0,0,0,0.15); color: #666; display: flex; align-items: center; justify-content: center; font-size: 18px; cursor: pointer; transition: all 0.2s; z-index: 2; box-shadow: 0 2px 6px rgba(0,0,0,0.1); }
  .compare-img-btn-mobile.active { background: var(--navi-accent); color: #fff; border-color: var(--navi-accent); }
  .navi-icon-btn { position: relative; background: var(--navi-gray); border: 1px solid rgba(0,0,0,0.1); border-radius: 40px; padding: 8px 12px; font-size: 18px; color: var(--navi-dark); cursor: pointer; transition: all 0.2s; display: inline-flex; align-items: center; gap: 4px; }
  .navi-icon-btn .badge { background: var(--navi-accent); color: #fff; border-radius: 50%; padding: 2px 6px; font-size: 11px; font-weight: bold; margin-left: 4px; min-width: 18px; text-align: center; }
  .navi-icon-btn:hover { background: rgba(24,183,157,0.1); border-color: var(--navi-accent); color: var(--navi-accent); }
  .navi-detail-name { font-size: 18px; }
  .navi-detail-model { font-size: 15px; }
  .navi-detail-manufacturer { font-size: 14px; }
  .navi-detail-params li { font-size: 14px; }
  .navi-detail-text { font-size: 13px; line-height: 1.5; }
  .navi-detail-price { font-size: 16px; }
  .navi-detail-price strong { font-size: 20px; }
  .navi-mobile-price { font-size: 16px; }
  .navi-mobile-price strong { font-size: 20px; }
  .navi-btn { font-size: 14px; padding: 8px 18px; }
  .stock-badge { font-size: 14px; }
  .navi-detail-short-title { font-size: 15px; }
  
  .navi-detail-image .navi-title-badge {
    font-size: 12px !important;
    padding: 4px 9px !important;
    top: 6px !important;
    left: 6px !important;
    letter-spacing: 0.2px;
    line-height: 1.2;
    max-width: calc(100% - 12px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}



.compare-desktop-group {
    display: inline-flex;
    align-items: center;
    gap: 0;
    border: 1px solid rgba(0,0,0,0.1);
    border-radius: 8px;
    background: var(--navi-gray);
    overflow: hidden;
    margin-left: auto;
}
.compare-desktop-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    font-size: 13px;
    font-weight: 500;
    font-family: var(--navi-font);
    background: transparent;
    border: none;
    color: var(--navi-dark);
    cursor: pointer;
    transition: all 0.18s ease;
}
.compare-desktop-btn:first-child {
    border-right: 1px solid rgba(0,0,0,0.1);
}
.compare-desktop-btn .badge {
    background: var(--navi-accent);
    color: #fff;
    border-radius: 50%;
    padding: 2px 6px;
    font-size: 11px;
    font-weight: bold;
    margin-left: 2px;
}
.compare-desktop-btn .compare-label-text {
    font-size: 13px;
    font-weight: 500;
}
.compare-desktop-btn:hover {
    background: rgba(24,183,157,0.1);
    color: var(--navi-accent);
}
.compare-desktop-btn.compare-disabled {
    opacity: 0.5;
    cursor: default;
}
.navi-icon-btn.compare-disabled {
    opacity: 0.5;
    cursor: default;
}

.cart-control { display: inline-flex; align-items: center; }

.add-to-cart-btn { position: relative; }
.add-to-cart-btn .cart-qty-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    background: #ef4444;
    color: #fff;
    border-radius: 50%;
    min-width: 18px;
    height: 18px;
    font-size: 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    border: 2px solid #fff;
    line-height: 1;
}

/* .in-cart убран — кнопка корзины не меняет цвет */

.quantity-block { display: none !important; }
.cart-control .quantity-block { display: inline-flex; align-items: center; background: var(--navi-gray); border-radius: 8px; overflow: hidden; }
.cart-control .quantity-block .qty-btn { background: #e9ecef; border: none; padding: 6px 10px; font-size: 14px; font-weight: 600; color: var(--navi-dark); cursor: pointer; transition: background .18s; }
.cart-control .quantity-block .qty-btn:hover { background: #dee2e6; }
.cart-control .quantity-block .qty-input { width: 40px; text-align: center; border: none; background: #fff; font-size: 13px; font-weight: 600; padding: 6px 4px; -moz-appearance: textfield; }
.cart-control .quantity-block .qty-input::-webkit-outer-spin-button,
.cart-control .quantity-block .qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.stock-info-icon { display: none !important; }
.stock-badge-wrapper:hover .stock-info-icon { display: none !important; }
.stock-badge-wrapper { position: relative; display: inline-flex; padding: 2px; cursor: help; align-self: flex-start; flex-shrink: 0; width: 184px; }
.stock-badge-wrapper .stock-badge { min-width: 180px; justify-content: center; width: 100%; }
.stock-badge-wrapper .stock-badge::after { content: attr(data-tooltip); position: absolute; bottom: 120%; left: 50%; transform: translateX(-50%); background: var(--navi-dark); color: #fff; font-size: 12px; font-weight: 500; padding: 6px 10px; border-radius: 6px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 0.2s; z-index: 100; }
.stock-badge-wrapper:hover .stock-badge::after { opacity: 1; }

.compare-btn-wrap { text-align: left; margin-top: 6px; }
.compare-img-btn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: transparent; border: 2px solid rgba(0,0,0,0.1); color: #666; cursor: pointer; padding: 0; font-size: 16px; transition: all 0.2s; }
.compare-img-btn:hover { border-color: var(--navi-accent); color: var(--navi-accent); }
.compare-img-btn.active { background: var(--navi-accent); color: #fff; border-color: var(--navi-accent); }
.compare-img-btn.active i { color: #fff; }

.navi-detail-buttons .compare-toggle-btn.active {
    background: var(--navi-accent) !important;
    color: #fff !important;
    border-color: var(--navi-accent) !important;
}
.favorite-toggle-btn.active {
    background: #e25563 !important;
    color: #fff !important;
    border-color: #e25563 !important;
}

.favorite-toggle-btn:not(.active) { color: #5F6F75; }
.compare-toggle-btn:not(.active) { color: #5F6F75; }
.favorite-toggle-btn:not(.active):hover { color: #e25563; border-color: #e25563; background: rgba(226,85,99,.06); }

.compare-modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); z-index: 99999; display: flex; align-items: center; justify-content: center; }
.compare-modal { background: #fff; border-radius: 10px; width: 95%; max-width: 1400px; max-height: 85vh; overflow-y: auto; overflow-x: auto; box-shadow: 0 10px 40px rgba(0,0,0,0.2); }
.compare-modal-header { display: flex; justify-content: space-between; align-items: center; padding: 16px 24px; border-bottom: 1px solid var(--navi-border); }
.compare-modal-header h3 { margin: 0; font-size: 20px; }
.compare-modal-close { background: none; border: none; font-size: 28px; cursor: pointer; color: #666; }
.compare-modal-body { padding: 20px 24px; }
.compare-table { width: 100%; border-collapse: collapse; min-width: 600px; }
.compare-table th, .compare-table td { padding: 12px 16px; border: 1px solid var(--navi-border); text-align: center; font-size: 15px; vertical-align: middle; }
.compare-table th { background: var(--navi-gray); font-weight: 700; font-size: 15px; }
.compare-product-img { width: 80px; height: auto; max-height: 80px; object-fit: contain; margin-bottom: 8px; }
.compare-product-name { font-weight: 700; font-size: 14px; line-height: 1.3; }
.compare-table tr.diff-row { background-color: #fff5f5; }
.compare-table tbody tr:hover { background-color: rgba(24,183,157,0.05); }

@media (max-width: 768px) {
  .compare-modal { width: 98%; max-width: 98%; }
  .compare-modal-header h3 { font-size: 18px; }
  .compare-modal-body { padding: 12px; }
  .compare-table th, .compare-table td { padding: 8px 10px; font-size: 13px; }
  .compare-product-img { width: 60px; max-height: 60px; }
  .compare-product-name { font-size: 13px; }
  .compare-table { min-width: 500px; }
}
@media (max-width: 480px) {
  .compare-table { min-width: 400px; }
}
@media (min-width: 769px) { .compare-img-btn-mobile { display: none !important; } }

.stock-badge-wrapper.tooltip-active .stock-badge::after,
.tooltip-icon.tooltip-active::after {
    opacity: 1 !important;
    pointer-events: auto !important;
}

@media (max-width: 768px) {
    .stock-badge-wrapper .stock-badge::after,
    .tooltip-icon::after {
        left: 0 !important;
        transform: none !important;
        max-width: 240px;
        white-space: normal;
        text-align: left;
        bottom: 140%;
        font-size: 12px;
        padding: 8px 12px;
        line-height: 1.4;
    }
}

.navi-view-toggle {
    display: inline-flex;
    align-items: center;
    border: 1px solid #E3E8EB;
    border-radius: 8px;
    background: #fff;
    overflow: hidden;
    height: 36px;
    flex-shrink: 0;
}
.navi-view-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 100%;
    border: none;
    background: transparent;
    color: #5F6F75;
    cursor: pointer;
    font-size: 14px;
    transition: all .18s ease;
    padding: 0;
}
.navi-view-btn:not(:last-child) { border-right: 1px solid #E3E8EB; }
.navi-view-btn:hover { background: #EEFAF7; color: #30A495; }
.navi-view-btn.active {
    background: #30A495;
    color: #fff;
}
.navi-view-btn.active:hover { background: #18b79d; }
.navi-view-btn:focus-visible {
    outline: 2px solid #30A495;
    outline-offset: -2px;
}

.navi-flex-row.navi-view-list {
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}
.navi-flex-row.navi-view-list .navi-product-item {
    flex: 1 1 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    margin-bottom: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.navi-view-list .navi-product-detail {
    display: grid !important;
    grid-template-columns: 100px 1fr auto;
    grid-template-rows: auto auto auto;
    align-items: center;
    column-gap: 16px;
    row-gap: 3px;
    padding: 10px 16px;
}

.navi-view-list .navi-product-detail > .row {
    display: contents !important;
    margin: 0 !important;
}

.navi-view-list .navi-product-detail > .row > .col-lg-6 {
    flex: none !important;
    max-width: none !important;
    width: auto !important;
    padding: 0 !important;
}

.navi-view-list .navi-product-detail > .row > .col-lg-6:first-child {
    grid-column: 1;
    grid-row: 1 / 4;
}
.navi-view-list .navi-detail-image {
    margin-bottom: 0 !important;
    border: none;
    min-height: 80px !important;
    height: 80px;
}
.navi-view-list .navi-detail-image img {
    height: 80px !important;
    max-height: 80px !important;
    width: 100% !important;
    object-fit: contain !important;
}

.navi-title-badge--grid {
    
}
.navi-title-badge--list {
    display: none; 
}

.navi-view-list .navi-detail-image .navi-title-badge {
    display: none !important;
}
.navi-view-list .navi-title-badge--list {
    display: inline-block !important;
    position: static !important;
    font-size: 13px !important;
    padding: 3px 8px !important;
    margin-right: 8px;
    vertical-align: middle;
    box-shadow: none;
    flex-shrink: 0;
    white-space: nowrap;
}

.navi-view-list .navi-detail-name {
    display: flex !important;
    align-items: center;
    gap: 8px;
}
.navi-view-list .navi-detail-name > span:last-child {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.navi-view-list .navi-detail-name {
    grid-column: 2;
    grid-row: 1;
    font-size: 14px;
    margin: 0;
    padding: 0;
    border-bottom: none;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.navi-view-list .navi-detail-model--full {
    grid-column: 2;
    grid-row: 2;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 13px !important;
    line-height: 1.3;
    border-bottom: none;
    white-space: normal !important;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    max-height: 2.6em;
    align-self: start;
}

.navi-view-list .navi-detail-info {
    grid-column: 2;
    grid-row: 3;
    padding: 0 !important;
    min-width: 0;
    text-align: left;
    align-self: center;
}
.navi-view-list .navi-detail-short { display: none !important; }
.navi-view-list .navi-detail-model { font-size: 13px; margin-bottom: 2px; }
.navi-view-list .navi-detail-manufacturer { font-size: 13px; margin-bottom: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.navi-view-list .navi-detail-info .navi-detail-price { display: none; }

.navi-view-list .navi-detail-status .d-md-none { display: block !important; }

.navi-view-list .navi-detail-footer {
    grid-column: 3;
    grid-row: 1 / 4;
    margin: 0;
    padding: 0;
    border-top: none;
    display: grid !important;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: 16px;
    row-gap: 8px;
    justify-self: end;
}

.navi-view-list .navi-detail-footer .navi-detail-actions {
    display: contents !important;
}
.navi-view-list .navi-detail-footer .navi-detail-status {
    display: contents !important;
}
.navi-view-list .navi-detail-footer .navi-detail-status .d-md-none {
    display: contents !important;
}
.navi-view-list .navi-detail-footer .navi-detail-buttons {
    display: contents !important;
}

.navi-view-list .navi-detail-footer .navi-mobile-price {
    grid-column: 1;
    grid-row: 1;
    font-size: 16px;
    font-weight: 700;
    color: var(--navi-dark);
    white-space: nowrap;
    margin: 0;
    justify-self: center;
    text-align: center;
}
.navi-view-list .navi-detail-footer .navi-mobile-price strong {
    font-size: 18px;
    color: var(--navi-accent);
}
.navi-view-list .navi-detail-footer .navi-detail-price {
    grid-column: 1;
    grid-row: 1;
    font-size: 16px;
    font-weight: 700;
    color: var(--navi-dark);
    white-space: nowrap;
    margin: 0;
    justify-self: center;
    text-align: center;
}
.navi-view-list .navi-detail-footer .navi-detail-price strong {
    font-size: 18px;
    color: var(--navi-accent);
}
.navi-view-list .navi-detail-footer .stock-badge-wrapper {
    grid-column: 1;
    grid-row: 2;
    justify-self: center;
}

.navi-view-list .navi-detail-footer .navi-list-icon-row {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
}

.navi-view-list .navi-detail-footer .navi-detail-buttons .navi-btn:not(.navi-btn-icon):not(.compare-toggle-btn):not(.favorite-toggle-btn) {
    grid-column: 2;
    grid-row: 2;
    justify-self: end;
    width: 100%;
    justify-content: center;
}
.navi-view-list .navi-detail-footer .navi-btn {
    font-size: 13px;
    padding: 7px 10px;
}

@media (max-width: 768px) {
    .navi-view-list .navi-product-detail {
        display: block !important;
        padding: 10px 14px !important;
    }
    .navi-view-list .navi-product-detail > .row {
        display: flex !important;
        flex-direction: column !important;
        margin: 0 !important;
        gap: 8px;
    }
    .navi-view-list .navi-product-detail > .row > .col-lg-6 {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
    }
    /* Фото — после инфо (производитель над фото) */
    .navi-view-list .navi-product-detail > .row > .col-lg-6:first-child {
        order: 2;
    }
    .navi-view-list .navi-product-detail > .row > .navi-detail-info {
        order: 1;
    }
    /* Название — с переносом, не обрезается */
    .navi-view-list .navi-detail-name {
        display: flex !important;
        align-items: center;
        gap: 8px;
        font-size: 15px !important;
        margin: 0 0 4px 0 !important;
        padding: 0 !important;
        border: none !important;
        flex-wrap: wrap;
    }
    .navi-view-list .navi-detail-name > span:last-child {
        flex: 1 1 auto;
        min-width: 0;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
        word-break: break-word;
    }
    /* Модель — до 2 строк */
    .navi-view-list .navi-detail-model--full {
        margin: 0 0 4px 0 !important;
        padding: 0 !important;
        font-size: 13px !important;
        line-height: 1.3;
        white-space: normal !important;
        overflow: hidden;
        display: -webkit-box !important;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        max-height: 2.6em;
    }
    /* Производитель — над фото (просто блок, идёт перед .row в HTML) */
    .navi-view-list .navi-detail-info {
        display: block !important;
        text-align: left;
        margin: 0 0 8px 0 !important;
        padding: 0 !important;
    }
    .navi-view-list .navi-detail-info .navi-detail-manufacturer {
        font-size: 13px;
        margin-bottom: 0;
    }
    .navi-view-list .navi-detail-info .navi-detail-price { display: none !important; }
    .navi-view-list .navi-detail-info .navi-detail-short { display: none !important; }
    .navi-view-list .navi-detail-info .navi-detail-model { display: none !important; }
    .navi-view-list .navi-detail-info > .d-none,
    .navi-view-list .navi-detail-info > .d-none.d-md-block { display: none !important; }
    .navi-view-list .navi-detail-info hr { display: none !important; }
    /* Фото — компактное */
    .navi-view-list .navi-detail-image {
        position: relative !important;
        margin: 0 0 8px 0 !important;
        border: none !important;
        border-radius: 8px;
        min-height: 100px !important;
        height: 100px !important;
        display: flex !important;
        align-items: center;
        justify-content: center;
        overflow: hidden;
    }
    .navi-view-list .navi-detail-image img {
        width: auto !important;
        max-width: 100% !important;
        height: 100px !important;
        max-height: 100px !important;
        object-fit: contain !important;
    }
    /* Пилюля на фото скрыта (она в названии) */
    .navi-view-list .navi-detail-image .navi-title-badge {
        display: none !important;
    }
    /* FOOTER — 1в1 как в полном (десктопном) виде:
       CSS Grid 2 колонки × 2 ряда
       Col 1 (1fr): цена (row 1, центр), наличие (row 2, центр)
       Col 2 (auto): [🛒❤⚖] (row 1, вправо), [Подробнее] (row 2, вправо)
       Col 2 = auto → ширина по самому широкому элементу.
       Обе строки в col 2 — width:100% → одинаковая ширина. */
    .navi-view-list .navi-detail-footer {
        display: grid !important;
        grid-template-columns: 1fr auto !important;
        grid-template-rows: auto auto !important;
        align-items: center !important;
        column-gap: 12px !important;
        row-gap: 8px !important;
        margin: 0 !important;
        padding: 8px 0 0 0 !important;
        border-top: 1px solid var(--navi-border);
    }
    .navi-view-list .navi-detail-footer .navi-detail-actions {
        display: contents !important;
    }
    .navi-view-list .navi-detail-footer .navi-detail-status {
        display: contents !important;
    }
    .navi-view-list .navi-detail-footer .navi-detail-status .d-md-none {
        display: contents !important;
    }
    .navi-view-list .navi-detail-footer .navi-detail-buttons {
        display: contents !important;
    }
    /* Col 1: цена (row 1) — слева */
    .navi-view-list .navi-detail-footer .navi-mobile-price {
        grid-column: 1 !important;
        grid-row: 1 !important;
        justify-self: start !important;
        text-align: left !important;
        font-size: 16px !important;
        font-weight: 700 !important;
        color: var(--navi-dark) !important;
        white-space: nowrap !important;
        margin: 0 !important;
    }
    .navi-view-list .navi-detail-footer .navi-mobile-price strong {
        font-size: 18px !important;
        color: var(--navi-accent) !important;
    }
    /* Col 1: наличие (row 2) — слева */
    .navi-view-list .navi-detail-footer .stock-badge-wrapper {
        grid-column: 1 !important;
        grid-row: 2 !important;
        justify-self: start !important;
        width: auto !important;
    }
    .navi-view-list .navi-detail-footer .stock-badge-wrapper .stock-badge {
        min-width: 120px !important;
        width: 100% !important;
    }
    /* Col 2: обёртка 3 кнопок-иконок (row 1) — width:100% от col 2
       Кнопки крупнее для удобного нажатия пальцем */
    .navi-view-list .navi-detail-footer .navi-list-icon-row {
        grid-column: 2 !important;
        grid-row: 1 !important;
        display: flex !important;
        flex-direction: row;
        align-items: center;
        justify-content: flex-end;
        gap: 8px;
        width: 100% !important;
    }
    .navi-view-list .navi-detail-footer .navi-list-icon-row .navi-btn {
        min-width: 44px !important;
        min-height: 44px !important;
        font-size: 16px !important;
        padding: 8px !important;
        justify-content: center !important;
    }
    /* Col 2: Подробнее (row 2) — 1в1 как на десктопе + крупная */
    .navi-view-list .navi-detail-footer .navi-detail-buttons .navi-btn:not(.navi-btn-icon):not(.compare-toggle-btn):not(.favorite-toggle-btn) {
        grid-column: 2 !important;
        grid-row: 2 !important;
        justify-self: end !important;
        width: 100% !important;
        justify-content: center !important;
        min-height: 44px !important;
    }
    .navi-view-list .navi-detail-footer .navi-btn {
        font-size: 13px;
        padding: 7px 10px;
    }
}

.navi-view-list .compare-img-btn { width: 32px; height: 32px; font-size: 14px; }
.navi-view-list .compare-img-btn-mobile { width: 36px; height: 36px; font-size: 16px; }

@media (max-width: 768px) {
    .navi-sort-label { display: none !important; }
    .navi-per-page { display: none !important; }
    .navi-view-toggle { margin-left: 0 !important; }
    .navi-sort-bar {
        gap: 4px !important;
        padding: 10px 5% !important;
        justify-content: center !important;
    }
    .navi-view-btn { width: 44px; height: 44px; }
    
    .navi-sort-bar > label { padding: 0 8px !important; gap: 4px !important; }
    .navi-sort-bar select { padding: 0 22px 0 10px !important; }
    
    .navi-sort-bar > div > div[onclick^="luisToggleDropdown"] { padding: 0 10px !important; gap: 4px !important; }
}

/* === Корзина растягивается (как в search.tpl) — для выравнивания с "Подробнее" === */
.navi-detail-footer .navi-list-icon-row .cart-control { flex: 1 1 0; min-width: 0; display: flex; }
.navi-detail-footer .navi-list-icon-row .cart-control .add-to-cart-btn { width: 100%; flex: 1 1 0; min-width: 0; justify-content: center; }
.navi-detail-footer .navi-list-icon-row .favorite-toggle-btn,
.navi-detail-footer .navi-list-icon-row .compare-toggle-btn { flex: 0 0 auto; }

/* === БЛОК СОРТИРОВКИ (как в search.tpl) === */
.navi-sort-bar {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: nowrap;
    padding: 10px 16px;
    background: #fff;
    border: 1px solid #E3E8EB;
    border-radius: 10px;
    margin-bottom: 20px;
    box-sizing: border-box;
}
.navi-sort-item {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 36px;
    font-size: 13px;
    font-weight: 500;
    color: #5F6F75;
    white-space: nowrap;
    flex-shrink: 0;
}
.navi-sort-item span {
    font-size: 13px;
    font-weight: 500;
    color: #5F6F75;
}
.navi-sort-check {
    width: 16px;
    height: 16px;
    accent-color: #30A495;
    cursor: pointer;
    margin: 0;
    flex-shrink: 0;
}
.navi-sort-item--dropdown {
    position: relative;
    margin: 0 auto;
}
.navi-sort-item--perpage {
    position: relative;
    flex-shrink: 0;
}
.navi-sort-trigger {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 14px;
    border: 1px solid #E3E8EB;
    border-radius: 8px;
    background: #fff;
    color: #37474F;
    cursor: pointer;
    box-sizing: border-box;
    transition: border-color .15s ease;
}
.navi-sort-trigger:hover { border-color: #30A495; color: #30A495; }
.navi-sort-trigger i { font-size: 12px; color: #5F6F75; }
.navi-sort-menu {
    display: none;
    position: absolute;
    top: 40px;
    left: 0;
    min-width: 200px;
    background: #fff;
    border: 1px solid #E3E8EB;
    border-radius: 8px;
    box-shadow: 0 4px 14px rgba(0,0,0,.08);
    z-index: 1000;
    padding: 4px;
}
.navi-sort-menu.open {
    display: block;
}
.navi-sort-menu > div {
    padding: 8px 12px;
    font-size: 13px;
    color: #37474F;
    cursor: pointer;
    border-radius: 6px;
    white-space: nowrap;
    transition: background .15s ease, color .15s ease;
}
.navi-sort-menu > div:hover { background: #EEFAF7; color: #30A495; }
.navi-sort-item--view {
    margin-left: auto;
    gap: 6px;
}
.navi-view-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    color: #5F6F75;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    transition: background .15s ease, color .15s ease;
}
.navi-view-btn:hover { background: #EEFAF7; color: #30A495; }
.navi-view-btn.active { background: #30A495; color: #fff; }
@media (max-width: 1023px) {
    .navi-sort-item--dropdown > span:first-child,
    .navi-sort-item--perpage > span:first-child,
    .navi-sort-item--view > span:first-child { display: none; }
}