:root {
    --kc-black: #111;
    --kc-gray: #e2e2e2;
    --kc-light: #f7f7f7;
    --kc-green: #cecece;
}



/* ====== Layout ====== */

.catalog-page {
    padding: 20px 0;
}

.catalog-layout {
    display: grid;
    grid-template-columns: minmax(0, 250px) minmax(0, 1fr);
    gap: 24px;
}

.catalog-layout > * {
    min-width: 0;
}

.catalog-main {
    min-width: 0; /* 🔥 ОБЯЗАТЕЛЬНО */
}

@media (max-width: 900px) {
    .catalog-layout {
        grid-template-columns: 1fr;
    }

    .catalog-sidebar {
        width: 100%;
        max-width: 100%;
    }
}

/* ====== Breadcrumbs ====== */

.breadcrumbs {
    font-size: 14px;
    margin-bottom: 16px;
    color: #666;
}

.breadcrumbs a {
    color: var(--kc-black);
    text-decoration: none;
    font-weight: 500;
}

.breadcrumbs a:hover {
    text-decoration: underline;
}

/* ====== Sidebar ====== */

.catalog-sidebar {
    border: 1px solid var(--kc-gray);
    border-radius: 12px;
    padding: 16px 18px;
    background: var(--kc-light);
}

.catalog-sidebar h4 {
    margin: 0 0 10px;
    font-size: 18px;
    font-weight: 700;
}

.category-tree {
    list-style: none;
    margin: 0;
    padding: 0;
}

.category-item {
    margin-bottom: 4px;
}

.cat-link,
.category-tree a {
    display: block;
    padding: 6px 8px;
    border-radius: 6px;
    color: var(--kc-black);
    text-decoration: none;
    font-size: 14px;
    transition: 0.15s;
}

.cat-link {
    font-weight: 600;
}

.cat-link:hover,
.category-tree a:hover {
    background: #ddd;
}

.cat-link.active {
    background: var(--kc-green);
    color: #000;
}

.subcategory-tree {
    list-style: none;
    margin: 4px 0 6px 10px;
    padding: 0;
}

.sub-link {
    font-size: 13px;
    padding: 4px 8px;
    border-radius: 5px;
}

.sub-link.active {
    background: var(--kc-green);
}

/* ====== Filters ====== */

.catalog-main {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.filters-form {
    border: 1px solid var(--kc-gray);
    border-radius: 10px;
    padding: 8px 10px;
    background: #fff;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.filters-row-main .row {
    align-items: center;   /* FIX */
}

.filters-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}

.filters-row-main .col-6,
.filters-row-main .col-12,
.filters-row-main .col-xl-auto,
.filters-row-main .col-xl-2,
.filters-row-main .col-xl-3 {
    display: flex;         /* FIX */
    align-items: center;   /* FIX */
}

/* FIX: grid не тянет элементы вверх */
.filters-row-main {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 150px) minmax(0, 110px) minmax(0, 110px);
    max-width: 100%;
}

.product-detail-page .variants-table {
    min-width: 600px;
}

/* ❌ УБРАНО:
.filters-row-main > * {
    height: 36px;
    display: flex;
    align-items: center;
}
*/

