/*
 * Миниатюры товара в корзине, мини-корзине и оформлении — 2:3, а не квадрат.
 *
 * ПОЧЕМУ ЭТОГО МАЛО И ЧТО ГЛАВНОЕ. Квадратность приходит не отсюда: размер
 * `woocommerce_thumbnail` режется 1:1 настройкой магазина, то есть квадратны
 * САМИ ФАЙЛЫ. `object-fit: cover` берёт из такого файла среднюю полосу —
 * кадрирует уже кадрированное, и у высокого снимка от него остаётся узкий
 * поясок. Настоящее лечение — сменить обрезку и перегенерировать миниатюры:
 * `deploy/set-thumbnail-ratio.php`. Тогда файлы станут 2:3, и это правило
 * останется просто рамкой ровной высоты.
 *
 * И ПИСЬМА ЭТИМ НЕ ЛЕЧАТСЯ ВООБЩЕ. Их верстает сервер инлайновыми стилями,
 * наши таблицы туда не доезжают: там миниатюра будет ровно такой, каким
 * окажется файл. Ещё одна причина чинить в корне, а не здесь.
 *
 * ШИРИНУ ОСТАВЛЯЕМ, ВЫСОТУ СЧИТАЕМ ОТ НЕЁ. Наоборот было бы тише для
 * раскладки, но фотографии одежды нужен рост: при равной ширине ряд корзины
 * подрастает на треть, и снимок наконец читается снимком, а не значком.
 */

.wc-block-cart-item__image img,
.wc-block-components-order-summary-item__image img,
.wc-block-mini-cart__products-table .wc-block-cart-item__image img {
  aspect-ratio: 2 / 3;
  height: auto;
  object-fit: cover;
}

/* ---------- Пустая корзина ----------
   Штатный вид — смайлик, «Your cart is currently empty!» и подборка на
   устаревшем блоке — заменён своим: inc/cart-empty.php. Ниже сообщения
   стоят те же вкладки «New Arrivals ↔ Back in Stock», что на главной,
   поэтому третьего призыва к действию здесь нет — только один. */

.mit-empty-cart {
  text-align: center;
  margin: 5rem auto 9rem;
  max-width: 32rem;
  /* Поля по бокам: на узком экране текст не должен упираться в края, а на
     широком они ничего не меняют — блок и так центрирован по своей мере. */
  padding: 1rem 2rem 0;
}

/* Размер и начертание достаются от темы — заголовок остаётся заголовком.
   Прописных здесь нет намеренно: решение владельца, крупная строка капсом
   читается как окрик. */
.mit-empty-cart__title {
  margin: 0;
}

.mit-empty-cart__note {
  margin: 0.75rem 0 0;
  opacity: 0.55;
}

/* Кнопка — та же, что «LOAD MORE» в каталоге: рамка в текущий цвет,
   прописные, широкий трекинг. Копия правил, а не общий класс: файлы
   подключаются на разных страницах, и связывать их зависимостью ради
   одной кнопки дороже, чем повторить семь строк. */
.mit-empty-cart__button {
  display: inline-block;
  margin-top: 1.5rem;
  padding: 0.875rem 2.5rem;
  border: 1px solid currentColor;
  color: inherit;
  font-size: 12px;
  letter-spacing: 0.06em;
  line-height: 1;
  text-decoration: none;
  text-transform: uppercase;
  transition: opacity 0.2s ease;
}

.mit-empty-cart__button:hover {
  opacity: 0.6;
}

.mit-empty-cart__button:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* Карусель внутри корзины вылезала за правый край экрана.
   Причина не в корзине: карусель нарочно сделана во всю ширину окна
   (`.uc-product-carousel` в header.css — `width: 100vw` и отрицательные поля
   в `-2.5vw`). На главной она стоит прямо в странице, и края сходятся с
   краями экрана. В корзине её держит колонка шириной 1280px, отсчёт идёт от
   её левого края — и стовьюпортная ширина уезжает за экран на всю разницу.

   Ширину повторяем ту же, что на главной, — во весь экран, — но считаем её
   иначе: `calc(50% - 50vw)` отмеряет поле от СВОЕГО контейнера, каким бы
   узким и смещённым он ни был. Исходные `-2.5vw` завязаны на то, что блок
   стоит прямо в странице, и в колонке корзины промахивались на её отступ.

   `!important` у полей не украшение — у исходного правила они тоже важные,
   и без этого пересилить их нечем. Правило чужого трека (шапка), поэтому
   переопределяем у себя, а не там. */
.mit-empty-cart-block .wp-block-woocommerce-product-collection.uc-product-carousel {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
}

