/* ==========================================================================
   Galeria produktu – kwadratowa ramka 1:1
   --------------------------------------------------------------------------
   Builder YOOtheme wypuszcza inline CSS (element #template-BjERFIDE#0):
     .flex-viewport { height:560px; overflow:hidden; background:#f1ede2; border… }
     .woocommerce-product-gallery__image img { width:100%; max-height:560px;
                                               object-fit:contain }
   Ramka jest szersza (646 px) niż wysoka (560 px), więc kwadratowe zdjęcie
   (600×600) rysuje się jako 560×560 i zostawia po 43 px beżowego tła z każdej
   strony. Ten plik zamienia ramkę na kwadratową.

   Specyficzność: selektor bazowy buildera to 1 ID + 2 klasy (1,2,0). Nasze CSS
   ładuje się PRZED nim (wp_head prio 100 vs style inline buildera), więc musimy
   mieć wyższą specyficzność — stąd dwie klasy galerii w jednym członie: (1,3,0).

   !important jest tu świadomym wyjątkiem: nadpisujemy style inline innej wtyczki
   (reguła 6 z AGENTS.md).

   NIE zmieniamy tła ani obramowania ramki — tylko proporcje i sposób wpisania
   zdjęcia. Miniatur (.flex-control-thumbs) nie ruszamy.
   ========================================================================== */

#tm-main .woocommerce-product-gallery--with-images.woocommerce-product-gallery .flex-viewport {
  height: auto !important;
  aspect-ratio: 1 / 1 !important;
}

/* :not(.zoomImg) — lupa WooCommerce dopisuje do slajdu <img class="zoomImg">
   i ustawia mu wymiary inline; nadpisanie ich zepsułoby powiększenie. */
#tm-main .woocommerce-product-gallery--with-images.woocommerce-product-gallery .flex-viewport img:not(.zoomImg) {
  max-height: none !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}

/* Lupa (jquery.zoom z WooCommerce): warstwa .zoomImg dostaje od buildera
   max-height:560px, przez co jest przycięta do rozmiaru zdjęcia i przypięta do 0,0 —
   czyli dziś nie daje żadnego widocznego powiększenia. Po zmianie proporcji ramki
   (646 px wysokości) ta warstwa zaczyna się przesuwać i tworzy widoczny artefakt
   podczas najechania. Przypinamy ją do ramki, czyli zachowujemy obecny efekt:
   brak artefaktu, brak zmiany zachowania. Powiększenie i tak realizuje lightbox
   (ikona lupy w prawym górnym rogu, PhotoSwipe na <a>). */
#tm-main .woocommerce-product-gallery--with-images.woocommerce-product-gallery .flex-viewport .zoomImg {
  max-height: none !important;
  width: 100% !important;
  height: 100% !important;
  top: 0 !important;
  left: 0 !important;
}