/* haustier.uz shop — минимальная своя вёрстка, без внешних CDN (автономия §8-quater). */
:root {
  --osnovnoy: #1f6f43;
  --akcent: #a12c2c;
  --tekst: #222;
  --fon: #fafaf7;
  --granitsa: #e0ddd3;
}
* { box-sizing: border-box; }
body {
  margin: 0; font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color: var(--tekst); background: var(--fon);
}
a { color: var(--osnovnoy); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; display: block; }

.shapka { background: #fff; border-bottom: 1px solid var(--granitsa); }
.shapka-vnutri {
  max-width: 1200px; margin: 0 auto; padding: 12px 16px;
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
}
.logo { font-weight: 700; font-size: 1.3em; color: var(--osnovnoy); }
.menyu { display: flex; gap: 16px; }
.menyu-sprava { margin-left: auto; }
.badge {
  background: var(--osnovnoy); color: #fff; border-radius: 999px;
  padding: 1px 7px; font-size: 0.8em;
}
.lang-forma select { padding: 4px; }

.poisk-forma { display: flex; gap: 6px; flex: 1 1 220px; max-width: 360px; }
.poisk-forma input[type="search"] { flex: 1; padding: 6px 8px; border: 1px solid var(--granitsa); border-radius: 6px; }

.hlebnye-kroshki { background: transparent; }
.hlebnye-kroshki-vnutri {
  max-width: 1200px; margin: 0 auto; padding: 10px 16px 0;
  font-size: 0.85em; color: #777; display: flex; flex-wrap: wrap; gap: 4px; align-items: center;
}
.hlebnye-kroshki a { color: #777; }
.hlebnye-kroshki .razdelitel { color: #bbb; margin: 0 2px; }
.hlebnye-kroshki .tekuschaya { color: var(--tekst); }

.soobscheniya { max-width: 1100px; margin: 8px auto; padding: 0 16px; }
.soobschenie { padding: 8px 12px; border-radius: 6px; margin-bottom: 6px; }
.soobschenie-success { background: #e3f3e8; color: #1f6f43; }
.soobschenie-error { background: #fbe3e3; color: #a12c2c; }
.soobschenie-info { background: #eaf1fb; color: #2c5aa1; }

.soderzhimoe { max-width: 1200px; margin: 0 auto; padding: 16px; min-height: 60vh; }

/* --- Главная (наряд ITL-25, п.1) --- */
.hero { text-align: center; padding: 48px 16px; background: #fff; border-radius: 12px; margin-bottom: 20px; }
.hero h1 { margin: 0 0 8px; font-size: 2em; }
.hero-podzagolovok { color: #555; margin: 0 0 20px; font-size: 1.1em; }
.knopka-krupnaya { padding: 12px 28px; font-size: 1.05em; border-radius: 8px; }

.utp-polosa {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px;
  margin-bottom: 24px;
}
.utp {
  background: #fff; border: 1px solid var(--granitsa); border-radius: 8px; padding: 14px;
  display: flex; align-items: center; gap: 10px; font-size: 0.92em;
}
.utp-ikonka { font-size: 1.4em; }

.plitki-zhivotnye { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-bottom: 28px; }
.plitka-zhivotnoe {
  background: #fff; border: 1px solid var(--granitsa); border-radius: 10px; padding: 28px 16px;
  text-align: center; display: flex; flex-direction: column; gap: 6px;
}
.plitka-zhivotnoe:hover { border-color: var(--osnovnoy); text-decoration: none; }
.plitka-nazvanie { font-size: 1.3em; font-weight: 700; color: var(--tekst); }
.plitka-schet { color: #777; font-size: 0.9em; }

.top-pozitsii, .lenta-liniy, .blok-doveriya { margin-bottom: 28px; }
.top-pozitsii h2, .lenta-liniy h2 { font-size: 1.2em; margin-bottom: 12px; }
.lenta-liniy-spisok { display: flex; flex-wrap: wrap; gap: 10px; }
.liniya-znachok {
  background: #fff; border: 1px solid var(--granitsa); border-radius: 999px;
  padding: 6px 14px; font-size: 0.9em; color: var(--tekst);
}
.liniya-znachok:hover { border-color: var(--osnovnoy); text-decoration: none; }
.blok-doveriya { background: #fff; border: 1px solid var(--granitsa); border-radius: 8px; padding: 16px; color: #555; }

/* --- Каталог: фасеты и плотный список --- */
.katalog-layout { display: flex; gap: 24px; align-items: flex-start; }
.filtry-perekluchatel { display: none; }
.filtry { width: 240px; flex-shrink: 0; background: #fff; border: 1px solid var(--granitsa); border-radius: 8px; padding: 14px; }
.filtry h2 { font-size: 1em; margin: 0 0 12px; }
.faset { display: block; margin-bottom: 14px; font-size: 0.85em; font-weight: 600; }
.faset select { width: 100%; padding: 6px; margin-top: 4px; font-weight: 400; }
.sbros, .sbros-faseta { display: inline-block; margin-top: 4px; font-size: 0.85em; }

.tovary-setka { flex: 1; min-width: 0; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.kartochka-tovara {
  background: #fff; border: 1px solid var(--granitsa); border-radius: 8px; padding: 12px;
  display: flex; flex-direction: column; gap: 4px;
}
.kartochka-tovara h3 { font-size: 1em; margin: 0 0 4px; }
.tovar-foto { aspect-ratio: 1 / 1; overflow: hidden; border-radius: 6px; margin-bottom: 6px; background: #fff; }
.tovar-foto img { width: 100%; height: 100%; object-fit: contain; }
.brend-liniya { color: #777; font-size: 0.85em; margin: 0; }
.cena { font-weight: 600; }
.cena-po-zaprosu { color: #a17d1f; font-weight: 400; }
.nalichie.est { color: #1f6f43; }
.nalichie.net { color: #a12c2c; }
.min-zakaz { font-size: 0.8em; color: #777; }

/* Плотный список каталога (опту важна плотность — наряд ITL-25, п.2) */
.plotny-spisok { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--granitsa); border-radius: 8px; overflow: hidden; }
.stroka-tovara {
  display: grid; grid-template-columns: 56px 1fr auto auto auto auto; align-items: center;
  gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--granitsa); color: var(--tekst);
}
.stroka-tovara:last-child { border-bottom: none; }
.stroka-tovara:hover { background: #f5f4ef; text-decoration: none; }
.stroka-foto { width: 48px; height: 48px; border-radius: 4px; overflow: hidden; flex-shrink: 0; }
.stroka-foto img { width: 100%; height: 100%; object-fit: contain; }
.stroka-glavnoe { display: flex; flex-direction: column; min-width: 0; }
.stroka-nazvanie { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stroka-brend-liniya { color: #777; font-size: 0.82em; }
.stroka-fasovka, .stroka-sht, .stroka-min-zakaz { font-size: 0.85em; color: #555; white-space: nowrap; }
.stroka-nalichie { font-size: 0.85em; white-space: nowrap; }
.stroka-nalichie.est { color: #1f6f43; }
.stroka-nalichie.net { color: #a12c2c; }

.foto-plejsholder { opacity: 0.55; }

.knopka {
  display: inline-block; padding: 8px 14px; border-radius: 6px; border: 1px solid var(--osnovnoy);
  color: var(--osnovnoy); background: #fff; cursor: pointer; font-size: 0.95em; text-align: center;
}
.knopka-glavnaya { background: var(--osnovnoy); color: #fff; }
.knopka-malaya { padding: 4px 8px; font-size: 0.85em; }
.knopka-opasnaya { border-color: #a12c2c; color: #a12c2c; }

.kartochka-stranitsa { display: flex; gap: 32px; max-width: 900px; flex-wrap: wrap; }
.kartochka-foto-blok { width: 280px; flex-shrink: 0; }
.kartochka-foto { width: 100%; aspect-ratio: 1 / 1; object-fit: contain; background: #fff; border: 1px solid var(--granitsa); border-radius: 10px; }
.kartochka-svedeniya { flex: 1; min-width: 260px; }
.nazad { display: inline-block; margin-bottom: 8px; }

.klejma-spisok { list-style: none; margin: 10px 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.klejmo {
  background: #fbeee9; color: var(--akcent); border-radius: 6px; padding: 6px 10px;
  font-size: 0.85em; display: inline-block; width: fit-content;
}
.artikul { color: #777; font-size: 0.85em; margin: 8px 0 0; }

.harakteristiki { display: grid; grid-template-columns: max-content 1fr; gap: 4px 12px; margin: 16px 0; }
.harakteristiki dt { color: #777; }
.dobavit-forma { display: flex; gap: 12px; align-items: end; margin-top: 16px; flex-wrap: wrap; }
.dobavit-forma input { padding: 6px; width: 100px; }

.korzina-tablitsa { width: 100%; border-collapse: collapse; margin: 16px 0; }
.korzina-tablitsa th, .korzina-tablitsa td { padding: 8px; border-bottom: 1px solid var(--granitsa); text-align: left; }
.izmenit-forma { display: flex; gap: 6px; }
.izmenit-forma input { width: 70px; padding: 4px; }
.itogo-ves { color: #555; }

.zayavka-forma p { margin-bottom: 12px; }
.zayavka-forma input, .zayavka-forma textarea { width: 100%; padding: 8px; }
.podskazka { color: #777; font-size: 0.9em; }

/* --- Футер: 4 колонки (наряд ITL-25, п.1) --- */
.podval { color: #666; padding: 32px 16px 16px; border-top: 1px solid var(--granitsa); margin-top: 32px; }
.podval-kolonki {
  max-width: 1200px; margin: 0 auto; display: grid;
  grid-template-columns: repeat(4, 1fr); gap: 24px; padding-bottom: 20px;
}
.podval-kolonka h4 { margin: 0 0 8px; font-size: 0.9em; color: var(--tekst); }
.podval-kolonka a, .podval-kolonka p { display: block; font-size: 0.85em; color: #777; margin: 0 0 4px; }
.podval-nizhnyaya { max-width: 1200px; margin: 0 auto; text-align: center; font-size: 0.8em; color: #999; padding-top: 12px; border-top: 1px solid var(--granitsa); }

/* --- Мобильная вёрстка (наряд ITL-25, п.4: обязательно) --- */
@media (max-width: 760px) {
  .shapka-vnutri { gap: 10px; }
  .menyu, .menyu-sprava { flex: 0 0 auto; }
  .poisk-forma { order: 3; flex-basis: 100%; max-width: none; }

  .katalog-layout { flex-direction: column; }
  .filtry-perekluchatel {
    display: block; width: 100%; padding: 10px; border: 1px solid var(--granitsa);
    border-radius: 6px; background: #fff; font-size: 0.95em;
  }
  .filtry { display: none; width: 100%; }
  .filtry.filtry-otkryty { display: block; }

  .stroka-tovara {
    grid-template-columns: 44px 1fr; grid-template-areas: "foto glavnoe" "foto podrobnosti";
    row-gap: 4px;
  }
  .stroka-foto { grid-area: foto; }
  .stroka-glavnoe { grid-area: glavnoe; }
  .stroka-fasovka, .stroka-sht, .stroka-min-zakaz, .stroka-nalichie {
    grid-area: podrobnosti; display: inline; margin-right: 8px;
  }
  .stroka-fasovka::after, .stroka-sht::after, .stroka-min-zakaz::after { content: "·"; margin-left: 8px; color: #bbb; }

  .kartochka-stranitsa { flex-direction: column; }
  .kartochka-foto-blok { width: 100%; max-width: 320px; margin: 0 auto; }

  .podval-kolonki { grid-template-columns: repeat(2, 1fr); }

  .dobavit-forma { flex-direction: column; align-items: stretch; }
  .korzina-tablitsa { display: block; overflow-x: auto; white-space: nowrap; }
}

@media (max-width: 420px) {
  .podval-kolonki { grid-template-columns: 1fr; }
  .utp-polosa { grid-template-columns: 1fr; }
}