/* =====================================================================
   CS-NN — UI: логотип, иконки, кнопки, поиск (все варианты главной)
   Иконки — data-URI (работают и на file://)
   ===================================================================== */

body#main {
    --hv-on-accent: #ffffff;
    --hv-icon: var(--hv-ink, #14120F);
    --hv-ic-grid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='3' width='7' height='7' rx='1.5' fill='%23000'/%3E%3Crect x='14' y='3' width='7' height='7' rx='1.5' fill='%23000'/%3E%3Crect x='3' y='14' width='7' height='7' rx='1.5' fill='%23000'/%3E%3Crect x='14' y='14' width='7' height='7' rx='1.5' fill='%23000'/%3E%3C/svg%3E");
    --hv-ic-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5' stroke='%23000' stroke-width='2.2'/%3E%3Cpath d='M15.5 15.5L21 21' stroke='%23000' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E");
    --hv-ic-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6 6l12 12M18 6L6 18' stroke='%23000' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E");
    --hv-ic-phone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 3h2.8l1.1 4.6-2 1.1a12 12 0 005.5 5.5l1.1-2L20 13.2V16a2 2 0 01-2.2 2C10.2 18 6 13.8 6 7.2 6 5 7 3 7 3z' fill='%23000'/%3E%3C/svg%3E");
    --hv-ic-heart: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M12 20.5S5 15.4 3.2 10.6C1.6 6.5 4.2 3.5 7.8 3.5c2 0 3.7 1 4.7 2.5 1-1.5 2.7-2.5 4.7-2.5 3.6 0 6.2 3 4.6 7.1-1.8 4.8-9.1 9.9-9.1 9.9z' stroke='%23000' stroke-width='1.8'/%3E%3C/svg%3E");
    --hv-ic-heart-full: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 20.5S5 15.4 3.2 10.6C1.6 6.5 4.2 3.5 7.8 3.5c2 0 3.7 1 4.7 2.5 1-1.5 2.7-2.5 4.7-2.5 3.6 0 6.2 3 4.6 7.1-1.8 4.8-9.1 9.9-9.1 9.9z' fill='%23000'/%3E%3C/svg%3E");
    --hv-ic-cart: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6 7h15l-1.4 11H7.4L6 7z' stroke='%23000' stroke-width='1.8' stroke-linejoin='round'/%3E%3Cpath d='M9 7V5.5a3 3 0 116 0V7' stroke='%23000' stroke-width='1.8'/%3E%3C/svg%3E");
    --hv-ic-user: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Ccircle cx='12' cy='8' r='3.5' stroke='%23000' stroke-width='1.8'/%3E%3Cpath d='M5.5 20c0-3.6 2.9-5.5 6.5-5.5s6.5 1.9 6.5 5.5' stroke='%23000' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
    --hv-ic-cart-btn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M5 6h16l-1.5 10H7.5L5 6z' stroke='%23000' stroke-width='1.9' stroke-linejoin='round'/%3E%3Cpath d='M9 6V4.5a3 3 0 116 0V6' stroke='%23000' stroke-width='1.9'/%3E%3Ccircle cx='9.5' cy='19' r='1.3' fill='%23000'/%3E%3Ccircle cx='16.5' cy='19' r='1.3' fill='%23000'/%3E%3C/svg%3E");
    --hv-ic-chat: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 4h16v10H8l-4 4V4z' fill='%23000'/%3E%3C/svg%3E");
}

/* ── Текстовый логотип ── */
body#main .logo-text {
    width: auto;
    flex-shrink: 0;
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--hv-ink);
    line-height: 1.15;
    white-space: nowrap;
}
body#main .logo-text__mark {
    color: var(--hv-accent);
}
body#main .logo-text--foot {
    font-size: 1.15rem;
    display: inline-block;
    margin-bottom: .75rem;
}

