.cp-search-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
    gap: var(--space-m);

}
.cp-search-tabs {
    display: flex;
    align-items: center;
    gap: var(--space-s);
    /* width: 100%; */
   
}

.cp-status-container {
    display: flex;
    flex-direction: column;
    gap: var(--space-m);
}

.cp-search-tabs.grid-2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr)); 
    align-items: center;
}
.cp-search-tabs.grid-3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)); 
    align-items: center;
}
.cp-search-tabs.grid-auto {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    grid-template-columns: repeat(auto-fill, minmax(max-content, 1fr));
}
.cp-search-tabs.grid-auto > * {
    flex: 1 1 auto; /* Растягивает элементы на максимум ширины строки */
    text-align: center; /* Центрирует текст внутри растянутых элементов */
}


.desktop-only { display: none;}

.cp-status-label { display: none !important;}
.cp-mobile-status-slot {margin: var(--space-m) 0;}
.cp-products-mobile {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr)); 
    align-items: center;
}
.cp-products-desktop { display: none; }

.cp-search-tabs span {
    /* width: 100%; */
    min-width: 100px;}
.cp-btn-main {    
    background-color: var(--silver-dark);
    transition: all 0.2s ease-in-out;
    user-select: none;
}
.cp-btn-checkbox { display: none;}

.copper-group .cp-btn-checkbox:checked + .cp-btn-main {
    background-color: var(--copper-dark);
}
.gold-group .cp-btn-checkbox:checked +  .cp-btn-main {
    background-color: var(--gold-dark);
}
.red-group .cp-btn-checkbox:checked +  .cp-btn-main {
    background-color: var(--red-dark);
}
.green-group .cp-btn-checkbox:checked +  .cp-btn-main {
    background-color: var(--green-light);
}


.cp-btn-main,  .cp-table-controller input, .cp-search-tabs span {
    padding: var(--space-xs) var(--space-s);
    border-radius: var(--space-s);
    height: 1lh;
    box-sizing: content-box;
    /* width: auto; */
}
.cp-btn-main-thin {
    height: 1lh !important;
}

.pg-label {
    height: 50px;
    border-radius: var(--space-s);
    font-weight: 600;
    padding: 0 var(--space-s);
}
.cp-btn-main, .pg-label, .cp-search-tabs span {
    border: 2px solid var(--silver-base);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.cp-table-controller input{
    min-width: 100px;
    /* width: 100%; */
    border: 2px solid var(--silver-base);
    outline: none;
    transition: border-color 0.2s ease background 0.2s ease;
    background: var(--silk);

}
.cp-table-controller input:hover {
    border-color: var(--gold-base);
  }
.cp-table-controller input:focus {
    border-color: var(--red-intense);
    background: var(--creme);
  }


.cp-grid {
    display: grid;  
    gap: var(--space-s); 
    /* margin: var(--space-m) 0; */
    align-items: stretch;
}
.cp-grid--table-categories { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));}
.cp-grid--column-selector { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cp-modal-controller { grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; }


.cp-btn-main, .cp-table-controller input, .cp-table-controller label, .pg-label, .cp-search-tabs span {
    font-size: var(--fs-lg);
    line-height: var(--lh-tight);
    font-family: var(--wp--preset--font-family--montserrat);
}



input::placeholder {
    color: var(--copper-base);
    font-style: italic;
    opacity: 0.7;
}

input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type="number"] { -moz-appearance: textfield; }


/* TABLE */
.сp-table {
    overflow-x: auto;
    width: 100%;
    display: flex;
    
    line-height: var(--lh-tight);
    font-family: var(--wp--preset--font-family--montserrat);
}
.wp-pagination-bar {  
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--space-m);
    margin: var(--space-m) 0;
}
.wp-data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--fs-md);
    text-align: left;
    height: auto;
    

}
.wp-data-table th {
    width: 100%;
    background: var(--copper-dark);
    color: var(--silver-light);
    padding: var(--space-m) var(--space-s);
    font-weight: 600;
    font-size: var(--fs-md);
    border-bottom: 2px solid var(--silver-base);
    border-top: 2px solid var(--silver-base);
    
    text-align: start;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    transition: background 0.1s ease;
}
.wp-data-table .col-name { cursor: pointer;}

.wp-data-table th:hover {
    background: var(--copper-base);
}

.wp-data-table td {
    padding: var(--space-m);    
    border-bottom: 1px solid var(--silver-base);
    vertical-align: middle;
}
.wp-data-table tr:nth-child(odd) {
    background: rgba(20, 20, 20, 0.6);
  }
  
.wp-data-table tr:nth-child(even) {
    background: rgba(57, 56, 56, 0.6);
}

.wp-data-table tr:hover {
    background: var(--silver-dark-deep);
}


.badge {
    display: inline-block;
    background: var(--gold-dark);
    text-align: center;
    padding: var(--space-xs);
    border-radius: var(--space-s);
    font-size: var(--fs-sm);
    font-weight: 500;
    margin: 2px;
    border: 1px solid #ccd0d4;
}
.badge--type { background: var(--copper-dark);}
.badge--function { background: var(--gold-dark);}
.badge--collection { background: var(--red-dark);}

.badge.none {
    background: var(--copper-dark);
    
}
.badge.type {
    background: red;
}


