.ProductCard__Detail__container {
    display: flex;
    flex-direction: column;
    --spacing: 2rem;
    gap: var(--spacing);

    .detail {
        display: grid;
        grid-template-columns: 1fr 1.3fr;
        container-type: inline-size;
        background: var(--color-white);
        padding: 1.875rem;
        border-radius: 1.25rem;
        gap: 1.875rem;

        .main {
            h1 {}
            .tag-list {
                display: flex;
                align-items: center;
                justify-content: space-between;
                margin-bottom: 1.875rem;
                flex-wrap: wrap;
                gap: 1ch;

                .item-code {
                    color: var(--color-dark-gray);
                }
                .stock {
                    color: var(--color-green);
                    &.in-stock {}
                }
                .top-tag {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    gap: .5ch;
                    cursor: pointer;
                    border-radius: .5rem;
                    transition: all .2s linear;
                    svg {
                        height: 1em;
                    }
                    &:hover, &.active {
                        color: var(--blue);
                    }
                }
            }
            .vat-label {
                color: var(--color-dark-gray);
                margin-block: 1.25rem 1.875rem;
            }
            .cart-bts-wrap {
                display: flex;
                gap: 1rem;
                align-items: center;

                .cart_button {
                    .input_wrap {
                        background: var(--color-gray-60);
                    }
                }
            }
        }
        
        @media (max-width: 1340px) {
            grid-template-columns: 1.3fr 1fr;
        }
        @media (max-width: 1080px) {
            grid-template-columns: 1fr;
        }
    }

    .more-info {
        display: flex;
        flex-direction: row;
        container-type: inline-size;
        .main {
            display: flex;
            flex-direction: column;
            flex: 1;
        }
        .aside {
            max-width: 30cqw;
            display: flex;
            flex-direction: column;
            @media (max-width: 1080px) {
                max-width: 40cqw;
            }
            @media (max-width: 980px) {
                max-width: unset;
            }
        }

        @media (max-width: 980px) {
            flex-direction: column;
        }
    }

    .other-info {
        display: flex;
        flex-direction: column;
    }

    .gap {
        gap: var(--spacing);
    }
}