/* Best Bike Storage: checkout.
   Standard WooCommerce markup, restyled. No section is moved from where core
   renders it, so an AJAX refresh of the order review cannot break the layout. */

:root {
  --bbs-ink:   #0a0a0a;
  --bbs-body:  #4a4a4a;
  --bbs-mute:  #8a8a8a;
  --bbs-line:  #e4e4e4;
  --bbs-wash:  #f7f7f7;
  --bbs-paper: #ffffff;
}

/* ------------------------------------------------------------ page frame */

/* .site-content already supplies the page gutter (bbs-mobile.css). */
.bbs-checkout-page .woocommerce { max-width: 1180px; margin-inline: auto; }
.bbs-checkout-page .bbs-hidden-field { display: none !important; }

.bbs-cobanner {
  border-bottom: 1px solid var(--bbs-line);
  padding-block: 28px 24px;
  margin-bottom: 40px;
}
.bbs-cobanner__crumbs {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--bbs-mute); margin-bottom: 14px;
}
.bbs-cobanner__crumbs a { color: var(--bbs-mute); text-decoration: none; }
.bbs-cobanner__crumbs a:hover { color: var(--bbs-ink); }
.bbs-cobanner__crumbs [aria-current] { color: var(--bbs-ink); font-weight: 600; }
.bbs-cobanner__title {
  margin: 0 0 6px; font-size: 30px; line-height: 1.15;
  font-weight: 600; letter-spacing: -.02em; color: var(--bbs-ink);
}
.bbs-cobanner__note { margin: 0; font-size: 14px; color: var(--bbs-body); }

/* --------------------------------------------------------------- columns */

@media (min-width: 981px) {
  .bbs-checkout-page form.checkout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    grid-template-areas:
      "notice  notice"
      "details reviewhead"
      "details review";
    column-gap: 56px;
    align-items: start;
  }
  .bbs-checkout-page #customer_details      { grid-area: details; min-width: 0; }
  .bbs-checkout-page #order_review_heading  { grid-area: reviewhead; }
  .bbs-checkout-page #order_review          { grid-area: review; position: sticky; top: 110px; }
}

/* Core wraps billing and shipping in .col-1 / .col-2 floats. Stack them. */
.bbs-checkout-page #customer_details .col-1,
.bbs-checkout-page #customer_details .col-2 {
  float: none; width: 100%; margin: 0;
}
.bbs-checkout-page #customer_details .col-2:not(:empty) { margin-top: 36px; }

/* --------------------------------------------------------------- headings */

.bbs-checkout-page #customer_details h3,
.bbs-checkout-page #order_review_heading {
  margin: 0 0 20px;
  font-size: 15px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--bbs-ink);
  padding-bottom: 12px;
  border-bottom: 1px solid var(--bbs-line);
}
.bbs-checkout-page #customer_details .col-2 h3 { margin-top: 0; }

/* ---------------------------------------------------------------- fields */

.bbs-checkout-page .woocommerce-billing-fields__field-wrapper,
.bbs-checkout-page .woocommerce-shipping-fields__field-wrapper {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 16px;
}
.bbs-checkout-page .form-row { margin: 0; padding: 0; width: auto; float: none; }
.bbs-checkout-page .form-row-wide,
.bbs-checkout-page .woocommerce-billing-fields__field-wrapper > p:only-child { grid-column: 1 / -1; }

.bbs-checkout-page .form-row label {
  display: block; margin-bottom: 7px;
  font-size: 13px; font-weight: 500; color: var(--bbs-ink);
}
.bbs-checkout-page .form-row .required { color: var(--bbs-mute); text-decoration: none; }
.bbs-checkout-page .form-row .optional { color: var(--bbs-mute); font-weight: 400; }

.bbs-checkout-page .form-row input.input-text,
.bbs-checkout-page .form-row textarea,
.bbs-checkout-page .form-row select,
.bbs-checkout-page .select2-container .select2-selection--single {
  width: 100%;
  height: 50px;
  padding: 0 14px;
  font-size: 15px;
  color: var(--bbs-ink);
  background: var(--bbs-paper);
  border: 1px solid var(--bbs-line);
  border-radius: 4px;
  box-shadow: none;
  transition: border-color .15s ease, box-shadow .15s ease;
  -webkit-appearance: none;
  appearance: none;
}
.bbs-checkout-page .form-row textarea { height: 100px; padding-block: 12px; }

