/* blog-produkty-v1.css — bloky produktů v článcích blogu (blog-produkty-v1.js) + sjednocené dlaždice výpisu článků /blog/, /sk/blog/.
 * Vše jen pod html.bp-blog-on (zapíná inline skript v Záhlaví: testovací režim ?bp_blog=test, ostrý režim pro všechny).
 * Písmo Exo 2, konverzní #2CA2C6, po najetí #8880B4, světle fialová #B0ABCB. Kód je vlastní, nic z doplňků. */

/* ── Staré bloky doplňku „Produkty v článcích“: inline skript v Záhlaví je při načítání přejmenuje .dmproducts → .bp-dm
   (doplněk je pak nenajde). Do vykreslení našeho bloku jen drží místo (neviditelné), pak pryč. Nepřejmenované = skrýt. ── */
html.bp-blog-on body .bp-dm:not(.bp-dm-off) {
  display: block !important; visibility: hidden !important; overflow: hidden !important;
  height: 350px !important; min-height: 0 !important; margin: 20px 0 !important; padding: 0 !important;
}
@media (min-width: 768px) {
  html.bp-blog-on body .bp-dm:not(.bp-dm-off)[products="5"], html.bp-blog-on body .bp-dm:not(.bp-dm-off)[products="6"],
  html.bp-blog-on body .bp-dm:not(.bp-dm-off)[products="7"], html.bp-blog-on body .bp-dm:not(.bp-dm-off)[products="8"],
  html.bp-blog-on body .bp-dm:not(.bp-dm-off):has(> div:nth-child(5)) { height: 700px !important; }
}
html.bp-blog-on body .bp-dm.bp-dm-off, html.bp-blog-on body .bp-dm .bp-dm, html.bp-blog-on body .dmproducts { display: none !important; }

/* ── Značka bloku: místo držené do načtení dat, prázdný / neznámý blok se skryje ── */
html.bp-blog-on .bp-products { display: block; min-height: 350px; margin: 20px 0; }
html.bp-blog-on .bp-products.bp-done { min-height: 0; }
html.bp-blog-on .bp-products.bp-empty { display: none !important; }
.bp-products:empty { margin: 0; }

