/* ================================================================
   Product Gallery — Bricks Custom Element  v1.2.0
   /wp-content/themes/CHILD/bricks-elements/product-gallery.css
   ================================================================ */

/* ── Zmienne ──────────────────────────────────────────────────── */
.pg-wrapper {
    --pg-active-color : #1a1a1a;
    --pg-main-bg      : #fff;
    --pg-gap          : 8px;

    display        : flex;
    flex-direction : column;
    gap            : var(--pg-gap);
    overflow       : visible;
}

/* ── Główny obraz ─────────────────────────────────────────────── */
.pg-main-wrap {
    position        : relative;
    width           : 100%;
    aspect-ratio    : var(--pg-aspect-ratio, 4/3);
    overflow        : hidden;
    background      : var(--pg-main-bg);
    cursor          : zoom-in;
    display         : flex;
    align-items     : center;
    justify-content : center;
}

.pg-main-img {
    max-width   : 100%;
    max-height  : 100%;
    width       : auto;
    height      : auto;
    display     : block;
    margin      : auto;
    transition  : all 0.5s ease-in-out;
}

/* Hover overlay — usunięte */
.pg-main-overlay { display: none; }
.pg-zoom-icon    { display: none; }

/* ── Slider thumbnailów ───────────────────────────────────────── */

/* Wrapper — relative, overflow visible żeby strzałki absolute były widoczne */
.pg-thumbs-wrap {
    position   : relative;
    width      : 100%;
    min-height : 100px;
    overflow   : visible;
}

/* Viewport — kadruje, ukrywa przelew */
.pg-thumbs-viewport {
    overflow   : hidden;
    flex-shrink: 0;
    /* szerokość ustawia JS: n * 100px + (n-1) * gap */
}

/* Strzałki — bez tła, 18px klikalny obszar, wyśrodkowane pionowo */
.pg-slider-btn {
    position        : absolute;
    top             : 50%;
    transform       : translateY(-50%);
    width           : 18px;
    height          : 100%;
    max-height      : 100px;
    background      : none;
    border          : none;
    border-radius   : 0;
    outline         : none;
    cursor          : pointer;
    display         : flex;
    align-items     : center;
    justify-content : center;
    padding         : 0;
    color           : #555;
    transition      : color 0.5s ease-in-out;
    z-index         : 2;
}

.pg-slider-prev { left: 0; }
.pg-slider-next { right: 0; }

.pg-slider-btn:hover { color: var(--brown); }
.pg-slider-btn:focus { outline: none; box-shadow: none; }

.pg-slider-btn svg {
    width        : 30px;
    height       : 30px;
    flex-shrink  : 0;
    display      : block;
    fill         : none;
    stroke       : currentColor;
    stroke-width : 2;
}

/* Track — przesuwa się przez transform; gap ustawia JS */
.pg-thumbs {
    display     : flex;
    transition  : transform 0.5s ease-in-out;
    will-change : transform;
    cursor      : grab;
    user-select : none;
}

.pg-thumbs.is-dragging {
    cursor     : grabbing;
    transition : none;
}

/* Pojedynczy thumbnail — rozmiar ustawia JS (min 100px, rośnie proporcjonalnie) */
.pg-thumb {
    flex-shrink   : 0;
    width         : 100px;  /* fallback zanim JS wliczy */
    height        : 100px;
    overflow      : hidden;
    border        : none;
    border-radius : 0;
    padding       : 0;
    background    : #fff;
    cursor        : pointer;
    outline       : none;
    opacity       : 0.5;
    transition    : opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
}

.pg-thumbs.is-dragging .pg-thumb { pointer-events: none; }

.pg-thumb:focus,
.pg-thumb:focus-visible { outline: none; box-shadow: none; }

.pg-thumb:hover,
.pg-thumb.is-active { opacity: 1; }

.pg-thumb img {
    width          : 100%;
    height         : 100%;
    object-fit     : cover;
    display        : block;
    transition     : all 0.5s ease-in-out;
    pointer-events : none;
    -webkit-user-drag : none;
}

.pg-thumb:hover img { transform: scale(1.06); }

/* ── Brak zdjęć ───────────────────────────────────────────────── */
.pg-empty {
    padding    : 32px;
    text-align : center;
    color      : #999;
    font-size  : 14px;
    border     : 2px dashed #ddd;
}

/* ================================================================
   LIGHTBOX FULLSCREEN
   ================================================================ */

.pg-lb {
    position       : fixed;
    inset          : 0;
    z-index        : 999999;
    background     : rgba(0,0,0,0.9);
    display        : flex;
    flex-direction : column;
    opacity        : 0;
    transition     : opacity 0.3s ease;
    touch-action   : none;
}

.pg-lb[hidden] { display: none !important; }
.pg-lb.is-open { opacity: 1; }

