/* ICE-IT home (front-page) — pixel-perfect per /png/main.png */

.ice-home { background: var(--ice-theme-surface-bg); }
.ice-home > section { width: 100%; }

/* Section heads — moved to components.css (shared with static pages). */

/* ============ HERO ============ */
.ice-hero {
  position: relative;
  background: var(--ice-theme-hero-bg);
  padding: 24px 0 16px;
  overflow: hidden;
}
.ice-hero__deco {
  display: none;
}
.ice-hero__inner {
  position: relative; z-index: 1;
  display: flex;
  align-items: start;
  gap: 16px;
}
.ice-hero__text {
  flex: 1 1 0;
  min-width: 0;
  max-width: none;
  position: relative;
  isolation: isolate;
  padding-top: 148px;
}
.ice-hero__text::before {
  content: "";
  position: absolute;
  width: 468px;
  height: 468px;
  left: -54px;
  top: -70px;
  border-radius: 999px;
  opacity: .92;
  background: radial-gradient(circle, rgba(193, 213, 255, .98) 0%, rgba(205, 220, 255, .68) 28%, rgba(210, 223, 255, .18) 58%, rgba(210, 223, 255, 0) 78%);
  filter: blur(2px);
  pointer-events: none;
  z-index: -1;
}
.ice-hero__title {
  max-width: 438px;
  margin: 0 0 12px;
  font: 800 clamp(1.82rem, 2.2vw, 2.3rem)/1.04 var(--ice-font-sans);
  color: var(--ice-ink); letter-spacing: -0.01em;
}
.ice-hero__title span { color: var(--ice-primary); font-weight: 800; }
.ice-hero__lead {
  margin: 0 0 18px;
  font-size: 0.875rem;
  color: #5d6884;
  max-width: 340px;
  line-height: 1.35;
}
.ice-hero__catalog {
  background: #fff;
  border: 1px solid #e8edf6;
  border-radius: 10px;
  padding: 8px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: 6px;
  align-items: stretch;
  width: 100%;
  box-shadow: 0 10px 24px rgba(14, 26, 51, .08);
  margin-bottom: 20px;
}
.ice-hero__field {
  position: relative;
  display: flex; align-items: center;
}
.ice-hero__field--select::after {
  content: "";
  position: absolute;
  right: 14px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--ice-muted);
  border-bottom: 2px solid var(--ice-muted);
  transform: translateY(-60%) rotate(45deg);
  pointer-events: none;
}
.ice-hero__field-ico {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  color: var(--ice-muted); display: inline-flex;
}
.ice-hero__field-ico svg { width: 14px; height: 14px; }
.ice-hero__field input,
.ice-hero__field select {
  width: 100%;
  min-height: 34px;
  border: 1px solid #edf0f5;
  border-radius: 7px;
  background: #fff;
  padding: 8px 12px 8px 34px;
  font: 400 0.75rem/1.25 var(--ice-font-sans);
  color: var(--ice-ink); outline: 0;
}
.ice-hero__field select {
  appearance: none;
  -webkit-appearance: none;
  padding: 8px 34px 8px 12px;
}
.ice-hero__field input::placeholder { color: var(--ice-muted); }
.ice-hero__catalog button {
  padding: 0 18px;
  font-size: var(--ice-btn-font-size);
  border-radius: 7px;
  white-space: nowrap;
 }
.ice-hero__catalog .ice-form__status {
  grid-column: 1 / -1;
}

@media (min-width: 1440px) {
  .ice-hero__title {
    font-size: 2.3rem;
  }
}

@media (max-width: 1280px) {
  .ice-hero__text::before {
    width: 430px;
    height: 430px;
    left: -40px;
    top: -56px;
  }
  .ice-hero__inner {
    gap: 12px;
  }
  .ice-hero__title { max-width: 410px; }
  .ice-hero__media {
    flex-basis: 440px;
    max-width: 440px;
  }
}

