/* AEZ-SHOP.RU — главная страница.
   Префикс "azhome-" проверен на отсутствие коллизий с CSS темы. */

/* --- Заголовок страницы. Раньше был свёрстан инлайн-стилями
       (<h1 style="..."><b><span style="font-size:28px">), теперь
       чистый тег. Значения взяты по замерам, вид не меняется. --- */
.azhome-title{
  display:block;
  font-size:28px;
  font-weight:700;
  line-height:1.2;
  text-align:center;
  color:#252525;
  margin:0 0 30px;
}

@media (max-width:767px){
  .azhome-title{ font-size:22px; margin-bottom:20px; }
}

/* --- Названия товаров и новостей в модулях главной.
       Были h4 (после h2 — скачок в иерархии), стали h3.
       Тема стилизовала их через тег h4, поэтому фиксируем значения
       явно по замерам: вид не меняется. --- */
/* Названия товаров: тема обрезает до 3 строк */
.azhome-product-name{
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
  font-size:15px;
  font-weight:700;
  line-height:16px;
  margin:8px 0 10px;
  color:#000;
}

/* Заголовки новостей: тема задаёт фиксированную высоту 20px
   с обрезкой длинного текста — повторяем один в один. */
.azhome-article-name{
  display:flow-root;
  height:20px;
  overflow:hidden;
  text-overflow:ellipsis;
  font-size:15px;
  font-weight:700;
  line-height:16px;
  margin:8px 0 10px;
  color:#000;
}

