@layer reset, base, composition, features, utilities;

@import "https://cdn.jsdelivr.net/npm/kiso.css@latest/kiso.css" layer(reset);

@layer features {
    @scope (.scope.product-cards) to (.scope) {
        :scope {
            container: --scope / inline-size;
        }

        ._card-list {
            &>* {
                grid-row: span 5;
            }
        }

        ._card {
            --_accent: var(--product-card--accent, #c34a36);
            --_row-gap: 0.25rlh;
            --_padding: 16px;
            --_radius: 40px;
            --_accent-contrast: oklch(from var(--_accent) sign(0.7 - l) 0 0);
            --_inner-radius: calc(var(--_radius) - var(--_padding));
            --_category-radius: 16px;
            --_duration: 350ms;
            --_has-hocus-on: ;
            --_has-hocus-off: initial;
            /* height: 300px; */
            display: block grid;
            reading-flow: grid-rows;
            grid-template-columns:
                [--full-start --heading-start] minmax(0, 1fr) [--heading-end --price-start] max-content [--price-end --full-end];
            grid-template-rows: subgrid;
            gap: var(--_row-gap) 1rem;
            padding: var(--_padding);
            border-radius: var(--_radius);
            box-shadow: 0 20px 40px -14px oklch(from black l c h / 25%);
            background-color: var(--card-background);
            color: var(--card-foreground);
            zoom: min(progress(100cqi, 0px, 320 / 16 * 1rem), 1);

            &:has(:any-link:hover) {
                @media (any-hover) {
                    --_has-hocus-on: initial;
                    --_has-hocus-off: ;
                }
            }

            &:has(:focus-visible) {
                --_has-hocus-on: initial;
                --_has-hocus-off: ;
            }

            &>* {
                grid-column: --full;
            }

            &>._thumbnail-stack {
                grid-row: 1 / 2;
            }

            &>._category {
                z-index: 1;
                grid-row: 1 / 2;
                place-self: start;
                max-inline-size: calc(100% - (var(--_category-radius) + var(--_inner-radius)));
            }

            &>._heading {
                grid-column: --heading;
                align-self: center;
            }

            &>._price {
                grid-column: --price;
                place-self: center end;
            }
        }

        ._thumbnail-stack {
            display: block grid;

            &>img {
                grid-area: 1 / 1;
                inline-size: 100%;
            }
        }

        img {
            aspect-ratio: 1;
            border-radius: var(--_inner-radius);
            filter: url(#svg-inset-shadow);

            @media (prefers-reduced-motion: no-preference) {
                transition-property: clip-path;
                transition-duration: var(--_duration);
                transition-timing-function: var(--_has-hocus-on, var(--ease-out-expo)) var(--_has-hocus-off, var(--ease-in-expo));
            }

            :nth-child(1 of &) {
                filter: brightness(0.8) grayscale(1);
            }

            :nth-child(2 of &) {
                @media (any-hover) {
                    clip-path: var(--_has-hocus-on, inset(0 round var(--_inner-radius))) var(--_has-hocus-off, inset(100% round var(--_inner-radius)));
                }
            }
        }

        ._heading {
            padding-block: calc(var(--_row-gap) * 2);
        }

        ._price {
            padding-block: 0.5em;
            padding-inline: 1em;
            border-radius: calc(infinity * 1px);
            background-color: var(--_accent);
            color: var(--_accent-contrast);
            font-variant-numeric: tabular-nums;
        }

        ._category {
            position: relative;
            align-content: center;
            min-block-size: calc(var(--_category-radius) * 2);
            padding-block: 1em;
            padding-inline: 1.5em;
            border-end-end-radius: var(--_category-radius);
            background-color: var(--card-background);
            filter: drop-shadow(6px 6px 3px oklch(from black l c h / 15%));

            &::before,
            &::after {
                content: "";
                position: absolute;
                block-size: var(--_category-radius);
                aspect-ratio: 1;
                mask-image: radial-gradient(circle at 100% 100%,
                        transparent var(--_category-radius),
                        red calc(var(--_category-radius) + 1px)
                        /* ギザギザを防止するために 1px 加える */
                    );
                background-color: inherit;
            }

            &::before {
                inset-block-start: 0;
                inset-inline-start: 100%;
            }

            &::after {
                inset-block-start: 100%;
                inset-inline-start: 0;
            }
        }

        ._tag-list {
            padding-block: calc(var(--_row-gap) * 2);
        }

        ._tag {
            padding-block: 0.5em;
            padding-inline: 1em;
            border-radius: calc(infinity * 1px);
            background-color: oklch(from var(--_accent) 90% 25% h);
            font-size: 0.75rem;
        }
    }

    @scope (.scope.purchase-button) to (.scope) {
        :scope {
            --_background: var(--purchase-button--background, var(--color-darker));
            --_backgorund-hocus: oklch(from var(--_background) 60% 60% h);
            --_foreground: var(--purchase-button--foreground, var(--color-lightest));
            --_foreground-hocus: oklch(from var(--_backgorund-hocus) sign(0.7 - l) 0 0);
            --_hocus-on: ;
            --_hocus-off: initial;

            display: block flex;
            justify-content: center;
            align-items: center;
            column-gap: 1ch;
            padding: 1em;
            border: 1px solid transparent;
            /* for Forced Colors Mode */
            border-radius: calc(infinity * 1px);
            background-color: var(--_hocus-on, var(--_backgorund-hocus)) var(--_hocus-off, var(--_background));
            color: var(--_hocus-on, var(--_foreground-hocus)) var(--_hocus-off, var(--_foreground));
            font-weight: bolder;
            transition-property: background-color, color;
            transition-duration: 300ms;

            &::before {
                content: "";
                flex: 0 0 1em;
                mask-image: var(--icon-cart);
                mask-repeat: no-repeat;
                mask-position: center;
                mask-size: contain;
                aspect-ratio: 1;
                background-color: CanvasText;
                /* for Forced Colors Mode */
                background-image: conic-gradient(currentcolor 0 0);
                /* for Forced Colors Mode */
            }

            &:any-link:hover {
                @media (any-hover) {
                    --_hocus-on: initial;
                    --_hocus-off: ;
                }
            }

            &:focus-visible {
                --_hocus-on: initial;
                --_hocus-off: ;
            }
        }
    }
}

@layer composition {
    .grid {
        --_c-fill-mode: var(--grid--fill-mode, auto-fit);
        --_c-row-gap: var(--grid--row-gap, 1.5rem);
        --_c-column-gap: var(--grid--column-gap, 1.5rem);
        --_c-column-max-count: var(--grid--column-max-count, 5);
        --_c-column-min-width: var(--grid--column-min-width, 20rem);
        --_c-column-width-calculated: calc((100% - var(--_c-column-gap) * (var(--_c-column-max-count) - 1)) / var(--_c-column-max-count));
        --_c-column-width: min(100%,
                max(var(--_c-column-min-width), var(--_c-column-width-calculated)));

        display: block grid;
        grid-template-columns: repeat(var(--_c-fill-mode),
                minmax(var(--_c-column-width), 1fr));
        gap: var(--_c-row-gap) var(--_c-column-gap);
    }

    .cluster {
        --_c-main-alignment: var(--cluster--main-alignment, start);
        --_c-cross-alignment: var(--cluster--cross-alignment, center);
        --_c-gap: var(--cluster--gap, 1rem);

        display: block flex;
        flex-wrap: wrap;
        gap: var(--_c-gap);
        justify-content: var(--_c-main-alignment);
        align-items: var(--_c-cross-alignment);
    }
}

@layer utilities {
    .-fluid-text {
        --_fluid-text--min-width: var(--fluid-text--min-width, 375);
        --_fluid-text--max-width: var(--fluid-text--max-width, 1280);
        --_fluid-text--min-font-size: var(--fluid-text--min-font-size, 14);
        --_fluid-text--max-font-size: var(--fluid-text--max-font-size, 16);
        --_fluid-text--base-font-size: var(--fluid-text--base-font-size, 16);
        --_fluid-text--relative-unit: var(--fluid-text--relative-unit,
                100svi);
        /* 100svi or 100cqi */
        --_fluid-text--slope: calc((var(--_fluid-text--max-font-size) - var(--_fluid-text--min-font-size)) / (var(--_fluid-text--max-width) - var(--_fluid-text--min-width)));
        --_fluid-text--intercept: calc(var(--_fluid-text--min-font-size) - var(--_fluid-text--slope) * var(--_fluid-text--min-width));
        --_fluid-text--font-size: clamp(var(--_fluid-text--min-font-size) / var(--_fluid-text--base-font-size) * 1rem,
                var(--_fluid-text--slope) * var(--_fluid-text--relative-unit) + var(--_fluid-text--intercept) / var(--_fluid-text--base-font-size) * 1rem,
                var(--_fluid-text--max-font-size) / var(--_fluid-text--base-font-size) * 1rem);

        font-size: var(--_fluid-text--font-size);
    }

    .-trim-both {
        text-box: trim-both cap alphabetic;

        &:lang(ja) {
            text-box: trim-both text;
        }
    }

    .-line-clamp {
        --_limit: var(--line-clamp--limit, 3);

        display: -webkit-box;
        overflow-block: clip;
        -webkit-box-orient: block-axis;
        -webkit-line-clamp: var(--_limit);

        @supports not (overflow-block: clip) {
            overflow-y: clip;
        }
    }
}

@layer base {
    :root {
        --card-foreground: var(--color-darkest);
        --card-background: var(--color-lightest);
        --ease-in-expo: cubic-bezier(0.95, 0.05, 0.795, 0.035);
        --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
        --ease-in-out-expo: cubic-bezier(1, 0, 0, 1);
        --_background: #fcfcfc;
        --_grid-color: #efefef;

        background-image: linear-gradient(var(--_grid-color) 2px, transparent 2px),
            linear-gradient(90deg, var(--_grid-color) 2px, transparent 2px),
            linear-gradient(var(--_grid-color) 1px, transparent 1px),
            linear-gradient(90deg, var(--_grid-color) 1px, var(--_background) 1px);
        background-position: -2px -2px, -2px -2px, -1px -1px, -1px -1px;
        background-size: 50px 50px, 50px 50px, 10px 10px, 10px 10px;
        color: var(--color-darkest);
        font-family: Montserrat, sans-serif;
        line-height: 1.618;
    }

    /* body {
        padding-block: 2rlh;
        padding-inline: max(24px, 5%);

        @supports (position-anchor: --test) {
            &::before {
                content: "";
                position: fixed;
                inset: anchor(inside);
                z-index: calc(infinity);
                position-anchor: --focus-anchor;
                margin: -8px;
                border: 2px solid CanvasText;
                border-radius: 8px;
                box-shadow: 0 0 0 2px Canvas;
                background-color: color-mix(in oklab, Mark 10%, transparent);
                pointer-events: none;

                @media (prefers-reduced-motion: no-preference) {
                    transition-duration: 200ms;
                    transition-property: inset;
                    transition-timing-function: linear;
                    transition-behavior: allow-discrete;
                }
            }

            &:not(:has(:focus-visible))::before {
                visibility: hidden;
            }
        }

        &>* {
            max-inline-size: 80rem;
            margin-inline: auto;
        }
    } */

    :where(:focus-visible) {
        @supports (position-anchor: --test) {
            anchor-name: --focus-anchor;
            outline: none;
        }
    }

    :where(h1, h2, h3, h4, h5, h6) {
        line-height: 1.25;
    }

    img {
        display: block flow;
        object-fit: cover;
    }
}

@property --color-darkest {
    syntax: "<color>";
    inherits: false;
    initial-value: #444;
}

@property --color-darker {
    syntax: "<color>";
    inherits: false;
    initial-value: #696969;
}

@property --color-dark {
    syntax: "<color>";
    inherits: false;
    initial-value: #999;
}

@property --color-light {
    syntax: "<color>";
    inherits: false;
    initial-value: #ccc;
}

@property --color-lighter {
    syntax: "<color>";
    inherits: false;
    initial-value: #ececec;
}

@property --color-lightest {
    syntax: "<color>";
    inherits: false;
    initial-value: oklch(from #ececec calc(l + 0.05) c h);
}

@property --icon-cart {
    syntax: "<url>";
    inherits: false;
    initial-value: url('data:image/svg+xml,<svg viewBox="0 0 576 512" xmlns="http://www.w3.org/2000/svg"><path fill="red" d="M0 24C0 10.7 10.7 0 24 0L69.5 0c22 0 41.5 12.8 50.6 32l411 0c26.3 0 45.5 25 38.6 50.4l-41 152.3c-8.5 31.4-37 53.3-69.5 53.3l-288.5 0 5.4 28.5c2.2 11.3 12.1 19.5 23.6 19.5L488 336c13.3 0 24 10.7 24 24s-10.7 24-24 24l-288.3 0c-34.6 0-64.3-24.6-70.7-58.5L77.4 54.5c-.7-3.8-4-6.5-7.9-6.5L24 48C10.7 48 0 37.3 0 24zM128 464a48 48 0 1 1 96 0 48 48 0 1 1 -96 0zm336-48a48 48 0 1 1 0 96 48 48 0 1 1 0-96z" /></svg>');
}