/* Blood Clinic basket + checkout skin.
   Scoped to body.woocommerce-cart / body.woocommerce-checkout so nothing leaks
   onto the rest of the shop. Matches the booking diary and the account app:
   dark cards on the page, gold actions, Poppins.

   CSS only, on purpose. Every WooCommerce field, hook and nonce is untouched,
   which is what keeps the Square gateway and checkout validation working. */

body.woocommerce-cart, body.woocommerce-checkout{
  --bcs-bg:#0A0A0A; --bcs-card:#141414; --bcs-raise:#1C1C1C; --bcs-raise-2:#242424;
  --bcs-ink:#FFFFFF; --bcs-soft:#B4B4B4; --bcs-dim:#7A7A7A;
  --bcs-gold:#E6BB03; --bcs-gold-2:#F5CE2E; --bcs-gold-ink:#161100;
  --bcs-gold-wash:rgba(230,187,3,.13); --bcs-gold-line:rgba(230,187,3,.38);
  --bcs-red:#E5484D; --bcs-green:#3FB27F;
  --bcs-line:#2A2A2A; --bcs-line-soft:#202020; --bcs-r:16px; --bcs-r-sm:11px;
}

/* Type and colour only on the wrapper. It is NOT given a background, border or
   padding: these pages are Elementor Pro widgets that calculate their own
   column widths, and wrapping them in a panel narrowed the basket table until
   the Subtotal column fell off the edge. Dark CARDS on the page instead, which
   is the same pattern the booking widget already uses on the product page. */
