/*
 * ============================================================
 *  PRODUKT – STYLY KRÁTKÉHO POPISKU PRODUKTOVÉ KARTY
 *  Projekt: TOPNYZEBRIK.CZ / PRIMAKOUPELNY.CZ
 *  Poslední revize: 2026-04
 * ============================================================
 *
 *  Závislosti:
 *    main.css      — globální proměnné, písma, základní prvky
 *    kategorie.css — .kat-stitek, .kat-parametricka-*
 *
 *  Komponenty:
 *
 *  1. ŠTÍTEK V DIVU (.kat-stitek uvnitř <div>)
 *     Oprava blokového zobrazení štítku v krátkém popisku produktu.
 *     Shoptet renderuje <p> tagy inline — proto používáme <div>.
 *
 *  2. TEXT VÝROBCE (.prod-vyrobce*)
 *     Accordion — kliknutím na štítek se zobrazí/skryje originální
 *     text výrobce. Stejný toggle princip jako .kat-faq v kategorie.css.
 *
 *     HTML struktura:
 *       <div>
 *         <span class="kat-stitek prod-vyrobce__toggle"
 *               aria-expanded="false" role="button" tabindex="0">
 *           Text výrobce
 *         </span>
 *       </div>
 *       <div class="prod-vyrobce__obsah je-zabaleno">
 *         <!-- původní HTML kód výrobce beze změn -->
 *       </div>
 *
 *       <script>
 *       (function(){
 *         var btn = document.querySelector('.prod-vyrobce__toggle');
 *         if (!btn) return;
 *         btn.addEventListener('click', function(){
 *           var obsah = document.querySelector('.prod-vyrobce__obsah');
 *           var expanded = btn.getAttribute('aria-expanded') === 'true';
 *           btn.setAttribute('aria-expanded', !expanded);
 *           obsah.classList.toggle('je-zabaleno');
 *         });
 *         btn.addEventListener('keydown', function(e){
 *           if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); btn.click(); }
 *         });
 *       })();
 *       </script>
 *
 *  3. ŠTÍTEK PRODUKTU (.prod-stitek)
 *     Inline štítek pro nadpisy sekcí v krátkém popisku.
 *     Oddělený od .kat-stitek (kategorie) — umožňuje nezávislé stylování
 *     na produktovém detailu.
 *
 *     HTML struktura:
 *       <div><span class="prod-stitek">Klíčové vlastnosti</span></div>
 *
 *  4. VARIANTY PRODUKTU (.prod-varianta-*)
 *     Pill tagy pro rozcestník na varianty produktu v krátkém popisku.
 *     Oddělené od .kat-parametricka-* (kategorie), aby bylo možné
 *     stylovat produktový detail nezávisle na stránkách kategorií.
 *
 *     HTML struktura:
 *       <ul class="prod-varianta-grid">
 *         <li class="prod-varianta-item">
 *           <a class="prod-varianta-link" href="/url-varianty/">Text</a>
 *         </li>
 *       </ul>
 *
 * ============================================================
 */


/* =============================================================
   1. ŠTÍTEK V DIVU
   Zajistí, že <div> obalující .kat-stitek se chová jako blok
   a štítek vždy začíná na novém řádku, bez ohledu na Shoptet
   render kontext krátkého popisku.
   ============================================================= */

.p-short-description div:has(> .kat-stitek),
.short-description div:has(> .kat-stitek) {
  display:    block;
  width:      100%;
  margin-top: 16px;
  margin-bottom: 6px;
}

/* První štítek bez horního marginu */
.p-short-description div:has(> .kat-stitek):first-child,
.short-description div:has(> .kat-stitek):first-child {
  margin-top: 0;
}


/* =============================================================
   2. TEXT VÝROBCE — accordion
   ============================================================= */

/* Toggle štítek — kurzor + hover efekt */
.prod-vyrobce__toggle {
  cursor:     pointer;
  display:    inline-flex !important;
  align-items: center;
  gap:        6px;
  transition: background-color 0.15s ease-in-out,
              border-color     0.15s ease-in-out,
              color             0.15s ease-in-out;
  user-select: none;
  -webkit-user-select: none;
}