.full-price {
    text-decoration: line-through;
    color: var(--silver-base);
}
.catalog-price, .catalog-new-price {
    color: var(--copper-light);
}
.catalog-status { color: var(--gold-base);}

.client-price { 
    color: var(--red-intense);
    font-weight: 600;
}
.client-beauty { 
    color: var(--gold-base);
}

.status-filter-btn {
    min-width: 50px;
    /* max-width: 100px; */
    width: auto

}
.status-filter-btn.active, .location-filter-btn.active, .stock-filter-btn.active {
    background-color: var(--green-light);  
}


.wp-data-table.hide-sku .col-sku { display: none; }
.wp-data-table.hide-name .col-name { display: none; }
.wp-data-table.hide-categories .col-categories { display: none; }
.wp-data-table.hide-page .col-page { display: none; }
.wp-data-table.hide-discount .col-discount { display: none; }
.wp-data-table.hide-points .col-points { display: none; }
.wp-data-table.hide-price .col-price { display: none; }
.wp-data-table.hide-full .col-full { display: none; }
.wp-data-table.hide-client .col-client { display: none; }
.wp-data-table.hide-beauty .col-beauty { display: none; }
.wp-data-table.hide-new-price .col-new-price { display: none; }
.wp-data-table.hide-stock .col-stock { display: none; }


   @media (max-width: 768px) {
    .wp-data-table thead {
        display: none;
    }
    /* Превращаем таблицу и tbody в контейнеры для карточек */
    .wp-data-table, 
    .wp-data-table tbody {
        /* display: block; */
        width: 100% !important;

        display: flex;
        flex-direction: column;
        gap: 15px;
    }
    /* Сама карточка товара */
    .wp-data-table tr {
        display: grid;
        grid-template-columns: repeat(2, 1fr); 
        gap: var(--space-s);
        border: 2px solid var(--silver-base);
        border-radius: var(--space-s);
        margin-bottom: var(--space-m);
        padding: var(--space-s);
        position: relative;
    }

    /* Сбрасываем стандартные стили ячеек таблицы */
    .wp-data-table td {
        display: block;
        padding: 0 !important;
        border: none !important;
        font-size: var(--fs-lg); 
        line-height: var(--lh-tight);
        font-weight: 600;

    }

    .wp-data-table .col-sku::before { content: "Код: "; color: var(--silver-light); }
    .wp-data-table .col-sku {
        grid-column: 1;     
        display: inline-block;
        color: var(--gold-base);
    }

    .wp-data-table .col-page::before { content: "Стр: "; color: var(--silver-light); }
    .wp-data-table .col-page {
        grid-column: 2;
        grid-row: 1; 
        text-align: right;   
        display: inline-block;
        color: var(--silver-light);
        
    }


    .wp-data-table .col-name {
        grid-column: 1 / -1; 
        font-weight: 600;
        margin: var(--space-xs) 0;
        word-break: break-word;
    }

    .wp-data-table .col-categories {
        grid-column: 1 / -1;
        margin-bottom: var(--space-s);
    }
    .wp-data-table .badge {
        margin: var(--space-xs);
    }

    .wp-data-table .col-discount::before { content: "Скидка: "; color: var(--silver-light); }
    .wp-data-table .col-points { 
        grid-column: 1; 
        grid-row: 4; 
        text-align: left;
    }
    .wp-data-table .col-points::before { content: "Баллы бонуса: "; color: var(--silver-light); }
    .wp-data-table .col-points { 
        grid-column: 2; 
        grid-row: 4; 
        text-align: right;
    }

    .wp-data-table .col-full::before { content: "Полная цена: "; color: var(--silver-base)  }
    .wp-data-table .col-full { 
        grid-column: 1;
        grid-row: 5;
        text-align: left;
    }



    .wp-data-table .col-price::before { content: "В каталоге: "; color: var(--copper-light)}
    .wp-data-table .col-price { 
        grid-column: 2; 
        text-align: right;
        /* grid-row: 5; */
    }
    .wp-data-table-comparison .col-price::before { content: "В текущем: "; }
    .wp-data-table-comparison .col-price {
        grid-column: 1;
        text-align: left;
    }

    .wp-data-table .col-beauty::before { content: "Для Бьюти: "; color: var(--gold-base); }
    .wp-data-table .col-beauty { 
        grid-column: 1;
        grid-row: 6;
        text-align: left;
    }
    .wp-data-table .col-client::before { content: "Для Бизнес: "; color: var(--red-intense) }
    .wp-data-table .col-client { 
        grid-column: 2; 
        grid-row: 6;
        text-align: right;
    }

    .wp-data-table .col-status::before { content: "Статус продукта: ";}
    .wp-data-table .col-status { 
        grid-row: 4;
        grid-column: span 2;
        text-align: center;
    }

    .wp-data-table .col-new-price::before { content: "В новом: "; color: var(--copper-light);}
    .wp-data-table .col-new-price { 
        grid-column: 2; 
        grid-row: 3;
        text-align: right;
        color: red;
    }
    
}

.data-stock-updated { width: auto;}

.cp-modal-main {
    padding: var(--space-m);
    position: relative;
    border-bottom: 2px solid var(--silver-base);
    border-top: 2px solid var(--silver-base);
    width: 100%;
    gap: var(--space-l);
}

.cp-modal-categories-base {
    background: var(--green-dark);
    border-color: var(--silver-base);
}
.categories-clear-btn {
    /* background-color: var(--red-dark); */
}