body.woocommerce-cart .woocommerce,
body.woocommerce-checkout .woocommerce{
  font-family:'Poppins',system-ui,sans-serif;
  color:var(--bcs-ink); line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
body.woocommerce-cart .woocommerce *,
body.woocommerce-checkout .woocommerce *{box-sizing:border-box}

/* Headings. The theme sets these dark, which is invisible on our surface. */
body.woocommerce-cart .woocommerce h1,
body.woocommerce-cart .woocommerce h2,
body.woocommerce-cart .woocommerce h3,
body.woocommerce-checkout .woocommerce h1,
body.woocommerce-checkout .woocommerce h2,
body.woocommerce-checkout .woocommerce h3{
  color:var(--bcs-ink) !important; font-weight:600; letter-spacing:-.01em;
}
body.woocommerce-cart .woocommerce h2,
body.woocommerce-checkout .woocommerce h2{font-size:19px;margin:0 0 15px}
body.woocommerce-cart .woocommerce p,
body.woocommerce-checkout .woocommerce p{color:var(--bcs-soft)}
body.woocommerce-cart .woocommerce a,
body.woocommerce-checkout .woocommerce a{color:var(--bcs-gold)}
body.woocommerce-cart .woocommerce a:hover,
body.woocommerce-checkout .woocommerce a:hover{color:var(--bcs-gold-2)}

/* ---------------------------------------------------------------- tables --- */
/* The stock grey table borders read as a spreadsheet on a dark surface, so the
   rows are separated by a single hairline instead. */
body.woocommerce-cart .shop_table,
body.woocommerce-checkout .shop_table{
  background:transparent; border:0; border-collapse:collapse; width:100%;
}
body.woocommerce-cart .shop_table th,
body.woocommerce-checkout .shop_table th{
  background:transparent; border:0; color:var(--bcs-dim);
  font-size:11px; font-weight:600; letter-spacing:.13em; text-transform:uppercase;
  padding:0 12px 12px; text-align:left;
}
body.woocommerce-cart .shop_table td,
body.woocommerce-checkout .shop_table td{
  background:transparent; border:0; border-top:1px solid var(--bcs-line-soft);
  padding:16px 12px; color:var(--bcs-ink); vertical-align:middle;
}
body.woocommerce-cart .shop_table tbody tr:first-child td{border-top:0}

body.woocommerce-cart .product-thumbnail img{
  width:64px;height:64px;object-fit:cover;border-radius:10px;border:1px solid var(--bcs-line);
}
/* Elementor paints the product link and both money columns in the site accent,
   which makes a basket where everything shouts. Gold is reserved for the order
   total and the actions, so the line items are set back to plain white. The
   descendant selector is needed to catch .woocommerce-Price-currencySymbol,
   which was rendering the pound sign in a colour of its own. */
body.woocommerce-cart .shop_table .product-name,
body.woocommerce-cart .shop_table .product-name a,
body.woocommerce-cart .shop_table .product-price,
body.woocommerce-cart .shop_table .product-price *,
body.woocommerce-cart .shop_table .product-subtotal,
body.woocommerce-cart .shop_table .product-subtotal *,
body.woocommerce-cart .shop_table .product-quantity,
body.woocommerce-cart .shop_table .product-quantity *,
body.woocommerce-checkout .shop_table .product-name,
body.woocommerce-checkout .shop_table .product-total,
body.woocommerce-checkout .shop_table .product-total *{color:var(--bcs-ink) !important}
body.woocommerce-cart .shop_table .product-name a,
body.woocommerce-checkout .shop_table .product-name{font-weight:600;text-decoration:none}
/* The pound sign is styled separately from the figure it belongs to, so a white
   250.00 was arriving with a gold £ stuck to the front of it. */
body.woocommerce-cart .shop_table .woocommerce-Price-currencySymbol,
body.woocommerce-checkout .shop_table .woocommerce-Price-currencySymbol{color:inherit !important}
body.woocommerce-cart .shop_table .product-name a:hover{color:var(--bcs-gold) !important}
/* The booking detail underneath stays quiet whatever the widget says. */
body.woocommerce-cart .shop_table dl.variation *,
body.woocommerce-checkout .shop_table dl.variation *{color:var(--bcs-soft) !important}
body.woocommerce-cart .shop_table dl.variation dt,
body.woocommerce-checkout .shop_table dl.variation dt{color:var(--bcs-dim) !important}

/* Our booking detail (Method / Location / Appointment) rides in as a dl.
   Set quietly so the test name stays the thing you read first. */
body.woocommerce-cart .shop_table dl.variation,
body.woocommerce-checkout .shop_table dl.variation{margin:6px 0 0;font-size:12.5px;line-height:1.5}
body.woocommerce-cart .shop_table dl.variation dt,
body.woocommerce-checkout .shop_table dl.variation dt{
  color:var(--bcs-dim);font-weight:500;float:left;clear:left;margin:0 6px 0 0;
}
body.woocommerce-cart .shop_table dl.variation dd,
body.woocommerce-checkout .shop_table dl.variation dd{color:var(--bcs-soft);margin:0}
body.woocommerce-cart .shop_table dl.variation p,
body.woocommerce-checkout .shop_table dl.variation p{margin:0;color:inherit}

body.woocommerce-cart .product-price,
body.woocommerce-cart .product-subtotal,
body.woocommerce-checkout .product-total{color:var(--bcs-ink);font-weight:600;white-space:nowrap}
body.woocommerce-cart .shop_table .amount,
body.woocommerce-checkout .shop_table .amount{color:var(--bcs-ink)}

/* Remove item: a circle that turns red on approach rather than a stray x.
   The cell needs a floor width or the circle gets squeezed to a sliver by the
   table's own column maths.

   The x was originally dim grey (#7A7A7A) on the raised panel (#1C1C1C) — a
   contrast ratio under 2:1, which read as "disabled" on a phone in daylight and
   was reported as invisible. It now sits at full ink on a lighter disc with a
   visible ring: legible at rest, still quiet enough not to compete with the
   checkout button. */
body.woocommerce-cart .shop_table td.product-remove{width:52px;min-width:52px;padding-right:0}
/* `!important` on the box: Elementor's cart widget sets `.remove{width:auto}`
   with three classes, which outranks anything sensible here and collapsed the
   circle to a 10px sliver. */
body.woocommerce-cart a.remove{
  display:inline-flex !important;align-items:center;justify-content:center;
  width:30px !important;height:30px !important;border-radius:50%;
  background:var(--bcs-raise-2);border:1px solid #4A4A4A;
  color:var(--bcs-ink) !important;font-size:18px !important;line-height:1;text-decoration:none;
  opacity:1 !important;transition:background .15s,border-color .15s;
}
body.woocommerce-cart a.remove:hover,
body.woocommerce-cart a.remove:focus-visible{
  background:var(--bcs-red);border-color:var(--bcs-red);color:#fff !important;
}
/* Touch targets: a 30px disc is fine under a mouse, small under a thumb. */
@media (max-width:768px){
  body.woocommerce-cart .shop_table td.product-remove{width:56px;min-width:56px}
  body.woocommerce-cart a.remove{
    width:36px !important;height:36px !important;font-size:20px !important;
  }
}

/* A test is one sample from one person, so its quantity input is pinned to 1 and
   WooCommerce then renders it as a hidden field. The wrapper it sits in is still
   in the layout though, and Elementor's loop widget gives that wrapper spacing,
   which left a gap beside "More info". Collapse the wrapper, not the field: the
   hidden input still posts, so add-to-basket keeps working. */
.quantity:has(> input.bclml-qty-locked[type="hidden"]){display:none !important}
.e-loop-add-to-cart-form-container .quantity:has(> input[type="hidden"]){display:none !important}

/* Enquiry-only products: a WhatsApp call to action where the buy button was.
   Green rather than gold, because it is a different kind of action - it opens a
   conversation instead of adding to a basket, and should not be mistaken for the
   usual buy button. */
.bclml-enquiry-only{margin:18px 0 6px;max-width:520px}
.bclml-enquiry-why{margin:0 0 10px;color:var(--bcs-soft);font-size:14.5px;line-height:1.55}
.bclml-enquiry-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:14px 22px;border-radius:var(--bcs-r-sm);
  background:#25D366;color:#04210F !important;
  font-weight:700;font-size:15.5px;text-decoration:none;
  border:1px solid #1DB558;
}
.bclml-enquiry-btn:hover,.bclml-enquiry-btn:focus-visible{background:#1DB558;color:#fff !important}
@media (max-width:600px){
  .bclml-enquiry-btn{width:100%;padding:16px 18px}
}

/* ---------------------------------------------------------------- fields --- */
body.woocommerce-cart .woocommerce input[type=text],
body.woocommerce-cart .woocommerce input[type=number],
body.woocommerce-checkout .woocommerce input[type=text],
body.woocommerce-checkout .woocommerce input[type=email],
body.woocommerce-checkout .woocommerce input[type=tel],
body.woocommerce-checkout .woocommerce input[type=password],
body.woocommerce-checkout .woocommerce input[type=date],
body.woocommerce-checkout .woocommerce input[type=number],
body.woocommerce-checkout .woocommerce select,
body.woocommerce-checkout .woocommerce textarea{
  width:100%;background:var(--bcs-raise) !important;color:var(--bcs-ink) !important;
  border:1.5px solid var(--bcs-line) !important;border-radius:var(--bcs-r-sm);
  padding:12px 14px;font-family:inherit;font-size:14.5px;line-height:1.4;
  box-shadow:none;transition:.15s;
}
body.woocommerce-checkout .woocommerce textarea{min-height:90px;resize:vertical}
body.woocommerce-cart .woocommerce input:focus,
body.woocommerce-checkout .woocommerce input:focus,
body.woocommerce-checkout .woocommerce select:focus,
body.woocommerce-checkout .woocommerce textarea:focus{
  outline:none;border-color:var(--bcs-gold) !important;
  box-shadow:0 0 0 3px var(--bcs-gold-wash);
}
body.woocommerce-cart .woocommerce ::placeholder,
body.woocommerce-checkout .woocommerce ::placeholder{color:var(--bcs-dim);opacity:1}

body.woocommerce-checkout .woocommerce .form-row{padding:0;margin:0 0 15px}
body.woocommerce-checkout .woocommerce .form-row label{
  display:block;color:var(--bcs-soft);font-size:12.5px;font-weight:500;margin:0 0 7px;
}
body.woocommerce-checkout .woocommerce .required{color:var(--bcs-gold);border:0;text-decoration:none}
body.woocommerce-checkout .woocommerce .form-row .description,
body.woocommerce-checkout .woocommerce span.description{
  display:block;color:var(--bcs-dim);font-size:11.5px;margin-top:6px;
}

/* Quantity stepper. */
body.woocommerce-cart .quantity input.qty{max-width:88px;text-align:center}

/* WooCommerce swaps country and state for Select2, which renders its own
   white widget and ignores the input rules above. */
body.woocommerce-checkout .select2-container--default .select2-selection--single{
  background:var(--bcs-raise);border:1.5px solid var(--bcs-line);border-radius:var(--bcs-r-sm);
  height:46px;display:flex;align-items:center;padding:0 12px;
}
body.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__rendered{
  color:var(--bcs-ink);line-height:1.4;padding:0;
}
body.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__arrow{top:50%;transform:translateY(-50%);right:8px}
body.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__arrow b{border-top-color:var(--bcs-dim)}
.select2-dropdown{background:var(--bcs-raise);border:1px solid var(--bcs-line);color:var(--bcs-ink)}
.select2-container--default .select2-search--dropdown .select2-search__field{
  background:var(--bcs-card);border:1px solid var(--bcs-line);color:var(--bcs-ink);border-radius:8px;padding:8px 10px;
}
.select2-container--default .select2-results__option{color:var(--bcs-soft)}
.select2-container--default .select2-results__option--highlighted[aria-selected]{background:var(--bcs-gold);color:var(--bcs-gold-ink)}

/* --------------------------------------------------------------- buttons --- */
body.woocommerce-cart .woocommerce .button,
body.woocommerce-cart .woocommerce button.button,
body.woocommerce-checkout .woocommerce .button,
body.woocommerce-checkout .woocommerce button.button,
body.woocommerce-checkout .woocommerce #place_order{
  background:var(--bcs-gold) !important;color:var(--bcs-gold-ink) !important;
  border:0;border-radius:var(--bcs-r-sm);
  font-family:inherit;font-size:14.5px;font-weight:700;
  padding:14px 22px;cursor:pointer;transition:.16s;text-decoration:none;
}
body.woocommerce-cart .woocommerce .button:hover,
body.woocommerce-cart .woocommerce button.button:hover,
body.woocommerce-checkout .woocommerce .button:hover,
body.woocommerce-checkout .woocommerce button.button:hover,
body.woocommerce-checkout .woocommerce #place_order:hover{background:var(--bcs-gold-2) !important}
body.woocommerce-cart .woocommerce .button:disabled,
body.woocommerce-cart .woocommerce button.button:disabled{
  background:#332B1B !important;color:#7A6F52 !important;cursor:not-allowed;
}
/* Update Cart and Apply coupon are secondary to Proceed to Checkout. */
body.woocommerce-cart .woocommerce button[name="update_cart"],
body.woocommerce-cart .woocommerce .coupon .button{
  background:var(--bcs-raise) !important;color:var(--bcs-ink) !important;
  border:1px solid var(--bcs-line) !important;font-weight:600;
}
body.woocommerce-cart .woocommerce button[name="update_cart"]:hover:not(:disabled),
body.woocommerce-cart .woocommerce .coupon .button:hover{
  border-color:var(--bcs-gold-line) !important;color:var(--bcs-gold) !important;background:var(--bcs-raise-2) !important;
}
body.woocommerce-cart .woocommerce .checkout-button,
body.woocommerce-checkout .woocommerce #place_order{
  display:block;width:100%;text-align:center;padding:16px;font-size:15.5px;
}

