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


/* =============================================================
   5. KATEGORIE PRODUKTU (.prod-kategorie*)
   Sekce "Produkt najdete také v kategoriích" v dlouhém popisku.
   Pill tagy — stejný vizuál jako .kat-parametricka-*, ale
   samostatná komponenta s vlastním nadpisem a wrapperem.

   HTML struktura:
     <section class="prod-kategorie" aria-label="Kategorie produktu">
       <p class="prod-kategorie__nadpis">Produkt najdete také v kategoriích</p>
       <ul class="prod-kategorie__grid">
         <li class="prod-kategorie__item">
           <a class="prod-kategorie__link" href="/url/">Název kategorie</a>
         </li>
       </ul>
     </section>
   ============================================================= */

.prod-kategorie {
  margin:  32px 0 16px;
  padding: 0;
}

.prod-kategorie__nadpis {
  font-family:    var(--font-primary, 'Poppins', sans-serif);
  font-size:      11px;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color:          #aaa;
  margin:         0 0 10px;
  padding:        0;
}

.prod-kategorie__grid {
  display:   flex;
  flex-wrap: wrap;
  gap:       8px;
  list-style: none;
  margin:    0;
  padding:   0;
}

.prod-kategorie__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;
  border:           1px solid transparent;
  transition:       background-color 0.2s ease-in-out,
                    border-color     0.2s ease-in-out;
}

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

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

@media (max-width: 767px) {
  .prod-kategorie__link {
    font-size: 10px;
    padding:   5px 11px;
  }
}


/* =============================================================
   6. GALERIE BAREV VÝROBCE (.prod-galerie-barev)
   Mřížka náhledových čtverečků barev v sekci Text výrobce.
   Zachovává původní plus-gallery-wrap strukturu výrobce,
   ale přidává lepší layout a zalamování.
   ============================================================= */

.prod-galerie-barev {
  display:         flex;
  flex-wrap:       wrap;
  gap:             6px;
  margin:          12px 0 16px;
  padding:         0;
}

.prod-galerie-barev .plus-gallery-item {
  width:         64px !important;
  height:        64px !important;
  border-radius: 6px;
  overflow:      hidden;
  border:        1px solid #e4e4e4;
  transition:    border-color 0.15s ease-in-out,
                 box-shadow   0.15s ease-in-out;
  display:       inline-block;
}