/* ---------- Плашки «товар удалён — отменить» ----------
   Образец печатает inc/cart-remove.php в `<template>`, копии раскладывает
   assets/js/cart-remove.js. Снизу по центру стопкой: новая ближе к краю
   экрана, старые поднимаются над ней. Место выбрано так, чтобы одинаково
   работать на обеих ширинах и не спорить со шторкой мини-корзины, которая
   выезжает справа. */

.mit-cart-toasts {
  position: fixed;
  bottom: 1.5rem;
  left: 50%;
  /* Плашки лежат выше всего, что может оказаться на экране, пока идут их
     десять секунд: шторка мини-корзины с подложкой — 9999, мобильное меню —
     10001 (`header-menu.css`). Отменить удаление покупатель должен успеть и
     с открытым меню, а из-под него плашки не было видно. Ревью 12.08,
     находка L-1. */
  z-index: var(--mit-z-toast, 10002);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  max-width: calc(100vw - 2rem);
  transform: translateX(-50%);
  /* Пустая стопка не должна перехватывать клики по странице: ловят их сами
     плашки, каждая своей площадью. */
  pointer-events: none;
}

/* Плашка cookie лежит внизу во всю ширину. Пока она видна — стопка
   приподнимается над ней, а не накрывает. */
body:has(.uc-cookie-notice:not(.is-uc-closed)) .mit-cart-toasts {
  bottom: 3.25rem;
}

.mit-cart-toast {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  width: max-content;
  max-width: 100%;
  padding: 0.875rem 1.25rem;
  background: #fff;
  border: 1px solid currentColor;
  opacity: 0;
  transform: translateY(0.75rem);
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: auto;
}

.mit-cart-toast.is-open {
  opacity: 1;
  transform: translateY(0);
}

/* Название товара может быть длинным — обрезаем его, а не плашку: кнопка
   «отменить» должна остаться на виду при любой длине. */
.mit-cart-toast__text {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Подпись — как у остальных наших кнопок: прописные, широкий трекинг,
   подчёркивание вместо рамки: рамка в рамке читается коробкой в коробке. */
.mit-cart-toast__undo {
  flex: none;
  padding-bottom: 2px;
  border-bottom: 1px solid currentColor;
  color: inherit;
  font-size: 12px;
  letter-spacing: 0.06em;
  line-height: 1;
  text-decoration: none;
  text-transform: uppercase;
  transition: opacity 0.2s ease;
}

.mit-cart-toast__undo:hover {
  opacity: 0.6;
}

.mit-cart-toast__undo:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

/* Цифры моноширинные: иначе на каждой секунде подпись подрагивает. */
.mit-cart-toast__count {
  margin-left: 0.5em;
  font-variant-numeric: tabular-nums;
  opacity: 0.5;
}

.mit-cart-toast__bar {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 2px;
  overflow: hidden;
}

/* Полоска утекает слева направо ровно столько, сколько живёт плашка.
   Длительность ставит скрипт, и он же ЧИТАЕТ у этой анимации оставшееся
   время для цифры — поэтому счёт времени в системе один. */
.mit-cart-toast__bar > i {
  display: block;
  height: 100%;
  background: currentColor;
  transform-origin: left center;
  animation-name: mitCartToastBar;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}

@keyframes mitCartToastBar {
  from {
    transform: scaleX(1);
  }

  to {
    transform: scaleX(0);
  }
}

/* Курсор на плашке (или фокус на кнопке) — время стоит. Пауза здесь, в
   стилях, а не в скрипте: скрипт читает время у этой же анимации, значит
   цифра замирает вместе с полоской сама собой. */
.mit-cart-toast:hover .mit-cart-toast__bar > i,
.mit-cart-toast:focus-within .mit-cart-toast__bar > i {
  animation-play-state: paused;
}

/* На узкой ширине стопка занимает строку целиком: центрировать `max-content`
   там нечего — название и так упирается в края. */
@media (max-width: 600px) {
  .mit-cart-toasts {
    right: 1rem;
    bottom: 1rem;
    left: 1rem;
    align-items: stretch;
    max-width: none;
    transform: none;
  }

  .mit-cart-toast {
    width: auto;
    gap: 1rem;
  }

  body:has(.uc-cookie-notice:not(.is-uc-closed)) .mit-cart-toasts {
    bottom: 2.75rem;
  }
}

/* ---------- Страница корзины ----------
   Блочная корзина приходит со своим языком: скруглённые кнопки,
   подчёркнутые названия, жирный итог. Витрина говорит иначе — прописные с
   широким трекингом, тонкие линии, острые углы, вес несёт размер, а не
   насыщенность. Приводим к общему.

   ВСЁ ЧЕРЕЗ ПРЕДКА `.wp-block-woocommerce-cart` — не украшение, а
   необходимость: классы `wc-block-components-*` общие у корзины,
   мини-корзины И ОФОРМЛЕНИЯ ЗАКАЗА. Правило без предка уехало бы на
   чекаут, который ведёт свой трек. */

/* Минимальная высота. При одном-двух товарах страница кончалась почти сразу
   под шапкой, и подвал подтягивался вверх — корзина смотрелась обрезанной.
   Высоту шапки пишет `assets/js/header-height.js` в `--header-h`; запасное
   значение на случай, если скрипт не успел. `svh` — «маленький» вьюпорт: на
   телефоне адресная строка то появляется, то исчезает, и `vh` там прыгает. */
.wp-block-woocommerce-cart {
  min-height: calc(100svh - var(--header-h, 5rem) - 12rem);
}

/* Скруглений в магазине нет нигде — ни у кнопки догрузки, ни у образцов
   цвета, ни у кнопки пустой корзины. */
.wp-block-woocommerce-cart .wc-block-components-button,
.wp-block-woocommerce-cart .wc-block-cart__submit-button,
.wp-block-woocommerce-cart .wc-block-components-quantity-selector,
.wp-block-woocommerce-cart .wc-block-components-text-input input,
.wp-block-woocommerce-cart .wc-block-components-form input {
  border-radius: 0;
}

/* Подписи витрины — прописные с широким трекингом. У блочной корзины
   прописные есть, трекинга нет. */
.wp-block-woocommerce-cart .wc-block-cart-items thead th,
.wp-block-woocommerce-cart .wc-block-cart__totals-title,
.wp-block-woocommerce-cart .wc-block-components-panel__button {
  letter-spacing: 0.06em;
}

/* Название товара — как в карточке каталога: без подчёркивания, оно
   появляется по наведению. Подчёркнутая ссылка в ряду выглядит ошибкой
   вёрстки рядом с ценой без подчёркивания. */
.wp-block-woocommerce-cart .wc-block-components-product-name {
  text-decoration: none;
}

.wp-block-woocommerce-cart .wc-block-components-product-name:hover {
  text-decoration: underline;
}

/* Итог. Вес в магазине несёт размер, а не насыщенность: «Estimated total»
   остаётся крупным, но перестаёт быть жирным. */
.wp-block-woocommerce-cart .wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
.wp-block-woocommerce-cart .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
  font-weight: 400;
}

