/* --------------------------------------------------------------
   1. NAPRAWA BIAŁEGO TŁA NA HOVERZE
   Motyw wygaszał główne zdjęcie i jednocześnie rozjaśniał drugie.
   W połowie animacji oba były półprzezroczyste i prześwitywało
   białe tło strony. Teraz główne zdjęcie zostaje na miejscu,
   a drugie płynnie pojawia się nad nim.
-------------------------------------------------------------- */
.products li.product:hover img.attachment-woocommerce_thumbnail,
.products li.product:focus-within img.attachment-woocommerce_thumbnail {
  opacity: 1 !important;
}

.products li.product img.secondary-product-image {
  transition: opacity .45s ease !important;
}

/* gdy galeria jest aktywna, drugie zdjęcie motywu ustępuje naszemu */
.products li.product.gk-aktywna img.secondary-product-image {
  opacity: 0 !important;
}

/* --------------------------------------------------------------
   2. GALERIA W KAFELKU
-------------------------------------------------------------- */
.woocommerce-LoopProduct-link {
  position: relative;
}

.gk-slajd {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  opacity: 0;
  transition: opacity .35s ease;
  pointer-events: none;
  z-index: 2;
}

.gk-slajd.gk-widoczny {
  opacity: 1;
}

.gk-strzalka {
  position: absolute;
  top: 42%;
  transform: translateY(-50%);
  z-index: 4;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, .9) !important;
  color: #2E2A27 !important;
  cursor: pointer;
  opacity: 0;
  transition: opacity .25s ease, background .2s ease;
  box-shadow: 0 2px 10px rgba(46, 42, 39, .16);
  font-size: 0;
  padding: 0;
}

.gk-strzalka svg { width: 15px; height: 15px; }
.gk-strzalka.gk-lewo { left: 10px; }
.gk-strzalka.gk-prawo { right: 10px; }

/* Motyw koloruje wszystkie przyciski na hoverze (button:hover), dlatego
   nasze kolory muszą być zapisane mocniej — inaczej strzałki dostają
   barwę z motywu zamiast akcentu sklepu. */
.gk-strzalka:hover,
.gk-strzalka:focus,
.gk-strzalka:active {
  background: var(--ast-global-color-0, #BFA08E) !important;
  color: #fff !important;
  border-color: transparent !important;
}

li.product:hover .gk-strzalka,
li.product:focus-within .gk-strzalka {
  opacity: 1;
}

.gk-strzalka:focus-visible {
  opacity: 1;
  outline: 2px solid var(--ast-global-color-0, #BFA08E);
  outline-offset: 2px;
}

/* kropki */
.gk-kropki {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 42px;
  z-index: 4;
  display: flex;
  justify-content: center;
  gap: 5px;
  opacity: 0;
  transition: opacity .25s ease;
  pointer-events: none;
}

li.product:hover .gk-kropki,
li.product:focus-within .gk-kropki {
  opacity: 1;
}

.gk-kropki i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(46, 42, 39, .28);
  transition: background .2s ease, transform .2s ease;
}

.gk-kropki i.gk-teraz {
  background: #BFA08E;
  transform: scale(1.45);
}

/* na ekranach dotykowych strzałki widoczne od razu — nie ma najechania */
@media (hover: none) {
  .gk-strzalka, .gk-kropki { opacity: 1; }
  .gk-strzalka { width: 30px; height: 30px; }
}

@media (prefers-reduced-motion: reduce) {
  .gk-slajd, .gk-strzalka, .gk-kropki,
  .products li.product img.secondary-product-image { transition: none !important; }
}

/* --------------------------------------------------------------
   3. ZAOKRĄGLONE NAROŻNIKI ZDJĘĆ PRODUKTÓW
   Delikatne 12 px — nowocześnie, ale bez efektu „aplikacji".
   Wartość zmienisz w jednym miejscu: --gk-promien poniżej.
-------------------------------------------------------------- */
:root { --gk-promien: 12px; }

/* miniatury na liście produktów */
.products li.product img.attachment-woocommerce_thumbnail,
.products li.product img.secondary-product-image,
.products li.product .gk-slajd,
.wc-block-grid__product-image img,
.woocommerce-loop-product__link img {
  border-radius: var(--gk-promien) !important;
  overflow: hidden;
}

/* karta produktu: duże zdjęcie i miniatury galerii */
.woocommerce div.product div.images img,
.woocommerce div.product div.images .woocommerce-product-gallery__image,
.woocommerce div.product div.images .flex-control-thumbs li img {
  border-radius: var(--gk-promien) !important;
}

/* koszyk, zamówienie, widgety */
.woocommerce table.shop_table td.product-thumbnail img,
.woocommerce ul.cart_list li img,
.woocommerce ul.product_list_widget li img,
.woocommerce-mini-cart img {
  border-radius: calc(var(--gk-promien) * .6) !important;
}

/* zoom w galerii produktu potrafi obcinać zaokrąglenie — wymuszamy */
.woocommerce div.product div.images .woocommerce-product-gallery__wrapper,
.woocommerce-product-gallery__image a {
  border-radius: var(--gk-promien);
  overflow: hidden;
}

@media (max-width: 600px) {
  :root { --gk-promien: 10px; }
}

/* --------------------------------------------------------------
   4. GALERIA NA KARCIE PRODUKTU
   Strzałki włącza filtr w pliku PHP; tutaj nadajemy im wygląd
   spójny ze strzałkami w kafelkach kategorii.
-------------------------------------------------------------- */
.woocommerce div.product .flex-direction-nav {
  list-style: none;
  margin: 0;
  padding: 0;
}

.woocommerce div.product .flex-direction-nav a {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .9);
  box-shadow: 0 2px 12px rgba(46, 42, 39, .18);
  opacity: 0;
  transition: opacity .25s ease, background .2s ease;
  font-size: 0;
  text-indent: 0;
  display: block;
}

