/* ================================================================
   ИЗБРАННЫЕ ТОВАРЫ
   Список хранится в localStorage браузера без изменения базы данных.
   ================================================================ */

.favorite-toggle {
    -webkit-appearance: none;
    appearance: none;
    align-items: center;
    background: #ffffff;
    border: 1px solid #d9dde2;
    border-radius: 50%;
    box-shadow: 0 2px 9px rgba(25, 31, 39, 0.09);
    color: #68707a;
    cursor: pointer;
    display: inline-flex;
    height: 38px;
    justify-content: center;
    margin: 0;
    padding: 0;
    transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
    width: 38px;
}

.favorite-toggle:hover,
.favorite-toggle:focus {
    background: #fff7f7;
    border-color: #c81016;
    color: #c81016;
    outline: 0;
    transform: translateY(-1px);
}

.favorite-toggle:focus-visible {
    outline: 2px solid rgba(200, 16, 22, .28);
    outline-offset: 2px;
}

.favorite-toggle.is-active {
    background: #ffffff;
    border-color: #c81016;
    color: #c81016;
}

.favorite-toggle.is-active:hover,
.favorite-toggle.is-active:focus {
    background: #ffffff;
    border-color: #c81016;
    color: #c81016;
    transform: none;
}

.favorite-toggle__icon {
    display: block;
    fill: transparent;
    height: 15px;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
    width: 15px;
}

.favorite-toggle.is-active .favorite-toggle__icon {
    fill: #ffffff;
    stroke: #c81016;
}

.favorite-toggle__text {
    margin-left: 8px;
}

#collections .catalog-card > .favorite-toggle,
.new-product-card > .favorite-toggle,
.related-product-card > .favorite-toggle {
    position: absolute;
    z-index: 8;
}

#collections .catalog-card > .favorite-toggle {
    left: auto;
    right: 12px;
    top: 12px;
}

/* Кнопки избранного в карточках каталога и товарных подборках. */
.catalog-card > .favorite-toggle,
.new-product-card > .favorite-toggle,
.related-product-card > .favorite-toggle {
    background: #ffffff;
    border-radius: 9px;
    box-shadow: none;
    color: #9aa4ad;
    height: 27px;
    transition: border-color .16s ease, color .16s ease;
    width: 27px;
}

.catalog-card > .favorite-toggle:not(.is-active):hover,
.catalog-card > .favorite-toggle:not(.is-active):active,
.catalog-card > .favorite-toggle:not(.is-active):focus-visible,
.new-product-card > .favorite-toggle:not(.is-active):hover,
.new-product-card > .favorite-toggle:not(.is-active):active,
.new-product-card > .favorite-toggle:not(.is-active):focus-visible,
.related-product-card > .favorite-toggle:not(.is-active):hover,
.related-product-card > .favorite-toggle:not(.is-active):active,
.related-product-card > .favorite-toggle:not(.is-active):focus-visible {
    background: #ffffff;
    border-color: #ed2b30;
    color: #ed2b30;
    transform: none;
}

.catalog-card > .favorite-toggle:not(.is-active):focus:not(:focus-visible),
.new-product-card > .favorite-toggle:not(.is-active):focus:not(:focus-visible),
.related-product-card > .favorite-toggle:not(.is-active):focus:not(:focus-visible) {
    background: #ffffff;
    border-color: #d9dde2;
    color: #9aa4ad;
    outline: 0;
    transform: none;
}

.new-product-card,
.related-product-card {
    position: relative;
}

.new-product-card > .favorite-toggle,
.related-product-card > .favorite-toggle {
    right: 12px;
    top: 12px;
}

.product-page__header {
    align-items: flex-start;
    display: flex;
    gap: 20px;
    justify-content: space-between;
}

.product-page__header h1 {
    min-width: 0;
}

.favorite-toggle--product {
    border-radius: 7px;
    flex: 0 0 auto;
    font: 600 14px/1 "Calibri", Arial, sans-serif;
    height: 42px;
    padding: 0 15px;
    width: auto;
}