.bbs-checkout-page .form-row input.input-text:focus,
.bbs-checkout-page .form-row select:focus,
.bbs-checkout-page .form-row textarea:focus {
  outline: none;
  border-color: var(--bbs-ink);
  box-shadow: 0 0 0 3px rgba(10, 10, 10, .08);
}
.bbs-checkout-page .woocommerce-invalid input.input-text,
.bbs-checkout-page .woocommerce-invalid select { border-color: #c0392b; }

/* select2, used by the province and country dropdowns */
.bbs-checkout-page .select2-container .select2-selection--single {
  display: flex; align-items: center;
}
.bbs-checkout-page .select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: normal; padding: 0; color: var(--bbs-ink);
}
.bbs-checkout-page .select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 48px; right: 8px;
}

/* checkboxes */
.bbs-checkout-page .form-row.bbs-optin,
.bbs-checkout-page .form-row.create-account,
.bbs-checkout-page .woocommerce-shipping-fields > h3 {
  grid-column: 1 / -1;
}
.bbs-checkout-page .woocommerce-form__label-for-checkbox {
  display: flex; align-items: center; gap: 10px;
  margin: 0; font-size: 14px; font-weight: 400; color: var(--bbs-body);
  cursor: pointer;
}
.bbs-checkout-page .woocommerce-form__label-for-checkbox input[type="checkbox"] {
  width: 18px; height: 18px; margin: 0; flex: 0 0 18px;
  accent-color: var(--bbs-ink);
}
.bbs-checkout-page .woocommerce-shipping-fields > h3 {
  border: 0; padding: 0; margin: 32px 0 0;
  font-size: 14px; letter-spacing: 0; text-transform: none; font-weight: 400;
}
.bbs-checkout-page .woocommerce-shipping-fields .shipping_address { margin-top: 20px; }

/* ------------------------------------------------------- order summary */

.bbs-checkout-page #order_review {
  background: var(--bbs-wash);
  border: 1px solid var(--bbs-line);
  border-radius: 6px;
  padding: 24px 22px;
}

.bbs-checkout-page .shop_table {
  width: 100%;
  border: 0;
  border-collapse: collapse;
  margin: 0;
  background: transparent;
}
.bbs-checkout-page .shop_table th,
.bbs-checkout-page .shop_table td {
  border: 0;
  padding: 12px 0;
  background: transparent;
  vertical-align: middle;
  font-size: 14px;
  color: var(--bbs-body);
}
.bbs-checkout-page .shop_table thead { display: none; }
/* Money cells only. The shipping cell is also a last child, and nowrap
   there pushed the delivery options straight out of the panel. */
.bbs-checkout-page .shop_table td.product-total,
.bbs-checkout-page .shop_table tfoot td { text-align: right; white-space: nowrap; }

.bbs-checkout-page .shop_table .cart_item td { border-bottom: 1px solid var(--bbs-line); }

.bbs-sum-line { display: flex; align-items: center; gap: 12px; }
.bbs-sum-media {
  flex: 0 0 56px; width: 56px; height: 56px;
  background: var(--bbs-paper);
  border: 1px solid var(--bbs-line);
  border-radius: 4px;
  overflow: hidden;
}
.bbs-sum-media img { width: 100%; height: 100%; object-fit: contain; display: block; }
.bbs-sum-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.bbs-sum-name { font-size: 14px; font-weight: 500; color: var(--bbs-ink); line-height: 1.35; }
.bbs-sum-name a { color: inherit; text-decoration: none; }
.bbs-sum-qty { font-size: 12px; color: var(--bbs-mute); }

/* totals */
.bbs-checkout-page .shop_table tfoot th {
  font-size: 14px; font-weight: 400; color: var(--bbs-body); text-align: left;
}
.bbs-checkout-page .shop_table tfoot td { text-align: right; color: var(--bbs-ink); }
.bbs-checkout-page .shop_table tfoot tr:not(.order-total) th,
.bbs-checkout-page .shop_table tfoot tr:not(.order-total) td {
  border-bottom: 1px solid var(--bbs-line);
}
.bbs-checkout-page .shop_table tfoot .order-total th,
.bbs-checkout-page .shop_table tfoot .order-total td {
  padding-top: 16px;
  font-size: 18px;
  font-weight: 600;
  color: var(--bbs-ink);
}
.bbs-checkout-page .shop_table tfoot .order-total .includes_tax {
  display: block; font-size: 12px; font-weight: 400; color: var(--bbs-mute);
}

