/* ========================================================================== MIROLINE — корзина и избранное: строки заказа, сводка, пустые состояния ========================================================================== */ .cart-page, .favorites { padding-block: var(--sp-6) var(--sp-16); } /* Что показать — список или пустое состояние — известно только браузеру. Короткий скрипт в ставит признак на до первой отрисовки, иначе страница успевает мигнуть словом «пусто». Дальше признак переставляют скрипты страниц; атрибут hidden здесь не используется. */ html[data-cart-state="empty"] .cart__layout, html[data-cart-state="empty"] .checkout__layout, html[data-cart-state="full"] .cart-page .blank, html[data-cart-state="full"] .checkout .blank, html[data-fav-state="empty"] .favorites .products, html[data-fav-state="full"] .favorites .blank { display: none; } /* --- Раскладка корзины ------------------------------------------------------- */ .cart__layout { display: grid; grid-template-columns: minmax(0, 1fr) 21rem; gap: 3rem; align-items: start; } /* --- Полоса до опта ---------------------------------------------------------- */ .wholesale-bar { margin-bottom: var(--sp-8); padding: var(--sp-4) var(--sp-6); background: var(--c-accent-soft); border-radius: var(--radius); } .wholesale-bar[data-reached] { background: var(--c-surface); } .wholesale-bar__text { margin: 0 0 var(--sp-3); font-size: var(--fs-sm); line-height: 1.5; color: var(--c-ink-on-soft); } .wholesale-bar[data-reached] .wholesale-bar__text { color: var(--c-ink-2); } .wholesale-bar__text strong { color: var(--c-ink); font-weight: 500; } .wholesale-bar__track { height: .25rem; background: rgba(28, 24, 21, .1); border-radius: .25rem; overflow: hidden; } .wholesale-bar__fill { display: block; height: 100%; background: var(--c-accent); border-radius: .25rem; transition: width var(--t-base) var(--ease); } .wholesale-bar[data-reached] .wholesale-bar__fill { background: var(--c-success); } /* --- Строка заказа ------------------------------------------------------------ */ .cart-list { display: grid; gap: var(--sp-6); } .cart-line { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr) auto; gap: var(--sp-6); padding-bottom: var(--sp-6); border-bottom: 1px solid var(--c-line); } .cart-line:last-child { border-bottom: 0; padding-bottom: 0; } .cart-line__media { /* якорь для стикеров в углу снимка */ position: relative; display: block; aspect-ratio: 3 / 4; background: var(--c-surface); border-radius: var(--radius); overflow: hidden; } .cart-line__media img { width: 100%; height: 100%; object-fit: cover; } .cart-line__title { margin: 0 0 var(--sp-2); /* это h2 ради порядка заголовков, но набирается основным шрифтом: антиква здесь читалась бы как заголовок раздела */ font-family: var(--f-text); font-size: var(--fs-body); font-weight: 400; line-height: 1.4; } .cart-line__title a { text-decoration: none; } /* Стикеры строки — там же, где на карточке товара: угол снимка, столбиком. Снимок здесь 80 px против 300+ в сетке, поэтому бейдж идёт в уменьшенном размере (.badge--mini) и прижимается к краю плотнее. */ .cart-line__badges { position: absolute; top: var(--sp-1); left: var(--sp-1); z-index: 2; display: flex; flex-direction: column; align-items: flex-start; gap: .125rem; max-width: calc(100% - var(--sp-2)); } .cart-line__badges .badge { position: static; /* Длинное название стикера на узкой миниатюре: переносим по словам, а не распираем снимок и не режем текст многоточием. */ max-width: 100%; overflow-wrap: anywhere; } .cart-line__options { display: flex; flex-wrap: wrap; gap: var(--sp-4); margin: 0 0 var(--sp-4); font-size: var(--fs-xs); color: var(--c-ink-2); } /* Позиция из каталога кладётся без размера — выбор стоит прямо в строке. Рамка акцентная, чтобы поле не потерялось среди спокойных элементов. */ .cart-line__size { display: inline-block; margin-bottom: var(--sp-4); } .cart-line__size .select { border-color: var(--c-accent); color: var(--c-accent); } .cart-line__controls { display: flex; align-items: center; gap: var(--sp-4); } .cart-line__remove { font-size: var(--fs-xs); color: var(--c-ink-2); text-decoration: underline; text-underline-offset: .1875rem; background: none; cursor: pointer; transition: color var(--t-fast) var(--ease); } .cart-line__remove:hover { color: var(--c-error); } .cart-line__prices { text-align: right; white-space: nowrap; } .cart-line__sum { font-size: 1.0625rem; font-weight: 600; font-variant-numeric: tabular-nums; } .cart-line__unit { margin: var(--sp-1) 0 0; font-size: var(--fs-xs); color: var(--c-ink-2); font-variant-numeric: tabular-nums; } /* оптовая цена подсвечивается, только когда она реально включилась */ .cart-line__wholesale { display: inline-block; margin-top: var(--sp-1); font-size: var(--fs-xs); color: var(--c-accent); } /* уменьшённый счётчик количества: тот же компонент, что в карточке товара */ .cart-line .qty button { width: 2.25rem; height: 2.5rem; font-size: 1rem; } .cart-line .qty input { width: 2rem; } /* --- Сводка -------------------------------------------------------------------- */ .summary { position: sticky; top: calc(var(--header-h) + var(--sp-4)); padding: var(--sp-8); background: var(--c-surface); border-radius: var(--radius); } .summary__title { margin: 0 0 var(--sp-6); font-family: var(--f-display); font-size: 1.5rem; font-weight: 400; } .summary__rows { display: grid; gap: var(--sp-3); margin: 0 0 var(--sp-6); padding-bottom: var(--sp-6); border-bottom: 1px solid var(--c-surface-2); font-size: var(--fs-sm); } .summary__row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-4); } .summary__row dt { color: var(--c-ink-2); } .summary__row dd { margin: 0; font-variant-numeric: tabular-nums; white-space: nowrap; } .summary__row--saving dd { color: var(--c-success); } .summary__total { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-4); margin-bottom: var(--sp-6); } .summary__total dt { font-size: var(--fs-body); font-weight: 500; } .summary__total dd { margin: 0; font-family: var(--f-display); font-size: 1.875rem; line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap; } .summary__action { width: 100%; } .summary__note { margin: var(--sp-4) 0 0; font-size: var(--fs-xs); line-height: 1.6; color: var(--c-ink-2); } /* Причина, по которой оформление закрыто. Живёт вплотную к кнопке — это её продолжение, а не отдельная заметка, поэтому отступ сверху меньше обычного. */ .summary__note--lock { margin-top: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-radius: var(--radius); background: var(--c-accent-soft); color: var(--c-ink-on-soft); } .summary__note--lock strong { color: var(--c-ink); font-weight: 500; white-space: nowrap; } /* Ответ на нажатие закрытой кнопки: подсказка коротко наливается цветом. Ровно один момент движения — покупатель уже смотрит на кнопку, ему нужно перевести взгляд на строку под ней, а не разглядывать эффект. */ .summary__note--lock[data-pulse] { animation: lock-note-pulse 900ms var(--ease); } @keyframes lock-note-pulse { 0% { background: var(--c-accent-soft); } 18% { background: #EBD2C4; } 100% { background: var(--c-accent-soft); } } /* Действия над составом заказа: увести к корзине и очистить её. Приглушены намеренно — рядом стоит основная кнопка подтверждения. */ .summary__actions { display: flex; flex-wrap: wrap; gap: var(--sp-4); margin-top: var(--sp-6); padding-top: var(--sp-4); border-top: 1px solid var(--c-surface-2); } .summary__link { font-size: var(--fs-xs); color: var(--c-ink-2); text-decoration: underline; text-underline-offset: .1875rem; background: none; cursor: pointer; transition: color var(--t-fast) var(--ease); } .summary__link:hover { color: var(--c-accent); } .summary__link--danger:hover { color: var(--c-error); } .summary__link[data-confirm] { color: var(--c-error); } /* --- Пустое состояние ------------------------------------------------------------ */ .blank { padding: var(--sp-16) 0; text-align: center; } .blank__icon { display: grid; place-items: center; width: 4.5rem; height: 4.5rem; margin: 0 auto var(--sp-6); color: var(--c-neutral); background: var(--c-surface); border-radius: var(--radius-pill); } .blank p { max-width: 23.1em; margin: var(--sp-4) auto var(--sp-8); font-size: var(--fs-sm); line-height: 1.65; color: var(--c-ink-2); } .blank__actions { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--sp-3); } /* --- Избранное --------------------------------------------------------------------- */ /* сетка та же, что в каталоге, но без панели фильтров — четыре колонки */ .favorites .products { grid-template-columns: repeat(4, minmax(0, 1fr)); } /* --- Адаптив ------------------------------------------------------------------------- */ @media (max-width: 1023px) { .cart__layout { grid-template-columns: minmax(0, 1fr); } /* сводка перестаёт липнуть и просто идёт после списка */ .summary { position: static; } } @media (max-width: 767px) { .cart-line { grid-template-columns: 5rem minmax(0, 1fr); gap: var(--sp-4); } /* цена уезжает под название, в один ряд со счётчиком */ .cart-line__prices { grid-column: 2; text-align: left; } .cart-line__controls { margin-bottom: var(--sp-3); } .favorites .products { grid-template-columns: repeat(2, minmax(0, 1fr)); } .summary { padding: var(--sp-6); } }