[ui-block=product]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){
    display:flex;
    position:relative;
    flex-direction:column;
    gap:var(--spacing-16);
  }
  [ui-block=product]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .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]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .media[data-image-ratio=square]{
    aspect-ratio:1/1;
  }
  [ui-block=product]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .media[data-image-ratio=portrait]{
    aspect-ratio:3/4;
  }
  [ui-block=product]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .media[data-image-ratio=landscape]{
    aspect-ratio:4/3;
  }
  [ui-block=product]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .media > a img{
    -o-object-fit:cover;
       object-fit:cover;
    transition:var(--transition-expressive-default-spatial);
  }
  [ui-block=product]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .content{
    display:flex;
    gap:var(--spacing-8);
    align-items:flex-start;
    justify-content:space-between;
    text-align:var(--alignment-product);
  }
  [ui-block=product]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .content .detail{
    display:grid;
    grid-gap:var(--spacing-8);
    gap:var(--spacing-8);
  }
  [ui-block=product]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .content .detail .title{
    display:block;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  [ui-block=product]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .content .detail .variants{
    display:flex;
    align-items:center;
    gap:var(--spacing-6);
  }
  [ui-block=product]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .content .detail .variants .option{
    height:var(--spacing-6);
    width:var(--spacing-24);
  }
  [ui-block=product]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .content .detail .variants .rest{
    font:var(--font-body-sm);
  }
  [ui-block=product]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .content .detail .price{
    font:var(--font-title-sm);
  }
  [ui-block=product]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .content .detail .price .compare-at-price{
    opacity:0.5;
  }
  [ui-block=product]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > .badge{
    position:absolute;
    inset-inline-end:0;
    inset-block-start:0;
    margin:var(--spacing-12);
  }