@layer pages {
    /* ══════════════════════════════════════════════════════════════
   cart-bar.css
   UX-5.1 Порядок подключения: common → prod-* → prod-offers → ЭТОТ → prod-similar
   Перебивает: prod-offers.css (.p-desktop-actions layout + визуал кнопок — spec 0,2,0 > 0,1,0)
   Перебивается: ничем (последний из prod-* файлов, кроме prod-similar)
   ══════════════════════════════════════════════════════════════ */
    /* UX-6.1: высота bottom-nav вынесена в переменную — .p-footer.bottom синхронизирован.
   ВАЖНО: менять только --bottom-nav-h, не править bottom:54px в двух местах. */

    /* Десктоп — кнопки в боковой панели.
   C-3 Вариант B: перемещены ПЕРЕД .p-options в product.php — сразу после цены. */
    .p-desktop-actions {
        display: flex;
        gap: 12px;
        margin-bottom: 20px;
        padding: 4px;
    }

    /* AUDIT P1: было 55/45, упрощено до 50/50 — одинаковый вес обоих CTA */
    .p-desktop-actions .p-btn-buy-now,
    .p-desktop-actions .p-btn-add-cart,
    .p-desktop-actions [data-cart-qtybox] {
        flex: 1 1 50%;
    }

    .p-desktop-actions .p-btn-buy-now,
    .p-desktop-actions .p-btn-add-cart,
    .p-desktop-actions [data-cart-qtybox] {
        border: 0;
        border-radius: 12px;
        /* UX-AUDIT PROD-3.1: единый radius для всех CTA (было 100px pill) */
        /* Фикс: унифицировано с .cart-btn-checkout / .co-btn-submit (54px) */
        height: 54px;
        padding: 0 24px;
        font: inherit;
        font-size: 15px;
        font-weight: 700;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        /* Убрали transition чтобы не мигало при +/- */
    }

    .p-desktop-actions .p-btn-buy-now {
        /* B-2/E-23: Выравнивание CTA — mobile btn-buy тоже orange. Один цвет = primary action. */
        background: var(--orange);
        /* ВАЖНО: --on-color, не --card! Dark mode: --card тёмный → нечитаемо на цветном фоне */
        color: var(--on-color);
        /* AUDIT CTA-1: transparent border = box model идентичен .p-btn-add-cart (border 2px).
       Без этого content-area buy=52px vs cart=48px — кнопки визуально разного размера.
       background просвечивает через transparent (background-clip: border-box). */
        border: 2px solid transparent;
        /* 2.1 Transition для hover/active — только compositor properties, без reflow */
        transition: transform .15s cubic-bezier(0.4, 0, 0.2, 1),
            box-shadow .15s cubic-bezier(0.4, 0, 0.2, 1),
            background .15s;
    }

    .p-desktop-actions .p-btn-add-cart {
        /* AUDIT-1.6: "В корзину" — secondary action. Outlined вместо filled.
       "Купить сейчас" (orange filled) = primary, "В корзину" (outlined) = secondary */
        background: transparent;
        color: var(--accent);
        border: 2px solid var(--accent);
        transition: transform .15s cubic-bezier(0.4, 0, 0.2, 1),
            box-shadow .15s cubic-bezier(0.4, 0, 0.2, 1),
            background .15s, color .15s;
    }

    /* 2.1 Hover только на устройствах с мышью */
    @media (hover: hover) {
        .p-desktop-actions .p-btn-buy-now:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(var(--orange-rgb), .35);
            /* E-23: orange CTA */
        }

        .p-desktop-actions .p-btn-add-cart:hover {
            /* AUDIT-1.6: hover — заливается accent, текст белый */
            background: var(--accent);
            color: var(--on-color);
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(var(--accent-rgb), .25);
        }

        /* Фикс: qty-контрол при hover остаётся зелёным, не перенимает accent от .p-btn-add-cart:hover.
       Spec (0,3,0) = равная, но позже в файле → побеждает. */
        .p-desktop-actions [data-cart-qtybox]:hover {
            background: linear-gradient(135deg, var(--success) 0%, var(--success-dark) 100%);
            color: #fff;
            transform: none;
            box-shadow: 0 4px 12px rgba(var(--success-rgb), .25);
        }
    }

    /* 2.2 Focus-visible: только клавиатурная навигация (не мышь) */
    .p-desktop-actions .p-btn-buy-now:focus-visible,
    .p-desktop-actions .p-btn-add-cart:focus-visible {
        outline: 2px solid var(--accent);
        outline-offset: 3px;
    }

    .p-desktop-actions .p-btn-buy-now:active {
        transform: scale(.96);
        /* AUDIT-3.3: "нажатие" кнопки — яркость падает, тактильный feedback */
        filter: brightness(.92);
    }

    .p-desktop-actions .p-btn-add-cart:active {
        transform: scale(.96);
    }

    /* Убираем active transform для qty-box чтобы не дергалось при +/- */
    .p-desktop-actions [data-cart-qtybox]:active {
        transform: none;
    }

    /* Мобильный футер */
    .p-footer {
        display: none;
    }

    /* Мобильная версия */
    @media (max-width: 768px) {

        /* C-4/E-19: мобильный override через переменную — не трогаем body напрямую */
        /* Фикс: +6px (кнопки 48→54px) → футер стал выше на 6px → body-pb синхронизирован */
        :root {
            --body-pb: 166px;
        }

        .p-desktop-actions {
            display: none;
        }

        .p-footer {
            display: block;
            position: fixed;
            left: 0;
            right: 0;
            bottom: var(--bottom-nav-h);
            /* UX-6.1: 54px→var(--bottom-nav-h) — синхронизировано с .bottom-nav */
            background: var(--card);
            /* M-7: #fff → var(--card) */
            border-radius: 20px 20px 0 0;
            box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
            padding: 16px 16px calc(12px + env(safe-area-inset-bottom));
            /* E-17: 1200 → var(--z-sticky-footer) = 1100, теперь ниже .cart-toast (1300) */
            z-index: var(--z-sticky-footer);
        }

        .p-price-row {
            text-align: left;
            margin-bottom: 12px;
        }

        .p-main-price {
            /* AUDIT-3.4: ориентировочная цена — не конкурирует с CTA кнопками.
           20px вместо 24px, price-color вместо --text — цена "тёплая", кнопки доминируют */
            font-size: 20px;
            font-weight: 800;
            color: var(--price-color);
        }

        .p-action-btns {
            display: flex;
            gap: 10px;
            align-items: center;
        }

        .p-btn-buy,
        .p-btn-cart,
        [data-cart-qtybox] {
            flex: 1;
            border: 0;
            border-radius: 12px;
            /* UX-AUDIT PROD-3.1: единый radius (было 16px) */
            padding: 0 8px;
            /* Фикс: унифицировано с .cart-btn-checkout и .co-btn-submit (54px) */
            height: 54px;
            min-height: 54px;
            font: inherit;
            font-size: 15px;
            font-weight: 600;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            white-space: nowrap;
            transition: transform .1s ease, opacity .1s ease;
        }

        .p-btn-buy {
            background: var(--orange);
            /* M-7: #FF8C42 → var(--orange) */
            color: var(--on-color);
        }

        /* Убираем hover-эффекты на тач-устройствах чтобы не "залипали" */
        @media (hover: hover) {
            .p-btn-buy:hover {}

            .p-btn-cart:hover {}
        }

        .p-btn-cart {
            background: var(--accent);
            color: var(--on-color);
        }

        .p-btn-buy:active,
        .p-btn-cart:active {
            transform: scale(0.98);
        }

        /* bottom-nav, nav-item, nav-label → common.css */
        /* Product page: фиксируем высоту bottom-nav для точного позиционирования .p-footer */
        .bottom-nav {
            height: var(--bottom-nav-h);
            /* UX-6.1: 54px→var(--bottom-nav-h) */
        }

        /* AUDIT P2: на коротких экранах — компактнее footer. iPhone SE = 667px */
        @media (max-height: 600px) {
            :root {
                --body-pb: 130px;
            }

            .p-footer {
                padding: 10px 12px calc(8px + env(safe-area-inset-bottom));
            }

            .p-price-row {
                margin-bottom: 8px;
            }

            .p-main-price {
                font-size: 18px;
            }

            .p-btn-buy,
            .p-btn-cart,
            [data-cart-qtybox] {
                height: 42px;
                min-height: 42px;
            }
        }
    }

    /* [SEC: Inline qty control inside add-to-cart] */
    /* ВАЖНО: реальные кнопки +/− нельзя вкладывать внутрь <button>.
Поэтому делаем визуально одну кнопку, а технически — wrapper с двумя состояниями. */
    .p-cart-action {
        flex: 1;
        min-width: 0;
    }

    /* Фикс: .p-cart-action — прямой flex-child, нужен явный basis.
   ВАЖНО: flex: 1 1 50% на .p-btn-add-cart — мёртвый код (внук flex-контейнера). */
    .p-desktop-actions .p-cart-action {
        flex: 1 1 50%;
    }

    .p-cart-action>[data-cart-trigger],
    .p-cart-action>[data-cart-qtybox] {
        width: 100%;
    }

    [data-cart-qtybox] {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        /* ВАЖНО: AUDIT PROD-3.1 изменил радиус на 12px везде. Глобальное правило было 16px
       и перебивало мобильное через каскад (одинаковая spec 0,1,0, позиция позже в файле).
       Фикс: синхронизировать с PROD-3.1 */
        border-radius: 12px;
        color: var(--on-color);
        background: linear-gradient(135deg, var(--success) 0%, var(--success-dark) 100%);
        /* UX-A:5.5 */
        box-shadow: 0 4px 12px rgba(var(--success-rgb), .25);
        /* UX-A:5.5 */
        overflow: hidden;
        -webkit-tap-highlight-color: transparent;
        user-select: none;
        padding: 0;
    }

    /* UX-4.2: локальные [hidden] хаки удалены — глобальный [hidden]{display:none!important} в common.css */

    /* ВАЖНО: qtybox div имеет class .p-btn-add-cart → наследует border/color/display/justify
   от .p-desktop-actions .p-btn-add-cart (равная spec 0,2,0). Эти свойства ОБЯЗАТЕЛЬНО
   перебить явно, иначе кнопочный стиль "протекает" в qty-контрол. */
    .p-desktop-actions [data-cart-qtybox] {
        border-radius: 12px;
        /* UX-AUDIT PROD-3.1: единый radius (было 100px) */
        padding: 0;
        background: linear-gradient(135deg, var(--success) 0%, var(--success-dark) 100%);
        /* UX-A:5.5 */
        box-shadow: 0 4px 12px rgba(var(--success-rgb), .25);
        /* AUDIT CTA-1: transparent border = box model идентичен .p-btn-buy-now (border 2px).
       Без этого qty-box на 4px выше orange кнопки (52px content vs 48px). */
        border: 2px solid transparent;
        color: var(--on-color);
        /* Фикс: #fff → var(--on-color), наследуется из глобального [data-cart-qtybox] */
        display: flex;
        justify-content: space-between;
    }

    [data-cart-qtybox]::before,
    [data-cart-qtybox]::after {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        border-radius: inherit;
        opacity: 0;
    }

    [data-cart-qtybox]::before {
        background: linear-gradient(120deg,
                transparent 0%,
                transparent 32%,
                rgba(255, 255, 255, .18) 50%,
                transparent 68%,
                transparent 100%);
        transform: translateX(-130%);
    }

    [data-cart-qtybox]::after {
        box-shadow: inset 0 0 0 0 rgba(255, 255, 255, .35);
    }

    [data-cart-qtybox].is-sheen::before {
        animation: cart-qty-sheen .42s ease;
    }

    [data-cart-qtybox].is-burst::after {
        animation: cart-qty-burst .38s ease-out;
    }

    .p-btn-cart-mid {
        flex: 1;
        min-width: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        line-height: 1.1;
    }

    .p-btn-cart-count {
        font-size: 18px;
        /* font-weight: 800; */
        letter-spacing: -.02em;
        font-variant-numeric: tabular-nums;
    }

    .p-btn-cart-note {
        font-size: 10px;
        font-weight: 500;
        opacity: .9;
        margin-top: 2px;
    }

    [data-cart-qtybox] .p-btn-qty {
        flex: 0 0 48px;
        width: 48px;
        height: 100%;
        border: 0;
        padding: 0;
        border-radius: 0;
        background: transparent;
        color: #fff;
        font: inherit;
        font-size: 24px;
        font-weight: 400;
        line-height: 1;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: background-color .1s ease;
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
    }

    @media (hover: hover) {
        [data-cart-qtybox] .p-btn-qty:hover {
            background: rgba(0, 0, 0, 0.05);
        }
    }

    [data-cart-qtybox] .p-btn-qty:active {
        background: rgba(0, 0, 0, .08);
    }

    [data-cart-qtybox] .p-btn-qty:disabled {
        opacity: .45;
    }

    .p-btn-cart-count.is-bump {
        animation: cart-qty-count .22s ease;
    }

    @keyframes cart-qty-sheen {
        0% {
            opacity: 0;
            transform: translateX(-130%);
        }

        25% {
            opacity: 1;
        }

        100% {
            opacity: 0;
            transform: translateX(130%);
        }
    }

    @keyframes cart-qty-burst {
        0% {
            opacity: .28;
            box-shadow: inset 0 0 0 0 rgba(255, 255, 255, .34);
        }

        100% {
            opacity: 0;
            box-shadow: inset 0 0 0 10px rgba(255, 255, 255, 0);
        }
    }

    @keyframes cart-qty-count {
        0% {
            transform: scale(1);
        }

        50% {
            transform: scale(1.15);
        }

        100% {
            transform: scale(1);
        }
    }

    @media (prefers-reduced-motion: reduce) {

        [data-cart-qtybox],
        [data-cart-qtybox] .p-btn-qty,
        .p-btn-cart-count {
            animation: none !important;
            transition: none !important;
        }
    }

    /* cart-toast → перенесён в common.css (L-7: унификация, .is-show не использовалось JS) */

    /* Состояния кнопок */
    [data-busy="1"] {
        /* Убрали opacity чтобы не мигало при +/- */
        pointer-events: none;
    }

    .is-success {
        filter: saturate(1.15);
    }
}

/* @layer pages */