@layer pages {
/* CART>[GRP: Cart Styles] */
/* Токены, ресет, shared-компоненты → common.css */
/* box-sizing, body font, a, ul, button reset → common.css */

/* ========== Cart Footer (фиксированный, снизу) ========== */
/* AUDIT-1: footer как checkout — card фон, border-top, без accent-плашки */
.cart-footer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: var(--z-cart-footer);
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 16px;
    background: var(--card);
    border-top: 1px solid var(--border);
    box-shadow: 0 -2px 8px rgba(0, 0, 0, .06);
}

/* UX-5.4: .badge base → common.css */
/* E-2: Фикс — .badge из common.css стилизован под brand-header (белый на белом).
   В контенте фон светлый (--card), переопределяем на --accent. */
.cart-page-title .badge {
    background: var(--accent);
    color: var(--on-color);
}

/* ========== Page Title (перенесён из хедера в контент) ========== */
/* [2.1] Заголовок "Корзина" с badge — в контенте, а не в хедере */
.cart-page-title {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 0 12px;
}
.cart-page-title h1 {
    font-size: 20px;
    font-weight: 700;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
}

/* P1 AUDIT FIX: кнопка "Очистить" — серая с border, hover → danger-red */
.cart-btn-clear {
    width: 36px;
    height: 36px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text-muted);
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background .15s, color .15s, border-color .15s;
    position: relative;
}

.cart-btn-clear::before {
    content: '';
    position: absolute;
    inset: -8px;
}

.cart-btn-clear:hover {
    background: var(--danger-surface);
    color: var(--danger);
    border-color: var(--danger);
}

/* ========== Content ========== */
.cart-content {
    max-width: var(--container-form);   /* H-1: 800px → переменная */
    margin: 0 auto;
    padding: 16px;
}

/* ========== Empty State ========== */
/* AUDIT-2.7: Empty cart — иконка, заголовок, текст и CTA */
.cart-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    text-align: center;
}

/* AUDIT-2.7: Empty cart — иконка крупнее, мягкий цвет. "Приветливо пусто, не грустно" */
.cart-empty-icon {
    font-size: 64px;
    color: var(--border);
    margin-bottom: 16px;
}

.cart-empty h2 {
    font-size: 20px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 8px;
}

.cart-empty p {
    font-size: 14px;
    color: var(--text-muted);
    margin-bottom: 24px;
}

/* AUDIT-2.7: CTA "Перейти к покупкам" — orange gradient, заметный */
.cart-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 28px;
    background: linear-gradient(135deg, var(--orange) 0%, var(--orange-dark) 100%);
    color: var(--on-color);
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    border-radius: 12px;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(var(--orange-rgb), 0.3); /* UX-A:5.4 */
    transition: transform .15s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow .15s,
                background .15s;
}

/* 8.2 Hover только для десктопа — lift + shadow */
@media (hover: hover) {
    .cart-btn-primary:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(var(--orange-rgb), 0.4); /* UX-A:5.4 */
    }
}

.cart-btn-primary:active {
    transform: scale(0.98);
    box-shadow: 0 2px 8px rgba(var(--orange-rgb), .2);
}

/* ========== Cart List ========== */
/* Все items в одном контейнере-карточке — как items-summary на /checkout/
   Разделитель между items — hairline, не отдельные card-тени. */
.cart-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    background: var(--card);
    border-radius: 16px;
    box-shadow: var(--shadow-sm);   /* UX-5.3: --shadow не определён в :root → --shadow-sm */
    overflow: hidden;
}

.cart-item {
    display: flex;
    gap: 14px;  /* 12→14: больше воздуха между фото и телом */
    padding: 16px; /* 14/16→16: равномерный отступ */
    border-bottom: 1px solid var(--border);
    transition: transform .2s, opacity .2s, box-shadow .2s;  /* UX-5.5: 0.Xs→.Xs */
    animation: slideIn .3s ease-out;
}

/* 8.1 Hover на элементах корзины — subtle lift */
@media (hover: hover) {
    .cart-item:hover {
        box-shadow: 0 2px 12px rgba(0, 0, 0, .08);
    }
}

