yc-section{
  --cart-border-radius:var(--button-border-radius);
  --cart-border:1px solid color-mix(in srgb, currentColor 10%, transparent);
  gap:var(--gap-xl);
}
yc-section .cart{
  display:grid;
  grid-template-columns:repeat(12, 1fr);
  grid-column-gap:var(--gap-xl);
  grid-row-gap:var(--gap-2xl);
  position:relative;
}
yc-section .cart .content,
yc-section .cart .summary{
  display:flex;
  flex-direction:column;
  gap:var(--gap-xl);
}
yc-section .cart .content{
  grid-area:1/1/2/9;
}
yc-section .cart .content .item{
  display:grid;
  grid-template-columns:2fr 1fr;
  justify-content:space-between;
  grid-gap:var(--gap-lg);
  gap:var(--gap-lg);
  padding-block:1.5em;
  border-block-end:var(--cart-border);
}
yc-section .cart .content .item .info{
  display:flex;
  gap:var(--gap-xl);
}
yc-section .cart .content .item .info .image{
  height:100px;
  width:100px;
  min-width:100px;
  border-radius:var(--cart-border-radius);
  overflow:hidden;
}
yc-section .cart .content .item .info .image img{
  -o-object-fit:cover;
     object-fit:cover;
}
yc-section .cart .content .item .info .image .card-placeholder{
  width:100%;
  height:100%;
  background-color:rgba(var(--section-text-color), 0.05);
}
yc-section .cart .content .item .info .image .card-placeholder svg{
  color:rgba(var(--section-text-color), 0.3);
}
yc-section .cart .content .item .info .heading{
  display:flex;
  flex-direction:column;
  gap:var(--gap-sm);
}
yc-section .cart .content .item .info .heading [data-cart-item=title]{
  font-size:var(--text-md);
  color:currentColor;
  display:-webkit-box;
  line-clamp:2;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
yc-section .cart .content .item .info .heading .variant{
  font-size:var(--text-xs);
  color:color-mix(in srgb, currentColor 80%, transparent);
}
yc-section .cart .content .item .info .heading > [data-cart-item=price]{
  font-size:var(--text-md);
  color:color-mix(in srgb, currentColor 80%, transparent);
}
yc-section .cart .content .item .info .heading .price{
  display:flex;
  align-items:center;
  gap:4px;
}
yc-section .cart .content .item .info .heading .price .compare-at{
  opacity:0.5;
  -webkit-text-decoration:line-through;
  text-decoration:line-through;
}
yc-section .cart .content .item .controls{
  width:300px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--gap-xl);
}
yc-section .cart .content .item .controls > [data-cart-item=subtotal]{
  flex:1;
  text-align:center;
  display:inline-block;
  font-size:var(--text-md);
  font-weight:550;
}
yc-section .cart .content .list{
  border-radius:var(--cart-border-radius);
  padding-inline:1.5em;
  border:var(--cart-border);
}
yc-section .cart .content .list > *:last-child .item{
  border-block-end:none;
}
yc-section .cart .content .bundle-group{
  display:flex;
  flex-direction:column;
  border:var(--cart-border);
  border-radius:var(--cart-border-radius);
  padding:16px 16px 0 16px;
  margin-block-end:24px;
  background-color:color-mix(in srgb, currentColor 2%, transparent);
}
yc-section .cart .content .bundle-group:first-child{
  margin-block-start:24px;
}
yc-section .cart .content .bundle-group .top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
yc-section .cart .content .bundle-group .top .title{
  font-size:var(--text-md);
  color:color-mix(in srgb, currentColor 80%, transparent);
}
yc-section .cart .content .bundle-group .items .item .controls{
  display:none !important;
}
yc-section .cart .summary{
  grid-area:1/9/2/13;
}
yc-section .cart .summary .box{
  position:sticky;
  inset-block-start:20px;
  padding:1em;
  height:-moz-fit-content;
  height:fit-content;
  display:flex;
  flex-direction:column;
  gap:var(--gap-sm);
  background-color:color-mix(in srgb, currentColor 2%, transparent);
  border:var(--cart-border);
  border-radius:var(--cart-border-radius);
}
yc-section .cart .summary .box h2{
  padding-block-end:0.5em;
}
yc-section .cart .summary .box .coupon-code{
  display:flex;
  align-items:center;
  gap:var(--gap-sm);
  background-color:color-mix(in srgb, currentColor 8%, transparent);
  border-radius:var(--cart-border-radius);
  padding:0.2em 0.5em;
}
yc-section .cart .summary .box .coupon-code button{
  background-color:transparent;
  padding:0;
}
yc-section .cart .summary .box .coupon-code button::before{
  --size:10px;
}
yc-section .cart .summary .box .coupon{
  display:flex;
  padding-block-end:1em;
}
yc-section .cart .summary .box .coupon input:-moz-placeholder + button{
  opacity:0.5;
  cursor:not-allowed;
}
yc-section .cart .summary .box .coupon input:placeholder-shown + button{
  opacity:0.5;
  cursor:not-allowed;
}
yc-section .cart .summary .box .coupon input,
yc-section .cart .summary .box .coupon button{
  background-color:var(--section-bg-color);
  color:currentColor;
}
yc-section .cart .summary .box .coupon input{
  border-end-end-radius:0;
  border-start-end-radius:0;
}
yc-section .cart .summary .box .coupon input:focus{
  z-index:1;
}
yc-section .cart .summary .box .coupon button{
  margin-inline-start:-1px;
  border-start-start-radius:0;
  border-end-start-radius:0;
}
yc-section .cart .summary .box .coupon button:hover{
  border-color:currentColor;
}
yc-section .cart .summary .box .subtotal{
  display:flex;
  flex-direction:column;
  gap:var(--gap-lg);
}
yc-section .cart .summary .box .subtotal .item,
yc-section .cart .summary .box .subtotal .total{
  font-size:var(--text-md);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--gap-md);
}
yc-section .cart .summary .box .subtotal .item{
  color:color-mix(in srgb, currentColor 70%, transparent);
}
yc-section .cart .summary .box .subtotal .item:has(span[hidden]){
  display:none;
}
yc-section .cart .summary .box .subtotal [data-discount]{
  direction:ltr;
}
yc-section .cart .summary .box .subtotal .total-box{
  display:flex;
  flex-direction:column;
  border-block-start:var(--cart-border);
}
yc-section .cart .summary .box .subtotal .total-box .total{
  padding-block:1em;
  font-weight:550;
}
yc-section .cart .summary .box .subtotal .total-box button{
  background-color:rgb(var(--section-text-color));
  color:var(--section-bg-color);
}
yc-section .cart .empty{
  grid-column:1/-1;
  display:none;
}
yc-section .cart[data-is-empty] .content,
yc-section .cart[data-is-empty] .summary{
  display:none;
}
yc-section .cart[data-is-empty] .empty{
  display:flex;
}