.prod-galerie-barev .plus-gallery-item:hover {
  border-color: var(--color-primary, #00a8ee);
  box-shadow:   0 2px 8px rgba(0, 168, 238, 0.15);
}

.prod-galerie-barev .plus-gallery-item a {
  display: block;
  width:   100%;
  height:  100%;
}

.prod-galerie-barev .plus-gallery-item img {
  display:    block;
  width:      100%;
  height:     100%;
  object-fit: cover;
}

@media (max-width: 767px) {
  .prod-galerie-barev .plus-gallery-item {
    width:  52px !important;
    height: 52px !important;
  }
}


/* =============================================================
   7. DOSTUPNÉ ROZMĚRY (.prod-rozmery-*)
   Rozcestník na ROZMĚROVÉ varianty TÉHOŽ produktu — stejná série,
   stejná barva/povrch, stejný typ připojení; mění se pouze rozměr.
   Vizuál dle zadání: světle šedé tlačítko se zaoblenými rohy
   a tučným popiskem. Aktuálně zobrazený rozměr je zvýrazněn
   zeleným rámečkem (.is-current) a není klikatelný.

   Pozn.: Nezaměňovat s .prod-varianta-* (pill tagy) — .prod-rozmery-*
   je samostatná, výraznější komponenta určená pro rozměrový rozcestník.

   HTML struktura:
     <div><span class="kat-stitek">Dostupné rozměry</span></div>
     <ul class="prod-rozmery-grid">
       <li class="prod-rozmery-item">
         <span class="prod-rozmery-link is-current" aria-current="true">400x930 mm</span>
       </li>
       <li class="prod-rozmery-item">
         <a class="prod-rozmery-link" href="/url-varianty/">400x1250 mm</a>
       </li>
       ...
     </ul>
   ============================================================= */

:root {
  --prod-rozmery-bg:          #f0f0f1;
  --prod-rozmery-bg-hover:    #e2e2e4;
  --prod-rozmery-text:        var(--color-text, #24242e);
  --prod-rozmery-current:     #2e9e44;
  --prod-rozmery-current-bg:  #ffffff;
  --prod-rozmery-radius:      10px;
}

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

.prod-rozmery-item {
  flex:      0 0 auto;
  min-width: 0;
}

/* Tlačítko rozměru */
.prod-rozmery-link {
  display:          inline-flex;
  align-items:      center;
  justify-content:  center;
  padding:          11px 18px;
  background-color: var(--prod-rozmery-bg);
  border:           2px solid transparent;
  border-radius:    var(--prod-rozmery-radius);
  font-family:      var(--font-primary, 'Poppins', sans-serif);
  font-size:        14px;
  font-weight:      700;
  line-height:      1.2;
  color:            var(--prod-rozmery-text);
  text-decoration:  none !important;
  white-space:      nowrap;
  box-sizing:       border-box;
  transition:       background-color 0.18s ease-in-out,
                    border-color     0.18s ease-in-out;
}

/* Hover — pouze klikatelné odkazy (ne aktuální rozměr) */
a.prod-rozmery-link:hover {
  background-color: var(--prod-rozmery-bg-hover);
}

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

/* Aktuálně zobrazený rozměr — zelený rámeček, neklikatelný */
.prod-rozmery-link.is-current {
  background-color: var(--prod-rozmery-current-bg);
  border-color:     var(--prod-rozmery-current);
  color:            var(--prod-rozmery-text);
  cursor:           default;
  pointer-events:   none;
}

/* Responzivita — mobil */
@media (max-width: 767px) {
  .prod-rozmery-grid {
    gap: 8px;
  }

  .prod-rozmery-link {
    padding:   9px 13px;
    font-size: 13px;
  }
}


/* =============================================================
   8. BAREVNÉ VARIANTY (.prod-barvy-*)
   Rozcestník na BAREVNÉ varianty TÉHOŽ produktu — stejná série,
   stejný rozměr, stejný typ připojení; mění se pouze barva/povrch.
   Vizuál: kruhové vzorníky barev. Aktuálně zobrazená barva má
   zelený prstenec a bílé zatržítko (.is-current) a není klikatelná.

   Pozn.: Logika výběru je shodná s .prod-rozmery-* — variantou je
   pouze produkt lišící se jediným atributem (zde barvou).

   HTML struktura:
     <div><span class="kat-stitek">Barevné varianty</span></div>
     <ul class="prod-barvy-grid">
       <li class="prod-barvy-item">
         <span class="prod-barva is-current" aria-current="true"
               title="Bílá" aria-label="Bílá (aktuální barva)">
           <span class="prod-barva__kruh prod-barva--bila"></span>
         </span>
       </li>
       <li class="prod-barvy-item">
         <a class="prod-barva" href="/url-varianty/"
            title="Černá mat" aria-label="Černá mat">
           <span class="prod-barva__kruh prod-barva--cerna"></span>
         </a>
       </li>
       ...
     </ul>
   ============================================================= */

:root {
  --prod-barva-size:        44px;
  --prod-barva-size-mob:    40px;
  --prod-barva-border:      #e0e0e0;
  --prod-barva-current:     #1aa01a;
}

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

.prod-barvy-item {
  flex:   0 0 auto;
  margin: 0;
}

/* Klikatelný / aktuální vzorník (obal kruhu) */
.prod-barva {
  display:          inline-flex;
  align-items:      center;
  justify-content:  center;
  text-decoration:  none !important;
  border-radius:    50%;
  cursor:           pointer;
}

.prod-barva.is-current {
  cursor: default;
}

/* Kruh s barvou */
.prod-barva__kruh {
  position:      relative;
  display:       block;
  width:         var(--prod-barva-size);
  height:        var(--prod-barva-size);
  border-radius: 50%;
  border:        1px solid var(--prod-barva-border);
  box-sizing:    border-box;
  transition:    transform  0.15s ease-in-out,
                 box-shadow 0.15s ease-in-out;
}

/* Hover — pouze klikatelné vzorníky */
.prod-barva:not(.is-current):hover .prod-barva__kruh {
  transform:  scale(1.08);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}

.prod-barva:focus-visible {
  outline: none;
}

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

/* Aktuální barva — zelený prstenec + zatržítko */
.prod-barva.is-current .prod-barva__kruh {
  border:     3px solid var(--prod-barva-current);
  box-shadow: 0 0 0 1px #ffffff inset;
}

.prod-barva.is-current .prod-barva__kruh::after {
  content:       '';
  position:      absolute;
  left:          50%;
  top:           48%;
  width:         8px;
  height:        15px;
  border-right:  3px solid #ffffff;
  border-bottom: 3px solid #ffffff;
  transform:     translate(-50%, -58%) rotate(45deg);
  /* stín, aby bylo zatržítko čitelné i na světlém vzorníku */
  filter:        drop-shadow(0 0 1px rgba(0, 0, 0, 0.55));
}

/* -------------------------------------------------------------
   8a. MODIFIKÁTORY BAREV
   Přidávej dle potřeby další odstíny ze sortimentu.
   ------------------------------------------------------------- */

.prod-barva--bila        { background: #ffffff; }
.prod-barva--cerna       { background: #1f1f1f; }
.prod-barva--antracit    { background: #3a3a40; }
.prod-barva--chrom       { background: linear-gradient(135deg, #f2f2f2 0%, #c2c2c2 42%, #fafafa 52%, #9e9e9e 100%); }
.prod-barva--nerez       { background: linear-gradient(135deg, #e3e3e3 0%, #b6b6b6 50%, #d8d8d8 100%); }
.prod-barva--stribrna    { background: linear-gradient(135deg, #ededed 0%, #c8c8c8 50%, #e0e0e0 100%); }
.prod-barva--zlata       { background: linear-gradient(135deg, #f0d98c 0%, #c9a23d 100%); }
.prod-barva--piskovec    { background: #cbb48f; }
.prod-barva--bronz       { background: #8c6b3f; }
.prod-barva--verde       { background: #5f7a5b; }
.prod-barva--siena       { background: #a4522e; }
.prod-barva--moca        { background: #6e5743; }
.prod-barva--bridlice    { background: linear-gradient(135deg, #555c61 0%, #3f4549 55%, #4d545a 100%); }
.prod-barva--agila       { background: #9a9b86; }
.prod-barva--fallback    { background: #d8d8da; }

/* Responzivita — mobil */
@media (max-width: 767px) {
  .prod-barvy-grid {
    gap: 10px;
  }

  .prod-barva__kruh {
    width:  var(--prod-barva-size-mob);
    height: var(--prod-barva-size-mob);
  }
}