/* Górny pasek */
.pg-lb-topbar {
    display         : flex;
    align-items     : center;
    justify-content : space-between;
    padding         : 16px 20px;
    flex-shrink     : 0;
}

.pg-lb-counter {
    color                : rgba(255,255,255,0.6);
    font-size            : 14px;
    font-variant-numeric : tabular-nums;
    letter-spacing       : 0.04em;
}

.pg-lb-close {
    width           : 44px;
    height          : 44px;
    background      : rgba(255,255,255,0.1);
    border          : none;
    border-radius   : 100%;
    outline         : none;
    color           : #fff;
    cursor          : pointer;
    display         : flex;
    align-items     : center;
    justify-content : center;
    padding         : 11px;
    transition      : all 0.5s ease-in-out;
}

.pg-lb-close:focus { outline: none; }
.pg-lb-close:hover { background: rgba(255,255,255,0.2); transform: rotate(90deg); }
.pg-lb-close svg   { width: 100%; height: 100%; }

/* Strefa główna */
.pg-lb-stage {
    flex            : 1;
    display         : flex;
    align-items     : center;
    justify-content : center;
    position        : relative;
    min-height      : 0;
    padding         : 0 70px;
}

.pg-lb-img-wrap {
    display        : flex;
    flex-direction : column;
    align-items    : center;
    gap            : 12px;
    max-width      : 100%;
    max-height     : 100%;
}

.pg-lb-img {
    max-width     : 100%;
    max-height    : calc(100vh - 200px);
    object-fit    : contain;
    display       : block;
    border-radius : 0;
    transition    : all 0.5s ease-in-out;
    user-select   : none;
}

.pg-lb-img.is-switching { opacity: 0; transform: scale(0.97); }

.pg-lb-caption {
    color       : rgba(255,255,255,0.65);
    font-size   : 13px;
    text-align  : center;
    margin      : 0;
    max-width   : 600px;
    line-height : 1.5;
}
.pg-lb-caption:empty { display: none; }

/* Strzałki lightboxa */
.pg-lb-arrow {
    position        : absolute;
    top             : 50%;
    transform       : translateY(-50%);
    width           : 50px;
    height          : 50px;
    background      : rgba(255,255,255,0.1);
    border          : none;
    border-radius   : 100%;
    outline         : none;
    color           : #fff;
    cursor          : pointer;
    display         : flex;
    align-items     : center;
    justify-content : center;
    padding         : 13px;
    transition      : all 0.5s ease-in-out;
}

.pg-lb-arrow:focus { outline: none; }
.pg-lb-arrow svg   { width: 100%; height: 100%; }

.pg-lb-prev { left: 12px; }
.pg-lb-next { right: 12px; }

.pg-lb-prev:hover { background: rgba(255,255,255,0.2); transform: translateY(-50%) translateX(-3px); }
.pg-lb-next:hover { background: rgba(255,255,255,0.2); transform: translateY(-50%) translateX(3px); }

.pg-lb[data-count="1"] .pg-lb-arrow { display: none; }

/* Dolny pasek thumbnailów w lightboxie */
.pg-lb-thumbbar {
    flex-shrink : 0;
    padding     : 12px 20px 18px;
    overflow    : hidden;
}

.pg-lb-thumbtrack {
    display         : flex;
    align-items     : center;
    justify-content : center;
    gap             : 6px;
    overflow-x      : auto;
    padding-bottom  : 4px;
    scrollbar-width : thin;
    scrollbar-color : rgba(255,255,255,0.2) transparent;
}

.pg-lb-thumbtrack::-webkit-scrollbar       { height: 3px; }
.pg-lb-thumbtrack::-webkit-scrollbar-track { background: transparent; }
.pg-lb-thumbtrack::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.25); }

.pg-lb-thumb {
    flex-shrink      : 0;
    width            : 64px;
    height           : 64px;
    overflow         : hidden;
    border           : none;
    border-radius    : 0;
    outline          : none;
    padding          : 0;
    background       : #fff;
    background-color : #fff;
    cursor           : pointer;
    transition       : all 0.5s ease-in-out;
    opacity          : 0.5;
}

.pg-lb-thumb:focus     { outline: none; }
.pg-lb-thumb:hover     { opacity: 0.85; transform: translateY(-2px); }
.pg-lb-thumb.is-active { opacity: 1; }

.pg-lb-thumb img {
    width          : 100%;
    height         : 100%;
    object-fit     : cover;
    display        : block;
    pointer-events : none;
}

.pg-lb[data-count="1"] .pg-lb-thumbbar { display: none; }

/* ── Responsive ───────────────────────────────────────────────── */
@media (max-width: 640px) {
    .pg-lb-stage  { padding: 0 50px; }
    .pg-lb-prev   { left: 4px; }
    .pg-lb-next   { right: 4px; }
    .pg-lb-thumb  { width: 52px; height: 52px; }
    .pg-lb-img    { max-height: calc(100vh - 220px); }
}