.smart-catalog-filter {
    position: relative;
    z-index: 12;
    margin: 22px 0 16px;
    border: 1px solid rgba(112, 72, 31, .14);
    border-radius: 22px;
    background: rgba(255, 253, 248, .97);
    box-shadow: 0 14px 40px rgba(61, 36, 22, .08);
}

.smart-filter-main {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) auto auto;
    align-items: stretch;
    gap: 10px;
    padding: 12px;
}

.smart-search-field {
    position: relative;
    display: flex;
    align-items: center;
    min-width: 0;
    border: 1px solid #e8ddca;
    border-radius: 14px;
    background: #fff;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.smart-search-field:focus-within {
    border-color: #c69337;
    box-shadow: 0 0 0 4px rgba(198, 147, 55, .12);
}

.smart-search-field > span {
    width: 48px;
    color: #9d6b21;
    font-size: 25px;
    text-align: center;
}

.smart-search-field input {
    width: 100%;
    height: 52px;
    border: 0;
    outline: 0;
    background: transparent;
    color: #342118;
    font: inherit;
}

.smart-filter-submit,
.smart-filter-toggle,
.smart-filter-actions button {
    min-height: 52px;
    border: 0;
    border-radius: 14px;
    padding: 0 22px;
    font: inherit;
    font-weight: 800;
    cursor: pointer;
}

.smart-filter-submit,
.smart-filter-actions button {
    color: #fff;
    background: linear-gradient(135deg, #4b2a19, #744526);
    box-shadow: 0 9px 22px rgba(76, 42, 25, .18);
}

.smart-filter-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #654523;
    background: #f5ead6;
}

.smart-filter-toggle.active {
    color: #6f430e;
    background: #f2d999;
}

.smart-filter-toggle b {
    border-radius: 20px;
    padding: 3px 7px;
    color: #fff;
    background: #96661f;
    font-size: 10px;
}

.smart-filter-options {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 15px;
    padding: 18px;
    border-top: 1px solid #eee3d2;
    background: linear-gradient(180deg, rgba(249, 244, 233, .7), rgba(255, 255, 255, .92));
    border-radius: 0 0 22px 22px;
}

.smart-filter-options[hidden] { display: none; }

.smart-filter-options .field {
    display: grid;
    gap: 7px;
}

.smart-filter-options .field label {
    color: #5c3b26;
    font-size: 13px;
    font-weight: 800;
}

.smart-filter-options .input {
    width: 100%;
    height: 48px;
    border: 1px solid #e5d9c5;
    border-radius: 12px;
    padding: 0 13px;
    color: #342118;
    background: #fff;
    font: inherit;
    outline: 0;
}

.smart-filter-options .input:focus {
    border-color: #c69337;
    box-shadow: 0 0 0 3px rgba(198, 147, 55, .11);
}

.offer-filter-check {
    display: flex;
    align-items: center;
    gap: 11px;
    min-height: 48px;
    align-self: end;
    border: 1px solid #ead9b4;
    border-radius: 12px;
    padding: 7px 12px;
    background: #fff9ea;
    cursor: pointer;
}

.offer-filter-check input { accent-color: #8c5b17; }
.offer-filter-check > span { color: #a76a14; font-size: 23px; font-weight: 900; }
.offer-filter-check div { display: grid; }
.offer-filter-check strong { color: #4a2d1d; font-size: 13px; }
.offer-filter-check small { color: #8b786c; font-size: 10px; }

.smart-filter-actions {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    padding-top: 4px;
}

.smart-filter-actions a {
    padding: 12px 16px;
    color: #7a6252;
    font-weight: 700;
}

.smart-filter-actions button { min-height: 46px; }

.search-suggestions {
    position: absolute;
    top: calc(100% + 9px);
    right: 0;
    left: 0;
    z-index: 90;
    overflow: hidden;
    border: 1px solid #eadfcf;
    border-radius: 17px;
    padding: 7px;
    background: rgba(255, 255, 255, .99);
    box-shadow: 0 22px 55px rgba(46, 27, 17, .18);
}

.search-suggestions[hidden] { display: none; }

.search-suggestion-item {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) auto;
    align-items: center;
    gap: 11px;
    min-height: 64px;
    border-radius: 12px;
    padding: 6px;
    color: #352218;
    text-decoration: none;
}

.search-suggestion-item:hover,
.search-suggestion-item.active {
    color: #352218;
    background: #faf1df;
}

.search-suggestion-item img {
    width: 52px;
    height: 52px;
    border-radius: 11px;
    object-fit: cover;
    background: #f4eee4;
}

.search-suggestion-item > span { display: grid; gap: 2px; min-width: 0; }
.search-suggestion-item small { color: #9a826f; font-size: 10px; }
.search-suggestion-item strong { overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.search-suggestion-item > b { color: #936018; font-size: 12px; white-space: nowrap; }

.search-suggestion-message {
    padding: 17px 14px;
    color: #806d60;
    font-size: 13px;
    text-align: center;
}

.search-suggestion-message.loading { color: #8c5b17; }
.search-suggestion-message.error { color: #9b432f; }

.header-product-search { position: relative; }
.header-suggestions { right: auto; left: 0; width: min(410px, 88vw); }

@media (max-width: 900px) {
    .smart-filter-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
    .smart-catalog-filter { margin: 15px 0; border-radius: 18px; }
    .smart-filter-main { grid-template-columns: 1fr auto; gap: 8px; padding: 9px; }
    .smart-search-field { grid-column: 1 / -1; }
    .smart-filter-submit, .smart-filter-toggle { min-height: 46px; padding: 0 15px; }
    .smart-filter-toggle { justify-self: stretch; }
    .smart-filter-options { grid-template-columns: 1fr; gap: 12px; padding: 14px 10px; }
    .smart-filter-actions { position: sticky; bottom: 70px; z-index: 2; justify-content: space-between; border-radius: 14px; padding: 8px; background: rgba(255, 255, 255, .96); box-shadow: 0 8px 25px rgba(64, 38, 21, .11); }
    .smart-filter-actions button { flex: 1; }
    .search-suggestion-item { grid-template-columns: 47px minmax(0, 1fr); }
    .search-suggestion-item img { width: 47px; height: 47px; }
    .search-suggestion-item > b { grid-column: 2; }
    .header-suggestions { position: fixed; top: 76px; right: 12px; left: 12px; width: auto; }
}