.cart-drawer{
  --drawer-border:1px solid rgba(var(--header-text-color), 8%);
  height:100%;
  display:flex;
  flex-direction:column;
  background-color:var(--header-bg-color);
}
.cart-drawer[data-is-empty] .empty{
  display:flex;
}
.cart-drawer[data-is-empty] yc-cart-drawer-items,
.cart-drawer[data-is-empty] .footer{
  display:none;
}
.cart-drawer .empty{
  display:none;
}
.cart-drawer .header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:1em 1.5em;
  border-block-end:var(--drawer-border);
}
.cart-drawer .header .title{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:var(--gap-md);
}
.cart-drawer yc-cart-drawer-items{
  flex:1;
  display:flex;
  flex-direction:column;
  gap:var(--gap-md);
  padding:1.5em;
  border-block-end:var(--drawer-border);
  overflow-y:scroll;
}
.cart-drawer .footer{
  position:sticky;
  inset-block-end:0;
}
.cart-drawer .footer .totals{
  padding:1em 1.5em;
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-block-end:var(--drawer-border);
  font-size:var(--text-md);
  font-weight:550;
}
.cart-drawer .footer .actions{
  padding:1em 1.5em;
  display:grid;
  grid-gap:var(--gap-lg);
  gap:var(--gap-lg);
  border-block-end:var(--drawer-border);
}
.cart-drawer .footer .actions .secondary:hover{
  color:var(--header-bg-color);
}
.cart-drawer .item{
  display:flex;
  border-bottom:var(--drawer-border);
  gap:var(--gap-lg);
  padding-block:var(--gap-lg);
}
.cart-drawer .item:first-of-type{
  padding-block-start:0;
}
.cart-drawer .item:last-of-type{
  padding-block-end:0;
  border-block-end:none;
}
.cart-drawer .item .image{
  width:100px;
  height:100px;
  overflow:hidden;
  border-radius:var(--button-border-radius);
}
.cart-drawer .item .image .card-placeholder{
  width:100%;
  height:100%;
  background-color:rgba(var(--header-text-color), 0.05);
}
.cart-drawer .item .image .card-placeholder svg{
  color:rgba(var(--header-text-color), 0.3);
}
.cart-drawer .item .image img{
  width:100%;
  height:100%;
  -o-object-fit:cover;
     object-fit:cover;
}
.cart-drawer .item .info{
  flex:1;
  display:flex;
  flex-direction:column;
  gap:var(--gap-md);
}
.cart-drawer .item .info .heading{
  width:-moz-fit-content;
  width:fit-content;
  display:flex;
  flex-direction:column;
  gap:var(--gap-sm);
}
.cart-drawer .item .info .heading > [data-price]{
  font-size:var(--text-md);
  font-weight:550;
}
.cart-drawer .item .info .heading .name{
  display:-webkit-box;
  line-clamp:2;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.cart-drawer .item .info .heading .variant{
  font-size:var(--text-xs);
  color:color-mix(in srgb, currentColor 80%, transparent);
}
.cart-drawer .item .actions{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-block-start:auto;
}

@media (max-width: 768px){
  .cart-drawer .item .image{
    width:70px;
    height:70px;
  }
}