/* unipro/market/static/market/css/components.css */
/* CLEAN: base + shared components (NO layout header/footer/main) */

/* ===== Base / reset ===== */
* { box-sizing: border-box; }

html, body { height: 100%; }

.mkf-visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ===== Layout helpers (shared) ===== */
.mkf-container {
  width: min(96%, 1700px);
  margin-inline: auto;
  padding-inline: 24px;
}

/* Общий фон и базовый layout (общие) */
.mkf-body {
  margin: 0;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--mkf-page-bg, #f3f4f6);
  color: var(--mkf-text-main, #111827);
}

.mkf-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Поверхность (reuse для карточек и прочих блоков) */
.mkf-surface {
  background: var(--mkf-surface-bg, #ffffff);
  border-radius: var(--mkf-radius-lg, 12px);
  box-shadow: var(--mkf-shadow-soft, 0 10px 25px rgba(15, 23, 42, 0.08));
}

/* ===== Typography ===== */
.mkf-title {
  font-size: 22px;
  font-weight: 600;
  margin: 0 0 16px;
  line-height: 1.25;
}

.mkf-title-meta{
  font-weight: 400;
  font-size: 0.75em;
  line-height: 1;
  color: #8b8f97;
  margin-left: 10px;
  vertical-align: middle;
  white-space: nowrap;
}

.mkf-cat-tile__meta{
  font-weight: 400;
  font-size: 0.75em;
  color: #8b8f97;
  margin-left: 6px;
  white-space: nowrap;
}

/* === Плитка категорий на главной (mkf-home-cats) === */
.mkf-home-cats { margin: 20px 0 28px; }

.mkf-home-cats-header {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 12px;
}

.mkf-home-cats-title { margin: 0; font-size: 20px; }
.mkf-home-cats-subtitle { font-size: 13px; color: var(--mkf-muted); }

.mkf-home-cats-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 16px;
}

/* одна карточка категории */
.mkf-home-cat {
  position: relative;
  overflow: hidden;
  padding: 12px 12px 10px;
  border-radius: 16px;
  background: var(--mkf-surface);
  border: 1px solid var(--mkf-border);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
  text-decoration: none;
  color: var(--mkf-on-surface);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 110px;
  transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}

.mkf-home-cat:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.12);
  border-color: rgba(37, 99, 235, 0.35);
}

.mkf-home-cat-text { max-width: 65%; }

.mkf-home-cat-name {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  margin-bottom: 4px;
}

.mkf-home-cat-link { font-size: 12px; color: var(--mkf-muted); }

/* превьюшки товаров внутри карточки категории */
.mkf-home-cat-thumb {
  flex: 0 0 70px;
  height: 70px;
  border-radius: 12px;
  background: var(--mkf-thumb);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.mkf-home-cat-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.mkf-home-cat-thumb:empty::after {
  content: "Фото";
  font-size: 11px;
  color: var(--mkf-muted);
}

/* адаптив по колонкам */
@media (max-width: 1100px) {
  .mkf-home-cats-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .mkf-home-cats-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .mkf-home-cats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 420px) {
  .mkf-home-cats-grid { grid-template-columns: 1fr; }
}

/* ================================
   Брендовая полка (2 строки + стрелки)
   ================================ */
.mkf-home-brands { margin: 20px 0 28px; }

.mkf-brands { position: relative; }

.mkf-brands-viewport {
  overflow: hidden;
  padding: 0 52px; /* место под стрелки */
}

.mkf-brands-grid {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  grid-template-rows: repeat(2, 56px);
  gap: 12px;

  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;

  padding: 2px 0 10px;
  align-items: center;

  scrollbar-width: none;
  -ms-overflow-style: none;
}

.mkf-brands-grid::-webkit-scrollbar { display: none; }

/* стрелки */
.mkf-brands-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;

  height: 44px;
  width: 44px;
  border-radius: 999px;
  border: 1px solid var(--mkf-border);
  background: var(--mkf-surface);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
  cursor: pointer;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  font-size: 22px;
  line-height: 1;
  color: var(--mkf-on-surface);

  transition: transform 0.12s ease,
              box-shadow 0.12s ease,
              border-color 0.12s ease;
}

.mkf-brands-nav--prev { left: 0; }
.mkf-brands-nav--next { right: 0; }

.mkf-brands-nav:hover {
  transform: translateY(-50%) translateY(-1px);
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.12);
  border-color: rgba(37, 99, 235, 0.35);
}

.mkf-brands-nav:active { transform: translateY(-50%); }

