/* Adapt Spree's theme tokens; its forms, layouts and behaviours stay intact. */
:root {
  --primary: var(--brand-ink);
  --accent: var(--brand-blush);
  --background: var(--brand-cream);
  --text: var(--brand-ink);
  --border-default-color: var(--brand-line);
  --border-default-radius: 6px;
  --button: var(--brand-ink);
  --button-rgb: 75, 41, 70;
  --button-text: var(--brand-cream);
  --button-border-radius: 5px;
  --button-border-color: var(--brand-ink);
  --button-hover: #63375d;
  --button-hover-text: var(--brand-cream);
  --secondary-button: transparent;
  --secondary-button-text: var(--brand-ink);
  --secondary-button-hover: var(--brand-blush);
  --secondary-button-hover-text: var(--brand-ink);
  --input: var(--brand-line);
  --input-bg: #fff;
  --input-text: var(--brand-ink);
  --input-focus-bg: #fff;
  --input-border-radius: 5px;
}
body[class*="theme-"] { font-family: var(--brand-font); }
body[class*="theme-"] h1, body[class*="theme-"] h2,
body[class*="theme-"] h3, body[class*="theme-"] h4 {
  font-family: var(--brand-font);
  letter-spacing: -.035em;
}
body[class*="theme-"] :focus-visible {
  outline: 3px solid var(--brand-ochre);
  outline-offset: 3px;
}
.site-header { background: var(--brand-cream); }
.site-footer p { margin-top: 8px; line-height: 1.6; }
#checkout-mobile-header, #checkout-desktop-header { color: var(--brand-ink); }
#checkout-summary { background: var(--brand-blush); }
#checkout-desktop-header .brand { margin-bottom: 12px; }
#checkout-mobile-header .brand { margin-block: 12px; }
.card-dialog { background: var(--brand-cream); border-color: var(--brand-line); }
.page-container > h1, .btn-primary, .btn-secondary { text-transform: none; }
.page-container #cart-container { display: grid; gap: 36px; align-items: start; }
.page-container .cart-line-item { border-bottom: 1px solid var(--brand-line); padding-inline: 0; }
.page-container #cart_summary { background: var(--brand-blush); padding: 24px; border-radius: 7px; }
.page-container #cart_summary .cart-summary-container { padding: 0; }
.page-container #cart_summary .cart-summary-container > .flex > .flex { width: 100%; }
.page-container #cart_summary .btn-primary { width: 100%; min-width: 0; }
@media (min-width: 1024px) {
  .page-container #cart-container { grid-template-columns: minmax(0, 1fr) 340px; }
  .page-container #cart_summary { position: sticky; top: 24px; }
}