/* Счётчик количества. Рамка была скруглённой и в четверть тона; делаем той
   же линией, что и разделители рядов, и даём кнопкам поле под палец. */
.wp-block-woocommerce-cart .wc-block-components-quantity-selector {
  border-color: rgba(17, 17, 17, 0.2);
}

.wp-block-woocommerce-cart .wc-block-components-quantity-selector__input {
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}

.wp-block-woocommerce-cart .wc-block-components-quantity-selector__button {
  font-size: 14px;
  opacity: 0.55;
  transition: opacity 0.2s ease;
}

.wp-block-woocommerce-cart .wc-block-components-quantity-selector__button:hover {
  opacity: 1;
}

/* Корзинка удаления рядом со счётчиком — того же тона, что и кнопки
   счётчика: это не главное действие ряда. */
.wp-block-woocommerce-cart .wc-block-cart-item__remove-link {
  opacity: 0.55;
  transition: opacity 0.2s ease;
}

.wp-block-woocommerce-cart .wc-block-cart-item__remove-link:hover {
  opacity: 1;
}

/* ---------- Шторка мини-корзины ----------
   Тот же приём, что и у страницы корзины, и по той же причине: классы
   `wc-block-components-*` общие с ОФОРМЛЕНИЕМ ЗАКАЗА, поэтому предок
   обязателен. Здесь это `.wp-block-woocommerce-mini-cart-contents` —
   он встречается только внутри шторки. */

/* Поля пошире. Шторка 480px, а содержимое жалось к краям по 16px —
   в магазине воздуха больше. */
.wp-block-woocommerce-mini-cart-contents .wc-block-mini-cart__items,
.wp-block-woocommerce-mini-cart-contents .wc-block-mini-cart__footer,
.wp-block-woocommerce-mini-cart-contents .wc-block-mini-cart__empty-cart-wrapper {
  padding-right: 1.5rem;
  padding-left: 1.5rem;
}

/* Заголовок. Ядро печатает его крупным (32px) и с отрицательным нижним
   полем, отчего он наезжает на список. У нас заголовки шторок и полос —
   ярлыки: прописные, мелкие, с трекингом и тонкой линией под ними. */
.wp-block-woocommerce-mini-cart-contents .wc-block-mini-cart__title {
  margin: 0 1.5rem 1rem;
  padding-bottom: 0.875rem;
  border-bottom: 1px solid rgba(17, 17, 17, 0.2);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.06em;
  line-height: 1;
  text-transform: uppercase;
}

/* Список начинается сразу под линией: своё верхнее поле ему больше не
   нужно, отступ уже дал заголовок. */