/* ---------------------------------------------------------- cart layout --- */
body.woocommerce-cart .actions{padding-top:18px !important}
body.woocommerce-cart .coupon{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:14px}
body.woocommerce-cart .coupon label{display:none}
body.woocommerce-cart .coupon input{max-width:230px}

body.woocommerce-cart .cart_totals h2{margin-bottom:12px}
/* Labels quiet, subtotal plain, order total gold. Same accent override as the
   line items above. */
body.woocommerce-cart .cart_totals .cart-subtotal th,
body.woocommerce-cart .cart_totals .shipping th{color:var(--bcs-soft) !important}
body.woocommerce-cart .cart_totals .cart-subtotal td,
body.woocommerce-cart .cart_totals .cart-subtotal td *,
body.woocommerce-cart .cart_totals .shipping td,
body.woocommerce-cart .cart_totals .shipping td *{color:var(--bcs-ink) !important}
body.woocommerce-cart .cart_totals .order-total th{color:var(--bcs-ink) !important;font-weight:600}
body.woocommerce-cart .cart_totals .order-total td,
body.woocommerce-cart .cart_totals .order-total td *{color:var(--bcs-gold) !important}
body.woocommerce-checkout .order-total td,
body.woocommerce-checkout .order-total td *{color:var(--bcs-gold) !important}
/* Figures sit hard right against their label, which is what makes a totals
   column scannable. WooCommerce leaves these left-aligned. */
