.product-detail__container{
    container: product-detail / inline-size;
}

.product-detail{
    --_padding-block: 40px;
    --_column-gap: 20px;
    --_row-gap: var(--_column-gap);

    inline-size: 100%;
    padding-inline: 24px;
    padding-block: var(--_padding-block);
    display: flex;
    flex-flow: column wrap;
    gap: var(--_row-gap) var(--_column-gap);

    > .product-detail__thumbnail{
        position: relative;
        padding-inline: 36px;
        padding-block: 36px;
        border-radius: 12px;
        border: 2.5px solid var(--_color-gray-2);
        max-block-size: 320px;
        display: flex;
        align-items: center;
        justify-content: center;

        &.is-full-image{
            padding-inline: 0;
            padding-block: 0;

            > img{
                inline-size: 100%;
                block-size: 100%;
                object-fit: cover;
                border-radius: 12px;
            }
        }

        > .product-detail__thumbnail-actions{
            position: absolute;
            top: 20px;
            right: 24px;
        }
    }

    > header{
        display: flex;
        flex-flow: column wrap;
        gap: 16px;

        > header{
            text-align: center;
            display: flex;
            flex-flow: column wrap;
            align-items: center;
            gap: 8px;

            > span{
                display: flex;
                flex-flow: column wrap;
                align-items: center;
                gap: .5ch;

                > p{
                    font-family: var(--_font-family-semibold);
                    color: var(--_color-black);
                }
            }

            > p{
                font-family: var(--_font-family-bold);
                color: var(--_color-gray-4);
                display: flex;
                flex-flow: row wrap;
                align-items: center;
                gap: 6px;
            }
        }

        > .product-detail__header__actions{
            display: flex;
            flex-flow: column wrap;
            align-items: center;
            gap: 32px;

            > .product-detail__header__actions__item{
                inline-size: 100%;
                display: flex;
                flex-flow: column wrap;
                align-items: center;
                gap: 1ch;

                > *{
                    inline-size: 100%;
                }

                > :is(a, button){
                    font-size: var(--_font-size-h5);
                    font-family: var(--_font-family-bold);
                    inline-size: 100%;
                    min-block-size: 48px;
                }

                > :is(p, span){
                    font-size: var(--_font-size-p);
                    color: var(--_color-gray-4);
                    text-align: center;
                    padding-inline: 24px;

                    > .popover{
                        > .popover__trigger{
                            font-family: var(--_font-family-bold);
                        }
                    }
                }
            }
        }
    }

    > .product-detail__content{
        padding-block: 24px 0;
        display: flex;
        flex-flow: column nowrap;
        gap: 48px;

        > .product-detail__content__item{
            display: flex;
            flex-flow: column wrap;
            gap: 16px;

            > header{
                display: flex;
                flex-flow: row wrap;
                align-items: center;
                justify-content: space-between;
                gap: 12px;
            }

            > .product-detail__content__item__content{
                inline-size: 100%;
                display: flex;
                flex-flow: row wrap;
                gap: 8px;

                > *{
                    inline-size: calc(50% - 8px/2);
                }
            }
        }
    }
}

@container product-detail (min-width: 768px){
    .product-detail{
        flex-flow: row wrap;

        > .product-detail__thumbnail{
            inline-size: calc(55% - var(--_column-gap) / 2);
        }

        > header{
            inline-size: calc(45% - var(--_column-gap) / 2);
            padding-inline: 24px;
            padding-block: 12px;
            position: sticky;
            top: calc(92px + var(--_padding-block));
        }

        > .product-detail__content{
            padding-block: 6px 0;
            inline-size: calc(55% - var(--_column-gap) / 2);
        }
    }
}

@container product-detail (min-width: 1024px){
    .product-detail{
        --_column-gap: 48px;
        --_row-gap: 24px;

        padding-inline: 48px;

        > .product-detail__thumbnail{
            inline-size: calc(60% - var(--_column-gap) / 2);

            > img{
                inline-size: 240px;
                block-size: 240px;
            }
        }

        > header{
            inline-size: calc(40% - var(--_column-gap) / 2);
            padding-inline: 0;
        }
        
        > .product-detail__content{
            padding-inline: 16px;
            inline-size: calc(60% - var(--_column-gap) / 2);

            > .product-detail__content__item{
                > .product-detail__content__item__content{
                    > *{
                        inline-size: calc(100%/3 - 2*8px/3);
                    }
                }
            }
        }
    }
}

@container product-detail (min-width: 1280px){
    .product-detail{
        --_column-gap: 72px;

        padding-inline: calc(50% - 960px / 2);

        > header{
            gap: 20px;
        }
    }
}