/* shipping choices, inside the totals table where core puts them */
.bbs-checkout-page .woocommerce-shipping-totals td { padding-block: 8px 14px; }
.bbs-checkout-page ul#shipping_method {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 8px;
}
.bbs-checkout-page ul#shipping_method li {
  margin: 0; padding: 0;
  background: var(--bbs-paper);
  border: 1px solid var(--bbs-line);
  border-radius: 4px;
  transition: border-color .15s ease;
}
.bbs-checkout-page ul#shipping_method li:hover { border-color: #c4c4c4; }
.bbs-checkout-page ul#shipping_method li:has(input:checked) {
  border-color: var(--bbs-ink);
  box-shadow: inset 0 0 0 1px var(--bbs-ink);
}
.bbs-checkout-page ul#shipping_method label {
  display: flex; align-items: flex-start; flex-wrap: wrap; gap: 4px 10px;
  padding: 12px 14px;
  margin: 0;
  font-size: 14px; color: var(--bbs-ink);
  cursor: pointer;
}
.bbs-checkout-page ul#shipping_method input[type="radio"] {
  width: 17px; height: 17px; margin: 1px 0 0; flex: 0 0 17px;
  accent-color: var(--bbs-ink);
}
.bbs-checkout-page ul#shipping_method .amount { margin-left: auto; font-weight: 600; }
.bbs-ship-note {
  flex: 1 0 100%;
  padding-left: 27px;
  font-size: 12px; color: var(--bbs-mute);
}
.bbs-checkout-page .woocommerce-shipping-destination { font-size: 12px; color: var(--bbs-mute); margin: 10px 0 0; }

/* coupon, shown above the form by core */
.bbs-checkout-page .checkout_coupon {
  border: 1px solid var(--bbs-line);
  border-radius: 6px;
  padding: 20px;
  margin: 0 0 28px;
  background: var(--bbs-paper);
}
.bbs-checkout-page .checkout_coupon .form-row { display: inline-block; vertical-align: top; }
.bbs-checkout-page .woocommerce-form-coupon-toggle { margin-bottom: 24px; }

/* ------------------------------------------------------------- payment */

.bbs-checkout-page #payment {
  background: transparent;
  border-radius: 0;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--bbs-line);
}
.bbs-checkout-page #payment ul.payment_methods {
  list-style: none; margin: 0 0 18px; padding: 0; border: 0;
  display: flex; flex-direction: column; gap: 8px;
}
.bbs-checkout-page #payment ul.payment_methods li {
  margin: 0; padding: 0;
  background: var(--bbs-paper);
  border: 1px solid var(--bbs-line);
  border-radius: 4px;
}
.bbs-checkout-page #payment ul.payment_methods li:has(input:checked) {
  border-color: var(--bbs-ink);
  box-shadow: inset 0 0 0 1px var(--bbs-ink);
}
.bbs-checkout-page #payment ul.payment_methods li > label {
  display: flex; align-items: center; gap: 10px;
  padding: 14px;
  margin: 0;
  font-size: 14px; font-weight: 500; color: var(--bbs-ink);
  cursor: pointer;
}
.bbs-checkout-page #payment ul.payment_methods li input[type="radio"] {
  width: 17px; height: 17px; margin: 0; flex: 0 0 17px;
  accent-color: var(--bbs-ink);
}
.bbs-checkout-page #payment ul.payment_methods li img { max-height: 24px; width: auto; margin-left: auto; }
.bbs-checkout-page #payment .payment_box {
  background: var(--bbs-wash);
  margin: 0;
  padding: 14px;
  border-top: 1px solid var(--bbs-line);
  font-size: 13px; line-height: 1.6; color: var(--bbs-body);
  border-radius: 0 0 4px 4px;
}
.bbs-checkout-page #payment .payment_box::before { display: none; }
.bbs-checkout-page #payment .payment_box p:last-child { margin-bottom: 0; }

.bbs-checkout-page .woocommerce-terms-and-conditions-wrapper { margin-bottom: 16px; font-size: 13px; }

.bbs-checkout-page #place_order,
.bbs-checkout-page .woocommerce-form-coupon button {
  width: 100%;
  min-height: 54px;
  padding: 0 22px;
  font-size: 15px; font-weight: 600; letter-spacing: .01em;
  color: #fff; background: var(--bbs-ink);
  border: 0; border-radius: 4px;
  cursor: pointer;
  transition: opacity .15s ease;
}
.bbs-checkout-page .woocommerce-form-coupon button { width: auto; min-height: 50px; }
.bbs-checkout-page #place_order:hover { opacity: .86; }

/* ---------------------------------------------------------- login form */

.bbs-checkout-page .woocommerce-form-login-toggle,
.bbs-checkout-page .woocommerce-form-coupon-toggle .woocommerce-info {
  background: var(--bbs-wash);
  border: 1px solid var(--bbs-line);
  border-left-width: 1px;
  border-radius: 4px;
  color: var(--bbs-body);
  font-size: 14px;
  padding: 14px 16px;
  margin: 0 0 20px;
}
.bbs-checkout-page .woocommerce-info::before,
.bbs-checkout-page .woocommerce-message::before { display: none; }
.bbs-checkout-page .woocommerce-info a { color: var(--bbs-ink); font-weight: 600; }
.bbs-checkout-page form.login {
  border: 1px solid var(--bbs-line);
  border-radius: 6px;
  padding: 22px;
  margin: 0 0 28px;
}
.bbs-checkout-page form.login .form-row { margin-bottom: 16px; }
.bbs-checkout-page form.login button {
  min-height: 50px; padding: 0 26px;
  background: var(--bbs-ink); color: #fff;
  border: 0; border-radius: 4px; font-weight: 600; cursor: pointer;
}

