@layer reset, base, components, utilities, sections, snippets, overrides;
@layer snippets{
  [ui-block=product]{
    --bg-color:#fefefe;
    --bg-shade-color:oklch(from var(--bg-color) calc(l - 0.018 * (1 - 2 * clamp(0, (0.5 - l) * 9999, 1)) + 0.16 * clamp(0, (0.25 - l) * 4, 1)) c h);
    --fg-color:oklch(from var(--bg-color) clamp(0, calc((0.5 - l) * 9999), 1) 0 none);
    --quantity-bg:var(--bg-shade-color);
    display:flex;
    position:relative;
    flex-direction:column;
    min-width:0;
    height:100%;
    background-color:transparent;
    color:inherit;
  }
  [ui-block=product] .media{
    position:relative;
    height:auto;
    overflow:hidden;
    transition:var(--transition-expressive-default-spatial);
    border-radius:var(--radius-product);
    -webkit-text-decoration:none;
    text-decoration:none;
  }
  [ui-block=product] .media[data-image-ratio=square]{
    aspect-ratio:1/1;
  }
  [ui-block=product] .media[data-image-ratio=portrait]{
    aspect-ratio:3/4;
  }
  [ui-block=product] .media[data-image-ratio=landscape]{
    aspect-ratio:4/3;
  }
  [ui-block=product] .media > img{
    -o-object-fit:cover;
       object-fit:cover;
    transition:var(--transition-expressive-default-spatial);
  }
  [ui-block=product] .content{
    display:flex;
    flex:1;
    flex-direction:column;
    min-width:0;
  }
  [ui-block=product] .info{
    display:flex;
    flex:1;
    flex-direction:column;
    padding:var(--spacing-12) var(--spacing-4) 0;
    gap:var(--spacing-8);
  }
  [ui-block=product] .title-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:var(--spacing-8);
  }
  [ui-block=product] .info .name{
    flex:1;
    min-width:0;
    overflow:hidden;
    color:inherit;
    font:var(--font-body-lg);
    text-overflow:ellipsis;
    white-space:nowrap;
    -webkit-text-decoration:none;
    text-decoration:none;
  }
  [ui-block=product] .title-row ui-shop-button{
    flex:0 0 auto;
    width:auto;
  }
  [ui-block=product] .quick-add{
    display:inline-flex;
    flex:0 0 auto;
    align-items:center;
    justify-content:center;
    width:40px;
    height:40px;
    padding:0;
    transition:background-color 200ms ease, opacity 200ms ease;
    border:1.5px solid currentcolor;
    border-radius:50%;
    background-color:transparent;
    color:inherit;
    cursor:pointer;
    -webkit-text-decoration:none;
    text-decoration:none;
  }
  [ui-block=product] .quick-add:hover{
    background-color:color-mix(in srgb, currentcolor 12%, transparent);
  }
  [ui-block=product] .quick-add[data-loading]{
    opacity:0.5;
    pointer-events:none;
  }
  [ui-block=product] .quick-add[aria-disabled=true]{
    opacity:0.35;
    pointer-events:none;
  }
  [ui-block=product] .swatches{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    min-height:16px;
    margin:0;
    padding:0;
    gap:var(--spacing-8);
    list-style:none;
  }
  [ui-block=product] .swatch{
    width:24px;
    height:6px;
    border-radius:var(--radius-rounded);
    background-color:var(--swatch);
    box-shadow:0 0 0 1px color-mix(in srgb, currentcolor 22%, transparent);
  }
  [ui-block=product] .swatch-more{
    opacity:0.7;
    font:var(--font-label-xs);
  }
  [ui-block=product] .info .price{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:var(--spacing-4) var(--spacing-8);
    font:var(--font-label-lg);
  }
  [ui-block=product] .info .price .compare-at-price{
    opacity:0.45;
    -webkit-text-decoration:line-through;
    text-decoration:line-through;
  }
  @media (max-width: 769px){
    [ui-block=product] .info{
      padding-inline:0;
      gap:var(--spacing-8);
    }
    [ui-block=product] .info .name{
      font:var(--font-body-sm);
    }
    [ui-block=product] .quick-add{
      width:36px;
      height:36px;
    }
    [ui-block=product] .swatch{
      width:20px;
    }
    [ui-block=product] .info .price{
      font:var(--font-label-sm);
    }
  }
}