body.woocommerce-cart .cart_totals th{color:var(--bcs-soft);font-weight:500;text-transform:none;letter-spacing:0;font-size:14px;padding:12px 0}
body.woocommerce-cart .cart_totals td{text-align:right;padding:12px 0}
body.woocommerce-cart .cart_totals .order-total td,
body.woocommerce-cart .cart_totals .order-total th{
  border-top:1px solid var(--bcs-line);padding-top:16px;
}
body.woocommerce-cart .cart_totals .order-total .amount{color:var(--bcs-gold);font-size:20px}
/* Shipping calculator link and rows. */
body.woocommerce-cart .shipping-calculator-button{color:var(--bcs-gold)}
body.woocommerce-cart .woocommerce-shipping-destination{color:var(--bcs-dim);font-size:12.5px}

/* ------------------------------------------------------ checkout layout --- */
/* Elementor wraps the billing fields itself, so #customer_details only needs a
   card where the plain shortcode is used (order-pay, or if the widget is ever
   swapped out). Harmless either way. */
body.woocommerce-checkout #customer_details:not(.e-checkout__column *){
  background:var(--bcs-card);border:1px solid var(--bcs-line);border-radius:var(--bcs-r);
  padding:clamp(16px,2vw,26px);margin-bottom:22px;
}
body.woocommerce-checkout #order_review_heading{margin:0 0 14px}
body.woocommerce-checkout .order-total .amount{color:var(--bcs-gold);font-size:20px}
body.woocommerce-checkout #order_review .shop_table td{text-align:right}
body.woocommerce-checkout #order_review .shop_table td.product-name{text-align:left}
body.woocommerce-checkout .cart-subtotal th,
body.woocommerce-checkout .order-total th{color:var(--bcs-soft);font-weight:500;text-transform:none;letter-spacing:0;font-size:14px;padding:12px}

