/**
 *  Style definitions for the product details page.
 *
 *  @copyright  2025 Vinacles BV
 *  @author     Anouar Jaama
 *  @author     Clyde Semeleer
 */
@layer components {
    article.shop-page div.product-details {
        @apply grid grid-cols-1 gap-y-8;

        div.top-details {
            @apply grid grid-cols-[max-content_1fr] items-center gap-x-[1ch];

            > h1 {
                @apply mb-0;
            }
        }

        div.main-details {
            @apply grid grid-cols-2 gap-x-8;

            div.image {
                @apply p-[1ch] text-center;

                img {
                    @apply max-w-full border;
                    border-color: var(--border-color);
                }
            }

            div.information {
                @apply p-[1ch];

                span.price-old {
                    @apply relative mr-[1ch];

                    &::after {
                        content: "";
                        position: absolute;
                        top: 13px;
                        left: 0;
                        width: 100%;
                        height: 2px;
                        transform: rotate(-10deg);
                        background: var(--color-vinacles-orange);
                    }
                }

                div.cta-need-more-information {
                    @apply border rounded text-[90%] p-[1ch] my-[1ch] bg-[var(--color-gray-background)] border-[var(--border-darker-color)] text-[var(--color-text-gray-background)];

                    a {
                        @apply block text-[80%];
                    }
                }

                a.button {
                    @apply mt-4;
                }
            }
        }

        div.bottom-details {
            @apply grid grid-cols-[1fr_300px] gap-x-12 p-[1ch];

            h3 {
                @apply border-b border-[var(--border-color)];

                &:not(:first-of-type) {
                    @apply mt-8;
                }
            }
        }
    }

    /* Small devices */
    @screen max-sm {
        article.shop-page div.product-details {
            @apply gap-y-2;

            div.main-details {
                @apply grid-cols-1;
            }

            div.bottom-details {
                @apply grid-cols-1;
            }
        }
    }

    /* Tablet devices */
    @media (min-width: 480px) and (max-width: 800px) {
        article.shop-page div.product-details {
            @apply gap-y-4;

            div.main-details {
                @apply grid-cols-1;
            }

            div.bottom-details {
                @apply grid-cols-1;
            }
        }
    }

    /* Medium screens */
    @media (min-width: 800px) and (max-width: 1200px) {
        article.shop-page div.product-details {
            @apply gap-y-4;

            div.main-details {
                @apply gap-x-4;
            }

            div.bottom-details {
                @apply grid-cols-1;
            }
        }
    }

    /* Reset element display */
    img, svg, video, canvas, audio, iframe, embed, object {
        display: unset;
    }
}