/* Cart, checkout, thank-you and account — WooCommerce's classic (shortcode)
   templates mapped onto the design system. The classic templates are the
   ones the plugin's checkout rules, the pack's entry-35 strings and the bank
   transfer hooks were written for; the block versions ignore all three. */

/* ---- page frame --------------------------------------------------------- */
.bjc-commerce { padding-block: var(--bjc-6) var(--bjc-8); }
.bjc-commerce > h1 { margin-bottom: var(--bjc-5); }
.woocommerce-notices-wrapper:empty { display: none; }

.woocommerce-message, .woocommerce-info, .woocommerce-error {
  margin: 0 0 var(--bjc-5); padding: var(--bjc-4) var(--bjc-5);
  border-left: 4px solid var(--bjc-teal);
  background: var(--bjc-blue-grey); border-radius: 0 var(--bjc-radius-lg) var(--bjc-radius-lg) 0;
  list-style: none; color: var(--bjc-ink);
}
.woocommerce-error { border-left-color: var(--bjc-error); background: var(--bjc-error-bg); }
.woocommerce-error li + li { margin-top: var(--bjc-2); }
.woocommerce-message .button, .woocommerce-info .button { float: right; margin-left: var(--bjc-4); }

/* ---- buttons: WooCommerce's own become ours ---------------------------- */
.woocommerce .button, .woocommerce button.button, .woocommerce input.button,
.woocommerce #place_order {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--bjc-2);
  min-height: var(--bjc-target); padding: var(--bjc-3) var(--bjc-5);
  border: 1px solid var(--bjc-navy); border-radius: var(--bjc-radius);
  background: var(--bjc-navy); color: var(--bjc-white);
  font: inherit; font-weight: var(--bjc-weight-medium); cursor: pointer; text-decoration: none;
  transition: background var(--bjc-dur-fast) var(--bjc-ease-out), transform var(--bjc-dur-fast) var(--bjc-ease-out);
}
.woocommerce .button:hover, .woocommerce #place_order:hover { background: var(--bjc-navy-90); color: var(--bjc-white); }
.woocommerce .button:active { transform: translateY(1px); }
.woocommerce .button[disabled], .woocommerce .button:disabled { background: #E3E8EA; color: #5B686E; border-color: #CFD8DB; cursor: not-allowed; }
.woocommerce .button.alt, .woocommerce #place_order { background: var(--bjc-teal); border-color: var(--bjc-teal); }
.woocommerce .button.alt:hover, .woocommerce #place_order:hover { background: #026F7B; border-color: #026F7B; }
.woocommerce a.button.wc-backward, .woocommerce a.button.wc-forward { background: var(--bjc-white); color: var(--bjc-navy); }

/* ---- tables ------------------------------------------------------------- */
.woocommerce table.shop_table { width: 100%; border-collapse: collapse; border: 0; font-size: var(--bjc-text-base); }
.woocommerce table.shop_table th, .woocommerce table.shop_table td {
  padding: var(--bjc-4) var(--bjc-3); text-align: left; vertical-align: middle;
  border-bottom: 1px solid var(--bjc-line);
}
.woocommerce table.shop_table thead th {
  font-family: var(--bjc-font-mono); font-size: var(--bjc-text-xs); font-weight: var(--bjc-weight-medium);
  letter-spacing: var(--bjc-tracking-label); text-transform: uppercase; color: var(--bjc-ink-muted);
  border-bottom-color: var(--bjc-line-strong);
}
.woocommerce table.shop_table td.product-thumbnail img { width: 96px; height: 72px; object-fit: cover; border-radius: var(--bjc-radius); background: var(--bjc-blue-grey); }
.woocommerce table.shop_table td.product-name a { color: var(--bjc-navy); font-weight: var(--bjc-weight-medium); text-decoration: none; }
.woocommerce table.shop_table td.product-name a:hover { text-decoration: underline; }
.woocommerce table.shop_table td.product-remove a.remove {
  display: inline-grid; place-items: center; width: var(--bjc-target); height: var(--bjc-target);
  border-radius: 50%; color: var(--bjc-ink-muted); font-size: 1.5rem; line-height: 1; text-decoration: none;
}
.woocommerce table.shop_table td.product-remove a.remove:hover { background: var(--bjc-error-bg); color: var(--bjc-error); }
.woocommerce .quantity { display: inline-flex; }
.woocommerce .quantity input.qty {
  min-height: var(--bjc-target); width: 5rem; padding: var(--bjc-2);
  border: 1px solid var(--bjc-line-strong); border-radius: var(--bjc-radius);
  font: inherit; font-family: var(--bjc-font-mono); text-align: center;
}
.woocommerce td.actions { padding-top: var(--bjc-5); }
.woocommerce td.actions .coupon { display: inline-flex; gap: var(--bjc-2); flex-wrap: wrap; }
.woocommerce td.actions .coupon input.input-text { min-height: var(--bjc-target); padding: var(--bjc-2) var(--bjc-3); border: 1px solid var(--bjc-line-strong); border-radius: var(--bjc-radius); font: inherit; }
.woocommerce td.actions > .button { float: right; }
.woocommerce-cart .cart-collaterals { margin-top: var(--bjc-7); }
.woocommerce .cart_totals { max-width: 480px; margin-left: auto; padding: var(--bjc-5); background: var(--bjc-blue-grey); border-radius: var(--bjc-radius-xl); }
.woocommerce .cart_totals h2 { font-size: var(--bjc-display-3); }
.woocommerce .cart_totals table.shop_table th { width: 45%; color: var(--bjc-ink-muted); font-weight: var(--bjc-weight-normal); }
.woocommerce .cart_totals tr.order-total th, .woocommerce .cart_totals tr.order-total td { font-family: var(--bjc-font-display); font-size: var(--bjc-text-xl); font-weight: var(--bjc-weight-semibold); color: var(--bjc-navy); border-bottom: 0; }
.woocommerce .cart_totals .wc-proceed-to-checkout { margin-top: var(--bjc-4); }
.woocommerce .cart_totals .wc-proceed-to-checkout .button { width: 100%; }
.woocommerce .includes_tax, .woocommerce .tax-total { font-size: var(--bjc-text-sm); color: var(--bjc-ink-muted); }
.woocommerce ul#shipping_method { list-style: none; margin: 0; padding: 0; }
.woocommerce ul#shipping_method li { display: flex; gap: var(--bjc-2); align-items: baseline; }

/* ---- checkout: form left, order right ------------------------------------ */
.woocommerce-checkout form.checkout { display: grid; gap: var(--bjc-7); }
@media (min-width: 1000px) {
  .woocommerce-checkout form.checkout { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--bjc-9); align-items: start; }
  .woocommerce-checkout form.checkout > #order_review_heading,
  .woocommerce-checkout form.checkout > #order_review { grid-column: 2; }
  .woocommerce-checkout form.checkout > #customer_details { grid-column: 1; grid-row: 1 / span 2; }
  .woocommerce-checkout form.checkout > #order_review_heading { grid-row: 1; align-self: start; }
  .woocommerce-checkout form.checkout > #order_review { grid-row: 2; position: sticky; top: calc(var(--bjc-target) + var(--bjc-6)); }
}
.woocommerce form.checkout h3, #order_review_heading { font-size: var(--bjc-display-3); margin: 0 0 var(--bjc-4); }
.woocommerce form.checkout h3#ship-to-different-address { font-size: var(--bjc-text-base); font-family: var(--bjc-font-sans); font-weight: var(--bjc-weight-medium); }
.woocommerce form.checkout h3#ship-to-different-address label { display: flex; align-items: center; gap: var(--bjc-2); cursor: pointer; }
/* WooCommerce floats billing and shipping side by side inside the left column,
   which halves the width of every field. They stack here; the two columns of
   this layout are the form and the order, not two halves of the form. */
