@layer components {
  .cart-modal {
    /* Native ::backdrop gives the blurred overlay because the dialog is
       opened via showModal() (see the ModalDialog hook). */
    border: none;
    padding: 0;
    max-width: min(100vw - 2 * var(--space-sm-x2), var(--max-reach-lg-x4));
    color: inherit;

    &::backdrop {
      background-color: oklch(from var(--color-primary-9) l c h / 50%);
      backdrop-filter: blur(5px);
    }
  }

  .cart-modal__inner {
    padding: var(--space-lg-x1) var(--space-md);
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
  }

  .cart-modal__close {
    position: absolute;
    width: var(--length-12);
    height: var(--length-12);
    top: var(--space-md);
    right: var(--space-md);
    color: var(--color-red-7);
    padding: var(--space-sm-x1);
    background-color: var(--color-red-1);
    border-radius: var(--border-radius-round);
    box-shadow: var(--shadow-2);
    cursor: pointer;
    transition: all 100ms ease-out;

    svg {
      width: 100%;
      height: 100%;
    }
  }

  @media (any-hover: hover) {
    .cart-modal__close:hover {
      scale: 0.96;
      background-color: var(--color-red-0);
    }
  }

  .cart-modal__close:active {
    scale: 0.9;
  }

  .cart-modal__media {
    display: flex;
    justify-content: center;
  }

  .cart-modal__image {
    aspect-ratio: 5 / 4;
    object-fit: contain;
    max-height: 30vh;
    width: auto;
  }

  .cart-modal__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
  }

  .cart-modal__title {
    font-size: var(--font-size-lg-x3);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tighter);
    color: var(--color-primary-7);
    margin-block-end: var(--space-sm-x4);
  }

  .cart-modal__sku {
    font-size: var(--font-size-sm-x3);
    color: var(--color-neutral-5);
  }

  .cart-modal__unit-price-container {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm-x2);
  }

  .cart-modal__unit-price {
    line-height: var(--line-height-tightest);
  }

  .cart-modal__wholesale-price {
    color: var(--color-primary-6);
    font-weight: var(--font-weight-bold);
  }

  .cart-modal__rrp {
    color: var(--color-primary-6);
  }

  .cart-modal__line-total {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm-x4);
    margin-block-start: var(--space-sm-x3);
    padding-block: var(--space-md) var(--space-sm-x2);
    border-top: var(--border-width-2) solid var(--color-primary-1);
  }

  .cart-modal__line-total-label {
    font-size: var(--font-size-sm-x2);
    color: var(--color-neutral-5);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
  }

  .cart-modal__amount {
    font-size: var(--font-size-lg-x2);
    font-weight: var(--font-weight-bold);
    color: var(--color-primary-6);
  }

  .cart-modal__ex-gst {
    font-size: var(--font-size-sm-x3);
    color: var(--color-neutral-5);
  }

  /* Quantity selector: − [input] + */
  .qty-selector {
    display: flex;
    align-items: center;
    gap: var(--space-sm-x2);
  }

  .qty-selector__form {
    display: flex;
    gap: var(--space-sm-x2);
  }

  .qty-selector__btn {
    padding-block: var(--space-sm-x3) var(--space-sm-x2);
    user-select: none;
  }

  .qty-selector__input {
    min-width: var(--length-16);
    text-align: left;
    padding-inline: var(--space-sm-x1) var(--space-sm-x2);
    border: var(--border-width-2) solid
      oklch(from var(--color-primary-7) l c h / 30%);
    border: var(--border-width-2) solid var(--color-primary-3);
    border-radius: var(--border-radius-2);
    font-size: var(--font-size-md);
    background-color: var(--color-primary-0);
  }

  .cart-modal__actions {
    display: flex;
    gap: var(--space-sm-x2);
    margin-block-start: var(--space-sm-x2);
    justify-content: flex-end;
    align-items: stretch;
    flex-wrap: wrap;
  }

  /* break-md: 48rem (768px) */
  @media (width >=48rem) {
    .cart-modal__inner {
      display: grid;
      grid-template-columns: 1fr 2fr;
      align-items: start;
      gap: var(--space-lg-x1);
      padding: var(--space-lg-x2) var(--space-lg-x1);
    }

    .cart-modal__title {
      padding-inline-end: var(--space-lg-x1);
    }

    .cart-modal__body {
      text-align: left;
    }

    .cart-modal__unit-price,
    .cart-modal__line-total {
      align-items: flex-start;
    }

    .qty-selector {
      justify-content: flex-start;
    }
  }
}