.deru-gallery__viewport { overflow: hidden; touch-action: pan-y; }
.deru-gallery__track {
  display: flex;
  transition: transform 280ms ease;
  will-change: transform;
}
.deru-gallery__track.no-anim { transition: none !important; }

.deru-gallery__slide { flex: 0 0 100%; }
.deru-gallery__img { display:block; width:100%; height:auto; }

/*
  Legacy kompatibilitás: engedjük, hogy a régi (kész) megjelenés érvényesüljön.
  Csak a működéshez szükséges minimumot adjuk hozzá.
*/
/* Thumbnails vízszintes görgetés (iOS tehetetlenséggel) */
.thumbnails {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/*
  BRIDGE (strukturális): a régi UL/LI alapú layout tükrözése az új button alapú markupra,
  hogy a legacy vizuális szabályok (.thumbnails img, aktív/hover keretek, stb.) érvényesüljenek.
  Nem állítunk közvetlen vizuális értékeket (méret, szín) – azokat a woocommerce.css adja.
*/
.single-product .product_content .thumbnails.deru-gallery__thumbs {
  display: inline-flex;          /* régi: .thumbnails ul { display: inline-flex } */
  flex-wrap: nowrap;             /* egy sorban maradjon */
  gap: 12px;                     /* egyezzen a legacy gap-pel */
  padding: 0;                    /* egyezzen a legacy list belső paddel */
  margin: 0 12px 0 0;            /* legacy jobb „puffer” */
}

/* Garantáljuk, hogy a thumbs sor tényleg egysorban legyen (specifikitás + !important)
   és a gyerek thumb elemek ne blokkosodjanak. */
.deru-gallery__thumbs.thumbnails { display: inline-flex !important; flex-wrap: nowrap; }
.deru-gallery__thumbs.thumbnails .deru-thumb { display: inline-flex; flex: 0 0 auto; }

.single-product .product_content .thumbnails .deru-thumb {
  flex: 0 0 auto;                /* régi: .thumbnails .flex-control-thumbs li { flex: 0 0 auto } */
  display: inline-flex;          /* régi: .thumbnails li, .thumbnails a { display: inline-flex } */
}

/* Hover keret szín alias az <a>:hover img régi szelektorra */
.single-product .product_content .thumbnails .deru-thumb:hover img { border-color: #7AC143FF; }

/*
  BRIDGE: a régi .thumbs-nav-dots__dot szabályok alkalmazása az új .deru-dot gombokra
  (konténer: .thumbs-nav-dots – a legacy szelektorok már a woocommerce.css-ben vannak)
*/
.single-product .product_content .thumbs-nav-dots .deru-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  transition: background-color .2s ease;
  background-color: #d1d5db;
  border: 1px solid #cbd5e1;
  padding: 0;
  cursor: pointer;
  display: inline-block;
}

.single-product .product_content .thumbs-nav-dots .deru-dot:hover {
  background-color: #a3aebc;
}

.single-product .product_content .thumbs-nav-dots .deru-dot.is-active {
  background-color: #7AC143FF;
  border-color: #7AC143FF;
}

@media (max-width: 600px) {
  .single-product .product_content .thumbs-nav-dots .deru-dot {
    width: 12px;
    height: 12px;
  }
}

/*
  Alias célpontok a régi szelektorokhoz, markup módosítása nélkül
  (nincs közvetlen stílus, csak biztosítja, hogy ha a téma célozza, ne törjön).
*/
.thumbs-nav-dots__inner {}
.thumbs-nav-arrow {}
.thumbs-nav-arrow.thumbs-nav-prev {}
.thumbs-nav-arrow.thumbs-nav-next {}
.flex-control-nav.flex-control-thumbs {}