/* Shared image sliders and related cards on product and project detail pages. */
.detail-main-swiper .swiper-wrapper,
.detail-main-swiper .swiper-slide {
    height: 100%;
}

.detail-main-swiper.swiper {
    min-width: 0;
    width: 100%;
    max-width: 100%;
}

.detail-main-swiper .swiper-slide {
    position: relative;
}

.detail-main-swiper .swiper-slide img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.pj-gallery__main .pj-expand {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 2;
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(16, 24, 27, .78);
    color: #fff;
    cursor: zoom-in;
    transition: background .2s ease;
}

.pj-gallery__main .pj-expand:hover {
    background: var(--pj-red);
}

.detail-thumbs-swiper.swiper {
    min-width: 0;
    width: 100%;
    max-width: 100%;
    display: block;
    overflow: hidden;
    scroll-behavior: auto;
}

.detail-thumbs-swiper .swiper-wrapper {
    display: flex;
    gap: 0;
}

.detail-thumbs-swiper .swiper-slide {
    flex: 0 0 auto;
    height: 70px;
}

.detail-thumbs-swiper .swiper-slide.is-active {
    border-color: #f34635;
}

.detail-thumbs-swiper .swiper-slide:focus-visible,
.detail-main-swiper .pd-expand:focus-visible,
.detail-main-swiper .pj-expand:focus-visible {
    outline: 2px solid #f34635;
    outline-offset: 2px;
}

.detail-tabs .detail-panel-gallery.swiper {
    display: block;
    overflow: hidden;
    padding: 2px;
    scroll-snap-type: none;
}

.detail-tabs .detail-panel-gallery .swiper-wrapper {
    display: flex;
    gap: 0;
}

.detail-tabs .detail-panel-gallery .swiper-slide {
    flex: 0 0 auto;
    height: 190px;
    scroll-snap-align: none;
}

.detail-gallery-nav {
    display: flex;
    align-items: center;
    gap: 7px;
}

.detail-gallery-nav button {
    width: 34px;
    height: 34px;
    padding: 0;
    display: grid;
    place-items: center;
    border: 1px solid #d9dddf;
    border-radius: 50%;
    background: #fff;
    color: #202628;
    cursor: pointer;
    transition: border-color .2s ease, color .2s ease, background .2s ease;
}

.detail-gallery-nav button:hover:not(:disabled) {
    border-color: #f34635;
    color: #f34635;
    background: #fff8f7;
}

.detail-gallery-nav button:disabled,
.pd-thumb-nav:disabled,
.pj-gallery__controls>button:disabled {
    opacity: .35;
    cursor: default;
}

.detail-gallery-nav button:focus-visible {
    outline: 2px solid #f34635;
    outline-offset: 2px;
}

.detail-gallery-nav svg {
    width: 17px;
    height: 17px;
}

.pd-related article,
.pj-related article {
    overflow: hidden;
    border: 1px solid #dde1e2;
    border-radius: 6px;
    background: #fff;
    box-shadow: 0 3px 12px rgba(17, 23, 25, .085);
    transition: border-color .28s ease,
        transform .3s cubic-bezier(.2, .8, .2, 1),
        box-shadow .3s cubic-bezier(.2, .8, .2, 1);
}

.pd-related article:hover,
.pj-related article:hover,
.pd-related article:focus-within,
.pj-related article:focus-within {
    border-color: rgba(243, 70, 53, .48);
    transform: translateY(-3px);
    box-shadow: 0 9px 20px rgba(17, 23, 25, .11),
        0 2px 6px rgba(17, 23, 25, .055);
}

.pd-related article>.pd-related__image,
.pj-related article>a:first-child {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: #f3f4f4;
}

.pd-related article>.pd-related__image img,
.pj-related article>a:first-child img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform .5s cubic-bezier(.2, .8, .2, 1);
}

.pd-related article:hover>.pd-related__image img,
.pj-related article:hover>a:first-child img {
    transform: scale(1.055);
}

.pd-related h3,
.pj-related h3 {
    font-size: 14px;
    line-height: 1.4;
}

@media (max-width: 620px) {
    .detail-tabs .detail-panel-gallery .swiper-slide {
        height: 190px;
    }

    .pd-related article>.pd-related__image,
    .pj-related article>a:first-child {
        height: auto;
    }
}