/* ui-fixes.css — патч поверх style.css. Подключать ПОСЛЕДНИМ.
   Только объективные дефекты, найденные на живой вёрстке.
   Блоки пронумерованы — можно откатывать по одному. */

/* ── 1. «Только в ETARI» — неактивная заглушка (у товара нет ссылки на Kaspi).
      Приглушённый вид сохраняем, чтобы плашка не читалась как кнопка.
      Настоящий баг был другой: логотип ETARI белый, на плашке #f8f4f5 он не виден.
      Инвертируем логотип в тёмный фильтром и слегка темним подпись до 4.6:1. */
.storefront-product-card .etari-only-note .etari-only-copy img,
.horizontal-showcase #products .product .etari-only-note .etari-only-copy img,
.horizontal-showcase .summer-hit-grid .product .etari-only-note .etari-only-copy img{
  filter: brightness(0);
  opacity: .68;
}
.storefront-product-card .etari-only-note,
.horizontal-showcase #products .product .etari-only-note,
.horizontal-showcase .summer-hit-grid .product .etari-only-note{
  color: #5a5356 !important;
}
.storefront-product-card .etari-only-note .etari-only-copy,
.horizontal-showcase #products .product .etari-only-note .etari-only-copy,
.horizontal-showcase .summer-hit-grid .product .etari-only-note .etari-only-copy{ color: #5a5356 !important; }

/* ── 2. Кнопка «Купить в Kaspi» в состоянии «недоступно»:
      #756d71 на #d8d3d5 — контраст 3.1:1. Затемняем текст. */
.horizontal-showcase .kaspi-buy.is-unavailable,
.storefront-product-card .kaspi-buy.is-unavailable{ color: #4a4347; }

/* ── 3. Клавиатурная доступность: видимого фокуса не было ни у кнопок,
      ни у ссылок, ни у полей. Мышью ничего не меняется — ring только по Tab.
      В store-pages.css уже есть свои :focus-visible — их не перебиваем. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible{
  outline: 2px solid #c8002f;
  outline-offset: 2px;
}

/* ── 4. Кнопка «Найти» была 42×40 — меньше минимальной цели нажатия 44px. */
.search button,
.search-submit,
form[role="search"] button{
  min-width: 44px;
  min-height: 44px;
}

/* ── 5. Ряды товаров с горизонтальной прокруткой: padding был 0 2px,
      крайние карточки резались вплотную к краю. Плюс scroll-snap,
      чтобы прокрутка останавливалась на карточке, а не в середине. */
.horizontal-showcase .products,
.horizontal-showcase .summer-hit-grid{
  padding-inline: 4px;
  scroll-padding-inline: 4px;
  scroll-snap-type: x proximity;
}
.horizontal-showcase .products > .product,
.horizontal-showcase .summer-hit-grid > .product{ scroll-snap-align: start; }

/* ── 6. Битое фото товара. Раньше браузер показывал alt-текст (название товара)
      крупным кеглем — карточка распирало и ломало весь ряд.
      Теперь блок с фото помечается классом is-broken (это делает ui-fixes.js)
      и вместо alt-текста рисуется нейтральный плейсхолдер с подписью.
      Мелкий кегль alt оставлен страховкой на случай, если скрипт не подключён. */
.product-img{ overflow: hidden; }
.product-img img{
  font-size: 11px;
  line-height: 1.3;
  color: var(--muted, #716b70);
}
.product-img.is-broken,
.product-media.is-broken,
.product-gallery-frame.is-broken{
  position: relative;
  background: #f1f2f4;
}
.product-img.is-broken img,
.product-media.is-broken img,
.product-gallery-frame.is-broken img{ visibility: hidden; }
.product-img.is-broken::after,
.product-media.is-broken::after,
.product-gallery-frame.is-broken::after{
  content: "Фото недоступно";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border-radius: inherit;
  background-image: repeating-linear-gradient(135deg, #eceef1 0 10px, #e5e8ec 10px 20px);
  color: #6f757d;
  font: 600 12px/1.3 Manrope, Arial, sans-serif;
  text-align: center;
}

/* ── 7. iOS Safari зумит страницу при фокусе на поле с font-size < 16px.
      Только мобильные — на десктопе размеры не меняются.
      Поле поиска объявлено через `.search input` и `.unified-header .search input`,
      поэтому голый селектор `input` проигрывал по специфичности — нужны они же и !important. */
@media (max-width: 530px){
  input, select, textarea,
  .search input,
  .header .search input,
  .unified-header .search input{ font-size: 16px !important; }
}

/* ── 8. Плашка «В наличии»: по решению заказчика оставляем ярко-зелёный фон
      с белым текстом — как было изначально. Контраст 2.1:1 (норма 4.5:1),
      правило оставлено явным, чтобы не потерять этот выбор при будущих правках. */
.product .availability.in-stock,
.storefront-product-card .availability.in-stock{
  background: #10c44d !important;
  color: #fff !important;
}