Cart SummaryBLK

/* -- Cart Summary (website · Shop) ----------------------------------------

   Shows cart totals and the action to proceed to checkout - a free-shipping progress bar, the breakdown, the total, checkout and how you can pay. */

@layer components {

  /* every box in the block measures border-box - the same on any page */

  :where(.mk-cart-summary, .mk-cart-summary *, .mk-cart-summary ::before, .mk-cart-summary ::after) { box-sizing: border-box; }

  .mk-cart-summary { display: grid; gap: 1.25rem; padding: 1.5rem; border: 1px solid var(--border);

    border-radius: var(--radius-xl);

    background: var(--card);

    color: var(--card-foreground); }

  .mk-cart-summary-title { margin: 0; font-size: 1.125rem; font-weight: 600; }

  .mk-cart-summary-shipping { display: grid; gap: 0.5rem; padding: 0.875rem 1rem; border-radius: var(--radius-lg); background: var(--muted); font-size: 0.875rem;

    & progress { width: 100%; }

    & strong { font-weight: 600; }

  }

  .mk-cart-summary-lines { display: grid; gap: 0.625rem; margin: 0;

    & div { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.9375rem; }

    & dt { color: var(--muted-foreground); }

    & dd { margin: 0; font-variant-numeric: tabular-nums; }

    & [data-discount] dd { color: #15803d; font-weight: 500; }

  }

  .mk-cart-summary-total { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding-block-start: 1rem; border-block-start: 1px solid var(--border);

    & span { font-weight: 600; }

    & small { display: block; color: var(--muted-foreground); font-size: 0.75rem; font-weight: 400; }

    & output { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }

  }

  .mk-cart-summary-checkout { width: 100%; }

  .mk-cart-summary-pay { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.375rem; margin: 0; padding: 0; list-style: none;

    & li { padding: 0.125rem 0.5rem; border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--muted-foreground); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.04em; }

  }

  .mk-cart-summary-note { display: flex; align-items: center; justify-content: center; gap: 0.375rem; margin: 0; color: var(--muted-foreground); font-size: 0.75rem;

    & svg { width: 0.875rem; height: 0.875rem; }

  }

  .mk-cart-summary[data-variant="compact"] { gap: 0.875rem; padding: 1rem;

    & .mk-cart-summary-total { padding: 0; border: 0; }

    & .mk-cart-summary-total output { font-size: 1.125rem; }

  }

  /* -- Accessibility ------------------------------------------- */

  @media (forced-colors: active) {

    .mk-cart-summary { border-color: CanvasText; }

  }

}