/* Brandlab – webáruház-archívum kártya + kategória-csík.
   Betölti: mu-plugins/40-webaruhaz-kartya.php. Kikapcsolás: a mu-plugin törlése.
   Minden szabály a .products-loop kontextusra szűkül, hogy az Elementor
   termékrácsokat (.etheme-product-grid-item) ne érintse. */

/* --- Kategória-csík ------------------------------------------------------ */
.bl-kategoriacsik {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 0 0 12px;
  margin: 0 0 18px;
  border-bottom: 1px solid #ececE6;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
.bl-kategoriacsik::-webkit-scrollbar { height: 4px; }
.bl-kategoriacsik::-webkit-scrollbar-thumb { background: #d8d8d2; border-radius: 4px; }
.bl-kategoriacsik .bl-kat {
  flex: 0 0 auto;
  font-size: 13px;
  line-height: 1.2;
  padding: 8px 14px;
  border: 1px solid #d8d8d2;
  border-radius: 999px;
  color: #3d3d3a;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color .15s, color .15s;
}
.bl-kategoriacsik .bl-kat:hover { border-color: #2E7D46; color: #2E7D46; }
.bl-kategoriacsik .bl-kat--aktiv,
.bl-kategoriacsik .bl-kat--aktiv:hover {
  background: #2E7D46;
  border-color: #2E7D46;
  color: #fff;
}
.bl-kategoriacsik .bl-kat__db { opacity: .6; font-size: 12px; }
@media (max-width: 480px) {
  .bl-kategoriacsik .bl-kat { font-size: 12px; padding: 7px 12px; }
  .bl-kategoriacsik .bl-kat__db { display: none; }
}

/* --- Eszköztár (találatszám + rendezés) ---------------------------------- */
.products-loop-wrap .filter-wrap,
.main-products-loop .filter-wrap { margin-bottom: 14px; }
.main-products-loop .woocommerce-result-count {
  font-size: 13px;
  color: #6b6b66;
  margin: 0;
}

/* --- Termékkártya -------------------------------------------------------- */
.products-loop .content-product {
  --product-title-lines: 2;
  --product-title-line-height: 1.35em;
  border: 1px solid #e5e5df;
  border-radius: 12px;
  padding: 10px 12px 16px;
  transition: border-color .15s;
}
.products-loop .content-product:hover { border-color: #cfd6cd; }
.products-loop .content-product .product-image-wrapper { border-radius: 8px; overflow: hidden; }

/* A név a hangsúlyos elem; fix magasság, hogy az árak és a gombok egy vonalban álljanak. */
.products-loop .content-product .product-title {
  height: calc(var(--product-title-lines) * var(--product-title-line-height));
  overflow: hidden;
  margin-bottom: 4px;
}
.products-loop .content-product .product-title a {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.35;
  color: #1f1f1d;
}
.products-loop .content-product .product-title a:hover { color: #2E7D46; }

/* Az ár olvasható, de visszafogott – a korábbi halvány #888 helyett. */
.products-loop .content-product .product-details .price,
.products-loop .content-product .product-details .price .amount,
.products-loop .content-product .product-details .price bdi {
  font-size: 16px;
  font-weight: 500;
  color: #3d3d3a;
}
.products-loop .content-product .product-details .price { margin-bottom: 12px; }

/* Gomb: nagyobb betű, mondatkezdő, márkazöld. */
.products-loop .content-product .product-details .button,
.products-loop .content-product .product-details a.button {
  font-size: 15px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  background: #2E7D46;
  border-color: #2E7D46;
  color: #fff;
  border-radius: 8px;
  padding: 11px 22px;
}
.products-loop .content-product .product-details .button:hover,
.products-loop .content-product .product-details a.button:hover {
  background: #256339;
  border-color: #256339;
  color: #fff;
}

/* --- Címkék (a téma sajátjai) -------------------------------------------- */
.products-loop .content-product .onsale {
  font-size: 12px;
  text-transform: none;
  letter-spacing: 0;
  padding: 4px 10px;
  border-radius: 6px;
}

/* --- Eszköztár finomítás ------------------------------------------------- */
.main-products-loop .woocommerce-ordering select,
.main-products-loop .woocommerce-ordering .orderby { min-width: 250px; }
@media (max-width: 767px) {
  .main-products-loop .filter-wrap .filter-content { gap: 10px; }
  .main-products-loop .woocommerce-result-count { font-size: 12px; }
  .main-products-loop .woocommerce-ordering select,
  .main-products-loop .woocommerce-ordering .orderby { min-width: 0; width: 100%; }
}

/* --- Címméret: a téma mobilon felnagyítja, itt egységesítjük -------------- */
.products-loop .content-product .product-title,
.products-loop .content-product h2.product-title {
  font-size: 16px;
  line-height: 1.35;
}
.products-loop .content-product .product-title a { font-size: inherit; line-height: inherit; }
@media (max-width: 767px) {
  .products-loop .content-product .product-title,
  .products-loop .content-product h2.product-title { font-size: 15px; }
  .products-loop .content-product .product-details .price,
  .products-loop .content-product .product-details .price .amount,
  .products-loop .content-product .product-details .price bdi { font-size: 15px; }
}

/* --- Kategória-csík: asztali nézetben törjön több sorba, ne vágódjon el --- */
@media (min-width: 992px) {
  .bl-kategoriacsik { flex-wrap: wrap; overflow-x: visible; }
}

/* Mobilon a keskeny hasábban három sor kell, hogy a hosszú nevek kiférjenek. */
@media (max-width: 767px) {
  .products-loop .content-product { --product-title-lines: 3; }
}

/* A levágott név kapjon három pontot, hogy szándékos rövidítésnek látsszon,
   ne törött szövegnek. A magasság ugyanaz marad, tehát a rács igazítása áll. */
.products-loop .content-product .product-title {
  display: -webkit-box;
  -webkit-line-clamp: var(--product-title-lines, 2);
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* --- Mobil: szűrő-sáv nyitógombja ---------------------------------------
   A téma egy felirat nélküli, 50 px-re maxolt tölcsért tesz a bal szélre
   (max-width:50px, top:50%, z-index:1), ezért belelógott a termékkártyába és nem
   látszott gombnak. Feliratos fülre cseréljük a képernyő aljára; a működését
   (off-canvas nyitás) nem érintjük. */
.et-toggle-mob-sidebars-inner.et-content-left {
  max-width: none;
  z-index: 20;
  top: auto;
  bottom: 18px;
  transform: none;
  margin: 0;
  align-items: center;
  flex-wrap: nowrap;
  background: #fff;
  border: 1px solid #d8d8d2;
  border-left: 0;
  border-radius: 0 22px 22px 0;
  box-shadow: 0 2px 12px rgba(0, 0, 0, .12);
  padding-right: 14px;
  color: #2E7D46;
}
.et-toggle-mob-sidebars-inner.et-content-left .et-toggle {
  width: 42px;
  height: 44px;
  background: transparent;
}
.et-toggle-mob-sidebars-inner.et-content-left::after {
  content: "Szűrők";
  font-size: 13px;
  font-weight: 500;
  color: #3d3d3a;
  white-space: nowrap;
  line-height: 44px;
}

/* --- Mobil: eszköztár egy hasábban, ne törjön szét ----------------------- */
@media (max-width: 767px) {
  .main-products-loop .filter-wrap .filter-content {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .main-products-loop .woocommerce-result-count { margin: 0; }
  .main-products-loop .woocommerce-ordering { width: 100%; }
  .products-loop .content-product { padding: 8px 10px 14px; }
  .products-loop .content-product .product-details .button,
  .products-loop .content-product .product-details a.button {
    display: block;
    width: 100%;
    padding: 11px 8px;
  }
}

/* --- Kategória-leírás a terméklista alatt (41-seo.php) ------------------- */
.bl-kategoria-leiras {
  max-width: 760px;
  margin: 36px 0 8px;
  padding-top: 24px;
  border-top: 1px solid #ececE6;
  color: #4a4a45;
  font-size: 15px;
  line-height: 1.7;
}
.bl-kategoria-leiras p { margin: 0 0 12px; }
.bl-kategoria-leiras strong { color: #1f1f1d; font-weight: 600; }

/* ===== Mobil: a képernyőn kívüli szakaszok elrendezését a böngésző halassza (2026-09-17) =====
   Mérés: a mobil fő szálon a „Style & Layout” 7,2 mp – a főoldal 2 741 elemből áll. A content-visibility
   a láthatáron kívüli Elementor-szakaszok elrendezését addig kihagyja, amíg a látogató oda nem görget.
   Az első két szakasz kimarad (az a látható rész), így a megjelenés nem változik. */
@media (max-width: 1024px) {
  body.home .elementor-section:nth-of-type(n+3),
  body.home .e-con:nth-of-type(n+3),
  body.blog .elementor-section:nth-of-type(n+3),
  body.archive .elementor-section:nth-of-type(n+3) {
    content-visibility: auto;
    contain-intrinsic-size: auto 520px;
  }
}