/* ------------------------------------------------------------- mobile */

@media (max-width: 980px) {
  .bbs-cobanner { padding-block: 20px 18px; margin-bottom: 28px; }
  .bbs-cobanner__title { font-size: 24px; }
  .bbs-cobanner__note { font-size: 13px; }

  .bbs-checkout-page form.checkout { display: block; }

  .bbs-checkout-page .woocommerce-billing-fields__field-wrapper,
  .bbs-checkout-page .woocommerce-shipping-fields__field-wrapper {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }
  /* Keep city and postal code paired, everything else full width. */
  .bbs-checkout-page #billing_city_field,
  .bbs-checkout-page #billing_postcode_field,
  .bbs-checkout-page #shipping_city_field,
  .bbs-checkout-page #shipping_postcode_field { grid-column: auto; }

  .bbs-checkout-page #order_review_heading { margin-top: 36px; }

  .bbs-checkout-page #order_review {
    padding: 20px 16px;
    /* Full bleed so the summary reads as its own band on a narrow screen. */
    margin-inline: calc(var(--bbs-gutter-lg, 20px) * -1);
    border-inline: 0;
    border-radius: 0;
  }

  /* iOS zooms any input under 16px on focus. */
  .bbs-checkout-page .form-row input.input-text,
  .bbs-checkout-page .form-row select,
  .bbs-checkout-page .form-row textarea,
  .bbs-checkout-page .select2-container .select2-selection--single { font-size: 16px; }

  .bbs-checkout-page ul#shipping_method label,
  .bbs-checkout-page #payment ul.payment_methods li > label { padding: 14px 12px; }

  .bbs-sum-media { flex-basis: 48px; width: 48px; height: 48px; }

}

@media (max-width: 480px) {
  .bbs-checkout-page .checkout_coupon .form-row { display: block; width: 100%; }
  .bbs-checkout-page .woocommerce-form-coupon button { width: 100%; }
}


/* ---------------------------------------------- Astra resets ----
   Astra floats and widths the three top level checkout children, and its
   selectors outrank ours. These resets hand layout back to the grid above.
   Kept in one block so there is a single place to look if the theme changes. */

.bbs-checkout-page form.checkout > #customer_details,
.bbs-checkout-page form.checkout > #order_review_heading,
.bbs-checkout-page form.checkout > #order_review {
  float: none !important;
  width: auto !important;
  max-width: none !important;
  margin-inline: 0 !important;
}

.bbs-checkout-page form.checkout > #order_review {
  padding: 24px 22px !important;
  border: 1px solid var(--bbs-line) !important;
  border-radius: 6px;
}

.bbs-checkout-page form.checkout > #order_review_heading {
  border: 0 !important;
  border-bottom: 1px solid var(--bbs-line) !important;
  padding: 0 0 12px !important;
}

.bbs-checkout-page #customer_details .col-1,
.bbs-checkout-page #customer_details .col-2 {
  float: none !important;
  width: 100% !important;
}

/* Astra marks notices with a thick coloured left rule. */
.bbs-checkout-page .woocommerce-info,
.bbs-checkout-page .woocommerce-message {
  border-left-width: 1px !important;
  border-left-color: var(--bbs-line) !important;
}

@media (max-width: 980px) {
  .bbs-checkout-page form.checkout > #order_review {
    margin-inline: calc(var(--bbs-gutter-lg, 20px) * -1) !important;
    border-inline: 0 !important;
    border-radius: 0;
  }
}


/* ---------------------------------------------- Overflow and empties ----
   The totals table is narrower than its content unless it is told to be
   fixed, and the shipping choices need the full panel width rather than a
   label column beside them. */

.bbs-checkout-page #order_review table.shop_table {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}
.bbs-checkout-page #order_review table.shop_table td,
.bbs-checkout-page #order_review table.shop_table th { word-break: break-word; }

/* Shipping choices: drop the label cell so the options get the full row.
   The cell stays a table-cell; turning it into a block makes the list inside
   shrink to fit and the labels then spill past their borders. */
