/* ==========================================
   1. Общие переменные
   ========================================== */

.hitek-product-availability {
    --hitek-stock-accent: #b59c49;
    --hitek-stock-text: #222326;
    --hitek-stock-muted: #85878c;
    --hitek-stock-border: #e7e8ea;
    --hitek-stock-surface: #ffffff;
    --hitek-stock-success: #388456;

    width: 100%;
    min-width: 0;
    margin-top: 14px;
}

.hitek-product-availability *,
.hitek-product-availability *::before,
.hitek-product-availability *::after,
.hitek-availability-panel *,
.hitek-availability-panel *::before,
.hitek-availability-panel *::after {
    box-sizing: border-box;
}

/* ==========================================
   2. Кнопка на карточке товара
   ========================================== */

.hitek-product-availability
.hitek-product-availability__trigger {
    appearance: none;
    -webkit-appearance: none;

    display: flex;
    align-items: center;
    gap: 13px;

    width: 100%;
    min-height: 74px;
    padding: 13px 15px;

    margin: 0;
    border: 1px solid #e5e5e5;
    border-radius: 10px;

    background: #ffffff;
    color: #222326;

    font: inherit;
    text-align: left;
    text-decoration: none;

    cursor: pointer;

    transition:
        border-color 0.2s ease,
        background-color 0.2s ease,
        box-shadow 0.2s ease;
}

/*
 * Важно: display:flex не должен
 * переопределять HTML-атрибут hidden.
 */

.hitek-product-availability
.hitek-product-availability__trigger[hidden] {
    display: none !important;
}

.hitek-product-availability
.hitek-product-availability__trigger:hover {
    border-color: #c8b778;
    background: #fffefa;
    box-shadow: 0 3px 12px rgb(0 0 0 / 3%);
}

.hitek-product-availability
.hitek-product-availability__trigger:focus-visible {
    outline: 2px solid #b59c49;
    outline-offset: 3px;
}

/* Иконка магазина */

.hitek-product-availability__icon {
    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 42px;

    width: 42px;
    height: 42px;

    border-radius: 9px;
    background: #f7f5ed;
    color: #a88e37;
}

.hitek-product-availability
.hitek-product-availability__icon svg {
    display: block;

    width: 23px !important;
    height: 23px !important;

    min-width: 23px;
    max-width: 23px;
    min-height: 23px;
    max-height: 23px;
    overflow: visible;
}

/* Текст кнопки */

.hitek-product-availability__content {
    display: flex;
    flex-direction: column;
    justify-content: center;

    flex: 1 1 auto;
    min-width: 0;
    gap: 4px;
}

.hitek-product-availability__title {
    display: block;

    color: #252525;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: 0;
}

.hitek-product-availability__subtitle {
    display: block;

    color: #85878c;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.4;
}

/* Стрелка */

.hitek-product-availability__arrow {
    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 20px;

    color: #96989b;

    transition:
        transform 0.2s ease,
        color 0.2s ease;
}

.hitek-product-availability
.hitek-product-availability__arrow svg {
    display: block;

    width: 20px !important;
    height: 20px !important;

    min-width: 20px;
    max-width: 20px;
    min-height: 20px;
    max-height: 20px;

    fill: none;
    stroke: currentColor;
}

.hitek-product-availability__trigger:hover
.hitek-product-availability__arrow {
    transform: translateX(3px);
    color: #a88e37;
}

.product-info.product-info--type2 .info_item>div:not(.main_item_wrapper) {
    padding-left:0;
    padding-right:0;
}

/* ==========================================
   3. Боковая панель dialog
   ========================================== */
dialog.hitek-availability-panel {
    box-sizing: border-box;
    position: fixed;
    inset: 0 0 0 auto;
    width: min(100%, 480px);
    max-width: none;
    height: 100vh;
    height: 100dvh;
    max-height: none;
    margin: 0;
    padding: 0;
    border: 0;
    background: var(--hr-surface);
    color: var(--hr-text);
    box-shadow: -14px 0 48px rgb(0 0 0 / 11%);
    overflow: hidden;
    overscroll-behavior: contain;
}

dialog.hitek-availability-panel:not([open]) {
    display: none !important;
}

dialog.hitek-availability-panel[open] {
    display: block;
    animation: hitek-panel-enter 0.26s ease-out both;
}

dialog.hitek-availability-panel::backdrop {
    background: var(--hr-overlay);
    animation: hitek-backdrop-enter 0.2s ease-out both;
}

/* Внутренний контейнер */

.hitek-availability-panel__container {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    min-height: 0;
    background: var(--hr-surface);
}

/* ==========================================
   4. Заголовок панели
   ========================================== */

.hitek-availability-panel__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    flex: 0 0 auto;
    padding: 28px 28px 24px;
    border-bottom: 1px solid var(--hr-border);
    background: var(--hr-surface);
}