.azhome-product-name a,
.azhome-article-name a{ color:inherit; text-decoration:none; }
.azhome-product-name a:hover,
.azhome-article-name a:hover{ color:#252525; }

/* ======================================================================
   SEO-блок и FAQ внизу главной
   ====================================================================== */
.azhome-seo{
  --yellow:#fed501; --yellow-deep:#e0bd00;
  --dark:#252525; --light:#f6f6f6; --white:#fff; --line:#e2e2e2;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  display:block;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:10px;
  padding:28px 30px;
  margin-top:24px;
  color:var(--dark);
  font-size:14.5px;
  line-height:1.6;
}
@media (max-width:767px){ .azhome-seo{ padding:20px 18px; } }

/* заголовки — фирменная жёлтая чёрточка */
.azhome-seo h2{
  font-size:20px; font-weight:700; color:#000; line-height:1.3;
  display:flex; align-items:center; gap:10px; margin:0 0 16px;
}
.azhome-seo h2::before{
  content:""; width:6px; height:23px; background:var(--yellow);
  border-radius:2px; display:inline-block; flex:none;
}
.azhome-seo h3{
  font-size:16.5px; font-weight:700; color:#000; line-height:1.3;
  display:flex; align-items:center; gap:9px; margin:24px 0 12px;
}
.azhome-seo h3::before{
  content:""; width:4px; height:18px; background:var(--yellow-deep);
  border-radius:2px; display:inline-block; flex:none;
}
.azhome-seo p{ margin:0 0 12px; }
.azhome-seo ul{ padding-left:22px; margin:0 0 14px; }
.azhome-seo li{ margin-bottom:7px; }
.azhome-seo li::marker{ color:var(--yellow-deep); }
.azhome-seo strong{ color:#000; }
.azhome-seo a{ color:#0b63c5; }

/* --- сворачивание текста --- */
.azhome-seo-body{ position:relative; }
.azhome-seo-body.is-collapsed{
  max-height:260px;
  overflow:hidden;
}
.azhome-seo-body.is-collapsed::after{
  content:"";
  position:absolute; left:0; right:0; bottom:0; height:110px;
  background:linear-gradient(to bottom, rgba(255,255,255,0), #fff 85%);
  pointer-events:none;
}
.azhome-seo-toggle{
  display:none;
  margin:4px auto 0;
  padding:10px 22px;
  background:var(--yellow);
  color:#000;
  border:none; border-radius:6px;
  font-size:14px; font-weight:700;
  cursor:pointer;
  transition:background .2s ease-out;
}
.azhome-seo-toggle.is-visible{ display:block; }
.azhome-seo-toggle:hover{ background:var(--yellow-deep); }

/* --- FAQ --- */
.azhome-faq{ margin-top:32px; padding-top:26px; border-top:1px solid var(--line); }
.azhome-faq-item{
  border:1px solid var(--line);
  border-left:4px solid var(--yellow-deep);
  border-radius:0 6px 6px 0;
  margin-bottom:10px;
  background:var(--light);
  overflow:hidden;
  transition:border-left-color .2s ease-out;
}
.azhome-faq-item.is-open{ border-left-color:var(--yellow); background:var(--white); }
.azhome-faq-q{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  width:100%; text-align:left;
  padding:15px 18px;
  background:transparent; border:none;
  font-size:15px; font-weight:700; color:#000;
  cursor:pointer;
  font-family:inherit;
}
.azhome-faq-q::after{
  content:"+";
  font-family:var(--mono);
  font-size:20px; font-weight:400; line-height:1;
  color:var(--yellow-deep);
  flex:none;
  transition:transform .2s ease-out;
}
.azhome-faq-item.is-open .azhome-faq-q::after{ content:"−"; }
.azhome-faq-q:hover{ color:#000; }
.azhome-faq-a{
  max-height:0; overflow:hidden;
  transition:max-height .25s ease-out;
}
.azhome-faq-item.is-open .azhome-faq-a{ max-height:600px; }
.azhome-faq-a > div{ padding:0 18px 16px; }
.azhome-faq-a p{ margin:0; font-size:14.5px; }

/* ======================================================================
   Блок «Категории товаров» на главной
   Было: 6 колонок на float, названия обрезались до 2 строк,
   последний ряд с одной плиткой прижимался влево.
   Стало: 5 колонок на flex, последний ряд по центру,
   название показывается целиком.
   ====================================================================== */
@media (min-width:768px){
  .catef > .row{
    display:flex !important;
    flex-wrap:wrap;
    justify-content:center;
    gap:16px 0;
    margin-left:0; margin-right:0;
  }
  .catef > .row > [class*="col-"]{
    float:none !important;
    display:flex;
  }
}
/* 5 в ряд на широких, 4 на средних, 3 на планшетах */
@media (min-width:1200px){
  .catef > .row > [class*="col-"]{ width:20% !important; max-width:20%; flex:0 0 20%; }
}
@media (min-width:992px) and (max-width:1199px){
  .catef > .row > [class*="col-"]{ width:25% !important; max-width:25%; flex:0 0 25%; }
}
@media (min-width:768px) and (max-width:991px){
  .catef > .row > [class*="col-"]{ width:33.3333% !important; max-width:33.3333%; flex:0 0 33.3333%; }
}
/* мобильные: ровно 2 в ряд, без рваных строк */
@media (max-width:767px){
  .catef > .row{
    display:flex !important; flex-wrap:wrap; justify-content:center;
    gap:12px 0; margin-left:0; margin-right:0;
  }
  .catef > .row > [class*="col-"]{
    float:none !important; display:flex;
    width:50% !important; max-width:50%; flex:0 0 50%;
  }
  .catef > .row > [class*="col-"] > .product-layout{ width:100%; display:flex; }
  .catef > .row > [class*="col-"] .product-thumb{ width:100%; display:flex; flex-direction:column; }
}

/* Название категории — целиком, без обрезки.
   Тема резала до 2 строк: .catalog-section__caption span
   { -webkit-line-clamp:2; height:30px; overflow:hidden } */
.catef .catalog-section__caption span,
.catalog-section__caption span{
  -webkit-line-clamp:unset !important;
  display:block !important;
  height:auto !important;
  max-height:none !important;
  overflow:visible !important;
  white-space:normal !important;
}
.catef .catalog-section__caption{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:70px;          /* место под 3 строки — плитки не скачут */
  height:70px;
  padding:8px 10px 12px;
  margin-top:auto;           /* подпись прижата к низу карточки */
}
.catef .catalog-section__caption span{
  font-size:1.35rem !important;   /* было 1.2rem */
  line-height:1.35 !important;
}

/* Все плитки в ряду одной высоты: карточка тянется, картинка сверху,
   подпись прижата к низу. */
.catef > .row > [class*="col-"],
.catef > .row > [class*="col-"] > .product-layout{
  display:flex;
  align-items:stretch;
}
.catef > .row > [class*="col-"] .product-thumb{
  display:flex;
  flex-direction:column;
  width:100%;
  height:100%;
}
.catef > .row > [class*="col-"] .product-thumb > .image{
  flex:0 0 auto;
}

/* Единая высота плиток: фиксируем область под картинку
   (изображения разного размера тянули карточки по-разному),
   подпись прижата к низу и всегда занимает место под 3 строки. */
.catef > .row > [class*="col-"] .product-thumb > .image{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  height:180px;
  padding:10px;
}
.catef > .row > [class*="col-"] .product-thumb > .image a{
  display:flex; align-items:center; justify-content:center;
  width:100%; height:100%;
}
.catef > .row > [class*="col-"] .product-thumb > .image img{
  max-width:100%;
  max-height:100%;
  width:auto;
  height:auto;
  object-fit:contain;
}
@media (max-width:991px){
  .catef > .row > [class*="col-"] .product-thumb > .image{ height:150px; }
}
@media (max-width:767px){
  .catef > .row > [class*="col-"] .product-thumb > .image{ height:120px; padding:6px; }
}

/* Название категории — целиком, без обрезки.
   Тема резала до 2 строк: .catalog-section__caption span
   { -webkit-line-clamp:2; height:30px; overflow:hidden } */
.catef .catalog-section__caption span,
.catalog-section__caption span{
  -webkit-line-clamp:unset !important;
  display:block !important;
  height:auto !important;
  max-height:none !important;
  overflow:visible !important;
  white-space:normal !important;
}
.catef .catalog-section__caption{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:70px;          /* место под 3 строки — плитки не скачут */
  height:70px;
  padding:8px 10px 12px;
  margin-top:auto;           /* подпись прижата к низу карточки */
}
.catef .catalog-section__caption span{
  font-size:1.35rem !important;   /* было 1.2rem */
  line-height:1.35 !important;
}

/* Все плитки в ряду одной высоты: карточка тянется, картинка сверху,
   подпись прижата к низу. */
.catef > .row > [class*="col-"],
.catef > .row > [class*="col-"] > .product-layout{
  display:flex;
  align-items:stretch;
}
.catef > .row > [class*="col-"] .product-thumb{
  display:flex;
  flex-direction:column;
  width:100%;
  height:100%;
}
.catef > .row > [class*="col-"] .product-thumb > .image{
  flex:0 0 auto;
}

/* Единая высота всех плиток, независимо от ряда: подпись всегда
   занимает место под 3 строки, поэтому карточки не «скачут». */
@media (max-width:767px){
  .catef .catalog-section__caption{ min-height:58px; }
  .catef .catalog-section__caption span{ font-size:1.2rem !important; }
}

/* ======================================================================
   Артикул в карточках товара: «Артикул:» и номер переносились
   на разные строки — держим в одной.
   ====================================================================== */
/* В разметке между «Артикул:» и номером стоит <br> (его добавляет
   OCMOD-модификация, в самих .twig его нет) — прячем перенос. */
.rblk{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.rblk br{ display:none; }
/* тема держала блок в две строки через min-height */
.product-thumb .rblk{ min-height:0 !important; }

/* Стрелка главного слайдера на средних экранах вылезала за край
   на 5px и давала горизонтальную прокрутку. */
/* Стрелка карусели на средних экранах вылезала за край на 5px и
   давала горизонтальную прокрутку. Позицию стрелкам задаёт скрипт
   Swiper, поэтому не трогаем их, а ограничиваем переполнение
   на уровне обёртки — сами стрелки остаются на месте. */
@media (max-width:1300px){
  #common-home{ overflow-x:clip; }
}

/* ======================================================================
   Блок доверия под первым экраном
   ====================================================================== */
.azhome-trust{
  --yellow:#fed501; --yellow-deep:#e0bd00;
  --dark:#252525; --light:#f6f6f6; --white:#fff; --line:#e2e2e2;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px;
  margin:20px 0 8px;
}
.azhome-trust-item{
  display:flex;
  align-items:center;
  gap:14px;
  background:var(--white);
  border:1px solid var(--line);
  border-left:4px solid var(--yellow);
  border-radius:0 8px 8px 0;
  padding:16px 18px;
  transition:box-shadow .2s ease-out, border-left-color .2s ease-out;
}
.azhome-trust-item:hover{
  box-shadow:0 4px 16px rgba(0,0,0,.08);
  border-left-color:var(--yellow-deep);
}
.azhome-trust-icon{
  flex:0 0 auto;
  width:42px; height:42px;
  display:flex; align-items:center; justify-content:center;
  background:var(--yellow);
  border-radius:50%;
  color:#000;
}
.azhome-trust-icon svg{
  width:22px; height:22px;
  fill:none !important;              /* тема заливает svg сплошным цветом */
  stroke:currentColor !important;
  stroke-width:2;
}
.azhome-trust-icon svg *{ fill:none !important; stroke:currentColor !important; }
.azhome-trust-text{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.azhome-trust-text strong{
  font-size:15px; font-weight:700; color:#000; line-height:1.25;
}
.azhome-trust-text span{
  font-size:12.5px; color:#666; line-height:1.35;
}

@media (max-width:1199px){
  .azhome-trust{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:575px){
  .azhome-trust{ grid-template-columns:1fr; gap:10px; }
  .azhome-trust-item{ padding:14px 16px; }
}

/* ======================================================================
   Стрелки каруселей.
   Уточнение по классам: .hp-sect — это баннер первого экрана,
   а карусели товаров — .swiper-products (не наоборот).
   Баннер оставляем как есть, каруселям даём тот же аккуратный вид:
   такой же размер и появление при наведении, вместо постоянно
   висящих крупных кругов поверх карточек.
   ====================================================================== */
/* Копируем параметры баннерной стрелки один в один: круг 40px,
   иконка без масштабирования, вынос за край -20px. */
#common-home .swiper-products .swiper-button-next,
#common-home .swiper-products .swiper-button-prev{
  width:40px !important;
  height:40px !important;
  border-radius:50px !important;
  background-color:#fff !important;
  border:1px solid #ddd !important;   /* на белом фоне круг иначе сливается */
  box-shadow:0 2px 8px rgba(0,0,0,.10) !important;
  opacity:0 !important;
  transition:opacity .3s;             /* как у баннера */
}
/* Иконка темы — тонкий бледный шеврон, на белом круге теряется.
   ::before жёстко занят темой, поэтому прячем его и рисуем свою
   стрелку через ::after. */
#common-home .swiper-products .swiper-button-next::before,
#common-home .swiper-products .swiper-button-prev::before{
  opacity:0 !important;
}
#common-home .swiper-products .swiper-button-next::after,
#common-home .swiper-products .swiper-button-prev::after{
  content:"" !important;
  position:absolute;
  top:50%; left:50%;
  width:11px; height:11px;
  border-right:2.5px solid #252525;
  border-bottom:2.5px solid #252525;
  background:none;
}
#common-home .swiper-products .swiper-button-next::after{
  transform:translate(-65%,-50%) rotate(-45deg);
}
#common-home .swiper-products .swiper-button-prev::after{
  transform:translate(-35%,-50%) rotate(135deg);
}
#common-home .swiper-products .swiper-button-next,
#common-home .swiper-products .swiper-button-prev{ position:absolute; }

#common-home .swiper-products .swiper-button-prev{ left:-20px !important; }
#common-home .swiper-products .swiper-button-next{ right:-20px !important; }

/* появляются при наведении — как у баннера */
#common-home .swiper-products:hover .swiper-button-next,
#common-home .swiper-products:hover .swiper-button-prev{ opacity:.9 !important; }

/* на тач-устройствах наведения нет — показываем постоянно */
@media (hover:none){
  #common-home .swiper-products .swiper-button-next,
  #common-home .swiper-products .swiper-button-prev{ opacity:.85 !important; }
}

/* ======================================================================
   Подписи категорий: делаем крупнее, но держим не более 3 строк —
   высота блока рассчитана ровно под 3 строки при этом размере.
   ====================================================================== */
.catef .catalog-section__caption span{
  font-size:1.4rem !important;
  line-height:1.28 !important;
  display:-webkit-box !important;
  -webkit-line-clamp:3 !important;
  -webkit-box-orient:vertical;
  overflow:hidden !important;
}
.catef .catalog-section__caption{
  min-height:76px;
  height:76px;
}
/* На узких колонках самое длинное название («Выключатели, регуляторы,
   переключатели, плавные пуски, разъемы») не влезает в 3 строки —
   уменьшаем шрифт и разрешаем 4 строки. */
@media (max-width:1199px){
  .catef .catalog-section__caption span{
    font-size:1.25rem !important;
    -webkit-line-clamp:4 !important;
  }
  .catef .catalog-section__caption{ min-height:82px; height:82px; }
}
@media (max-width:767px){
  .catef .catalog-section__caption span{
    font-size:1.15rem !important;
    -webkit-line-clamp:5 !important;
  }
  .catef .catalog-section__caption{ min-height:88px; height:88px; }
}

/* Вопрос FAQ — заголовок h3 (для структуры и поисковиков),
   кнопка внутри него отвечает за раскрытие (паттерн ARIA). */
.azhome-faq-h{
  margin:0 !important;
  padding:0 !important;
  font-size:inherit;
  font-weight:inherit;
  line-height:inherit;
  display:block;
}
.azhome-faq-h::before{ content:none !important; }  /* чёрточка тут не нужна */

/* Заголовок блока доверия — в одном стиле с «Категориями товаров» */
.azhome-trust-heading{ margin-bottom:4px; }
.azhome-trust-heading h2{
  font-size:24px; font-weight:700; color:#333; margin:0;
}
@media (max-width:767px){
  .azhome-trust-heading h2{ font-size:20px; }
}

/* ======================================================================
   Блок «Не нашли нужную деталь?» — подбор по артикулу / фото
   ====================================================================== */
.azhome-help{
  --yellow:#fed501; --yellow-deep:#e0bd00;
  --dark:#252525; --light:#f6f6f6; --white:#fff; --line:#e2e2e2;
  display:grid;
  grid-template-columns:1fr 340px;
  gap:28px;
  align-items:center;
  background:var(--dark);
  color:var(--light);
  border-radius:10px;
  padding:28px 32px;
  margin:24px 0 8px;
}
.azhome-help-title{
  font-size:22px; font-weight:700; color:#fff;
  display:flex; align-items:center; gap:11px;
  margin:0 0 12px; line-height:1.25;
}
.azhome-help-title::before{
  content:""; width:6px; height:24px; background:var(--yellow);
  border-radius:2px; display:inline-block; flex:none;
}
.azhome-help-text{
  font-size:14.5px; line-height:1.6; color:#cfcfcf; margin:0 0 14px;
}
.azhome-help-list{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px 20px; }
.azhome-help-list li{
  position:relative; padding-left:20px;
  font-size:13.5px; color:#e8e8e8;
}
.azhome-help-list li::before{
  content:""; position:absolute; left:0; top:7px;
  width:7px; height:7px; border-radius:50%; background:var(--yellow);
}
.azhome-help-actions{ display:flex; flex-direction:column; gap:10px; }
.azhome-help-btn{
  display:flex; flex-direction:column; gap:2px;
  padding:13px 18px;
  border-radius:8px;
  text-decoration:none !important;
  transition:transform .15s ease-out, box-shadow .15s ease-out;
}
.azhome-help-btn:hover{ transform:translateY(-1px); box-shadow:0 6px 18px rgba(0,0,0,.25); }
.azhome-help-btn--phone{ background:var(--yellow); color:#000 !important; }
.azhome-help-btn--phone:hover{ background:var(--yellow-deep); }
.azhome-help-btn--mail{ background:transparent; border:1px solid #555; color:var(--light) !important; }
.azhome-help-btn--mail:hover{ border-color:var(--yellow); }
.azhome-help-btn-label{ font-size:12.5px; opacity:.75; }
.azhome-help-btn-value{ font-size:16px; font-weight:700; }
.azhome-help-note{ font-size:12.5px; color:#9a9a9a; text-align:center; margin-top:2px; }

@media (max-width:991px){
  .azhome-help{ grid-template-columns:1fr; gap:20px; padding:24px 22px; }
}
@media (max-width:575px){
  .azhome-help{ padding:20px 18px; }
  .azhome-help-title{ font-size:19px; }
  .azhome-help-list{ flex-direction:column; gap:7px; }
}

/* ======================================================================
   Блок «Популярные разделы» — быстрые ссылки по частотным запросам
   ====================================================================== */
.azhome-popular{
  --yellow:#fed501; --yellow-deep:#e0bd00;
  --dark:#252525; --light:#f6f6f6; --white:#fff; --line:#e2e2e2;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:6px 0 10px;
}
.azhome-popular-item{
  display:inline-flex;
  align-items:center;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:20px;
  padding:8px 16px;
  font-size:13.5px;
  color:var(--dark) !important;
  text-decoration:none !important;
  transition:border-color .15s ease-out, background .15s ease-out, transform .15s ease-out;
}
.azhome-popular-item:hover{
  border-color:var(--yellow-deep);
  background:#fffdf0;
  transform:translateY(-1px);
}
@media (max-width:575px){
  .azhome-popular-item{ font-size:12.5px; padding:7px 13px; }
}