/* =========================================================================
   BRITTLE CHECKOUT EXPERIENCE
   Cart · Checkout · Order-pay · Thank-you · Mallow

   ONE TYPE SCALE for every page (nothing below uses any other size):
     page title   clamp(30px, 4vw, 44px) / 600     (the header band only)
     heading      18px / 600                      (every section heading, every total)
     item name    15px / 600                      (product names, header sub-line)
     body         14px / 400                      (descriptions, fields, table text)
     small        13px                            (hints, variations, step labels)
     label        12px / 600                      (form labels, buttons)

   Colours are the Brittle palette only. Corner radii: 14px fields, 16px
   inner boxes (payment options, notices), 20px Mallow cards, 24px main
   cards, 12px small hint boxes, 999px pills and buttons.

   Layout rules are written for WooCommerce's standard markup and are
   guarded with :has() so they stand aside if a page builder wraps it
   differently; the fields, cards, payment and button styling work either way.
   ========================================================================= */

:root {
  --bcx-plum: #3B203D;
  --bcx-coral: #E99A8A;
  --bcx-yellow: #F4C95D;
  --bcx-cream: #F7F2E8;
  --bcx-paper: #FFFDF9;
  --bcx-muted: #756B73;
  --bcx-line: rgba(59, 32, 61, 0.12);
  --bcx-yellow-tint: #FBEAC0;
  --bcx-coral-tint: #FBEAE6;
  --bcx-font: "Outfit", sans-serif;

  --bcx-fs-title: clamp(30px, 4vw, 44px);
  --bcx-fs-heading: 18px;
  --bcx-fs-item: 15px;
  --bcx-fs-body: 14px;
  --bcx-fs-small: 13px;
  --bcx-fs-label: 12px;
  --bcx-fs-micro: 11px; /* only the compact buttons inside the cart table */

  --bcx-thumb: 56px;
}

.bcx-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@keyframes bcx-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}


/* =========================================================================
   1. PAGE HEADER BAND  [brittle_page_header]
   ========================================================================= */

.bcx-band {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  padding: 36px 24px 32px;
  background: var(--bcx-coral-tint);
  color: var(--bcx-plum);
  font-family: var(--bcx-font);
  text-align: center;
  overflow: hidden;
}

/* Mallow + title sit together as one centred group: Mallow on the left, the words on the right */
.bcx-band__inner {
  position: relative;
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 28px;
  max-width: 860px;
  margin: 0 auto;
}

.bcx-band__text {
  min-width: 0;
}

.bcx-band--char .bcx-band__text {
  text-align: left;
}

.bcx-band__title {
  margin: 0;
  font-family: var(--bcx-font);
  font-size: var(--bcx-fs-title);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--bcx-plum);
}

.bcx-band__sub {
  margin: 10px 0 0;
  font-size: var(--bcx-fs-item);
  line-height: 1.5;
  color: var(--bcx-muted);
}

/* Mallow stands on a soft round "stage" so he looks placed, not floating */
.bcx-band__art {
  position: relative;
  flex: none;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 150px;
  height: 150px;
}

.bcx-band__art::before {
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  background: var(--bcx-paper);
  opacity: 0.75;
}

.bcx-band__art.bcx-noimg {
  display: none;
}

.bcx-band--char .bcx-band__inner .bcx-band__art img.bcx-band__char {
  position: relative;
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  object-fit: contain;
  filter: drop-shadow(0 12px 16px rgba(59, 32, 61, 0.18));
  animation: bcx-bob 4s ease-in-out infinite;
}


/* ---- progress bar (Cart → Checkout → Confirmation) ---- */

.bcx-steps-wrap {
  display: flex;
  justify-content: center;
  margin-top: 26px;
}

.bcx-steps {
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: var(--bcx-paper);
  border: 1px solid var(--bcx-line);
  border-radius: 999px;
}

.bcx-step {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 6px 16px 6px 6px;
  border-radius: 999px;
  font-family: var(--bcx-font);
  font-size: var(--bcx-fs-small);
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  color: var(--bcx-muted);
}

/* the line joining one step to the next */
.bcx-step + .bcx-step {
  margin-left: 28px;
}

.bcx-step + .bcx-step::before {
  content: "";
  position: absolute;
  left: -24px;
  top: 50%;
  width: 20px;
  height: 2px;
  margin-top: -1px;
  border-radius: 2px;
  background: var(--bcx-line);
}

.bcx-step.is-done + .bcx-step::before,
.bcx-step.is-active.is-complete + .bcx-step::before {
  background: var(--bcx-coral);
}

.bcx-step__link {
  display: flex;
  align-items: center;
  gap: 8px;
  color: inherit;
  text-decoration: none;
}

.bcx-step__link:hover .bcx-step__label {
  text-decoration: underline;
}

.bcx-step__dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 24px;
  height: 24px;
  border: 1.5px solid var(--bcx-line);
  border-radius: 50%;
  background: var(--bcx-paper);
  color: var(--bcx-muted);
  font-size: var(--bcx-fs-label);
  font-weight: 600;
}

.bcx-step.is-active {
  background: var(--bcx-yellow-tint);
  color: var(--bcx-plum);
}

.bcx-step.is-active .bcx-step__dot {
  border-color: var(--bcx-plum);
  background: var(--bcx-plum);
  color: var(--bcx-paper);
}

.bcx-step.is-done {
  color: var(--bcx-plum);
}

.bcx-step.is-done .bcx-step__dot,
.bcx-step.is-active.is-complete .bcx-step__dot {
  border-color: var(--bcx-coral);
  background: var(--bcx-coral);
  color: var(--bcx-plum);
}


/* =========================================================================
   2. MALLOW CARDS  (bcx-card)
   ========================================================================= */

.bcx-card {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 20px;
  padding: 14px 20px 14px 14px;
  background: var(--bcx-yellow-tint);
  border-radius: 20px;
  color: var(--bcx-plum);
  font-family: var(--bcx-font);
}

.bcx-card__img {
  flex: none;
  width: 72px;
  height: 72px;
  object-fit: contain;
  animation: bcx-bob 4s ease-in-out infinite;
}

.bcx-card__body {
  min-width: 0;
}

.bcx-card__title {
  margin: 0;
  font-size: var(--bcx-fs-item);
  font-weight: 600;
  line-height: 1.3;
  color: var(--bcx-plum);
}

.bcx-card__text {
  margin: 3px 0 0;
  font-size: var(--bcx-fs-body);
  line-height: 1.5;
  color: var(--bcx-muted);
}

/* if the picture can't load, the card simply becomes text */
.bcx-card.bcx-noimg {
  padding-left: 20px;
}

.bcx-card--checkout_payment,
.bcx-card--pay_note,
.bcx-card--pay_receipt {
  background: var(--bcx-coral-tint);
}

/* the cart-is-empty message: Mallow on his own, centred */
.bcx-card--cart_empty,
.bcx-card--account_login {
  flex-direction: column;
  gap: 8px;
  padding: 28px 24px;
  background: transparent;
  text-align: center;
}

.bcx-card--cart_empty .bcx-card__img {
  width: 150px;
  height: 150px;
}

/* inside the cart totals box: no second background, just a divider */
.bcx-card--cart_totals {
  margin: 20px 0 0;
  padding: 16px 0 0;
  background: transparent;
  border-radius: 0;
  border-top: 1px solid var(--bcx-line);
}

.bcx-card--thankyou_next {
  margin: 0 0 24px;
}

.bcx-card--thankyou_next .bcx-card__img {
  width: 88px;
  height: 88px;
}


/* =========================================================================
   3. PRODUCT PICTURES IN THE ORDER SUMMARY
   ========================================================================= */

.bcx-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  line-height: 1.4;
}

/* Only the Checkout summary has this: WooCommerce prints a stray space after each product name there,
   leaving a blank line under it. Pulling the row up a little tightens that. (Order-pay and Thank-you
   don't print it, so they are left alone.) */
.woocommerce form.checkout #order_review .bcx-item {
  margin-bottom: -14px;
}

.bcx-thumb {
  flex: none;
  width: var(--bcx-thumb);
  height: var(--bcx-thumb);
  overflow: hidden;
  border-radius: 14px;
  background: var(--bcx-cream);
}

.bcx-thumb img,
.bcx-thumb__img {
  display: block;
  width: var(--bcx-thumb) !important;
  height: var(--bcx-thumb) !important;
  max-width: none;
  object-fit: cover;
  margin: 0 !important;
  border-radius: 0 !important;
}

.bcx-name {
  display: flex;
  flex: 1 1 0%;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.bcx-qty {
  font-size: var(--bcx-fs-small);
  font-weight: 400;
  color: var(--bcx-muted);
}

/* WooCommerce prints its own "x 1" after the name; we show it under the name instead */
.bcx-item ~ strong.product-quantity {
  display: none;
}

/* Anything printed after the name (size, personalisation details, notes) is shown as small muted text
   lined up under the name, not under the picture. This covers WooCommerce's own option lists and
   whatever markup a product-options plugin adds. */
.bcx-item ~ *:not(strong.product-quantity) {
  margin: 6px 0 0 calc(var(--bcx-thumb) + 12px) !important;
  padding: 0 !important;
  font-size: var(--bcx-fs-small) !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  color: var(--bcx-muted) !important;
  list-style: none;
}

.bcx-item ~ dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0 8px;
}

.bcx-item ~ dl dt {
  margin: 0;
  font-weight: 600;
  color: var(--bcx-plum);
}

.bcx-item ~ dl dd,
.bcx-item ~ dl dd p {
  margin: 0;
}


/* =========================================================================
   4. SHARED: notices, buttons and fields (cart, checkout, order-pay, thank-you)
   ========================================================================= */

.woocommerce-cart .woocommerce,
.woocommerce-checkout .woocommerce {
  font-family: var(--bcx-font);
  font-size: var(--bcx-fs-body);
  color: var(--bcx-plum);
}

/* notices */
.woocommerce-cart .woocommerce-message,
.woocommerce-cart .woocommerce-info,
.woocommerce-checkout .woocommerce-message,
.woocommerce-checkout .woocommerce-info {
  margin: 0 0 20px !important;
  padding: 14px 18px 14px 48px !important;
  border: 0 !important;
  border-radius: 16px !important;
  background: var(--bcx-yellow-tint) !important;
  color: var(--bcx-plum) !important;
  font-size: var(--bcx-fs-body) !important;
}

.woocommerce-cart .woocommerce-error,
.woocommerce-checkout .woocommerce-error {
  margin: 0 0 20px !important;
  padding: 14px 18px 14px 48px !important;
  border: 0 !important;
  border-left: 4px solid var(--bcx-coral) !important;
  border-radius: 16px !important;
  background: var(--bcx-coral-tint) !important;
  color: var(--bcx-plum) !important;
  font-size: var(--bcx-fs-body) !important;
}

.woocommerce-cart .woocommerce-message::before,
.woocommerce-cart .woocommerce-info::before,
.woocommerce-cart .woocommerce-error::before,
.woocommerce-checkout .woocommerce-message::before,
.woocommerce-checkout .woocommerce-info::before,
.woocommerce-checkout .woocommerce-error::before {
  color: var(--bcx-plum) !important;
  font-size: var(--bcx-fs-heading);
  top: 14px;
  left: 16px;
}

.woocommerce-cart .woocommerce-info a,
.woocommerce-checkout .woocommerce-info a {
  color: var(--bcx-plum);
  font-weight: 600;
}