/* Основная и закреплённая шапки */
@media (min-width: 992px) {
    #header .bsv-header-desktop__row {
        grid-template-columns: 185px minmax(240px, 1fr) 214px max-content;
    }

    .bsv-compact-nav {
        grid-template-columns: 145px minmax(210px, 1fr) 214px max-content;
    }

    #header .bsv-header-desktop__actions,
    .bsv-compact-nav__actions {
        grid-template-columns: minmax(110px, 1fr) 44px 44px;
        overflow: visible;
    }

    #header .bsv-header-desktop__callback,
    .bsv-compact-nav__callback {
        border-radius: 8px;
        font-size: 14px;
        padding-left: 5px;
        padding-right: 5px;
    }

    #header .bsv-header-desktop__callback,
    #header .bsv-header-desktop__favorite-link,
    #header .bsv-header-desktop__cart-link,
    .bsv-compact-nav__callback,
    .bsv-compact-nav__favorite-link,
    .bsv-compact-nav__cart-link {
        transition: background-color .16s ease, border-color .16s ease, color .16s ease !important;
    }

    #header .bsv-header-desktop__favorite,
    #header .bsv-header-desktop__basket,
    .bsv-compact-nav__favorite,
    .bsv-compact-nav__basket {
        align-items: center;
        display: flex;
        height: 100%;
        justify-content: center;
        min-width: 0;
        overflow: visible;
        width: 44px;
    }

    #header .bsv-header-desktop__favorite-link,
    #header .bsv-header-desktop__cart-link,
    .bsv-compact-nav__favorite-link,
    .bsv-compact-nav__cart-link {
        align-items: center;
        border-radius: 8px;
        box-sizing: border-box;
        display: flex;
        gap: 0;
        height: 44px;
        justify-content: center;
        min-width: 0;
        overflow: visible;
        padding: 0;
        position: relative;
        text-align: center;
        text-decoration: none !important;
        width: 44px;
    }

    #header .bsv-header-desktop__callback,
    #header .bsv-header-desktop__callback:visited,
    #header .bsv-header-desktop__favorite-link,
    #header .bsv-header-desktop__favorite-link:visited,
    #header .bsv-header-desktop__cart-link,
    #header .bsv-header-desktop__cart-link:visited {
        background: transparent;
        border: 1px solid rgba(255, 255, 255, .9);
        color: #ffffff !important;
    }

    #header .bsv-header-desktop__callback:hover,
    #header .bsv-header-desktop__favorite-link:hover,
    #header .bsv-header-desktop__cart-link:hover,
    #header .bsv-header-desktop__callback:active,
    #header .bsv-header-desktop__favorite-link:active,
    #header .bsv-header-desktop__cart-link:active {
        background: rgba(255, 255, 255, .06);
        border-color: #ffffff;
        color: #ffffff !important;
    }

    #header .bsv-header-desktop__callback:focus:not(:focus-visible),
    #header .bsv-header-desktop__favorite-link:focus:not(:focus-visible),
    #header .bsv-header-desktop__cart-link:focus:not(:focus-visible) {
        background: transparent;
        border-color: rgba(255, 255, 255, .9);
        color: #ffffff !important;
        outline: 0;
    }

    #header .bsv-header-desktop__callback:focus-visible,
    #header .bsv-header-desktop__favorite-link:focus-visible,
    #header .bsv-header-desktop__cart-link:focus-visible {
        background: rgba(255, 255, 255, .06);
        border-color: #ffffff;
        color: #ffffff !important;
        outline: 2px solid rgba(255, 255, 255, .85);
        outline-offset: 2px;
    }

    .bsv-compact-nav__callback,
    .bsv-compact-nav__callback:visited,
    .bsv-compact-nav__favorite-link,
    .bsv-compact-nav__favorite-link:visited,
    .bsv-compact-nav__cart-link,
    .bsv-compact-nav__cart-link:visited {
        background: #ffffff;
        border: 1px solid #d9dee5;
        color: #17191d !important;
    }

    .bsv-compact-nav__callback:hover,
    .bsv-compact-nav__favorite-link:hover,
    .bsv-compact-nav__cart-link:hover,
    .bsv-compact-nav__callback:active,
    .bsv-compact-nav__favorite-link:active,
    .bsv-compact-nav__cart-link:active {
        background: #fff7f7;
        border-color: #a60000;
        color: #a60000 !important;
    }

    .bsv-compact-nav__callback:focus:not(:focus-visible),
    .bsv-compact-nav__favorite-link:focus:not(:focus-visible),
    .bsv-compact-nav__cart-link:focus:not(:focus-visible) {
        background: #ffffff;
        border-color: #d9dee5;
        color: #17191d !important;
        outline: 0;
    }

    .bsv-compact-nav__callback:focus-visible,
    .bsv-compact-nav__favorite-link:focus-visible,
    .bsv-compact-nav__cart-link:focus-visible {
        background: #fff7f7;
        border-color: #a60000;
        color: #a60000 !important;
        outline: 2px solid rgba(166, 0, 0, .2);
        outline-offset: 2px;
    }

    #header .bsv-header-desktop__favorite-link svg,
    #header .bsv-header-desktop__cart-link svg,
    .bsv-compact-nav__favorite-link svg,
    .bsv-compact-nav__cart-link svg {
        display: block;
        fill: none;
        flex: 0 0 21px;
        height: 21px;
        stroke: currentColor;
        stroke-linecap: round;
        stroke-linejoin: round;
        stroke-width: 1.7;
        width: 21px;
    }

    #header .bsv-header-desktop__favorite-label,
    #header .bsv-header-desktop__cart-label,
    .bsv-compact-nav__favorite-label,
    .bsv-compact-nav__cart-label {
        display: none !important;
    }

    #header .bsv-header-desktop__favorite-count,
    #header .bsv-header-desktop__cart-link .basket_kolvo,
    .bsv-compact-nav__favorite-count,
    .bsv-compact-nav__cart-link .basket_kolvo {
        align-items: center;
        border: 0;
        border-radius: 9px;
        box-sizing: border-box;
        display: flex;
        font: bold 10px/18px "Calibri", Arial, sans-serif;
        height: 18px;
        justify-content: center;
        min-width: 18px;
        padding: 0 3px;
        position: absolute;
        right: -6px;
        top: -7px;
        z-index: 2;
    }

    #header .bsv-header-desktop__favorite-count,
    #header .bsv-header-desktop__cart-link .basket_kolvo {
        background: #ffffff;
        color: #a60000;
        box-shadow: 0 0 0 2px #a60000;
    }

    .bsv-compact-nav__favorite-count,
    .bsv-compact-nav__cart-link .basket_kolvo {
        background: #dc151b;
        color: #ffffff;
        box-shadow: 0 0 0 2px #ffffff;
    }

    .bsv-compact-nav__favorite-link,
    .bsv-compact-nav__cart-link {
        height: 42px;
        width: 42px;
    }

    .bsv-compact-nav__favorite,
    .bsv-compact-nav__basket {
        width: 42px;
    }
}

