/* pestře: úpravy šablony (Shoptet template-13 + core CSS Webotvůrců)
   Připojit: Shoptet → Vzhled a obsah → Editor → HTML kód → Hlavička,
   odkazem link rel=stylesheet na nahraný soubor (nebo vložit do značky style). */

/* ---- Příznaky „PESTŘE -X %“ (kód pestre-<číslo>-, např. pestre-10-, pestre-20-) ----
   Barva: akční červená #d62828, bílý text (kontrast 5 : 1, WCAG AA).
   Tvar a velikost jako ostatní příznaky šablony (Akce, Novinka), aby vedle
   sebe působily jednotně; odliší se barvou a tučným písmem. */

/* Jen pro návštěvníky z kampaně: třídu pestre-kampan na <html> nastavuje cena-s-kuponem.js
   (pestre-ano v adrese → cookie 7 dní). Bez ní jsou příznaky PESTŘE skryté, takže se nic neukáže
   ani při pozdějším spuštění skriptu (defer). Připojení: vlozit-do-shoptetu.html.
   Ostatním se příznaky PESTŘE a ceny s kódem nezobrazují. */
html:not(.pestre-kampan) .flag[class*="flag-pestre-"],
html:not(.pestre-kampan) .pestre-kupon {
  display: none !important;
}

.flag[class*="flag-pestre-"] {
  background-color: #d62828 !important;   /* přebíjí barvu z administrace */
  color: #fff !important;
  border-radius: var(--radius, 4px) !important;
  font-weight: 700 !important;
  white-space: nowrap;
}

/* Výpis produktů: všechny příznaky vlevo nahoře
   (Webotvůrci je mají vpravo: .products-block … .flags {right:10px},
   kde se překrývají s „Kód: …“ v pravém rohu karty) */
.products-block > div .p > a.image .flags {
  left: 10px;
  right: auto;
  top: 10px;
  justify-items: start;
  gap: 4px;
}
.products-block > div .p > a.image .flag[class*="flag-pestre-"] {
  padding: 3px 8px;
  font-size: 13px;
  line-height: 1.3;
  letter-spacing: .04em;
}

/* Detail produktu: styl jako ve výpisu, o kousek větší
   (v detailu příznaky Webotvůrci nestylují, platí jen základ Shoptetu 10px) */
.p-detail .p-image-wrapper .flags.flags-default {
  /* šablona má .wide .p-detail .flags {top:0; left:0} → vyšší specifičnost */
  top: 16px;
  left: 16px;
  display: grid;
  justify-items: start;
  gap: 6px;
}
.p-image-wrapper .flags-default .flag {
  float: none;
  max-width: none;
  margin: 0;
  padding: 5px 12px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: var(--bold-weight);
  line-height: 1.3;
  letter-spacing: var(--label-letter-spacing);
  text-transform: uppercase;
  border-radius: var(--radius);
}
.p-image-wrapper .flags-default .flag[class*="flag-pestre-"] {
  padding: 5px 13px;
  font-size: 14px;
  letter-spacing: .03em;
}
@media (max-width: 767px) {
  .p-detail .p-image-wrapper .flags.flags-default {
    top: 10px;
    left: 10px;
  }
  .p-image-wrapper .flags-default .flag,
  .p-image-wrapper .flags-default .flag[class*="flag-pestre-"] {
    padding: 4px 10px;
    font-size: 12px;
  }
}

/* ---- Cena s kódem pod cenou — výpis i detail
   (vykresluje ho skript nahrat-na-web/cena-s-kuponem.js) ---- */
.pestre-kupon {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 6px;
  flex-basis: 100%;
  width: 100%;
  color: #2a231a;
  line-height: 1.3;
}
.pestre-kupon strong {
  color: #d62828;
  font-weight: 700;
  white-space: nowrap;
}
.pestre-kupon span {
  color: #5c5044;
}
.pestre-kupon code {
  /* kód jako krémový štítek (varianta V6): písmo textu, ladí s paletou webu */
  display: inline-block;
  padding: 1px 7px;
  color: #2a231a;
  background: #f2ebe0;
  border: 1px solid #c8b89a;
  border-radius: 4px;
  font-family: 'Poppins', Arial, sans-serif !important;
  font-size: .95em;
  font-weight: 600;
  letter-spacing: .05em;
  line-height: 1.4;
}
.pestre-kupon--vypis {
  margin: 2px 0 0;
  font-size: 13px;
}
.pestre-kupon--vypis strong {
  font-size: 17px;
}
.pestre-kupon--detail {
  margin: 4px 0 14px;
  font-size: 15px;
}
.pestre-kupon--detail strong {
  font-size: 26px;
}

/* ---- Blok „Nejprodávanější“ (.products-top) — jen cena s kódem, menší;
   štítek se tu nezobrazuje (šablona v něm příznaky nevypisuje) ---- */
.pestre-kupon--top {
  font-size: 12px;
}
.pestre-kupon--top strong {
  font-size: 14px;
}

/* Ikona cenovky před cenou s kódem (varianta A) — barva podle textu (currentColor) */
.pestre-kupon strong::before {
  content: "";
  display: inline-block;
  width: .82em;
  height: .82em;
  margin-right: 5px;
  vertical-align: -.04em;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222.2%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12.6%202.6A2%202%200%200%200%2011.2%202H4a2%202%200%200%200-2%202v7.2a2%202%200%200%200%20.6%201.4l8.7%208.7a2.4%202.4%200%200%200%203.4%200l6.6-6.6a2.4%202.4%200%200%200%200-3.4z%22%2F%3E%3Ccircle%20cx%3D%227.5%22%20cy%3D%227.5%22%20r%3D%221.2%22%20fill%3D%22black%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222.2%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12.6%202.6A2%202%200%200%200%2011.2%202H4a2%202%200%200%200-2%202v7.2a2%202%200%200%200%20.6%201.4l8.7%208.7a2.4%202.4%200%200%200%203.4%200l6.6-6.6a2.4%202.4%200%200%200%200-3.4z%22%2F%3E%3Ccircle%20cx%3D%227.5%22%20cy%3D%227.5%22%20r%3D%221.2%22%20fill%3D%22black%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
}