/* ── Blok a karty ── */
html.bp-blog-on .bp-blog { margin: 20px 0; font-family: 'Exo 2', sans-serif; clear: both; }
html.bp-blog-on .bp-products > .bp-blog { margin: 0; }
html.bp-blog-on .bp-blog .bp-products-title { font-size: 18px; font-weight: 700; line-height: 1.3; color: #222; margin: 0 0 10px; }
html.bp-blog-on .bp-blog .bp-blog-row.products-block {
  display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px;
  margin: 0 !important; padding: 0 !important; border: 0 !important; width: auto !important; float: none !important;
}
html.bp-blog-on .bp-blog .bp-blog-row.products-block > .product {
  width: auto !important; max-width: none !important; min-width: 0; flex: none !important; margin: 0 !important; padding: 0 !important;
  border: 0 !important; float: none !important; background: none !important; box-shadow: none !important;
}
html.bp-blog-on .bp-blog .product > .p {
  position: relative; height: 100%; display: flex; flex-direction: column; box-sizing: border-box;
  background: #fff; border: 1px solid #eee; border-radius: 8px; padding: 12px; margin: 0; text-align: center;
}
html.bp-blog-on .bp-blog .product > .p:hover { border-color: #b0abcb; box-shadow: 0 2px 10px rgba(0, 0, 0, .06); }
html.bp-blog-on .bp-blog .product > .p > a.image {
  position: relative; display: flex !important; align-items: center; justify-content: center; height: 170px; margin: 0 0 10px !important;
  padding: 0 !important; border: 0 !important; background: #fff; overflow: visible;
}
html.bp-blog-on .bp-blog .product > .p > a.image img {
  max-width: 100% !important; max-height: 100% !important; width: auto !important; height: auto !important; object-fit: contain; margin: 0 auto;
}
html.bp-blog-on .bp-blog a.bp-blog-name {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.7em;
  font-size: 14px; font-weight: 600; line-height: 1.35; color: #333; text-decoration: none;
}
html.bp-blog-on .bp-blog a.bp-blog-name:hover { color: #2ca2c6; }
html.bp-blog-on .bp-blog .bp-blog-av { font-size: 13px; line-height: 1.3; color: #009901; margin: 6px 0 2px; min-height: 1.3em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.bp-blog-on .bp-blog .bp-blog-price { font-size: 17px; font-weight: 700; color: #2ca2c6; margin: 2px 0 10px; white-space: nowrap; }
html.bp-blog-on .bp-blog .bp-blog-skrt { font-size: 13px; font-weight: 400; color: #999; }
/* Šablona stylije každé „.products … button“ a odkazy v kartách → vzhled s !important. */
html.bp-blog-on .bp-blog .product .bp-blog-add {
  margin-top: auto !important; display: block !important; width: 100% !important; height: auto !important; min-height: 38px; box-sizing: border-box;
  text-align: center; background: #2ca2c6 !important; color: #fff !important; border: 0 !important; border-radius: 999px !important;
  padding: 9px 10px !important; font: 600 14px/1.2 'Exo 2', sans-serif !important; cursor: pointer; text-decoration: none !important;
  text-transform: none !important; letter-spacing: 0 !important; box-shadow: none !important;
}
html.bp-blog-on .bp-blog .product .bp-blog-add:hover, html.bp-blog-on .bp-blog .product .bp-blog-add.bp-done { background: #8880b4 !important; color: #fff !important; }
html.bp-blog-on .bp-blog .product .bp-blog-add[disabled] { opacity: .65; cursor: default; }
/* Srdíčko Oblíbených (oblibene-vN.js) — styly jen pro naše karty (třída .products šablony se nepoužívá). */
html.bp-blog-on .bp-blog .product .bp-fav-heart {
  position: absolute !important; top: 0 !important; left: 0 !important; right: auto !important; bottom: auto !important; z-index: 3;
  width: 36px !important; height: 36px !important; min-width: 0 !important; padding: 0 !important; margin: 0 !important;
  display: flex !important; align-items: center; justify-content: center; border-radius: 50% !important; border: 1px solid #dcd9e8 !important;
  background: rgba(255, 255, 255, .88) !important; box-shadow: 0 1px 4px rgba(0, 0, 0, .12) !important; cursor: pointer;
  line-height: 0 !important; font-size: 0 !important; color: #8880b4 !important;
}
html.bp-blog-on .bp-blog .product .bp-fav-heart svg { width: 18px; height: 18px; }
html.bp-blog-on .bp-blog .product .bp-fav-heart:hover { background: #fff !important; transform: scale(1.06); }

/* Mobil a úzké sloupce: vodorovně posuvný pás (≈ 2,2 karty), stejná výška karet */
@media (max-width: 767px) {
  html.bp-blog-on .bp-blog .bp-blog-row.products-block {
    display: flex !important; flex-wrap: nowrap !important; overflow-x: auto; scroll-snap-type: x mandatory; gap: 10px;
    -webkit-overflow-scrolling: touch; scrollbar-width: thin; padding-bottom: 6px !important;
  }
  html.bp-blog-on .bp-blog .bp-blog-row.products-block > .product { flex: 0 0 44% !important; width: 44% !important; scroll-snap-align: start; }
  html.bp-blog-on .bp-blog .product > .p > a.image { height: 140px; }
  html.bp-blog-on .bp-products { min-height: 320px; }
  html.bp-blog-on body .bp-dm:not(.bp-dm-off) { height: 320px !important; }
}

/* ── Výpis článků /blog/, /sk/blog/ (doplněk „Zobrazení článků v dlaždicích“): obrázek v rámu 4:3, ořez na střed ── */
html.bp-blog-on body .news-wrapper .news-item .image {
  aspect-ratio: 4 / 3 !important; height: auto !important; max-height: none !important; width: 100% !important;
  overflow: hidden !important; background: #fff !important; position: relative !important;
}
html.bp-blog-on body .news-wrapper .news-item .image > a { display: block !important; width: 100% !important; height: 100% !important; }
html.bp-blog-on body .news-wrapper .news-item .image img {
  display: block !important; width: 100% !important; height: 100% !important; max-width: none !important; max-height: none !important;
  object-fit: cover !important; object-position: 50% 50% !important; aspect-ratio: auto !important;
}