/* =========================
   0) Wyłączenie ikonek lupy i overlayów na obrazkach,
   żeby nasz checkbox nie znikał pod warstwą motywu
   ========================= */
.woocommerce div.product .woocommerce-product-gallery__trigger,
.woocommerce div.product .woocommerce-product-gallery__trigger:before,
.woocommerce div.product .woocommerce-product-gallery__trigger:after,
.mfn-product-gallery-grid .woocommerce-product-gallery__trigger,
.mfn-product-gallery-grid .woocommerce-product-gallery__trigger:before,
.mfn-product-gallery-grid .woocommerce-product-gallery__trigger:after,
.mfn-quick-view .woocommerce-product-gallery__trigger,
.mfn-quick-view .woocommerce-product-gallery__trigger:before,
.mfn-quick-view .woocommerce-product-gallery__trigger:after{
  opacity: 0 !important;
  visibility: hidden !important;
  background: none !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
}
.mfn-zoom-icon,
a.zoom.mfn-zoom,
.image_links .zoom{
  display:none !important;
}
.woocommerce div.product .woocommerce-product-gallery__trigger,
.mfn-product-gallery-grid .woocommerce-product-gallery__trigger,
.mfn-quick-view .woocommerce-product-gallery__trigger{
  pointer-events: none !important;
}

/* =========================
   1) Podstawowe tło pod miniaturami (biały podkład)
   ========================= */
.woocommerce ul.products li.product a img,
.woocommerce ul.products li.product a img.secondary-image,
.woocommerce ul.products li.product .hover-img,
.shop_slider .image_frame img,
.shop_slider .image_wrapper img,
.shop_slider .woocommerce-loop-product__link img,
.shop_slider .woocommerce-loop-product__link img.secondary-image,
.shop_slider .woocommerce-loop-product__link .hover-img {
  background: #FFFFFF !important;
}
.shop_slider .image_frame,
.shop_slider .image_wrapper,
.woocommerce ul.products li.product .image_wrapper {
  background: #FFFFFF !important;
}
.shop_slider img.hidden_photo {
  background: #FFFFFF !important;
  display: block;
}

/* =====================================================
   2) PORÓWNANIE TKANIN – checkboxy, pasek na dole, modal
   ===================================================== */

/* Każdy kafelek galerii musi mieć position:relative żeby można było wkleić checkbox */
.mfn-gallery .image_frame,
.gallery .gallery-item {
  position: relative;
}

/* przycisk „porównaj” na kafelku */
.gc-pick{
  position:absolute;
  top:8px;
  right:8px;
  z-index:10010;
  pointer-events:auto;

  display:inline-flex;
  gap:.35rem;
  align-items:center;

  background:rgba(255,255,255,.92);
  border-radius:6px;
  padding:.35rem .45rem;
  box-shadow:0 1px 6px rgba(0,0,0,.15);

  font:500 12px/1 system-ui,-apple-system,Segoe UI,Roboto,Arial;
}
.gc-pick input{
  -webkit-appearance: checkbox !important;
  appearance: checkbox !important;
  opacity: 1 !important;
  visibility: visible !important;
  position: static !important;
  transform: none !important;
  width:14px !important;
  height:14px !important;
  margin:0 !important;
  pointer-events:auto !important;
}
.gc-pick span{
  user-select:none;
  line-height:1;
}

/* Upewnij się, że overlay Betheme (maski, linki, opisy) nie przykryje naszego checkboxa */
.mfn-gallery .image_frame .image_wrapper .image_links,
.mfn-gallery .image_frame .image_wrapper .mask,
.mfn-gallery .image_frame .desc {
  z-index:1 !important;
}

/* zaznaczony kafelek (ramka na próbce po dodaniu do porównania) */
.image_frame.gc-selected img,
.gallery .gallery-item.gc-selected img{
  outline:3px solid #c1a36a;
  outline-offset:-3px;
}

/* Pasek u dołu ekranu */
#gc-bar{
  position:fixed;
  left:50%;
  transform:translateX(-50%);
  bottom:18px;
  z-index:10020;

  display:flex;
  gap:.6rem;
  align-items:center;

  background:#fff;
  border:1px solid #ddd;
  border-radius:999px;
  padding:.5rem .75rem;
  box-shadow:0 8px 24px rgba(0,0,0,.15);
}
#gc-bar button{
  appearance:none;
  border:0;
  border-radius:999px;
  padding:.55rem .9rem;
  font-weight:600;
  cursor:pointer;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial;
  font-size:13px;
  line-height:1.2;
}
#gc-open[disabled]{
  opacity:.45;
  cursor:not-allowed;
}
#gc-open{
  background:#111;
  color:#fff;
}
#gc-clear{
  background:#f2f2f2;
  color:#333;
}

/* Modal z siatką porównania */
#gc-modal[aria-hidden="true"]{
  display:none;
}
#gc-modal{
  position:fixed;
  inset:0;
  z-index:10030;
}
#gc-modal .gc-backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.5);
}
#gc-modal .gc-dialog{
  position:relative;
  margin:4vh auto;
  background:#fff;
  width:min(1000px,92vw);
  border-radius:16px;
  padding:18px 18px 12px;
  z-index:1;
  box-shadow:0 24px 48px rgba(0,0,0,.35);
  max-height:92vh;
  overflow:auto;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial;
}
#gc-modal h3{
  margin:0 0 .75rem;
  font-size:16px;
  line-height:1.4;
  font-weight:600;
  color:#000;
}

/* przycisk zamknięcia (X) */
#gc-modal .gc-close{
  position:absolute;
  right:12px;
  top:10px;
  font-size:28px;
  font-weight:700;
  line-height:1;
  color:#333;
  background:none;
  border:0;
  cursor:pointer;
}

/* siatka miniaturek w modalu */
#gc-grid{
  display:grid;
  gap:14px;
  margin-top:16px;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
}
.gc-item{
  border:1px solid #eee;
  border-radius:12px;
  overflow:hidden;
  background:#fafafa;
  cursor:grab;
}
.gc-item:active{
  cursor:grabbing;
}
.gc-item img{
  width:100%;
  height:180px;
  object-fit:cover;
  display:block;
  background:#fff;
  border-bottom:1px solid #eee;
}
.gc-item .gc-caption{
  padding:8px 10px;
  font-size:13px;
  text-align:center;
  line-height:1.4;
  color:#000;
  word-break:break-word;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial;
}

/* stopka modala (przycisk PDF) */
.gc-footer{
  display:flex;
  justify-content:flex-end;
  margin-top:14px;
}
#gc-print{
  background:#65514C;
  color:#fff;
  border:0;
  border-radius:10px;
  padding:.6rem 1rem;
  font-weight:600;
  cursor:pointer;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial;
  font-size:13px;
  line-height:1.2;
}

/* blokada scrolla body gdy modal otwarty */
.gc-no-scroll{
  overflow:hidden;
}