.bbs-checkout-page .woocommerce-shipping-totals th { display: none; }
.bbs-checkout-page .woocommerce-shipping-totals td {
  display: block;
  width: 100%;
  padding: 4px 0 14px !important;
  text-align: left;
  white-space: normal;
}
.bbs-checkout-page .woocommerce-shipping-totals { display: block; }
.bbs-checkout-page ul#shipping_method {
  display: block;
  width: 100%;
}
.bbs-checkout-page ul#shipping_method li {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 8px;
}
.bbs-checkout-page ul#shipping_method li:last-child { margin-bottom: 0; }
/* Astra forces label { display: inline } across checkout, hence the flag. */
.bbs-checkout-page ul#shipping_method label {
  display: flex !important;
  flex-wrap: wrap;
  white-space: normal;
}
.bbs-checkout-page ul#shipping_method,
.bbs-checkout-page ul#shipping_method li { white-space: normal; }

/* Additional information has no fields left, so its heading is an empty rule. */
.bbs-checkout-page .woocommerce-additional-fields:not(:has(.form-row)) { display: none; }
.bbs-checkout-page .woocommerce-additional-fields__field-wrapper:empty { display: none; }

/* Payment box sits inside the selected list item, so only the item draws a border. */
.bbs-checkout-page #payment ul.payment_methods li { overflow: hidden; }


/* ------------------------------------- Summary table, delaminated ----
   WooCommerce prints the summary as one table, so the item rows and the
   totals rows are forced to share column widths. That is why the delivery
   options kept ending up half a panel wide with their labels spilling out.
   Dropping table display and laying the rows out with flexbox lets each row
   size itself. This is the last word on the panel; nothing above overrides it. */

.bbs-checkout-page #order_review table.shop_table,
.bbs-checkout-page #order_review table.shop_table thead,
.bbs-checkout-page #order_review table.shop_table tbody,
.bbs-checkout-page #order_review table.shop_table tfoot,
.bbs-checkout-page #order_review table.shop_table tr,
.bbs-checkout-page #order_review table.shop_table th,
.bbs-checkout-page #order_review table.shop_table td {
  display: block;
  width: auto;
  border: 0;
  padding: 0;
  text-align: left;
  white-space: normal;
}
.bbs-checkout-page #order_review table.shop_table thead { display: none; }

/* Item rows: thumbnail block on the left, price hard right. */
.bbs-checkout-page #order_review .cart_item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--bbs-line);
}
.bbs-checkout-page #order_review .cart_item .product-name { flex: 1 1 auto; min-width: 0; }
.bbs-checkout-page #order_review .cart_item .product-total {
  flex: 0 0 auto;
  text-align: right;
  white-space: nowrap;
  font-weight: 600;
  color: var(--bbs-ink);
}

/* Totals rows: label left, figure right. */
.bbs-checkout-page #order_review tfoot tr {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--bbs-line);
}
.bbs-checkout-page #order_review tfoot tr th {
  font-size: 14px;
  font-weight: 400;
  color: var(--bbs-body);
}
.bbs-checkout-page #order_review tfoot tr td {
  text-align: right;
  white-space: nowrap;
  color: var(--bbs-ink);
  font-weight: 600;
}
.bbs-checkout-page #order_review tfoot tr.order-total {
  border-bottom: 0;
  padding-top: 16px;
}
.bbs-checkout-page #order_review tfoot tr.order-total th,
.bbs-checkout-page #order_review tfoot tr.order-total td {
  font-size: 18px;
  font-weight: 600;
  color: var(--bbs-ink);
}
.bbs-checkout-page #order_review tfoot tr.order-total .includes_tax {
  display: block;
  font-size: 12px;
  font-weight: 400;
  color: var(--bbs-mute);
  white-space: nowrap;
}

/* Delivery: a stacked row, full panel width, no label column. */
.bbs-checkout-page #order_review tr.woocommerce-shipping-totals {
  display: block;
  padding: 14px 0;
}
.bbs-checkout-page #order_review tr.woocommerce-shipping-totals th {
  display: block;
  margin-bottom: 10px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--bbs-ink);
}
.bbs-checkout-page #order_review tr.woocommerce-shipping-totals td {
  display: block;
  width: 100%;
  text-align: left;
  font-weight: 400;
}
.bbs-checkout-page #order_review ul#shipping_method {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}
.bbs-checkout-page #order_review ul#shipping_method li {
  display: block;
  width: 100%;
  margin: 0;
  box-sizing: border-box;
}
.bbs-checkout-page #order_review ul#shipping_method label {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 4px 10px;
  text-align: left;
  white-space: normal;
}
.bbs-checkout-page #order_review ul#shipping_method .amount { margin-left: auto; }
.bbs-checkout-page #order_review .bbs-ship-note {
  flex: 1 0 100%;
  text-align: left;
  padding-left: 27px;
}


/* ---------------------------------------------- Validation feedback ----
   WooCommerce injects the error summary as a child of form.checkout. As a
   grid item it was auto-placing after everything else, so a failed submit
   pushed the list far below the fold. Pinning it to the notice row puts it
   back above the fields, where checkout.js already scrolls. */