/* Šipka vpravo od textu štítku — CSS border trik */
.prod-vyrobce__toggle::after {
  content:       '';
  display:       inline-block;
  width:         6px;
  height:        6px;
  border-right:  1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform:     rotate(45deg) translateY(-2px);
  transition:    transform 0.2s ease-in-out;
  flex-shrink:   0;
  margin-left:   2px;
}

/* Stav: rozbaleno — šipka se otočí nahoru */
.prod-vyrobce__toggle[aria-expanded="true"]::after {
  transform: rotate(225deg) translateY(-2px);
}

/* Hover */
.prod-vyrobce__toggle:hover {
  background-color: #e2e2e4;
  border-color:     #999;
}

/* Focus */
.prod-vyrobce__toggle:focus-visible {
  outline:        2px solid var(--color-primary, #00a8ee);
  outline-offset: 2px;
  border-radius:  50px;
}

/* Obsah — skrytý stav */
.prod-vyrobce__obsah.je-zabaleno {
  display: none;
}

/* Obsah — viditelný stav */
.prod-vyrobce__obsah {
  margin-top:  12px;
  padding:     14px 18px;
  background:  #f7f7f8;
  border:      1px solid #e4e4e4;
  border-radius: 8px;
  font-family: var(--font-primary, 'Poppins', sans-serif);
  font-size:   13px;
  line-height: 1.7;
  color:       var(--color-text, #24242e);
}

.prod-vyrobce__obsah p {
  margin: 0 0 8px;
}

.prod-vyrobce__obsah p:last-child {
  margin-bottom: 0;
}

/* Responzivita — mobil */
@media (max-width: 767px) {
  .prod-vyrobce__obsah {
    font-size: 12px;
    padding:   12px 14px;
  }
}


/* =============================================================
   3. VARIANTY PRODUKTU
   Pill tagy pro rozcestník na varianty v krátkém popisku.
   Nezávislé na .kat-parametricka-* — určeno výhradně pro
   produktový detail, nikoliv pro stránky kategorií.
   ============================================================= */

/* Kontejner */
.prod-varianta-grid {
  display:         flex;
  flex-wrap:       wrap;
  gap:             8px;
  padding:         10px 0;
  list-style:      none;
  margin:          0;
}

/* Pill tag */
.prod-varianta-link {
  display:          inline-flex;
  align-items:      center;
  padding:          6px 13px;
  background-color: #f0f0f1;
  border-radius:    50px;
  font-family:      var(--font-primary, 'Poppins', sans-serif);
  font-size:        11px;
  font-weight:      500;
  color:            var(--color-text, #24242e);
  text-decoration:  none !important;
  white-space:      nowrap;
  transition:       background-color 0.2s ease-in-out,
                    color            0.2s ease-in-out;
  border:           1px solid transparent;
}

.prod-varianta-link:hover {
  background-color: #e2e2e4;
}

.prod-varianta-link:focus-visible {
  outline:        2px solid var(--color-primary, #00a8ee);
  outline-offset: 2px;
}

/* Responzivita — mobil */
@media (max-width: 767px) {
  .prod-varianta-link {
    font-size: 10px;
    padding:   5px 11px;
  }
}


/* =============================================================
   3. ŠTÍTEK PRODUKTU
   Inline štítek pro nadpisy sekcí v krátkém popisku produktu.
   Nezávislý na .kat-stitek — určeno výhradně pro produktový detail.
   ============================================================= */

.prod-stitek {
  display:          inline-flex;
  align-items:      center;
  justify-content:  center;
  padding:          5px 12px;
  font-family:      var(--font-primary, sans-serif);
  font-size:        9px;
  font-weight:      600;
  text-transform:   uppercase;
  letter-spacing:   0.5px;
  line-height:      1;
  color:            #1a1d23;
  background-color: #ffffff;
  border:           1px dashed #b0b0b0;
  border-radius:    50px;
}

/* Odstraní výchozí mezery odstavce, pokud obsahuje pouze .prod-stitek */
p:has(> .prod-stitek) {
  margin-bottom: 0 !important;
  margin-top:    0 !important;
}