.mkf-brands-nav[disabled] {
  opacity: 0.35;
  cursor: default;
  box-shadow: none;
}

/* чип бренда */
.mkf-brand-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  height: 56px;
  padding: 10px 14px;

  border-radius: 999px;
  background: var(--mkf-surface);
  border: 1px solid var(--mkf-border);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);

  text-decoration: none;
  color: var(--mkf-on-surface);

  transition: transform 0.12s ease,
              box-shadow 0.12s ease,
              border-color 0.12s ease;

  scroll-snap-align: start;
}

.mkf-brand-chip:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.12);
  border-color: rgba(37, 99, 235, 0.35);
}

.mkf-brand-chip:active { transform: translateY(0); }

.mkf-brand-chip__logo {
  width: 110px;
  height: 34px;
  object-fit: contain;
  display: block;
}

.mkf-brand-chip__text {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.1;
  white-space: nowrap;
}

/* ---------- адаптив ---------- */
@media (max-width: 900px) {
  .mkf-brands-nav { display: none; }
  .mkf-brands-viewport { padding: 0; overflow: visible; }
  .mkf-brands-grid { -webkit-overflow-scrolling: touch; padding-bottom: 12px; }
}

/* === Алфавитный указатель брендов === */
.mkf-alphabet {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 10px 0 16px;
}

.mkf-alphabet-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  height: 34px;
  min-width: 34px;
  padding: 0 10px;

  border-radius: 10px;
  border: 1px solid var(--mkf-border);
  background: var(--mkf-surface);

  font-size: 13px;
  font-weight: 600;
  line-height: 1;

  color: var(--mkf-on-surface);
  text-decoration: none;

  transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease, background 0.12s ease;
}

.mkf-alphabet-item:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.08);
  border-color: rgba(37, 99, 235, 0.35);
  background: rgba(37, 99, 235, 0.06);
}

.mkf-alphabet-item:active { transform: translateY(0); box-shadow: none; }

.mkf-alphabet-item.is-active {
  border-color: rgba(37, 99, 235, 0.55);
  background: rgba(37, 99, 235, 0.10);
}

/* === Search suggest dropdown === */
.mkf-search { position: relative; }

.mkf-suggest {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 8px);
  z-index: 50;

  background: var(--mkf-surface);
  border: 1px solid var(--mkf-border);
  border-radius: 14px;
  box-shadow: var(--mkf-shadow);

  overflow: hidden;
}

.mkf-suggest__loading,
.mkf-suggest__empty {
  padding: 12px 14px;
  color: var(--mkf-muted);
  font-size: 13px;
}

.mkf-suggest__section { border-top: 1px solid var(--mkf-border); }
.mkf-suggest__section:first-child { border-top: 0; }

.mkf-suggest__title {
  padding: 10px 14px 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--mkf-muted);
  text-transform: uppercase;
  letter-spacing: .06em;
}

.mkf-suggest__items { max-height: 340px; overflow: auto; }

.mkf-suggest__row {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 10px 14px;
  text-decoration: none;
  color: var(--mkf-on-surface);
  border-top: 1px solid rgba(0,0,0,.04);
}

.mkf-suggest__row:first-child { border-top: 0; }

.mkf-suggest__row:hover,
.mkf-suggest__row.is-active {
  background: rgba(37, 99, 235, 0.08);
}

