@layer support, demo;
@import "https://unpkg.com/open-props" layer(support.design-system.tokens);
@import "https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&icon_names=diamond,keyboard_arrow_down,search,shopping_bag" layer(support.design-system.font);

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400..700&display=swap');


@layer demo {


    .select {
        appearance: base-select;
        background: var(--surface);
        border: var(--border-none);
        color: var(--on-surface);
        cursor: pointer;
        display: inline-flex;
        font: var(--headline);
        gap: var(--spacing-none);
        padding: var(--spacing-none);
        position: relative;





        &::after {
            content: '';
            background: var(--select-btn-gradient);
            inset: 0;
            mix-blend-mode: multiply;
            position: absolute;
            z-index: 100;
        }


        &::picker-icon {
            content: 'keyboard_arrow_down';
            direction: ltr;
            display: inline-block;
            font: var(--picker-icon-font);
            transition: rotate var(--default-easing-duration) var(--default-easing);
            white-space: nowrap;
            word-wrap: normal;
            -webkit-font-feature-settings: 'liga';
            -webkit-font-smoothing: antialiased;
        }

        &:open::picker-icon {
            rotate: 180deg;
        }


        &::picker(select) {
            appearance: base-select;
            background: transparent;
            border: var(--border-none);
            padding-block: var(--spacing-none);
            padding-inline: var(--spacing-none);
            min-block-size: fit-content;
        }




        &::picker(select)::backdrop {
            background: transparent;
            transition:
                display var(--fast-easing-duration) var(--fast-easing) allow-discrete,
                overlay var(--fast-easing-duration) var(--fast-easing) allow-discrete,
                background-color var(--fast-easing-duration) var(--fast-easing);

        }

        &::picker(select):popover-open::backdrop {
            background: var(--backdrop-surface-small-screen);

            /* md-n-above */
            @media (width >=768px) {
                background: var(--backdrop-surface-large-screen);
            }

            @starting-style {
                background: transparent;
            }
        }
    }


    .option {
        /* https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/sibling-index */

        --_delay: calc(sibling-index() * 50ms);
        animation: fade-in var(--slow-easing-duration) var(--default-easing) var(--_delay, 0ms) forwards;
        background: transparent;
        opacity: 0;
        outline: var(--border-none);
        padding-inline: var(--spacing-none);

        &:is(:hover, :focus-visible) {
            color: var(--primary);
        }

        &:checked {
            color: var(--on-surface);
        }

        &:checked:is(:hover, :focus-visible) {
            color: var(--primary);
        }


        &::checkmark {
            display: none;
        }

    }


}








/* Open Props already includes a fade-in keyframe. */

@keyframes fade-in {
    to {
        opacity: 1;
    }
}






/* Fallback for unsupported browsers */
@supports not (appearance: base-select) {
    select {
        color: var(--primary);
    }

    select option {
        color: white;
    }
}