/* buttons: plum pill, coral on hover with PLUM text (white on coral is too faint to read) */
.woocommerce-cart .woocommerce a.button,
.woocommerce-cart .woocommerce button.button,
.woocommerce-cart .woocommerce input.button,
.woocommerce-checkout .woocommerce a.button:not(#place_order),
.woocommerce-checkout .woocommerce button.button:not(#place_order),
.woocommerce-checkout .woocommerce input.button {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 24px !important;
  border: 1px solid var(--bcx-plum) !important;
  border-radius: 999px !important;
  background: var(--bcx-plum) !important;
  color: #ffffff !important;
  font-family: var(--bcx-font) !important;
  font-size: var(--bcx-fs-label) !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em;
  text-transform: none !important;
  text-decoration: none !important;
  box-shadow: none !important;
  transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease !important;
}

.woocommerce-cart .woocommerce a.button:hover,
.woocommerce-cart .woocommerce button.button:hover:not(:disabled),
.woocommerce-cart .woocommerce input.button:hover,
.woocommerce-checkout .woocommerce a.button:not(#place_order):hover,
.woocommerce-checkout .woocommerce button.button:not(#place_order):hover,
.woocommerce-checkout .woocommerce input.button:hover {
  background: var(--bcx-coral) !important;
  border-color: var(--bcx-coral) !important;
  color: var(--bcx-plum) !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(233, 154, 138, 0.22) !important;
}

.woocommerce-cart .woocommerce button.button:disabled,
.woocommerce-cart .woocommerce button.button[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

/* The two big call-to-action buttons: colours and shape only, so the
   width/height/padding stay exactly as your theme renders them. */
.woocommerce a.checkout-button,
.woocommerce button#place_order {
  box-sizing: border-box;
  min-height: 48px;
  border: 1px solid var(--bcx-plum) !important;
  border-radius: 999px !important;
  background: var(--bcx-plum) !important;
  color: #ffffff !important;
  font-family: var(--bcx-font) !important;
  font-size: var(--bcx-fs-label) !important;
  font-weight: 600 !important;
  text-transform: none !important;
  box-shadow: none !important;
  transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease !important;
}

.woocommerce a.checkout-button:hover,
.woocommerce button#place_order:hover {
  background: var(--bcx-coral) !important;
  border-color: var(--bcx-coral) !important;
  color: var(--bcx-plum) !important;
}

.woocommerce button#place_order {
  width: 100%;
}

/* fields */
.woocommerce-cart .woocommerce input.input-text,
.woocommerce-cart .woocommerce textarea,
.woocommerce-cart .woocommerce select,
.woocommerce-checkout .woocommerce input.input-text,
.woocommerce-checkout .woocommerce input[type="text"],
.woocommerce-checkout .woocommerce input[type="email"],
.woocommerce-checkout .woocommerce input[type="tel"],
.woocommerce-checkout .woocommerce input[type="password"],
.woocommerce-checkout .woocommerce textarea,
.woocommerce-checkout .woocommerce select {
  box-sizing: border-box;
  width: 100%;
  height: 50px;
  padding: 0 16px !important;
  border: 1px solid var(--bcx-line) !important;
  border-radius: 14px !important;
  background: var(--bcx-cream) !important;
  color: var(--bcx-plum) !important;
  font-family: var(--bcx-font) !important;
  font-size: var(--bcx-fs-body) !important;
  box-shadow: none !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.woocommerce-cart .woocommerce textarea,
.woocommerce-checkout .woocommerce textarea {
  height: auto;
  min-height: 110px;
  padding: 14px 16px !important;
}

.woocommerce-cart .woocommerce input.input-text:focus,
.woocommerce-cart .woocommerce select:focus,
.woocommerce-checkout .woocommerce input:focus,
.woocommerce-checkout .woocommerce textarea:focus,
.woocommerce-checkout .woocommerce select:focus {
  border-color: var(--bcx-coral) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(233, 154, 138, 0.28) !important;
}

.woocommerce-checkout .woocommerce ::placeholder {
  color: var(--bcx-muted);
  opacity: 0.8;
}

/* the searchable country / state dropdown (select2) */
.woocommerce-checkout .woocommerce .select2-container {
  width: 100% !important;
}

.woocommerce-checkout .woocommerce .select2-container .select2-selection--single {
  box-sizing: border-box;
  height: 50px !important;
  border: 1px solid var(--bcx-line) !important;
  border-radius: 14px !important;
  background: var(--bcx-cream) !important;
  box-shadow: none !important;
}

.woocommerce-checkout .woocommerce .select2-container--default .select2-selection--single .select2-selection__rendered {
  padding: 0 40px 0 16px !important;
  color: var(--bcx-plum) !important;
  font-family: var(--bcx-font) !important;
  font-size: var(--bcx-fs-body) !important;
  line-height: 48px !important;
}

.woocommerce-checkout .woocommerce .select2-container--default .select2-selection--single .select2-selection__arrow {
  top: 0 !important;
  right: 8px !important;
  height: 48px !important;
}

.woocommerce-checkout .woocommerce .select2-container--open .select2-selection--single,
.woocommerce-checkout .woocommerce .select2-container--focus .select2-selection--single {
  border-color: var(--bcx-coral) !important;
}

/* ticks and radios */
.woocommerce-cart .woocommerce input[type="checkbox"],
.woocommerce-cart .woocommerce input[type="radio"],
.woocommerce-checkout .woocommerce input[type="checkbox"],
.woocommerce-checkout .woocommerce input[type="radio"] {
  accent-color: var(--bcx-coral);
  width: 18px;
  height: 18px;
  margin: 0;
  cursor: pointer;
}


/* =========================================================================
   5. CART PAGE
   ========================================================================= */

.woocommerce-cart .woocommerce:has(> .woocommerce-cart-form) {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(300px, 1fr);
  column-gap: 32px;
  align-items: start;
}

.woocommerce-cart .woocommerce:has(> .woocommerce-cart-form) > .woocommerce-notices-wrapper {
  grid-column: 1 / -1;
}

.woocommerce-cart .woocommerce > .woocommerce-cart-form {
  grid-column: 1;
}

.woocommerce-cart .woocommerce > .cart-collaterals {
  grid-column: 2;
  float: none;
  width: 100%;
}

.woocommerce-cart .cart-collaterals .cart_totals {
  float: none !important;
  width: 100% !important;
}

/* the items table becomes one rounded card */
.woocommerce-cart table.shop_table.cart {
  width: 100%;
  margin: 0 0 24px !important;
  border: 1px solid var(--bcx-line) !important;
  border-radius: 24px !important;
  border-collapse: separate !important;
  border-spacing: 0;
  overflow: hidden;
  background: var(--bcx-paper);
}

.woocommerce-cart table.shop_table.cart thead th {
  padding: 14px 16px !important;
  border: 0 !important;
  background: var(--bcx-cream) !important;
  color: var(--bcx-muted) !important;
  font-size: var(--bcx-fs-label) !important;
  font-weight: 600 !important;
  text-transform: none !important;
  text-align: left;
}

.woocommerce-cart table.shop_table.cart td {
  padding: 16px !important;
  border: 0 !important;
  border-top: 1px solid var(--bcx-line) !important;
  background: transparent !important;
  color: var(--bcx-plum);
  font-size: var(--bcx-fs-body);
  vertical-align: middle;
}

.woocommerce-cart table.shop_table.cart td.product-thumbnail {
  width: 96px;
}

.woocommerce-cart table.shop_table.cart td.product-thumbnail img {
  display: block;
  width: 72px !important;
  height: 72px !important;
  max-width: none;
  object-fit: cover;
  border-radius: 14px;
  background: var(--bcx-cream);
}

.woocommerce-cart table.shop_table.cart td.product-name a {
  color: var(--bcx-plum) !important;
  font-size: var(--bcx-fs-item);
  font-weight: 600;
  text-decoration: none !important;
}

.woocommerce-cart table.shop_table.cart td.product-name a:hover {
  color: var(--bcx-coral) !important;
}

.woocommerce-cart table.shop_table.cart td.product-name dl.variation,
.woocommerce-cart table.shop_table.cart td.product-name .variation {
  margin: 4px 0 0;
  font-size: var(--bcx-fs-small);
  color: var(--bcx-muted);
}

.woocommerce-cart table.shop_table.cart td.product-subtotal {
  font-weight: 600;
}

/* product options (e.g. "Name: Dr. Raman") on one tidy line */
.woocommerce-cart table.shop_table.cart td.product-name dl.variation {
  display: flex;
  flex-wrap: wrap;
  gap: 0 6px;
}

.woocommerce-cart table.shop_table.cart td.product-name dl.variation dt {
  margin: 0;
  font-weight: 600;
}

.woocommerce-cart table.shop_table.cart td.product-name dl.variation dd,
.woocommerce-cart table.shop_table.cart td.product-name dl.variation dd p {
  margin: 0;
}

.woocommerce-cart .return-to-shop {
  margin: 0;
  text-align: center;
}

/* remove (x) */
.woocommerce-cart table.shop_table.cart td.product-remove {
  width: 48px;
  padding-right: 0 !important;
}

.woocommerce-cart table.shop_table.cart a.remove {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50% !important;
  background: var(--bcx-coral-tint) !important;
  color: var(--bcx-plum) !important;
  font-size: var(--bcx-fs-heading);
  font-weight: 400;
  line-height: 1;
  text-decoration: none;
  transition: background 0.2s ease;
}

.woocommerce-cart table.shop_table.cart a.remove:hover {
  background: var(--bcx-coral) !important;
  color: var(--bcx-plum) !important;
}

/* quantity: one pill  [ − | 1 | + ]  whatever the plus/minus buttons are called.
   The pill is .quantity itself, or the wrapper around it when a plugin puts the buttons outside it
   (e.g. "Qty Increment Buttons"). Buttons are pulled back into the row, minus left, plus right. */
.woocommerce-cart td.product-quantity .quantity,
.woocommerce-cart td.product-quantity :has(> .quantity):has(> :is(button, input[type="button"], .minus, .plus)) {
  box-sizing: border-box;
  position: relative;
  display: inline-flex !important;
  flex-wrap: nowrap !important;
  align-items: center;
  width: auto !important;
  max-width: none !important;
  height: 44px;
  margin: 0 !important;
  padding: 0 4px !important;
  border: 1px solid var(--bcx-line) !important;
  border-radius: 999px !important;
  background: var(--bcx-cream) !important;
  box-shadow: none !important;
  overflow: hidden;
  vertical-align: middle;
}

/* when the wrapper is the pill, the .quantity inside it is plain */
.woocommerce-cart td.product-quantity :has(> .quantity):has(> :is(button, input[type="button"], .minus, .plus)) > .quantity {
  order: 2;
  height: 100%;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}

/* every child sits in the row (no absolute positioning, floats or offsets left over from the theme) */
.woocommerce-cart td.product-quantity .quantity > *,
.woocommerce-cart td.product-quantity :has(> .quantity):has(> :is(button, input[type="button"], .minus, .plus)) > * {
  position: static !important;
  inset: auto !important;
  float: none !important;
  transform: none !important;
  margin: 0 !important;
}

/* the hidden "Quantity" label stays hidden */
.woocommerce-cart td.product-quantity .quantity > label,
.woocommerce-cart td.product-quantity .quantity > .screen-reader-text {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* the number */
.woocommerce-cart td.product-quantity .quantity input.qty {
  order: 2;
  flex: none !important;
  box-sizing: border-box;
  width: 42px !important;
  min-width: 0 !important;
  height: 42px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--bcx-plum) !important;
  font-family: var(--bcx-font);
  font-size: var(--bcx-fs-item) !important;
  font-weight: 600;
  line-height: 42px !important;
  text-align: center !important;
  text-indent: 0 !important;
  -moz-appearance: textfield;
  appearance: textfield;
}

.woocommerce-cart td.product-quantity .quantity input.qty::-webkit-outer-spin-button,
.woocommerce-cart td.product-quantity .quantity input.qty::-webkit-inner-spin-button {
  margin: 0;
  -webkit-appearance: none;
}

/* the plus / minus buttons: same size, centred symbol, plus on the right */
.woocommerce-cart td.product-quantity .quantity > :is(button, input[type="button"], .plus, .minus, [class*="plus"], [class*="minus"], [class*="increase"], [class*="decrease"], [class*="increment"], [class*="decrement"]):not(:has(input.qty)):not(label):not(.screen-reader-text),
.woocommerce-cart td.product-quantity :has(> .quantity):has(> :is(button, input[type="button"], .minus, .plus)) > :is(button, input[type="button"], .plus, .minus, [class*="plus"], [class*="minus"], [class*="increase"], [class*="decrease"], [class*="increment"], [class*="decrement"]):not(:has(input.qty)) {
  order: 3;
  flex: none !important;
  box-sizing: border-box;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 34px !important;
  min-width: 0 !important;
  height: 34px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--bcx-plum) !important;
  font-family: var(--bcx-font);
  font-size: 18px !important;
  font-weight: 500;
  line-height: 1 !important;
  text-align: center;
  text-decoration: none !important;
  cursor: pointer;
  transition: background 0.2s ease;
}

.woocommerce-cart td.product-quantity .quantity > :is(button, input[type="button"], .plus, .minus, [class*="plus"], [class*="minus"], [class*="increase"], [class*="decrease"], [class*="increment"], [class*="decrement"]):not(:has(input.qty)):not(label):not(.screen-reader-text):hover,
.woocommerce-cart td.product-quantity :has(> .quantity):has(> :is(button, input[type="button"], .minus, .plus)) > :is(button, input[type="button"], .plus, .minus, [class*="plus"], [class*="minus"], [class*="increase"], [class*="decrease"], [class*="increment"], [class*="decrement"]):not(:has(input.qty)):hover {
  background: var(--bcx-paper) !important;
}

/* minus goes on the left */
.woocommerce-cart td.product-quantity .quantity > :is(.minus, [class*="minus"], [class*="decrease"], [class*="decrement"], [class*="qty-down"], [value="-"], [data-type="minus"]),
.woocommerce-cart td.product-quantity :has(> .quantity) > :is(.minus, [class*="minus"], [class*="decrease"], [class*="decrement"], [class*="qty-down"], [value="-"], [data-type="minus"]) {
  order: 1 !important;
}

/* coupon + update cart row */
.woocommerce-cart table.shop_table.cart td.actions {
  padding: 16px !important;
  background: var(--bcx-cream) !important;
}

.woocommerce-cart table.shop_table.cart td.actions::after {
  content: "";
  display: table;
  clear: both;
}

.woocommerce-cart table.shop_table.cart td.actions .coupon {
  display: flex;
  align-items: center;
  gap: 10px;
  float: left;
  width: calc(100% - 156px);
}

.woocommerce-cart table.shop_table.cart td.actions .coupon input.input-text {
  flex: 1 1 auto;
  width: auto !important;
  min-width: 0;
  margin: 0 !important;
  background: var(--bcx-paper) !important;
}

.woocommerce-cart table.shop_table.cart td.actions > button[name="update_cart"] {
  float: right;
  background: transparent !important;
  color: var(--bcx-plum) !important;
}

/* totals box */
.woocommerce-cart .cart_totals {
  box-sizing: border-box;
  padding: 24px;
  border: 1px solid var(--bcx-line);
  border-radius: 24px;
  background: var(--bcx-paper);
}

.woocommerce-cart .cart_totals h2 {
  margin: 0 0 16px;
  font-family: var(--bcx-font);
  font-size: var(--bcx-fs-heading) !important;
  font-weight: 600 !important;
  color: var(--bcx-plum);
}

.woocommerce-cart .cart_totals table.shop_table {
  margin: 0 0 20px;
  border: 0 !important;
  border-collapse: collapse;
  background: transparent;
}

.woocommerce-cart .cart_totals table.shop_table th,
.woocommerce-cart .cart_totals table.shop_table td {
  padding: 12px 0 !important;
  border: 0 !important;
  border-top: 1px solid var(--bcx-line) !important;
  background: transparent !important;
  font-size: var(--bcx-fs-body);
  vertical-align: top;
}

.woocommerce-cart .cart_totals table.shop_table th {
  font-weight: 400;
  color: var(--bcx-muted);
  text-align: left;
}

.woocommerce-cart .cart_totals table.shop_table td {
  font-weight: 600;
  text-align: right;
}

.woocommerce-cart .cart_totals .order-total th,
.woocommerce-cart .cart_totals .order-total td {
  padding-top: 16px !important;
  color: var(--bcx-plum);
}

.woocommerce-cart .cart_totals .order-total th {
  font-size: var(--bcx-fs-item);
  font-weight: 600;
}

.woocommerce-cart .cart_totals .order-total .amount {
  font-size: var(--bcx-fs-heading);
  font-weight: 600;
}

.woocommerce-cart .cart_totals .wc-proceed-to-checkout {
  padding: 0;
}

.woocommerce-cart .cart_totals .wc-proceed-to-checkout a.checkout-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 48px;
  margin: 0;
  padding: 0 24px;
  text-align: center;
}

/* ---- each product's own cross-sells, right under it, as a swipeable row (carousel) ----
   The script (cart.js) moves each block into its own full-width row under the product and adds the
   arrow buttons. Without it the row still scrolls sideways by swipe or scrollbar.
   The long selectors are deliberate: the rules above colour and size EVERY link in a product cell, and
   these buttons and names must keep their own sizes and colours. */
.woocommerce-cart table.shop_table.cart .bcx-cross {
  box-sizing: border-box;
  margin: 12px 0 0;
  padding: 14px 16px 16px;
  border-radius: 20px;
  background: var(--bcx-cream);
  font-family: var(--bcx-font);
  text-align: left;
}

/* a wide row of cards must never make the table wider than its card: it takes no width of its own
   (width: 0) and then fills whatever room the cell has (min-width: 100%) */
.woocommerce-cart table.shop_table.cart .bcx-cross {
  width: 0;
  min-width: 100%;
}

.woocommerce-cart table.shop_table.cart .bcx-cross__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 10px;
}

