@layer sections{
  [ui-section=cart]{
    --bg-shade-color:oklch(from var(--bg-color) calc(l - 0.0225) calc(c + 0.0181) calc(h + 6.6));
    display:flex;
    gap:var(--spacing-48);
    flex-direction:column;
  }
  [ui-section=cart] .core-area{
    display:grid;
    grid-template-columns:65% auto;
    align-items:flex-start;
    grid-gap:var(--spacing-64);
    gap:var(--spacing-64);
  }
  [ui-section=cart] .core-area table{
    width:100%;
    border-collapse:collapse;
  }
  [ui-section=cart] .core-area table:not(:has(td)){
    display:none;
  }
  [ui-section=cart] .core-area table thead{
    height:calc(var(--spacing-32) + var(--spacing-4));
    border-block-end:1px solid color-mix(in srgb, var(--fg-color), transparent 92%);
  }
  [ui-section=cart] .core-area table thead th{
    padding-block:var(--spacing-8);
    text-align:start;
    white-space:nowrap;
  }
  [dir="rtl"] [ui-section=cart] .core-area table thead th{
    text-align:end;
  }
  [ui-section=cart] .core-area table tbody tr:not(:last-child){
    border-block-end:1px solid color-mix(in srgb, var(--fg-color), transparent 92%);
  }
  [ui-section=cart] .core-area table tbody tr td{
    padding-block:var(--spacing-32);
    white-space:nowrap;
  }
  [ui-section=cart] .core-area table tbody tr td .product{
    display:flex;
    align-items:center;
    gap:var(--spacing-12);
  }
  [ui-section=cart] .core-area table tbody tr td .product .image{
    width:120px;
    min-width:100px;
    height:120px;
    min-height:100px;
    overflow:hidden;
    border-radius:var(--radius-12);
  }
  [ui-section=cart] .core-area table tbody tr td .product .image > img{
    -o-object-fit:cover;
       object-fit:cover;
  }
  [ui-section=cart] .core-area table tbody tr td .product .image ui-image-fallback{
    background-color:var(--bg-shade-color);
  }
  [ui-section=cart] .core-area table tbody tr td .product .info{
    display:grid;
    grid-gap:var(--spacing-8);
    gap:var(--spacing-8);
  }
  [ui-section=cart] .core-area table tbody tr td .product .info .title{
    width:-moz-fit-content;
    width:fit-content;
    text-align:start;
    white-space:normal;
    word-wrap:break-word;
  }
  [ui-section=cart] .core-area table tbody tr td .product .info .price{
    opacity:0.66;
    font:var(--font-body-sm);
  }
  [ui-section=cart] .core-area table tbody tr td .controls{
    --quantity-bg:var(--fg-color);
    display:flex;
    align-items:center;
    gap:var(--spacing-4);
  }
  [ui-section=cart] .core-area table tbody tr td .subtotal{
    font:var(--font-label-md);
  }
  [ui-section=cart] .core-area .summary{
    display:grid;
    grid-gap:var(--spacing-24);
    gap:var(--spacing-24);
  }
  [ui-section=cart] .core-area .summary [ui-slot=accordion-item]{
    padding:var(--spacing-24);
    padding-block-end:var(--spacing-0);
    border:none !important;
    border-radius:var(--radius-20);
    background-color:var(--bg-shade-color);
  }
  [ui-section=cart] .core-area .summary [ui-slot=accordion-item] [ui-slot=accordion-trigger]{
    padding-block:var(--spacing-0) var(--spacing-24) !important;
  }
  [ui-section=cart] .core-area .summary [ui-slot=accordion-item]:has(input[type=checkbox]:checked) [ui-slot=accordion-content]{
    padding-block-end:var(--spacing-24) !important;
  }
  [ui-section=cart] .core-area .summary .coupon{
    display:grid;
    grid-gap:var(--spacing-16);
    gap:var(--spacing-16);
  }
  [ui-section=cart] .core-area .summary .coupon [ui-slot=input-wrapper]{
    display:flex;
    height:48px;
    padding-inline-end:var(--spacing-0);
    transition:all var(--transition-standard-default-spatial);
    border:1px solid color-mix(in srgb, var(--bg-shade-color), black 4%);
    background-color:var(--bg-color);
    gap:var(--spacing-8);
  }
  [ui-section=cart] .core-area .summary .coupon [ui-slot=input-wrapper]:focus{
    border-color:transparent;
    outline-color:transparent;
  }
  [ui-section=cart] .core-area .summary .coupon [ui-slot=input-wrapper]:has([ui-slot=input]:focus){
    border-color:currentcolor;
    outline-color:transparent;
  }
  [ui-section=cart] .core-area .summary .coupon [ui-slot=input-wrapper] [ui-slot=input]{
    flex:2;
    height:100%;
    background-color:transparent;
    box-shadow:none;
  }
  [ui-section=cart] .core-area .summary .coupon [ui-slot=input-wrapper] [ui-slot=input]:focus{
    border-color:transparent;
    outline-color:transparent;
  }
  [ui-section=cart] .core-area .summary .coupon [ui-slot=input-wrapper] [ui-slot=button]{
    width:75px;
    background-color:transparent;
    color:var(--fg-color);
  }
  [ui-section=cart] .core-area .summary .coupon .output{
    display:flex;
    align-items:center;
    justify-content:flex-start;
    height:48px;
    gap:var(--spacing-4);
  }
  [ui-section=cart] .core-area .summary .coupon .output .info{
    display:flex;
    align-items:center;
    gap:var(--spacing-8);
  }
  [ui-section=cart] .core-area .summary .coupon .output .info [ui-slot=status-badge]{
    background-color:oklch(from var(--bg-shade-color) calc(l - 0.0444) calc(c + 0.0456) calc(h - 1));
    color:var(--fg-color);
    font:var(--font-label-sm);
  }
  [ui-section=cart] .core-area .summary .coupon .output [ui-slot=button]{
    color:inherit;
  }
  [ui-section=cart] .core-area .summary .coupon:has([ui-summary-box=coupon-code][hidden]) .output{
    display:none;
  }
  [ui-section=cart] .core-area .summary .coupon:has([ui-summary-box=coupon-code]:not([hidden])) [ui-slot=input-wrapper]{
    display:none;
  }
  [ui-section=cart] .core-area .summary .details{
    display:grid;
    grid-template-columns:repeat(2, auto);
    padding:var(--spacing-24);
    border-radius:var(--radius-20);
    background-color:var(--bg-shade-color);
    grid-gap:var(--spacing-10);
    gap:var(--spacing-10);
  }
  [ui-section=cart] .core-area .summary .details .label,
  [ui-section=cart] .core-area .summary .details .value{
    font:var(--font-label-md);
  }
  [ui-section=cart] .core-area .summary .details [ui-slot=divider]{
    grid-column:1/-1;
    margin-block-start:var(--spacing-16);
    opacity:0.1;
    background-color:var(--fg-color);
  }
  [ui-section=cart] .core-area .summary .details .value{
    display:flex;
    justify-content:flex-end;
  }
  [ui-section=cart] .core-area .summary .details .description{
    grid-column:1/3;
    opacity:0.6;
    font:var(--font-body-sm);
  }
  [ui-section=cart] .core-area .summary .details [ui-slot=button]{
    grid-column:1/3;
  }
  [ui-section=cart] .core-area:has(ui-empty:not([hidden])){
    grid-template-columns:1fr;
  }
  @media (max-width: 1024px){
    [ui-section=cart] .core-area{
      grid-template-columns:1fr;
      gap:var(--spacing-24);
    }
  }
  @media (max-width: 769px){
    [ui-section=cart] .core-area table thead{
      display:none;
    }
    [ui-section=cart] .core-area table tbody tr{
      display:grid;
      grid-template-columns:1fr auto;
      align-items:center;
      grid-gap:var(--spacing-24);
      gap:var(--spacing-24);
    }
    [ui-section=cart] .core-area table tbody tr:has(:last-child){
      margin-block-end:var(--spacing-16);
      padding-block-end:var(--spacing-16);
    }
    [ui-section=cart] .core-area table tbody tr td{
      order:-1;
      width:100%;
      padding:var(--spacing-0);
    }
    [ui-section=cart] .core-area table tbody tr td:first-child, [ui-section=cart] .core-area table tbody tr td:nth-child(4){
      display:flex;
      justify-self:flex-end;
    }
    [ui-section=cart] .core-area table tbody tr td:nth-child(2){
      order:-1;
    }
    [ui-section=cart] .core-area table tbody tr td:nth-child(3){
      display:none;
    }
    [ui-section=cart] .core-area table tbody tr td:nth-child(4){
      order:5;
    }
    [ui-section=cart] .core-area table tbody tr td .product .image{
      width:100px;
      height:100px;
    }
  }
}