/* ICE-IT design tokens (from pdf-layout/)
 * This file contains ONLY design tokens (CSS variables) and
 * primitive utilities (wrap, breadcrumbs, buttons, badges, form).
 * Component implementations (cards, grids, pager, catalog, filters)
 * live in components.css / catalog.css / home.css.
 */
:root {
  /* Brand */
  --ice-primary: #1f48e8;
  --ice-primary-600: #1a3ec7;
  --ice-primary-50: #eaf0ff;
  --ice-navy: #0e1a33;
  --ice-navy-2: #162449;

  /* Neutrals */
  --ice-ink: #16203a;
  --ice-ink-2: #2b3654;
  --ice-muted: #6b7490;
  --ice-line: #e4e8f0;
  --ice-soft: #f5f7fb;
  --ice-white: #ffffff;

  /* Accents */
  --ice-success: #22a06b;
  --ice-success-soft: #e7f6ee;
  --ice-warn: #e8a317;

  /* Type */
  --ice-font-sans: "Inter", "Roboto", "Segoe UI", sans-serif;
  --ice-fs-xs: 0.75rem;
  --ice-fs-sm: 0.875rem;
  --ice-fs-base: 1rem;
  --ice-fs-md: 1.125rem;
  --ice-fs-lg: 1.375rem;
  --ice-fs-xl: 1.75rem;
  --ice-fs-2xl: 2.25rem;
  --ice-fs-3xl: 2.75rem;

  /* Spacing (8pt) */
  --ice-s-1: 4px;
  --ice-s-2: 8px;
  --ice-s-3: 12px;
  --ice-s-4: 16px;
  --ice-s-5: 24px;
  --ice-s-6: 32px;
  --ice-s-7: 48px;
  --ice-s-8: 64px;

  /* Radii */
  --ice-r-1: 6px;
  --ice-r-2: 10px;
  --ice-r-3: 14px;
  --ice-r-4: 20px;

  /* Elevation */
  --ice-sh-1: 0 2px 8px rgba(14, 26, 51, .06);
  --ice-sh-2: 0 8px 24px rgba(14, 26, 51, .08);
  --ice-sh-3: 0 20px 48px rgba(14, 26, 51, .12);

  /* Layout */
  --ice-wrap: 1200px;
  --ice-wrap-narrow: 960px;

  /* Motion */
  --ice-ease: cubic-bezier(.2,.7,.2,1);
}

/* Breakpoints (reference):
   xl 1440  |  lg 1200  |  md 992  |  sm 768  |  xs 360
*/

/* ---------- Primitives ---------- */

.ice-wrap { max-width: var(--ice-wrap); margin: 0 auto; padding: 0 var(--ice-s-5); }

.ice-breadcrumbs {
  display: flex; flex-wrap: wrap; gap: var(--ice-s-2);
  color: var(--ice-muted); font-size: var(--ice-fs-sm);
  padding: var(--ice-s-4) 0;
}
.ice-breadcrumbs a { color: var(--ice-muted); }
.ice-breadcrumbs a:hover { color: var(--ice-primary); }
.ice-breadcrumbs span + span::before { content: "/"; margin-right: var(--ice-s-2); color: var(--ice-line); }