.woocommerce-cart table.shop_table.cart .bcx-cross__title {
  margin: 0;
  color: var(--bcx-muted);
  font-size: var(--bcx-fs-label);
  font-weight: 600;
  line-height: 1.3;
}

/* previous / next, added by the script only when there is more than fits */
.woocommerce-cart table.shop_table.cart .bcx-cross__nav {
  display: flex;
  gap: 8px;
}

.woocommerce-cart table.shop_table.cart .bcx-cross__nav[hidden] {
  display: none;
}

.woocommerce-cart table.shop_table.cart .bcx-cross button.bcx-cross__btn {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  min-height: 0;
  margin: 0;
  padding: 0 !important;
  border: 1px solid var(--bcx-plum) !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: var(--bcx-plum) !important;
  box-shadow: none !important;
  cursor: pointer;
  transition: background 0.25s ease, border-color 0.25s ease, opacity 0.25s ease !important;
}

.woocommerce-cart table.shop_table.cart .bcx-cross button.bcx-cross__btn:hover:not(:disabled) {
  background: var(--bcx-coral) !important;
  border-color: var(--bcx-coral) !important;
  color: var(--bcx-plum) !important;
}

.woocommerce-cart table.shop_table.cart .bcx-cross button.bcx-cross__btn:disabled {
  opacity: 0.35;
  cursor: default;
}

.woocommerce-cart table.shop_table.cart .bcx-cross button.bcx-cross__btn:focus-visible {
  outline: 2px solid var(--bcx-plum);
  outline-offset: 2px;
}

.woocommerce-cart table.shop_table.cart .bcx-cross button.bcx-cross__btn svg {
  display: block;
}

.woocommerce-cart table.shop_table.cart .bcx-cross__list {
  display: flex;
  gap: 12px;
  margin: 0;
  padding: 0 0 2px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  list-style: none;
}

.woocommerce-cart table.shop_table.cart .bcx-cross__list:focus-visible {
  outline: 2px solid var(--bcx-plum);
  outline-offset: 4px;
  border-radius: 12px;
}

/* the scrollbar is hidden only once the arrows exist to replace it */
.woocommerce-cart table.shop_table.cart .bcx-cross.is-carousel .bcx-cross__list {
  scrollbar-width: none;
}

.woocommerce-cart table.shop_table.cart .bcx-cross.is-carousel .bcx-cross__list::-webkit-scrollbar {
  display: none;
}

/* one card: the picture on the left; on the right the name, and under it the price with the button on the same line.
   If the card is too narrow for both, the button drops to its own line: nothing ever overlaps. */
.woocommerce-cart table.shop_table.cart .bcx-cross__item {
  box-sizing: border-box;
  display: grid;
  flex: 0 0 clamp(290px, 31%, 320px);
  grid-template-columns: 64px minmax(0, 1fr);
  grid-template-areas:
    "thumb name"
    "thumb foot";
  gap: 6px 12px;
  align-items: center;
  margin: 0;
  padding: 10px;
  border: 1px solid var(--bcx-line);
  border-radius: 16px;
  background: var(--bcx-paper);
  scroll-snap-align: start;
}

.woocommerce-cart table.shop_table.cart .bcx-cross a.bcx-cross__thumb {
  grid-area: thumb;
  display: block;
  width: 64px;
  height: 64px;
  overflow: hidden;
  border-radius: 14px;
  background: var(--bcx-cream);
}

.woocommerce-cart table.shop_table.cart .bcx-cross .bcx-cross__img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-width: none;
  margin: 0 !important;
  border-radius: 0 !important;
  object-fit: cover;
}

.woocommerce-cart table.shop_table.cart .bcx-cross a.bcx-cross__link {
  grid-area: name;
  align-self: end;
  min-width: 0;
  color: var(--bcx-plum) !important;
  font-size: var(--bcx-fs-item);
  font-weight: 600;
  text-decoration: none !important;
}

.woocommerce-cart table.shop_table.cart .bcx-cross a.bcx-cross__link:hover .bcx-cross__name {
  text-decoration: underline;
  text-decoration-color: var(--bcx-coral);
  text-underline-offset: 3px;
}

.woocommerce-cart table.shop_table.cart .bcx-cross__name {
  display: -webkit-box;
  overflow: hidden;
  color: var(--bcx-plum);
  font-size: var(--bcx-fs-item);
  font-weight: 600;
  line-height: 1.3;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.woocommerce-cart table.shop_table.cart .bcx-cross__foot {
  grid-area: foot;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 8px;
  min-width: 0;
}

.woocommerce-cart table.shop_table.cart .bcx-cross__price {
  display: flex;
  flex-wrap: wrap;
  gap: 0 6px;
  min-width: 0;
  color: var(--bcx-muted);
  font-size: var(--bcx-fs-body);
  font-weight: 400;
  line-height: 1.3;
  white-space: nowrap;
}

.woocommerce-cart table.shop_table.cart .bcx-cross__price del {
  opacity: 0.7;
}

.woocommerce-cart table.shop_table.cart .bcx-cross__price ins {
  background: transparent;
  text-decoration: none;
}

/* the Add button: outlined (quieter than the plum buttons), same 48px height and 12px/600 as every button */
.woocommerce-cart table.shop_table.cart .bcx-cross a.bcx-cross__add {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  margin-left: auto;
  min-width: 56px;
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid var(--bcx-plum);
  border-radius: 999px;
  background: transparent;
  color: var(--bcx-plum) !important;
  font-family: var(--bcx-font);
  font-size: var(--bcx-fs-micro) !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em;
  line-height: 1;
  text-decoration: none !important;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: background 0.25s ease, border-color 0.25s ease;
}

/* coral on hover with PLUM text (never coral text: it is too faint on coral) */
.woocommerce-cart table.shop_table.cart .bcx-cross a.bcx-cross__add:hover {
  background: var(--bcx-coral);
  border-color: var(--bcx-coral);
  color: var(--bcx-plum) !important;
}

.woocommerce-cart table.shop_table.cart .bcx-cross a:focus-visible {
  outline: 2px solid var(--bcx-plum);
  outline-offset: 2px;
}

/* once moved into its own row under the product */
.woocommerce-cart table.shop_table.cart tr.bcx-cross-row td.bcx-cross-cell {
  padding: 0 16px 16px !important;
  border-top: 0 !important;
  background: transparent !important;
}

.woocommerce-cart table.shop_table.cart tr.bcx-cross-row .bcx-cross {
  margin-top: 0;
}

/* ---- customization details: a line that opens when tapped ---- */
.woocommerce-cart table.shop_table.cart td.product-name details.bcx-details {
  margin: 10px 0 0;
  font-family: var(--bcx-font);
}

.woocommerce-cart table.shop_table.cart td.product-name details.bcx-details > summary.bcx-details__summary {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid var(--bcx-line);
  border-radius: 999px;
  background: var(--bcx-paper);
  color: var(--bcx-plum);
  font-size: var(--bcx-fs-micro);
  font-weight: 600;
  line-height: 1;
  list-style: none;
  cursor: pointer;
  max-width: 100%;
  white-space: nowrap;
  transition: background 0.25s ease, border-color 0.25s ease;
}

.woocommerce-cart table.shop_table.cart td.product-name details.bcx-details > summary.bcx-details__summary::-webkit-details-marker {
  display: none;
}

.woocommerce-cart table.shop_table.cart td.product-name details.bcx-details > summary.bcx-details__summary::marker {
  content: "";
}

.woocommerce-cart table.shop_table.cart td.product-name details.bcx-details > summary.bcx-details__summary:hover {
  border-color: var(--bcx-coral);
  background: var(--bcx-coral-tint);
}

.woocommerce-cart table.shop_table.cart td.product-name details.bcx-details > summary:focus-visible {
  outline: 2px solid var(--bcx-plum);
  outline-offset: 2px;
}

.woocommerce-cart table.shop_table.cart td.product-name details.bcx-details .bcx-details__label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.woocommerce-cart table.shop_table.cart td.product-name details.bcx-details .bcx-details__chev {
  flex: none;
  display: inline-flex;
  transition: transform 0.25s ease;
}

.woocommerce-cart table.shop_table.cart td.product-name details.bcx-details[open] .bcx-details__chev {
  transform: rotate(180deg);
}

.woocommerce-cart table.shop_table.cart td.product-name details.bcx-details[open] > summary.bcx-details__summary {
  border-color: var(--bcx-coral);
  background: var(--bcx-coral-tint);
}

/* what is inside: small and tidy, whatever the theme does to a plain list */
.woocommerce-cart table.shop_table.cart td.product-name details.bcx-details dl.variation {
  box-sizing: border-box;
  display: grid !important;
  gap: 2px;
  margin: 8px 0 0 !important;
  padding: 12px 14px !important;
  border-radius: 14px;
  background: var(--bcx-cream);
}

.woocommerce-cart table.shop_table.cart td.product-name details.bcx-details dl.variation dt {
  float: none !important;
  clear: none !important;
  margin: 0 !important;
  padding: 0 !important;
  color: var(--bcx-muted) !important;
  font-size: var(--bcx-fs-label) !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
}

.woocommerce-cart table.shop_table.cart td.product-name details.bcx-details dl.variation dd {
  margin: 0 0 8px !important;
  padding: 0 !important;
  color: var(--bcx-plum) !important;
  font-size: var(--bcx-fs-body) !important;
  font-weight: 400 !important;
  line-height: 1.45 !important;
}

.woocommerce-cart table.shop_table.cart td.product-name details.bcx-details dl.variation dd:last-child {
  margin-bottom: 0 !important;
}

.woocommerce-cart table.shop_table.cart td.product-name details.bcx-details dl.variation dd p {
  margin: 0 !important;
  font-size: inherit !important;
}

/* "You may also like" under the cart: same heading and product-name sizes as everywhere else */
.woocommerce-cart .cross-sells {
  margin-top: 8px;
}

.woocommerce-cart .cross-sells > h2 {
  margin: 0 0 16px;
  font-family: var(--bcx-font);
  font-size: var(--bcx-fs-heading) !important;
  font-weight: 600 !important;
  color: var(--bcx-plum);
}

.woocommerce-cart .cross-sells ul.products li.product .woocommerce-loop-product__title {
  font-size: var(--bcx-fs-item);
  font-weight: 600;
  color: var(--bcx-plum);
}


/* =========================================================================
   6. CHECKOUT PAGE
   ========================================================================= */

.woocommerce-cart .woocommerce::before,
.woocommerce-cart .woocommerce::after,
.woocommerce form.checkout::before,
.woocommerce form.checkout:not(.processing)::after {
  display: none;
}

/* two columns: details on the left, Mallow + order summary on the right */
.woocommerce form.checkout:has(> #customer_details) {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(320px, 1fr);
  column-gap: 32px;
  align-items: start;
}

.woocommerce form.checkout > .woocommerce-NoticeGroup {
  grid-column: 1 / -1;
  grid-row: 1;
}

.woocommerce form.checkout > #customer_details {
  grid-column: 1;
  grid-row: 2 / span 6;
  float: none;
  width: 100%;
}

.woocommerce form.checkout > .bcx-card--checkout_side {
  grid-column: 2;
  grid-row: 2;
}

.woocommerce form.checkout > #order_review_heading {
  grid-column: 2;
  grid-row: 3;
}

.woocommerce form.checkout > #order_review {
  grid-column: 2;
  grid-row: 4;
  float: none;
  width: 100%;
  position: sticky;
  top: 24px;
}

/* billing / shipping / notes each become a card */
.woocommerce form.checkout #customer_details .col-1,
.woocommerce form.checkout #customer_details .col-2 {
  float: none;
  width: 100%;
  max-width: none;
  padding: 0;
}

.woocommerce form.checkout .woocommerce-billing-fields,
.woocommerce form.checkout .woocommerce-shipping-fields,
.woocommerce form.checkout .woocommerce-additional-fields {
  box-sizing: border-box;
  margin: 0 0 20px;
  padding: 28px;
  border: 1px solid var(--bcx-line);
  border-radius: 24px;
  background: var(--bcx-paper);
}

.woocommerce form.checkout .woocommerce-billing-fields h3,
.woocommerce form.checkout .woocommerce-shipping-fields h3,
.woocommerce form.checkout .woocommerce-additional-fields h3,
.woocommerce form.checkout #order_review_heading {
  margin: 0 0 18px;
  font-family: var(--bcx-font) !important;
  font-size: var(--bcx-fs-heading) !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  color: var(--bcx-plum) !important;
}

