:root {
    --pdp-container: 1500px;
    --pdp-container-padding: 40px;
    --pdp-hero-content-width: 57%;
    --pdp-hero-checkout-width: 43%;
    --pdp-gap: 52px;
    --pdp-section-space: 108px;
    --pdp-checkout-top: 92px;
    --pdp-tablet-breakpoint: 1024px;
    --pdp-mobile-breakpoint: 768px;
}

.pg-pdp {
    max-width: 1280px;
    width: min(100%, calc(var(--pdp-container) + (var(--pdp-container-padding) * 2)));
    margin: 0 auto;
    padding-left: var(--pdp-container-padding);
    padding-right: var(--pdp-container-padding);
    padding-top: 0;
    padding-bottom: var(--pdp-section-space);
}

.pg-pdp-layout {
    display: grid;
    grid-template-columns: minmax(0, 57%) minmax(400px, 43%);
    gap: var(--pdp-gap);
    align-items: start;
}

.pg-pdp-layout__content,
.pg-pdp-layout__checkout,
.pg-pdp__hero,
.pg-pdp-detail,
.pg-pdp-story,
.pg-pdp-review,
.pg-pdp-related {
    min-width: 0;
}

.pg-pdp-layout__content>*+* {
    margin-top: var(--pdp-section-space);
}

.pg-pdp-layout__checkout {
    position: sticky;
    top: var(--pdp-checkout-top);
    align-self: start;
}

.pg-pdp__hero>*+* {
    margin-top: var(--pdp-section-space);
}

@media (max-width: 1024px) {
    :root {
        --pdp-container-padding: 32px;
        --pdp-gap: 32px;
        --pdp-section-space: 96px;
    }

    .pg-pdp-layout {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--pdp-gap);
    }

    .pg-pdp-layout__checkout {
        position: static;
        top: auto;
    }
}

@media (max-width: 980px) {
    .pg-pdp-layout {
        display: block;
    }

    .pg-pdp-layout__checkout {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        top: auto;
        z-index: 10000;
        max-height: 88vh;
        overflow-y: auto;
        transform: translateY(100%);
        transition: transform 280ms ease;
    }

    .pg-pdp-sheet-backdrop {
        position: fixed;
        inset: 0;
        z-index: 9998;
    }

    body.pg-pdp-sheet-open .pg-pdp-layout__checkout {
        transform: translateY(0);
    }

    body.pg-pdp-sheet-open {
        overflow: hidden;
    }
}

@media (max-width: 768px) {
    :root {
        --pdp-container-padding: 20px;
        --pdp-gap: 20px;
        --pdp-section-space: 72px;
    }

    .pg-pdp {
        padding-bottom: calc(var(--pdp-section-space) + 88px);
    }

    .pg-pdp__hero>*+*,
    .pg-pdp-layout__content>*+* {
        margin-top: var(--pdp-section-space);
    }
}