/* Buttons */
.ice-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--ice-s-2); padding: 12px 20px; border-radius: var(--ice-r-2);
  font: 600 var(--ice-fs-base)/1 var(--ice-font-sans);
  border: 1px solid transparent; cursor: pointer; transition: .15s var(--ice-ease);
  text-decoration: none;
}
.ice-btn--primary { background: var(--ice-primary); color: #fff; }
.ice-btn--primary:hover { background: var(--ice-primary-600); color: #fff; }
.ice-btn--dark { background: var(--ice-navy); color: #fff; }
.ice-btn--dark:hover { background: var(--ice-navy-2); color: #fff; }
.ice-btn--ghost { background: #fff; color: var(--ice-ink); border-color: var(--ice-line); }
.ice-btn--ghost:hover { border-color: var(--ice-primary); color: var(--ice-primary); }
.ice-btn--block { width: 100%; }

/* Badges (base) */
.ice-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px;
  font: 600 var(--ice-fs-xs)/1.2 var(--ice-font-sans);
  background: var(--ice-success-soft); color: var(--ice-success);
  text-transform: uppercase; letter-spacing: .04em;
}
.ice-badge--new { background: #eaf0ff; color: var(--ice-primary); }

/* Single product (single-iceit_product.php) */
.ice-product {
  display: grid; grid-template-columns: minmax(0,1.1fr) minmax(0,1fr);
  gap: var(--ice-s-7); padding: var(--ice-s-4) 0 var(--ice-s-7);
}
@media (max-width: 992px) { .ice-product { grid-template-columns: 1fr; gap: var(--ice-s-5); } }

.ice-gallery__main {
  background: var(--ice-soft); border-radius: var(--ice-r-3); overflow: hidden;
  aspect-ratio: 4/3;
}
.ice-gallery__main img { width: 100%; height: 100%; object-fit: cover; }
.ice-gallery__thumbs { display: flex; gap: var(--ice-s-2); margin-top: var(--ice-s-3); flex-wrap: wrap; }
.ice-gallery__thumb {
  width: 80px; height: 64px; border-radius: var(--ice-r-1);
  background: var(--ice-soft); overflow: hidden; border: 2px solid transparent;
  cursor: pointer; padding: 0;
}
.ice-gallery__thumb img { width: 100%; height: 100%; object-fit: cover; }
.ice-gallery__thumb.is-active { border-color: var(--ice-primary); }

.ice-buy { display: flex; flex-direction: column; gap: var(--ice-s-4); }
.ice-buy__badges { display: flex; gap: var(--ice-s-2); flex-wrap: wrap; }
.ice-buy__title { margin: 0; font: 700 var(--ice-fs-2xl)/1.2 var(--ice-font-sans); color: var(--ice-ink); }
.ice-buy__price { font: 700 var(--ice-fs-xl)/1 var(--ice-font-sans); color: var(--ice-primary); }
.ice-buy__card {
  background: #fff; border: 1px solid var(--ice-line);
  border-radius: var(--ice-r-3); padding: var(--ice-s-5);
  display: flex; flex-direction: column; gap: var(--ice-s-4);
  box-shadow: var(--ice-sh-1);
}
.ice-buy__meta { display: grid; grid-template-columns: auto 1fr; gap: 6px var(--ice-s-4); font-size: var(--ice-fs-sm); }
.ice-buy__meta dt { color: var(--ice-muted); margin: 0; }
.ice-buy__meta dd { margin: 0; color: var(--ice-ink-2); }
.ice-buy__actions { display: flex; gap: var(--ice-s-3); flex-wrap: wrap; }

/* Product tabs */
.ice-tabs { margin: var(--ice-s-6) 0; }
.ice-tabs__nav { display: flex; gap: var(--ice-s-5); border-bottom: 1px solid var(--ice-line); margin-bottom: var(--ice-s-5); flex-wrap: wrap; }
.ice-tabs__nav button {
  background: none; border: 0; padding: var(--ice-s-3) 0; margin-bottom: -1px;
  font: 600 var(--ice-fs-base)/1 var(--ice-font-sans); color: var(--ice-muted);
  border-bottom: 2px solid transparent; cursor: pointer;
}
.ice-tabs__nav button.is-active { color: var(--ice-ink); border-color: var(--ice-primary); }
.ice-tabs__pane { display: none; }
.ice-tabs__pane.is-active { display: block; }

/* Form */
.ice-form { display: grid; gap: var(--ice-s-4); max-width: 720px; }
.ice-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ice-s-4); }
@media (max-width: 768px) { .ice-form__row { grid-template-columns: 1fr; } }
.ice-form label { display: flex; flex-direction: column; gap: 6px; font-size: var(--ice-fs-sm); color: var(--ice-ink-2); }
.ice-form input, .ice-form textarea, .ice-form select {
  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 input:focus, .ice-form textarea:focus {
  outline: 2px solid var(--ice-primary-50); border-color: var(--ice-primary);
}
.ice-form__hint { font-size: var(--ice-fs-xs); color: var(--ice-muted); }
.ice-form__status { padding: var(--ice-s-3); border-radius: var(--ice-r-2); font-size: var(--ice-fs-sm); }
.ice-form__status.is-ok { background: var(--ice-success-soft); color: var(--ice-success); }
.ice-form__status.is-err { background: #fdecec; color: #c1324c; }

/* Stats band */
.ice-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--ice-s-5); padding: var(--ice-s-6) 0; }
@media (max-width: 768px) { .ice-stats { grid-template-columns: repeat(2, 1fr); } }
.ice-stat__value { font: 700 var(--ice-fs-3xl)/1 var(--ice-font-sans); color: var(--ice-ink); }
.ice-stat__label { color: var(--ice-muted); font-size: var(--ice-fs-sm); margin-top: 6px; }

/* CTA band */
.ice-cta-band {
  background: var(--ice-primary); color: #fff;
  border-radius: var(--ice-r-3);
  padding: var(--ice-s-7) var(--ice-s-6);
  display: grid; grid-template-columns: 1fr auto; gap: var(--ice-s-5);
  align-items: center; margin: var(--ice-s-6) 0;
}
@media (max-width: 768px) { .ice-cta-band { grid-template-columns: 1fr; } }
.ice-cta-band h2 { margin: 0 0 var(--ice-s-2); font-size: var(--ice-fs-2xl); }
.ice-cta-band p { margin: 0; opacity: .85; }
.ice-cta-band .ice-btn--primary { background: #fff; color: var(--ice-primary); }

/* FAQ */
.ice-faq__item { border-bottom: 1px solid var(--ice-line); padding: var(--ice-s-4) 0; }
.ice-faq__q { display: flex; justify-content: space-between; align-items: center; gap: var(--ice-s-3); cursor: pointer; font: 600 var(--ice-fs-md)/1.3 var(--ice-font-sans); color: var(--ice-ink); list-style: none; }
.ice-faq__q::-webkit-details-marker { display: none; }
.ice-faq__q::after { content: "+"; font-size: 1.4rem; color: var(--ice-primary); }
details[open] .ice-faq__q::after { content: "−"; }
.ice-faq__a { color: var(--ice-ink-2); padding-top: var(--ice-s-3); }

/* Related */
.ice-related { padding: var(--ice-s-6) 0; }
.ice-related h2 { margin: 0 0 var(--ice-s-5); font-size: var(--ice-fs-2xl); }

/* Page header */
.ice-page-head { padding: var(--ice-s-5) 0 var(--ice-s-3); }
.ice-page-head h1 { margin: 0; font-size: var(--ice-fs-3xl); color: var(--ice-ink); }
@media (max-width: 768px) { .ice-page-head h1 { font-size: var(--ice-fs-2xl); } }

/* Mobile nav */
.iceit-header__burger {
  display: none; background: none; border: 0; cursor: pointer;
  width: 40px; height: 40px; padding: 8px;
}
.iceit-header__burger span {
  display: block; width: 100%; height: 2px; background: var(--ice-ink); margin: 4px 0;
  transition: .2s var(--ice-ease);
}
@media (max-width: 900px) {
  .iceit-header__burger { display: inline-block; }
  .iceit-brand { display: none; }
  .iceit-primary-menu {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    background: #fff; border-top: 1px solid var(--ice-line);
    padding: var(--ice-s-3); flex-direction: column; gap: var(--ice-s-2);
    box-shadow: var(--ice-sh-2);
  }
  body.iceit-nav-open .iceit-primary-menu { display: flex; }
  .iceit-header { position: relative; }
}

/* ==================== Footer ==================== */
.ice-footer {
  background: #0e1a33; color: #c9d3e6;
  padding: var(--ice-s-6) 0 var(--ice-s-4);
  margin-top: clamp(48px, 6vw, 96px);
  font-size: var(--ice-fs-sm);
}
/* На главной CTA уже даёт визуальный разделитель — убираем верхний отступ футера. */
body.home .ice-footer { margin-top: 0; }
.ice-footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: var(--ice-s-6);
  padding-bottom: var(--ice-s-5);
}
@media (max-width: 992px) { .ice-footer__grid { grid-template-columns: 1fr 1fr; gap: var(--ice-s-4); } }
@media (max-width: 560px) { .ice-footer__grid { grid-template-columns: 1fr; } }

.ice-footer__brand-link {
  display: inline-flex; align-items: center; gap: var(--ice-s-2);
  text-decoration: none; margin-bottom: var(--ice-s-3);
}
.ice-footer__brand-link:hover { color: inherit; }
.ice-footer__brand-img {
  display: block;
  width: auto;
  height: 48px;
  max-width: 160px;
  object-fit: contain;
  /* logo_footer.png ships as the dark-on-white brand — invert for the dark footer bg */
  filter: brightness(0) invert(1);
}
/* Legacy SVG fallback (kept for other contexts). */
.ice-footer__brand-mark { display: inline-flex; }
.ice-footer__brand-mark svg { width: 40px; height: auto; display: block; }
.ice-footer__brand .ice-footer__logo {
  font: 700 1.05rem/1 var(--ice-font-sans); color: #fff; letter-spacing: 0.02em;
}
.ice-footer__desc { margin: 0 0 var(--ice-s-4); color: #9aa7c0; line-height: 1.55; max-width: 280px; }
.ice-footer__legal-info { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; color: #9aa7c0; font-size: var(--ice-fs-sm); }

.ice-footer__col h4 {
  margin: 0 0 var(--ice-s-3); font: 700 0.9375rem/1 var(--ice-font-sans); color: #fff;
}
.ice-footer__col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.ice-footer__col a { color: #c9d3e6; text-decoration: none; }
.ice-footer__col a:hover { color: #fff; }

.ice-footer__contacts li { display: flex; align-items: flex-start; gap: 10px; color: #c9d3e6; line-height: 1.5; }
.ice-footer__ico::before {
  content: ""; flex: 0 0 16px; width: 16px; height: 16px; margin-top: 2px;
  background: no-repeat center / contain;
}
.ice-footer__ico--phone::before { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%239aa7c0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M22 16.92v3a2 2 0 0 1-2.18 2 19.8 19.8 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.8 19.8 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z'/></svg>"); }
.ice-footer__ico--mail::before { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%239aa7c0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='2' y='4' width='20' height='16' rx='2'/><path d='M22 6l-10 7L2 6'/></svg>"); }
.ice-footer__ico--pin::before { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%239aa7c0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/><circle cx='12' cy='10' r='3'/></svg>"); }
.ice-footer__ico--clock::before { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%239aa7c0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><path d='M12 6v6l4 2'/></svg>"); }

.ice-footer__bottom {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: var(--ice-s-4); border-top: 1px solid rgba(255,255,255,.08);
  color: #8b97b2; font-size: 0.8125rem;
  flex-wrap: wrap; gap: var(--ice-s-3);
}
.ice-footer__legal { list-style: none; display: flex; gap: var(--ice-s-4); padding: 0; margin: 0; }
.ice-footer__legal a { color: #8b97b2; text-decoration: none; }
.ice-footer__legal a:hover { color: #fff; }