@layer support {
    @layer design-system, reset, base, components, layout, overrides;


    @layer base {
        html {
            color-scheme: dark;
            scrollbar-color: var(--on-surface) var(--surface);


            /* Global tokens */

            --spacing-none: 0;
            --spacing-xxs: var(--size-1);
            --spacing-xs: var(--size-2);
            --spacing-sm: var(--size-3);
            --spacing-md: var(--size-5);
            --spacing-lg: var(--size-7);
            --spacing-xl: var(--size-8);
            --spacing-xxl: var(--size-11);


            --slow-easing: var(--ease-out-2);
            --slow-easing-duration: 500ms;


            --default-easing: var(--ease-out-3);
            --default-easing-duration: 250ms;


            --fast-easing: var(--ease-out-4);
            --fast-easing-duration: 150ms;





            --label: var(--font-weight-4) var(--font-size-1) / var(--font-lineheight-0) "Inter", var(--font-system-ui);
            --body: var(--font-weight-4) var(--font-size-2) / var(--font-lineheight-3) "Inter", var(--font-system-ui);
            --title: var(--font-weight-4) var(--font-size-3) / var(--font-lineheight-1) "Inter", var(--font-system-ui);
            --title-em: var(--font-weight-6) var(--font-size-3) / var(--font-lineheight-1) "Inter", var(--font-system-ui);
            --headline: var(--font-weight-5) var(--font-size-7) / var(--font-lineheight-1) "Inter", var(--font-system-ui);

            --surface: black;
            --on-surface: white;
            --outline: lightgray;
            --primary: oklch(65% 0.24 19);

            /* gradient.style */

            /* https://tinyurl.com/5n6pyxrn */

            --backdrop-surface-small-screen: radial-gradient(farthest-corner circle at 99% 99% in oklch longer hue,
                    color(display-p3 100% 85% 30%),
                    color(display-p3 25% 25% 100%)), linear-gradient(137deg in oklab,
                    oklch(54% 0.26 289), oklch(58% 0.27 323));

            --backdrop-surface-large-screen: oklch(0 0 0/ 40%);

            --corner-none: 0;
            --corner-small: var(--radius-2);
            --corner-medium: var(--radius-3);
            --corner-large: var(--radius-4);
            --corner-full: var(--radius-round);

            --border-none: 0;
            --border-thin: var(--border-size-1);
            --border-think: var(--border-size-3);




            /* component-specific variables */

            --select-btn-gradient: linear-gradient(264deg in lch,
                    color(display-p3 25% 25% 100%),
                    color(display-p3 100% 85% 30%));

            --nav-btn-size-large-screen: 64px;
            --nav-btn-size-small-screen: 48px;
            --nav-icon-font-size: var(--font-size-5);

            --logo-icon-size: 128px;
            --logo-font-size-small-screen: var(--font-size-7);
            --logo-font-size-large-screen: var(--font-size-fluid-3);

            --nav-block-size: 160px;

            --picker-icon-font: 400 1.5em/ 1 'Material Symbols Outlined';

            --card-background: var(--gradient-8);
            --app-container-inline-size: var(--size-xl);

        }

        body {
            background: var(--surface);
            color: var(--on-surface);
            font: var(--body);
        }

    }

    @layer base.utilities {
        .md-icon {
            font-family: 'Material Symbols Outlined';
            font-size: inherit;
            display: inline-block;
            white-space: nowrap;
            word-wrap: normal;
            direction: ltr;
            -webkit-font-feature-settings: 'liga';
            -webkit-font-smoothing: antialiased;
        }
    }


    @layer layout {
        .nav {
            display: grid;
            place-items: center;
            padding-block: var(--spacing-md);
            block-size: var(--nav-block-size);
            padding-inline: var(--spacing-sm);

            /* md-n-above */
            @media (width >=768px) {
                padding-inline: var(--spacing-lg);
            }
        }

        .nav-container {
            inline-size: min(100%, var(--app-container-inline-size));
        }

        .nav-wrapper {
            display: grid;
            grid-auto-flow: column;
            justify-content: space-between;
            align-items: center;
        }


        .logo {
            color: var(--on-surface);
            text-decoration: none;
            border-radius: var(--corner-full);
            /* md-n-above */

            font-size: var(--logo-font-size-small-screen);

            @media (width >=768px) {
                font-size: var(--logo-font-size-large-screen);

            }

            &:hover {
                color: var(--primary);
            }
        }


        .nav-control {
            display: flex;
            gap: var(--spacing-xxs);

        }

        .nav-btn {
            color: var(--on-surface);
            block-size: var(--nav-btn-size-small-screen);
            inline-size: var(--nav-btn-size-small-screen);
            cursor: pointer;
            background: transparent;
            border: var(--border-none);
            border-radius: var(--corner-full);
            font-size: var(--nav-icon-font-size);

            display: grid;
            place-items: center;


            /* md-n-above */
            @media (width >=768px) {
                block-size: var(--nav-btn-size-large-screen);
                inline-size: var(--nav-btn-size-large-screen);
                font-size: var(--nav-icon-font-size);
            }

            &:is(:hover, :focus-within) {
                background: oklch(from var(--on-surface) l c h / 8%);
            }


            &:active {
                background: oklch(from var(--on-surface) l c h / 12%);
            }
        }
    }

    /* Product Section */
    @layer layout {

        .product-section {
            display: grid;
            place-items: center;
            padding-inline: var(--spacing-sm);

            /* md-n-above */
            @media (width >=768px) {

                padding-inline: var(--spacing-lg);

            }
        }

        .product-section-container {
            inline-size: min(100%, var(--app-container-inline-size));

        }

        .product-section-header {
            padding-block: var(--spacing-xl);
            display: grid;
            place-items: center start;
            inline-size: 100%;
        }

        .product-section-headline {
            font: var(--headline);
            text-wrap: balance;
        }

        .product-list {
            --_column-count: 2;
            column-gap: var(--spacing-md);
            display: grid;
            grid-template-columns: repeat(var(--_column-count), 1fr);
            inline-size: 100%;
            list-style: none;
            padding-block: var(--spacing-xl);
            padding-inline: var(--spacing-none);
            row-gap: var(--spacing-xl);

            /* lg-n-above */
            @media (width >=1024px) {
                --_column-count: 4;
                column-gap: var(--spacing-lg);

            }
        }

        .product-link-wrapper {
            color: var(--on-surface);
            text-decoration: none;
            display: grid;
            gap: var(--spacing-xs);

        }

        .product-visual {
            aspect-ratio: 1;
            background-image: var(--card-background);
            overflow: clip;
            border-radius: var(--corner-medium);
        }

        .product-meta {
            display: grid;
            gap: var(--spacing-xs);
        }

        .product-title {
            font: var(--title);
        }

    }

    /* Reset */
    @layer reset {

        *,
        ::before,
        ::after {
            box-sizing: border-box;
        }

        :where(:not(dialog)) {
            margin: 0;
        }

        :where(html) {
            -webkit-text-size-adjust: none;

            @media (prefers-reduced-motion: no-preference) {
                scroll-behavior: smooth;
            }
        }

        :where(body) {
            min-block-size: 100svb;
            -webkit-font-smoothing: antialiased;
        }
    }
}