@media (max-width: 1280px){
  yc-section .cart yc-cart-items .item{
    grid-template-columns:1fr !important;
  }
  yc-section .cart yc-cart-items .item .controls{
    width:100% !important;
    justify-content:flex-start !important;
  }
  yc-section .cart yc-cart-items .item .controls [data-cart-item=subtotal]{
    flex:none !important;
  }
  yc-section .cart yc-cart-items .item .controls yc-cart-remove-button{
    margin-inline-start:auto;
  }
}
@media (max-width: 1024px){
  yc-section .cart{
    grid-template-columns:1fr;
  }
  yc-section .cart .content,
  yc-section .cart .summary{
    grid-area:unset;
  }
  yc-section .cart .content .box,
  yc-section .cart .summary .box{
    inset-block-start:0;
    position:relative;
  }
  yc-section .cart .summary .box .subtotal .total-box{
    z-index:1;
    width:80%;
    margin:1em 10%;
    padding:1em;
    position:fixed;
    align-items:center;
    padding-inline-start:0.5em;
    inset-block-end:0;
    inset-inline-start:0;
    background-color:var(--section-bg-color);
    border-radius:var(--cart-border-radius);
    box-shadow:var(--shadow-dark-sm);
    border-block-start:none;
    flex-direction:row;
    justify-content:space-between;
  }
  yc-section .cart .summary .box .subtotal .total-box .total{
    padding-block:0;
    padding-inline:0.5em;
    gap:var(--gap-xs);
    flex-direction:column;
    align-items:flex-start;
  }
  yc-section .cart .summary .box .subtotal .total-box .total span:first-of-type{
    font-weight:normal;
  }
  yc-section .cart .summary .box .subtotal .total-box .total span[data-cart-total]{
    font-size:var(--text-lg);
  }
}
@media (max-width: 768px){
  yc-section .cart yc-cart-items .item{
    flex-direction:column;
    align-items:flex-start !important;
  }
  yc-section .cart yc-cart-items .item .controls{
    width:100%;
    gap:var(--gap-xl) !important;
  }
  yc-section .cart yc-cart-items .item .controls yc-cart-remove-button{
    margin-inline-start:auto;
  }
  yc-section .cart .summary .box .subtotal .total-box{
    padding:0.5em;
    margin-inline:1em;
    width:calc(100% - 2em);
  }
  yc-section .cart .summary .box .subtotal .total-box .total span:first-of-type{
    font-size:var(--text-sm);
  }
}
body:has(yc-header[data-sticky]) .cart .summary{
  inset-block-start:100px;
}