/* Cart and checkout, wearing the restaurant's theme.

   WooCommerce ships a light skin and the ordering engine's own checkout styling
   does not load on these two pages, so without this the last two steps of an
   order arrive white in the middle of a dark restaurant — which reads to a
   customer as a different website, and to an owner as a bug.

   Tokens only, so a restaurant with a light theme gets a light checkout for the
   same reason. */

.woocommerce-cart, .woocommerce-checkout { background: var(--ground); color: var(--ink); }

.woocommerce h1, .woocommerce h2, .woocommerce h3,
.woocommerce-cart h1, .woocommerce-checkout h3 { color: var(--ink); font-family: var(--disp); }

.woocommerce table.shop_table,
.woocommerce-checkout #order_review,
.woocommerce-checkout .woocommerce-checkout-review-order,
.woocommerce .cart_totals,
.woocommerce-billing-fields, .woocommerce-shipping-fields,
.woocommerce-additional-fields {
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--r-surface);
}

.woocommerce table.shop_table th,
.woocommerce table.shop_table td,
.woocommerce table.shop_table tfoot td,
.woocommerce table.shop_table tfoot th {
  border-color: var(--line);
  color: var(--ink);
}
.woocommerce table.shop_table thead th { color: var(--faint); }
.woocommerce .product-name, .woocommerce .product-total,
.woocommerce .order-total, .woocommerce .cart-subtotal { color: var(--ink); }
.woocommerce .amount, .woocommerce bdi { color: var(--ink); font-variant-numeric: tabular-nums; }

.woocommerce form .form-row label,
.woocommerce-checkout label,
.woocommerce-billing-fields label { color: var(--muted); }
.woocommerce form .form-row .required { color: var(--accent); border: 0; }

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce .select2-container .select2-selection--single,
.woocommerce-checkout input[type="text"],
.woocommerce-checkout input[type="tel"],
.woocommerce-checkout input[type="email"],
.woocommerce-checkout input[type="date"],
.woocommerce-checkout input[type="number"] {
  background: var(--ground);
  color: var(--ink);
  border: 1.5px solid var(--line);
  border-radius: var(--r-control);
  min-height: var(--touch);
  padding: 11px 13px;
  font-family: var(--ui);
}
.woocommerce form .form-row input.input-text::placeholder { color: var(--faint); }
.woocommerce .select2-container .select2-selection--single .select2-selection__rendered { color: var(--ink); line-height: 1.9; }
.woocommerce .select2-dropdown { background: var(--surface); color: var(--ink); border-color: var(--line); }
.woocommerce .select2-results__option--highlighted { background: var(--accent); color: var(--on-accent); }

.woocommerce-info, .woocommerce-message, .woocommerce-error, .woocommerce-notice {
  background: var(--surface);
  color: var(--ink);
  border-top-color: var(--accent);
  border-radius: var(--r-surface);
}
.woocommerce-info::before, .woocommerce-message::before { color: var(--accent); }

.woocommerce #payment, .woocommerce-checkout #payment { background: transparent; }
.woocommerce #payment div.payment_box { background: var(--surface); color: var(--muted); }

.woocommerce a.button, .woocommerce button.button,
.woocommerce input.button, .woocommerce .button.alt {
  background: var(--accent);
  color: var(--on-accent);
  border-radius: var(--btn-r);
  min-height: var(--btn-h);
  font-family: var(--ui);
  font-weight: var(--btn-weight);
}
.woocommerce a.button:hover, .woocommerce button.button:hover,
.woocommerce .button.alt:hover { background: var(--accent-dark); color: var(--on-accent); }
.woocommerce .button:disabled, .woocommerce .button[disabled] {
  background: var(--accent); color: var(--on-accent);
}

.woocommerce a { color: var(--accent); }
.woocommerce .woocommerce-breadcrumb, .woocommerce .quantity input { color: var(--ink); }
.woocommerce .quantity input { background: var(--ground); border: 1.5px solid var(--line); border-radius: var(--r-control); }