/*
 * Блок рекомендаций: два вида одного блока.
 *
 *   `mit-reco_grid` — карточка товара: только фотографии, ряд из четырёх.
 *     Рядом стоят имя и цена самого товара, и лишние подписи спорили бы с
 *     ними за внимание (решение Bo 28.08).
 *   `mit-reco_rows` — корзина и шторка: список рядов с миниатюрой, именем,
 *     ценой и расцветками. Здесь покупатель уже выбирает, чем дополнить, и
 *     ему нужно, что это и почём (решение Bo 29.08).
 *
 * Заголовок в обоих видах — ярлык, а не заголовок страницы: 12px, капитель,
 * трекинг, ровно как у ссылок разделов на карточке.
 */

.mit-reco {
  margin: 2rem 0 0;
}

.mit-reco__title {
  margin: 0 0 0.8rem;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--wp--preset--color--contrast-3, #646970);
}

.mit-reco__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ---------- Кадр ---------- */

/*
 * ПРОПОРЦИЮ ДЕРЖИТ КОРОБКА, А НЕ КАРТИНКА. Пропорцию задавал `aspect-ratio`
 * у самого `img`, и в Chrome это работало. В Safari фотографии в шторке
 * вытянулись на всю свободную высоту: блок — элемент колоночного флекса, и
 * растягивание перебило пропорцию. Коробка с `padding-top` считает высоту
 * от СВОЕЙ ширины: растянуть её нечем ни в одном движке, и она не зависит
 * от того, во что блок вложат завтра.
 */