/* Our clinical fields block sits in a div of its own after the order notes. */
body.woocommerce-checkout .bclml-clinical{
  background:var(--bcs-raise);border:1px solid var(--bcs-gold-line);border-radius:var(--bcs-r-sm);
  padding:16px 18px;margin-top:18px;
}
body.woocommerce-checkout .bclml-clinical h3{font-size:15px;margin:0 0 4px}

/* Payment box. The gateway's own markup is left alone beyond colour. */
body.woocommerce-checkout #payment{background:transparent;border-radius:0}
body.woocommerce-checkout #payment ul.payment_methods{
  background:transparent;border:0;border-top:1px solid var(--bcs-line);
  padding:18px 0 0;margin:18px 0 0;
}
body.woocommerce-checkout #payment ul.payment_methods li{
  background:var(--bcs-raise);border:1.5px solid var(--bcs-line);border-radius:var(--bcs-r-sm);
  padding:14px 16px;margin-bottom:11px;list-style:none;
}
body.woocommerce-checkout #payment ul.payment_methods li label{
  color:var(--bcs-ink);font-weight:600;font-size:14.5px;display:inline;cursor:pointer;
}
body.woocommerce-checkout #payment ul.payment_methods li input[type=radio]{accent-color:var(--bcs-gold);margin-right:8px}
/* Not scoped to #payment: with Elementor's widget the gateway description sits
   outside it, and it was the last white box on the page. */
