.product-footer, .social-icons, .product_meta, .ux-swatch.disabled, .price-wrapper{ 
  display:none!important;
}
.prod_gallery{
  display:flex;
  flex-wrap:wrap;
  justify-content: flex-start;
  gap:1%;
}

.single_prod_img{
  width:100%;
}
.single_prod{
  display:flex;
  align-items:center;
  flex-direction:column;
  width:24%;
}
.single_prod_img:hover{
  cursor:pointer;
}

.red_button{
  position:relative;
  margin-top:10px;
  margin-right:0;
}

@media screen and (max-width: 800px) {
  .single_prod{
    width:48%;
  }
  .prod_gallery{
    justify-content: space-between;
  }
}

#preview {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 9999;
  justify-content: center;
  align-items: center;
}

#preview img {
  max-width: 95%;
  max-height: 95%;
}


#loading_screen{
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 9999;
  justify-content: center;
  align-items: center;
}

#laoding_screen_text {
  background-color: white;
  padding: 20px;
  width: 400px;
  height: 250px;
  /* To wyśrodkuje kółko i tekst wewnątrz białego pudełka */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 20px; /* Odstęp między kółkiem a napisem */
  border-radius: 8px; /* Opcjonalnie: ładniejsze rogi */
}

/* Kółeczko ładowania */
.spinner {
  border: 8px solid #f3f3f3; /* Jasnoszary kolor tła kółka */
  border-top: 8px solid #3498db; /* Niebieski kolor, który się kręci */
  border-radius: 50%; /* To sprawia, że kwadrat staje się kołem */
  width: 60px;
  height: 60px;
  animation: spin 1s linear infinite; /* Animacja obrotu */
}

/* Definicja animacji obrotu */
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.ux-swatch{
  cursor: pointer;
}