/* ── Иконки (mask + data-URI) ── */
body#main .hv-ic {
    flex-shrink: 0;
    width: 1.2rem;
    height: 1.2rem;
    display: inline-block;
    vertical-align: middle;
    background-color: currentColor;
    color: var(--hv-icon);
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
}
body#main .hv-ic--grid {
    -webkit-mask-image: var(--hv-ic-grid);
    mask-image: var(--hv-ic-grid);
}
body#main .hv-ic--search {
    -webkit-mask-image: var(--hv-ic-search);
    mask-image: var(--hv-ic-search);
}
body#main .hv-ic--close {
    -webkit-mask-image: var(--hv-ic-close);
    mask-image: var(--hv-ic-close);
}
body#main .hv-ic--phone {
    -webkit-mask-image: var(--hv-ic-phone);
    mask-image: var(--hv-ic-phone);
}
body#main .hv-ic--heart {
    -webkit-mask-image: var(--hv-ic-heart);
    mask-image: var(--hv-ic-heart);
}
body#main .hv-ic--cart {
    -webkit-mask-image: var(--hv-ic-cart);
    mask-image: var(--hv-ic-cart);
}
body#main .hv-ic--user {
    -webkit-mask-image: var(--hv-ic-user);
    mask-image: var(--hv-ic-user);
}

body#main .catalog_link .hv-ic,
body#main .catalog_link_mob .hv-ic {
    color: var(--hv-accent);
    margin-right: .45rem;
}
body#main .call .hv-ic {
    color: var(--hv-accent);
    margin-right: .45rem;
}
body#main .serv_item .hv-ic {
    color: var(--hv-icon);
}
body#main .serv_item:hover .hv-ic {
    color: var(--hv-accent);
}
body#main .main_menu-close {
    cursor: pointer;
    color: var(--hv-ink);
    display: flex;
    align-items: center;
    justify-content: center;
}
body#main .main_menu-close .hv-ic {
    width: 1.35rem;
    height: 1.35rem;
}

/* ── Поле поиска ── */
body#main .header-search {
    flex: 1 1 auto;
    max-width: 28rem;
    margin: 0 1rem;
    min-width: 10rem;
}
body#main .hv-search {
    width: 100%;
    position: relative !important;
    left: auto !important;
    height: auto !important;
    display: flex !important;
    align-items: center;
    gap: .5rem;
    background: #fff;
    border: 1.5px solid var(--hv-line);
    border-radius: 999px;
    padding: 0 .45rem 0 1rem;
    min-height: 2.65rem;
    box-shadow: 0 2px 12px rgba(0, 0, 0, .04);
    transition: border-color .2s, box-shadow .2s, background .2s;
}
body#main .hv-search:focus-within {
    border-color: var(--hv-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--hv-accent) 20%, transparent), 0 4px 16px rgba(0, 0, 0, .06);
    background: #fff;
}
body#main .hv-search__icon {
    color: var(--hv-muted);
    flex-shrink: 0;
    width: 1.1rem;
    height: 1.1rem;
    pointer-events: none;
}
body#main .hv-search:focus-within .hv-search__icon {
    color: var(--hv-accent);
}
body#main .hv-search .search-input {
    display: block !important;
    flex: 1 1 auto;
    width: auto !important;
    min-width: 0;
    border: none !important;
    background: transparent !important;
    padding: .55rem 0 !important;
    margin: 0 !important;
    font-size: .8rem;
    font-weight: 500;
    color: var(--hv-ink);
    outline: none;
}
body#main .hv-search .search-input::placeholder {
    color: var(--hv-muted);
    opacity: .9;
}
body#main .hv-search__clear {
    display: none;
    flex-shrink: 0;
    width: 1.75rem;
    height: 1.75rem;
    border: none;
    background: transparent;
    border-radius: 50%;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    color: var(--hv-muted);
    padding: 0;
}
body#main .hv-search__clear.is-visible {
    display: inline-flex;
}
body#main .hv-search__clear .hv-ic {
    width: .9rem;
    height: .9rem;
}
body#main .hv-search__clear:hover {
    background: var(--hv-accent-soft);
    color: var(--hv-accent);
}
body#main .search-open,
body#main .hv-search > .search-close {
    display: none !important;
}