@media (max-width: 1180px) {
  .ice-hero__catalog {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1100px) {
  .ice-hero__text::before {
    width: 380px;
    height: 380px;
    left: -24px;
    top: -44px;
  }
  .ice-hero__inner {
    gap: 8px;
  }
  .ice-hero__title { max-width: 372px; }
  .ice-hero__media {
    flex-basis: 390px;
    max-width: 390px;
  }
}

.ice-hero__help { margin-top: 0; }
.ice-hero__help h3 {
  margin: 0 0 2px;
  color: var(--ice-ink);
  font: 700 0.875rem/1.3 var(--ice-font-sans);
}
.ice-hero__help p {
  margin: 0 0 14px;
  color: var(--ice-muted);
  font-size: 0.6875rem;
}
.ice-hero__help .ice-btn--lg {
  padding: 0 18px;
  font-size: var(--ice-btn-font-size);
  border-radius: 4px;
}

.ice-hero__media {
  position: relative;
  flex: 0 0 470px;
  width: 100%;
  max-width: 470px;
  margin-left: auto;
  aspect-ratio: 800/760;
  border-radius: 8px;
  overflow: hidden;
  background: linear-gradient(135deg, #2a3858 0%, #0e1a33 100%);
  box-shadow: 0 18px 44px rgba(24, 45, 96, .12);
}
.ice-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}
.ice-hero__media::after {
  display: none;
}

@media (min-width: 993px) {
  .ice-hero__media {
    flex: 0 0 auto;
    width: auto;
    max-width: 58%;
    height: clamp(420px, calc(100svh - var(--iceit-header-height, 127px) - 176px), 940px);
    aspect-ratio: 800 / 1094;
  }
}

@media (max-width: 992px) {
  .ice-hero__inner {
    flex-direction: column;
    align-items: center;
    gap: 26px;
  }
  .ice-hero__text {
    flex: none;
    width: 100%;
    max-width: 100%;
    padding-top: 0;
    padding-left: 0;
    padding-right: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .ice-hero__text::before { display: none; }
  .ice-hero__media {
    flex: none;
    max-width: none;
    width: 100%;
    aspect-ratio: 800/1094;
  }
  .ice-hero__title,
  .ice-hero__lead { max-width: 620px; }
  .ice-hero__lead { max-width: none; }
  .ice-hero__catalog {
    grid-template-columns: 1fr;
  }
  .ice-hero__help {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
}
@media (max-width: 480px) {
  .ice-hero__media { aspect-ratio: 800/1094; }
  .ice-hero__catalog { padding: 8px; }
}

/* ============ HIGHLIGHTS (3 cards under hero) ============ */
.ice-highlights {
  background: #fff;
  padding: 22px 0 22px;
  border-bottom: 1px solid var(--ice-line);
}
.ice-highlights__grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.ice-highlight {
  display: flex; gap: var(--ice-s-4); align-items: center;
  background: #fff; border: 1px solid var(--ice-line);
  border-radius: 10px;
  padding: 10px 14px;
  box-shadow: none;
}
.ice-highlight__icon {
  flex: 0 0 32px; width: 32px; height: 32px; border-radius: 9px;
  background: var(--ice-primary-50); color: var(--ice-primary);
  display: grid; place-items: center;
  background-size: 70%;
}
.ice-highlight__title {
  margin: 0 0 4px;
  font: 700 0.875rem/1.25 var(--ice-font-sans);
  color: var(--ice-ink);
}
.ice-highlight__text {
  margin: 0;
  color: var(--ice-muted);
  font-size: 0.6875rem;
  line-height: 1.35;
}
@media (max-width: 992px) { .ice-highlights__grid { grid-template-columns: 1fr; } }

/* ============ QUICK CATEGORIES (Что ищете?) ============ */
.ice-quick-cats {
  background: #fff;
  padding: clamp(48px, 5vw, 72px) 0;
}
.ice-quick-cats__grid {
  display: grid; grid-template-columns: repeat(6, 1fr);
  gap: var(--ice-s-4);
}
.ice-quick-cat {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 10px;
  height: 100%;
  padding: 18px 12px 16px;
  background: #fff;
  border: 1px solid var(--ice-line); border-radius: var(--ice-r-3);
  color: var(--ice-ink); text-decoration: none;
  transition: .15s var(--ice-ease);
}
.ice-quick-cat:hover {
  border-color: var(--ice-primary);
  box-shadow: var(--ice-sh-1);
  color: var(--ice-primary);
  transform: translateY(-2px);
}
.ice-quick-cat__icon {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--ice-primary-50); color: var(--ice-primary);
  display: grid; place-items: center;
  background-size: 52%;
}
.ice-quick-cat__name {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 600 0.875rem/1.3 var(--ice-font-sans);
}
.ice-quick-cat__count {
  margin-top: auto;
  font-size: 0.75rem;
  color: var(--ice-muted);
}
@media (max-width: 1100px) { .ice-quick-cats__grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px)  { .ice-quick-cats__grid { grid-template-columns: repeat(2, 1fr); } }

/* ============ FORM BAND (Ответим на вопросы — синяя полоса) ============ */
.ice-form-band {
  background: var(--ice-primary);
  background-image: linear-gradient(135deg, var(--ice-primary) 0%, var(--ice-primary-600) 100%);
  color: #fff;
  padding: clamp(40px, 5vw, 64px) 0;
}
.ice-form-band__inner {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
}
.ice-form-band__text h2 {
  margin: 0 0 var(--ice-s-3); color: #fff;
  font: 700 clamp(1.4rem, 2vw, 1.875rem)/1.25 var(--ice-font-sans);
}
.ice-form-band__text h2 span { color: #fff; text-decoration: underline; text-decoration-color: rgba(255,255,255,.55); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.ice-form-band__text p { margin: 0; color: rgba(255,255,255,.85); font-size: var(--ice-fs-md); }

.ice-form-band__form {
  display: grid; gap: var(--ice-s-3);
  background: #fff; border-radius: var(--ice-r-3);
  padding: var(--ice-s-5);
  box-shadow: var(--ice-sh-2);
}
.ice-form-band__form label { display: block; }
.ice-form-band__form input {
  width: 100%; padding: 12px 14px;
  border: 1px solid var(--ice-line); border-radius: var(--ice-r-2);
  font: 400 var(--ice-fs-base)/1.4 var(--ice-font-sans);
  background: #fff; color: var(--ice-ink);
}
.ice-form-band__form input:focus {
  outline: 2px solid var(--ice-primary-50); border-color: var(--ice-primary);
}
.ice-form-band__note {
  margin: 0; font-size: var(--ice-fs-xs); color: var(--ice-muted); text-align: center;
}
.ice-form-band__note a { color: var(--ice-primary); }

@media (max-width: 992px) {
  .ice-form-band__inner { grid-template-columns: 1fr; }
}

/* ============ POPULAR PRODUCTS (Самые популярные запчасти) ============
 * Uses the shared product card (.ice-card.ice-card--product) from components.css.
 * Only the grid column count is home-specific.
 */
.ice-home-products { padding: clamp(48px, 6vw, 80px) 0; background: var(--ice-theme-surface-bg); }
.ice-home-products .ice-grid--products { grid-template-columns: repeat(4, 1fr); gap: var(--ice-s-5); }
@media (max-width: 1100px) { .ice-home-products .ice-grid--products { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px)  { .ice-home-products .ice-grid--products { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px)  { .ice-home-products .ice-grid--products { grid-template-columns: 1fr; } }
.ice-home-products__more { display: flex; justify-content: center; margin-top: var(--ice-s-6); }

/* ============ ADVANTAGES (6-card features grid) ============ */
.ice-advantages {
  background: var(--ice-soft);
  padding: clamp(40px, 5vw, 64px) 0;
}
.ice-advantages__grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--ice-s-4);
}
.ice-advantage {
  display: flex; gap: var(--ice-s-4); align-items: flex-start;
  background: #fff; border: 1px solid var(--ice-line);
  border-radius: var(--ice-r-3);
  padding: var(--ice-s-5);
}
.ice-advantage__icon {
  flex: 0 0 36px; width: 36px; height: 36px; border-radius: 10px;
  background: var(--ice-primary-50); color: var(--ice-primary);
  display: grid; place-items: center;
}
.ice-advantage__body h3 {
  margin: 0 0 4px;
  font: 600 var(--ice-fs-base)/1.3 var(--ice-font-sans);
  color: var(--ice-ink);
}
.ice-advantage__body p {
  margin: 0; color: var(--ice-muted); font-size: var(--ice-fs-sm); line-height: 1.45;
}
@media (max-width: 992px) { .ice-advantages__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .ice-advantages__grid { grid-template-columns: 1fr; } }

/* ============ NEWS (Свежие новости) ============ */
.ice-news { background: var(--ice-theme-surface-bg); padding: clamp(48px, 6vw, 80px) 0; }
.ice-news__grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: var(--ice-s-5);
}
@media (max-width: 1100px) { .ice-news__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .ice-news__grid { grid-template-columns: 1fr; } }
.ice-news-card {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--ice-line);
  border-radius: var(--ice-r-3); overflow: hidden;
  transition: .15s var(--ice-ease);
}
.ice-news-card:hover { box-shadow: var(--ice-sh-2); transform: translateY(-2px); }
.ice-news-card__media {
  display: block; aspect-ratio: 4/3; background: var(--ice-soft);
  overflow: hidden;
}
.ice-news-card__media img { width: 100%; height: 100%; object-fit: cover; }
.ice-news-card__placeholder {
  display: block; width: 100%; height: 100%;
  background: linear-gradient(135deg, #1a2a55 0%, #0e1a33 100%);
}
.ice-news-card__body { padding: var(--ice-s-4); display: flex; flex-direction: column; gap: var(--ice-s-2); }
.ice-news-card__meta {
  font-size: var(--ice-fs-xs); color: var(--ice-muted);
  display: flex; align-items: center; gap: 6px;
}
.ice-news-card__cat { color: var(--ice-primary); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.ice-news-card__title {
  margin: 0;
  font: 600 var(--ice-fs-base)/1.35 var(--ice-font-sans);
  color: var(--ice-ink);
}
.ice-news-card__title a { color: inherit; }
.ice-news-card__title a:hover { color: var(--ice-primary); }
.ice-news__more { display: flex; justify-content: center; margin-top: var(--ice-s-6); }

/* ============ MAP + CONTACTS (Как нас найти) ============ */
.ice-map { padding: clamp(48px, 6vw, 80px) 0; }
.ice-map .ice-section-head--center { margin-bottom: var(--ice-s-6); }
.ice-map__grid {
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: var(--ice-s-5);
}
@media (max-width: 992px) { .ice-map__grid { grid-template-columns: 1fr; } }
.ice-map__frame {
  border-radius: var(--ice-r-3); overflow: hidden; background: var(--ice-soft);
  min-height: 460px; box-shadow: var(--ice-sh-1);
}
.ice-map__frame iframe { display: block; width: 100%; height: 100%; min-height: 460px; border: 0; }
.ice-map__contacts {
  display: flex; flex-direction: column; gap: var(--ice-s-3);
}

.ice-contact-card {
  display: flex; gap: var(--ice-s-4); align-items: flex-start;
  background: #fff; border: 1px solid var(--ice-line);
  border-radius: var(--ice-r-3);
  padding: var(--ice-s-4) var(--ice-s-5);
  box-shadow: var(--ice-sh-1);
}
.ice-contact-card__icon {
  flex: 0 0 40px; width: 40px; height: 40px; border-radius: 10px;
  background: var(--ice-primary-50); color: var(--ice-primary);
  display: grid; place-items: center;
}
.ice-contact-card__label {
  font-size: var(--ice-fs-xs); color: var(--ice-muted);
  text-transform: uppercase; letter-spacing: .05em; margin-bottom: 4px;
}
.ice-contact-card__value {
  font-size: var(--ice-fs-base); color: var(--ice-ink); line-height: 1.45;
}
.ice-contact-card__row {
  font-size: var(--ice-fs-base); color: var(--ice-ink); line-height: 1.5;
  display: flex; gap: 6px; flex-wrap: wrap;
}
.ice-contact-card__row a { color: var(--ice-ink); }
.ice-contact-card__row a:hover { color: var(--ice-primary); }
.ice-contact-card__hint { color: var(--ice-muted); font-size: var(--ice-fs-sm); }

/* ============ Homepage icons (background-image) ============ */
.ice-ico {
  display: inline-block;
  background-repeat: no-repeat; background-position: center;
}
.ice-ico--truck     { background-image: url("icons/advantages/truck.svg"); }
.ice-ico--box       { background-image: url("icons/home/box.svg"); }
.ice-ico--check     { background-image: url("icons/home/check.svg"); }
.ice-ico--percent   { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%231f48e8' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'><line x1='18' y1='6' x2='6' y2='18'/><circle cx='7.5' cy='7.5' r='2.1'/><circle cx='16.5' cy='16.5' r='2.1'/></svg>"); }
.ice-ico--shield    { background-image: url("icons/advantages/shield.svg"); }
.ice-ico--clock     { background-image: url("icons/home/clock.svg"); }
.ice-ico--doc       { background-image: url("icons/advantages/doc.svg"); }
.ice-ico--badge     { background-image: url("icons/advantages/badge.svg"); }
.ice-ico--cert      { background-image: url("icons/advantages/cert.svg"); }
.ice-ico--medal     { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%231f48e8' stroke-width='1.85' stroke-linecap='round' stroke-linejoin='round'><path d='M9 4.5h6l-1.4 4.1h-3.2L9 4.5Z'/><circle cx='12' cy='14.3' r='4.2'/><path d='m10.4 14.2 1.1 1.1 2.2-2.3'/></svg>"); }
.ice-ico--support   { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%231f48e8' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'><path d='M12 18.5c3.9 0 7-2.7 7-6.1s-3.1-6.1-7-6.1-7 2.7-7 6.1c0 1.3.5 2.5 1.4 3.5L5.5 19l3.4-1.5c.9.6 2 .9 3.1.9Z'/></svg>"); }
.ice-ico--pin       { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%231f48e8' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'><path d='M12 20s5.8-5.2 5.8-9.5A5.8 5.8 0 1 0 6.2 10.5C6.2 14.8 12 20 12 20Z'/><circle cx='12' cy='10.2' r='2.1'/></svg>"); }
.ice-ico--phone     { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%231f48e8' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'><path d='M18.6 15.6v2.1a1.8 1.8 0 0 1-2 1.8 13.8 13.8 0 0 1-6-2.1 13.5 13.5 0 0 1-4.2-4.2 13.8 13.8 0 0 1-2.1-6 1.8 1.8 0 0 1 1.8-2h2.1a1.8 1.8 0 0 1 1.7 1.5c.1.8.3 1.6.6 2.2a1.8 1.8 0 0 1-.4 1.8l-.9 1a11 11 0 0 0 4.2 4.2l1-.9a1.8 1.8 0 0 1 1.8-.4c.7.3 1.4.5 2.2.6a1.8 1.8 0 0 1 1.5 1.7Z'/></svg>"); }
.ice-ico--mail      { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%231f48e8' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'><rect x='4' y='6.2' width='16' height='11.6' rx='1.8'/><path d='m20 8-8 5-8-5'/></svg>"); }
.ice-ico--drop      { background-image: url("icons/home/drop.svg"); }
.ice-ico--pulse     { background-image: url("icons/home/gauge.svg"); }
.ice-ico--filter    { background-image: url("icons/home/filter.svg"); }
.ice-ico--gear      { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%231f48e8' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3.6 5.6 7.1v9.8l6.4 3.5 6.4-3.5V7.1L12 3.6Z'/><path d='M5.6 7.1 12 10.7l6.4-3.6'/><path d='M12 10.7v9.7'/></svg>"); }
.ice-ico--rubber    { background-image: url("icons/home/ring.svg"); }
.ice-ico--pump      { background-image: url("icons/home/wind.svg"); }