.woocommerce form.checkout #order_review_heading {
  margin: 0 0 12px;
}

/* the "ship to a different address" tick sits in a heading — keep it tidy */
.woocommerce form.checkout #ship-to-different-address {
  margin: 0;
  font-size: var(--bcx-fs-heading);
}

.woocommerce form.checkout #ship-to-different-address label {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: var(--bcx-fs-heading) !important;
  font-weight: 600 !important;
  cursor: pointer;
}

/* fields: two across, one across on small screens */
.woocommerce form.checkout .woocommerce-billing-fields__field-wrapper,
.woocommerce form.checkout .woocommerce-shipping-fields__field-wrapper,
.woocommerce form.checkout .woocommerce-additional-fields__field-wrapper,
.woocommerce form.checkout .woocommerce-account-fields {
  display: flex;
  flex-wrap: wrap;
  column-gap: 16px;
}

.woocommerce form.checkout .woocommerce-billing-fields__field-wrapper .form-row,
.woocommerce form.checkout .woocommerce-shipping-fields__field-wrapper .form-row,
.woocommerce form.checkout .woocommerce-additional-fields__field-wrapper .form-row,
.woocommerce form.checkout .woocommerce-account-fields .form-row {
  box-sizing: border-box;
  float: none !important;
  width: 100% !important;
  margin: 0 0 16px !important;
  padding: 0 !important;
}

.woocommerce form.checkout .woocommerce-billing-fields__field-wrapper .form-row-first,
.woocommerce form.checkout .woocommerce-billing-fields__field-wrapper .form-row-last,
.woocommerce form.checkout .woocommerce-shipping-fields__field-wrapper .form-row-first,
.woocommerce form.checkout .woocommerce-shipping-fields__field-wrapper .form-row-last {
  width: calc(50% - 8px) !important;
}

.woocommerce form.checkout .form-row .clear,
.woocommerce form.checkout .woocommerce-billing-fields__field-wrapper > .clear {
  display: none;
}

.woocommerce form.checkout .form-row label {
  display: block;
  margin: 0 0 6px;
  font-family: var(--bcx-font);
  font-size: var(--bcx-fs-label);
  font-weight: 600;
  line-height: 1.3;
  color: var(--bcx-plum);
}

.woocommerce form.checkout .form-row label .required {
  color: var(--bcx-coral);
  text-decoration: none;
}

.woocommerce form.checkout .form-row label .optional {
  font-weight: 400;
  color: var(--bcx-muted);
}

.woocommerce form.checkout .form-row label.checkbox {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--bcx-fs-body);
  font-weight: 400;
}

.woocommerce form.checkout .form-row .description,
.woocommerce form.checkout .form-row .woocommerce-input-wrapper .description {
  font-size: var(--bcx-fs-small);
  color: var(--bcx-muted);
}

/* a field with a problem: one clean red border, no glow (a glow bleeds past the field's edge) */
.woocommerce form.checkout .form-row.woocommerce-invalid input.input-text,
.woocommerce form.checkout .form-row.woocommerce-invalid select,
.woocommerce form.checkout .form-row.woocommerce-invalid textarea,
.woocommerce form.checkout .form-row.woocommerce-invalid .select2-selection {
  border: 1px solid #C0392B !important;
  box-shadow: none !important;
}

/* while typing in it again: the normal focus look */
.woocommerce form.checkout .form-row.woocommerce-invalid input.input-text:focus,
.woocommerce form.checkout .form-row.woocommerce-invalid textarea:focus {
  border-color: var(--bcx-coral) !important;
  box-shadow: 0 0 0 3px rgba(233, 154, 138, 0.28) !important;
}

/* the "Have a coupon?" and "Returning customer?" forms that open above the checkout */
.woocommerce-checkout form.checkout_coupon,
.woocommerce-checkout form.woocommerce-form-login {
  box-sizing: border-box;
  margin: 0 0 20px;
  padding: 20px;
  border: 1px solid var(--bcx-line);
  border-radius: 16px;
  background: var(--bcx-paper);
}

.woocommerce-checkout form.checkout_coupon p,
.woocommerce-checkout form.woocommerce-form-login p {
  margin: 0 0 12px;
  font-size: var(--bcx-fs-body);
  color: var(--bcx-muted);
}

.woocommerce-checkout form.checkout_coupon .form-row-first,
.woocommerce-checkout form.checkout_coupon .form-row-last {
  float: none;
  width: 100%;
}

/* ---- the Checkout summary card ----
   A page builder (Elementor) wraps the "Your order" heading and the table in its own box, which would
   show our table as a card inside a card. So whichever element directly holds the heading becomes the
   one card (in Brittle paper colour, like the billing card), and the table inside goes flat. */
.woocommerce form.checkout *:has(> #order_review_heading) {
  box-sizing: border-box;
  padding: 24px;
  border: 1px solid var(--bcx-line);
  border-radius: 24px;
  background: var(--bcx-paper);
  grid-column: 2;
  grid-row: 3;
  align-self: start;
}

.woocommerce form.checkout *:has(> #order_review_heading) > #order_review_heading {
  margin: 0 0 12px;
}

.woocommerce form.checkout *:has(> #order_review_heading) #order_review {
  position: static;
}

/* the payment block sits inside that same card, so it drops its own frame (the options stay as cards) */
.woocommerce form.checkout *:has(> #order_review_heading) #payment {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.woocommerce form.checkout *:has(> #order_review_heading) .bcx-card--checkout_payment {
  margin-top: 4px;
}

/* ---- order summary (checkout: inside #order_review; order-pay: the table in the form) ---- */

.woocommerce form.checkout #order_review table.shop_table,
.woocommerce form#order_review table.shop_table {
  width: 100%;
  margin: 0 0 20px !important;
  border: 1px solid var(--bcx-line) !important;
  border-radius: 24px !important;
  border-collapse: separate !important;
  border-spacing: 0;
  overflow: hidden;
  background: var(--bcx-paper);
}

.woocommerce form.checkout #order_review table.shop_table thead th,
.woocommerce form#order_review table.shop_table thead th {
  padding: 14px 18px !important;
  border: 0 !important;
  background: var(--bcx-cream) !important;
  color: var(--bcx-muted) !important;
  font-size: var(--bcx-fs-label) !important;
  font-weight: 600 !important;
  text-transform: none !important;
  text-align: left;
}

.woocommerce form.checkout #order_review table.shop_table thead th:last-child,
.woocommerce form#order_review table.shop_table thead th:last-child {
  text-align: right;
}

.woocommerce form.checkout #order_review table.shop_table td,
.woocommerce form.checkout #order_review table.shop_table tfoot th,
.woocommerce form#order_review table.shop_table td,
.woocommerce form#order_review table.shop_table tfoot th {
  padding: 14px 18px !important;
  border: 0 !important;
  border-top: 1px solid var(--bcx-line) !important;
  background: transparent !important;
  color: var(--bcx-plum);
  font-size: var(--bcx-fs-body);
  vertical-align: middle;
}

.woocommerce form.checkout #order_review table.shop_table td.product-name,
.woocommerce form#order_review table.shop_table td.product-name {
  font-size: var(--bcx-fs-item);
  font-weight: 600;
}

.woocommerce form.checkout #order_review table.shop_table .product-quantity,
.woocommerce form#order_review table.shop_table .product-quantity {
  font-size: var(--bcx-fs-small);
  font-weight: 400;
  color: var(--bcx-muted);
}

.woocommerce form.checkout #order_review table.shop_table td.product-total,
.woocommerce form.checkout #order_review table.shop_table tfoot td,
.woocommerce form#order_review table.shop_table td.product-total,
.woocommerce form#order_review table.shop_table td.product-subtotal,
.woocommerce form#order_review table.shop_table tfoot td {
  font-weight: 600;
  text-align: right;
}

.woocommerce form.checkout #order_review table.shop_table tfoot th,
.woocommerce form#order_review table.shop_table tfoot th {
  font-weight: 400;
  color: var(--bcx-muted);
  text-align: left;
}

.woocommerce form.checkout #order_review table.shop_table dl.variation,
.woocommerce form#order_review table.shop_table .wc-item-meta {
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
  font-size: var(--bcx-fs-small);
  font-weight: 400;
  color: var(--bcx-muted);
}

.woocommerce form.checkout #order_review table.shop_table .order-total th,
.woocommerce form.checkout #order_review table.shop_table .order-total td,
.woocommerce form#order_review table.shop_table tfoot tr:last-child th,
.woocommerce form#order_review table.shop_table tfoot tr:last-child td {
  padding-top: 18px !important;
  padding-bottom: 18px !important;
  background: var(--bcx-coral-tint) !important;
  color: var(--bcx-plum);
}

.woocommerce form.checkout #order_review table.shop_table .order-total th,
.woocommerce form#order_review table.shop_table tfoot tr:last-child th {
  font-size: var(--bcx-fs-item);
  font-weight: 600;
}

.woocommerce form.checkout #order_review table.shop_table .order-total .amount,
.woocommerce form#order_review table.shop_table tfoot tr:last-child .amount {
  font-size: var(--bcx-fs-heading);
  font-weight: 600;
}

/* flat inside the summary card: no second border, corners or background */
.woocommerce form.checkout #order_review table.shop_table {
  margin: 0 0 16px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  overflow: visible;
}

/* The checkout summary is laid out as rows rather than a table, so the shipping
   choices can use the full width and every divider runs edge to edge. */
.woocommerce form.checkout #order_review table.shop_table,
.woocommerce form.checkout #order_review table.shop_table thead,
.woocommerce form.checkout #order_review table.shop_table tbody,
.woocommerce form.checkout #order_review table.shop_table tfoot {
  display: block;
}

.woocommerce form.checkout #order_review table.shop_table tr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.woocommerce form.checkout #order_review table.shop_table tbody tr,
.woocommerce form.checkout #order_review table.shop_table tfoot tr {
  border-top: 1px solid var(--bcx-line);
}

.woocommerce form.checkout #order_review table.shop_table tbody tr.cart_item {
  align-items: flex-start;
}

/* on Checkout the price sits level with the top of the row, so the name does too */
.woocommerce form.checkout #order_review table.shop_table tbody tr.cart_item .bcx-item {
  align-items: flex-start;
}

.woocommerce form.checkout #order_review table.shop_table tr th,
.woocommerce form.checkout #order_review table.shop_table tr td {
  display: block;
  border-top: 0 !important;
}

.woocommerce form.checkout #order_review table.shop_table tbody tr td.product-name {
  flex: 1 1 0% !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0;
}

.woocommerce form.checkout #order_review table.shop_table tbody tr td.product-total,
.woocommerce form.checkout #order_review table.shop_table tfoot tr td {
  flex: none;
  text-align: right;
}

/* Shipping row: laid out like Subtotal — label on the left, value on the right.
   The label never shrinks or breaks ("Ship / ment"); the value side takes the rest. */
.woocommerce form.checkout #order_review table.shop_table tfoot tr.shipping,
.woocommerce form.checkout #order_review table.shop_table tfoot tr.woocommerce-shipping-totals {
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: 16px;
}

.woocommerce form.checkout #order_review table.shop_table tfoot tr.shipping th,
.woocommerce form.checkout #order_review table.shop_table tfoot tr.woocommerce-shipping-totals th {
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  white-space: nowrap !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
  text-align: left !important;
}

.woocommerce form.checkout #order_review table.shop_table tfoot tr.shipping td,
.woocommerce form.checkout #order_review table.shop_table tfoot tr.woocommerce-shipping-totals td {
  flex: 1 1 auto !important;
  width: auto !important;
  min-width: 0;
  max-width: none !important;
  text-align: right !important;
}

/* the cart totals are a normal table: same idea */
.woocommerce-cart .cart_totals table.shop_table tr.shipping th,
.woocommerce-cart .cart_totals table.shop_table tr.woocommerce-shipping-totals th {
  white-space: nowrap;
  word-break: normal;
  overflow-wrap: normal;
}

/* ---- Checkout shows "9 items in your order · Edit cart" instead of repeating the cart ---- */
body.bcx-items-hidden .woocommerce form.checkout #order_review table.shop_table thead,
body.bcx-items-hidden .woocommerce form.checkout #order_review table.shop_table tbody tr.cart_item {
  display: none !important;
}

.woocommerce form.checkout #order_review table.shop_table tbody tr.bcx-items-row {
  border-top: 0;
}

.woocommerce form.checkout #order_review table.shop_table tbody tr.bcx-items-row td.bcx-items-row__text {
  flex: 1 1 auto;
  color: var(--bcx-plum);
  font-size: var(--bcx-fs-item) !important;
  font-weight: 600 !important;
  text-align: left;
}

.woocommerce form.checkout #order_review table.shop_table tbody tr.bcx-items-row td.bcx-items-row__link {
  flex: none;
  text-align: right;
}

.woocommerce form.checkout #order_review table.shop_table tbody tr.bcx-items-row a {
  color: var(--bcx-plum);
  font-size: var(--bcx-fs-label);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.woocommerce form.checkout #order_review table.shop_table tbody tr.bcx-items-row a:hover {
  color: var(--bcx-coral);
}

/* the header and Total tints belong to the whole row, not just behind the words */
.woocommerce form.checkout #order_review table.shop_table thead tr {
  background: var(--bcx-cream);
}

.woocommerce form.checkout #order_review table.shop_table tfoot tr.order-total {
  margin-top: 8px;
  border-top: 0;
  border-radius: 16px;
  background: var(--bcx-coral-tint);
}

.woocommerce form.checkout #order_review table.shop_table thead tr th,
.woocommerce form.checkout #order_review table.shop_table tfoot tr.order-total th,
.woocommerce form.checkout #order_review table.shop_table tfoot tr.order-total td {
  background: transparent !important;
}

