.app-index {
    /**
    * The value of layout-padding will be different for different screen sizes
    * To prevent scroll bars when displaying scroll-btns in a collection
    */
    --layout-padding: 100px;
    --layout-width: calc(100% - var(--layout-padding));
    --carousel-width: 100%;
    --sl-card-body-padding: 1.25rem 1.5rem; /** 20px 24px */
    --sl-card-header-padding: var(--sl-spacing-medium) 0;
    --sl-card-header-margin: 0 1.5rem;
    --sl-card-border-radius: var(--sl-border-radius-large);
    --sl-card-header-font-weight: var(--sl-title-font-weight);
    --max-width: 1996px;
    --layout-sm-padding-top: var(--layout-sm-padding-top, var(--sl-spacing-x-large));
    --layout-margin-top: var(--layout-margin-top, var(--sl-spacing-small));

    @media (min-width: 992px) {
        --layout-padding: calc(100px + 2 * var(--sl-spacing-3x-large));
    }

    @media (max-width: 535px) {
        --layout-padding: 32px;
    }

    display: flex;
    flex-direction: column;
    min-height: 100vh;

    app-header {
        min-height: 84px;
        width: 100%;
        position: sticky;
        top: 0;
        background-color: var(--theme-header-background-color);
        z-index: var(--sl-z-index-tooltip);
    }
}

.layout-container {
    height: 100%;
    display: flex;
    justify-content: center;
    flex: 1;
    background-color: var(--theme-background-color);
    padding-bottom: 48px;
}

main {
    width: var(--layout-width);
    max-width: var(--max-width);
    z-index: 1;
}

 #routerOutlet {
    /** Extracting this element separately to animate causes a backward flickering issue */
    /** view-transition-name: page-nav; */
    padding: 0;
    min-height: 90vh; /* Reduces layout shift on slow connections */
}

#routerOutlet > * {
    width: 100% !important;
}