.hitek-availability-panel__heading {
    flex: 1 1 auto;
    min-width: 0;
}

.hitek-availability-panel
.hitek-availability-panel__title {
    margin: 0;
    padding: 0;
    color: var(--hr-text-graphite);
    font-size: 23px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.45px;
}

.hitek-availability-panel__description {
    margin-top: 8px;
    color: var(--hr-text-muted);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.5;
}

dialog.hitek-availability-panel .hitek-availability-panel__title-desktop {
    display: inline;
}

dialog.hitek-availability-panel .hitek-availability-panel__title-mobile {
    display: none;
}

/* Кнопка закрытия */

.hitek-availability-panel
.hitek-availability-panel__close {
    appearance: none;
    -webkit-appearance: none;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 36px;
    width: 36px;
    height: 36px;

    margin: -3px -6px 0 0;
    padding: 0;

    border: 0;
    border-radius: 9px;

    background: #f5f5f6;
    color: #5e6065;

    cursor: pointer;

    transition:
        color 0.2s ease,
        background-color 0.2s ease;
}

.hitek-availability-panel__close:hover {
    background: #ebebed;
    color: #222326;
}

.hitek-availability-panel__close:focus-visible {
    outline: 2px solid #b59c49;
    outline-offset: 2px;
}

.hitek-availability-panel
.hitek-availability-panel__close svg {
    display: block;

    width: 19px !important;
    height: 19px !important;

    min-width: 19px;
    max-width: 19px;
    min-height: 19px;
    max-height: 19px;

    fill: none;
    stroke: currentColor;
}
/* ==========================================
   5. Прокручиваемая область панели
   ========================================== */

.hitek-availability-panel__body {
    flex: 1 1 auto;

    min-height: 0;
    padding: 4px 28px 24px;

    overflow-x: hidden;
    overflow-y: auto;

    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: #d7d8db transparent;
}

/* ==========================================
   6. Заголовок способа получения
   ========================================== */

.hitek-availability-panel
.hitek-product-stock {
    width: 100%;
    min-width: 0;
}

.hitek-availability-panel
.hitek-product-stock__summary {
    margin-bottom: 16px;
}

.hitek-availability-panel
.hitek-product-stock__mode {
    display: inline-flex;
    align-items: center;

    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;

    color: #8f7b43;

    background: #f8f6ef;
    border: 1px solid #eee8d7;
    border-radius: 6px;

    padding: 6px 10px;
}

/* ==========================================
   7. Список магазинов
   ========================================== */

/* Скрываем дублирующую плашку способа получения */

dialog.hitek-availability-panel
.hitek-product-stock__summary {
    display: none;
}

/* Контейнер магазинов */

dialog.hitek-availability-panel
.hitek-product-stock__shops {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-width: 0;
}

/* Отдельный магазин */

dialog.hitek-availability-panel
.hitek-product-stock__shop {
    display: flex;
    flex-direction: column;
    gap: 12px;

    width: 100%;
    min-width: 0;

    margin: 0;
    padding: 19px 0;

    border: 0;
    border-bottom: 1px solid var(--hr-border);
    border-radius: 0;

    background: transparent;
    box-shadow: none;
}

dialog.hitek-availability-panel
.hitek-product-stock__shop:last-child {
    border-bottom: 0;
}

/* Информация о магазине */

dialog.hitek-availability-panel
.hitek-product-stock__shop-header {
    display: block;
    width: 100%;
}

dialog.hitek-availability-panel
.hitek-product-stock__shop-info {
    min-width: 0;
}

dialog.hitek-availability-panel
.hitek-product-stock__shop-name {
    display: block;

    margin: 0;

    color: var(--hr-text);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;

    overflow-wrap: anywhere;
}

dialog.hitek-availability-panel
.hitek-product-stock__shop-address {
    display: block;

    margin-top: 5px;

    color: var(--hr-text-secondary);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.5;

    overflow-wrap: anywhere;
}

/* ==========================================
   8. Остатки и кнопка выбора
   ========================================== */

dialog.hitek-availability-panel
.hitek-product-stock__shop-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;

    width: 100%;
    min-width: 0;
}

/* Наличие */

dialog.hitek-availability-panel
.hitek-product-stock__quantity {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    flex: 0 1 auto;
    min-width: 0;

    color: #39834e;

    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
}

/* Зелёный индикатор */

dialog.hitek-availability-panel
.hitek-product-stock__quantity--available::before {
    content: "";

    display: block;

    flex: 0 0 6px;
    width: 6px;
    height: 6px;

    border-radius: 50%;
    background: #44995e;
}

/* Кнопка "Выбрать магазин" */