@media (min-width: 1200px) {
    #header .bsv-header-desktop__row {
        grid-template-columns: 170px minmax(330px, 1fr) 228px max-content;
    }

    .bsv-compact-nav {
        grid-template-columns: 175px minmax(300px, 1fr) 228px max-content;
    }

    #header .bsv-header-desktop__actions,
    .bsv-compact-nav__actions {
        grid-template-columns: minmax(124px, 1fr) 44px 44px;
    }

    #header .bsv-header-desktop__callback,
    .bsv-compact-nav__callback {
        font-size: 15px;
    }
}

/* Планшетная шапка */
@media (min-width: 768px) and (max-width: 991px) {
    #header .header-tools-secondary {
        align-items: center;
        display: flex;
        gap: 8px;
        justify-content: flex-end;
    }

    #header .bsv-tablet-favorites {
        height: 44px;
        margin: 0;
        padding: 0;
        width: 44px;
    }

    #header .bsv-tablet-favorites__link {
        align-items: center;
        background: transparent;
        border: 1px solid rgba(255, 255, 255, .72);
        border-radius: 9px;
        box-sizing: border-box;
        color: #ffffff !important;
        display: flex;
        height: 44px;
        justify-content: center;
        padding: 0;
        position: relative;
        text-decoration: none !important;
        width: 44px;
    }

    #header .bsv-tablet-favorites__link svg {
        fill: none;
        height: 24px;
        stroke: currentColor;
        stroke-linecap: round;
        stroke-linejoin: round;
        stroke-width: 1.7;
        width: 24px;
    }

    #header .bsv-tablet-favorites__count {
        align-items: center;
        background: #ffffff;
        border: 2px solid #a60000;
        border-radius: 9px;
        box-sizing: border-box;
        color: #a60000;
        display: flex;
        font: bold 11px/14px "Calibri", Arial, sans-serif;
        height: 18px;
        justify-content: center;
        min-width: 18px;
        padding: 0 4px;
        position: absolute;
        right: -7px;
        top: -7px;
    }
}