/* Shipping methods (checkout summary and cart totals), read as the row's value:
   - one method  → a plain value on the right ("Free shipping" in green, or "Flat rate: ₹60")
   - several     → a short right-aligned list with a radio for each */
.woocommerce form.checkout ul#shipping_method,
.woocommerce-cart .cart_totals ul#shipping_method {
  display: flex !important;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  list-style: none !important;
}

.woocommerce form.checkout ul#shipping_method li,
.woocommerce-cart .cart_totals ul#shipping_method li {
  display: flex !important;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
  list-style: none !important;
  text-align: right !important;
}

.woocommerce form.checkout ul#shipping_method li::before,
.woocommerce-cart .cart_totals ul#shipping_method li::before {
  display: none !important;
}

.woocommerce form.checkout ul#shipping_method li label,
.woocommerce-cart .cart_totals ul#shipping_method li label {
  display: inline !important;
  margin: 0 !important;
  padding: 0 !important;
  color: var(--bcx-plum) !important;
  font-size: var(--bcx-fs-body) !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  text-align: right;
  cursor: default;
}

.woocommerce form.checkout ul#shipping_method li label .woocommerce-Price-amount,
.woocommerce-cart .cart_totals ul#shipping_method li label .woocommerce-Price-amount {
  font-weight: 700;
  color: inherit;
}

/* several methods: radio on the right of each choice, the chosen one in bold */
.woocommerce form.checkout ul#shipping_method li:has(input[type="radio"]),
.woocommerce-cart .cart_totals ul#shipping_method li:has(input[type="radio"]) {
  flex-direction: row-reverse;
  justify-content: flex-start;
}

.woocommerce form.checkout ul#shipping_method li:has(input[type="radio"]) label,
.woocommerce-cart .cart_totals ul#shipping_method li:has(input[type="radio"]) label {
  font-weight: 500 !important;
  cursor: pointer;
}

.woocommerce form.checkout ul#shipping_method li:has(input[type="radio"]:checked) label,
.woocommerce-cart .cart_totals ul#shipping_method li:has(input[type="radio"]:checked) label {
  font-weight: 600 !important;
}

.woocommerce form.checkout ul#shipping_method input[type="radio"],
.woocommerce-cart .cart_totals ul#shipping_method input[type="radio"] {
  width: 18px;
  height: 18px;
  margin: 0 !important;
  flex: none;
  accent-color: var(--bcx-plum);
  cursor: pointer;
}

/* free shipping reads as good news: a small chip in the Brittle palette (soft yellow, plum text, a check mark) */
.woocommerce form.checkout ul#shipping_method li:has(input[value^="free_shipping"]) label,
.woocommerce-cart .cart_totals ul#shipping_method li:has(input[value^="free_shipping"]) label {
  box-sizing: border-box;
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 0 14px 0 10px !important;
  border: 1px solid var(--bcx-yellow) !important;
  border-radius: 999px !important;
  background: var(--bcx-yellow-tint) !important;
  color: var(--bcx-plum) !important;
  font-size: var(--bcx-fs-label) !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em;
  line-height: 1 !important;
  white-space: nowrap;
}

.woocommerce form.checkout ul#shipping_method li:has(input[value^="free_shipping"]) label::before,
.woocommerce-cart .cart_totals ul#shipping_method li:has(input[value^="free_shipping"]) label::before {
  content: "";
  flex: none;
  width: 14px;
  height: 14px;
  background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='8' fill='%233B203D'/%3E%3Cpath d='M4.6 8.3l2.2 2.2 4.6-4.8' fill='none' stroke='%23FBEAC0' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* "Shipping to Tamil Nadu." and similar notes under the methods */
.woocommerce form.checkout tr.woocommerce-shipping-totals .woocommerce-shipping-destination,
.woocommerce form.checkout tr.woocommerce-shipping-totals td > p,
.woocommerce-cart .cart_totals tr.woocommerce-shipping-totals .woocommerce-shipping-destination,
.woocommerce-cart .cart_totals tr.woocommerce-shipping-totals td > p {
  margin: 6px 0 0 !important;
  color: var(--bcx-muted) !important;
  font-size: var(--bcx-fs-small) !important;
  font-weight: 400 !important;
  line-height: 1.45 !important;
  text-align: right !important;
}

/* ---- a short message under a field that needs attention ("Enter your phone number") ---- */
.woocommerce form.checkout .form-row .bcx-field-error {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin: 8px 0 0;
  color: #B3261E;
  font-family: var(--bcx-font);
  font-size: var(--bcx-fs-small);
  font-weight: 600;
  line-height: 1.4;
}

.woocommerce form.checkout .form-row .bcx-field-error::before {
  content: "";
  flex: none;
  width: 14px;
  height: 14px;
  margin-top: 1px;
  background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='8' fill='%23B3261E'/%3E%3Cpath d='M8 4.2v4.4' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round'/%3E%3Ccircle cx='8' cy='11.4' r='1' fill='%23ffffff'/%3E%3C/svg%3E");
}

/* ---- the total and its GST note ("includes ₹97.63 GST 18%") ----
   The note sits on its own line, small and muted, and the amount beside "Total" is allowed to shrink and wrap,
   so on a narrow screen nothing runs off the edge. */
.woocommerce-cart .cart_totals .order-total td,
.woocommerce form.checkout #order_review table.shop_table .order-total td,
.woocommerce form#order_review table.shop_table tfoot tr:last-child td {
  min-width: 0;
  overflow-wrap: anywhere;
}

.woocommerce form.checkout #order_review table.shop_table tfoot tr.order-total {
  flex-wrap: wrap;
}

.woocommerce form.checkout #order_review table.shop_table tfoot tr.order-total td,
.woocommerce form#order_review table.shop_table tfoot tr:last-child td {
  flex: 1 1 0%;
}

.woocommerce-cart .cart_totals .order-total small.includes_tax,
.woocommerce form.checkout #order_review table.shop_table .order-total small.includes_tax,
.woocommerce form#order_review table.shop_table tfoot tr:last-child small.includes_tax {
  display: block;
  margin: 2px 0 0;
  color: var(--bcx-muted);
  font-size: var(--bcx-fs-small);
  font-weight: 400;
  line-height: 1.4;
  text-align: right;
  white-space: normal;
}

.woocommerce-cart .cart_totals .order-total small.includes_tax .amount,
.woocommerce form.checkout #order_review table.shop_table .order-total small.includes_tax .amount,
.woocommerce form#order_review table.shop_table tfoot tr:last-child small.includes_tax .amount {
  font-size: inherit;
  font-weight: 600;
}

/* ---- payment methods (checkout and order-pay) ---- */

.woocommerce #payment {
  box-sizing: border-box;
  padding: 20px;
  border: 1px solid var(--bcx-line);
  border-radius: 24px;
  background: var(--bcx-paper);
}

.woocommerce #payment ul.wc_payment_methods {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
  border: 0;
}

.woocommerce #payment ul.wc_payment_methods li.wc_payment_method {
  position: relative;
  margin: 0;
  padding: 14px 16px;
  border: 1px solid var(--bcx-line);
  border-radius: 16px;
  background: var(--bcx-paper);
  list-style: none;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.woocommerce #payment ul.wc_payment_methods li.wc_payment_method > input.input-radio {
  position: absolute;
  top: 17px;
  left: 16px;
}

.woocommerce #payment ul.wc_payment_methods li.wc_payment_method > label {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding-left: 30px;
  font-family: var(--bcx-font);
  font-size: var(--bcx-fs-body);
  font-weight: 600;
  color: var(--bcx-plum);
  cursor: pointer;
}

.woocommerce #payment ul.wc_payment_methods li.wc_payment_method > label img {
  max-height: 24px;
  width: auto;
  margin: 0;
}

.woocommerce #payment ul.wc_payment_methods li.wc_payment_method:has(> input.input-radio:checked) {
  border-color: var(--bcx-coral);
  background: var(--bcx-coral-tint);
}

.woocommerce #payment div.payment_box {
  box-sizing: border-box;
  width: auto;
  margin: 12px 0 0;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--bcx-paper);
  color: var(--bcx-muted);
  font-size: var(--bcx-fs-small);
  line-height: 1.5;
}

.woocommerce #payment div.payment_box::before,
.woocommerce #payment div.payment_box::after {
  display: none !important;
}

.woocommerce #payment div.payment_box p:last-child {
  margin-bottom: 0;
}

.woocommerce #payment div.form-row {
  margin: 16px 0 0;
  padding: 0;
}

.woocommerce .woocommerce-terms-and-conditions-wrapper {
  margin: 0 0 14px;
  font-size: var(--bcx-fs-small);
  color: var(--bcx-muted);
}

.woocommerce .woocommerce-terms-and-conditions-wrapper a {
  color: var(--bcx-plum);
  font-weight: 600;
}

.woocommerce .woocommerce-privacy-policy-text p {
  margin: 0 0 12px;
  font-size: var(--bcx-fs-small);
  line-height: 1.5;
  color: var(--bcx-muted);
}

/* the tick inside the terms line */
.woocommerce .form-row label.woocommerce-form__label-for-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  font-size: var(--bcx-fs-small);
  font-weight: 400;
  line-height: 1.5;
}

.woocommerce .form-row label.woocommerce-form__label-for-checkbox input {
  flex: none;
  margin-top: 2px;
}

/* the Mallow card above the payment box on the checkout */
.woocommerce form.checkout .bcx-card--checkout_payment {
  margin: 0 0 14px;
}


/* =========================================================================
   7. ORDER-PAY PAGE  (paying for an order that's already placed)
   ========================================================================= */

.woocommerce form#order_review {
  max-width: 760px;
  margin: 0 auto;
  font-family: var(--bcx-font);
  color: var(--bcx-plum);
}

.woocommerce form#order_review table.shop_table td.product-quantity {
  text-align: center;
  white-space: nowrap;
}

.woocommerce form#order_review table.shop_table thead th.product-quantity {
  text-align: center;
}

.woocommerce form#order_review .bcx-card--pay_note {
  margin: 0 0 14px;
}


/* =========================================================================
   7b. THE CARD-PAYMENT SCREEN
   Gateways such as Razorpay take payment on their own screen: WooCommerce prints the order details
   as a bulleted list, then the gateway prints a sentence and "Pay Now" / "Cancel" buttons. The
   plugin wraps the gateway's part in <div class="bcx-receipt">.
   (The Thank-you page's list has the extra class .woocommerce-order-overview and is styled separately.)
   ========================================================================= */

.woocommerce ul.order_details:not(.woocommerce-order-overview) {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
  max-width: 760px;
  margin: 0 auto 24px !important;
  padding: 0 !important;
  list-style: none !important;
  font-family: var(--bcx-font);
}

.woocommerce ul.order_details:not(.woocommerce-order-overview)::before,
.woocommerce ul.order_details:not(.woocommerce-order-overview)::after {
  display: none;
}

.woocommerce ul.order_details:not(.woocommerce-order-overview) li {
  grid-column: span 2;
  float: none !important;
  margin: 0 !important;
  padding: 14px 16px !important;
  border: 1px solid var(--bcx-line) !important;
  border-radius: 16px;
  background: var(--bcx-paper);
  color: var(--bcx-muted);
  font-size: var(--bcx-fs-label);
  font-weight: 600;
  line-height: 1.4;
  list-style: none !important;
  text-transform: none !important;
}

.woocommerce ul.order_details:not(.woocommerce-order-overview) li strong {
  display: block;
  margin-top: 4px;
  color: var(--bcx-plum);
  font-size: var(--bcx-fs-item);
  font-weight: 600;
  text-transform: none;
  overflow-wrap: anywhere;
}

/* the amount is the thing to notice */
.woocommerce ul.order_details:not(.woocommerce-order-overview) li.total {
  border-color: transparent !important;
  background: var(--bcx-coral-tint);
}

.woocommerce ul.order_details:not(.woocommerce-order-overview) li.total strong {
  font-size: var(--bcx-fs-heading);
}

.woocommerce ul.order_details:not(.woocommerce-order-overview) li.method {
  grid-column: 1 / -1;
}

.woocommerce .bcx-receipt {
  max-width: 760px;
  margin: 0 auto;
  font-family: var(--bcx-font);
  color: var(--bcx-plum);
  text-align: center;
}

.woocommerce .bcx-receipt .bcx-card {
  margin: 0 0 18px;
  text-align: left;
}

/* the gateway's own sentence */
.woocommerce .bcx-receipt > p {
  margin: 0 0 16px;
  color: var(--bcx-muted);
  font-size: var(--bcx-fs-body);
  line-height: 1.5;
}

/* the row holding Pay Now + Cancel */
.woocommerce .bcx-receipt > p:has(> button),
.woocommerce .bcx-receipt > p:has(> a.button) {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin: 8px 0 0;
}

/* "Pay Now": the main pill */
.woocommerce .bcx-receipt button,
.woocommerce .bcx-receipt a.button,
.woocommerce .bcx-receipt input[type="submit"] {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  margin: 0;
  padding: 0 28px !important;
  border: 1px solid var(--bcx-plum) !important;
  border-radius: 999px !important;
  background: var(--bcx-plum) !important;
  color: #ffffff !important;
  font-family: var(--bcx-font) !important;
  font-size: var(--bcx-fs-label) !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em;
  line-height: 1;
  text-transform: none !important;
  text-decoration: none !important;
  box-shadow: none !important;
  cursor: pointer;
  transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease !important;
}

.woocommerce .bcx-receipt button:hover,
.woocommerce .bcx-receipt a.button:hover,
.woocommerce .bcx-receipt input[type="submit"]:hover {
  background: var(--bcx-coral) !important;
  border-color: var(--bcx-coral) !important;
  color: var(--bcx-plum) !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(233, 154, 138, 0.22) !important;
}

/* "Cancel": quieter, so it isn't mistaken for the main action (it cancels the order) */
.woocommerce .bcx-receipt button[id*="cancel"],
.woocommerce .bcx-receipt a[id*="cancel"],
.woocommerce .bcx-receipt a.cancel {
  background: transparent !important;
  color: var(--bcx-plum) !important;
}

