/* Galeria zdjęć produktu (karuzela + lightbox) — używana na stronach modeli */
.gallery { width: 100%; }
/* opcjonalnie na <div class="gallery" style="--gallery-ratio: 3 / 1; --gallery-thumb-fit: contain"> dla bardzo szerokich zdjęć */

.gallery-stage {
    position: relative;
    aspect-ratio: var(--gallery-ratio, 2 / 1);
    background: #fff;
    border: 1px solid #eee;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    touch-action: pan-y;
}

.gallery-main-img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    cursor: zoom-in;
    display: block;
}

.gallery-arrow,
.gallery-zoom {
    position: absolute;
    z-index: 2;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 50%;
    background: rgba(22, 25, 37, 0.65);
    color: #fff;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.gallery-arrow:hover,
.gallery-zoom:hover { background: #00B200; }

.gallery-prev { left: 10px; top: 50%; transform: translateY(-50%); }
.gallery-next { right: 10px; top: 50%; transform: translateY(-50%); }
.gallery-zoom { right: 10px; top: 10px; width: 34px; height: 34px; font-size: 16px; }

.gallery-thumbs {
    display: flex;
    gap: 10px;
    margin-top: 12px;
    overflow-x: auto;
    padding-bottom: 4px;
}

.gallery-thumb {
    flex: 0 0 auto;
    width: 84px;
    height: 56px;
    padding: 0;
    border: 2px solid transparent;
    border-radius: 6px;
    background: #fff;
    overflow: hidden;
    cursor: pointer;
    opacity: 0.65;
    transition: opacity 0.2s, border-color 0.2s;
}

.gallery-thumb img {
    width: 100%;
    height: 100%;
    object-fit: var(--gallery-thumb-fit, cover);
    display: block;
}

.gallery-thumb:hover { opacity: 1; }
.gallery-thumb.active { opacity: 1; border-color: #00B200; }

/* LIGHTBOX */
.lightbox {
    position: fixed;
    inset: 0;
    z-index: 3000;
    background: rgba(10, 12, 20, 0.92);
    display: none;
    align-items: center;
    justify-content: center;
}

.lightbox.open { display: flex; }

.lightbox-img {
    max-width: 92vw;
    max-height: 86vh;
    object-fit: contain;
    display: block;
    box-shadow: 0 8px 40px rgba(0,0,0,0.5);
}

.lightbox-btn {
    position: absolute;
    border: none;
    background: rgba(255,255,255,0.12);
    color: #fff;
    cursor: pointer;
    border-radius: 50%;
    width: 48px;
    height: 48px;
    font-size: 26px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.lightbox-btn:hover { background: #00B200; }
.lightbox-close { top: 18px; right: 18px; }
.lightbox-prev { left: 18px; top: 50%; transform: translateY(-50%); }
.lightbox-next { right: 18px; top: 50%; transform: translateY(-50%); }

.lightbox-counter {
    position: absolute;
    bottom: 18px;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255,255,255,0.8);
    font-size: 14px;
}

@media (max-width: 560px) {
    .gallery-arrow { width: 34px; height: 34px; font-size: 18px; }
    .gallery-thumb { width: 70px; height: 48px; }
    .lightbox-btn { width: 40px; height: 40px; font-size: 22px; }
}

/* ===== Układ sekcji produktu: zawsze 50 / 50 =====
   "1fr 1fr" pozwala kolumnie rosnąć do szerokości zawartości (miniatury, szerokie zdjęcie),
   dlatego szerokość się różniła. minmax(0, 1fr) wymusza dokładnie równe kolumny.
   Plik ładuje się po stylach strony, więc te reguły działają na wszystkich stronach modeli. */
.product-hero-grid,
.profile-grid,
.item-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.product-hero-grid > *,
.profile-grid > *,
.item-grid > * {
    min-width: 0;
}

/* Telefon / tablet: najpierw tekst, pod nim zdjęcia */
@media (max-width: 900px) {
    .product-hero-grid,
    .profile-grid,
    .item-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 36px;
    }

    .product-hero-body,
    .profile-body,
    .item-body {
        order: -1;
    }
}

/* Jedno zdjęcie: bez strzałek, miniatur i licznika */
.gallery.is-single .gallery-arrow,
.gallery.is-single .gallery-thumbs { display: none; }
.lightbox.is-single .lightbox-prev,
.lightbox.is-single .lightbox-next,
.lightbox.is-single .lightbox-counter { display: none; }

/* PRODUCT VIDEO (local files, no consent needed) */
.product-video-wrap { padding: 50px 0; background: #fff; }
.product-video-wrap h2 { font-size: 28px; font-weight: 600; color: #161925; text-align: center; margin-bottom: 30px; }
.product-video { max-width: 900px; margin: 0 auto; }
.product-video video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: #161925; border-radius: 8px; }
@media (max-width: 768px) { .product-video-wrap { padding: 30px 0; } }

/* PHOTO PLACEHOLDER (until a real photo is available) */
.photo-placeholder { aspect-ratio: 16 / 9; background: #f3f4f5; border: 1px solid #eee; border-radius: 8px; overflow: hidden; }
.photo-placeholder img { display: block; width: 100%; height: 100%; object-fit: cover; }

.product-video + .product-video { margin-top: 24px; }