.woocommerce form.checkout .col2-set { display: block; }
.woocommerce form.checkout .col2-set .col-1, .woocommerce form.checkout .col2-set .col-2 { float: none; width: 100%; margin-bottom: var(--bjc-6); }
.woocommerce form.checkout .col2-set::after { content: ""; display: table; clear: both; }

.woocommerce form .form-row { margin: 0 0 var(--bjc-4); padding: 0; }
.woocommerce form .form-row label { display: block; margin-bottom: var(--bjc-1); font-size: var(--bjc-text-sm); font-weight: var(--bjc-weight-medium); color: var(--bjc-navy); }
.woocommerce form .form-row label .optional { font-weight: var(--bjc-weight-normal); color: var(--bjc-ink-muted); }
.woocommerce form .form-row label .required { color: var(--bjc-teal-text); text-decoration: none; }
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce form .form-row .select2-container .select2-selection--single {
  width: 100%; min-height: var(--bjc-target); padding: var(--bjc-2) var(--bjc-3);
  border: 1px solid var(--bjc-line-strong); border-radius: var(--bjc-radius);
  background: var(--bjc-white); color: var(--bjc-ink); font: inherit;
}
.woocommerce form .form-row textarea { min-height: 7rem; resize: vertical; }
.woocommerce form .form-row.woocommerce-invalid input.input-text { border-color: var(--bjc-error); border-width: 2px; }
.woocommerce form .form-row.woocommerce-validated input.input-text { border-color: var(--bjc-success); }
.woocommerce form .form-row .description { margin-top: var(--bjc-1); font-size: var(--bjc-text-sm); color: var(--bjc-ink-muted); }
@media (min-width: 640px) {
  .woocommerce form .form-row-first, .woocommerce form .form-row-last { width: calc(50% - var(--bjc-2)); display: inline-block; vertical-align: top; }
  .woocommerce form .form-row-first { margin-right: var(--bjc-3); }
}
.select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 2.5rem; padding-left: 0; }
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 100%; }

