#product #description .product-description .flex-media-wrapper .content-wrapper video, 
#product #description .product-description .flex-media-wrapper .content-wrapper iframe {
  width: initial;
  height: initial;
  margin: auto;
  margin-bottom: 1.5rem;
}


#product #description .product-description .flex-media-wrapper .crop:hover .injected-product-image {
    transform: translate(-50%, calc(-55% - 5px)) scale(1.05); 
}





@media (min-width: 628px) {
	/* Základní styly pro obalový kontejner */
	#product #description .product-description .flex-media-wrapper {
			border-bottom: solid 1px #f2f2f2;
			display: flex;
			flex-wrap: wrap; 
			gap: 6rem;
			margin: 0.5rem 0;
	}
	/* NOVÉ PRAVIDLO: Kontejner pro textový obsah (60% šířky) */
	#product #description .product-description .flex-media-wrapper .content-wrapper {
		flex: 1; 
	}

	/* Styly pro ořezový kontejner EM (40% šířky) */
	#product #description .product-description .flex-media-wrapper .crop {
		flex: 0 0 40%; /* Pevná šířka pro obrázek */
		/*border: 1px solid #ddd;*/
		display: block; /* Důležité pro flexbox */
		position: relative;
		overflow: hidden;
		height: 50vh;
		max-height: 250px;
		flex: 0 0 40%; 
		min-width: 200px;
		max-width: 300px;
	}

	/* Styly pro obrázek na levé straně */
	#product #description .product-description .flex-media-wrapper.image-left/*,
	#product #description .product-description .flex-media-wrapper:nth-child(even)*/	{
	  flex-direction: row-reverse; 
	}


	/* Styly pro samotný vkládaný obrázek uvnitř kontejneru */
	#product #description .product-description .flex-media-wrapper .crop .injected-product-image {
		position: absolute; 
		top: 50%;
		left: 50%;
		/* Posun o 5px nahoru */
		transform: translate(-50%, calc(-55% - 5px)); 
		width: 100%; /* Zajišťuje, že obrázek vyplní celou šířku ořezového okna */
		height: auto;
	}
}

@media (max-width: 627px) {
	#product #description .product-description .flex-media-wrapper .crop .injected-product-image {
		border: 1px solid #f2f2f2;
		max-width: 100%;
		height: auto;
	}
}


/* Styl pro celou galerii - aby bylo jasné, že je interaktivní */
.gallery-wrapper img {
    /* Umožní nastavit kurzor na "pointer" přes delegaci v JS */
    cursor: pointer; 
}

/* 1. Překryvná vrstva (Overlay) */
#fancy-lightbox-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.2); /* Tmavé, poloprůhledné pozadí */
    z-index: 99999; /* Vždy nad vším */
    display: flex;
    justify-content: center; /* Vycentrování obrázku horizontálně */
    align-items: center; /* Vycentrování obrázku vertikálně */
    overflow: auto; /* Důležité pro případ velkého obrázku */
    cursor: zoom-out; /* Naznačení, že se kliknutím zavře */
}

/* 2. Zvětšený obrázek */
.lightbox-image {
	background-color: white;
    /* Maximální velikost 90% šířky/výšky okna */
    max-width: 90%;
    max-height: 90%;
    
    /* Vzhled a animace */
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
    border: 5px solid white;
    transform: scale(0.8); /* Počáteční menší velikost pro efekt animace */
    transition: transform 0.3s ease-out;
}

/* Při zobrazení se vrátí na plnou velikost */
#fancy-lightbox-overlay .lightbox-image {
    transform: scale(1);
}