.woocommerce .bcx-receipt button[id*="cancel"]:hover,
.woocommerce .bcx-receipt a[id*="cancel"]:hover,
.woocommerce .bcx-receipt a.cancel:hover {
  background: var(--bcx-coral-tint) !important;
  border-color: var(--bcx-plum) !important;
  color: var(--bcx-plum) !important;
  box-shadow: none !important;
}

.woocommerce .bcx-receipt button:focus-visible,
.woocommerce .bcx-receipt a.button:focus-visible {
  outline: 2px solid var(--bcx-coral);
  outline-offset: 3px;
}

/* "Please wait while we are processing your payment" (shown by the gateway after Pay Now) */
.woocommerce .bcx-receipt p.woocommerce-info {
  margin: 0 0 16px !important;
  text-align: left;
}


/* =========================================================================
   8. THANK-YOU PAGE
   ========================================================================= */

.woocommerce-order {
  max-width: 960px;
  margin: 0 auto;
  font-family: var(--bcx-font);
  font-size: var(--bcx-fs-body);
  color: var(--bcx-plum);
}

/* the header already says "Thank you!", so this line is quiet text, not a second banner */
.woocommerce-order .woocommerce-notice--success.woocommerce-thankyou-order-received {
  margin: 0 0 20px;
  padding: 0;
  background: transparent;
  color: var(--bcx-muted);
  font-size: var(--bcx-fs-item);
  font-weight: 400;
  text-align: center;
}

/* the payment-failed message and its buttons */
.woocommerce-order .woocommerce-thankyou-order-failed {
  margin: 0 0 16px;
  padding: 16px 20px;
  border-left: 4px solid var(--bcx-coral);
  border-radius: 16px;
  background: var(--bcx-coral-tint);
  color: var(--bcx-plum);
  font-size: var(--bcx-fs-body);
}

.woocommerce-order .woocommerce-thankyou-order-failed-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 0;
  border: 0;
  background: transparent;
}

.woocommerce-order a.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 24px;
  border: 1px solid var(--bcx-plum);
  border-radius: 999px;
  background: var(--bcx-plum);
  color: #ffffff;
  font-family: var(--bcx-font);
  font-size: var(--bcx-fs-label);
  font-weight: 600;
  text-decoration: none;
  transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

.woocommerce-order a.button:hover {
  background: var(--bcx-coral);
  border-color: var(--bcx-coral);
  color: var(--bcx-plum);
}

/* order number / date / total / payment method: a row of little cards */
.woocommerce-order ul.order_details {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px;
  margin: 0 0 28px !important;
  padding: 0 !important;
  list-style: none;
}

.woocommerce-order ul.order_details li {
  float: none !important;
  margin: 0 !important;
  padding: 14px 16px !important;
  border: 1px solid var(--bcx-line) !important;
  border-radius: 16px;
  background: var(--bcx-paper);
  color: var(--bcx-muted);
  font-size: var(--bcx-fs-label);
  font-weight: 600;
  line-height: 1.4;
  text-transform: none !important;
}

.woocommerce-order ul.order_details li strong {
  display: block;
  margin-top: 4px;
  color: var(--bcx-plum);
  font-size: var(--bcx-fs-item);
  font-weight: 600;
  text-transform: none;
  overflow-wrap: anywhere;
}

/* WooCommerce's invisible "clearfix" pieces would otherwise become empty grid cells */
.woocommerce-order ul.order_details::before,
.woocommerce-order ul.order_details::after,
.woocommerce-order .woocommerce-columns--addresses::before,
.woocommerce-order .woocommerce-columns--addresses::after {
  display: none;
}

.woocommerce-order .woocommerce-order-details,
.woocommerce-order .woocommerce-customer-details {
  margin: 0 0 28px;
}

.woocommerce-order .woocommerce-order-details__title,
.woocommerce-order .woocommerce-column__title {
  margin: 0 0 14px;
  font-family: var(--bcx-font);
  font-size: var(--bcx-fs-heading) !important;
  font-weight: 600 !important;
  color: var(--bcx-plum);
}

.woocommerce-order table.woocommerce-table--order-details {
  width: 100%;
  margin: 0 !important;
  border: 1px solid var(--bcx-line) !important;
  border-radius: 24px !important;
  border-collapse: separate !important;
  border-spacing: 0;
  overflow: hidden;
  background: var(--bcx-paper);
}

.woocommerce-order table.woocommerce-table--order-details th,
.woocommerce-order table.woocommerce-table--order-details td {
  padding: 14px 18px !important;
  border: 0 !important;
  border-top: 1px solid var(--bcx-line) !important;
  background: transparent !important;
  font-size: var(--bcx-fs-body);
  color: var(--bcx-plum);
  vertical-align: middle;
}

.woocommerce-order table.woocommerce-table--order-details thead th {
  border-top: 0 !important;
  background: var(--bcx-cream) !important;
  color: var(--bcx-muted);
  font-size: var(--bcx-fs-label);
  font-weight: 600;
  text-align: left;
}

.woocommerce-order table.woocommerce-table--order-details thead th:last-child,
.woocommerce-order table.woocommerce-table--order-details td.product-total,
.woocommerce-order table.woocommerce-table--order-details tfoot td {
  text-align: right;
}

.woocommerce-order table.woocommerce-table--order-details td.product-name {
  font-size: var(--bcx-fs-item);
  font-weight: 600;
}

.woocommerce-order table.woocommerce-table--order-details td.product-name a {
  color: var(--bcx-plum);
  text-decoration: none;
}

.woocommerce-order table.woocommerce-table--order-details .product-quantity {
  font-size: var(--bcx-fs-small);
  font-weight: 400;
  color: var(--bcx-muted);
}

.woocommerce-order table.woocommerce-table--order-details tfoot th {
  font-weight: 400;
  color: var(--bcx-muted);
  text-align: left;
}

.woocommerce-order table.woocommerce-table--order-details tfoot tr:last-child th,
.woocommerce-order table.woocommerce-table--order-details tfoot tr:last-child td {
  background: var(--bcx-coral-tint) !important;
  color: var(--bcx-plum);
  font-weight: 600;
}

.woocommerce-order table.woocommerce-table--order-details tfoot tr:last-child td {
  font-size: var(--bcx-fs-heading);
}

.woocommerce-order .woocommerce-columns--addresses {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}

.woocommerce-order .woocommerce-columns--addresses .woocommerce-column {
  float: none;
  width: 100%;
  max-width: none;
}

.woocommerce-order address {
  margin: 0;
  padding: 18px 20px;
  border: 1px solid var(--bcx-line);
  border-radius: 16px;
  background: var(--bcx-paper);
  font-size: var(--bcx-fs-body);
  font-style: normal;
  line-height: 1.6;
  color: var(--bcx-plum);
}


/* =========================================================================
   9. "PLACING YOUR ORDER" SCREEN
   The picture and the wording come from WooCommerce → Brittle Checkout
   (--bcx-proc-img / --bcx-proc-text). Only active when body has .bcx-processing-on.
   ========================================================================= */

@keyframes bcx-proc-bob {
  0%, 100% { background-position: center calc(50% - 44px); }
  50%      { background-position: center calc(50% - 60px); }
}

@keyframes bcx-mini-bob {
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-6px) scale(1.04); }
}

/* hide WooCommerce's own greyed-out overlay + spinner while the order is placed ... */
body.bcx-processing-on .woocommerce form.checkout.processing > .blockUI {
  display: none !important;
}

/* ... and cover the whole window with Mallow and one line of text instead */
body.bcx-processing-on .woocommerce form.checkout.processing::after {
  content: var(--bcx-proc-text);
  position: fixed;
  inset: 0;
  z-index: 99990;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 170px;
  background: var(--bcx-proc-img) center calc(50% - 44px) / 130px auto no-repeat rgba(255, 253, 249, 0.94);
  color: var(--bcx-plum);
  font-family: var(--bcx-font);
  font-size: var(--bcx-fs-item);
  font-weight: 600;
  text-align: center;
  animation: bcx-proc-bob 1.4s ease-in-out infinite;
}

/* the smaller waits (updating totals, applying a coupon): a little Mallow instead of the grey spinner */
body.bcx-processing-on .woocommerce .blockUI.blockOverlay::before {
  content: "";
  width: 44px;
  height: 44px;
  margin: -22px 0 0 -22px;
  background: var(--bcx-proc-img) center / contain no-repeat;
  font-size: inherit;
  animation: bcx-mini-bob 1s ease-in-out infinite;
}


/* =========================================================================
   10. SIDE CART — the empty state uses the same Mallow
   (set the picture in the side-cart plugin: Style → Body → Empty cart image)
   ========================================================================= */

.xoo-wsc-empty-cart .xoo-wsc-emp-img {
  display: block;
  width: 140px;
  max-width: 60%;
  height: auto;
  margin: 0 auto 12px;
}


/* =========================================================================
   10b. EMPTY PAGES — empty cart, no products found, no orders, no downloads
   One layout everywhere: a big Mallow, a short title, one line, one button.
   ========================================================================= */

.bcx-empty {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 440px;
  margin: 0 auto;
  padding: 32px 16px 40px;
  font-family: var(--bcx-font);
  text-align: center;
  color: var(--bcx-plum);
  grid-column: 1 / -1;
}

.bcx-empty__art {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 220px;
  height: 220px;
  margin: 0 0 18px;
}

/* a soft round stage behind him */
.bcx-empty__art::before {
  content: "";
  position: absolute;
  inset: 12px;
  border-radius: 50%;
  background: var(--bcx-coral-tint);
}

.bcx-empty__art.bcx-noimg {
  display: none;
}

.bcx-empty .bcx-empty__art img.bcx-empty__img {
  position: relative;
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  object-fit: contain;
  filter: drop-shadow(0 14px 18px rgba(59, 32, 61, 0.16));
  animation: bcx-bob 4s ease-in-out infinite;
}

.bcx-empty .bcx-empty__title {
  margin: 0;
  font-family: var(--bcx-font);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--bcx-plum);
}

.bcx-empty .bcx-empty__text {
  max-width: 320px;
  margin: 6px 0 0;
  font-size: var(--bcx-fs-body);
  line-height: 1.5;
  color: var(--bcx-muted);
}