.mit-reco__frame {
  display: block;
  position: relative;
  padding-top: 150%;
  overflow: hidden;
  background-color: var(--wp--preset--color--base-2, #f5f5f5);
}

/*
 * Высота через ДВА класса, и это не украшение: у WooCommerce есть правило
 * `.woocommerce img { height: auto }` — оно весит больше одного класса и
 * перебивало `height: 100%`. Кадр держал 2:3, а картинка в нём оставалась
 * своей высоты, и под ней висела серая полоса (нашёл Bo).
 */
.mit-reco .mit-reco__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Тот же видимый фокус, что у образцов и кнопок покупки. */
.mit-reco a:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* ---------- Вид «сетка»: карточка товара ---------- */

.mit-reco_grid .mit-reco__list {
  display: grid;
  grid-template-columns: repeat(var(--mit-reco-cols, 4), minmax(0, 1fr));
  gap: 0.6rem;
  align-items: start;
}

.mit-reco__item {
  margin: 0;
}

.mit-reco__link {
  display: block;
  text-decoration: none;
  color: inherit;
}

.mit-reco__link:hover .mit-reco__photo,
.mit-reco__link:focus-visible .mit-reco__photo {
  opacity: 0.82;
}

/* ---------- Вид «ряды»: корзина и шторка ---------- */

.mit-reco__row {
  display: grid;
  /*
   * ИМЕНОВАННЫЕ ОБЛАСТИ, ЧТОБЫ ЦЕНА МОГЛА ПЕРЕЕХАТЬ. В шторке она стоит
   * под названием, на странице корзины — справа вверху отдельной колонкой,
   * как итог строки у добавленных товаров. Разметка одна, меняется только
   * эта решётка (просьба Bo 29.08).
   */
  grid-template-columns: 64px minmax(0, 1fr);
  /*
   * ПОСЛЕДНЯЯ СТРОКА ПУСТАЯ И ТЯНУЩАЯСЯ — ОНА ЗАБИРАЕТ ЛИШНЮЮ ВЫСОТУ.
   *
   * Миниатюра выше текста и растянута на все строки. Без этой строки грид
   * раздавал её лишнюю высоту тем строкам, что заняты содержимым: между
   * названием и управлением зияло полсотни пикселей, и просвет ПРЫГАЛ при
   * раскрытии размеров — панель забирала часть высоты себе, и раздавать
   * оставалось меньше (нашёл Bo 29.08).
   *
   * Пустая строка в `1fr` съедает весь остаток, а строкам с содержимым
   * достаётся ровно их содержимое. Тогда просвет между ними — это
   * `row-gap`, и ничего больше.
   */
  grid-template-rows: auto auto auto 1fr;
  grid-template-areas:
    "thumb name"
    "thumb price"
    "thumb ctrl"
    "thumb .";
  column-gap: 0.9rem;
  row-gap: 0.25rem;
  align-items: start;
  align-content: start;
  margin: 0;
  padding: 0.9rem 0;
  /*
   * Волосяная линия, а не `contrast-2`: в теме это `rgb(99,99,99)`, и
   * пиксель такого цвета читается чёрной чертой (замечание Bo). Здесь тот
   * же тон, каким разделены строки самой корзины.
   */
  border-top: 1px solid rgba(17, 17, 17, 0.12);
}

.mit-reco__thumb {
  grid-area: thumb;
  display: block;
}

.mit-reco__name {
  grid-area: name;
}

.mit-reco__price {
  grid-area: price;
}

.mit-reco__controls {
  grid-area: ctrl;
  min-width: 0;
}

.mit-reco__thumb:hover .mit-reco__photo {
  opacity: 0.82;
}

.mit-reco__name {
  /* 12px — ровно как имя товара в строке корзины: два шаблона рядом, и
     разный кегль читался бы как разная важность. */
  font-size: 12px;
  line-height: 1.3;
  text-decoration: none;
  color: var(--wp--preset--color--contrast, #111);
}

.mit-reco__name:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.mit-reco__price {
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--wp--preset--color--contrast-3, #646970);
}

.mit-reco__price .woocommerce-Price-amount {
  white-space: nowrap;
}

/* ---------- Расцветки: переключатели строки ---------- */

/*
 * Свой ряд, а не каталожный. В каталоге образец — ССЫЛКА на страницу
 * товара, и это правильно: там ряд и есть способ уйти в нужный цвет. Здесь
 * образец переключает саму строку, не уводя из корзины (решение Bo 29.08),
 * а ссылка внутри строки, которая и так вся ссылка, была бы ещё и
 * недопустимой вложенностью.
 *
 * Вид квадрата НАМЕРЕННО повторяет `.mit-swatches__box` из `cards.css`:
 * один и тот же цвет вещи должен выглядеть одинаково всюду. Правило не
 * общее, а своё, по одной причине — шторка живёт на каждой странице, а
 * `cards.css` подключается не на каждой. Общий класс дал бы образцы,
 * которые на части страниц выглядят как ничто.
 */
.mit-reco__colors {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  /* Просвет шире каталожного: у выбранного образца снаружи кольцо, и с
     каталожным зазором оно упиралось бы в соседний квадрат. */
  gap: 0.45rem;
  margin: 0.3rem 0 0.1rem;
}

.mit-reco__color {
  display: block;
  padding: 0;
  border: 0;
  background: none;
  line-height: 0;
  cursor: pointer;
}

.mit-reco__chip {
  display: block;
  width: var(--mit-swatch-size, 10px);
  height: var(--mit-swatch-size, 10px);
  border: 1px solid rgba(0, 0, 0, 0.18);
  background-size: cover;
  background-position: center;
  transition: box-shadow 0.15s ease;
}

.mit-reco__color:hover .mit-reco__chip {
  border-color: currentColor;
}

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

/*
 * Выбранная расцветка — кольцо ВОКРУГ квадрата, отбитое просветом. Не
 * рамка потолще: рамка меняет размер самого квадрата, и ряд подрагивает
 * при каждом переключении. И не сплошное кольцо впритык: на квадрате в
 * десять пикселей оно слипается с собственной рамкой образца в жирную
 * чёрную коробку, за которой не видно цвета.
 */
.mit-reco__color.is-selected .mit-reco__chip {
  box-shadow:
    0 0 0 1px var(--wp--preset--color--base, #fff),
    0 0 0 2px var(--wp--preset--color--contrast, #111);
}

/*
 * Ни hex, ни картинки — расцветку ещё не раскрасили. Диагональ, чтобы
 * пустая клетка не читалась как белый цвет. Так же в каталоге.
 */
.mit-reco__chip_blank {
  background-image: linear-gradient(
    to top right,
    transparent calc(50% - 1px),
    rgba(17, 17, 17, 0.35) calc(50% - 1px),
    rgba(17, 17, 17, 0.35) calc(50% + 1px),
    transparent calc(50% + 1px)
  );
}

/*
 * РАСПРОДАННУЮ РАСЦВЕТКУ НЕ ГАСИМ — правило страницы товара. Приглушённый
 * образец плохо читается, и непонятно, чего именно нет: об этом говорит
 * кнопка, она и так следующий шаг покупателя.
 */

/* ---------- Место под блок в корзине и шторке ---------- */

/*
 * Пустое место не должно занимать ни пикселя: иначе под корзиной повиснет
 * необъяснимый отступ у тех, кому показывать нечего.
 */
.mit-reco-mount:empty {
  display: none;
}

.mit-reco_cart {
  margin: 2rem 0 0;
}

/*
 * ШИРИНА БЛОКА НА СТРАНИЦЕ КОРЗИНЫ — КАК У КОЛОНКИ С ТОВАРАМИ.
 *
 * Раньше здесь стоял потолок в 480 пикселей: под корзиной колонки нет, и
 * список растянулся бы во всю ширину содержимого. Потолок задачу решал, но
 * ответ давал неверный — блок оказывался заметно уже добавленных товаров и
 * висел под ними отдельным столбиком (нашёл Bo 29.08).
 *
 * ЧИСЛА НЕ ПРИДУМАНЫ, А ВЗЯТЫ У ЯДРА: `.wc-block-components-main` в
 * `cart.css` WooCommerce это `width: 65%` плюс `padding-right: 4.5283018868%`.
 * Повторяем ровно их — тогда край блока совпадает с краем таблицы товаров
 * при любой ширине окна, а не только при той, на которой подбирали.
 *
 * ЗАПРОС К КОНТЕЙНЕРУ, А НЕ К ОКНУ. Ядро схлопывает две колонки в одну по
 * ШИРИНЕ КОНТЕЙНЕРА (699px), а не окна, и порог в пикселях окна разошёлся
 * бы с ним на любой теме со своими полями. Контейнер ядра — сам блок
 * корзины, он нам не предок, спросить его нельзя. Зато наше место — его
 * сосед по потоку и ровно той же ширины, поэтому объявляем контейнером
 * себя: порог получается тот же самый.
 */
[data-mit-reco-mount="cart"] {
  container-type: inline-size;
}

@container (min-width: 700px) {
  [data-mit-reco-mount="cart"] .mit-reco_cart {
    box-sizing: border-box;
    width: 65%;
    padding-right: 4.5283018868%;
  }

  /*
   * ТА ЖЕ РАСКЛАДКА, ЧТО У ДОБАВЛЕННЫХ ТОВАРОВ (просьба Bo 29.08).
   * Числа сняты со строки корзины: ячейка с фотографией 96px (снимок 80px
   * плюс 16px отбивки), итог строки — колонка в 100px справа, поля 20px
   * сверху и снизу. Тогда имена начинаются на одной вертикали, а цены
   * стоят в одном столбце — два списка читаются как один.
   */
  [data-mit-reco-mount="cart"] .mit-reco__row {
    grid-template-columns: 96px minmax(0, 1fr) 100px;
    /* Пустая тянущаяся строка — по той же причине, что и в шторке. */
    grid-template-rows: auto auto 1fr;
    grid-template-areas:
      "thumb name price"
      "thumb ctrl price"
      "thumb .    price";
    column-gap: 0;
    padding: 20px 0;
  }

  [data-mit-reco-mount="cart"] .mit-reco__thumb {
    width: 80px;
  }

  [data-mit-reco-mount="cart"] .mit-reco__price {
    text-align: right;
  }
}

/*
 * ПОЛЯ ШТОРКИ БЛОК ПОВТОРЯЕТ САМ — на случай, если он окажется соседом
 * списка, а не внутри него (запасной путь вставки). Внутри списка поля уже
 * есть, и лишние 24px там были бы двойными, поэтому правило ниже их
 * снимает. Замер на живой шторке: содержимое 432px внутри 480px.
 */
.wp-block-woocommerce-filled-mini-cart-contents-block .mit-reco-mount {
  padding-inline: 24px;
}

/* Внутри списка товаров поля уже свои — свои не нужны. */
.wc-block-mini-cart__items .mit-reco-mount {
  padding-inline: 0;
}

.wp-block-woocommerce-mini-cart-contents .mit-reco_cart {
  margin: 1.5rem 0 0;
}

/* ---------- Телефон ---------- */

/*
 * Блок карточки переезжает ВНУТРЬ сетки галереи последним элементом
 * (перенос делает `assets/js/reco.js`). `order: 5` — после снимков: у них
 * order 4, у инфо-панели 2, у врезки Product Details 3.
 *
 * Отступ сверху маленький и это не оплошность: шаг сетки уже даёт 1rem, а
 * снизу у самой сетки стоит `padding-bottom: 4rem` — он теперь отделяет наш
 * блок от похожих товаров. Пока блок стоял ПОСЛЕ сетки, эти 4rem
 * складывались с его собственным отступом, и между фотографией и подписью
 * зияло больше сотни пикселей.
 */
.mit-reco_moved {
  margin: 1rem 0 0;
}

@media (max-width: 780px) {
  .mit-reco_moved {
    order: 5;
  }

  .mit-reco_grid .mit-reco__list {
    gap: 0.5rem;
  }
}

/* ---------- Строки корзины и шторки в языке блока ---------- */

/*
 * Просьба Bo 29.08: пусть уже добавленный товар выглядит так же, как
 * рекомендация. Правила лежат здесь, а не в `cart.css`, по одной причине:
 * их завёл блок рекомендаций, и снимать их надо будет вместе с ним.
 */

/*
 * ЦЕНА В СТРОКЕ КОРЗИНЫ — СЕРАЯ, как в рекомендациях (просьба Bo 29.08).
 * Два списка стоят друг под другом, и чёрная цена в одном против серой в
 * другом читается как разница в важности, которой нет.
 */
.wc-block-cart-items .wc-block-cart-item__total .wc-block-components-product-price,
.wc-block-cart-items .wc-block-cart-item__prices .wc-block-components-product-price {
  color: var(--wp--preset--color--contrast-3, #646970);
}

/*
 * РОВНЫЕ ПРОСВЕТЫ В СТРОКЕ. Коробка с атрибутами — колоночный флекс с
 * собственным зазором, и первым в ней лежит ПУСТОЙ элемент (описание мы
 * прячем правилом ниже). Зазор от него оставался, и просвет между ценой и
 * «Color: White / Sock Size» выходил вдвое больше остальных: 8 против 4
 * (нашёл Bo 29.08). Прятать нечего — просто снимаем зазор.
 */
.wc-block-cart-items .wc-block-components-product-metadata {
  gap: 0;
}

/* Короткое описание в строке корзины — лишнее: имени и расцветки хватает. */
.wc-block-cart-items .wc-block-components-product-metadata__description {
  display: none;
}

/*
 * ЦЕНА ЗА ШТУКУ УБРАНА. Рядом с ней стоит итог строки, и при одной вещи —
 * а это подавляющее большинство заказов — это одно и то же число дважды.
 * Остаётся итог строки: он верен при любом количестве, а само количество
 * видно в счётчике рядом.
 */
/*
 * Селектор длинный не от любви к длинным селекторам: у WooCommerce на эту
 * коробку стоит `table.wc-block-cart-items .wc-block-cart-items__row
 * .wc-block-cart-item__prices { display: flex }`, и правило из двух классов
 * ему проигрывало. Повторяем его вес.
 *
 * `:not(.wc-block-mini-cart-items)` — ТОЛЬКО СТРАНИЦА КОРЗИНЫ. Шторка берёт
 * ту же таблицу и те же классы (`<table class="wc-block-cart-items
 * wc-block-mini-cart-items">`), поэтому без этой оговорки правило гасило
 * цену и там — а в шторке она единственная, итог строки мы прячем сами.
 * Получалось, что цены нет вовсе (нашёл Bo 29.08). Ядро отделяет одно от
 * другого этой же оговоркой.
 */
table.wc-block-cart-items:not(.wc-block-mini-cart-items) .wc-block-cart-items__row .wc-block-cart-item__prices {
  display: none;
}

.wc-block-cart-items .wc-block-components-product-name {
  font-size: 13px;
  line-height: 1.3;
}

.wc-block-cart-items .wc-block-components-product-details,
.wc-block-cart-items .wc-block-cart-item__total {
  font-size: 12px;
  letter-spacing: 0.02em;
}

/* ---------- Шторка: без разделителей ---------- */

/* Решение Bo: в шторке ряды разделяет воздух, а не линии. */
.wp-block-woocommerce-mini-cart-contents .mit-reco__row {
  border-top: 0;
  padding: 0.7rem 0;
}

/* ---------- Пустота под корзиной ---------- */

/*
 * Блоку корзины задана минимальная высота в экран: при одном-двух товарах
 * страница кончалась почти сразу под шапкой и подвал подтягивался вверх
 * (`cart.css`). Из-за неё наш блок оказывался за сгибом. Пока блоку есть
 * что показать, подпорка не нужна — содержимое даёт он.
 *
 * Метку ставит `reco-cart.js`. Селектором `:has(+ .mit-reco-mount:not(:empty))`
 * это уже было написано, и в Chrome работало, а в Safari нет: место
 * наполняется скриптом после загрузки, и `:empty` там не запускает
 * переоценку `:has()`.
 */
body.mit-has-reco .wp-block-woocommerce-cart {
  min-height: 0;
}

/* ---------- Покупка прямо из строки ---------- */

.mit-reco__form {
  margin: 0.4rem 0 0;
  /*
   * РАЗМЕР — ПО СЧЁТЧИКУ КОЛИЧЕСТВА В СТРОКЕ КОРЗИНЫ (образец назвал Bo
   * 29.08): 107x25. Кнопка во всю ширину строки была слишком громкой —
   * она читалась как действие над всем списком, а не над одной вещью, и
   * спорила с соседними строками корзины, где всё управление мелкое.
   *
   * Панель размеров наследует эту же ширину: она встаёт НА МЕСТО кнопки, и
   * разъехаться им нельзя — иначе строка дёргалась бы вбок при каждом
   * раскрытии.
   */
  max-width: 130px;
}

/*
 * Кнопка в языке витрины: острые углы, волосяная рамка, капитель с
 * трекингом — как у «VIEW MY CART» в шторке, только мельче: она принадлежит
 * строке, а не всей корзине.
 */
.mit-reco__add {
  display: block;
  /*
   * Вид — со страницы товара (`.mit-options__add`): острые углы, волосяная
   * рамка, капитель с трекингом. Размер — по счётчику количества в строке
   * корзины: там же, в том же списке, стоит управление такого же роста.
   */
  width: 100%;
  padding: 0.45rem 0.9rem;
  border: 1px solid var(--wp--preset--color--contrast, #111);
  border-radius: 0;
  background: var(--wp--preset--color--base, #fff);
  color: var(--wp--preset--color--contrast, #111);
  /* Кнопке шрифт не достаётся по наследству — браузер даёт ей системный. */
  font-family: inherit;
  font-size: 11px;
  font-weight: 400;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  cursor: pointer;
}

.mit-reco__add:hover {
  background: var(--wp--preset--color--contrast, #111);
  color: var(--wp--preset--color--base, #fff);
}

/*
 * ПАНЕЛЬ ЗАНИМАЕТ МЕСТО КНОПКИ, А НЕ ВСТАЁТ ПОД НЕЙ. Так на странице
 * товара (`.mit-options__actions.is-open .mit-options__row`), и так же
 * здесь: в строке высотой в одну фотографию место дороже, чем где бы то ни
 * было, а второй ряд ломал ритм списка.
 *
 * Именно СКРЫТИЕ, а не удаление: кнопка остаётся в форме и в порядке
 * фокуса — на Esc фокус возвращается на неё.
 */
.mit-reco__form_open .mit-reco__add {
  display: none;
}

/*
 * ПАНЕЛЬ — КОРОБКА, А НЕ РЯД ПЛАШЕК. Повторяем `.mit-options__panel` со
 * страницы товара (просьба Bo 29.08): рамка, полноширинные строки, ссылка
 * на сетку последней через черту. Раскрывается на месте, а не всплывающим
 * слоем: строка живёт в прокручиваемой шторке, и слой пришлось бы
 * позиционировать относительно прокрутки.
 */
.mit-reco__panel {
  border: 1px solid var(--wp--preset--color--contrast, #111);
  background: var(--wp--preset--color--base, #fff);
  padding: 0.25rem 0;
}

/*
 * `[hidden]` в браузере это `display: none` из таблицы стилей
 * ПОЛЬЗОВАТЕЛЬСКОГО АГЕНТА — она слабее любого нашего правила с классом.
 */
.mit-reco__panel[hidden] {
  display: none;
}

.mit-reco__sizes {
  margin: 0;
  padding: 0;
  list-style: none;
}

.mit-reco__size {
  display: block;
  width: 100%;
  padding: 0.45rem 0.9rem;
  border: 0;
  border-radius: 0;
  background: none;
  text-align: left;
  color: var(--wp--preset--color--contrast, #111);
  font-family: inherit;
  font-size: 11px;
  font-weight: 400;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  cursor: pointer;
}

.mit-reco__size:hover:not([disabled]) {
  background: var(--wp--preset--color--base-2, rgba(0, 0, 0, 0.04));
}

/*
 * Распроданный размер не прячем: покупателю важно видеть, что размер
 * существует, а нет именно его. Те же значения, что на странице товара
 * (`.mit-options__option.is-unavailable`).
 */
.mit-reco__size.is-unavailable,
.mit-reco__size[disabled] {
  color: var(--wp--preset--color--contrast-3, #646970);
  opacity: 0.45;
  cursor: default;
}

.mit-reco__size[disabled]:hover {
  background: none;
}

/* ---------- Нечего покупать ---------- */

/*
 * Кнопка не исчезает и не гаснет молча — она говорит словом «OUT OF
 * STOCK» и не нажимается. Правило и вид взяты со страницы товара
 * (`.mit-options__add[disabled]` в `product-options.css`): коробка та же,
 * что у ADD, поэтому строка не прыгает по высоте от того, распродан цвет
 * или нет.
 */
.mit-reco__add[disabled],
.mit-reco__add[disabled]:hover {
  border-color: var(--wp--preset--color--contrast-3, #646970);
  background: var(--wp--preset--color--base, #fff);
  color: var(--wp--preset--color--contrast-3, #646970);
  cursor: default;
}

/*
 * ОТВЕТ НА ДОБАВЛЕНИЕ. Без него покупатель жмёт второй раз — это уже
 * видели на карточке товара. Состояние держится пару секунд и переживает
 * перерисовку блока: список в шторке пересобирается на каждое изменение
 * корзины, то есть ровно в ответ на наше же добавление (`reco-add.js`).
 */
.mit-reco__add.is-added,
.mit-reco__add.is-added:hover {
  border-color: var(--wp--preset--color--contrast, #111);
  background: var(--wp--preset--color--contrast, #111);
  color: var(--wp--preset--color--base, #fff);
  cursor: default;
}

/*
 * ФОКУС — КАК НА СТРАНИЦЕ ТОВАРА. Своего правила не было, и браузер рисовал
 * собственный контур: в Safari это жирная чёрная рамка, и предвыбранный
 * размер выглядел «нажатым намертво» (нашёл Bo 29.08).
 *
 * `:focus-visible`, а не `:focus`: рамка нужна тому, кто идёт с клавиатуры.
 * По клику мышью браузер её не показывает.
 */
.mit-reco__add:focus-visible,
.mit-reco__size:focus-visible,
.mit-reco__guide:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* Образцу цвета — снаружи и с запасом: у него своё кольцо выбранного
   состояния, и контур фокуса не должен с ним сливаться. */
.mit-reco__color:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

/* Сообщение об ошибке живёт внутри строки и не всплывает поверх шторки. */
.mit-reco__form .mit-add-to-cart-error {
  margin: 0.35rem 0 0;
  font-size: 11px;
  line-height: 1.4;
  color: var(--wp--preset--color--contrast-3, #646970);
}

/*
 * SIZE GUIDE — ПОСЛЕДНЕЙ СТРОКОЙ ПАНЕЛИ, ЧЕРЕЗ ЧЕРТУ. Дословно решение
 * страницы товара (`.mit-options__guide`): ссылка стоит среди размеров, но
 * размером не является — без разделителя её читают как ещё одно значение и
 * жмут вместо своего. Заодно снимается прежняя беда: снаружи панели она
 * вставала кнопке в строку и налезала на неё (снимок Bo 29.08).
 */
.mit-reco__guide {
  display: block;
  margin-top: 0.4rem;
  padding: 0.5rem 0.9rem 0.1rem;
  border-top: 1px solid var(--wp--preset--color--contrast-3, #646970);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--wp--preset--color--contrast-2, #555);
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

.mit-reco__guide:hover,
.mit-reco__guide:focus-visible {
  color: var(--wp--preset--color--contrast, #111);
}

/* ---------- Цена в шторке: под названием ---------- */

/*
 * Просьба Bo 29.08: в шторке цена должна стоять под названием и выглядеть
 * так же, как в рекомендациях.
 *
 * ПОЧЕМУ ИМЕННО ТАК, А НЕ ПЕРЕНОСОМ УЗЛА. Строка корзины — ячейки таблицы:
 * имя в одной, итог строки в другой. Перетащить итог под имя стилями
 * нельзя, а скриптом — значит воевать с перерисовкой шторки. Зато под
 * именем УЖЕ стоит цена (`wc-block-cart-item__prices`) — её мы и
 * показываем, а правую колонку с итогом в шторке прячем. При количестве 1,
 * а это подавляющее большинство строк, числа совпадают; при большем
 * количестве под именем остаётся цена за штуку — рядом со счётчиком это
 * ровно то число, которое человек и хочет видеть. Общая сумма стоит ниже,
 * в SUBTOTAL. Так же устроен референс, на который смотрел Bo.
 *
 * На СТРАНИЦЕ корзины оставляем как есть: там у таблицы есть колонка TOTAL
 * с заголовком, и итог строки принадлежит ей.
 */
/*
 * Вес селектора равен ядерному (`table` + три класса): у ядра эта коробка
 * стоит `display: flex`, и правило из двух классов ему проигрывало.
 */
table.wc-block-cart-items.wc-block-mini-cart-items .wc-block-cart-items__row .wc-block-cart-item__prices {
  display: block;
}

.wc-block-mini-cart-items .wc-block-cart-item__total {
  display: none;
}

.wc-block-mini-cart-items .wc-block-cart-item__prices,
.wc-block-mini-cart-items .wc-block-components-product-price {
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--wp--preset--color--contrast-3, #646970);
}

/* ---------- Список размеров прячется по-настоящему ---------- */

/*
 * `[hidden]` в браузере это `display: none` из таблицы стилей ПОЛЬЗОВАТЕЛЬСКОГО
 * АГЕНТА — она слабее любого нашего правила с классом. `display: flex` у
 * списка перебивал её, и размеры стояли открытыми всегда: нажатие ADD
 * выглядело бездействием (нашёл Bo).
 */
.mit-reco__sizes[hidden] {
  display: none;
}