@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;

      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: 3/4;
      object-fit: contain !important;
      background-color: #fafafa;
      border-radius: var(--_inner-radius);

      @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(1) grayscale(0);
      }

      :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)
        );
        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; 
      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;
      text-decoration: none;

      &::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; 
        background-image: conic-gradient(
          currentcolor 0 0
        ); 
      }

      &: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
    ); 
    --_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, 2);
    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);
  }
  
  img {
    display: block flow;
    object-fit: contain;
  }
}

@property --color-darkest { syntax: "<color>"; inherits: false; initial-value: #111; }
@property --color-darker { syntax: "<color>"; inherits: false; initial-value: #333; }
@property --color-dark { syntax: "<color>"; inherits: false; initial-value: #555; }
@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: #ffffff; }
@property --icon-cart {
  syntax: "<url>";
  inherits: false;
  initial-value: url('data:image/svg+xml,<svg viewBox="0 0 448 512" xmlns="http://www.w3.org/2000/svg"><path fill="red" d="M380.9 97.1C339 55.1 283.2 32 223.9 32c-122.4 0-222 99.6-222 222 0 39.1 10.2 77.3 29.6 111L0 480l117.7-30.9c32.4 17.7 68.9 27 106.1 27h.1c122.3 0 224.1-99.6 224.1-222 0-59.3-25.2-115-67.1-157zm-157 341.6c-33.2 0-65.7-8.9-94-25.7l-6.7-4-69.8 18.3L72 359.2l-4.4-7c-18.5-29.4-28.2-63.3-28.2-98.2 0-101.7 82.8-184.5 184.6-184.5 49.3 0 95.6 19.2 130.4 54.1 34.8 34.9 56.2 81.2 56.1 130.5 0 101.8-84.9 184.6-186.6 184.6zm101.2-138.2c-5.5-2.8-32.8-16.2-37.9-18-5.1-1.9-8.8-2.8-12.5 2.8-3.7 5.6-14.3 18-17.6 21.8-3.2 3.7-6.5 4.2-12 1.4-32.6-16.3-54-29.1-75.5-66-2.1-3.6 0-5.5 1.8-7.3 1.6-1.6 3.7-4.2 5.5-6.3 1.9-2.1 2.5-3.7 3.7-6.3 1.2-2.6 .6-4.9-.3-6.3-1-1.4-12.5-30.1-17.1-41.2-4.5-10.8-9.1-9.3-12.5-9.5-3.2-.2-6.9-.2-10.6-.2-3.7 0-9.7 1.4-14.8 6.9-5.1 5.6-19.4 19-19.4 46.3 0 27.3 19.9 53.7 22.6 57.4 2.8 3.7 39.1 59.7 94.8 83.8 35.2 15.2 49 16.5 66.6 13.9 10.7-1.6 32.8-13.4 37.4-26.4 4.6-13 4.6-24.1 3.2-26.4-1.3-2.5-5-3.9-10.5-6.6z"/></svg>');
}