Product ItemBLK

/* -- Product Item (website · Shop) ----------------------------------------

   Displays one catalog entry with its image, name, price, and link - a second picture on hover, badges, rating, colors, a wishlist heart and add to cart. */

@layer components {

  /* every box in the block measures border-box - the same on any page */

  :where(.mk-product-item, .mk-product-item *, .mk-product-item ::before, .mk-product-item ::after) { box-sizing: border-box; }

  .mk-product-item { display: grid; gap: 0.875rem; align-content: start; }

  .mk-product-item { position: relative; }

  .mk-product-item-name a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }

  .mk-product-item-name a:focus-visible { outline: none; }

  .mk-product-item:has(.mk-product-item-name a:focus-visible) { outline: 2px solid var(--ring); outline-offset: 2px; }

  /* zero specificity: any block rule may still position its controls */

  :where(.mk-product-item :is(button, input, select, label, .btn):not(.mk-product-item-name a)) { position: relative; z-index: 1; }

  .mk-product-item-media { position: relative; overflow: hidden; border-radius: var(--radius-xl); background: var(--muted); }

  .mk-product-item-image { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; transition: opacity 400ms ease;

    &[data-hover] { position: absolute; inset: 0; height: 100%; opacity: 0; }

  }

  .mk-product-item:hover .mk-product-item-image[data-hover] { opacity: 1; }

  /* on a photo, a badge needs a solid fill */

  .mk-product-item-badge { position: absolute; top: 0.75rem; left: 0.75rem; z-index: 1; box-shadow: var(--shadow-sm);

    &[data-sale] { background: var(--destructive); color: #fff; }

  }

  .mk-product-item-wish {

    position: absolute;

    top: 0.625rem;

    right: 0.625rem;

    z-index: 2;

    display: grid;

    place-items: center;

    width: 2.25rem;

    height: 2.25rem;

    border-radius: 999px;

    background: color-mix(in oklch, var(--background) 85%, transparent);

    color: var(--foreground);

    box-shadow: var(--shadow-sm);

    cursor: pointer;

    backdrop-filter: blur(6px);

    & input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }

    & svg { width: 1.125rem; height: 1.125rem; transition: scale 200ms ease; }

    &:has(input:checked) { color: oklch(0.6 0.22 20); }

    &:has(input:checked) svg { fill: currentColor; scale: 1.1; }

    &:has(input:focus-visible) { outline: 2px solid var(--ring); outline-offset: 2px; }

  }

  .mk-product-item-body { display: grid; gap: 0.25rem; }

  .mk-product-item-name { margin: 0; font-size: 1rem; font-weight: 600;

    & a { color: inherit; text-decoration: none; }

  }

  .mk-product-item-desc { margin: 0; color: var(--muted-foreground); font-size: 0.875rem; }

  .mk-product-item-rating { display: flex; align-items: center; gap: 0.375rem; margin: 0; color: var(--muted-foreground); font-size: 0.8125rem; }

  .mk-product-item-stars {

    --mk-rating: 5;

    /* five ★ glyphs, filled to the rating by a clipped gradient */

    background: linear-gradient(90deg, oklch(0.78 0.16 75) calc(var(--mk-rating) / 5 * 100%), var(--border) 0);

    -webkit-background-clip: text;

    background-clip: text;

    color: transparent;

    font-size: 0.9375rem;

    letter-spacing: 0.0625rem;

    line-height: 1;

  }

  .mk-product-item-price { display: flex; align-items: baseline; gap: 0.5rem; margin: 0.25rem 0 0; font-variant-numeric: tabular-nums;

    & strong { font-size: 1.0625rem; font-weight: 700; }

    & del { color: var(--muted-foreground); font-size: 0.875rem; }

    &:has(del) strong { color: var(--destructive); }

  }

  .mk-product-item-swatches { display: flex; gap: 0.375rem; margin: 0.375rem 0 0; padding: 0; list-style: none;

    & li { --mk-swatch: var(--muted); width: 1rem; height: 1rem; border-radius: 50%; background: var(--mk-swatch); box-shadow: inset 0 0 0 1px oklch(0 0 0 / 0.15); }

    & li[aria-current] { outline: 2px solid var(--foreground); outline-offset: 2px; }

  }

  .mk-product-item-add { justify-self: start; }

  .mk-product-item[data-variant="horizontal"] {

    grid-template-columns: minmax(7rem, 30%) minmax(0, 1fr);

    gap: 0.5rem 1.25rem;

    align-items: start;

    & .mk-product-item-media { grid-row: span 2; }

    & .mk-product-item-add { grid-column: 2; }

  }

  .mk-product-item[data-variant="minimal"] {

    text-align: center;

    & .mk-product-item-price { justify-content: center; }

    & :is(.mk-product-item-add, .mk-product-item-rating, .mk-product-item-swatches) { display: none; }

  }

  /* -- Accessibility ------------------------------------------- */

  @media (prefers-reduced-motion: reduce) {

    .mk-product-item-image, .mk-product-item-wish svg { transition: none; }

  }

  @media (forced-colors: active) {

    .mk-product-item-stars { background: none; }

    .mk-product-item-stars { color: CanvasText; }

    .mk-product-item-wish { border: 1px solid ButtonText; }

  }

}