@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);
  }
  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 .image ui-image-fallback{
    background-color:var(--bg-shade-color);
  }
  ui-cart-form ui-cart-drawer-items .item .content{
    display:flex;
    flex:2;
    flex-direction:column;
    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-template-columns:1fr auto;
    grid-gap:var(--spacing-8);
    gap:var(--spacing-8);
  }
  ui-cart-form ui-cart-drawer-items .item .content .info .bio .title{
    width:-moz-fit-content;
    width:fit-content;
    font:var(--font-body-md);
    text-align:start;
  }
  ui-cart-form ui-cart-drawer-items .item .content .info .bio .price{
    font:var(--font-label-sm);
  }
  ui-cart-form ui-cart-drawer-items .item .content .info .bio .variants{
    font:var(--font-body-sm);
  }
  ui-cart-form ui-cart-drawer-items .item .content .actions{
    --quantity-bg:var(--fg-color);
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:var(--spacing-12);
  }
  ui-cart-form ui-cart-drawer-items .item .content .actions [ui-slot=button]{
    background-color:transparent;
  }
  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);
  }
  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;
  }
}
@layer snippets{
  /* ---------- LittleSpa: cart panel item layout (desktop + mobile) ----------
     Row 1: product name
     Row 2: options (only if the product has variants)
     Row 3: unit price (start) ........ quantity + delete (end)            */
  ui-cart-form ui-cart-drawer-items{
    gap:0;
  }
  ui-cart-form ui-cart-drawer-items .item{
    align-items:center;
    padding-block:var(--spacing-16);
  }
  ui-cart-form ui-cart-drawer-items .item:first-child{
    padding-block-start:0;
  }
  ui-cart-form ui-cart-drawer-items .item + .item{
    border-block-start:1px solid color-mix(in srgb, currentColor 14%, transparent);
  }
  ui-cart-form ui-cart-drawer-items .item .image{
    width:88px;
    height:88px;
  }
  ui-cart-form ui-cart-drawer-items .item .content{
    display:grid;
    grid-template-columns:1fr auto;
    grid-template-areas:
      "title title"
      "variants variants"
      "price actions";
    align-items:center;
    row-gap:var(--spacing-8);
    column-gap:var(--spacing-12);
    min-width:0;
  }
  ui-cart-form ui-cart-drawer-items .item .content .info,
  ui-cart-form ui-cart-drawer-items .item .content .info .bio{
    display:contents;
  }
  ui-cart-form ui-cart-drawer-items .item .content .info .bio .title{
    grid-area:title;
    width:auto;
    justify-self:start;
    text-align:start;
  }
  ui-cart-form ui-cart-drawer-items .item .content .info .bio .variants{
    grid-area:variants;
    opacity:0.7;
  }
  ui-cart-form ui-cart-drawer-items .item .content .info .bio .variants[hidden]{
    display:none;
  }
  ui-cart-form ui-cart-drawer-items .item .content .info .bio .price{
    grid-area:price;
    justify-self:start;
    font:var(--font-label-md);
    font-weight:700;
    white-space:nowrap;
  }
  ui-cart-form ui-cart-drawer-items .item .content .actions{
    grid-area:actions;
    justify-content:flex-end;
    gap:var(--spacing-4);
  }
  @media (max-width: 769px){
    ui-cart-form ui-cart-drawer-items .item{
      gap:var(--spacing-12);
    }
    ui-cart-form ui-cart-drawer-items .item .image{
      width:76px;
      height:76px;
    }
    ui-cart-form ui-cart-drawer-items .item .content .info .bio .title{
      font:var(--font-body-sm);
    }
    ui-cart-form ui-cart-drawer-items .item .content .info .bio .price{
      font:var(--font-label-sm);
      font-weight:700;
    }
  }
}
@layer snippets{
  /* LittleSpa: olive for item name, quantity editor and delete icon */
  ui-cart-form ui-cart-drawer-items .item .content .info .bio .title{
    color:#595533;
  }
  ui-cart-form ui-cart-drawer-items .item .content .actions{
    --quantity-bg:#595533;
    color:#595533;
  }
  ui-cart-form ui-cart-drawer-items .item .content .actions ui-quantity,
  ui-cart-form ui-cart-drawer-items .item .content .actions ui-quantity [ui-slot=button],
  ui-cart-form ui-cart-drawer-items .item .content .actions ui-cart-remove [ui-slot=button]{
    --button-fg:#595533 !important;
    color:#595533;
  }
}