[section="cart"] {
  display: grid;
  gap: var(--spacing-12);

  /* Head */
}

[section="cart"] .cart-head {
    padding: var(--spacing-64);
    border-radius: var(--radius-md);
    background-color: var(--color-surface-container-low);
    display: grid;
    gap: var(--spacing-8);
  }

:is([section="cart"] .cart-head) .title {
      font: var(--font-headline-md);
    }

:is([section="cart"] .cart-head) .description {
      opacity: 0.8;
      text-wrap: balance;
    }

/* Core */

[section="cart"] .cart-core {
    display: grid;
    gap: var(--spacing-64);
    grid-template-columns: 60% auto;
    margin: var(--spacing-64);
  }

:is([section="cart"] .cart-core) ui-cart-items {
      display: grid;
      height: fit-content;
    }

:is(:is([section="cart"] .cart-core) ui-cart-items) .item {
        display: flex;
        gap: var(--spacing-12);
      }

:is(:is(:is([section="cart"] .cart-core) ui-cart-items) .item):not(:last-child) {
          padding-block: var(--spacing-24);
          border-block-end: 1px solid var(--color-surface-container);
        }

:is(:is(:is([section="cart"] .cart-core) ui-cart-items) .item):first-child {
          padding-block-start: var(--spacing-0);
        }

:is(:is(:is([section="cart"] .cart-core) ui-cart-items) .item):last-child {
          padding-block-start: var(--spacing-24);
        }

:is(:is(:is([section="cart"] .cart-core) ui-cart-items) .item) .media {
          width: 120px;
          height: 120px;
          overflow: hidden;
          position: relative;
          border-radius: var(--radius-sm);
          background-color: var(--color-surface-container);
          border: 1px solid var(--color-surface-container);
        }

:is(:is(:is(:is([section="cart"] .cart-core) ui-cart-items) .item) .media) img {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }

:is(:is(:is(:is([section="cart"] .cart-core) ui-cart-items) .item) .media) > [ui-icon] {
            opacity: 0.3;
            position: absolute;
            translate: -50% -50%;
            left: 50%;
            inset-block-start: 50%;
          }

:is(:is(:is([section="cart"] .cart-core) ui-cart-items) .item) .content {
          flex: 2;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
        }

:is(:is(:is(:is([section="cart"] .cart-core) ui-cart-items) .item) .content) .top {
            display: flex;
            justify-content: space-between;
          }

:is(:is(:is(:is(:is([section="cart"] .cart-core) ui-cart-items) .item) .content) .top) .info {
              display: grid;
              gap: var(--spacing-8);
            }

:is(:is(:is(:is(:is(:is([section="cart"] .cart-core) ui-cart-items) .item) .content) .top) .info) .title {
                font: var(--font-title-md);
              }

:is(:is(:is(:is(:is(:is([section="cart"] .cart-core) ui-cart-items) .item) .content) .top) .info) .variants {
                opacity: 0.8;
                font: var(--font-body-sm);
              }

:is(:is(:is(:is([section="cart"] .cart-core) ui-cart-items) .item) .content) .bottom {
            display: flex;
            align-items: center;
            justify-content: space-between;
          }

:is(:is(:is(:is(:is([section="cart"] .cart-core) ui-cart-items) .item) .content) .bottom) .quantity {
              display: flex;
              align-items: center;
              padding: var(--spacing-4);
              border-radius: var(--radius-xs);
              background-color: var(--color-surface-container-low);
            }

:is(:is(:is(:is(:is(:is([section="cart"] .cart-core) ui-cart-items) .item) .content) .bottom) .quantity) .value {
                text-align: center;
                width: var(--spacing-24);
                font: var(--font-body-sm);
                margin-inline: var(--spacing-8);
              }

:is([section="cart"] .cart-core) .summary {
      display: grid;
      gap: var(--spacing-24);
      height: fit-content;
      padding: var(--spacing-24);
      border-radius: var(--radius-lg);
      color: var(--color-on-theme);
      background-color: var(--color-theme);
    }

:is(:is(:is([section="cart"] .cart-core) .summary) .head) h3 {
          font: var(--font-headline-md);
        }

:is(:is([section="cart"] .cart-core) .summary) .detail-items {
        display: grid;
        gap: var(--spacing-12);
      }

:is(:is(:is([section="cart"] .cart-core) .summary) .detail-items) .item {
          opacity: 0.8;
          display: flex;
          align-items: center;
          justify-content: space-between;
        }

