.no_active_type {
  display: none;
}

.order-card__btn--active {
    display: flex;
    gap: 16px;
}

.head-order__btn svg,
.head-order__btn .quantity-filed,
.order-card__btn svg,
.order-card__btn .quantity-filed,
.order-card__btn--active span {
    display: none;
}

.order-card__btn--active .quantity-filed {
    display: inline-flex;
}

.order-card__btn--active .quantity-filed input {
    background: initial;
}

.order-card__btn--active .quantity-filed button {
    height: unset;
}

.order-card__btn--active svg {
    display: block;
}

.order-card__btn--active .bas_btn {
    width: unset;
    padding: 13px;
    pointer-events: none;
}

.custom-loading {
    position: relative;
    pointer-events: none;
    opacity: .6;
}

.custom-loading::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 40px;
    height: 40px;
    border: 4px solid rgba(0, 0, 0, .1);
    border-top-color: var(--btn-violet-default);
    border-radius: 50%;
    -webkit-animation: customSpin 1s linear infinite;
    animation: customSpin 1s linear infinite;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    z-index: 2;
}

@keyframes customSpin {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}

/* K1: недоступная фасовка / обжарка — выключена (не скрыта) */
.product-options__item--weigth.is-disabled .product-option,
.product-options__item--roasting.is-disabled .product-option {
    opacity: .45;
    cursor: not-allowed;
}

.product-options__item--weigth.is-disabled .product-option__key {
    text-decoration: line-through;
}

.product-option__value--na {
    font-weight: 400;
}

