/* ========================================================================== Корзина: кнопка «В корзину», значок в шапке и мини-корзина (US-001). Токены и компоненты — из css/style.css; здесь только то, чего там нет. ========================================================================== */ /* --- Что работает только со скриптами ------------------------------------- */ /* Корзина целиком держится на js/cart.js: без скриптов класть в неё некуда, а кнопка, которая ничего не делает, хуже её отсутствия. Класс has-js ставит js/config.js в , до первой отрисовки, поэтому блок не мигает. */ .cart-mini, .cart-add { display: none; } .has-js .cart-mini { display: block; } .has-js .cart-add { display: inline-flex; } /* --- Значок корзины в шапке ------------------------------------------------ */ .cart-mini { position: relative; flex: 0 0 auto; } .cart-mini__toggle { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.5rem 0.85rem; font: inherit; font-weight: 600; color: var(--color-text); background: var(--color-surface); border: 1px solid var(--color-border-strong); border-radius: var(--radius-pill); cursor: pointer; } .cart-mini__toggle:hover { background: var(--color-primary-soft); color: var(--color-primary-dark); } .cart-mini__icon { font-size: 1.05rem; line-height: 1; } /* Число товаров. Кружок читается как значок, но подпись рядом (data-cart-label, визуально скрытая) остаётся текстом: одна цифра без контекста ничего не сообщает тому, кто страницу не видит. */ .cart-mini__count { min-width: 1.4rem; padding: 0 0.35rem; display: inline-grid; place-items: center; font-size: var(--fs-small); font-weight: 700; line-height: 1.4rem; color: #fff; background: var(--color-primary); border-radius: var(--radius-pill); } /* --- Панель мини-корзины --------------------------------------------------- */ .cart-mini__panel { position: absolute; right: 0; top: calc(100% + 0.6rem); z-index: 50; width: min(22rem, calc(100vw - 2rem)); padding: var(--space-md); display: grid; gap: var(--space-xs); background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); } .cart-mini__panel[hidden] { display: none; } .cart-mini__title { font-size: var(--fs-h3); font-weight: 700; letter-spacing: -0.02em; } .cart-mini__empty { color: var(--color-muted); font-size: var(--fs-small); } .cart-mini__list { display: grid; gap: var(--space-xs); max-height: 17rem; overflow-y: auto; } .cart-mini__line { display: grid; grid-template-columns: 3rem 1fr auto; align-items: center; gap: var(--space-xs); padding-bottom: var(--space-xs); border-bottom: 1px solid var(--color-border); } .cart-mini__line:last-child { border-bottom: 0; padding-bottom: 0; } .cart-mini__thumb { width: 3rem; height: 3rem; object-fit: contain; background: var(--color-surface); border-radius: var(--radius-sm); } .cart-mini__line-body { min-width: 0; } .cart-mini__line-name { font-weight: 600; line-height: 1.3; } .cart-mini__line-link { color: var(--color-text); } .cart-mini__line-link:hover { color: var(--color-primary); } .cart-mini__line-option, .cart-mini__line-count { font-size: var(--fs-small); color: var(--color-muted); } .cart-mini__line-total { font-weight: 700; white-space: nowrap; } .cart-mini__summary { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-xs); padding-top: var(--space-xs); border-top: 1px solid var(--color-border); font-weight: 600; } .cart-mini__summary[hidden] { display: none; } .cart-mini__total { font-size: 1.25rem; font-weight: 700; letter-spacing: -0.02em; } .cart-mini__saving { font-size: var(--fs-small); font-weight: 600; color: var(--color-success); } /* Что ответила корзина: подтверждение или причина отказа. Тон дублирует смысл цветом, но не заменяет его — текст остаётся главным. */ .cart-mini__status { font-size: var(--fs-small); padding: var(--space-xs) var(--space-sm); border-radius: var(--radius-sm); background: var(--color-success-soft); color: var(--color-success); } .cart-mini__status[hidden] { display: none; } .cart-mini__status[data-tone="error"] { background: var(--color-danger-soft); color: var(--color-danger); } /* --- Ответ корзины рядом с кнопкой ----------------------------------------- */ /* Та же строка статуса, что и в панели, но на месте нажатия: под кнопкой на карточке товара и в окне быстрого просмотра. Окно перекрывает шапку, и подтверждение в панели из-под него не видно. */ .cart-status { font-size: var(--fs-small); line-height: 1.5; padding: var(--space-xs) var(--space-sm); border-radius: var(--radius-sm); background: var(--color-success-soft); color: var(--color-success); } .cart-status[hidden] { display: none; } .cart-status[data-tone="error"] { background: var(--color-danger-soft); color: var(--color-danger); } /* --- Кнопка «В корзину» ---------------------------------------------------- */ /* Отдельного оформления кнопке не нужно: она обычная .btn из css/style.css. Здесь — только выравнивание в тех местах, где она стоит рядом с другими. */ .cart-add { align-items: center; justify-content: center; gap: 0.4rem; } /* На узком экране шапка складывается: кнопка меню уезжает влево, корзина остаётся справа от неё, а панель растягивается почти во всю ширину. */ @media (max-width: 47.99em) { .cart-mini__toggle { padding: 0.5rem 0.7rem; } .cart-mini__label { display: none; } .cart-mini__panel { width: min(20rem, calc(100vw - 1.5rem)); } }