.cart-item:last-child {
    border-bottom: none;
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
}

/* Photo + section label */
/* AUDIT-3: position:relative — нужен для ::before shimmer (absolute overlay) */
.cart-item-img {
    width: 90px; /* 80→90: крупнее для лучшей видимости товара */
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    position: relative;
}
.cart-item-img img,
.cart-item-img .cart-item-link,
.cart-item-img .cart-no-photo {
    width: 90px;  /* 80→90 */
    height: 90px; /* 80→90 */
    border-radius: 12px;
    overflow: hidden;
    background: var(--bg);
    display: flex;
    align-items: center;
    justify-content: center;
    /* AUDIT-3: position:relative для ::before shimmer внутри link */
    position: relative;
}
/* Лейбл секции под фото */
.cart-item-section {
    font-size: 10px;
    color: var(--accent);
    font-weight: 600;
    text-align: center;
    line-height: 1.2;
    max-width: 90px; /* 80→90: синхрон с cart-item-img */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* AUDIT-3: Shimmer теперь на ::before (cart-item-link), не на img.
   img стартует невидимым, плавно проявляется через .loaded */
.cart-item-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    color: transparent; /* скрыть alt-текст */
    position: relative; /* поверх ::before shimmer */
    opacity: 0;
    transition: opacity .35s ease;
}

/* Фото загружено — плавное появление */
.cart-item-img img.loaded {
    opacity: 1;
}
/* AUDIT-3: Shimmer-волна на псевдо-элементе ссылки (не на img).
   Паттерн из каталога: ::before с animation, img стартует opacity:0, fade-in по .loaded.
   ВАЖНО: ::before на .cart-item-link, не на .cart-item-img — чтоб shimmer был внутри
   скруглённого контейнера (border-radius + overflow:hidden на link). */
.cart-item-link::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, var(--border) 25%, var(--card) 50%, var(--border) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.4s infinite;
    pointer-events: none;
}

/* Shimmer скрывается: фото загружено ИЛИ ошибка загрузки (заглушка) */
.cart-item-link:has(img.loaded)::before,
.cart-item-link:has(.cart-no-photo)::before {
    display: none;
}

.cart-item-img .cart-item-link { text-decoration: none; }
.cart-no-photo { color: var(--border); font-size: 32px; }

/* Body — растягивается на оставшееся место после картинки */
.cart-item-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Строка: название (flex:1) + кнопка удалить (справа) */
.cart-item-top {
    display: flex;
    align-items: flex-start;
    gap: 6px;
}

/* AUDIT-2.3: Название товара — primary content, должно быть читаемым */
.cart-item-title {
    flex: 1;
    min-width: 0;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--text);
    /* Ограничение строк — 2 строки макс, дальше ellipsis */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.cart-item-title a {
    color: inherit;
    text-decoration: none;
}

.cart-item-title a:hover {
    color: var(--accent);
}

/* Нижняя строка: кол-во (слева) + цена (справа) */
.cart-item-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 6px;
}

/* LEAD-AUDIT 3.2: вертикальная компоновка — line-total сверху (крупно), per-unit снизу (мелко) */
.cart-item-price {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}

/* UX-AUDIT CART-3: бейджи 12px, padding 4px 10px — WCAG readability */
.cart-item-badge {
    display: inline-flex;
    width: fit-content;
    font-size: 12px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 99px;
    margin-top: 2px;
}

.cart-item-badge.unavailable {
    background: var(--danger-surface);  /* M-7: #FEE2E2 → var(--danger-surface) */
    color: var(--danger);               /* M-7: #DC2626 → var(--danger) */
}

.cart-item-badge.changed {
    background: var(--warning-surface); /* M-7: #FEF3C7 → var(--warning-surface) */
    color: var(--warning);              /* M-7: #D97706 → var(--warning) */
}

/* LEAD-AUDIT 3.1: per-unit цена видна, мелкая + muted — не конкурирует с line-total.
   ВАЖНО: display:none снят. Видимость управляется из JS (CartApp).
   Показывать только когда qty > 1 (иначе дублирует line-total) */
