@layer components {
  /* A small product photo, with the logo laid over it when there is one */
  .item-thumb {
    aspect-ratio: 1;
    background-color: var(--color-canvas);
    border-radius: var(--radius);
    flex-shrink: 0;
    inline-size: var(--thumb-size, 3rem);
    overflow: hidden;
    position: relative;
  }

  .item-thumb--bordered {
    background-color: var(--color-surface);
    border: var(--border);
  }

  .item-thumb__image {
    block-size: 100%;
    inline-size: 100%;
    object-fit: contain;
    padding: 0.25rem;
  }

  /* Cart */
  .cart {
    display: flex;
    flex-direction: column;
    gap: 2rem;

    @media (width >= 1024px) {
      flex-direction: row;
      gap: 2.5rem;
    }
  }

  .cart__items {
    flex: 1;
    min-inline-size: 0;

    .headline {
      margin-block-end: 1.5rem;
    }
  }

  .cart__list > * + * {
    border-block-start: var(--border);
  }

  .cart__subtotal {
    margin-block-start: 0.5rem;
    padding-block-start: 1rem;
    text-align: end;

    strong {
      color: var(--color-ink);
      display: block;
      font-weight: 700;
    }

    span {
      color: var(--color-ink-light);
      display: block;
      font-size: var(--text-small);
      line-height: 1.25rem;
    }
  }

  .cart__aside {
    @media (width >= 1024px) {
      flex-shrink: 0;
      inline-size: 16rem;
    }
  }

  .cart-summary {
    background-color: var(--color-canvas);
    border-radius: var(--radius-large);
    padding: 1.5rem;

    @media (width >= 1024px) {
      inset-block-start: 1.5rem;
      position: sticky;
    }
  }

  .cart-summary__row {
    align-items: center;
    color: var(--color-ink);
    display: flex;
    font-weight: 600;
    justify-content: space-between;
    margin-block-end: 1.5rem;

    span:last-child {
      font-weight: 700;
    }
  }

  .cart-summary__note {
    color: var(--color-ink-light);
    font-size: var(--text-x-small);
    line-height: 1rem;
    margin-block-end: 0.75rem;
    text-align: center;
    text-wrap: balance;
  }

  .cart-item {
    --thumb-size: 4rem;

    display: flex;
    gap: 0.75rem;
    padding-block: 1rem;

    @media (width >= 640px) {
      --thumb-size: 5rem;

      gap: 1rem;
    }
  }

  .cart-item__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 0.5rem;
    min-inline-size: 0;
  }

  .cart-item__top,
  .cart-item__controls {
    align-items: flex-start;
    display: flex;
    gap: 0.75rem;
    justify-content: space-between;
  }

  .cart-item__controls {
    align-items: center;
  }

  .cart-item__details {
    min-inline-size: 0;
  }

  .cart-item__name,
  .cart-item__total {
    color: var(--color-ink);
    font-weight: 500;
  }

  .cart-item__total {
    white-space: nowrap;
  }

  .cart-item__variant {
    color: var(--color-ink-medium);
    font-size: var(--text-small);
    line-height: 1.25rem;
  }

  .cart-item__extra {
    color: var(--color-ink-medium);
    font-size: var(--text-x-small);
    line-height: 1rem;

    span {
      color: var(--color-ink-dark);
    }
  }

  .cart-item__price {
    color: var(--color-ink-dark);
    font-size: var(--text-small);
    font-weight: 500;
    line-height: 1.25rem;
    margin-block-start: 0.25rem;
  }

  .cart-item__stepper {
    align-items: center;
    display: flex;
    gap: 0.25rem;
  }

  .cart-item__step {
    align-items: center;
    block-size: 2rem;
    border: 1px solid var(--color-ink-lighter);
    border-radius: var(--radius);
    color: var(--color-ink-soft);
    cursor: pointer;
    display: flex;
    inline-size: 2rem;
    justify-content: center;
    transition: background-color var(--transition), color var(--transition), border-color var(--transition);

    &:hover {
      background-color: var(--color-line-light);
    }

    svg {
      block-size: 1rem;
      inline-size: 1rem;
    }
  }

  .cart-item__step--remove {
    color: var(--color-ink-light);

    &:hover {
      background-color: transparent;
      border-color: oklch(80.8% 0.114 19.571);
      color: oklch(63.7% 0.237 25.331);
    }
  }

  .cart-item__quantity {
    color: var(--color-ink);
    font-size: var(--text-small);
    font-weight: 500;
    inline-size: 2rem;
    line-height: 1.25rem;
    text-align: center;
  }

  .cart-item__remove {
    color: var(--color-sky-dark);
    cursor: pointer;
    font-size: var(--text-small);
    line-height: 1.25rem;

    &:hover {
      color: oklch(39.1% 0.09 240.876);
    }
  }

  /* Empty cart */
  .empty-cart {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-block-size: 60vh;
    padding-block: 4rem;
    text-align: center;

    .headline {
      margin-block-end: 0.75rem;
    }
  }

  .empty-cart__art {
    margin-block-end: 1.5rem;
    position: relative;
  }

  .empty-cart__circle {
    align-items: center;
    background-image: linear-gradient(to bottom, var(--color-sky-soft), var(--color-blue-wash));
    block-size: 6rem;
    border-radius: var(--radius-pill);
    color: var(--color-sky-dark);
    display: flex;
    inline-size: 6rem;
    justify-content: center;

    svg {
      block-size: 3rem;
      inline-size: 3rem;
    }
  }

  .empty-cart__sparkle {
    block-size: 1.5rem;
    color: oklch(63.7% 0.237 25.331);
    inline-size: 1.5rem;
    inset-block-start: -0.25rem;
    inset-inline-end: -0.25rem;
    position: absolute;
  }

  .empty-cart__text {
    color: var(--color-ink-soft);
    font-size: var(--text-medium);
    line-height: 1.625;
    margin-block-end: 2rem;
    max-inline-size: 28rem;
  }

  .empty-cart__actions {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;

    @media (width >= 640px) {
      flex-direction: row;
    }
  }

  /* More from the same school, under the cart and product pages */
  .suggestions {
    border-block-start: var(--border);
    display: grid;
    gap: 2rem;
    margin-block-start: 2.5rem;
    padding-block-start: 2rem;
  }

  .keep-shopping__title {
    color: var(--color-ink);
    font-size: var(--text-medium);
    line-height: 1.75rem;
    margin-block-end: 1rem;

    span {
      font-weight: 700;
    }

    .keep-shopping__lead {
      color: var(--color-ink-medium);
      font-weight: 400;
    }
  }

  .keep-shopping__list {
    display: flex;
    gap: 1rem;
    list-style: none;
    overflow-x: auto;
    padding-block-end: 0.5rem;

    li {
      flex-shrink: 0;
      inline-size: 10rem;
    }
  }
}