.pg-wrap {
    --pg-main-ratio: 4 / 3;
    --pg-thumb-ratio: 4 / 3;
    --pg-main-fit: cover;
    --pg-thumb-fit: cover;
    --pg-main-radius: 8px;
    --pg-thumb-radius: 6px;
    --pg-nav-bg: #ffffff;
    --pg-nav-color: #333333;
}

/* ---------- Glavna slika ---------- */

.pg-main {
    border-radius: var(--pg-main-radius);
}

.pg-main .swiper-slide {
    aspect-ratio: var(--pg-main-ratio);
    border-radius: var(--pg-main-radius);
    overflow: hidden;
}

.pg-main img {
    width: 100%;
    height: 100% !important;
    object-fit: var(--pg-main-fit);
    display: block;
}

/* Originalno razmerje – višina sledi sliki */
.pg-main-auto .pg-main .swiper-slide {
    aspect-ratio: auto;
}

.pg-main-auto .pg-main img {
    height: auto;
}

/* ---------- Thumbnaili ---------- */

.pg-thumbs {
    margin-top: 10px;
}

.pg-thumbs .swiper-slide {
    aspect-ratio: var(--pg-thumb-ratio);
    border-radius: var(--pg-thumb-radius);
    overflow: hidden;
    cursor: pointer;
	border: 1px solid #15110D !important;
}

.pg-thumbs img {
    width: 100%;
    height: 100%;
    object-fit: var(--pg-thumb-fit);
    opacity: .5;
    transition: opacity .2s ease;
    display: block;
}

.pg-thumb-auto .pg-thumbs .swiper-wrapper {
    align-items: flex-start;
}

.pg-thumb-auto .pg-thumbs .swiper-slide {
    aspect-ratio: auto;
}

.pg-thumb-auto .pg-thumbs img {
    height: auto;
}

.pg-thumbs .swiper-slide-thumb-active img,
.pg-thumbs .swiper-slide:hover img {
    opacity: 1;
}

/* ---------- Puščice ---------- */

.pg-main .swiper-button-prev,
.pg-main .swiper-button-next {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--pg-nav-bg);
    background: color-mix(in srgb, var(--pg-nav-bg) 70%, transparent);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
    opacity: 0;
    transition: opacity .25s ease, background .25s ease;
}

.pg-main:hover .swiper-button-prev,
.pg-main:hover .swiper-button-next,
.pg-main .swiper-button-prev:focus-visible,
.pg-main .swiper-button-next:focus-visible {
    opacity: 1;
}

/* Na napravah brez hoverja so puščice vedno vidne */
@media (hover: none) {
    .pg-main .swiper-button-prev,
    .pg-main .swiper-button-next {
        opacity: 1;
    }
}

.pg-main .swiper-button-prev:hover,
.pg-main .swiper-button-next:hover {
    background: var(--pg-nav-bg);
    background: color-mix(in srgb, var(--pg-nav-bg) 95%, transparent);
}

.pg-main .swiper-button-prev::after,
.pg-main .swiper-button-next::after {
    font-size: 14px;
    font-weight: 700;
    color: var(--pg-nav-color);
}

.pg-main .swiper-button-disabled {
    pointer-events: none;
}