@layer snippets{
  ui-cart-form{
    flex:1;
  }
  ui-cart-form ui-cart-drawer-items{
    display:flex;
    gap:var(--spacing-24);
    flex-direction:column;
  }
  ui-cart-form ui-cart-drawer-items .item{
    display:flex;
    gap:var(--spacing-16);
  }
  ui-cart-form ui-cart-drawer-items .item .image{
    position:relative;
    flex-shrink:0;
    width:100px;
    height:100px;
    overflow:hidden;
    border-radius:var(--radius-12);
    background-color:var(--color-surface-container);
  }
  ui-cart-form ui-cart-drawer-items .item .image img{
    -o-object-fit:cover;
       object-fit:cover;
  }
  ui-cart-form ui-cart-drawer-items .item .content{
    display:flex;
    flex:2;
    justify-content:space-between;
  }
  ui-cart-form ui-cart-drawer-items .item .content .info{
    display:flex;
    flex-direction:column;
    justify-content:space-between;
  }
  ui-cart-form ui-cart-drawer-items .item .content .info .bio{
    display:grid;
    grid-gap:var(--spacing-8);
    gap:var(--spacing-8);
  }
  ui-cart-form ui-cart-drawer-items .item .content .info .bio .title{
    font:var(--font-body-lg);
  }
  ui-cart-form ui-cart-drawer-items .item .content .info .bio .variants{
    color:var(--color-on-surface-variant);
    font:var(--font-body-sm);
  }
  ui-cart-form ui-cart-drawer-items .item .content .actions{
    display:flex;
    align-items:center;
    justify-content:space-between;
  }
  ui-cart-form .collections{
    display:flex;
    flex-direction:column;
    gap:var(--spacing-16);
    width:100%;
  }
  ui-cart-form .collections .collection{
    display:flex;
    align-items:center;
    padding:var(--spacing-16);
    border-radius:var(--radius-16);
    gap:var(--spacing-12);
    background-color:var(--color-surface-container-low);
  }
  ui-cart-form .collections .collection .image{
    width:var(--spacing-64);
    height:var(--spacing-64);
    overflow:hidden;
    border-radius:var(--radius-12);
  }
  ui-cart-form .collections .collection .image > img{
    -o-object-fit:cover;
       object-fit:cover;
  }
  ui-cart-form .collections .collection .name{
    flex:1;
  }
  ui-cart-form:has(ui-empty:not([hidden])){
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:var(--spacing-48);
  }
  ui-cart-form:has(ui-empty:not([hidden]) + .collections){
    justify-content:flex-start;
  }
  ui-cart-form:has(ui-empty[hidden]) .collections{
    display:none;
  }
}