@layer pages {
/* ══════════════════════════════════════════════════════════════
   prod-offers.css
   UX-5.1 Порядок подключения: common → prod-base → prod-gallery → prod-ui → ЭТОТ → cart-bar
   Перебивает: prod-ui.css (offer cards, статусы кнопок)
   Перебивается: cart-bar.css (p-desktop-actions layout + визуал кнопок — spec 0,2,0 > 0,1,0)
   ВАЖНО: layout (.p-desktop-actions) и визуал кнопок → cart-bar.css. Здесь только transition,
          focus-visible, :active, busy-state, btn-in-cart (зелёный "В корзине").
   ══════════════════════════════════════════════════════════════ */
/* Воздух между заголовком "Варианты покупки" и первой карточкой.
   ВАЖНО: глобальный reset (margin:0) убивает browser default h2 margin — обязателен явный. */
.p-offers > h2 {
    margin-bottom: 12px;
}

/* [SEC: Offer Cards] */
.p-offer-card {
    width: 100%;
    background: var(--card);     /* M-7: #fff → var(--card) */
    border: 1px solid var(--border);
    border-radius: 14px;         /* M-2: 20px → 14px — пропорционально compact padding */
    padding: 12px 14px;          /* M-2: 16px → 12px 14px — компактнее при 1-2 офферах */
    margin-bottom: 14px;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 12px;                   /* M-2: 16px → 12px */
    align-items: center;
    color: inherit;
    text-align: left;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    outline: none;
    /* 3.1 Единый easing для всех свойств — Material Design standard */
    transition: border-color .18s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow .18s cubic-bezier(0.4, 0, 0.2, 1),
                transform .15s cubic-bezier(0.4, 0, 0.2, 1),
                background-color .2s cubic-bezier(0.4, 0, 0.2, 1);
}

.p-offer-card:hover,
.p-offer-card:focus-visible {
    border-color: var(--accent);
    /* AUDIT-3.1: мягче hover — оффер уже в контексте покупки, не надо кричать */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
    transform: translateY(-1px);
}

.p-offer-card:active {
    transform: translateY(1px);
}

.p-offer-card.is-selected {
    border-color: var(--accent);
    background: var(--accent-surface);    /* M-7: #faf8ff → var(--accent-surface) */
    box-shadow: 0 10px 25px rgba(var(--accent-rgb), .12);
}

.p-offer-left {
    min-width: 0;
}

.p-offer-desc {
    font-size: 13px;    /* C-1: 14px на десктопе — в media query ниже */
    line-height: 1.45;
    color: var(--text);
    word-break: break-word;
    /* ВАЖНО: line-clamp/overflow:hidden ЗАПРЕЩЁН — полное описание оффера критично
       для выбора товара (склад, цвет, комплектация, гарантия видны пользователю сразу) */
}

.p-offer-right {
    text-align: right;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}

/* UX-AUDIT PROD-2.1: цена оффера 24px — это ТА цена, за которую покупают.
   Была 20px — конкурировала с базовой "от X" (28px) и проигрывала */
.p-price-som {
    font-size: 24px;    /* C-1: 28px на десктопе — в media query ниже */
    font-weight: 800;
    color: var(--price-color);
    padding: 4px 10px;
    border-radius: 8px;
    /* AUDIT P2: плавная смена цены при переключении оффера */
    transition: opacity .15s ease;
}

.p-price-dol {
    font-size: 11px;
    line-height: 1.2;
    color: var(--text-muted);
}
/* AUDIT-3.2: валюта мельче числа — число доминирует, быстрее считывание */
.p-price-cur {
    font-size: 60%;
    font-weight: 600;
    vertical-align: baseline;
    opacity: .7;
}

.p-offer-badge {
    /* AUDIT-3.6: "Склад" — техническая инфо, максимально тихая.
       Без фона — только текст, не конкурирует с ценой и "Выбрать" */
    display: inline-block;
    background: none;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 400;
    padding: 0;
    border-radius: 0;
    margin-top: 2px;
    opacity: .5;
}

/* AUDIT P1: "Выбрать" — заметнее, чтобы было очевидно что карточка кликабельна */
.p-offer-pick {
    font-size: 13px;
    font-weight: 700;
    color: var(--accent);
    /* AUDIT P1: лёгкий accent background — как ghost button */
    background: color-mix(in srgb, var(--accent) 8%, transparent);
    padding: 4px 10px;
    border-radius: 6px;
    transition: background .15s, transform .15s;
    white-space: nowrap;
}

.p-offer-card.is-selected .p-offer-pick {
    color: var(--success);   /* M-7: #059669 → var(--success) */
    /* AUDIT-2.4: плашка "Выбрано" — статус чётко виден, не теряется в тексте */
    background: color-mix(in srgb, var(--success) 12%, transparent);
    padding: 2px 8px;
    border-radius: 6px;
    /* 3.2 Subtle scale при выборе оффера */
    transform: scale(1.05);
}

/* UX-3.1: .p-desktop-actions удалён — управляется cart-bar.css (специфичность 0,2,0 > 0,1,0).
   UX-5.2: мёртвый код кнопок удалён — их стили полностью перебиваются cart-bar.css.
   ВАЖНО: layout (.p-desktop-actions) и визуал кнопок (.p-btn-buy-now/.p-btn-add-cart) живут в cart-bar.css.
   Здесь остаются только: transition, focus-visible, :active, busy-state, btn-in-cart.

   P2-2.1 УТОЧНЕНИЕ (CSS Architecture refactor):
   Специфичность .p-btn-buy-now в prod-offers (0,1,0) < специфичность .p-desktop-actions .p-btn-buy-now
   в cart-bar (0,2,0). Высшая специфичность всегда побеждает, независимо от load order.
   Поэтому cart-bar.css может идти в любом порядке внутри @layer pages — стили cart-bar приоритетнее. */

/* OFFERS>[SEC: Cart Button States + Toast] »»» */
.p-btn-buy-now,
.p-btn-add-cart {
    position: relative;
    transition: transform .12s ease, opacity .18s ease, background-color .18s ease, color .18s ease, box-shadow .18s ease;
}

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

.p-btn-buy-now:active,
.p-btn-add-cart:active {
    transform: translateY(1px) scale(.985);
}

.p-btn-buy-now.btn-busy,
.p-btn-add-cart.btn-busy {
    pointer-events: none;
    opacity: .92;
}

.p-btn-buy-now.btn-busy::after,
.p-btn-add-cart.btn-busy::after {
    content: "";
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-left: 8px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    vertical-align: -2px;
    animation: cart-spin .6s linear infinite;
}

.p-btn-add-cart.btn-in-cart {
    background: var(--success);   /* M-7: #1f9d67 → var(--success) */
    color: #fff;
    box-shadow: 0 8px 18px rgba(16, 185, 129, .18);
}

.p-btn-add-cart.btn-ok,
.p-btn-buy-now.btn-ok {
    animation: cart-pop .22s ease;
}

/* Фикс: стиль заглушки «Нет в наличии» (PHP + JS product.ui.js) */
.empty-stock {
    padding: 16px;
    text-align: center;
    font-size: 14px;
    color: var(--text-muted);
    background: var(--border);
    border-radius: 12px;
}

/* cart-toast → перенесён в common.css (L-7: унификация) */

@keyframes cart-spin {
    to {
        transform: rotate(360deg);
    }
}

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

    50% {
        transform: scale(1.03);
    }

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

/* OFFERS>[SEC: Cart Button States + Toast] ««« */

/* bottom-nav, nav-item, nav-label → common.css */
/* УДАЛЕНО: .mobile-sticky-bar — мёртвый код, в шаблоне используется .p-footer (cart-bar.css) */

/* ── C-1: Desktop Typography Scale ─────────────────────────── */
@media (min-width: 769px) {
    .p-offer-desc { font-size: 14px; line-height: 1.5; }
    /* UX-AUDIT PROD-2.1: desktop 28px — крупнее базовой "от" (32px → 24px) */
    .p-price-som  { font-size: 28px; }
}
} /* @layer pages */