.bsv-mobile-favorites-link .bsv-mobile-favorites-count {
    align-items: center;
    background: #a60000;
    border-radius: 10px;
    color: #ffffff;
    display: inline-flex;
    font: bold 11px/20px Arial, sans-serif;
    height: 20px;
    justify-content: center;
    margin-left: 7px;
    min-width: 20px;
    padding: 0 4px;
    vertical-align: middle;
}

/* Страница избранного */
.favorites-page {
    color: #20242a;
    padding: 8px 0 42px;
}

.favorites-page__header {
    align-items: flex-end;
    border-bottom: 1px solid #e4e7eb;
    display: flex;
    gap: 24px;
    justify-content: space-between;
    margin-bottom: 26px;
    padding: 12px 0 22px;
}

.favorites-page__eyebrow {
    color: #c81016;
    font: 700 12px/1.2 Arial, sans-serif;
    letter-spacing: .09em;
    margin-bottom: 8px;
    text-transform: uppercase;
}

.favorites-page h1 {
    color: #20242a;
    font: 700 32px/1.16 "Calibri", Arial, sans-serif;
    margin: 0 0 8px;
}

.favorites-page__intro {
    color: #68707a;
    font: 15px/1.5 Arial, sans-serif;
    margin: 0;
}

.favorites-page__counter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    min-width: 66px;
    height: 32px;
    padding: 0 12px;
    color: #68707a;
    background: #f6f7f8;
    border: 0;
    border-radius: 16px;
    font: bold 14px/32px "Calibri", Arial, sans-serif;
    white-space: nowrap;
}

.favorites-page__loading,
.favorites-page__error,
.favorites-page__empty {
    background: #f6f7f8;
    border: 1px solid #dfe3e7;
    border-radius: 12px;
    color: #68707a;
    font: 15px/1.55 Arial, sans-serif;
    margin: 0 0 24px;
    padding: 28px;
    text-align: center;
}

.favorites-page__loading {
    animation: favorites-pulse 1.2s ease-in-out infinite alternate;
}

.favorites-page__empty {
    padding: 46px 24px;
}

.favorites-page__empty-icon {
    color: #a6adb5;
    display: block;
    height: 42px;
    margin: 0 auto 14px;
    width: 42px;
}

.favorites-page__empty-icon svg {
    fill: none;
    height: 100%;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.5;
    width: 100%;
}

.favorites-page__empty h2 {
    color: #20242a;
    font: 700 23px/1.2 "Calibri", Arial, sans-serif;
    margin: 0 0 8px;
}

.favorites-page__empty p {
    margin: 0 auto 18px;
    max-width: 560px;
}

.favorites-page__catalog-link,
.favorites-page__retry {
    background: #c81016;
    border: 1px solid #c81016;
    border-radius: 7px;
    color: #ffffff !important;
    display: inline-flex;
    font: 700 14px/42px Arial, sans-serif;
    height: 42px;
    justify-content: center;
    padding: 0 20px;
    text-decoration: none !important;
}

.favorites-page__catalog-link:hover,
.favorites-page__catalog-link:focus,
.favorites-page__retry:hover,
.favorites-page__retry:focus {
    background: #a90d12;
    border-color: #a90d12;
    color: #ffffff !important;
}

.favorites-page__retry {
    cursor: pointer;
    margin-top: 14px;
}

.favorites-grid .catalog-card-column {
    transition: opacity .18s ease, transform .18s ease;
}

.favorites-grid .catalog-card-column.is-removing {
    opacity: 0;
    transform: scale(.97);
}

@keyframes favorites-pulse {
    from { opacity: .55; }
    to { opacity: 1; }
}

@media (max-width: 767px) {
    .product-page__header {
        align-items: stretch;
        flex-direction: column;
        gap: 13px;
    }

    .favorite-toggle--product {
        justify-content: center;
        width: 100%;
    }

    .favorites-page__header {
        align-items: flex-start;
        flex-direction: column;
        gap: 15px;
    }

    .favorites-page h1 {
        font-size: 27px;
    }

    .favorites-page__loading,
    .favorites-page__error,
    .favorites-page__empty {
        padding: 28px 18px;
    }
}