/* Carlsbad Hat — dlaždice produktu: řádek značky nad názvem a počet dalších barev pod ním.
   Doplňuje šablonu Shoptet 11 (Classic): .products-block .p .p-in-in > a.name (16 px, výška 45 px,
   margin-bottom 10 px). Šablona drží ceny v řadě jen pevnými výškami (.p je flex column bez
   flex-grow na .p-in), proto oba naše řádky mají PEVNOU výšku a rezervují se hned, i když jsou prázdné.
   Barvy převzaty z hp3.css (--s #5f5a52 = vedlejší text, --z #CD9934 = zlatá). */

.products-block .p .p-in-in .ch-znacka {
  display: block;
  min-height: 15px;
  margin: 0 0 4px;
  font-size: 11px;
  line-height: 15px;
  font-weight: 500;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: #5f5a52;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* prázdný řádek drží zarovnání názvů v řadě dlaždic bez rozpoznané značky */
.products-block .p .p-in-in .ch-znacka--prazdna { visibility: hidden; }

/* řádek barev: vždy 16 px vysoký (rezervace), text až po příchodu mapy;
   margin -6/+6 využije mezeru pod názvem (10 px) na 4 px odstup, čistý přírůstek výšky = 16 px
   u KAŽDÉ dlaždice, takže ceny v řadě zůstávají zarovnané a po načtení mapy nic neposkočí */
.products-block .p .p-in-in .ch-barvy {
  display: block;
  height: 16px;
  min-height: 16px;
  margin: -6px 0 6px;
  font-size: 12px;
  line-height: 16px;
  color: #5f5a52;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.products-block .p .p-in-in .ch-barvy--prazdna { visibility: hidden; }
.products-block .p .p-in-in .ch-barvy:not(.ch-barvy--prazdna)::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 6px;
  vertical-align: -1px;
  border-radius: 50%;
  background: conic-gradient(#1f1f1f 0 25%, #8b6a3e 0 50%, #cfcbc2 0 75%, #CD9934 0);
}
.products-block .p:hover .p-in-in .ch-barvy { color: #1f1f1f; }

/* související produkty na kartě: šablona tam dává .name margin-bottom 19 px místo 10 px,
   držíme stejný 4px odstup (na klonu neověřeno — blok tam zatím není) */
.products-related .p .p-in-in .ch-barvy,
.tab-content .p .p-in-in .ch-barvy { margin: -15px 0 15px; }

/* mobil (2 sloupce): menší písmo, ať se řádky nelámou; výška zůstává */
@media (max-width: 767px) {
  .products-block .p .p-in-in .ch-znacka { font-size: 10px; letter-spacing: .06em; }
  .products-block .p .p-in-in .ch-barvy { font-size: 11px; }
}

/* přechod jen tam, kde uživatel nemá vypnuté animace */
@media (prefers-reduced-motion: no-preference) {
  .products-block .p .p-in-in .ch-barvy { transition: color .12s; }
}