/*
 * Карточка товара: образцы цвета и панель размеров.
 *
 * Всё, что прячет родную форму, привязано к классу `mit-options-ready` —
 * его ставит скрипт, когда слой уже построен. Скрипт не выполнился —
 * покупатель видит обычную форму WooCommerce, а не пустое место.
 */

/* ---------- Родная форма ---------- */

.uc-item-info .mit-options-ready .variations,
.uc-item-info .mit-options-ready .reset_variations,
.uc-item-info .mit-options-ready .woocommerce-variation-price,
.uc-item-info .mit-options-ready .woocommerce-variation-availability,
.uc-item-info .mit-options-ready .quantity {
  display: none !important;
}

/* Блок добавления в корзину ядро верстает сеткой под «количество + кнопка»
   (`grid-template-columns: min-content auto auto`), а сам блок стоит во
   flex-колонке с выравниванием по началу, то есть шириной по содержимому.
   Количества у нас нет, и наш блок оказывался в колонке шириной со слово
   «ADD»: `min-width: min(420px, 100%)` считал сотню процентов от неё.

   Растягиваем обёртку на колонку и снимаем сетку — без количества ей нечего
   раскладывать. Класс `mit-options-host` ставит скрипт: без JS всё остаётся
   как у ядра. */
.mit-options-host {
  align-self: stretch;
  width: 100%;
}
.uc-item-info .mit-options-host form.mit-options-ready,
.uc-item-info .mit-options-host .woocommerce-variation-add-to-cart {
  display: block;
}

/* ---------- Образцы ---------- */

.mit-options__group {
  margin: 0 0 1rem;
}
.mit-options__head {
  display: flex;
  align-items: baseline;
  gap: .35rem;
  margin-bottom: .5rem;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 6%;
}
.mit-options__title {
  color: var(--wp--preset--color--contrast-3);
}
.mit-options__title::after {
  content: ":";
}
.mit-options__value {
  color: var(--wp--preset--color--contrast);
}
.mit-options__swatches {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

/* Кнопка — рамка вокруг образца: она и есть признак выбора, как у Zara.
   Прозрачная у невыбранных, чтобы ряд не дёргался при переключении. */
.mit-options__swatch {
  padding: 3px;
  border: 1px solid transparent;
  border-radius: 0;
  background: none;
  cursor: pointer;
  line-height: 0;
}
.mit-options__swatch.is-selected {
  border-color: var(--wp--preset--color--contrast);
}
.mit-options__swatch-box {
  display: block;
  width: 20px;
  height: 20px;
  border: 1px solid rgba(0, 0, 0, .18);
  background-size: cover;
  background-position: center;
}
/* Значение без образца: показываем первые буквы, чтобы кнопка не была пустой. */
.mit-options__swatch-box_empty {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  line-height: 1;
  text-transform: uppercase;
  color: var(--wp--preset--color--contrast-3);
}
/* Расцветку, под которой ничего нет в наличии, НЕ гасим: приглушённый образец
   плохо читается, и непонятно, чего именно нет. Об этом говорит кнопка —
   она и так следующий шаг покупателя. */

/* ---------- Кнопки и панель ---------- */

.mit-options__actions {
  position: relative;
  margin-top: .5rem;
  width: 100%;
  /* Просьба магазина: кнопка от 420px. `min()` — чтобы на узком экране она
     не вылезала за колонку, а честно сжималась до её ширины. Работает это
     только потому, что обёртка выше растянута: проценты считаются от неё. */
  min-width: min(420px, 100%);
  max-width: 100%;
}
.mit-options__row {
  display: flex;
  gap: .5rem;
}
/* Место под express-оплату (Apple Pay). Пока пусто — ряда из одной кнопки не
   видно, ADD занимает всю ширину. Наполнится — станут поровну. */
.mit-options__express {
  flex: 1 1 0;
}
.mit-options__express:empty {
  display: none;
}
.mit-options__add {
  flex: 1 1 0;
  padding: .85rem 1rem;
  border: 1px solid var(--wp--preset--color--contrast);
  border-radius: 0;
  background: var(--wp--preset--color--base);
  color: var(--wp--preset--color--contrast);
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 6%;
  cursor: pointer;
}
.mit-options__add:hover {
  background: var(--wp--preset--color--contrast);
  color: var(--wp--preset--color--base);
}
/* Нечего покупать: кнопка говорит об этом словом и не нажимается. */
.mit-options__add[disabled],
.mit-options__add[disabled]:hover {
  border-color: var(--wp--preset--color--contrast-3);
  background: var(--wp--preset--color--base);
  color: var(--wp--preset--color--contrast-3);
  cursor: default;
}
/* Панель открыта — ряда кнопок не видно: панель занимает его место, как у
   Zara. Именно скрытие, а не удаление: кнопка остаётся в форме и в порядке
   фокуса. */
.mit-options__actions.is-open .mit-options__row {
  display: none;
}

/* Переход в корзину — появляется после добавления, вторичный по виду:
   основное действие уже сделано. */
.mit-options__process {
  display: block;
  margin-top: .5rem;
  padding: .85rem 1rem;
  border: 1px solid var(--wp--preset--color--contrast-3);
  background: var(--wp--preset--color--base);
  color: var(--wp--preset--color--contrast);
  font-size: 12px;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 6%;
}
.mit-options__process[hidden] {
  display: none;
}
.mit-options__process:hover {
  border-color: var(--wp--preset--color--contrast);
}

.mit-options__panel {
  border: 1px solid var(--wp--preset--color--contrast);
  background: var(--wp--preset--color--base);
  padding: .5rem 0;
}
.mit-options__panel[hidden] {
  display: none;
}
.mit-options__panel-title {
  display: block;
  padding: .35rem 1rem;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 6%;
  color: var(--wp--preset--color--contrast-3);
}
.mit-options__option {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  padding: .6rem 1rem;
  border: 0;
  border-radius: 0;
  background: none;
  text-align: left;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 6%;
  color: var(--wp--preset--color--contrast);
  cursor: pointer;
}
.mit-options__option:hover {
  background: var(--wp--preset--color--base-2, rgba(0, 0, 0, .04));
}
/* Распроданный размер остаётся в списке — покупателю важно знать, что он
   существует. Приглушён; нажать можно только если у товара включена подписка
   на поступление, и тогда нажатие ведёт не в корзину, а к форме. */
.mit-options__option.is-unavailable .mit-options__option-label {
  color: var(--wp--preset--color--contrast-3);
  opacity: .45;
}
.mit-options__option[disabled] {
  cursor: default;
}
.mit-options__option[disabled]:hover {
  background: none;
}
.mit-options__option-note {
  flex: 0 0 auto;
  color: var(--wp--preset--color--contrast);
  white-space: nowrap;
}
.mit-options__option-note[hidden] {
  display: none;
}

/* ---------- Подписка на поступление (форма ядра) ---------- */

/* Разметку и логику показа даёт WooCommerce (Stock Notifications). Здесь
   только вид: без этого форма выглядит чужой на фоне остальной карточки. */
.uc-item-info .wc_bis_form {
  margin-top: 1rem;
  padding: 1rem;
  border: 1px solid var(--wp--preset--color--contrast);
}
.uc-item-info .wc_bis_form h3 {
  margin: 0 0 .75rem;
  font-size: 12px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 6%;
}
.uc-item-info .wc_bis_form__form-row {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}
.uc-item-info .wc_bis_form__input {
  flex: 1 1 12rem;
  border-radius: 0;
}
.uc-item-info .wc_bis_form__button {
  border-radius: 0;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 6%;
}