/* ── Кнопки ── */
body#main .but,
body#main .hv-btn--primary,
body#main .hv-consult__form .but {
    color: var(--hv-on-accent) !important;
    font-weight: 600;
}
body#main .but_mod {
    background: #fff !important;
    border: 1.5px solid var(--hv-accent) !important;
    color: var(--hv-accent) !important;
}
body#main .but_mod:hover {
    background: var(--hv-accent-soft) !important;
}
body#main .but_auto {
    background: var(--hv-accent) !important;
    color: var(--hv-on-accent) !important;
}
body#main .but_auto:hover {
    background: var(--hv-accent-h) !important;
}

/* корзина в карточке */
body#main .add_to_basket {
    background-color: var(--hv-accent) !important;
    background-image: none !important;
    position: relative;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background .2s, box-shadow .2s, transform .2s;
    overflow: visible;
}
body#main .add_to_basket::after {
    content: '';
    display: block;
    width: 1.15rem;
    height: 1.15rem;
    background-color: var(--hv-on-accent);
    -webkit-mask-image: var(--hv-ic-cart-btn);
    mask-image: var(--hv-ic-cart-btn);
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}
body#main .add_to_basket:hover {
    background-color: var(--hv-accent-h) !important;
    transform: scale(1.05);
    box-shadow: 0 4px 14px color-mix(in srgb, var(--hv-accent) 40%, transparent);
}

/* избранное в карточке */
body#main .favorite a.msfavorites {
    background: none !important;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.35rem;
    height: 1.35rem;
}
body#main .favorite a.msfavorites::before {
    content: '';
    display: block;
    width: 1.15rem;
    height: 1.15rem;
    background-color: var(--hv-icon);
    -webkit-mask-image: var(--hv-ic-heart);
    mask-image: var(--hv-ic-heart);
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}
body#main .favorite a.msfavorites.voted::before {
    -webkit-mask-image: var(--hv-ic-heart-full);
    mask-image: var(--hv-ic-heart-full);
    background-color: var(--hv-accent);
}

/* шапка */
body#main .serv_item-count {
    background: var(--hv-accent) !important;
    color: var(--hv-on-accent) !important;
    font-weight: 700;
}
body#main .lozung {
    font-weight: 500;
}
body#main .catalog_link {
    color: var(--hv-ink);
    font-weight: 600;
}
body#main .head_menu > a:not(.catalog_link) {
    color: var(--hv-ink);
}
body#main .head_menu > a:not(.catalog_link):hover {
    color: var(--hv-accent);
}

/* виджет чата */
body#main .widget {
    background: var(--hv-accent) !important;
    background-image: none !important;
    box-shadow: 0 8px 28px rgba(0, 0, 0, .14);
    display: flex;
    align-items: center;
    justify-content: center;
}
body#main .widget::after {
    content: '';
    width: 1.45rem;
    height: 1.45rem;
    background-color: var(--hv-on-accent);
    -webkit-mask-image: var(--hv-ic-chat);
    mask-image: var(--hv-ic-chat);
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}
body#main .widget:hover {
    background: var(--hv-accent-h) !important;
    box-shadow: 0 10px 32px rgba(0, 0, 0, .18);
}

/* соцсети */
body#main .hv-soc {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    border: 1px solid var(--hv-line);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .52rem;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--hv-accent);
    background: #fff;
    text-decoration: none;
    transition: background .2s, color .2s, border-color .2s;
}
body#main .hv-soc:hover {
    background: var(--hv-accent);
    border-color: var(--hv-accent);
    color: var(--hv-on-accent);
}

body#main .hv-btn--primary[style] {
    color: var(--hv-on-accent) !important;
}

@media (max-width: 1100px) {
    body#main .header-search {
        max-width: 16rem;
        margin: 0 .5rem;
    }
}
@media (max-width: 900px) {
    body#main .header-search {
        order: 10;
        flex: 1 1 100%;
        max-width: none;
        margin: .5rem 0 0;
    }
    body#main .header.flex-b {
        flex-wrap: wrap;
    }
}