/*
 * ============================================================
 *  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>
 *
 * ============================================================
 */


/* =============================================================
   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;
  }
}