/* =============================================================
   LAYOUT / PANELS
   
   Плавающие и sticky-панели. Используются в админке и на сайте.
   
   Все панели — элементы поверх основного контента:
   - bottom-panel, b-panel — прилипающие к низу окна
   - task-bar              — вертикальная панель слева
   - draft-plate           — плавающая плашка снизу по центру
   - sticky-bar            — sticky внутри контента (cart/checkout)
   ============================================================= */

/* =============================================================
   BOTTOM-PANEL — простая полоска, прилипающая к низу
   ============================================================= */

div.bottom-panel {
    background-color: var(--gray-900);
    position: sticky;
    bottom: 0;
    z-index: var(--z-raised);
    padding: 0;
    margin: 0;
}

/* =============================================================
   B-PANEL — нижняя панель с flex-раскладкой
   Для "сников" (snick) внутри — маленьких плашек
   ============================================================= */

.b-panel {
    display: flex;
    background-color: var(--gray-900);
    column-gap: 10px;
    width: 100%;
    padding: var(--space-5);
    position: sticky;
    bottom: 0;
    z-index: var(--z-raised);
}

/* Сник — маленькая плашка на панели */
.snick {
    background-color: var(--bg-surface);
    border-radius: var(--radius-3xl);
    padding: 0 var(--space-4);
    display: flex;
    align-items: center;
    column-gap: var(--space-2);
}

/* =============================================================
   TASK-BAR — вертикальная панель с иконками слева
   ============================================================= */

.task-bar.buttons.s {
    display: grid;
    gap: 0;
    position: fixed;
    background-color: var(--orange-500);
    top: 33dvh;
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    left: 0;
    z-index: var(--z-dropdown);
    box-shadow: var(--shadow-floating);
}

.task-bar.buttons.s .btn.icon {
    padding: 8px;
    width: 48px;
    height: 48px;
}

.task-bar.buttons.s .btn.icon:hover,
.task-bar.buttons.s .btn.icon:focus {
    background-color: var(--orange-700);
}

.task-bar.buttons.s svg {
    stroke: white;
}

/* =============================================================
   DRAFT-PLATE — плавающая плашка снизу по центру
   
   Показывается, когда в корзине/подборке что-то есть.
   Скрывается через .hide.
   ============================================================= */

.draft-plate {
    margin: 0 auto var(--space-5);
    width: max-content;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: var(--z-overlay);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-5);
    padding: var(--space-3) var(--space-5);
    background-color: var(--gray-900);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-floating);
    color: var(--text-tertiary);
}

/* Счётчики внутри плашки */
.draft-plate-counts {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0 var(--space-3);
    font-size: .95em;
}

.draft-plate-counts .count-label {
    font-weight: var(--fw-medium);
}

.draft-plate-counts .count-line {
    display: inline-flex;
    align-items: baseline;
    gap: var(--space-1);
}

/* Разделитель "·" между счётчиками */
.draft-plate-counts .count-line+.count-line::before {
    content: '·';
    margin-right: var(--space-3);
    color: var(--text-tertiary);
}

.draft-plate-counts .count-line.hide {
    display: none;
}

.draft-plate-counts strong {
    font-weight: var(--fw-semibold);
}

.draft-plate-actions {
    display: flex;
    gap: 10px;
    align-items: center;
}

/* Отступ снизу, чтобы плашка не перекрывала последний элемент.
   Применяется, пока плашка видима — через :has(). */
body:has(.draft-plate:not(.hide)) {
    padding-bottom: 60px;
}

/* =============================================================
   STICKY-BAR — sticky-панель внутри контента
   Используется на страницах cart / checkout / product.
   ============================================================= */

aside.sticky-bar-wrapper {
    position: relative;
}

div.sticky-bar {
    display: grid;
    background-color: var(--bg-page);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
}

@media (min-width: 680px) {
    div.sticky-bar {
        position: sticky;
        top: 0;
    }
}

div.sticky-bar p.price {
    padding: var(--space-5) var(--space-5) 0;
}

/* =============================================================
   BUTTON-WRAPPER — sticky-обёртка для кнопки "в корзину"
   ============================================================= */

.unit-container div.button-wrapper {
    width: min-content;
    position: relative;
    overflow: visible;
}

.unit-container div.button-wrapper .add-to-cart {
    position: sticky;
    top: var(--space-5);
}