dialog.hitek-availability-panel
.hitek-product-stock__select {
    appearance: none;
    -webkit-appearance: none;

    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 9px;

    flex: 0 0 auto;

    width: auto;
    min-height: 38px;

    margin: 0;
    padding: 7px 3px 7px 10px;

    border: 0;
    border-radius: 0;

    background: transparent;
    color: var(--hr-text-graphite);

    font: inherit;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;

    cursor: pointer;

    transition: color .2s ease;
}

/* Стрелка */

dialog.hitek-availability-panel
.hitek-product-stock__select::after {
    content: "";

    display: block;
    flex: 0 0 7px;

    width: 7px;
    height: 7px;

    border-top: 1.5px solid currentColor;
    border-right: 1.5px solid currentColor;

    transform: rotate(45deg);

    transition: transform .2s ease;
}

/* Наведение */

dialog.hitek-availability-panel
.hitek-product-stock__select:hover {
    border: 0;
    background: transparent;
    color: var(--hr-accent);
}

dialog.hitek-availability-panel
.hitek-product-stock__select:hover::after {
    transform: translateX(3px) rotate(45deg);
}

/* Клавиатурная навигация */

dialog.hitek-availability-panel
.hitek-product-stock__select:focus-visible {
    outline: 2px solid var(--hr-accent);
    outline-offset: 2px;
}

/* ==========================================
   9. Анимация панели
   ========================================== */

@keyframes hitek-panel-enter {
    from {
        opacity: .9;
        transform: translateX(26px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes hitek-backdrop-enter {
    from {
        background: transparent;
    }

    to {
        background: var(--hr-overlay);
    }
}

/* ==========================================
   Мобильная версия
   ========================================== */

@media (max-width: 767px) {

    /* Кнопка на карточке товара */

    .hitek-product-availability {
        margin-top: 12px;
    }

    .hitek-product-availability
    .hitek-product-availability__trigger {
        min-height: 64px;
        padding: 10px 12px;
        gap: 10px;
    }

    .hitek-product-availability__icon {
        flex: 0 0 36px;
        width: 36px;
        height: 36px;
    }

    .hitek-product-availability__title {
        font-size: 13px;
    }

    .hitek-product-availability__subtitle {
        font-size: 11px;
    }

    /* Полноэкранная панель */

    dialog.hitek-availability-panel {
        inset: 0;
        width: 100%;
        max-width: none;
        height: 100vh;
        height: 100dvh;
        max-height: none;
        margin: 0;
        border-radius: 0;
    }

    dialog.hitek-availability-panel .hitek-availability-panel__title-desktop {
        display: none;
    }

    dialog.hitek-availability-panel .hitek-availability-panel__title-mobile {
        display: inline;
    }

    /* Компактная шапка */

    .hitek-availability-panel__header {
        align-items: center;
        gap: 8px;
        padding:
            max(16px, env(safe-area-inset-top))
            16px
            16px;
    }

    .hitek-availability-panel
    .hitek-availability-panel__title {
        font-size: 17px;
        font-weight: 600;
        line-height: 1.3;
        letter-spacing: -0.3px;
    }

    .hitek-availability-panel
    .hitek-availability-panel__close {
        flex: 0 0 32px;
        width: 32px;
        height: 32px;
        margin: 0;
    }

    /* Прокручиваемая область */

    .hitek-availability-panel__body {
        padding:
            0
            16px
            max(24px, env(safe-area-inset-bottom));
    }

    /* Строки магазинов */

    dialog.hitek-availability-panel
    .hitek-product-stock__shop {
        gap: 9px;
        padding: 16px 0;
    }

    dialog.hitek-availability-panel
    .hitek-product-stock__shop-name {
        font-size: 13px;
        line-height: 1.4;
    }

    dialog.hitek-availability-panel
    .hitek-product-stock__shop-address {
        margin-top: 4px;
        font-size: 12px;
        line-height: 1.45;
    }

    /* Остаток и выбор ВСЕГДА в одной строке */

    dialog.hitek-availability-panel
    .hitek-product-stock__shop-bottom {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        flex-wrap: nowrap;
        gap: 8px;
    }

    dialog.hitek-availability-panel
    .hitek-product-stock__quantity {
        flex: 0 1 auto;
        font-size: 11px;
        gap: 5px;
        white-space: nowrap;
    }

    /* Текстовая кнопка со стрелкой */

    dialog.hitek-availability-panel
    .hitek-product-stock__select {
        flex: 0 0 auto;
        width: auto;
        min-height: 40px;
        padding: 8px 3px 8px 6px;

        border: 0;
        border-radius: 0;

        background: transparent;
        font-size: 11px;
        font-weight: 600;
        white-space: nowrap;
    }

    dialog.hitek-availability-panel
    .hitek-product-stock__select:hover {
        background: transparent;
        border: 0;
        color: var(--hr-accent);
    }
}