:is(:is(:is(:is([section="cart"] .cart-core) .summary) .detail-items) .item):last-child {
            opacity: 1;
            font: var(--font-body-lg);
            padding-block-start: var(--spacing-24);
            border-block-start: 1px dashed color-mix(in srgb, currentColor 38%, transparent);
          }

:is(:is(:is(:is([section="cart"] .cart-core) .summary) .detail-items) .item):has([ui-summary-box][hidden]) {
            display: none;
          }

:is(:is(:is(:is(:is([section="cart"] .cart-core) .summary) .detail-items) .item) .value):has([ui-summary-box="coupon-code"]) {
              display: flex;
              align-items: center;
              gap: var(--spacing-4);
              font: var(--font-body-sm);
              border-radius: var(--radius-xs);
              padding: var(--spacing-2) var(--spacing-8);
              padding-inline-end: var(--spacing-2);
              background-color: color-mix(in srgb, currentColor 8%, transparent);
            }

:is(:is(:is(:is(:is([section="cart"] .cart-core) .summary) .detail-items) .item) .value):has([ui-summary-box="coupon-code"]) [ui-button] {
                width: 24px;
                color: currentColor;
              }

:is(:is(:is(:is(:is(:is([section="cart"] .cart-core) .summary) .detail-items) .item) .value):has([ui-summary-box="coupon-code"]) [ui-button]):hover:not(:disabled) {
                  background-color: color-mix(in srgb, currentColor 12%, transparent);
                }

:is(:is(:is(:is([section="cart"] .cart-core) .summary) .detail-items) .coupon) form {
            display: flex;
            align-items: center;
            gap: var(--spacing-12);
            border-radius: var(--radius-xs);
            padding-inline: var(--spacing-12) var(--spacing-4);
            border: 1px solid color-mix(in srgb, currentColor 38%, transparent);
            transition: border-color var(--transition-standard-default-effects);
          }

:is(:is(:is(:is(:is([section="cart"] .cart-core) .summary) .detail-items) .coupon) form) .icon {
              padding-inline-end: var(--spacing-12);
              border-inline-end: 1px solid color-mix(in srgb, currentColor 38%, transparent);
            }

:is(:is(:is(:is(:is([section="cart"] .cart-core) .summary) .detail-items) .coupon) form) > input {
              flex: 2;
              width: 100%;
              border: none;
              outline: none;
              color: currentColor;
              background-color: transparent;
              padding-block: var(--spacing-12);
            }

:is(:is(:is(:is(:is(:is([section="cart"] .cart-core) .summary) .detail-items) .coupon) form) > input)::placeholder {
                color: color-mix(in srgb, currentColor 50%, transparent);
              }

:is(:is(:is(:is(:is([section="cart"] .cart-core) .summary) .detail-items) .coupon) form) > [ui-button] {
              color: currentColor;
            }

:is(:is(:is(:is(:is(:is([section="cart"] .cart-core) .summary) .detail-items) .coupon) form) > [ui-button]):hover:not(:disabled) {
                background-color: color-mix(in srgb, currentColor 8%, transparent);
              }

:is(:is(:is(:is(:is([section="cart"] .cart-core) .summary) .detail-items) .coupon) form):has(input:focus) {
              border-color: currentColor;
            }

:is(:is(:is([section="cart"] .cart-core) .summary) .cta) > button {
          width: 100%;
        }

:is([section="cart"] .cart-core):has([ui-empty]:not([hidden])) {
      grid-template-columns: 1fr;
    }

/* Responsive */
@media (max-width: 1024px) {
    [section="cart"] .cart-head {
      padding: calc(var(--spacing-24) + var(--spacing-8));
    }

    [section="cart"] .cart-core {
      gap: var(--spacing-12);
      margin: var(--spacing-0);
      grid-template-columns: 1fr;
    }

      :is([section="cart"] .cart-core) ui-cart-items {
        margin: var(--spacing-12);
      }
}

@media (max-width: 769px) {
          :is(:is(:is([section="cart"] .cart-core) ui-cart-items) .item) .media {
            width: 90px;
            height: 90px;
          }
                :is(:is(:is(:is(:is(:is([section="cart"] .cart-core) ui-cart-items) .item) .content) .top) .info) .title {
                  font: var(--font-title-sm);
                }
}