/* Original scenic artwork shared by every product page. */
body[data-product-scene] {
    position: relative;
    isolation: isolate;
    background: #080808;
}

body[data-product-scene]::before {
    content: none;
}

.product-backdrop {
    position: absolute;
    inset: 0 0 auto;
    z-index: -1;
    display: block;
    height: clamp(720px, 66vw, 1120px);
    overflow: hidden;
    pointer-events: none;
    user-select: none;
}

.product-backdrop img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 40%;
}

.product-backdrop::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, #08080838 0%, #08080855 24%, #08080899 58%, #080808eb 86%, #080808 100%),
        linear-gradient(90deg, #08080870 0%, #08080830 48%, #08080810 100%);
}

body[data-product-scene] .main-content {
    padding-top: 184px;
}

body[data-product-scene] :is(.product-heading, .tlou-heading) h1 {
    text-shadow: 0 2px 24px #0009;
}

body[data-product-scene] .product-intro {
    color: #c7ccd2;
    text-shadow: 0 1px 12px #000;
}

body[data-product-scene] :is(.product-status, .tlou-online) {
    backdrop-filter: blur(12px);
}

body[data-product-scene] :is(.screenshots-section, .purchase-card, .description-section, .video-section) {
    background: rgba(16, 18, 20, .94);
    border-color: rgba(255, 255, 255, .12);
    box-shadow: 0 16px 48px #0003;
}

@media (max-width: 767px) {
    .product-backdrop {
        height: 680px;
    }

    .product-backdrop img {
        object-position: 60% top;
    }

    .product-backdrop::after {
        background: linear-gradient(180deg, #08080855 0%, #08080888 38%, #080808cc 72%, #080808 100%);
    }

    body[data-product-scene] .main-content {
        padding-top: 140px;
    }
}