.order-card__not-available {
    color: var(--text-dark-grey, #807777);
}

.order-card__subscribe .sp-subscribe-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

/* P-292 M-08: закреплённая полоса покупки на карточке товара (телефон и планшет, до 1279 px). Полоса - уже существующий блок
   .head-card__order внутри .js-product-card-head (цену и состояние кнопки в нём синхронизируют detailPriceChange() и обработчик
   .bas_btn); класс sp-buybar--on ставит SpBuyBar (specialty_new/script.js), пока основной блок покупки вне экрана. Нет кнопки
   (нет в наличии) - полосы нет. Высота 56 px = --sp-bar-h: от неё считаются плашка cookie и виджет связи. Стоит над нижней
   панелью (--sp-bn-h, z-index 200), ниже плашки cookie (250) и окон (1000). Цвета - токены проекта. */
@media (max-width: 1279px) {
    html.sp-buybar {
        --sp-bar-h: 56px;
    }

    html.sp-buybar body {
        padding-bottom: var(--sp-bar-h);
    }

    html.sp-buybar .cbk-phone {
        bottom: calc(var(--sp-cookie-top, calc(var(--sp-bn-h, 0px) + var(--sp-bar-h, 0px))) + 12px) !important;
    }

    .scroll-head.sp-buybar--on {
        display: block !important;
        bottom: var(--sp-bn-h, 0px);
        z-index: 150;
        box-shadow: 0 -4px 16px rgba(33, 33, 33, .12);
    }

    .scroll-head.sp-buybar--on .scroll-head__inner:before {
        display: none;
    }

    .scroll-head .head-card {
        display: block;
        padding: 0;
    }

    .scroll-head .head-card > :not(.head-card__order) {
        display: none;
    }

    .scroll-head .head-card__order {
        margin: 0;
    }

    .scroll-head .head-order {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        height: 56px;
        padding: 6px 0;
        box-sizing: border-box;
    }

    .scroll-head .head-order__price {
        flex: 1 1 auto;
        min-width: 0;
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        column-gap: 6px;
        margin: 0;
        font-size: 18px;
        line-height: 22px;
        font-weight: 600;
        color: var(--text-black, #212121);
    }

    .scroll-head .head-order__price ins {
        color: var(--second-pink-light, #FF7E7E);
        text-decoration: none;
    }

    .scroll-head .head-order__price del {
        font-size: 12px;
        line-height: 14px;
        font-weight: 400;
        color: var(--text-dark-gray, #777880);
    }

    .scroll-head .product-card__nds {
        display: none;
    }

    .scroll-head .head-order__btn {
        flex: 0 0 auto;
        min-width: 0;
        margin: 0;
    }

    .scroll-head .head-order__btn .bas_btn {
        width: auto;
        min-height: 44px;
        padding: 12px 22px;
        font-size: 12px;
        line-height: 20px;
        white-space: nowrap;
    }

    /* уже в корзине: степпера в полосе нет (он в основном блоке), кнопка превращается в метку «В корзине» */
    .scroll-head .head-order__btn.order-card__btn--active {
        display: block;
    }

    .scroll-head .order-card__btn--active .quantity-filed {
        display: none;
    }

    .scroll-head .order-card__btn--active .bas_btn {
        padding: 12px 22px;
        background-color: var(--main-light-blue, #F4F4FF);
        border-color: var(--btn-violet-active, #6667AB);
        color: var(--btn-violet-active, #6667AB);
    }

    .scroll-head .order-card__btn--active .bas_btn span {
        display: inline;
        font-size: 0;
    }

    .scroll-head .order-card__btn--active .bas_btn span::after {
        content: 'В корзине';
        font-size: 12px;
    }

    .scroll-head .order-card__btn--active .bas_btn svg {
        display: none;
    }
}

/* P-293.2: розничная цена карточки без наличия (S2/S3) и пояснение «лот снят» (S3) */
.order-card__oos-price {
    white-space: nowrap;
}

/* «Нет в наличии» + цена не влезают в узкую плашку (мобайл 390, десктоп) — переносим цену строкой ниже */
.order-card__price:has(> .order-card__oos-price),
.head-order__price:has(> .order-card__oos-price) {
    flex-wrap: wrap;
}

.order-card__off {
    margin-top: 12px;
}

.order-card__off-text {
    margin: 0 0 8px;
    color: var(--text-dark-grey, #807777);
}

.order-card__off-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: var(--btn-violet-active, #6667AB);
    text-decoration: underline;
}
/* Шкалы вкуса кофе (Figma p58 1920: в колонке описания, рамка 384×84; p59/p60: под фото, оценка SCA строкой). Точки 10 px через 2 px */
.taste-scales {
    margin: 24px 0 0;
    padding: 12px 16px;
    border: 1px solid #EBEBEB;
    border-radius: 8px;
    box-sizing: border-box;
    font-size: 12px;
    line-height: 130%;
}

.taste-scales__list {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.taste-scales__item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.taste-scales__value {
    font-weight: 600;
}

.taste-scales__name {
    color: var(--text-dark-gray, #777880);
}

.taste-scales__dots {
    display: flex;
    gap: 2px;
}

.taste-scales__dots i {
    width: 10px;
    height: 10px;
    border: 1px solid #E0E0E0;
    border-radius: 50%;
    box-sizing: border-box;
}

.taste-scales__dots i.is-on {
    background: var(--btn-violet-default, #6667AB);
    border-color: var(--btn-violet-default, #6667AB);
}

/* оценка SCA: до 1280 px строкой «Оценка Q-грейдера 92,5 SCA ?» */
.taste-scales__sca {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
}

.taste-scales__sca .taste-scales__name {
    order: -1;
}

.taste-scales__hint {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin: -8px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--text-dark-gray, #777880);
    cursor: pointer;
}

.taste-scales__hint:hover,
.taste-scales__hint:focus-visible {
    color: var(--btn-violet-default, #6667AB);
}

.taste-scales--mobile {
    margin: 16px 0 0;
    padding: 12px;
}

.taste-scales--mobile .taste-scales__list {
    gap: 8px;
}

.taste-scales--desktop {
    display: none;
}

@media (min-width: 1280px) {
    .taste-scales--mobile {
        display: none;
    }

    .taste-scales--desktop {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        max-width: 384px;
    }

    .taste-scales--desktop .taste-scales__list {
        gap: 12px;
    }

    /* оценка SCA четвёртой колонкой: «92,5 SCA ?», под ней «Оценка Q-грейдера» */
    .taste-scales--desktop .taste-scales__sca {
        flex-wrap: wrap;
        max-width: 100px;
        margin-top: 0;
        row-gap: 4px;
    }

    .taste-scales--desktop .taste-scales__sca .taste-scales__name {
        order: 0;
        flex-basis: 100%;
    }
}

/* мобильные подписи строк с двоеточием (Figma p59/p60: «Страна выращивания:», «Обжарщик:») */
@media (max-width: 1279px) {
    .product-desc__item--colon .product-desc__key span::after {
        content: ':';
    }
}

/* подсказка «Что значит оценка SCA» (popover): на телефоне снизу экрана, на десктопе по центру */
.sca-hint {
    position: fixed;
    inset: auto 0 0 0;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 24px 20px 28px;
    border: 0;
    border-radius: 16px 16px 0 0;
    background: #fff;
    box-shadow: 0 -8px 32px rgba(33, 33, 33, 0.16);
    box-sizing: border-box;
    max-height: calc(100dvh - 32px);
    overflow-y: auto;
    font-size: 14px;
    line-height: 140%;
    color: #212121;
}

.sca-hint::backdrop {
    background: rgba(33, 33, 33, 0.4);
}

.sca-hint p {
    margin: 0 0 12px;
}

.sca-hint__close {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    background: none;
    font-size: 28px;
    line-height: 1;
    color: var(--text-dark-gray, #777880);
    cursor: pointer;
}

.sca-hint__score {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 8px;
    padding-right: 40px;
    font-size: 16px;
    font-weight: 600;
    color: var(--btn-violet-default, #6667AB);
}

.sca-hint__score b {
    font-size: 36px;
    line-height: 1;
}

.sca-hint__score span {
    flex-basis: 100%;
    font-size: 14px;
    color: #212121;
}

/* полоса 80–100: 80–84,99 / 85–89,99 / 90–100, метка — оценка этого кофе */
.sca-hint__bar {
    position: relative;
    display: flex;
    gap: 2px;
    height: 8px;
    margin: 20px 0 6px;
}

.sca-hint__bar i {
    flex: 1;
    border-radius: 4px;
    background: #F4F4FF;
}

.sca-hint__bar i:nth-child(2) {
    background: rgba(102, 103, 171, 0.45);
}

.sca-hint__bar i:nth-child(3) {
    flex: 2;
    background: var(--btn-violet-default, #6667AB);
}

.sca-hint__bar b {
    position: absolute;
    top: 50%;
    width: 16px;
    height: 16px;
    border: 3px solid #fff;
    border-radius: 50%;
    background: var(--btn-violet-default, #6667AB);
    box-shadow: 0 0 0 1px var(--btn-violet-default, #6667AB);
    box-sizing: border-box;
    transform: translate(-50%, -50%);
}

.sca-hint__bands {
    display: flex;
    gap: 2px;
    margin-bottom: 16px;
    font-size: 11px;
    line-height: 130%;
    color: var(--text-dark-gray, #777880);
}

.sca-hint__bands span {
    flex: 1;
}

.sca-hint__bands span:last-child {
    flex: 2;
}

.sca-hint__link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-weight: 600;
    color: var(--btn-violet-default, #6667AB);
}

@media (min-width: 640px) {
    .sca-hint {
        inset: 0;
        width: 400px;
        height: fit-content;
        margin: auto;
        padding: 28px;
        border-radius: 16px;
        box-shadow: 0 8px 32px rgba(33, 33, 33, 0.16);
    }
}

/* браузер без Popover API: подсказку и кнопку «?» не показываем */
@supports not selector(:popover-open) {
    .sca-hint,
    .taste-scales__hint {
        display: none;
    }
}

/* плашка статуса компании у бренда (BrandPartner) в блоке цены оборудования: длинный текст переносится, подсказка «?» — окно .sca-hint */
.order-card__label--partner {
    max-width: 100%;
    box-sizing: border-box;
}

.order-card__label--partner span {
    min-width: 0;
    overflow-wrap: anywhere;
}

.order-card__label--partner .order-card__label-info {
    flex: none;
    cursor: pointer;
}

/* телефон 375: «ЭКСКЛЮЗИВНЫЙ ДИСТРИБЬЮТОР» с иконками не влезал в 231 px на 6 px — чуть плотнее, чтобы была одна строка; уже 360 — перенос */
@media (max-width: 639px) {
    .order-card__label--partner {
        padding: 3px 6px;
    }

    .order-card__label--partner span {
        letter-spacing: -0.02em;
    }
}

.partner-hint__title {
    padding-right: 40px;
    font-size: 16px;
    font-weight: 600;
    color: var(--btn-violet-default, #6667AB);
}

/* A-14: кадрированные копии фото (main/photo_fit): товар целиком в окне, без обрезки и растяжения */
.goods-slider--fit .goods-slider__photo {
    object-fit: contain;
}

.goods-slider--fit .goods-thumbnails__img {
    object-fit: contain;
}

.goods-slider--fit .zoom-image-wrapper picture {
    display: block;
}