/* Scoped styly detailu produktu (.single-product body trida) - JEN cizi
   markup, ktery negenerujeme sami a nemuzeme mu proto pridat utility tridy:
   lightGallery (assets/js/main.js) vykresluje .lg-outer/.lg-thumb-outer/
   .lg-thumb/.lg-thumb-item/.lg-toolbar/.lg-sub-html/.lg-prev/.lg-next/
   .lg-object/.lg-backdrop dynamicky DO #inline-gallery-container (viz
   `container: $lgContainer` v main.js) - je to markup pluginu lightgallery.js,
   ne nase sablony. Vse ostatni (wrapper #inline-gallery-container samotny,
   initialni <a><img> zdrojove miniatury, .discount-badge, .stock-alternative-hint
   generovany z assets/js/wc/singleProduct.js) je nase vlastni markup a je
   resene primo Tailwind utility tridami v markupu / JS retezcich (Tailwind
   skenuje i assets/js (vsechny .js soubory) pres @source v main.css).

   Puvodne assets/css/components/inline-gallery-container.css (globalni,
   nacitany na kazde strance). Presunuto sem a enqueue podmineno is_product()
   v required_files.php, protoze #inline-gallery-container existuje jen na
   detailu produktu. */

.single-product .inline-gallery-container .lg-object {
  border-radius: 0 !important;
}

.single-product .inline-gallery-container .lg-backdrop {
  background-color: var(--color-bg) !important;
}

.single-product .inline-gallery-container .lg-outer .lg-thumb-outer {
  background-color: var(--color-bg) !important;
}

.single-product .inline-gallery-container .lg-outer .lg-thumb-outer .lg-thumb {
  display: flex !important;
  flex-wrap: nowrap !important;
}

.single-product .inline-gallery-container .lg-outer .lg-thumb-outer .lg-thumb-item {
  margin: 0 !important;
  margin-right: 2rem !important;
  border: none !important;
  flex-shrink: 0;
  opacity: 0.7;
  transition: opacity 0.3s ease;
}

.single-product .inline-gallery-container .lg-outer .lg-thumb-outer .lg-thumb-item:hover,
.single-product .inline-gallery-container .lg-outer .lg-thumb-outer .lg-thumb-item.active {
  opacity: 1;
}

.single-product .inline-gallery-container .lg-outer .lg-thumb-outer .lg-thumb-item img {
  border-radius: 0 !important;
  transition: opacity 0.3s ease;
}

/* Customize icons for light theme */
.single-product .inline-gallery-container .lg-toolbar,
.single-product .inline-gallery-container .lg-toolbar .lg-icon {
  color: var(--color-text-muted);
}

/* Hover prevzato z overwrites/woocommerce.css (Task E4.3, uklid globalu -
   toto pravidlo bylo pouzivano vyhradne na detailu produktu, viz header
   overwrites/woocommerce.css) - lightGallery vlastni CSS meni barvu ikony
   na hover, tohle ji vraci zpet na stejnou muted barvu jako v klidu. */
.single-product .inline-gallery-container .lg-toolbar .lg-icon:hover {
  color: var(--color-text-muted);
}

.single-product .inline-gallery-container .lg-sub-html {
  color: var(--color-text-muted);
}

.single-product .inline-gallery-container .lg-prev,
.single-product .inline-gallery-container .lg-next {
  color: var(--color-white) !important;
  background-color: var(--color-overlay);
}

/* Fullscreen ("modal") rezim galerie - viz main.js, sekce #inline-gallery-container.
   lightGallery pro fullscreen jen sundava .lg-inline a spoleha na position: fixed;
   rodic galerie (.left.fade-in-up.is-visible) ma ale transform: translateY(0),
   a tim se stava containing blockem - fixed by se orezalo do leveho sloupce.
   Tridu prida/odebere JS jen po dobu fullscreenu, vizualne nic nemeni
   (translateY(0) je identita). */
.single-product .is-lg-fullscreen-host {
  /* transition na .fade-in-up by prechod translateY(0) -> none rozlozila do 0,7 s
     a po tu dobu by element porad byl containing blockem - proto ji tady vypiname. */
  transition: none !important;
  transform: none !important;
}

/* Klik do fotky v nahledu otevira fullscreen - kurzor to naznaci. */
.single-product .inline-gallery-container .lg-container.lg-inline .lg-image {
  cursor: zoom-in;
}

/* Ve fullscreenu zavira klik do pozadi (mimo fotku). */
.single-product .inline-gallery-container .lg-container:not(.lg-inline) .lg-backdrop,
.single-product .inline-gallery-container .lg-container:not(.lg-inline) .lg-item {
  cursor: zoom-out;
}

/* Ve fullscreenu je z ikony zvetseni krizek v pravem hornim rohu - aby bylo na
   prvni pohled poznat, ze jde o modal a jak se zavira. Tlacitko je porad stejne
   (.lg-maximize, klik vraci galerii do nahledu), meni se jen glyf z ikonoveho
   fontu lightGallery (\e070 = krizek). Velikost schvalne v px, ne v rem -
   rem se v tematu s uzsim oknem zmensuje a krizek by na mobilu zdrobnel. */
.single-product .inline-gallery-container .lg-container:not(.lg-inline) .lg-toolbar .lg-maximize:after {
  content: '\e070';
  font-size: 24px;
}

/* Na hover krizek ztmavne na plnou barvu textu (ostatni ikony listy drzi muted -
   viz pravidlo .lg-toolbar .lg-icon:hover vyse). */
.single-product .inline-gallery-container .lg-container:not(.lg-inline) .lg-toolbar .lg-maximize:hover {
  color: var(--color-text);
}