@media only screen and (min-width: 768px) {
    .product-page.page {
        padding-top: 0;
        padding-bottom: 0;
    }
}

.product-page > * {
    grid-column: 1/-1;
}
@media only screen and (min-width: 768px) {
    .product_p-article {grid-column: -7/-1;}
}
@media only screen and (min-width: 1024px) {
    .product_p-article {grid-column: -6/-1;}
}


/*
ARTICLE
*/
.product_p-article article a {display: block;}
@media only screen and (min-width: 768px) {
    .product_p-article {
        display: flex;
        flex-direction: column;
        min-height: calc(calc(100 * var(--vh)) - 10.5rem);
        height: calc(calc(100 * var(--vh)) - 10.5rem);
        max-height: calc(calc(100 * var(--vh)) - 10.5rem);
    }
}
@media only screen and (min-width: 1024px) {
    .product_p-article {
        min-height: calc(calc(100 * var(--vh)) - 11rem);
        max-height: calc(calc(100 * var(--vh)) - 11rem);
    }

    body.os-win .product_p-article {
        margin-left: -.75rem;
    }
}

.product_p-a-header {
    position: sticky;
    top: calc(8vw + 3.6rem);
    width: 100vw;
    padding: 0 1rem .7rem;
    margin: 0 -1rem;
    background-color: white;
}
@media only screen and (min-width: 768px) {
    .product_p-a-header {
        top: 4.5rem;
        width: 50vw;
        margin: 0 -2rem;
        padding: 0 2rem 1rem;
    }
}
@media only screen and (min-width: 1024px) {
    .product_p-a-header {
        top: 5rem;
        margin: 0 -2.5rem 0;
        padding: 0 2.5rem 1rem;
        background-color: transparent;
    }
}

.product_p-a-thumbnail {
    display: flex;
    flex-direction: column;
    margin-bottom: 2.5rem;
}

.product_p-article article {
    max-width: 600px;
}

.product_p-article a {
    display: inline;
    text-decoration: underline !important;
}

.product_p-a-gallery {margin-top: 5rem;}

.product_p-a-gallery figure:not(:last-of-type) {
    margin-top: 2.5rem;
}


/*
GALLERY
*/
@media only screen and (min-width: 768px) {
    .product_p-figure {
        position: fixed;
        bottom: 6rem !important;
        left: 2rem;
        width: calc(calc(100vw - 15rem) / 12 * 5 + 4rem);
        aspect-ratio: 2/3;
    }
    .product_p-figure img {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 100%;    
        object-fit: cover;
    }

    .product_p-figure-transition {opacity: 0;}

    .product_p-figure-transition.ani-show {
        transition: opacity 1s ease;
        opacity: 1;
    }
}

@media only screen and (min-width: 1024px) {
    .product_p-figure {
        height: calc(calc(100 * var(--vh)) - 15rem - 6rem);
        width: auto;
    }
}

/* NAV */
@media only screen and (min-width: 768px) {
    .product_p-gallery-nav {
        display: flex !important;
        height: fit-content;
        margin-top: auto;
        flex-wrap: wrap;
    }
}

.product_p-gallery-nav button:not(:first-of-type) {margin-left: 1rem;}

.product_p-gallery-button {
    margin-top: 1rem;
    opacity: .25;
    transition: opacity 500ms ease;
}
.product_p-gallery-button.active {opacity: 1;}
@media (hover: hover) {
    .product_p-gallery-button:hover {opacity: 1;}
}

.product_p-gallery-button img {
    width: calc(calc(100vw - 4rem - 11rem) / 12);
    aspect-ratio: 2/3;
    object-fit: cover;
}
@media only screen and (min-width: 1024px) {
    .product_p-gallery-button img {width: calc(calc(100vw - 5rem - 9rem) / 10);}
}