/* The order card. */
#order_review { padding: var(--bjc-5); background: var(--bjc-blue-grey); border-radius: var(--bjc-radius-xl); }
#order_review table.shop_table { background: transparent; }
#order_review table.shop_table thead th { border-bottom-color: var(--bjc-line-strong); }
#order_review table.shop_table tfoot th { font-weight: var(--bjc-weight-normal); color: var(--bjc-ink-muted); }
#order_review table.shop_table tfoot tr.order-total th,
#order_review table.shop_table tfoot tr.order-total td { font-family: var(--bjc-font-display); font-size: var(--bjc-text-xl); font-weight: var(--bjc-weight-semibold); color: var(--bjc-navy); border-bottom: 0; }
#order_review .product-quantity { font-family: var(--bjc-font-mono); color: var(--bjc-ink-muted); }

/* Payment. */
#payment { margin-top: var(--bjc-5); background: transparent; }
#payment ul.wc_payment_methods { list-style: none; margin: 0; padding: 0; }
#payment ul.wc_payment_methods li { padding: var(--bjc-3) 0; border-top: 1px solid var(--bjc-line); }
#payment ul.wc_payment_methods li label { font-weight: var(--bjc-weight-medium); color: var(--bjc-navy); cursor: pointer; }
#payment ul.wc_payment_methods li input[type="radio"] { accent-color: var(--bjc-navy); margin-right: var(--bjc-2); }
#payment div.payment_box { margin: var(--bjc-3) 0 0; padding: var(--bjc-3) var(--bjc-4); background: var(--bjc-white); border-radius: var(--bjc-radius-lg); font-size: var(--bjc-text-sm); color: var(--bjc-ink-muted); }
#payment div.payment_box p:last-child { margin-bottom: 0; }
#payment .woocommerce-terms-and-conditions-wrapper { margin: var(--bjc-4) 0; font-size: var(--bjc-text-sm); }
#payment .woocommerce-terms-and-conditions-wrapper label { display: grid; grid-template-columns: auto 1fr; gap: var(--bjc-2); align-items: start; }
#payment .woocommerce-privacy-policy-text { font-size: var(--bjc-text-sm); color: var(--bjc-ink-muted); }
#payment .place-order { padding: 0; margin-top: var(--bjc-4); }
#payment #place_order { width: 100%; padding-block: calc(var(--bjc-3) + 2px); font-size: var(--bjc-text-lg); }