body:not(#bcx) .bcx-empty a.bcx-empty__btn,
.woocommerce-cart .bcx-empty ~ .return-to-shop a.button,
.woocommerce .bcx-empty ~ .return-to-shop a.button {
  box-sizing: border-box;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  margin: 20px 0 0 !important;
  padding: 0 28px !important;
  border: 1px solid var(--bcx-plum) !important;
  border-radius: 999px !important;
  background: var(--bcx-plum) !important;
  color: #ffffff !important;
  font-family: var(--bcx-font);
  font-size: var(--bcx-fs-body) !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  text-decoration: none !important;
  text-transform: none !important;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

body:not(#bcx) .bcx-empty a.bcx-empty__btn:hover,
.woocommerce-cart .bcx-empty ~ .return-to-shop a.button:hover,
.woocommerce .bcx-empty ~ .return-to-shop a.button:hover {
  border-color: var(--bcx-coral) !important;
  background: var(--bcx-coral) !important;
  color: var(--bcx-plum) !important;
}

/* empty cart: WooCommerce's "Return to shop" button sits right under Mallow */
.woocommerce .bcx-empty ~ .return-to-shop,
.woocommerce-cart .bcx-empty ~ .return-to-shop {
  margin: -36px 0 40px !important;
  padding: 0 !important;
  text-align: center;
}

/* My Account: WooCommerce's one-line "No order has been made yet." is replaced by Mallow */
body:not(#bcx):not(#bcx-2) .bcx-empty ~ .woocommerce-info,
body:not(#bcx):not(#bcx-2) .bcx-empty ~ .woocommerce-message,
body:not(#bcx):not(#bcx-2) .bcx-empty ~ .woocommerce-notices-wrapper > .woocommerce-info {
  display: none !important;
}

.woocommerce-MyAccount-content .bcx-empty {
  padding-top: 8px;
}

/* Elementor's own "Nothing found" message (Products, Archive Products and Loop Grid widgets):
   same Mallow above the widget's own wording */
.elementor-products-nothing-found,
.elementor-widget-woocommerce-products .elementor-nothing-found,
.elementor-widget-wc-archive-products .elementor-nothing-found,
.e-loop-nothing-found-message {
  box-sizing: border-box;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  max-width: 440px;
  margin: 0 auto !important;
  padding: 32px 16px 40px !important;
  border: 0 !important;
  background: transparent !important;
  font-family: var(--bcx-font);
  font-size: var(--bcx-fs-item) !important;
  font-weight: 600;
  line-height: 1.4;
  text-align: center !important;
  color: var(--bcx-plum) !important;
}

.elementor-products-nothing-found::before,
.elementor-widget-woocommerce-products .elementor-nothing-found::before,
.elementor-widget-wc-archive-products .elementor-nothing-found::before,
.e-loop-nothing-found-message::before {
  content: "";
  display: block;
  width: 220px;
  height: 220px;
  margin: 0 0 18px;
  border-radius: 50%;
  background: var(--bcx-empty-img) center bottom / 88% auto no-repeat, var(--bcx-coral-tint);
  animation: bcx-bob 4s ease-in-out infinite;
}

@media (max-width: 600px) {
  .bcx-empty {
    padding: 20px 16px 32px;
  }

  .bcx-empty__art,
  .elementor-products-nothing-found::before,
  .elementor-widget-woocommerce-products .elementor-nothing-found::before,
  .elementor-widget-wc-archive-products .elementor-nothing-found::before,
  .e-loop-nothing-found-message::before {
    width: 170px;
    height: 170px;
  }

  .bcx-empty .bcx-empty__title {
    font-size: 20px;
  }

  body:not(#bcx) .bcx-empty a.bcx-empty__btn,
  .woocommerce .bcx-empty ~ .return-to-shop a.button {
    width: 100%;
    max-width: 280px;
  }

  .woocommerce .bcx-empty ~ .return-to-shop,
  .woocommerce-cart .bcx-empty ~ .return-to-shop {
    margin-top: -28px !important;
  }
}


/* =========================================================================
   11. SMALLER SCREENS
   ========================================================================= */

@media (max-width: 900px) {
  .woocommerce form.checkout:has(> #customer_details) {
    display: block;
  }

  .woocommerce form.checkout > #order_review {
    position: static;
  }

  .woocommerce-cart .woocommerce:has(> .woocommerce-cart-form) {
    display: block;
  }

  .bcx-band__inner {
    gap: 20px;
  }

  .bcx-band__art {
    width: 120px;
    height: 120px;
  }
}

@media (max-width: 768px) {
  /* the cart table turns into a stack of cards: picture, name, price, quantity, line total */
  .woocommerce-cart table.shop_table_responsive.cart,
  .woocommerce-cart table.shop_table_responsive.cart tbody {
    display: block;
  }

  .woocommerce-cart table.shop_table_responsive.cart thead {
    display: none;
  }

  .woocommerce-cart table.shop_table_responsive.cart tr.cart_item {
    position: relative;
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr) auto;
    column-gap: 14px;
    row-gap: 6px;
    padding: 16px;
    border-top: 1px solid var(--bcx-line);
  }

  .woocommerce-cart table.shop_table_responsive.cart tr.cart_item:first-child {
    border-top: 0;
  }

  .woocommerce-cart table.shop_table_responsive.cart tr.cart_item td {
    display: block;
    padding: 0 !important;
    border: 0 !important;
    text-align: left !important;
  }

  .woocommerce-cart table.shop_table_responsive.cart tr.cart_item td::before {
    display: none !important;
  }

  .woocommerce-cart table.shop_table_responsive.cart td.product-thumbnail {
    display: block !important;
    grid-column: 1;
    grid-row: 1 / span 3;
    width: auto;
  }

  .woocommerce-cart table.shop_table_responsive.cart td.product-name {
    grid-column: 2;
    grid-row: 1;
    padding-right: 28px !important;
  }

  .woocommerce-cart table.shop_table_responsive.cart td.product-name details.bcx-details {
    margin-right: -28px;
  }

  .woocommerce-cart table.shop_table_responsive.cart td.product-price {
    grid-column: 2;
    grid-row: 2;
    color: var(--bcx-muted);
    font-size: var(--bcx-fs-small);
  }

  .woocommerce-cart table.shop_table_responsive.cart td.product-quantity {
    grid-column: 2;
    grid-row: 3;
  }

  .woocommerce-cart table.shop_table_responsive.cart td.product-subtotal {
    grid-column: 3;
    grid-row: 2 / span 2;
    align-self: end;
  }

  .woocommerce-cart table.shop_table_responsive.cart td.product-remove {
    position: absolute;
    top: 12px;
    right: 12px;
    width: auto;
  }

  .woocommerce-cart table.shop_table_responsive.cart tr:not(.cart_item) td.actions {
    display: block;
    padding: 16px !important;
    border-top: 1px solid var(--bcx-line) !important;
  }

  .woocommerce-cart table.shop_table.cart td.actions .coupon {
    float: none;
    flex-wrap: wrap;
    width: 100%;
  }

  .woocommerce-cart table.shop_table.cart td.actions .coupon input.input-text {
    flex: 1 1 100%;
  }

  .woocommerce-cart table.shop_table.cart td.actions > button[name="update_cart"] {
    float: none;
    width: 100%;
    margin-top: 10px;
  }
}

@media (max-width: 768px) {
  .woocommerce-cart table.shop_table_responsive.cart tr.bcx-cross-row {
    display: block;
  }

  .woocommerce-cart table.shop_table_responsive.cart tr.bcx-cross-row td.bcx-cross-cell {
    display: block;
    padding: 0 16px 16px !important;
    text-align: left !important;
  }

  .woocommerce-cart table.shop_table_responsive.cart tr.bcx-cross-row td::before {
    display: none !important;
    content: none !important;
  }

  .woocommerce-cart table.shop_table.cart .bcx-cross__item {
    flex-basis: min(100%, max(220px, min(88%, 330px)));
    grid-template-columns: 56px minmax(0, 1fr);
    gap: 6px 10px;
  }

  .woocommerce-cart table.shop_table.cart .bcx-cross a.bcx-cross__thumb {
    width: 56px;
    height: 56px;
  }
}

/* the pay-for-order table on a phone: three fixed columns (name | quantity | amount) that can never add up to more
   than the screen, with long words and big amounts allowed to wrap */
@media (max-width: 480px) {
  .woocommerce form#order_review table.shop_table {
    width: 100%;
    table-layout: fixed;
  }

  .woocommerce form#order_review table.shop_table thead th {
    padding: 12px 10px !important;
  }

  .woocommerce form#order_review table.shop_table th.product-quantity,
  .woocommerce form#order_review table.shop_table td.product-quantity {
    width: 44px;
  }

  .woocommerce form#order_review table.shop_table th.product-total,
  .woocommerce form#order_review table.shop_table td.product-total,
  .woocommerce form#order_review table.shop_table td.product-subtotal {
    width: 96px;
  }

  .woocommerce form#order_review table.shop_table td,
  .woocommerce form#order_review table.shop_table tfoot th {
    overflow-wrap: anywhere;
  }
}

@media (max-width: 360px) {
  .woocommerce-cart table.shop_table.cart td.product-name details.bcx-details > summary.bcx-details__summary {
    gap: 4px;
    padding: 0 10px;
  }

  .woocommerce-cart table.shop_table.cart td.product-name details.bcx-details .bcx-details__chev svg {
    width: 12px;
    height: 12px;
  }
}

@media (max-width: 600px) {
  :root {
    --bcx-thumb: 44px;
  }

  .woocommerce ul.order_details:not(.woocommerce-order-overview) li {
    grid-column: 1 / -1;
  }

  .woocommerce .bcx-receipt > p:has(> button) button {
    flex: 1 1 100%;
  }

  .woocommerce form#order_review table.shop_table th,
  .woocommerce form#order_review table.shop_table td,
  .woocommerce-order table.woocommerce-table--order-details th,
  .woocommerce-order table.woocommerce-table--order-details td {
    padding: 12px !important;
  }

  .woocommerce form#order_review table.shop_table td.product-quantity {
    padding-left: 4px !important;
    padding-right: 4px !important;
  }

  .woocommerce form.checkout .woocommerce-billing-fields,
  .woocommerce form.checkout .woocommerce-shipping-fields,
  .woocommerce form.checkout .woocommerce-additional-fields {
    padding: 20px;
  }

  .woocommerce form.checkout .woocommerce-billing-fields__field-wrapper .form-row-first,
  .woocommerce form.checkout .woocommerce-billing-fields__field-wrapper .form-row-last,
  .woocommerce form.checkout .woocommerce-shipping-fields__field-wrapper .form-row-first,
  .woocommerce form.checkout .woocommerce-shipping-fields__field-wrapper .form-row-last {
    width: 100% !important;
  }
}