body.woocommerce-checkout .woocommerce div.payment_box{
  background:var(--bcs-raise-2) !important;color:var(--bcs-soft) !important;font-size:12.5px;
  border:0 !important;border-radius:9px;padding:12px 14px;margin:12px 0 0;
}
body.woocommerce-checkout .woocommerce div.payment_box p{color:var(--bcs-soft)}
body.woocommerce-checkout .woocommerce div.payment_box::before{display:none !important}
body.woocommerce-checkout #payment .place-order{padding:18px 0 0;margin:0}

body.woocommerce-checkout .woocommerce-privacy-policy-text,
body.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper{
  color:var(--bcs-dim);font-size:11.5px;line-height:1.55;
}
body.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper .woocommerce-form__label-for-checkbox{
  color:var(--bcs-soft);font-size:12.5px;
}
body.woocommerce-checkout input[type=checkbox]{accent-color:var(--bcs-gold)}

/* Login and coupon prompts at the top of the checkout. */
body.woocommerce-checkout .woocommerce-form-login,
body.woocommerce-checkout .checkout_coupon{
  background:var(--bcs-card);border:1px solid var(--bcs-line);border-radius:var(--bcs-r);
  padding:20px;margin-bottom:18px;
}

/* --------------------------------------------------------------- notices --- */
body.woocommerce-cart .woocommerce-info,
body.woocommerce-cart .woocommerce-message,
body.woocommerce-cart .woocommerce-error,
body.woocommerce-checkout .woocommerce-info,
body.woocommerce-checkout .woocommerce-message,
body.woocommerce-checkout .woocommerce-error,
body.woocommerce-checkout .woocommerce-NoticeGroup .woocommerce-error{
  background:var(--bcs-raise);border:1px solid var(--bcs-line);border-top:0;
  border-left:3px solid var(--bcs-gold);border-radius:var(--bcs-r-sm);
  color:var(--bcs-soft);padding:14px 16px;margin:0 0 18px;list-style:none;
}
body.woocommerce-cart .woocommerce-error,
body.woocommerce-checkout .woocommerce-error{border-left-color:var(--bcs-red);color:#F3C9CA}
body.woocommerce-cart .woocommerce-message,
body.woocommerce-checkout .woocommerce-message{border-left-color:var(--bcs-green)}
body.woocommerce-cart .woocommerce-info::before,
body.woocommerce-cart .woocommerce-message::before,
body.woocommerce-cart .woocommerce-error::before,
body.woocommerce-checkout .woocommerce-info::before,
body.woocommerce-checkout .woocommerce-message::before,
body.woocommerce-checkout .woocommerce-error::before{display:none}
body.woocommerce-cart .woocommerce-error li,
body.woocommerce-checkout .woocommerce-error li{margin:0 0 4px}

/* ------------------------------------------------------- order received --- */
/* This view has no Elementor column layout to disturb, so unlike the basket and
   the checkout it CAN take a panel, and it needs one: the confirmation heading
   and the payment note sit outside every card, so on a white page they were
   white text on white. */
body.woocommerce-order-received .woocommerce{
  background:var(--bcs-bg);border:1px solid var(--bcs-line);border-radius:20px;
  padding:clamp(20px,3vw,36px);
}
body.woocommerce-checkout .woocommerce-thankyou-order-received{
  color:var(--bcs-ink);font-size:20px;font-weight:600;margin-bottom:18px;
}
body.woocommerce-order-received .woocommerce > p{color:var(--bcs-soft)}
/* Must out-rank the rule above it, which otherwise greys the one sentence on
   the page the customer actually came to read. */
body.woocommerce-order-received .woocommerce > p.woocommerce-thankyou-order-received{
  color:var(--bcs-ink);font-size:20px;font-weight:600;
}
/* The order table on this page is a different table from the checkout review. */
body.woocommerce-order-received .woocommerce-table--order-details .product-name,
body.woocommerce-order-received .woocommerce-table--order-details .product-name a,
body.woocommerce-order-received .woocommerce-table--order-details .product-total,
body.woocommerce-order-received .woocommerce-table--order-details .product-total *{color:var(--bcs-ink) !important}
body.woocommerce-order-received .woocommerce-table--order-details tfoot .amount{color:var(--bcs-ink)}
body.woocommerce-order-received .woocommerce-table--order-details tfoot tr:last-child .amount{color:var(--bcs-gold) !important}
body.woocommerce-order-received .woocommerce-column__title,
body.woocommerce-order-received .woocommerce-customer-details h2{color:var(--bcs-ink) !important}
body.woocommerce-checkout ul.woocommerce-order-overview{
  display:flex;flex-wrap:wrap;gap:10px;margin:0 0 24px;padding:0;border:0;list-style:none;
}
body.woocommerce-checkout ul.woocommerce-order-overview li{
  flex:1 1 150px;background:var(--bcs-card);border:1px solid var(--bcs-line);
  border-radius:var(--bcs-r-sm);padding:13px 15px;margin:0;border-right:1px solid var(--bcs-line);
  color:var(--bcs-dim);font-size:11px;letter-spacing:.11em;text-transform:uppercase;
}
body.woocommerce-checkout ul.woocommerce-order-overview li strong{
  display:block;margin-top:6px;color:var(--bcs-ink);font-size:15px;
  letter-spacing:0;text-transform:none;font-weight:600;
}
body.woocommerce-checkout .woocommerce-order-details,
body.woocommerce-checkout .woocommerce-customer-details{
  background:var(--bcs-card);border:1px solid var(--bcs-line);border-radius:var(--bcs-r);
  padding:clamp(16px,2vw,26px);margin-bottom:20px;
}
body.woocommerce-checkout .woocommerce-customer-details address{
  border:1px solid var(--bcs-line);border-radius:var(--bcs-r-sm);
  padding:14px 16px;color:var(--bcs-soft);font-style:normal;
}

/* ------------------------------------------------- Elementor cart/checkout --- */
/* These pages are Elementor Pro's Cart and Checkout widgets, not the plain
   WooCommerce shortcodes, and they already build their own two-column sticky
   layout. So this file changes surface only: no grid, no float, no width. An
   earlier attempt to lay the basket out here collapsed Elementor's columns on
   top of each other, which is the one thing worth remembering about this page. */
/* The widget's own section wrappers become the dark cards. `!important` is
   needed here and only here: Elementor writes a white background into the
   per-page stylesheet it prints for this widget, at the same specificity as
   anything we can write, and it loads after us. */
body.woocommerce-cart .e-cart-section,
body.woocommerce-checkout .e-checkout__order_review,
body.woocommerce-checkout .e-checkout__order_review-2,
body.woocommerce-checkout .e-checkout__billing-details,
body.woocommerce-checkout .e-checkout__shipping-details,
body.woocommerce-checkout .e-checkout__payment{
  background:var(--bcs-card) !important;
  border:1px solid var(--bcs-line) !important;
  border-radius:var(--bcs-r) !important;
  padding:clamp(16px,2vw,26px) !important;
}
body.woocommerce-cart .e-cart-section + .e-cart-section{margin-top:18px}

/* Elementor's checkout widget paints its own white wrappers, which left dark
   inputs sitting inside a white card. Enumerated from the rendered page rather
   than guessed: these are the five it uses. */
body.woocommerce-checkout .woocommerce .col-1,
body.woocommerce-checkout .woocommerce .col-2,
body.woocommerce-checkout .woocommerce .e-coupon-box,
body.woocommerce-checkout .woocommerce .woocommerce-checkout-payment{
  background:var(--bcs-card) !important;
  border:1px solid var(--bcs-line) !important;
  border-radius:var(--bcs-r) !important;
  padding:clamp(16px,2vw,26px) !important;
}
/* Nested inside col-1, so it must not become a card of its own. */
body.woocommerce-checkout .woocommerce .woocommerce-additional-fields{
  background:transparent !important;border:0 !important;padding:0 !important;
}
body.woocommerce-checkout .woocommerce .e-coupon-box{margin-top:18px;text-align:center}
body.woocommerce-checkout .woocommerce .woocommerce-checkout-payment{margin-top:18px}

/* Field labels. Elementor reads these from its own custom property and its rule
   is four selectors deep, so setting the property is both tidier and more
   thorough than trying to outrank it: it fixes every label the widget draws. */
body.woocommerce-checkout .woocommerce,
body.woocommerce-checkout .e-checkout__container,
body.woocommerce-cart .woocommerce{
  --forms-labels-color:var(--bcs-soft);
  --forms-field-text-color:var(--bcs-ink);
}
/* Section titles the widgets print themselves. */
body.woocommerce-cart .e-cart-section h2,
body.woocommerce-cart .e-cart-section h3,
body.woocommerce-checkout .e-checkout-secondary-title,
body.woocommerce-checkout .e-checkout__order_review h3,
body.woocommerce-checkout .e-checkout__container h3{color:var(--bcs-ink) !important}
/* cart_totals sits INSIDE the styled section, so it must not be a second card
   nested in the first. */
body.woocommerce-cart .cart-collaterals,
body.woocommerce-cart .cart_totals{background:transparent !important;border:0 !important;padding:0 !important}

/* -------------------------------------------------------------- phones --- */
@media(max-width:600px){
  body.woocommerce-cart .woocommerce,
  body.woocommerce-checkout .woocommerce{padding:16px;border-radius:14px}
  body.woocommerce-cart .woocommerce-cart-form,
  body.woocommerce-cart .cart_totals,
  body.woocommerce-checkout #customer_details,
  body.woocommerce-checkout #order_review{padding:14px}

  /* Elementor's Cart widget ALREADY stacks the table on a phone, with its own
     row labels and a 28%/auto grid. An earlier version of this file restacked
     it a second time and absolutely positioned the remove control, which then
     sat on top of the product name. Leave the layout to the widget: the only
     thing needed here is that its labels read correctly on a dark card. */
  body.woocommerce-cart .shop_table td::before{
    color:var(--bcs-dim) !important;font-size:11px;letter-spacing:.11em;text-transform:uppercase;
  }
  body.woocommerce-cart .coupon input{max-width:none;flex:1 1 100%}
  body.woocommerce-cart .coupon .button,
  body.woocommerce-cart button[name="update_cart"]{width:100%}
  body.woocommerce-checkout ul.woocommerce-order-overview li{flex:1 1 100%}
}

/* ------------------------------------------------------------------ */
/* ORDER RECEIVED: STOP TELLING A PAID CUSTOMER TO PAY                 */
/* ------------------------------------------------------------------ */
/* Lee Waddington, 21 Aug 2026, placed the same booking three times    */
/* from an iPhone, 4 minutes and then 35 seconds apart. Not a double   */
/* tap: WooCommerce already blocks that, and those gaps are separate   */
/* page loads. He went back and did it again because the page he       */
/* landed on after ordering is headed "PAY FOR YOUR TEST", followed by */
/* a warning paragraph, with "Thank you, your order has been received" */
/* over a thousand pixels further down. On a phone the first two       */
/* screenfuls tell a customer who has just chosen pay-at-clinic that   */
/* they still owe money, so they assume it failed.                     */
/*                                                                     */
/* Scoped to the order-received body class ONLY, so the same header    */
/* still shows everywhere it belongs. Hiding by Elementor id is safe   */
/* here: if the id ever changes the rule simply stops matching rather  */
/* than breaking the page.                                             */
body.woocommerce-order-received .elementor-element-7a1888d,
body.woocommerce-order-received .elementor-element-1eeb24d{
  display:none !important;
}

/* Make the confirmation itself the thing they see first. */
body.woocommerce-order-received .woocommerce-thankyou-order-received{
  display:block;
  margin:0 0 1.25rem;
  padding:1rem 1.25rem;
  border-radius:10px;
  background:#eef8f0;
  border:1px solid #b7e0c1;
  color:#17512a;
  font-size:1.25rem;
  font-weight:700;
  line-height:1.35;
}