/* Login / coupon toggles above the form. */
.woocommerce-form-coupon-toggle, .woocommerce-form-login-toggle { margin-bottom: var(--bjc-4); }
.woocommerce-form-coupon-toggle .woocommerce-info { margin: 0; }
.checkout_coupon { display: flex; gap: var(--bjc-2); flex-wrap: wrap; margin-bottom: var(--bjc-5); }
.checkout_coupon .form-row { margin: 0; flex: 1 1 14rem; }

/* ---- thank-you ---------------------------------------------------------- */
.woocommerce-order { display: grid; gap: var(--bjc-6); }
.woocommerce-thankyou-order-received { font-family: var(--bjc-font-display); font-size: var(--bjc-display-3); color: var(--bjc-navy); }
.woocommerce-order-overview { display: grid; gap: var(--bjc-3); grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); list-style: none; margin: 0; padding: var(--bjc-4) var(--bjc-5); background: var(--bjc-blue-grey); border-radius: var(--bjc-radius-xl); }
.woocommerce-order-overview li { font-size: var(--bjc-text-sm); color: var(--bjc-ink-muted); }
.woocommerce-order-overview li strong { display: block; margin-top: 2px; font-family: var(--bjc-font-mono); font-size: var(--bjc-text-base); color: var(--bjc-navy); }
.woocommerce-bacs-bank-details { padding: var(--bjc-5); border: 1px solid var(--bjc-line); border-radius: var(--bjc-radius-xl); }
.woocommerce-bacs-bank-details h2 { font-size: var(--bjc-display-3); }
.wc-bacs-bank-details { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--bjc-2); font-family: var(--bjc-font-mono); }
.woocommerce-order-details h2, .woocommerce-customer-details h2 { font-size: var(--bjc-display-3); }
.woocommerce-columns--addresses { display: grid; gap: var(--bjc-5); }
@media (min-width: 640px) { .woocommerce-columns--addresses { grid-template-columns: 1fr 1fr; } }
.woocommerce-customer-details address { padding: var(--bjc-4); background: var(--bjc-warm); border-radius: var(--bjc-radius-lg); font-style: normal; line-height: var(--bjc-leading); }

/* ---- account ------------------------------------------------------------ */
.woocommerce-MyAccount-navigation ul { list-style: none; margin: 0 0 var(--bjc-6); padding: 0; display: flex; flex-wrap: wrap; gap: var(--bjc-2); }
.woocommerce-MyAccount-navigation a { display: inline-flex; align-items: center; min-height: var(--bjc-target); padding: 0 var(--bjc-4); border: 1px solid var(--bjc-line-strong); border-radius: 999px; color: var(--bjc-navy); text-decoration: none; font-weight: var(--bjc-weight-medium); }
.woocommerce-MyAccount-navigation li.is-active a { background: var(--bjc-navy); border-color: var(--bjc-navy); color: var(--bjc-white); }

/* Empty cart. */
.cart-empty.woocommerce-info { font-size: var(--bjc-text-lg); }
.return-to-shop { margin-top: var(--bjc-4); }

/* WooCommerce draws its notice icons with its own icon font in ::before; the
   theme's notices carry the meaning in the left border and the wording, so
   the glyph is removed rather than rendered as a box where the font is late. */
.woocommerce-message::before, .woocommerce-info::before, .woocommerce-error::before,
.woocommerce-error li::before { display: none !important; content: none !important; }
.woocommerce-message, .woocommerce-info, .woocommerce-error { padding-left: var(--bjc-4) !important; }