/* ========================================================================= */
/* ==      FINAL CART STYLES - Inspired by Reference Site's CSS           == */
/* ========================================================================= */

/* 
 * 1. The main container for the totals section.
 * We apply the core layout rule here.
*/
.cart__footer .totals {
  display: flex;
  justify-content: space-between; /* The key for space-between alignment */
  align-items: center;          /* Vertically center items */
  padding-top: 1.5rem;            /* Add space above */
  padding-bottom: 0rem;         /* Add space below */
  margin-bottom: 1.5rem;          /* Space before the checkout button */
  border-bottom: 1px solid rgba(var(--color-foreground), 0.08); /* Subtle separator */
}

/* 
 * 2. Style for the "Subtotal" label (h2.totals__total).
 * We make it large, bold, and use a professional color.
*/
.cart__footer .totals__total {
  font-size: 24px;      /* Inspired by reference: large and clear font size */
  font-weight: 700;     /* Inspired by reference: BOLD */
  line-height: 1.2;     /* A natural line height */
  color: #0b2a4a; /* Use your theme's main text color */
  margin: 0;
}

/* 
 * 3. Style for the price value (p.totals__total-value).
 * We make it match the "Subtotal" label's style but with an accent color.
*/
.cart__footer .totals__total-value {
  font-size: 24px;      /* Inspired by reference: large and clear font size */
  font-weight: 700;     /* Inspired by reference: BOLD */
  line-height: 1.2;
  color: rgb(var(--color-accent-1)); /* Use your theme's accent color (the red one) */
  margin: 0;
}

/* 
 * 4. Style for the checkout button.
 * Keep it bold and uppercase for a clear call-to-action.
*/
.cart__footer .cart__checkout-button {
  font-weight: 700;
  text-transform: uppercase;
  height: 54px;
    max-height: 54px;
    font-size: 24px;
}

/* 
 * 5. Remove conflicting default styles from the original theme.
 * This ensures our new styles take precedence.
*/
.totals > * + * {
  margin-left: 0; /* Disable the old margin rule */
}

@media all and (min-width: 750px) {
  .totals {
    /* Ensure the old right-alignment rule is disabled */
    justify-content: space-between;
  }
}