.bbs-checkout-page form.checkout > .woocommerce-NoticeGroup,
.bbs-checkout-page form.checkout > .woocommerce-error,
.bbs-checkout-page form.checkout > .woocommerce-message {
  grid-area: notice;
  margin: 0 0 28px;
}

.bbs-checkout-page .woocommerce-error {
  list-style: none;
  margin: 0 0 24px;
  padding: 16px 18px;
  background: #fdf3f2;
  border: 1px solid #e5b5ae;
  border-left-width: 3px !important;
  border-left-color: #b3261e !important;
  border-radius: 4px;
  color: #7a1c16;
  font-size: 14px;
  line-height: 1.55;
}
.bbs-checkout-page .woocommerce-error::before { display: none; }
.bbs-checkout-page .woocommerce-error li {
  margin: 0;
  padding: 3px 0;
  list-style: none;
}
.bbs-checkout-page .woocommerce-error li strong { font-weight: 600; }

/* Per-field message that checkout.js appends inside the row. */
.bbs-checkout-page .checkout-inline-error-message {
  display: block;
  margin-top: 6px;
  font-size: 12.5px;
  line-height: 1.45;
  color: #b3261e;
}

.bbs-checkout-page .form-row.woocommerce-invalid input.input-text,
.bbs-checkout-page .form-row.woocommerce-invalid select,
.bbs-checkout-page .form-row.woocommerce-invalid textarea,
.bbs-checkout-page .form-row.woocommerce-invalid .select2-selection--single {
  border-color: #b3261e !important;
}
.bbs-checkout-page .form-row.woocommerce-invalid input.input-text:focus,
.bbs-checkout-page .form-row.woocommerce-invalid select:focus {
  box-shadow: 0 0 0 3px rgba(179, 38, 30, .12);
}
.bbs-checkout-page .form-row.woocommerce-validated input.input-text,
.bbs-checkout-page .form-row.woocommerce-validated select {
  border-color: var(--bbs-line);
}

/* The terms row lives in the summary panel; keep its message inside. */
.bbs-checkout-page .validate-required.woocommerce-invalid .checkout-inline-error-message {
  padding-left: 28px;
}

/* Astra styles notices with its own colours and lays the items out inline,
   and its selectors carry the theme prefix, so these need the flag. */
.bbs-checkout-page .woocommerce .woocommerce-error,
.bbs-checkout-page ul.woocommerce-error {
  display: block !important;
  background: #fdf3f2 !important;
  border: 1px solid #e5b5ae !important;
  border-left: 3px solid #b3261e !important;
  border-radius: 4px !important;
  color: #7a1c16 !important;
  padding: 16px 18px !important;
  margin: 0 0 28px !important;
  list-style: none !important;
}
.bbs-checkout-page .woocommerce .woocommerce-error li,
.bbs-checkout-page ul.woocommerce-error li {
  display: block !important;
  float: none !important;
  width: auto !important;
  margin: 0 !important;
  padding: 3px 0 !important;
  list-style: none !important;
  text-align: left !important;
  color: inherit;
}
.bbs-checkout-page .woocommerce-error li::before { display: none !important; }

.bbs-checkout-page .checkout-inline-error-message {
  text-align: left !important;
  padding-left: 0;
}

/* ------------------------------------------------- Paired name fields ----
   WooCommerce gives First and Last name the classes form-row-first and
   form-row-last, which carry width: 47% and a float. That was written for a
   float layout; inside a grid column it makes each input 47% of its own
   column instead of filling it. The grid already handles the pairing. */

.bbs-checkout-page form.checkout .form-row-first,
.bbs-checkout-page form.checkout .form-row-last,
.bbs-checkout-page form.checkout .form-row-wide,
.bbs-checkout-page form.checkout .form-row {
  width: auto !important;
  max-width: none !important;
  float: none !important;
  margin-right: 0 !important;
  clear: none !important;
}
.bbs-checkout-page form.checkout .form-row::after,
.bbs-checkout-page form.checkout .form-row::before { content: none; }

.bbs-checkout-page form.checkout .form-row input.input-text,
.bbs-checkout-page form.checkout .form-row select,
.bbs-checkout-page form.checkout .form-row textarea {
  width: 100% !important;
  box-sizing: border-box;
}


/* ----------------------------------------------- Delivery and payment ----
   The radio is a sibling of its label, not a child of it, so making the
   label a flex container left the input stranded on its own line above.
   The list item is the flex container instead. */

.bbs-checkout-page #order_review ul#shipping_method li,
.bbs-checkout-page #payment ul.payment_methods > li {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  width: 100%;
  padding: 13px 14px;
  margin: 0;
  box-sizing: border-box;
  cursor: pointer;
}

