/* Store-only styles to sit alongside global style.css */
:root { --accent: var(--brand-500); }

.free-ship {
  background: linear-gradient(90deg, rgba(42,114,178,.18), rgba(42,114,178,.08));
  border: 1px dashed var(--border);
  color: var(--text);
  padding: .75rem 1rem;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: 1rem;
}
.free-ship strong { color: var(--brand-200); }

.product-card h3 { margin: .5rem 0 .25rem; }
.product-card .muted { margin: 0 0 .5rem; }
.product-card .price { font-weight: 800; margin: .25rem 0 .5rem; }

.variant-controls {
  display: grid;
  grid-template-columns: 1fr 110px;
  gap: .5rem;
  margin: .25rem 0 .75rem;
}
.variant-controls select,
.variant-controls input[type="number"] {
  width: 100%;
  padding: .6rem .75rem;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 10px;
}

.cart-items { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }
.cart-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: .5rem .75rem;
  align-items: center;
  padding: .6rem .75rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: linear-gradient(180deg, var(--surface), var(--surface-2));
}
.item-meta { color: var(--muted); font-size: var(--fs-300); }
.item-actions { display: inline-flex; gap: .35rem; align-items: center; }
.qty-btn, .remove-btn {
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  border-radius: 8px;
  padding: .25rem .5rem;
  cursor: pointer;
}
.remove-btn { background: transparent; color: var(--muted); }

.totals { margin-top: .75rem; display: grid; gap: .25rem; }
.totals .row { display: flex; justify-content: space-between; align-items: center; }
.totals .grand { font-weight: 800; }

.checkout-card .hint { color: var(--muted); font-size: var(--fs-300); }

.order-actions { display: grid; grid-template-columns: 1fr; gap: .5rem; }
.order-actions .btn { width: 100%; }

.uc-note { margin-top: .5rem; font-size: var(--fs-300); color: var(--muted); }

@media (max-width: 900px) {
  .variant-controls { grid-template-columns: 1fr 1fr; }
}