.mkf-suggest__main { min-width: 0; flex: 1 1 auto; }
.mkf-suggest__name {
  font-weight: 650;
  font-size: 14px;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mkf-suggest__meta {
  margin-top: 2px;
  font-size: 12px;
  color: var(--mkf-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mkf-suggest__code { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }

.mkf-suggest__side { flex: 0 0 auto; text-align: right; }
.mkf-suggest__price { font-weight: 800; font-size: 13px; }
.mkf-suggest__badge {
  margin-top: 4px;
  display: inline-flex;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  border: 1px solid var(--mkf-border);
  color: var(--mkf-muted);
}
.mkf-suggest__badge.is-ok { color: #065f46; border-color: rgba(6,95,70,.25); background: rgba(6,95,70,.08); }
.mkf-suggest__badge.is-warn { color: #92400e; border-color: rgba(146,64,14,.25); background: rgba(146,64,14,.08); }

.mkf-suggest__footer { border-top: 1px solid var(--mkf-border); }
.mkf-suggest__row--cta { font-weight: 650; }

.mkf-search-note{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  margin: -10px 0 14px;
  color: var(--mkf-muted);
  font-size: 13px;
}

.mkf-search-note__label{ opacity: .85; }

.mkf-search-note__chip{
  display:inline-flex;
  align-items:center;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--mkf-border);
  background: rgba(37, 99, 235, 0.06);
  color: var(--mkf-on-surface);
  font-weight: 650;
}

.mkf-search-note__clear{
  margin-left: 4px;
  text-decoration: none;
  border-bottom: 1px dashed rgba(37,99,235,.45);
  color: var(--mkf-accent);
}

.mkf-search-note__clear:hover{ border-bottom-color: transparent; }

/* =========================================================
   Брендовая плитка (market/brands)
   ========================================================= */

/* Модификатор карточки только для брендов */
.mkf-home-cat--brand{
  align-items: flex-start; /* выравниваем по верхней линии */
}

/* Контейнер логотипа / fallback */
.mkf-home-cat--brand .mkf-home-cat-thumb--brand{
  flex: 0 0 110px;
  width: 110px;
  height: 46px;

  border-radius: 12px;
  background: transparent;

  display: flex;
  align-items: flex-start;   /* логотип начинается сверху */
  justify-content: center;

  padding-top: 4px;          /* лёгкая подгонка к baseline */
  align-self: flex-start;
}

/* Логотип */
.mkf-home-cat--brand .mkf-home-cat-thumb--brand img{
  width: 100%;
  height: 42px;              /* чуть меньше контейнера */
  object-fit: contain;
  object-position: top center;
  display: block;
}

/* Fallback инициалы — спокойный вариант */
.mkf-home-cat--brand .mkf-brand-fallback{
  padding: 6px 12px;
  border-radius: 10px;

  background: rgba(31, 47, 107, 0.05);
  color: rgba(31, 47, 107, 0.6);

  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.5px;

  line-height: 1;
  user-select: none;
}

/* Лёгкий hover (очень аккуратно) */
.mkf-home-cat--brand:hover .mkf-brand-fallback{
  background: rgba(31, 47, 107, 0.08);
  color: rgba(31, 47, 107, 0.8);
}

.mkf-home-cat--brand:hover .mkf-home-cat-thumb--brand img{
  transform: scale(1.03);
  transition: transform .15s ease;
}

/* =========================================================
   Category tiles: horizontal layout (image left, text right)
   ========================================================= */

.mkf-cat-tile--iconleft{
  display: flex;
  flex-direction: row;        /* строго в строку */
  align-items: flex-start;
  gap: 12px;
}

/* иконка фиксированной ширины */
.mkf-cat-tile--iconleft .mkf-cat-tile__icon{
  flex: 0 0 56px;             /* фикс ширина */
  width: 56px;
  height: 56px;

  border-radius: 14px;
  background: rgba(15, 23, 42, 0.04);

  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* картинка */
.mkf-cat-tile--iconleft .mkf-cat-tile__icon img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* текст занимает остальное пространство */
.mkf-cat-tile--iconleft .mkf-cat-tile__text{
  flex: 1 1 auto;
  min-width: 0;                /* важно для переноса длинного текста */
}

/* если нет картинки */
.mkf-cat-tile--iconleft .mkf-cat-tile__icon:empty{
  background: rgba(15, 23, 42, 0.03);
}

/* ======================================================================
   Vendor in product card — clean version
   Click only on logo/text (not entire row)
   ====================================================================== */

/* Контейнер строки бренда (НЕ ссылка) */
.mkf-card .card__vendor{
  display: flex;
  align-items: center;

  height: 22px;              /* фиксированная высота строки */
  min-width: 0;

  font-size: var(--pc-vendor);
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;

  color: var(--mkf-muted);
}

/* Кликабельная область (только лого или текст) */
.mkf-card .card__vendor-link{
  display: inline-flex;
  align-items: center;

  height: 22px;
  max-width: 100%;

  text-decoration: none;
  color: inherit;

  transition: color .15s ease;
}

.mkf-card .card__vendor-link:hover{
  color: var(--mkf-on-surface);
}

/* ===== Logo ===== */

.mkf-card .card__vendor-logo{
  height: 18px;
  width: auto;
  max-width: 100%;

  display: block;
  object-fit: contain;

  opacity: 0.92;

  transition:
    transform .18s ease,
    opacity .18s ease,
    filter .18s ease;
}

.mkf-card .card__vendor-link:hover .card__vendor-logo{
  transform: translateY(-1px) scale(1.04);
  opacity: 1;
  filter: saturate(1.1);
}

/* ===== Text fallback ===== */

.mkf-card .card__vendor-text{
  line-height: 22px;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

  font-size: var(--pc-vendor);
}