.bbs-checkout-page #order_review ul#shipping_method li > input[type="radio"],
.bbs-checkout-page #payment ul.payment_methods > li > input[type="radio"] {
  flex: 0 0 17px;
  width: 17px;
  height: 17px;
  margin: 0;
  accent-color: var(--bbs-ink);
}

.bbs-checkout-page #order_review ul#shipping_method li > label,
.bbs-checkout-page #payment ul.payment_methods > li > label {
  display: flex !important;
  /* Basis 0 rather than auto: Astra sets width 100% on checkout labels, which
     an auto basis resolves against, leaving the label too wide to sit beside
     its radio. */
  flex: 1 1 0% !important;
  width: auto !important;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 10px;
  min-width: 0;
  margin: 0;
  padding: 0;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--bbs-ink);
  text-align: left !important;
  white-space: normal;
  cursor: pointer;
}

/* Price sits hard right on the first line. */
.bbs-checkout-page #order_review ul#shipping_method li .amount {
  /* Without a zero shrink the price is squeezed to a few pixels by the
     method title beside it. */
  flex: 0 0 auto;
  margin-left: auto;
  font-weight: 600;
  white-space: nowrap;
}

/* Delivery note drops to its own line, aligned under the label text. */
.bbs-checkout-page #order_review .bbs-ship-note {
  flex: 1 0 100%;
  margin: 2px 0 0;
  padding: 0;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--bbs-mute);
  text-align: left !important;
}

/* The gateway description is a sibling of the label, so it needs the full row. */
.bbs-checkout-page #payment ul.payment_methods > li > .payment_box {
  flex: 1 0 100%;
  margin: 12px -14px -13px;
  padding: 13px 14px;
  border-top: 1px solid var(--bbs-line);
  border-radius: 0 0 4px 4px;
}

/* ------------------------------------------- Choice rows, final pass ----
   Delivery and payment options. This block is authoritative; earlier rules
   for these two lists are superseded.

   Astra positions checkout radios absolutely, which is why the label was
   printing on top of the control rather than beside it. Everything here is
   laid out on the flow, with the radio as a normal flex item. */

.bbs-checkout-page #order_review ul#shipping_method,
.bbs-checkout-page #payment ul.payment_methods {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  border: 0;
}

.bbs-checkout-page #order_review ul#shipping_method li,
.bbs-checkout-page #payment ul.payment_methods > li {
  display: grid !important;
  grid-template-columns: 18px minmax(0, 1fr);
  column-gap: 12px;
  row-gap: 3px;
  align-items: start;
  width: 100%;
  margin: 0;
  padding: 14px 16px;
  box-sizing: border-box;
  background: var(--bbs-paper);
  border: 1px solid var(--bbs-line);
  border-radius: 5px;
  box-shadow: none;
  list-style: none;
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease;
}

.bbs-checkout-page #order_review ul#shipping_method li:hover,
.bbs-checkout-page #payment ul.payment_methods > li:hover {
  border-color: #c9c9c9;
}

/* Selected state: a quiet tint, not a heavy outline. */
.bbs-checkout-page #order_review ul#shipping_method li:has(input:checked),
.bbs-checkout-page #payment ul.payment_methods > li:has(input:checked) {
  border-color: #bdbdbd !important;
  background: var(--bbs-wash);
  box-shadow: none !important;
}

/* Radio: first column, on the flow, aligned to the first line of text. */
.bbs-checkout-page #order_review ul#shipping_method li > input[type="radio"],
.bbs-checkout-page #payment ul.payment_methods > li > input[type="radio"] {
  position: static !important;
  grid-column: 1;
  grid-row: 1;
  width: 17px !important;
  height: 17px;
  margin: 2px 0 0 !important;
  padding: 0;
  opacity: 1;
  accent-color: var(--bbs-ink);
  cursor: pointer;
}

/* Label: second column, title left and price right. */
.bbs-checkout-page #order_review ul#shipping_method li > label,
.bbs-checkout-page #payment ul.payment_methods > li > label {
  display: flex !important;
  grid-column: 2;
  grid-row: 1;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--bbs-ink);
  text-align: left !important;
  white-space: normal;
  cursor: pointer;
}

.bbs-checkout-page #order_review ul#shipping_method li .amount {
  flex: 0 0 auto;
  width: auto !important;
  min-width: max-content;
  font-weight: 600;
  white-space: nowrap;
}

/* Delivery note: second column, second row, so it lines up under the title. */
.bbs-checkout-page #order_review .bbs-ship-note {
  grid-column: 2;
  grid-row: 2;
  margin: 0;
  padding: 0 !important;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--bbs-mute);
  text-align: left !important;
}

