/* ==========================================================================
   Store pages: checkout, order confirmation, customer account.
   Loaded after style.css and built from its custom properties.
   ========================================================================== */

.checkout-totals {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: .45rem 0;
}
.checkout-totals dt { font-weight: 400; color: var(--muted); }
.checkout-totals dd { margin: 0; padding-left: 1rem; text-align: right; }
.checkout-totals .checkout-totals__grand {
  padding-top: .6rem;
  border-top: 1px solid var(--line);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--ink);
}

@media (min-width: 992px) {
  .checkout-summary { position: sticky; top: calc(var(--header-h) + 1rem); }
}

.pay-option {
  display: flex;
  gap: .75rem;
  align-items: flex-start;
  padding: .9rem 1rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
}
.pay-option:has(input:checked) { border-color: var(--green); background: var(--sage-soft); }
.pay-option .form-check-input { margin-top: .25rem; flex-shrink: 0; }

.order-status {
  display: inline-block;
  padding: .2rem .75rem;
  border-radius: var(--pill);
  background: var(--cream);
  color: var(--ink);
  font-size: .85rem;
  font-weight: 600;
}
.order-status--processing,
.order-status--shipped   { background: var(--sage-soft); color: var(--green); }
.order-status--completed { background: var(--green); color: #fff; }
.order-status--cancelled,
.order-status--refunded  { background: var(--blush-deep); color: #a33a22; }

.account-nav { display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; align-items: center; }
.account-nav a[aria-current="page"] { font-weight: 700; text-decoration: underline; }

.account-table { width: 100%; border-collapse: collapse; }
.account-table th,
.account-table td { padding: .85rem .5rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
.account-table th { color: var(--muted); font-size: .8rem; letter-spacing: .04em; text-transform: uppercase; }

.auth-card { max-width: 480px; margin-inline: auto; }

.product-description ul { padding-left: 1.2rem; }