@media (max-width: 560px) {
  .bcx-band {
    padding: 24px 16px 22px;
  }

  /* Mallow moves above the title, everything centred */
  .bcx-band__inner {
    flex-direction: column;
    gap: 10px;
  }

  .bcx-band--char .bcx-band__text {
    text-align: center;
  }

  .bcx-band__art {
    width: 112px;
    height: 112px;
  }

  .bcx-band__title {
    font-size: 28px;
  }

  .bcx-band__sub {
    margin-top: 6px;
    font-size: var(--bcx-fs-body);
  }

  .bcx-steps-wrap {
    margin-top: 20px;
  }

  .bcx-steps {
    padding: 4px;
  }

  .bcx-step {
    padding: 4px;
    gap: 0;
  }

  .bcx-step + .bcx-step {
    margin-left: 18px;
  }

  .bcx-step + .bcx-step::before {
    left: -16px;
    width: 14px;
  }

  /* only the current step keeps its label, so all three fit on a phone */
  .bcx-step:not(.is-active) .bcx-step__label {
    display: none;
  }

  .bcx-step.is-active {
    gap: 8px;
    padding-right: 14px;
  }

  .bcx-step__link {
    gap: 0;
  }

  .bcx-card--cart_totals {
    margin-top: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bcx-band__char,
  .bcx-card__img,
  .bcx-empty__img,
  .elementor-products-nothing-found::before,
  .elementor-nothing-found::before,
  .e-loop-nothing-found-message::before,
  body.bcx-processing-on .woocommerce form.checkout.processing::after,
  body.bcx-processing-on .woocommerce .blockUI.blockOverlay::before {
    animation: none !important;
  }
}


/* =========================================================================
   13. TICKS, RADIOS AND THE PAYMENT CHOICE  (v1.8.1)
   Our own tick boxes and radio buttons, drawn the same everywhere on the cart,
   checkout and order-pay pages. "body:not(#bcx)" outweighs Elementor's site-wide
   form-field style, which otherwise gives tick boxes a text-field border, padding
   and width (the "bleeding" box).
   ========================================================================= */

/* ---- tick boxes ---- */
body:not(#bcx) .woocommerce input[type="checkbox"] {
  -webkit-appearance: none !important;
  appearance: none !important;
  position: relative;
  box-sizing: border-box !important;
  flex: none !important;
  display: inline-block !important;
  width: 20px !important;
  min-width: 20px !important;
  max-width: 20px !important;
  height: 20px !important;
  min-height: 20px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1.5px solid rgba(59, 32, 61, 0.45) !important;
  border-radius: 6px !important;
  background: #ffffff no-repeat center / 14px 14px !important;
  box-shadow: none !important;
  outline: none;
  vertical-align: middle;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

body:not(#bcx) .woocommerce input[type="checkbox"]:hover {
  border-color: var(--bcx-plum) !important;
}

body:not(#bcx) .woocommerce input[type="checkbox"]:checked {
  border-color: var(--bcx-plum) !important;
  background-color: var(--bcx-plum) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}

/* ---- radio buttons ---- */
body:not(#bcx) .woocommerce input[type="radio"] {
  -webkit-appearance: none !important;
  appearance: none !important;
  box-sizing: border-box !important;
  flex: none !important;
  display: inline-block;
  width: 20px !important;
  min-width: 20px !important;
  max-width: 20px !important;
  height: 20px !important;
  min-height: 20px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1.5px solid rgba(59, 32, 61, 0.45) !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  box-shadow: none !important;
  outline: none;
  vertical-align: middle;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

body:not(#bcx) .woocommerce input[type="radio"]:hover {
  border-color: var(--bcx-plum) !important;
}

/* chosen: a plum ring with a solid plum centre */
body:not(#bcx) .woocommerce input[type="radio"]:checked {
  border: 2px solid var(--bcx-plum) !important;
  background: #ffffff !important;
  box-shadow: inset 0 0 0 3px #ffffff, inset 0 0 0 10px var(--bcx-plum) !important;
}

body:not(#bcx) .woocommerce input[type="checkbox"]:focus-visible,
body:not(#bcx) .woocommerce input[type="radio"]:focus-visible {
  outline: 2px solid var(--bcx-coral) !important;
  outline-offset: 2px;
}

/* ---- "Create an account?" and "Ship to a different address?": a soft card each ---- */
.woocommerce form.checkout .woocommerce-account-fields {
  display: block;
  margin: 8px 0 0;
}

.woocommerce form.checkout .woocommerce-account-fields p.create-account,
.woocommerce form.checkout #ship-to-different-address {
  box-sizing: border-box;
  width: 100% !important;
  margin: 0 0 14px !important;
  padding: 0 !important;
}

.woocommerce form.checkout p.create-account label.woocommerce-form__label-for-checkbox,
.woocommerce form.checkout #ship-to-different-address label.woocommerce-form__label-for-checkbox {
  position: relative;
  box-sizing: border-box;
  display: flex !important;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin: 0 !important;
  padding: 14px 16px !important;
  border: 1px solid var(--bcx-line);
  border-radius: 16px;
  background: var(--bcx-cream);
  color: var(--bcx-plum) !important;
  font-family: var(--bcx-font);
  font-size: var(--bcx-fs-body) !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.woocommerce form.checkout p.create-account label.woocommerce-form__label-for-checkbox:hover,
.woocommerce form.checkout #ship-to-different-address label.woocommerce-form__label-for-checkbox:hover {
  border-color: rgba(59, 32, 61, 0.3);
}

.woocommerce form.checkout p.create-account label.woocommerce-form__label-for-checkbox:has(input:checked),
.woocommerce form.checkout #ship-to-different-address label.woocommerce-form__label-for-checkbox:has(input:checked) {
  border-color: var(--bcx-plum);
  background: var(--bcx-coral-tint);
}

/* the account / password fields that open under it */
.woocommerce form.checkout .woocommerce-account-fields div.create-account {
  margin: 0 0 8px;
  padding: 0;
}

/* ---- payment methods: clear cards with our own radio ---- */
body:not(#bcx) .woocommerce #payment ul.wc_payment_methods li.wc_payment_method {
  padding: 16px 18px 16px 52px !important;
  border: 1.5px solid var(--bcx-line) !important;
  border-radius: 18px !important;
  background: #ffffff !important;
}

body:not(#bcx) .woocommerce #payment ul.wc_payment_methods li.wc_payment_method > input.input-radio {
  display: inline-block !important; /* WooCommerce hides it when there is only one way to pay — we show it, chosen */
  position: absolute !important;
  top: 18px !important;
  left: 18px !important;
}

body:not(#bcx) .woocommerce #payment ul.wc_payment_methods li.wc_payment_method > label {
  display: flex !important;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  min-height: 22px;
  margin: 0 !important;
  padding: 0 !important;
  color: var(--bcx-plum) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
}

/* the gateway's logo ("Pay by Razorpay") on the right */
body:not(#bcx) .woocommerce #payment ul.wc_payment_methods li.wc_payment_method > label img {
  max-height: 22px !important;
  margin: 0 0 0 auto !important;
  float: none !important;
}

/* the chosen way to pay */
body:not(#bcx) .woocommerce #payment ul.wc_payment_methods li.wc_payment_method:has(> input.input-radio:checked),
body:not(#bcx) .woocommerce #payment ul.wc_payment_methods li.wc_payment_method:only-child {
  border-color: var(--bcx-plum) !important;
  background: var(--bcx-coral-tint) !important;
  box-shadow: 0 10px 24px -18px rgba(59, 32, 61, 0.55) !important;
}

/* its description: a clean white note, no stray top border from the theme */
body:not(#bcx) .woocommerce #payment ul.wc_payment_methods li.wc_payment_method div.payment_box {
  margin: 14px 0 0 -34px !important;
  padding: 12px 14px !important;
  border: 0 !important;
  border-radius: 12px !important;
  background: #ffffff !important;
  box-shadow: none !important;
  color: var(--bcx-muted) !important;
  font-size: var(--bcx-fs-small) !important;
  line-height: 1.55 !important;
}

body:not(#bcx) .woocommerce #payment div.payment_box p {
  margin: 0 !important;
  color: inherit !important;
  font-size: inherit !important;
}

/* ---- the terms line: tick, words and * on one tidy line ---- */
body:not(#bcx) .woocommerce .woocommerce-terms-and-conditions-wrapper .form-row,
body:not(#bcx) .woocommerce .woocommerce-terms-and-conditions-wrapper p.form-row {
  margin: 0 !important;
  padding: 0 !important;
}

body:not(#bcx) .woocommerce .woocommerce-terms-and-conditions-wrapper label.woocommerce-form__label-for-checkbox {
  position: relative;
  display: block !important;
  margin: 0 !important;
  padding: 12px 14px 12px 46px !important;
  border: 1px solid var(--bcx-line);
  border-radius: 14px;
  background: var(--bcx-cream);
  color: var(--bcx-ink, var(--bcx-plum)) !important;
  font-size: var(--bcx-fs-body) !important;
  font-weight: 400 !important;
  line-height: 1.45 !important;
  cursor: pointer;
}

body:not(#bcx) .woocommerce .woocommerce-terms-and-conditions-wrapper label.woocommerce-form__label-for-checkbox:has(input:checked) {
  border-color: var(--bcx-plum);
  background: var(--bcx-coral-tint);
}

body:not(#bcx) .woocommerce .woocommerce-terms-and-conditions-wrapper label.woocommerce-form__label-for-checkbox input[type="checkbox"] {
  position: absolute !important;
  top: 12px;
  left: 14px;
}

body:not(#bcx) .woocommerce .woocommerce-terms-and-conditions-wrapper label .required,
body:not(#bcx) .woocommerce .woocommerce-terms-and-conditions-wrapper abbr.required {
  display: inline !important;
  float: none !important;
  margin: 0 0 0 2px !important;
  color: var(--bcx-coral) !important;
  text-decoration: none !important;
}

body:not(#bcx) .woocommerce .woocommerce-terms-and-conditions-wrapper .woocommerce-terms-and-conditions-checkbox-text a {
  color: var(--bcx-plum) !important;
  font-weight: 600;
}


/* =========================================================================
   14. PAYMENT RADIO — always visible  (v1.8.2)
   Some checkouts (e.g. Elementor's Checkout widget) hide the real radio and
   draw their own pale circle in front of the payment name. We draw ONE radio
   in that spot ourselves — plum when chosen — and keep the real (invisible)
   radio on top of it so tapping still works.
   ========================================================================= */

body:not(#bcx) .woocommerce #payment ul.wc_payment_methods li.wc_payment_method {
  position: relative !important;
}

/* the real radio: invisible, but still exactly where you tap */
body:not(#bcx) .woocommerce #payment ul.wc_payment_methods li.wc_payment_method > input.input-radio {
  display: block !important;
  position: absolute !important;
  top: 17px !important;
  left: 17px !important;
  z-index: 2;
  width: 22px !important;
  height: 22px !important;
  margin: 0 !important;
  opacity: 0 !important;
  cursor: pointer;
}

/* the label must not be the anchor (some themes make it one), so our circle sits on the card's left edge */
body:not(#bcx) .woocommerce #payment ul.wc_payment_methods li.wc_payment_method > label {
  position: static !important;
  padding-left: 0 !important;
}

/* whatever circle the theme draws is replaced by ours */
body:not(#bcx) .woocommerce #payment ul.wc_payment_methods li.wc_payment_method > label::after {
  content: none !important;
  display: none !important;
}

body:not(#bcx) .woocommerce #payment ul.wc_payment_methods li.wc_payment_method > label::before {
  content: "" !important;
  position: absolute !important;
  top: 17px !important;
  left: 17px !important;
  right: auto !important;
  bottom: auto !important;
  display: block !important;
  box-sizing: border-box !important;
  width: 22px !important;
  height: 22px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 2px solid rgba(59, 32, 61, 0.45) !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  box-shadow: none !important;
  opacity: 1 !important;
  transform: none !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* chosen (or the only way to pay): plum ring with a solid plum centre */
body:not(#bcx) .woocommerce #payment ul.wc_payment_methods li.wc_payment_method:has(> input.input-radio:checked) > label::before,
body:not(#bcx) .woocommerce #payment ul.wc_payment_methods li.wc_payment_method:only-child > label::before {
  border-color: var(--bcx-plum) !important;
  background: var(--bcx-plum) !important;
  box-shadow: inset 0 0 0 4px #ffffff !important;
}

body:not(#bcx) .woocommerce #payment ul.wc_payment_methods li.wc_payment_method:hover > label::before {
  border-color: var(--bcx-plum) !important;
}

body:not(#bcx) .woocommerce #payment ul.wc_payment_methods li.wc_payment_method > input.input-radio:focus-visible + label::before {
  outline: 2px solid var(--bcx-coral);
  outline-offset: 2px;
}


/* =========================================================================
   15. ONE MESSAGE PER FIELD  (v1.8.3)
   This plugin writes a short instruction under each field that needs attention.
   The Brittle Notices plugin (and newer WooCommerce) can add a second, longer
   copy of the same error under the field — that copy is hidden wherever ours is
   there, so the customer reads one clear message.
   ========================================================================= */

body:not(#bcx):not(#bcx-2) .woocommerce form.checkout .form-row:has(.bcx-field-error) .checkout-inline-error-message,
body:not(#bcx):not(#bcx-2) .woocommerce form.checkout .form-row:has(.bcx-field-error) .bn-inline {
  display: none !important;
}

/* the terms box turns red-edged while it still needs ticking */
body:not(#bcx) .woocommerce .woocommerce-terms-and-conditions-wrapper .form-row.woocommerce-invalid label.woocommerce-form__label-for-checkbox {
  border-color: #B3261E !important;
  background: #FFF8F7 !important;
}

body:not(#bcx) .woocommerce .woocommerce-terms-and-conditions-wrapper .form-row.woocommerce-invalid input[type="checkbox"] {
  border-color: #B3261E !important;
}


/* =========================================================================
   16. SIDE CART: customization details as the same accordion  (v1.8.4)
   (XootiX "Side Cart Woocommerce" — a slimmer version of the cart-page one)
   ========================================================================= */

.xoo-wsc-markup details.bcx-details {
  margin: 6px 0 4px !important;
  font-family: var(--bcx-font);
}

.xoo-wsc-markup details.bcx-details > summary.bcx-details__summary {
  box-sizing: border-box;
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  min-height: 28px;
  margin: 0 !important;
  padding: 0 10px !important;
  border: 1px solid var(--bcx-line);
  border-radius: 999px;
  background: var(--bcx-paper);
  color: var(--bcx-plum) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  white-space: nowrap;
  list-style: none;
  cursor: pointer;
  transition: background 0.25s ease, border-color 0.25s ease;
}

.xoo-wsc-markup details.bcx-details > summary.bcx-details__summary::-webkit-details-marker {
  display: none;
}

.xoo-wsc-markup details.bcx-details > summary.bcx-details__summary::marker {
  content: "";
}

.xoo-wsc-markup details.bcx-details > summary.bcx-details__summary:hover,
.xoo-wsc-markup details.bcx-details[open] > summary.bcx-details__summary {
  border-color: var(--bcx-coral);
  background: var(--bcx-coral-tint);
}

.xoo-wsc-markup details.bcx-details > summary:focus-visible {
  outline: 2px solid var(--bcx-plum);
  outline-offset: 2px;
}

.xoo-wsc-markup details.bcx-details .bcx-details__label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.xoo-wsc-markup details.bcx-details .bcx-details__chev {
  flex: none;
  display: inline-flex;
  transition: transform 0.25s ease;
}

.xoo-wsc-markup details.bcx-details[open] .bcx-details__chev {
  transform: rotate(180deg);
}

/* what is inside: a small cream box, label over answer */
.xoo-wsc-markup details.bcx-details dl.variation {
  box-sizing: border-box;
  display: grid !important;
  gap: 1px;
  margin: 6px 0 0 !important;
  padding: 10px 12px !important;
  border-radius: 12px;
  background: var(--bcx-cream);
}

.xoo-wsc-markup details.bcx-details dl.variation dt {
  float: none !important;
  clear: none !important;
  margin: 0 !important;
  padding: 0 !important;
  color: var(--bcx-muted) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
}

.xoo-wsc-markup details.bcx-details dl.variation dd {
  margin: 0 0 6px !important;
  padding: 0 !important;
  color: var(--bcx-plum) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 1.45 !important;
  overflow-wrap: anywhere;
}

.xoo-wsc-markup details.bcx-details dl.variation dd:last-child {
  margin-bottom: 0 !important;
}

.xoo-wsc-markup details.bcx-details dl.variation dd p {
  margin: 0 !important;
  color: inherit !important;
  font-size: inherit !important;
}


/* =========================================================================
   17. PAGE HEADER BAND — animated background  (v1.9.0)
   Soft circles and rings drift slowly behind the title, Mallow and progress
   bar. Purely decorative: no clicks, hidden from screen readers, and still
   for anyone who prefers reduced motion.
   ========================================================================= */

.bcx-band {
  isolation: isolate;
}

.bcx-band > .bcx-band__inner,
.bcx-band > .bcx-steps-wrap,
.bcx-band > nav {
  position: relative;
  z-index: 1;
}

.bcx-band__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.bcx-band__bg .bcx-orb {
  position: absolute;
  display: block;
  border-radius: 50%;
  will-change: transform;
}

/* two big soft glows */
.bcx-orb--1 {
  top: -120px;
  left: -80px;
  width: 340px;
  height: 340px;
  background: radial-gradient(circle at 40% 40%, rgba(251, 234, 192, 0.95) 0%, rgba(251, 234, 192, 0) 70%);
  animation: bcx-drift-a 18s ease-in-out infinite;
}

.bcx-orb--2 {
  right: -110px;
  bottom: -150px;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle at 50% 50%, rgba(233, 154, 138, 0.38) 0%, rgba(233, 154, 138, 0) 68%);
  animation: bcx-drift-b 22s ease-in-out infinite;
}

/* a big dashed ring circling the content, turning slowly */
.bcx-orb--ring {
  top: 50%;
  left: 50%;
  width: 560px;
  height: 560px;
  margin: -300px 0 0 -280px;
  border: 1.5px dashed rgba(59, 32, 61, 0.14);
  animation: bcx-spin 70s linear infinite;
}

/* a fine ring that slowly breathes in and out */
.bcx-orb--halo {
  top: 50%;
  left: 50%;
  width: 380px;
  height: 380px;
  margin: -210px 0 0 -190px;
  border: 1px solid rgba(233, 154, 138, 0.35);
  animation: bcx-breathe 9s ease-in-out infinite;
}

/* little dots floating around */
.bcx-orb--dot1 {
  top: 26%;
  left: 18%;
  width: 14px;
  height: 14px;
  background: #E99A8A;
  opacity: 0.55;
  animation: bcx-float 7s ease-in-out infinite;
}

.bcx-orb--dot2 {
  top: 22%;
  right: 20%;
  width: 10px;
  height: 10px;
  background: #3B203D;
  opacity: 0.22;
  animation: bcx-float 9s ease-in-out infinite -3s;
}

.bcx-orb--dot3 {
  bottom: 24%;
  left: 30%;
  width: 18px;
  height: 18px;
  background: #F4C95D;
  opacity: 0.45;
  animation: bcx-float 11s ease-in-out infinite -6s;
}

@keyframes bcx-drift-a {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(60px, 30px) scale(1.08); }
}

@keyframes bcx-drift-b {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-70px, -24px) scale(1.06); }
}

@keyframes bcx-spin {
  to { transform: rotate(360deg); }
}

@keyframes bcx-breathe {
  0%, 100% { transform: scale(0.92); opacity: 0.55; }
  50% { transform: scale(1.06); opacity: 1; }
}

@keyframes bcx-float {
  0%, 100% { transform: translate(0, 0); }
  33% { transform: translate(14px, -12px); }
  66% { transform: translate(-10px, 8px); }
}

/* phones: smaller shapes, the rings sized to the narrow band */
@media (max-width: 600px) {
  .bcx-orb--1 { width: 220px; height: 220px; top: -90px; left: -70px; }
  .bcx-orb--2 { width: 260px; height: 260px; right: -100px; bottom: -110px; }
  .bcx-orb--ring { width: 360px; height: 360px; margin: -200px 0 0 -180px; }
  .bcx-orb--halo { width: 250px; height: 250px; margin: -150px 0 0 -125px; }
  .bcx-orb--dot1 { top: 14%; left: 10%; }
  .bcx-orb--dot2 { top: 12%; right: 12%; }
  .bcx-orb--dot3 { bottom: 16%; left: 14%; }
}

@media (prefers-reduced-motion: reduce) {
  .bcx-band__bg .bcx-orb {
    animation: none !important;
  }
}