/* Gateway blurb: spans both columns beneath the row, flush to the card edge. */
.bbs-checkout-page #payment ul.payment_methods > li > .payment_box {
  grid-column: 1 / -1;
  margin: 14px -16px -14px;
  padding: 13px 16px;
  background: var(--bbs-wash);
  border: 0;
  border-top: 1px solid var(--bbs-line);
  border-radius: 0 0 5px 5px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--bbs-body);
}
.bbs-checkout-page #payment ul.payment_methods > li > .payment_box p { margin: 0; }
.bbs-checkout-page #payment ul.payment_methods > li > .payment_box::before { display: none; }

/* A lone gateway has its radio hidden by WooCommerce; reclaim the column. */
.bbs-checkout-page #payment ul.payment_methods > li:only-child {
  grid-template-columns: minmax(0, 1fr);
}
.bbs-checkout-page #payment ul.payment_methods > li:only-child > label,
.bbs-checkout-page #payment ul.payment_methods > li:only-child > .payment_box {
  grid-column: 1;
}
.bbs-checkout-page #payment ul.payment_methods > li:only-child > .payment_box {
  grid-column: 1 / -1;
}

/* --------------------------------------- Choice rows: reserved gutter ----
   Supersedes every earlier rule for these two lists.

   Previous attempts laid the radio and the label out as siblings in a flex
   or grid row. That works only if nothing else in the cascade resizes them,
   and the radio kept landing on top of the label text. This approach removes
   the dependency: the row reserves a fixed left gutter with padding, and the
   radio is positioned into that gutter. The label can then be any width it
   likes without ever reaching the control.

   Note the delivery note is inside the label, not a sibling of it, because
   WooCommerce builds the whole label as one filtered string. */

.bbs-checkout-page #order_review ul#shipping_method li,
.bbs-checkout-page #payment ul.payment_methods > li {
  display: block !important;
  position: relative;
  width: 100%;
  margin: 0;
  padding: 14px 16px 14px 44px !important;
  box-sizing: border-box;
  background: var(--bbs-paper);
  border: 1px solid var(--bbs-line);
  border-radius: 5px;
  box-shadow: none;
  list-style: none;
  cursor: pointer;
  overflow: hidden;
  transition: border-color .15s ease, background-color .15s ease;
}

.bbs-checkout-page #order_review ul#shipping_method li:hover,
.bbs-checkout-page #payment ul.payment_methods > li:hover { border-color: #c9c9c9; }

.bbs-checkout-page #order_review ul#shipping_method li:has(input:checked),
.bbs-checkout-page #payment ul.payment_methods > li:has(input:checked) {
  border-color: #bdbdbd !important;
  background: var(--bbs-wash);
  box-shadow: none !important;
}

/* The control sits in the reserved gutter, out of the text flow entirely. */
.bbs-checkout-page #order_review ul#shipping_method li > input[type="radio"],
.bbs-checkout-page #payment ul.payment_methods > li > input[type="radio"] {
  position: absolute !important;
  left: 16px;
  top: 16px;
  width: 16px !important;
  height: 16px !important;
  min-width: 0;
  margin: 0 !important;
  padding: 0 !important;
  accent-color: var(--bbs-ink);
  cursor: pointer;
}

/* Label fills the remaining width: title left, price right, note beneath. */
.bbs-checkout-page #order_review ul#shipping_method li > label,
.bbs-checkout-page #payment ul.payment_methods > li > label {
  display: flex !important;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 2px 12px;
  width: 100% !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--bbs-ink);
  text-align: left !important;
  white-space: normal;
  cursor: pointer;
}

.bbs-checkout-page #order_review ul#shipping_method li .amount {
  flex: 0 0 auto;
  width: auto !important;
  min-width: -moz-max-content;
  min-width: max-content;
  margin-left: auto;
  font-weight: 600;
  white-space: nowrap;
}

/* Full-width third line inside the label. */
.bbs-checkout-page #order_review .bbs-ship-note {
  flex: 1 0 100%;
  width: 100%;
  margin: 3px 0 0;
  padding: 0 !important;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--bbs-mute);
  text-align: left !important;
}

/* Gateway blurb clears the gutter and runs the full card width. */
.bbs-checkout-page #payment ul.payment_methods > li > .payment_box {
  margin: 14px -16px -14px -44px;
  padding: 13px 16px 13px 44px;
  background: var(--bbs-wash);
  border: 0;
  border-top: 1px solid var(--bbs-line);
  border-radius: 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--bbs-body);
}
.bbs-checkout-page #payment ul.payment_methods > li > .payment_box p { margin: 0; }

/* A single gateway has no radio, so the gutter is dead space. */
.bbs-checkout-page #payment ul.payment_methods > li:only-child { padding-left: 16px !important; }
.bbs-checkout-page #payment ul.payment_methods > li:only-child > .payment_box {
  margin-left: -16px;
  padding-left: 16px;
}