@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: 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>');
}

@scope (.scope.product-cards) to (.scope) {

  /* Evitar desbordes */
  ._thumbnail-stack {
    overflow: hidden;
  }

  /* Imagen normal */
  ._thumbnail-stack img {
    transform: scale(1);
    transition: transform 0.35s ease;
  }

  /* Hover en toda la card → zoom leve */
  ._card:hover ._thumbnail-stack img {
    transform: scale(1.05);
  }

}