@media (max-width: 800px) {
    .filters-row-main {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 600px) {
    .filters-row-main {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 520px) {
    .filters-row-main {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .filters-form {
        padding: 8px;
    }

    .filters-row,
    .filters-row-main {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }
}

/* FIX: центрируем содержимое */
.search-wrapper {
    position: relative;
    width: 100%;
    display: flex;          /* FIX */
    align-items: center;    /* FIX */
}

.search-autocomplete {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 6px;
    z-index: 200;
    display: none;
    max-height: 260px;
    overflow-y: auto;
}

.search-autocomplete .ac-item {
    padding: 6px 10px;
    cursor: pointer;
    font-size: 14px;
}

.search-autocomplete .ac-item:hover {
    background: #f0f0f0;
}

/* FIX: нормализуем line-height bootstrap */
.filters-input,
.form-select {
    border: 1px solid #ccc;
    border-radius: 6px;
    padding: 6px 30px 6px 9px;       /* FIX (было 7px) */
    font-size: 12px;
    width: 100%;
    line-height: 1.25;      /* FIX */
}

.price-input {
    max-width: 120px;
}

/* Нижняя строка – чипсы */
.filters-row-chips {
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.filter-group {
    flex: 1 1 0;
    min-width: 160px;
    font-size: 13px;
}

@media (max-width: 500px) {
    .filter-group {
        min-width: 0;
    }
}

.filter-title {
    display: block;
    font-weight: 600;
    margin-bottom: 0px;
}

.filter-chips-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.filter-chip {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 16px;
    border: 1px solid #bdbdbd;
    cursor: pointer;
    font-size: 12px;
    background: #f8f8f8;
    transition: all 0.15s ease;
}

.filter-chip input[type="checkbox"] {
    display: none;
}

.filter-chip:hover {
    border-color: #888;
}

.filter-chip.active {
    border-color: #444;
    background: var(--kc-green);
    color: #000;
}

/* Buttons */

.filter-actions {
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: flex-start;
    min-width: 120px;
}

@media (max-width: 500px) {
    .filter-actions {
        min-width: 0;
        width: 100%;
    }
}

/* Apply — без увеличения */
.btn-apply {
    height: 34px;
    padding: 0 0x;
    font-size: 13px;
    line-height: 1;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-apply:hover {
    opacity: .9;
}

/* FIX: reset по центру */
.reset-link {
    font-size: 12px;
    color: #777;
    text-decoration: underline;
    display: inline-flex;   /* FIX */
    align-items: center;    /* FIX */
    line-height: 1;         /* FIX */
}

/* ====== Products grid ====== */

.products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
    max-width: 100%;
}

.product-card {
    border: 1px solid var(--kc-gray);
    border-radius: 12px;
    padding: 10px;
    background: #fff;
    display: flex;
    flex-direction: column;
    gap: 6px;
    position: relative;
    transition: 0.15s ease;
}

.product-card:hover {
    border-color: var(--kc-green);
    box-shadow: 0 0 10px rgba(0, 0, 0, .04);
}

.product-card img {
    width: 100%;
    height: 230px;
    object-fit: contain;
}

/* badges */

.product-badges {
    position: absolute;
    top: 8px;
    left: 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.badge {
    font-size: 12px;
    padding: 4px 10px;
    border-radius: 999px;
    font-weight: 600;
}

.badge-new { background: #ee0336; }
.badge-bestseller { background: #e403c6; }
.badge-discount { background: #c50303; color: #fff; }

.product-card h4 {
    font-size: 14px;
    margin: 4px 0;
}

.product-card h4 a {
    color: var(--kc-black);
    text-decoration: none;
}

.product-price {
    font-weight: 600;
    font-size: 14px;
}

.old-price {
    text-decoration: line-through;
    color: #888;
    margin-right: 6px;
}

.new-price {
    color: #c62828;
}

.regular-price {
    color: var(--kc-black);
}

/* Favorite / Compare badges */

.product-actions {
    display: flex;
    justify-content: space-between;
    gap: 6px;
    margin-top: 8px;
}

.btn-icon {
    border: 1px solid #ddd;
    border-radius: 999px;
    padding: 4px 10px;
    font-size: 12px;
    cursor: pointer;
    background: #fafafa;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.btn-icon.is-active {
    border-color: #ffb300;
    background: #fff7e0;
    color: #b26a00;
}

/* Pagination */

.pagination {
    margin-top: 16px;
    display: flex;
    gap: 8px;
    align-items: center;
    font-size: 14px;
}

.pagination a {
    padding: 4px 8px;
    border-radius: 4px;
    border: 1px solid #ddd;
    text-decoration: none;
    color: #333;
}

.pagination a:hover {
    background: #f0f0f0;
}

/* Product detail */

.product-detail-page {
    padding: 20px 0;
}

.table-responsive {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}


.variants-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 12px;
}

.variants-table th,
.variants-table td {
    font-size: 14px;
    border: 1px solid #eee;
    padding: 6px 8px;
}

.product-detail-wrapper {
    display: grid;
    grid-template-columns: 420px 1fr;
    gap: 40px;
    align-items: flex-start;
    margin-top: 20px;
}

.main-product-image {
    width: 100%;
    height: auto;
    max-height: 450px;
    object-fit: contain;
    border-radius: 10px;
    background: #fff;
    padding: 10px;
    border: 1px solid #eee;
}

.product-gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 12px;
}

.gallery-thumb {
    width: 80px;
    height: 80px;
    object-fit: contain;
    border-radius: 8px;
    background: #fff;
    border: 2px solid #ddd;
    padding: 5px;
    cursor: pointer;
    transition: 0.15s ease-in-out;
}

.gallery-thumb:hover {
    border-color: var(--kc-green);
}

.gallery-thumb.active-thumb {
    border-color: var(--kc-green);
    box-shadow: 0 0 6px rgba(0,0,0,0.15);
}

.product-info {
    min-width: 0;
}

/* right side */
.product-info h1 {
    margin-top: 0;
    margin-bottom: 15px;
    font-size: 32px;
    font-weight: 700;
}

.product-description {
    max-width: 100%;
    overflow-x: hidden;
}

.product-description img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* badges */
.product-image {
    position: relative;
}

.product-badges {
    position: absolute;
    top: 12px;
    left: 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.reset-link.btn-link {
    padding: 0;              /* FIX */
}





/* MOBILE */
@media (max-width: 900px) {
    .product-detail-wrapper {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .main-product-image {
        max-height: 350px;
    }

    .gallery-thumb {
        width: 60px;
        height: 60px;
    }
}

@media (max-width: 900px) {
    .product-detail {
        grid-template-columns: 1fr;
    }
}

/* ===============================
   MOBILE / TABLET COMPACT GRID
   800px → 401px
   =============================== */

@media (max-width: 800px) {

  .products-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }

  .product-card {
    padding: 8px !important;
    gap: 6px !important;
  }

  .product-card img {
    height: 120px !important;
  }

  .product-card h4 {
    font-size: 13px !important;
    line-height: 1.2 !important;

    /* ⛔ БЕЗ -webkit-line-clamp */
    max-height: calc(2 * 1.2em);   /* 2 строки */
    overflow: hidden;
  }

  .product-price {
    font-size: 13px !important;
  }

  .product-actions {
    display: none !important;
  }
}

@media (max-width: 600px) {
    .products-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px;
    }
}

/* ===============================
   SMALL PHONES
   ≤ 400px
   =============================== */

@media (max-width: 400px) {

  .product-card {
    padding: 6px !important;
    gap: 4px !important;
  }

  .product-card img {
    height: 90px !important;
  }

  .product-card h4 {
    font-size: 12px !important;
    line-height: 1.15 !important;

    max-height: calc(2 * 1.15em);
    overflow: hidden;
  }

  .product-price {
    font-size: 12px !important;
  }

  .badge {
    font-size: 9px !important;
    padding: 2px 6px !important;
  }
}


/* ======================================
   PRODUCT DETAIL – RESPONSIVE FIX
   PROBLEM RANGE: 800px – 1300px
   ====================================== */

/* LARGE SCREENS – OK */
@media (min-width: 1301px) {
    .product-detail-wrapper {
        grid-template-columns: 420px 1fr;
    }
}

/* LAPTOPS / TABLETS */
@media (max-width: 1300px) and (min-width: 901px) {
    .product-detail-wrapper {
        grid-template-columns: minmax(320px, 38%) 1fr;
        gap: 24px;
    }
}

/* TABLET */
@media (max-width: 900px) {
    .product-detail-wrapper {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}