.cart-price-current {
    font-size: 12px;
    color: var(--text-muted);
    white-space: nowrap;
}

/* AUDIT P1: diff цены — заметнее, чтоб пользователь точно увидел изменение */
.cart-price-diff {
    font-size: 13px;
    font-weight: 700;
    color: var(--danger);
    background: var(--danger-surface);
    padding: 2px 6px;
    border-radius: 4px;
}

.cart-qty-control {
    display: flex;
    align-items: center;
    gap: 4px;
    background: var(--bg);
    border-radius: 8px;
    padding: 4px;
}

.cart-btn-qty {
    width: 28px;
    height: 28px;
    border: none;
    background: var(--card);
    color: var(--text);
    font-size: 16px;
    font-weight: 600;
    border-radius: 6px;
    cursor: pointer;
    transition: background .15s, color .15s, transform .15s; /* UX-3.2: all→explicit — reflow anti-pattern */
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative; /* UX-6.2: для ::before tap area */
}
/* UX-6.2: WCAG 2.2 — 28px → 44px tap zone через ::before */
.cart-btn-qty::before {
    content: '';
    position: absolute;
    inset: -8px;
}

.cart-btn-qty:hover {
    background: var(--accent);
    color: #fff;
}

.cart-btn-qty:active {
    transform: scale(0.95);
}

.cart-qty-value {
    min-width: 24px;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
}

/* AUDIT P1: анимация при обновлении кол-ва — тактильный фидбек */
@keyframes cart-qty-pop {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.15); }
    100% { transform: scale(1); }
}
.cart-qty-value.pop {
    animation: cart-qty-pop .2s ease-out;
}

/* AUDIT-2.3: Line total — #2 по важности после названия */
/* line-total — главная цена за строку (qty × цена) */
.cart-line-total {
    font-size: 16px;
    font-weight: 800;
    color: var(--text);
    white-space: nowrap;
}

/* cart-btn-remove теперь в .cart-item-top (справа от названия), flex-shrink:0 чтоб не сжиматься */
.cart-btn-remove {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s, color .15s;  /* UX-3.2: all→explicit */
    position: relative; /* UX-6.2: для ::before tap area */
}
/* UX-6.2: WCAG 2.2 — 28px → 44px tap zone через ::before */
.cart-btn-remove::before {
    content: '';
    position: absolute;
    inset: -8px;
}

.cart-btn-remove:hover {
    background: var(--danger-surface);  /* M-7: #FEE2E2 → var(--danger-surface) */
    color: var(--danger);
}

/* Footer-специфика (totals + btn уже в общем блоке выше) */

/* AUDIT-1: totals — одна строка мета-инфо над кнопкой */
.cart-totals {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    color: var(--text-muted);
}

/* AUDIT-1: warning в мета-строке — danger цвет */
.cart-totals .warning {
    color: var(--danger);
    font-weight: 600;
}

/* AUDIT-1: CTA — зелёный градиент как checkout, сумма внутри кнопки */
/* ФИКС: justify-content: space-between вместо center — текст слева, сумма справа без overflow */
.cart-btn-checkout {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 14px 20px;
    background: linear-gradient(135deg, var(--success) 0%, var(--success-dark) 100%);
    color: var(--on-color);
    font-size: 17px;
    font-weight: 700;
    border: none;
    border-radius: 14px;
    cursor: pointer;
    min-height: 54px;
    box-shadow: 0 4px 15px rgba(var(--success-rgb), .3);
    transition: transform .15s, box-shadow .15s;
}

/* Текст "Оформить заказ" слева */
.cart-btn-text {
    /* flex: 1 убран — text-align: left не нужен при justify-content: space-between */
}

/* Сумма справа в кнопке — визуальный якорь */
.cart-btn-sum {
    font-size: 17px;
    font-weight: 800;
    white-space: nowrap;
    opacity: .95;
}

.cart-btn-checkout:hover {
    box-shadow: 0 6px 20px rgba(var(--success-rgb), .4);
}

.cart-btn-checkout:active {
    transform: scale(.98);
}