.pdp-page {
    width: calc(100% - var(--layout-padding));
    
    product-header.loading {
        min-height: 465px;
        display: block;

        @media (max-width: 991px) {
            min-height: 498px;
        }

        @media (max-width: 575px) {
            min-height: 438px;
        }
    }

    product-event-viewer.loading {
        display: block;
        min-height: 308px;
    }

    screenshot-viewer.loading {
        display: block;
        min-height: 254px;
    }

    product-recommendation.loading {
        display: block;
        min-height: 629px;
    }
    
    /** For Tencent Mini Game */
    [is-tencent-mini-game] .image-logo-container,
    [is-tencent-mini-game] product-header::part(icon-container) {
        position: relative;
        display: inline-block;
    }

    [is-tencent-mini-game] .image-logo-container::after,
    [is-tencent-mini-game] product-header::part(icon-container)::after {
        content: '';
        position: absolute;
        bottom: 0px;
        right: 0px;
        width: 33%;
        aspect-ratio: 1;
        background: url('/assets/icons/tencent-mini-game-icon.svg') center/contain no-repeat;
        border-radius: 4px;
    }

    .image-logo-container, .logo-container {
        position: relative;
        height: 100%;
        width: auto;
    }

    .logo-container {
        cursor: pointer;
    }

    .hero-img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 500px;
        background-size: 100% auto;
        background-position: center;
        background-repeat: no-repeat;
        filter: blur(40px) opacity(0.8);

        &::before {
            content: "";
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            background: var(--theme-background-color);
            opacity: 0.4;
        }

        &::after {
            content: "";
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            background-image: linear-gradient(to bottom, var(--theme-background-color), transparent 30%),
            linear-gradient(to top, var(--theme-background-color), transparent 30%),
            linear-gradient(to right, var(--theme-background-color), transparent 50%),
            linear-gradient(to left, var(--theme-background-color), transparent 100%);
        }
    }

    .hero-img-container .loading {
        width: 100%;
        aspect-ratio: 16 / 9;
        background-color: var(--sl-color-gray-50);
    }

    /** details-container is the full width section that contains the centered div that shows all app details. */
    .details-container {
        width: 100%;
        position: relative;
        box-sizing: border-box;
        padding: 0 38px;

        @media (max-width: 1024px) {
            padding: 0;
        }
    }

    /** Child of details-container that takes up most of the width and shows app detail sections. */
    .details {
        display: flex;
        align-items: stretch;
        --right-side: max(338px, 22%);
        --side-spacing: 64px;
        --left-side: calc(100% - var(--right-side) - var(--side-spacing));
        --transition: all ease-in-out var(--sl-transition-medium);
        gap: var(--side-spacing);

        /** On medium screens and smaller, we switch to single column */
        @media (max-width: 1199px) {
            flex-direction: column;
            --side-spacing: var(--sl-spacing-large);
        }

        .left-side {
            display: flex;
            flex-direction: column;
            gap: var(--sl-spacing-large);
            transition: var(--transition);

            @media (max-width: 1199px) {
                width: 100%;
            }

            @media (min-width: 1200px) {
                width: var(--left-side);
            }
        }

        .product-recommendation {
            transition: var(--transition);
            align-self: flex-start;
            position: sticky;
            top: 115px;
            width: 100%;

            @media (min-width: 1200px) {
                overflow: visible;
                width: var(--right-side);
            }
        }
    }

    product-collection.related-products {
        --square-and-tall-card-num: var(--related-products-num);
    }

    .app-info-container {
        /** Use a variable here; it's updated in JS due to nature of fixed position elements */
        --sticky-header-width: 100px;
        display: flex;
        gap: 2rem;
        margin: 5.625rem 0 4.25rem; /**top: 90px, bottom: 68px */
    }

    .logo {
        border-radius: var(--sl-border-radius-large);
        height: auto;
        width: 200px;
        vertical-align: middle;
    }

    .logo.view-transition {
        view-transition-name: app-logo;
    }

    .header-wrapper {
        position: absolute;
        bottom: 0;
        right: 0;
        width: 100%;
        background-color: transparent;
        height: 45px;
        border-radius: 0 0 var(--sl-border-radius-large) var(--sl-border-radius-large);
        overflow: hidden;
        transition: ease-in-out background-color 1s;
    }

    .logo-container:hover .header-wrapper {
        background-color: black;
    }

    .wide-trailer-header {
        position: absolute;
        right: -80px;
        bottom: 0px;
        padding: 10px;
        width: 100%;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-end;
        background-color: transparent;
        border: none;
        color: #FFFFFF;
        transition: ease-in-out right 0.5s, border-radius 1s;
        border-radius: 0 0 var(--sl-border-radius-large) var(--sl-border-radius-large);
    }

    [dir="rtl"] .wide-trailer-header {
        right: 70px;
    }

    .logo-container:hover .wide-trailer-header {
        right: 20%;
        opacity: 0.8;
        cursor: pointer;
        transition-delay: 0s, 0s, 0s;
    }

    [dir="rtl"] .logo-container:hover .wide-trailer-header {
        right: -20%;
    }

    .logo-caption {
        display: block;
        opacity: 0;
        visibility: hidden;
        padding-right: 5px;
        transition: ease-in-out opacity 1s, visibility 1s, transform 1s;
    }

    .logo-container:hover .logo-caption {
        opacity: 1;
        visibility: visible;
        transform: translateX(5%);
        transition-delay: 0s, 0s, 0s;
    }

    .wide-trailer-header .trailer-play {
        width: 25px;
        height: 25px;
        padding-right: 5px;
    }

    sl-skeleton.transparent {
        --color: transparent;
    }
    sl-skeleton.logo {
        width: 200px;
        height: 200px;
        flex-shrink: 0;
        --border-radius: 8px;
    }

    .app-info, .app-info-skeleton {
        display: flex;
        flex-direction: column;
        min-height: 200px;
    }

    .app-info-skeleton {
        gap: 16px;
        flex: 1;
        max-width: 500px;
    }

    .app-info h1 {
        font-weight: var(--sl-title-font-weight);
        font-size: 28px;
        margin: var(--sl-spacing-x-small) 0;
        line-height: var(--sl-line-height-denser);
    }


    .title.view-transition {
        view-transition-name: app-title;
    }

    /** Loading skeletong for empty title */
    .app-info sl-skeleton.title {
        width: 300px;
        height: 36px;
    }


    .app-info .subtitle {
        display: flex;
        align-items: center;
        gap: var(--sl-spacing-3x-small);
        font-size: var(--sl-font-size-medium);
        color: var(--sl-color-neutral-600);
        margin: 0;
        line-height: 40px;
    }

    sl-rating {
        --symbol-size: 14px;
        height: 17px;
        --symbol-color-active: var(--sl-color-neutral-500);
    }

    sl-divider {
        height: 22px;
        --spacing: var(--sl-spacing-2x-small);
        --color: #00000014;
        --width: var(--sl-panel-border-width);
    }

    sl-card {
        width: 100%;
    }

    sl-card::part(header) {
        border-color: #E6E6E6;
        margin: var(--sl-card-header-margin);
        padding: var(--sl-card-header-padding);
    }

    sl-card::part(body) {
        padding: var(--sl-card-body-padding);
    }


    .app-info sl-skeleton.subtitle {
        width: 200px;
        height: 20px;
    }


    .app-info .short-description {
        font-size: var(--sl-font-size-small);
        margin-top: 0;
    }

    .app-info .buy-box-container {
        display: flex;
        flex-direction: column;
        justify-content: end;
        height: 100%;
    }

    sl-card {
        --border-radius: var(--sl-card-border-radius);
    }

    sl-card .whats-new-text:first-of-type {
        margin-top: 0;
    }
    sl-card .whats-new-text:last-of-type {
        margin-bottom: 0;
    }

    sl-card [slot='header'] {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    sl-card [slot='header'] h2 {
        font-family: var(--body-font);
        font-weight: var(--sl-card-header-font-weight);
        font-size: 18px;
        margin: 0;
        display: inline-block;
    }

    ratings-reviews-list {
        position: relative;
    }

    [dir="rtl"] ratings-reviews-list {
        left: 0;
    }

    .show-more-btn, .see-all-btn {
        margin-top: 8px;
        margin-bottom: -16px;
    }

    .see-all-btn-related {
        left: 32px;
    }

    [dir="rtl"] .see-all-btn-related {
        left: 0;
        right: 32px;
    }

    .see-all-btn-related {
        position: relative;
        bottom: var(--sl-spacing-x-small);
    }

    @media (max-width: 1199px) {
        sl-button,  .whats-new-text {
            margin-left: 0;
        }

        ratings-reviews-list {
            left: 0;
        }
    }
    
    sl-icon-button::part(base) {
        padding-right: 0;
    }

    sl-button::part(base), p {
        font-size: 14px;
        font-weight: 400;
    }

    .publisher-link, .category-button {
        margin-left: 0;
    }

    .publisher-link::part(base), .category-button::part(base) {
        font-size: var(--sl-font-size-medium);
    }


    sl-button::part(base) {
        font-family: var(--body-font);
        font-weight: 400;
        color: var(--theme-primary-element-color);
    }

    sl-button::part(base):hover {
        color: var(--sl-color-primary-600);
    }

    .publisher-link::part(label), .category-button::part(label) {
        padding: 0;
    }

    .see-all-btn::part(label),
    .show-more-btn::part(label),
    .about-ratings-and-review::part(label) {
        /** For the "show more/show less" buttons, don't give any left padding. This allows the text to align right up to the left edge of the text above it. */
        padding: 0;
    }

    .see-all-btn::part(base):hover,
    .see-all-btn::part(base):focus,
    .show-more-btn::part(base):hover,
    .show-more-btn::part(base):focus,
    .about-ratings-and-review::part(base):hover,
    .about-ratings-and-review::part(base):focus {
        text-decoration: underline;
    }

    .reviews-age-rating-container {
        display: flex;
        gap: var(--sl-spacing-2x-small);
        flex-wrap: wrap;
        align-items: center;
    }


    sl-skeleton.reviews-age-rating-container {
        height: 76px;
        --border-radius: 8px;
    }


    .reviews-age-rating-container h3 {
        margin-bottom: var(--sl-spacing-2x-small);
        white-space: nowrap; /** No wrap here otherwise the '3.5 ⭐' header can push the star to the next line on small screens */
        text-align: center;
    }

    .rating-count {
        text-align: center;
    }

    .rating-info-icon::part(base) {
        padding-left: 0;
        font-size: var(--sl-font-size-small);
    }

    .rating-logo {
        max-height: 50px;
        width: auto;
        align-self: center;
    }

    .rating-name-link {
        color: var(--sl-color-neutral-1000);
        text-decoration: none;
    }

    .rating-name {
        font-weight: var(--sl-font-weight-semibold);
        margin-top: 0;
        margin-bottom: var(--sl-spacing-3x-small);
    }

    .rnr-dialog::part(panel) {
        width: 950px;
        min-width: 350px;
        max-height: 626px;
        background-color: #F3F3F3;
        border-radius: 8px;
    }

    .rnr-dialog::part(header) {
        border-bottom: 1px solid #00000014;
    }

    .rnr-dialog::part(overlay) {
        background-color: #00000099;
    }

    .rnr-dialog::part(title) {
        font-weight: 600;
        font-size: 18px;
        line-height: 24px;
        padding: 12px 32px;
    }

    @media (max-height: 920px) {
        .rnr-dialog::part(base) {
            align-items: baseline;
        }

        .rnr-dialog::part(panel) {
           height: calc(var(--screen-height) - 170px);
           min-height: 160px;
           margin-top: 148px;
        }
    }

    @media (max-width: 700px) and (max-height: 400px) {
        .rnr-dialog::part(base) {
            align-items: center;
        }
        .rnr-dialog::part(panel) {
            height: 92vh;
            margin-top: 0;
         }
    }

    .rnr-dialog::part(body) {
        padding: 20px 32px;
    }

    .rating-reasons {
        margin-bottom: 0;
        max-width: 300px;
        text-align: left !important; /** Marked !important to override the rule that says text-align: center for all <p> inside app details */
    }

    .promo-image {
        border-radius: var(--sl-border-radius-x-large);
        height: 80px;
        width: 150px;
        align-items: center;
    }

    .promo-container {
        display: flex;
        gap: var(--sl-spacing-large);
        text-decoration: none;
        padding: var(--sl-spacing-small);
    }

    .promo-container:hover {
        background-color: var(--sl-color-neutral-50);
    }

    .promo-content-container {
        color: var(--sl-color-neutral-1000);
    }

    .promo-title {
        margin-top: 0;
        margin-bottom: 0;
        font-weight: var(--sl-font-weight-semibold);
        font-size: 16px;
    }

    .promo-body {
        color: var(--sl-color-neutral-500);
        margin-top: var(--sl-spacing-2x-small);
    }


    /** For the chevron open/close buttons, have an animated transform.
        This allows us to animate chevron direction as its opened and closed */
    sl-icon-button[name="chevron-right"] {
        transition: transform var(--sl-transition-medium) ease-out;
    }

    sl-icon-button.chevron-opened {
        transform: rotate(90deg);
    }

    .promo-shimmer {
        --shimmer-height: 171px;
    }

    .promo-shimmer.loaded {
        margin-top: -22px;

        .promo-section {
            margin-top: 22px;
        }
    }

    .reviews-summary-shimmer {
        --shimmer-height: 171px;
    }

    .system-requirements-shimmer {
        --shimmer-height: 287px;
    }

    .reviews-list-shimmer {
        --shimmer-height: 400px;
    }

    .additional-info-shimmer {
        --shimmer-height: 595px;
    }

    .lazy-related-apps {
        min-height: 240px;
        margin-top: -44px;
    }

    .sticky-header-container {
        position: absolute;
        width: 100%;
    }

    .sticky-header {
        background-image: var(--theme-noise-image-to-linear-gradient);
        backdrop-filter: blur(100px);
        border: 1px solid var(--sl-color-gray-200);
        border-radius: var(--sl-border-radius-large);
        position: fixed;
        transition: top var(--sl-transition-medium) ease-in-out, opacity var(--sl-transition-medium) ease-in-out;
        top: 0;
        width: var(--sticky-header-width);
        opacity: 0;
        padding: var(--sl-spacing-small);
        margin-left: 8px;
        margin-right: 8px;
        box-sizing: border-box; /** So that setting the width in JS won't be affected by our padding. */
        box-shadow: var(--sl-shadow-large);
        z-index: var(--sl-z-index-drawer);
        display: flex;
        align-items: center;
        gap: var(--sl-spacing-small);
        justify-content: space-between;
        align-items: center;
    }


    .sticky-header.show {
        opacity: 0.95;
        top: 90px;
        z-index: 1;
    }

    /** The navbar on mobile is taller - account for that here. */
    @media (max-width: 911px) {
        .sticky-header.show {
            top: 138px;
        }
    }
    
    @media (max-width: 700px) and (max-height: 400px) {
        .sticky-header.show {
            top: 5px;
        }
    }

    .sticky-header:hover {
        filter: brightness(1.05);
    }

    .sticky-header img {
        border-radius: var(--sl-border-radius-large);
        max-width: 55px;
        height: auto;
    }

    .sticky-header .title {
        margin-top: 0;
        margin-bottom: 0;
        font-weight: var(--sl-font-weight-semibold);
        font-size: 18px;
    }

    .sticky-header .title-and-publisher {
        flex-grow: 2;
        flex-basis: 0;
    }

    .category-module-text {
        font-size: var(--sl-font-size-x-small);
        position: relative;
        bottom: 6px;
    }

    @media (prefers-color-scheme: dark) {
        .publisher-link::part(base), .category-button::part(base), .see-all-btn::part(base), .show-more-btn::part(base), .movie-category-module::part(base) {
            color: var(--theme-secondary-element-color) !important;
        }

        .publisher-link::part(base):hover, .category-button::part(base):hover, .see-all-btn::part(base):hover, .show-more-btn::part(base):hover {
            color: var(--theme-secondary-element-hover-color) !important;
        }

        .subtitle {
            color: #FFFFFFC8 !important;
        }

        sl-rating {
            --symbol-color-active: #FFFFFF8B !important;
        }

        sl-card::part(header) {
            border-color: #FFFFFF15 !important;
        }

        sl-divider {
            --color: #FFFFFF15 !important;
        }

        .hero-img-container::before,
        .hero-img-container::after {
            width: 80%;
        }

        .background-overlay {
            background: rgba(16, 16, 16, 0.3);
        }

        .rnr-dialog::part(panel) {
            background-color: #202020;
        }

        .rnr-dialog::part(header) {
            border-bottom: 1px solid #FFFFFF15;
        }

        .rnr-dialog::part(close-button__base):hover {
            color: var(--theme-secondary-element-color);
        }

    }

    .screenshots-loading sl-skeleton {
        height: 250px;
        width: 50%;
    }

    .description-loading {
        height: 277px;
    }

    .ratings-reviews-loading {
        height: 309px;
    }

    sl-skeleton.no-radius {
        --border-radius: var(--sl-spacing-large);
    }

    /** on mobile screen */
    @media (max-width: 575px) {
        /** On phones, details should go the full width, no margin. */
        .details {
            width: 100%;
            margin-left: 0;
            margin-right: 0;
        }

        /** On phones, app info container should be verticle and horizontally centered */
        .app-info-container {
            flex-direction: column;
            align-items: center;
            margin-top: var(--sl-spacing-4x-large);
        }
        /** On phones, center the product name */
        .app-info h1 {
            text-align: center;
        }

        /** On mobile, when we show a loading skeleton for the app info, align them to be centered */
        .app-info.loading {
            align-items: center;
        }

        .app-info {
            gap: 4px;
        }

        /** On phones, center the product name */
        .app-info h1 {
            text-align: center;
        }

        .app-info sl-skeleton.title {
            width: 275px;
        }

        .app-info .subtitle {
            justify-content: center;
        }

        .app-info sl-skeleton.subtitle {
            width: 200px;
        }

        .publisher-link::part(base), .category-button::part(base) {
            position: relative;
            top: 1px;
        }

        .publisher-link::part(label) {
            padding: 0 var(--sl-spacing-medium);
        }

        /** On phones, the ratings summary section should be centered */
        .reviews-age-rating-container {
            justify-content: center;
        }

        sl-skeleton.reviews-age-rating-container {
            width: 300px;
        }

        /** To avoid wrapping the rating section on mobile, don't display the rating name (e.g. "TEEN"). */
        .rating-name {
            display: none;
        }


        /** On phones, sticky header should take full width */
        .sticky-header {
            width: calc(100% - 20px);
            margin-left: 0;
            margin-right: 0;
        }

        .screenshots-loading sl-skeleton {
            height: 250px;
            width: 100%;
        }

        .sticky-header.show {
            top: 124px;
        }
    }
    @media (max-width: 475px) {
        .sticky-header .title-and-publisher {
            display: none;
        }
    }

    .unavailable-alert {
        position: fixed;
        top: 110px;
        display: inline-block;
        width: calc(var(--layout-width) - 38px);
        z-index: 5;
        max-width: var(--max-width);

        @media (max-width: 1024px) {
            width: var(--layout-width);
        }

        @media (max-width: 911px) {
            top: 160px;
        }

        @media (max-width: 575px) {
            top: 130px;
        }
    }

    .private-pdp-alert {
        background-blend-mode: luminosity;
        background: light-dark(#FCFCFCD9, #20202080);
        margin-top: 24px;
        font-size: 18px;
        line-height: 24px;
        padding: 18px 24px;
        border-radius: var(--sl-border-radius-large);
        margin-bottom: -48px; /* This brings the private PDP banner nearer to the app header */
    }
}

app-footer {
    min-height: 495px;

    @media (max-width: 1199px) {
        min-height: 788px;
    }

    @media (max-width: 991px) {
        min-height: 828px;
    }

    @media (max-width: 767px) {
        min-height: 842px;
    }

    @media (max-width: 575px) {
        min-height: 1237px;
    }
}