.wp-block-woocommerce-mini-cart-contents .wc-block-mini-cart__items {
  padding-top: 0;
}

/* Название товара — как в карточке каталога и на странице корзины:
   подчёркивается только по наведению. */
.wp-block-woocommerce-mini-cart-contents .wc-block-components-product-name {
  text-decoration: none;
}

.wp-block-woocommerce-mini-cart-contents .wc-block-components-product-name:hover {
  text-decoration: underline;
}

/* Счётчик товаров рядом с заголовком — подпись к подписи, не сам заголовок. */
.wp-block-woocommerce-mini-cart-contents .wc-block-mini-cart__title span:last-child {
  opacity: 0.5;
}

/* Счётчик количества и корзинка удаления — как на странице корзины:
   острые углы, приглушённые, проявляются под курсором. */
.wp-block-woocommerce-mini-cart-contents .wc-block-components-quantity-selector {
  border-radius: 0;
  border-color: rgba(17, 17, 17, 0.2);
}

.wp-block-woocommerce-mini-cart-contents .wc-block-components-quantity-selector__input {
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}

.wp-block-woocommerce-mini-cart-contents .wc-block-components-quantity-selector__button,
.wp-block-woocommerce-mini-cart-contents .wc-block-cart-item__remove-link {
  opacity: 0.55;
  transition: opacity 0.2s ease;
}

.wp-block-woocommerce-mini-cart-contents .wc-block-components-quantity-selector__button:hover,
.wp-block-woocommerce-mini-cart-contents .wc-block-cart-item__remove-link:hover {
  opacity: 1;
}

/* Подвал шторки. Линия — той же плотности, что и разделители рядов
   (0.2, а не 0.3): в магазине линия одна на всё. */
.wp-block-woocommerce-mini-cart-contents .wc-block-mini-cart__footer {
  border-top-color: rgba(17, 17, 17, 0.2);
}

/* «Subtotal» — ярлык, а не жирная строка: вес несёт размер. */
.wp-block-woocommerce-mini-cart-contents .wc-block-mini-cart__footer-subtotal .wc-block-components-totals-item__label {
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.wp-block-woocommerce-mini-cart-contents .wc-block-mini-cart__footer-subtotal .wc-block-components-totals-item__value {
  font-weight: 400;
}

/* Кнопки. Обе — наши: без скруглений, с трекингом. «Посмотреть корзину»
   рамочная, как LOAD MORE; «оформить заказ» залитая — это главное действие,
   и второй рамочной кнопки рядом с ней быть не должно, иначе выбор
   выглядит равным. */
.wp-block-woocommerce-mini-cart-contents .wc-block-mini-cart__footer-actions .wc-block-components-button {
  border-radius: 0;
  padding: 0.875rem 1.5rem;
  font-size: 12px;
  letter-spacing: 0.06em;
  line-height: 1;
  text-transform: uppercase;
  transition: opacity 0.2s ease;
}

.wp-block-woocommerce-mini-cart-contents .wc-block-mini-cart__footer-cart {
  border: 1px solid currentColor;
}

.wp-block-woocommerce-mini-cart-contents .wc-block-mini-cart__footer-actions .wc-block-components-button:hover {
  opacity: 0.6;
}

/* Крестик закрытия — тоньше и спокойнее: он не должен спорить с товарами. */
.wc-block-mini-cart__drawer .wc-block-components-drawer__close {
  opacity: 0.4;
}

.wc-block-mini-cart__drawer .wc-block-components-drawer__close:hover {
  opacity: 1;
}

/* Пустая шторка. Штатный вид — жирная строка и залитая кнопка; у нас
   пустое место говорит тише: обычное начертание и рамочная кнопка, как на
   пустой странице корзины. Текст остаётся ядерным — он живёт в шаблонной
   части в базе, а база у нас ходит только вниз. */
.wp-block-woocommerce-mini-cart-contents .wc-block-mini-cart__empty-cart-wrapper {
  text-align: center;
}

.wp-block-woocommerce-mini-cart-contents .wc-block-mini-cart__empty-cart-wrapper p,
.wp-block-woocommerce-mini-cart-contents .wc-block-mini-cart__empty-cart-wrapper strong {
  font-weight: 400;
}

.wp-block-woocommerce-mini-cart-contents .wc-block-mini-cart__shopping-button {
  display: inline-block;
  padding: 0.875rem 2.5rem;
  border: 1px solid currentColor;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font-size: 12px;
  letter-spacing: 0.06em;
  line-height: 1;
  text-decoration: none;
  text-transform: uppercase;
  transition: opacity 0.2s ease;
}

.wp-block-woocommerce-mini-cart-contents .wc-block-mini-cart__shopping-button:hover {
  opacity: 0.6;
}