@layer reset, base, components, utilities, sections, snippets, overrides;
@layer snippets{
  [ui-block=product]{
    display:flex;
    position:relative;
    flex-direction:column;
    gap:var(--spacing-16);
  }
  [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 > a img{
    -o-object-fit:cover;
       object-fit:cover;
    transition:var(--transition-expressive-default-spatial);
  }
  [ui-block=product] .media > ui-shop-button:first-of-type, [ui-block=product] .media > [ui-slot=button]:first-of-type{
    visibility:hidden;
    position:absolute;
    left:50%;
    width:calc(100% - var(--spacing-48));
    transform:translate(-50%, var(--spacing-12));
    transition:var(--transition-expressive-slow-spatial);
    opacity:0;
    filter:blur(2px);
    bottom:var(--spacing-12);
  }
  [ui-block=product] .media > ui-shop-button:first-of-type > [aria-disabled=true], [ui-block=product] .media > [ui-slot=button]:first-of-type > [aria-disabled=true]{
    background-color:var(--color-surface-container);
  }
  [ui-block=product] .media > ui-shop-button:last-of-type, [ui-block=product] .media > [ui-slot=button]:last-of-type{
    position:absolute;
    right:var(--spacing-12);
    bottom:var(--spacing-12);
  }
  [ui-block=product] .media > ui-shop-button:last-of-type > [aria-disabled=true], [ui-block=product] .media > [ui-slot=button]:last-of-type > [aria-disabled=true]{
    background-color:var(--color-surface-container);
  }
  [ui-block=product] .content{
    display:grid;
    grid-gap:var(--spacing-4);
    gap:var(--spacing-4);
    justify-content:var(--alignment-product);
    text-align:var(--alignment-product);
  }
  [ui-block=product] .content .title{
    display:block;
    overflow:hidden;
    font:var(--font-body-lg);
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  [ui-block=product] .content .price{
    font:var(--font-title-md);
  }
  [ui-block=product] .content .price .compare-at-price{
    opacity:0.5;
  }
  [ui-block=product] .badge{
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    margin:var(--spacing-12);
  }
  [ui-block=product]:hover .media > a img{
    filter:brightness(0.8);
  }
  [ui-block=product]:hover .media > ui-shop-button:first-of-type, [ui-block=product]:hover .media > [ui-slot=button]:first-of-type{
    visibility:visible;
    transform:translate(-50%, calc(var(--spacing-12) * -1));
    opacity:1;
    filter:blur(0);
  }
  @media (min-width: 769.02px){
    [ui-block=product] .media > ui-shop-button:last-of-type, [ui-block=product] .media > [ui-slot=button]:last-of-type{
      display:none !important;
    }
  }
  @media (max-width: 769px){
    [ui-block=product] .media > ui-shop-button:first-of-type, [ui-block=product] .media > [ui-slot=button]:first-of-type{
      display:none !important;
    }
  }
}