/* ============================================================
   03-home.css
   Блоки главной страницы: hero, AI-поиск, промо, чипы, USP
   + большая кнопка "Смотреть весь каталог"
   Грузится ТОЛЬКО на главной
   ============================================================ */

/* === ПРОФИЛЬНЫЕ КЛАССЫ ДЛЯ БЛОКОВ HOME === */

/* HERO секция */
.hg-hero{
  background:#fff;
  border-radius:var(--hg-radius-lg);
  padding:50px 56px;
  margin:18px auto 14px;
  box-shadow:var(--hg-shadow-sm);
  position:relative;
  overflow:hidden;
}
.hg-hero-pill{
  display:inline-block;
  background:var(--hg-lime);
  color:var(--hg-ink);
  padding:8px 16px;
  border-radius:999px;
  font-size:12px;
  font-weight:700;
  letter-spacing:.04em;
  margin-bottom:24px;
}
.hg-hero h1{
  font-family:'Unbounded', sans-serif;
  font-size:clamp(28px, 3.5vw, 46px);
  font-weight:800;
  line-height:1;
  letter-spacing:-.02em;
  margin:0 0 24px 0;
}
.hg-hero-sub{
  color:#555;
  max-width:420px;
  line-height:1.5;
  font-size:15px;
  margin-bottom:24px;
}
.hg-hero-cta{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}