.cart-btn-checkout:disabled {
    opacity: .5;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* ── Toast на cart-странице ────────────────────────────────── */
/* UX-AUDIT FIX-1: Toast всегда над footer, видно и не мешает навигации */
.cart-page .toast {
    bottom: auto;
    top: 80px; /* под header (52px) + запас */
    transform: translate(-50%, -20px);
}

.cart-page .toast.show {
    transform: translate(-50%, 0);
}

/* toast, bottom-nav, nav-badge, chat-fab, more-sheet, catalog-drawer → common.css */

/* CART>[SEC: Layout overrides for bottom-nav] */
@media (max-width: 767px) {
    /* AUDIT-1: footer стал компактнее — totals одна строка + кнопка = ~120px */
    :root { --body-pb: 140px; }
    .cart-footer {
        bottom: var(--bottom-nav-h);
        padding-bottom: calc(12px + env(safe-area-inset-bottom));
    }
}

/* ========== Responsive Desktop ========== */
@media (min-width: 768px) {
    :root { --body-pb: 0; }
    /* IMPORTANT: sticky НЕ игнорирует margin:auto (это fixed!). left/transform хак убран */
    .cart-footer {
        position: sticky;
        left: auto;  /* сброс base fixed left:0 */
        right: auto; /* сброс base fixed right:0 */
        max-width: 960px;
        margin: 24px auto 0;
        padding: 16px 24px;
        bottom: 0;
        border-radius: 16px;
        border-top: none;
        box-shadow: var(--shadow-sm);
    }
    /* AUDIT-1: list теперь со всеми скруглениями — footer отдельно */
    .cart-list {
        border-radius: 16px;
    }
    /* LEAD-AUDIT 4.1: 24→32px — больше воздуха вокруг контента на ПК */
    .cart-content {
        max-width: 960px;
        padding: 32px 24px;
    }
    /* AUDIT-2: увеличить gap и padding на ПК */
    .cart-item { gap: 20px; padding: 20px 24px; }
    /* AUDIT-2: увеличить фото на ПК 100px → 120px */
    .cart-item-img { width: 120px; } /* IMPORTANT: синхрон контейнера с дочерними */
    .cart-item-img img, .cart-item-img .cart-item-link, .cart-item-img .cart-no-photo { width: 120px; height: 120px; }
    .cart-item-section { max-width: 120px; }
    /* LEAD-AUDIT 1.1: заголовок страницы крупнее на ПК — визуальный якорь */
    .cart-page-title h1 { font-size: 24px; }
    /* AUDIT-2: увеличить типографику */
    /* LEAD-AUDIT 1.2: 16→17px + 3 строки на ПК — больше контекста для длинных названий */
    .cart-item-title { font-size: 17px; -webkit-line-clamp: 3; }
    /* LEAD-AUDIT 1.3: мета 11px→13px на ПК, opacity .7→.85 — WCAG readability */
    .cart-item-meta { font-size: 13px; opacity: .85; }
    /* LEAD-AUDIT 1.4: итого строки 18→20px — цена = #1 по важности после названия */
    .cart-line-total { font-size: 20px; }
    /* LEAD-AUDIT 5.1: qty кнопки крупнее на ПК — 28→32px, value 14→15px */
    .cart-btn-qty { width: 32px; height: 32px; font-size: 18px; }
    .cart-qty-value { font-size: 15px; min-width: 28px; }
    /* LEAD-AUDIT 7.1: секция 10→11px на ПК */
    .cart-item-section { font-size: 11px; }
}

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

.cart-item.busy {
    opacity: .68;
    pointer-events: none;
}

.cart-item.busy .cart-btn-qty,
.cart-item.busy .cart-btn-remove {
    pointer-events: none;
}

.cart-btn-checkout:disabled {
    opacity: .55;
    cursor: not-allowed;
    box-shadow: none;
}

/* LEAD-AUDIT 2.1: мета 11→12px + opacity .7→.75 — лучше читаемость без потери иерархии */
.cart-item-meta {
    font-size: 12px;
    color: var(--text-muted);
    opacity: .75;
    margin: 2px 0 4px;
    line-height: 1.3;
}
} /* @layer pages */