/* Зовнішній шар */
#modal-overlay {
  position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(0,0,0,0.5); opacity: 0; visibility: hidden;
  transition: opacity .3s, visibility .3s; z-index: 1000;
}
#modal-overlay.show {
  opacity: 1; visibility: visible;
}

/* Вікно */
#modal-window {
  position: fixed; top: 50%; left: 50%;
  transform: translate(-50%,-50%) scale(0.8);
  background: #fff; width: 90%; max-width: 800px; max-height: 90vh;
  overflow-y: auto; padding: 20px; opacity: 0; visibility: hidden;
  transition: opacity .3s, visibility .3s, transform .3s; z-index: 1001;
  border-radius: 8px;
}
#modal-window.show {
  opacity: 1; visibility: visible; transform: translate(-50%,-50%) scale(1);
}

/* Кнопки керування */
#modal-back, #modal-close {
  position: absolute; top: 12px; background: none; border: none;
  font-size: 1.5rem; cursor: pointer; z-index: 1002;
}
#modal-back { left: 12px; }
#modal-close { right: 12px; }

/* Контент */
.modal-body { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 40px; }
.modal-gallery { flex: 1; min-width: 200px; position: relative; }
.modal-main-img {
  width: 100%; border: 1px solid #ddd; border-radius: 4px; cursor: zoom-in;
}
.modal-nav {
  position: absolute; top: 50%; left: 0; width: 100%;
  display: flex; justify-content: space-between; transform: translateY(-50%);
}
.modal-nav button {
  background: rgba(255,255,255,0.8); border: none;
  font-size: 1.8rem; cursor: pointer; border-radius: 50%;
  width: 36px; height: 36px;
}
.modal-thumbs {
  display: flex; gap: 8px; margin-top: 12px; justify-content: center;
}
.modal-thumbs img {
  width: 56px; height: 56px; object-fit: cover; cursor: pointer;
  border: 2px solid transparent; border-radius: 4px;
}
.modal-thumbs img.active { border-color: #e91e63; }

.modal-details { flex: 1; min-width: 200px; }
.modal-details h2 { margin-top: 0; font-size: 1.5rem; }
.modal-prices .old-price {
  text-decoration: line-through; color: #777; margin-right: 8px;
}
.modal-prices .price {
  font-weight: bold; color: #e91e63; font-size: 1.2rem;
}
.modal-size { margin: 12px 0; }
.add-to-cart {
  display:inline-block;background:#e91e63;color:#fff;
  padding:10px 20px;border:none;border-radius:25px;
  font-size:1rem;cursor:pointer;transition:background .3s;
}
.add-to-cart:hover { background:#c6285a; }

/* Zoom overlay */
#zoom-overlay {
  position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(0,0,0,0.9); opacity: 0; visibility: hidden;
  display: flex; justify-content: center; align-items: center;
  transition: opacity .3s, visibility .3s; z-index: 1002;
}
#zoom-overlay.show {
  opacity: 1; visibility: visible;
}
#zoom-overlay img {
  max-width: 90%; max-height: 90%; cursor: zoom-out;
}
#zoom-close {
  position: absolute; top: 16px; right: 16px;
  background:none;border:none;color:#fff;font-size:2rem;cursor:pointer;
}

/* Added grid layout for products */
.products-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 40px;
}
.product-card {
    width: 100%;
}
/* Responsive: 2 columns on smaller screens */
@media (max-width: 768px) {
    .products-container {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Відступи між абзацами в описі товару */
.product-description p {
  margin: 0 0 1em;
  line-height: 1.5;
}