/* mhodbornici — hláška místo ceny a košíku, štítek ve výpisu, brána „jsem odborník“.
   ⚠️ Selektory na prvky tématu ověřit proti živému DOM (eshop/CLAUDE.md §8d). */

/* ---------- Karta produktu: místo košíku hláška ----------
   Jádro bez available_for_order tlačítko jen zneaktivní (product-add-to-cart.tpl),
   pole s počtem by zůstalo. Hláška je ve stejném formuláři .product-actions. */
.product-actions:has(.mhodbornici-hlaska) .product-add-to-cart {
  display: none;
}
.mhodbornici-hlaska {
  margin: 0.75rem 0 0;
  padding: 0.85rem 1rem;
  border: 1px solid #bae6fd;
  border-radius: 10px;
  background: #f0f9ff;
  color: #082f49;
  font-size: 0.95rem;
  line-height: 1.5;
}
.mhodbornici-hlaska p {
  margin: 0;
  color: inherit;
}
.mhodbornici-hlaska__text {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
}
.mhodbornici-hlaska__text .material-icons {
  font-size: 18px;
  line-height: 1.35;
  color: #0d94e6;
}
.mhodbornici-hlaska__odkazy {
  margin-top: 0.35rem !important;
  padding-left: calc(18px + 0.5rem);
  font-weight: 600;
}
.mhodbornici-hlaska__odkazy a,
.mhodbornici-hlaska__text a {
  color: #0a6ea9;
}
.mhodbornici-hlaska__text a {
  font-weight: 600;
}

/* ---------- Výpis: odkaz na detail = „Jen pro odborníky“ ----------
   Bez košíku ukazuje custom.css odkaz na detail s popiskem „Vyberte variantu“
   (překlad View Detail) a ikonou ::before. Tady popisek přepsat, ikona zámku. */
.product-miniature:has(.mhodbornici-stitek) .product-actions .btn.btn-primary.view {
  font-size: 0;
}
/* Ikona: custom.css se načítá později a má (1,5,0) s #index a (0,6,0) bez →
   zrcadlit oba selektory a přidat třídu, jinak vyhraje jeho \e429 (1.0.0 naostro). */
#index .product-miniature:has(.mhodbornici-stitek) .product-actions:not(:has(.add-to-cart)) .btn.btn-primary.view::before,
.product-miniature:has(.mhodbornici-stitek) .product-actions:not(:has(.add-to-cart)) .btn.btn-primary.view::before {
  content: "\e897";
}
.product-miniature:has(.mhodbornici-stitek) .product-actions .btn.btn-primary.view::after {
  content: "Jen pro odborníky";
  font-size: 14px;
}

/* ---------- Brána „jsem odborník“ (náhled .playwright-mcp/brana-nahled.js) ---------- */
.mhbrana {
  --mhbrana-modra: #0d94e6;
  --mhbrana-modra-tmava: #0a6ea9;
  --mhbrana-text: #082f49;
  width: min(760px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  padding: 0;
  border: 0;
  border-radius: 16px;
  background: #fff;
  color: var(--mhbrana-text);
  font-family: Mulish, sans-serif;
  box-shadow: 0 24px 60px rgba(8, 47, 73, .25);
}
.mhbrana::backdrop {
  background: rgba(8, 47, 73, .55);
  backdrop-filter: blur(2px);
}
.mhbrana__box {
  padding: 36px 40px 32px;
  font-size: 15px;
  line-height: 1.6;
}
.mhbrana__box p { margin: 0 0 14px; }
.mhbrana__box p, .mhbrana__box li { color: var(--mhbrana-text); font-size: inherit; line-height: inherit; }
.mhbrana__box strong { font-weight: 700; }
.mhbrana__otazka { margin-top: 20px !important; font-weight: 700; }
.mhbrana__seznam {
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
}
.mhbrana__seznam li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 6px;
}
.mhbrana__seznam li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: .55em;
  width: 7px;
  height: 7px;
  border-top: 2px solid var(--mhbrana-modra);
  border-right: 2px solid var(--mhbrana-modra);
  transform: rotate(45deg);
}
.mhbrana__tlacitka {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 28px;
}
.mhbrana__btn {
  min-width: 200px;
  padding: 12px 26px;
  border-radius: 999px;
  border: 2px solid var(--mhbrana-modra);
  font: 600 15px/1.2 Mulish, sans-serif;
  cursor: pointer;
}
.mhbrana__btn--ne { background: #fff; color: var(--mhbrana-modra-tmava); }
.mhbrana__btn--ne:hover { background: #f0f9ff; }
.mhbrana__btn--ano { background: var(--mhbrana-modra); color: #fff; }
.mhbrana__btn--ano:hover { background: var(--mhbrana-modra-tmava); border-color: var(--mhbrana-modra-tmava); }
@media (max-width: 575px) {
  .mhbrana__box { padding: 24px 20px 20px; font-size: 14px; }
  .mhbrana__tlacitka { flex-direction: column-reverse; gap: 10px; }
  .mhbrana__btn { width: 100%; min-width: 0; }
}