/* Кнопки CTA */
.hg-btn-primary, .hg-btn-secondary{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:16px 26px;
  border-radius:999px;
  font-family:'Manrope', sans-serif;
  font-weight:700;
  font-size:13px;
  letter-spacing:.04em;
  text-transform:uppercase;
  text-decoration:none;
  transition:transform .2s, background .2s, box-shadow .2s;
  border:none;
  cursor:pointer;
}
.hg-btn-primary{ background:var(--hg-lime); color:var(--hg-ink) }
.hg-btn-primary:hover{ background:var(--hg-lime-dark); transform:translateY(-2px); box-shadow:0 10px 24px rgba(0,0,0,.12) }
.hg-btn-secondary{ background:var(--hg-pink); color:#fff }
.hg-btn-secondary:hover{ background:var(--hg-pink-dark); transform:translateY(-2px); box-shadow:0 10px 24px rgba(0,0,0,.12) }

/* AI search bar */
.hg-ai{
  background:var(--hg-ink);
  color:#fff;
  border-radius:var(--hg-radius-lg);
  padding:22px 26px;
  margin-bottom:14px;
  display:grid;
  grid-template-columns:auto 1fr;
  gap:18px;
  align-items:center;
}
.hg-ai-head{ display:flex; align-items:center; gap:14px }
.hg-ai-icon{
  width:54px; height:54px;
  border-radius:16px;
  background:#222;
  display:flex; align-items:center; justify-content:center;
  box-shadow:inset 0 0 0 1.5px var(--hg-lime), 0 0 30px rgba(212,255,58,.25);
  flex-shrink:0;
}
.hg-ai-label{
  font-size:13px;
  line-height:1.4;
  color:#cfcfcf;
  max-width:240px;
}
.hg-ai-label b{
  color:#fff;
  display:block;
  font-size:14px;
  margin-bottom:2px;
  font-weight:700;
}
.hg-ai-input{
  display:flex;
  align-items:center;
  gap:12px;
  background:#2a2a2a;
  border-radius:999px;
  padding:6px 6px 6px 22px;
  min-width:0;
}
.hg-ai-input input{
  flex:1;
  min-width:0;
  background:none;
  border:none;
  color:#fff;
  font-size:14px;
  padding:12px 0;
  outline:none;
  font-family:'Manrope', sans-serif;
}
.hg-ai-input input::placeholder{ color:#7f7f7f }
.hg-ai-input button{
  width:44px; height:44px;
  border-radius:50%;
  background:#fff;
  color:var(--hg-ink);
  border:none;
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}

/* Промо-плитки */
.hg-promos{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:14px;
  margin-bottom:14px;
}
.hg-promo{
  background:#fff;
  border-radius:var(--hg-radius-md);
  padding:16px 18px;
  display:flex;
  align-items:center;
  gap:14px;
  text-decoration:none;
  color:var(--hg-ink);
  box-shadow:var(--hg-shadow-sm);
  transition:transform .2s, box-shadow .2s;
}
.hg-promo:hover{ transform:translateY(-3px); box-shadow:var(--hg-shadow-md) }
.hg-promo-icon{
  width:46px; height:46px;
  border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  font-size:22px;
  flex-shrink:0;
}
.hg-promo-text{ flex:1; min-width:0 }
.hg-promo-text b{
  display:block;
  font-family:'Unbounded', sans-serif;
  font-size:11px;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.hg-promo-text span{
  display:block;
  font-size:12px;
  color:var(--hg-muted);
  margin-top:3px;
}

/* Чипы категорий */
.hg-chips{
  display:grid;
  grid-template-columns:repeat(6, 1fr);
  gap:14px;
  margin-bottom:22px;
}
.hg-chip{
  background:var(--hg-ink);
  color:#fff;
  border-radius:var(--hg-radius-md);
  padding:18px 22px;
  display:flex;
  align-items:center;
  gap:14px;
  font-family:'Unbounded', sans-serif;
  font-size:13px;
  letter-spacing:.04em;
  font-weight:600;
  text-decoration:none;
  transition:background .2s, transform .2s;
}
.hg-chip:hover{ background:#1A1A1A; transform:translateY(-3px); color:#fff }
.hg-chip-icon{
  width:36px; height:36px;
  border-radius:10px;
  background:#262626;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}

/* USP блоки */
.hg-usp-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:14px;
  margin:30px 0 36px;
}
.hg-usp{
  background:#fff;
  border-radius:var(--hg-radius-md);
  padding:18px 22px;
  display:flex;
  align-items:center;
  gap:14px;
  box-shadow:var(--hg-shadow-sm);
}
.hg-usp-icon{
  width:46px; height:46px;
  border-radius:14px;
  background:var(--hg-lime);
  display:flex; align-items:center; justify-content:center;
  color:var(--hg-ink);
  flex-shrink:0;
}
.hg-usp b{
  font-family:'Unbounded', sans-serif;
  font-size:12px;
  letter-spacing:.04em;
  text-transform:uppercase;
  display:block;
  color:var(--hg-ink);
}
.hg-usp span{
  display:block;
  font-size:12px;
  color:var(--hg-muted);
  margin-top:3px;
  line-height:1.4;
}

/* === АДАПТИВ для блоков home === */
@media (max-width:1100px){
  .hg-promos{ grid-template-columns:repeat(2, 1fr) }
  .hg-chips{ grid-template-columns:repeat(3, 1fr) }
  .hg-usp-grid{ grid-template-columns:repeat(2, 1fr) }
  .hg-hero{ padding:36px 30px }
}
@media (max-width:768px){
  .hg-hero{ padding:24px 22px; border-radius:22px }
  .hg-hero h1{ font-size:30px }
  .hg-hero-cta{ flex-direction:column }
  .hg-btn-primary, .hg-btn-secondary{ width:100%; justify-content:center }
  
  .hg-ai{
    grid-template-columns:1fr;
    gap:14px;
    padding:18px;
    border-radius:22px;
  }
  
  .hg-promos{ grid-template-columns:repeat(2, 1fr); gap:8px }
  .hg-promo{ padding:14px; flex-direction:column; align-items:flex-start; gap:10px }
  .hg-promo-icon{ width:38px; height:38px; font-size:18px; border-radius:12px }
  
  .hg-chips{ grid-template-columns:repeat(2, 1fr); gap:10px }
  .hg-chip{ padding:14px 16px; font-size:11px }
  .hg-chip-icon{ width:30px; height:30px }
  
  .hg-usp-grid{ grid-template-columns:repeat(2, 1fr); gap:8px }
  .hg-usp{ padding:14px; flex-direction:column; align-items:flex-start; gap:10px; text-align:left }
}


/* === HERO: чтобы не вылезал за края (из фикса ширины) === */
.hg-hero,
.hg-ai,
.hg-promos,
.hg-chips,
.hg-usp-grid{
  max-width:100%;
  margin-left:0;
  margin-right:0;
  box-sizing:border-box;
}

/* === ЧИПЫ: не вылазят, выравниваются (из фикса ширины) === */
.hg-chips{
  display:grid;
  grid-template-columns:repeat(6, minmax(0, 1fr));
  gap:12px;
  width:100%;
  max-width:100%;
  margin:0 0 22px 0;
}
.hg-chip{
  min-width:0;
  overflow:hidden;
  padding:16px 18px;
  font-size:12px;
}
.hg-chip span:last-child{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

@media (max-width:1200px){
  .hg-chips{ grid-template-columns:repeat(3, minmax(0, 1fr)) }
}
@media (max-width:768px){
  .hg-chips{ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:8px }
  .hg-chip{ font-size:11px; padding:12px 14px }
  .hg-chip-icon{ width:28px; height:28px }
}

/* === ПРОМО И USP: тоже без переполнения (из фикса ширины) === */
.hg-promos,
.hg-usp-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:14px;
  width:100%;
  max-width:100%;
}
.hg-promo, .hg-usp{
  min-width:0;
  overflow:hidden;
}
.hg-promo-text, .hg-usp > div{
  min-width:0;
  overflow:hidden;
}
.hg-promo-text b,
.hg-promo-text span,
.hg-usp b,
.hg-usp span{
  overflow:hidden;
  text-overflow:ellipsis;
}

@media (max-width:1200px){
  .hg-promos, .hg-usp-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)) }
}

/* === Расстояния между секциями главной === */
.entry-content > .wp-block-shortcode{
  margin-bottom:14px;
}
.entry-content > .wp-block-shortcode:last-child{
  margin-bottom:30px;
}

/* ============================================================
   ФИКС #4: ИКОНКИ ВНУТРИ КВАДРАТИКОВ — ПО ЦЕНТРУ
   ============================================================ */
.hg-usp-icon,
.hg-promo-icon,
.hg-chip-icon,
.hg-ai-icon{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  line-height:0 !important;
}

.hg-usp-icon svg,
.hg-promo-icon svg,
.hg-chip-icon svg,
.hg-ai-icon svg{
  display:block !important;
  width:22px !important;
  height:22px !important;
  vertical-align:middle !important;
  margin:0 !important;
}

.hg-ai-icon svg{
  width:26px !important;
  height:26px !important;
}
.hg-usp-icon svg{
  width:22px !important;
  height:22px !important;
}
.hg-chip-icon svg{
  width:20px !important;
  height:20px !important;
}

/* ============================================================
   ФИКС #5+#6: Лупа в кружочке AI + кнопка "Смотреть весь каталог"
   ============================================================ */

.hg-ai .hg-ai-input button svg,
.hg-ai-input button svg,
.hg-ai-input > button > svg,
.hg-ai-input button svg[width]{
  width:22px !important;
  height:22px !important;
  display:block !important;
  stroke-width:2.5 !important;
}

.hg-ai-input button{
  width:50px !important;
  height:50px !important;
  flex-shrink:0;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}

/* Большая кнопка "Смотреть весь каталог" */
.hg-catalog-cta{
  display:flex;
  justify-content:center;
  margin:24px 0 60px 0;
  padding-bottom:20px;
}
.hg-catalog-cta a{
  display:inline-flex;
  align-items:center;
  gap:12px;
  padding:22px 48px;
  background:var(--hg-lime);
  color:var(--hg-ink);
  border-radius:999px;
  font-family:'Unbounded', sans-serif;
  font-weight:700;
  font-size:15px;
  letter-spacing:.06em;
  text-transform:uppercase;
  text-decoration:none;
  transition:transform .2s, background .2s, box-shadow .2s;
}
.hg-catalog-cta a:hover{
  background:var(--hg-lime-dark);
  transform:translateY(-2px);
  box-shadow:0 12px 28px rgba(0,0,0,.14);
  color:var(--hg-ink);
}
.hg-catalog-cta a svg{
  width:16px;
  height:16px;
  flex-shrink:0;
}

@media (max-width:768px){
  .hg-catalog-cta{
    margin-bottom:40px !important;
    padding:0 14px 10px;
  }
  .hg-catalog-cta a{
    padding:18px 32px;
    font-size:13px;
    width:100%;
    justify-content:center;
  }
}

/* ============================================================
   HERO с фоновым изображением (из основной части файла,
   но в оригинале не было — добавляю если шорткод higgs_hero
   принимает параметр bg)
   ============================================================ */
.hg-hero.hg-hero--has-bg{
  background-size:cover;
  background-position:center right;
  background-repeat:no-repeat;
  position:relative;
  min-height:480px;
  display:flex;
  align-items:center;
  padding:60px 56px;
  color:#fff;
}
.hg-hero.hg-hero--has-bg .hg-hero-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(
    to right,
    rgba(11,11,11,0.85) 0%,
    rgba(11,11,11,0.65) 35%,
    rgba(11,11,11,0.25) 60%,
    rgba(11,11,11,0) 90%
  );
  border-radius:inherit;
  pointer-events:none;
  z-index:1;
}
.hg-hero.hg-hero--has-bg .hg-hero-content{
  position:relative;
  z-index:2;
  max-width:560px;
}
.hg-hero.hg-hero--has-bg h1{ color:#fff }
.hg-hero.hg-hero--has-bg .hg-hero-sub{ color:rgba(255,255,255,0.85) }
.hg-hero.hg-hero--has-bg .hg-hero-pill{ background:var(--hg-lime); color:var(--hg-ink) }

@media (max-width:1100px){
  .hg-hero.hg-hero--has-bg{ min-height:420px; padding:48px 36px }
}
@media (max-width:768px){
  .hg-hero.hg-hero--has-bg{
    min-height:380px;
    padding:32px 22px;
    background-position:center;
  }
  .hg-hero.hg-hero--has-bg .hg-hero-overlay{
    background:linear-gradient(
      to bottom,
      rgba(11,11,11,0.75) 0%,
      rgba(11,11,11,0.6) 60%,
      rgba(11,11,11,0.7) 100%
    );
  }
}