/* mydotz dot-painting urun sayfasi: 2-eksen secici (Boyut buton + Cerceve gorsel).
   Sade yesil-beyaz. Yalnizca mydotz temasinda yuklenir. */

/* --- Guvenilir galeri (owl yerine): buyuk ana resim + kucuk resimler --- */
.mydotz-gallery { width: 100%; }
.mydotz-main { width: 100%; background: #fff; border: 1px solid #eee; border-radius: 10px; overflow: hidden; }
.mydotz-main img { width: 100%; height: auto; display: block; }
.mydotz-thumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.mydotz-thumb { width: 70px; height: 70px; padding: 0; border: 2px solid #e3e3e3; border-radius: 8px;
                overflow: hidden; background: #fff; cursor: pointer; transition: border-color .15s ease; }
.mydotz-thumb:hover { border-color: #bfe9d3; }
.mydotz-thumb.active { border-color: #1f9d63; }
.mydotz-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.mydotz-variant-ui { margin: 6px 0 18px; }
.mydotz-variant-ui .mydotz-lbl {
  font-weight: 600; font-size: 14px; color: #222; margin: 14px 0 8px;
}
.mydotz-variant-ui .mydotz-canvas-name { font-weight: 400; color: #1f9d63; }

/* --- Boyut butonlari --- */
.mydotz-size-row { display: flex; flex-wrap: wrap; gap: 10px; }
.mydotz-size-btn {
  background: #fff; border: 1.5px solid #d9d9d9; border-radius: 10px;
  padding: 10px 16px; font-size: 14px; color: #222; cursor: pointer;
  transition: all .15s ease; line-height: 1.2;
}
.mydotz-size-btn:hover { border-color: #1f9d63; }
.mydotz-size-btn.active {
  border-color: #1f9d63; box-shadow: 0 0 0 1px #1f9d63 inset; font-weight: 600;
}

/* --- Cerceve gorsel butonlari --- */
.mydotz-canvas-row { display: flex; flex-wrap: wrap; gap: 14px; }
.mydotz-canvas-btn {
  background: #fff; border: 2px solid transparent; border-radius: 12px;
  padding: 8px 8px 6px; cursor: pointer; transition: all .15s ease;
  text-align: center; line-height: 1;
}
.mydotz-canvas-btn:hover { border-color: #bfe9d3; }
.mydotz-canvas-btn.active { border-color: #1f9d63; }

.mydotz-canvas-thumb { display: inline-block; width: 84px; height: 84px; line-height: 0; vertical-align: top; }
.mydotz-canvas-thumb img {
  width: 100%; height: 100%; object-fit: contain; display: block; background: #fff;
}
.mydotz-canvas-cap { display: block; font-size: 11px; color: #555; margin-top: 7px; line-height: 1.2; }
.mydotz-canvas-btn.active .mydotz-canvas-cap { color: #1f9d63; font-weight: 600; }

/* Cerceve tipleri artik standart sunum mockup SVG'leriyle gosterilir
   (frames/flat|stretched|luxury.svg) — sunum farki gorselin ICINDE;
   CSS'te ek cerceve taklidi YAPILMAZ (cift cerceve olusmasin). */

@media (max-width: 480px) {
  .mydotz-canvas-thumb { width: 68px; height: 68px; }
}

@media (max-width: 480px) {
  .mydotz-canvas-thumb { width: 64px; height: 64px; }
}

/* urun ustu guven rozeti */
.mydotz-trust { font-size: 14px; color: #3a4150; margin: 0 0 8px; }
.mydotz-trust-stars { color: #f5a623; letter-spacing: 2px; }
.mydotz-trust small { color: #9aa0ac; font-size: 11px; display: block; }