.woocommerce div.product .flex-direction-nav a::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  border-right: 2.2px solid #2E2A27;
  border-bottom: 2.2px solid #2E2A27;
  transition: border-color .2s ease;
}

.woocommerce div.product .flex-direction-nav .flex-prev { left: 14px; }
.woocommerce div.product .flex-direction-nav .flex-next { right: 14px; }

.woocommerce div.product .flex-direction-nav .flex-prev::after {
  transform: translate(-35%, -50%) rotate(135deg);
}
.woocommerce div.product .flex-direction-nav .flex-next::after {
  transform: translate(-65%, -50%) rotate(-45deg);
}

.woocommerce div.product div.images:hover .flex-direction-nav a,
.woocommerce div.product .flex-direction-nav a:focus-visible {
  opacity: 1;
}

.woocommerce div.product .flex-direction-nav a:hover {
  background: var(--ast-global-color-0, #BFA08E);
}
.woocommerce div.product .flex-direction-nav a:hover::after {
  border-color: #fff;
}

/* flexslider chowa strzałki przy krańcach — u nas slider jest zapętlony */
.woocommerce div.product .flex-direction-nav .flex-disabled {
  opacity: 0 !important;
  cursor: default;
}

@media (hover: none) {
  .woocommerce div.product .flex-direction-nav a { opacity: 1; width: 36px; height: 36px; }
}

/* --- mniejsze miniatury pod zdjęciem --- */
.woocommerce div.product .flex-control-thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

/* 10 miniatur w rzędzie — szerokość liczona z dostępnego miejsca,
   żeby rząd wypełniał się równo niezależnie od szerokości ekranu */
.woocommerce div.product .flex-control-thumbs li {
  width: calc((100% - 9 * 6px) / 10);
  margin: 0;
  float: none;
}

.woocommerce div.product .flex-control-thumbs li img {
  width: 100%;
  height: auto;
  opacity: .62;
  border: 1px solid transparent;
  border-radius: calc(var(--gk-promien) * .7) !important;
  transition: opacity .2s ease, border-color .2s ease;
  cursor: pointer;
}

.woocommerce div.product .flex-control-thumbs li img:hover,
.woocommerce div.product .flex-control-thumbs li img.flex-active {
  opacity: 1;
  border-color: var(--ast-global-color-0, #BFA08E);
}

/* na wąskich ekranach 10 sztuk byłoby nieklikalne — schodzimy do 6 */
@media (max-width: 600px) {
  .woocommerce div.product .flex-control-thumbs { gap: 5px; }
  .woocommerce div.product .flex-control-thumbs li {
    width: calc((100% - 5 * 5px) / 6);
  }
}