/* WooCommerce — shop archive, cart, stepped checkout, my account.
   The PDP has its own stylesheet (pdp.css); this covers everything else.
   Loaded only on WC pages (see inc/enqueue.php). */

/* ─── Shared containers ──────────────────────────────────── */

.bfa-wc-main,
body.woocommerce-cart #main,
body.woocommerce-checkout #main {
  max-width: var(--max);
  margin: calc(var(--bar-h) + var(--nav-h)) auto 0;
  padding: 48px 80px 96px;
}

body.bfa-has-banner.woocommerce-cart #main,
body.bfa-has-banner.woocommerce-checkout #main,
body.bfa-has-banner .bfa-wc-main {
  margin-top: 0;
}

@media (max-width: 1024px) {
  .bfa-wc-main,
  body.woocommerce-cart #main,
  body.woocommerce-checkout #main { padding: 36px 40px 72px; }
}

@media (max-width: 700px) {
  .bfa-wc-main,
  body.woocommerce-cart #main,
  body.woocommerce-checkout #main { padding: 24px 20px 56px; }
}

/* Page titles (cart/checkout heading blocks + shop header) */
body.woocommerce-cart #main h1,
body.woocommerce-checkout #main h1,
.woocommerce-products-header__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(26px, 3.4vw, 40px);
  color: var(--text);
  margin-bottom: 28px;
}

/* ─── Notices ────────────────────────────────────────────── */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  background: var(--off);
  border: 1px solid var(--border);
  border-left: 3px solid var(--steel);
  border-radius: var(--radius-sm);
  padding: 14px 18px;
  margin-bottom: 20px;
  font-size: 14px;
  color: var(--text);
}

.woocommerce-error { border-left-color: #b3261e; }
.woocommerce-error li { margin: 2px 0; }

/* was float:right — on a narrow notice (e.g. the "added to cart" banner
   that follows through to /checkout/) the floated link sat on top of the
   wrapped message text instead of the text flowing around it cleanly. */
.woocommerce-message .button,
.woocommerce-info .button,
.woocommerce-message .wc-forward,
.woocommerce-info .wc-forward {
  flex: 0 0 auto;
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: var(--ls-cta);
  color: var(--steel-dk);
}

/* ─── Buttons (WC defaults → design system) ──────────────── */

.woocommerce .button,
.woocommerce button.button,
.woocommerce a.button {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: var(--ls-cta);
  text-transform: uppercase;
  background: var(--black);
  color: var(--white);
  border: none;
  border-radius: var(--radius-sm);
  padding: 13px 24px;
  cursor: pointer;
  transition: background 0.2s;
}

.woocommerce .button:hover,
.woocommerce button.button:hover,
.woocommerce a.button:hover { background: var(--steel-dk); }

.woocommerce button.button:disabled,
.woocommerce button.button:disabled[disabled] {
  background: var(--steel-xl);
  color: var(--white);
  cursor: not-allowed;
}

/* ─── Shop archive ───────────────────────────────────────── */

.woocommerce-breadcrumb {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 20px;
}
.woocommerce-breadcrumb a { color: var(--muted); }
.woocommerce-breadcrumb a:hover { color: var(--text); }

.woocommerce-products-header { margin-bottom: 8px; }

.woocommerce-result-count {
  font-size: 13px;
  color: var(--muted);
  margin: 0 0 24px;
}

.woocommerce-ordering { float: right; margin: -32px 0 0; }

.woocommerce-ordering select,
.cart .qty,
.bfa-checkout input.input-text,
.bfa-checkout select,
.bfa-checkout textarea {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--text);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 11px 14px;
}

.woocommerce-ordering select { padding: 9px 12px; font-size: 13px; }

/* Checkout's coupon toggle form (woocommerce_before_checkout_form) renders
   BEFORE the .bfa-checkout <form> opens, so it was falling back to raw
   unstyled browser input defaults — hence the "awkwardly small" field. */
.woocommerce-form-coupon {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: 10px;
}
.woocommerce-form-coupon .form-row {
  float: none;
  width: auto;
  margin: 0;
}
.woocommerce-form-coupon .form-row-first { flex: 1 1 auto; min-width: 0; }
.woocommerce-form-coupon .form-row-last { flex: 0 0 auto; }
.woocommerce-form-coupon input[type="text"],
.woocommerce-form-coupon input[type="password"] {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--text);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 11px 14px;
  width: 100%;
  box-sizing: border-box;
}
.woocommerce-form-coupon button { white-space: nowrap; }

ul.products {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  clear: both;
}

@media (max-width: 1100px) { ul.products { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 800px)  { ul.products { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px)  { ul.products { grid-template-columns: 1fr; } }

/* Product tile visuals live in product-card.css (shared with the carousel). */

.woocommerce-pagination { text-align: center; margin-top: 40px; }
.woocommerce-pagination ul { display: inline-flex; gap: 6px; }
.woocommerce-pagination li a,
.woocommerce-pagination li span {
  display: block;
  min-width: 38px;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}
.woocommerce-pagination li span.current,
.woocommerce-pagination li a:hover { background: var(--black); color: var(--white); border-color: var(--black); }

/* ─── Cart ───────────────────────────────────────────────── */

.woocommerce-cart-form { margin-bottom: 40px; }

table.shop_table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

@media (max-width: 700px) {
  /* Product/Price/Quantity/Subtotal columns have no responsive collapse —
     at narrow widths the table (~440px+) was simply wider than the
     viewport, blowing out the whole page horizontally rather than staying
     contained. Scroll the table within its own box instead.
     Scoped to .woocommerce-cart-form specifically — table.shop_table is
     shared with the totals table (cart sidebar) and the checkout order
     review table, neither of which want/need a wide min-width; a bare
     table.shop_table selector here forced them wider than their own
     narrow containers too, breaking both pages the same way. */
  .woocommerce-cart-form {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
   /* claims horizontal panning only — vertical drags delegate to the page for scroll, per the standard nested-horizontal-scroller pattern */
  }
  /* table-layout:fixed — with auto layout the browser was sizing columns
     off each cell's CONTENT rather than the widths we declared, ballooning
     the empty .product-remove column to ~180px (the "too much real
     estate" complaint) while squeezing .product-thumbnail down to ~24px,
     which crushed its 68px image to 0 width (the "images vanished"
     regression). Fixed layout takes column widths from the first row
     literally, so our declared widths actually hold. */
  .woocommerce-cart-form table.shop_table {
    min-width: 480px;
    table-layout: fixed;
  }
  .woocommerce-cart-form table.shop_table .product-remove { width: 32px; }
  .woocommerce-cart-form table.shop_table .product-thumbnail { width: 60px; }
}

table.shop_table th {
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--muted);
  padding: 0 12px 12px;
  border-bottom: 1px solid var(--border);
}

table.shop_table td {
  padding: 16px 12px;
  border-bottom: 1px solid var(--border-lt);
  vertical-align: middle;
}

table.shop_table .product-remove { width: 32px; }
table.shop_table .product-remove a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--off);
  color: var(--muted);
  font-size: 15px;
  line-height: 1;
  transition: all 0.15s;
}
table.shop_table .product-remove a:hover { background: #b3261e; color: var(--white); }

table.shop_table .product-thumbnail { width: 84px; }
table.shop_table .product-thumbnail img {
  width: 68px; height: 68px;
  object-fit: contain;
  background: var(--off);
  border-radius: var(--radius-sm);
}

table.shop_table .product-name a {
  font-weight: 700;
  color: var(--text);
}
table.shop_table .product-name a:hover { color: var(--steel); }

.bfa-free-shipping-callout td { padding: 0; border: none; }
.fsc-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(135deg, var(--steel-dk), var(--steel));
  color: var(--white);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  margin: 4px 0 14px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
}
.fsc-icon { font-size: 18px; flex-shrink: 0; }
/* Palette is deliberately blue/black/white (no amber/orange token to
   reach for) — black instead carries "pay attention" weight here the same
   way it already does on Add to Cart / Place Order, so the two banner
   states still read as distinct without going off-brand. */
.fsc-banner.is-action-needed { background: var(--black); }

/* Reminder pinned directly above Place Order — the shipping-section banner
   above is already scrolled out of view by the time a stacked mobile layout
   reaches the button, so this repeats it right at the point of action. */
.fsc-pinned-reminder { margin: 0 0 14px; max-width: 100%; box-sizing: border-box; }

/* Quote action card (bfa_quote_required_reminder()) — the reminder above
   Place Order, now with its own button. */
.bfa-quote-cta { flex-direction: column; align-items: stretch; gap: 14px; padding: 16px; }
.bfa-quote-cta-text { display: flex; align-items: flex-start; gap: 10px; font-weight: 500; }
.bfa-quote-cta-title { display: block; font-size: 14px; font-weight: 700; margin-bottom: 3px; }
.bfa-quote-cta-btn {
  width: 100%;
  background: var(--white);
  color: var(--black);
  border-radius: var(--radius-pill);
  padding: 13px 18px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: var(--ls-cta);
  text-transform: uppercase;
  transition: background 0.2s;
}
.bfa-quote-cta-btn:hover { background: var(--light); }

/* Approved-quote cart mismatch panel (bfa_quote_cart_choice_notice()). It sits
   inside .woocommerce-message, which is a flex row — hence the full-width basis,
   or the panel would try to share a line with itself. The button above is
   white-on-dark by design; on this light notice that would be invisible, so the
   primary action is inverted here. */
.bfa-quote-choice {
  flex: 1 1 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.bfa-quote-choice-text { margin: 0; font-size: 14px; line-height: 1.5; }
.bfa-quote-choice-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.bfa-quote-choice .bfa-quote-cta-btn {
  width: auto;
  flex: 1 1 210px;
  text-align: center;
  background: var(--black);
  color: var(--white);
}
.bfa-quote-choice .bfa-quote-cta-btn:hover { background: var(--steel-dk); }
.bfa-quote-choice .bfa-quote-cta-btn--ghost {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border);
}
.bfa-quote-choice .bfa-quote-cta-btn--ghost:hover { background: var(--off); }

/* One per line once there is no room for two side by side. */
@media (max-width: 480px) {
  .bfa-quote-choice .bfa-quote-cta-btn { flex: 1 1 100%; }
}

/* Momentary highlight when checkout_error scrolls back up to the original
   banner (see checkout.js) — a plain scroll with nothing drawing the eye
   reads as "did that even do anything?" on a page this long. */
@keyframes bfa-fsc-flash {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); }
  20%, 60% { box-shadow: 0 0 0 4px rgba(255,255,255,0.55); }
  40% { box-shadow: 0 0 0 2px rgba(255,255,255,0.3); }
}
.fsc-banner.is-flash { animation: bfa-fsc-flash 1.4s ease; }

.cart-preorder-note {
  /* Block, not inline — inline-block + nowrap next to the product name
     was fine when there was room, but on the checkout order-review
     table's narrower column it just ran on past the name and sat on
     top of the price cell. Its own line under the name has nowhere
     left to overlap into. */
  display: block;
  width: fit-content;
  font-size: 10px; font-weight: 700;
  letter-spacing: var(--ls-eyebrow); text-transform: uppercase;
  color: var(--white);
  background: var(--copper);
  padding: 3px 8px;
  border-radius: var(--radius-pill);
  margin-top: 6px;
  white-space: nowrap;
}

table.shop_table .product-price,
table.shop_table .product-subtotal { font-weight: 700; color: var(--text); white-space: nowrap; }

.cart .qty {
  width: 64px;
  text-align: center;
  padding: 9px 6px;
}

/* Coupon + Update Cart row — now a plain <div class="actions"> after
   </table> (see woocommerce/cart/cart.php override), not a colspan="6"
   table cell. It used to be one, and under table-layout:fixed a colspan
   cell doesn't reliably sum its spanned columns' widths once most of them
   have no explicit width of their own — it was collapsing to ~32px (just
   the first column's width) with its contents rendering past its
   collapsed edge, reading as a crushed coupon field and an overlapping
   Update Cart button. An ordinary div sidesteps that category of bug
   entirely — plain flexbox, no table involved. */
.woocommerce-cart-form .actions {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--border-lt);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
/* Field + Apply button stay on one line — nowrap, with the field flexing
   down to fit rather than the pair wrapping onto separate rows. */
.woocommerce-cart-form .actions .coupon {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  flex: 1 1 auto;
  min-width: 0;
}
.woocommerce-cart-form .actions .coupon .input-text {
  font-family: var(--font-body);
  font-size: 16px; /* iOS Safari zooms in on focus below 16px */
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  width: 160px;
  flex: 1 1 auto;
  min-width: 0;
}
.woocommerce-cart-form .actions .coupon button {
  flex: 0 0 auto;
  white-space: nowrap;
}

/* Below 480px, .coupon (field+button) and Update Cart no longer both fit
   on one space-between row — stack them as two full-width rows instead
   of letting .coupon's own flex-grow crush its input down to fit. */
@media (max-width: 480px) {
  .woocommerce-cart-form .actions {
    flex-direction: column;
    align-items: stretch;
  }
  .woocommerce-cart-form .actions .coupon,
  .woocommerce-cart-form .actions > button {
    width: 100%;
  }
}

/* collaterals: upsell fills the space left of the totals box; with no
   upsell the totals still sit flush right */
.cart-collaterals {
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  gap: 40px;
  margin-bottom: 48px;
}

.cart-collaterals #cart-upsell { flex: 1; margin: 0; }

@media (max-width: 900px) {
  /* totals (checkout button) first on mobile, suggestions after */
  .cart-collaterals { flex-direction: column-reverse; }
  .cart-collaterals .cart_totals { width: 100%; }
}

.cart-collaterals .cart_totals {
  width: 380px;
  max-width: 100%;
  background: var(--off);
  border: 1px solid var(--border-lt);
  border-radius: var(--radius-md);
  padding: 24px;
}

.cart-collaterals .cart_totals h2 {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 800;
  margin-bottom: 14px;
}

.cart_totals table.shop_table {
  /* Without this, a table only grows to fit unbreakable content (the
     "Shipping to <address>" line) rather than wrapping it within the
     column width already available — on narrow viewports that pushed the
     whole table past its container and the page went horizontal. */
  table-layout: fixed;
}
.cart_totals table.shop_table th,
.cart_totals table.shop_table td {
  padding: 10px 0;
  border-bottom: 1px solid var(--border-lt);
  overflow-wrap: break-word;
}
.cart_totals table.shop_table th {
  font-size: 13px;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text);
  font-weight: 600;
}
.cart_totals .order-total td { font-size: 17px; font-weight: 800; }

.wc-proceed-to-checkout { margin-top: 18px; }
.wc-proceed-to-checkout a.checkout-button {
  display: block;
  text-align: center;
  font-size: 13px;
  padding: 16px 24px;
}

/* cart upsell */
#cart-upsell { margin: 8px 0 48px; }

.cart-upsell-header { margin-bottom: 18px; }

.cart-upsell-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(18px, 2.2vw, 26px);
  color: var(--text);
  margin-bottom: 4px;
}

.cart-upsell-sub { font-size: 14px; color: var(--muted); }

.cart-upsell-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px;
}

.cart-upsell-card {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--off);
  border: 1px solid var(--border-lt);
  border-radius: var(--radius-md);
  padding: 12px;
  transition: border-color 0.15s;
}
.cart-upsell-card:hover { border-color: var(--steel-xl); }

.cart-upsell-img {
  width: 64px; height: 64px;
  flex-shrink: 0;
  background: var(--light);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.cart-upsell-img img { width: 100%; height: 100%; object-fit: contain; padding: 6px; }

.cart-upsell-info { flex: 1; min-width: 0; }
.cart-upsell-name { font-size: 13px; font-weight: 700; color: var(--text); line-height: 1.3; }
.cart-upsell-price { font-size: 13px; font-weight: 700; color: var(--copper); margin-top: 2px; }

.cart-upsell-add {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: var(--ls-cta);
  text-transform: uppercase;
  color: var(--steel-dk);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 9px 14px;
  white-space: nowrap;
  transition: all 0.15s;
}
.cart-upsell-add:hover { background: var(--black); border-color: var(--black); color: var(--white); }
.cart-upsell-add.is-loading { opacity: 0.5; pointer-events: none; }

.cart-upsell-qty-form { flex-shrink: 0; display: flex; align-items: center; gap: 6px; }
.cart-upsell-qty-input {
  width: 42px;
  font-family: var(--font-body);
  font-size: 12px; font-weight: 700; text-align: center;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 4px;
}
.cart-upsell-qty-form .cart-upsell-add { border: none; cursor: pointer; background: none; }

/* empty cart */
.cart-empty.woocommerce-info { border-left-color: var(--steel); }
.return-to-shop { margin-top: 8px; }

/* ─── Checkout (stepped) ─────────────────────────────────── */

.bfa-checkout-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 400px;
  gap: 40px;
  align-items: start;
}

@media (max-width: 980px) {
  /* minmax(0, 1fr), not bare 1fr — a plain 1fr track still won't shrink
     a grid item below its content's intrinsic minimum width (a standard
     CSS Grid behaviour, not a bug in the browser). Stripe's own embedded
     card-element iframe doesn't want to shrink past ~320-328px, so the
     step column — and everything nested in it — was overflowing its own
     grid cell by that much on any viewport narrower than that. Desktop's
     column above already has the minmax(0, ...) guard; this one didn't. */
  .bfa-checkout-layout { grid-template-columns: minmax(0, 1fr); }
  /* Was order:-1, pushing the summary (+ its Apple/Google/Link express
     buttons, which live inside .bfa-checkout-steps above the numbered
     steps) ahead of the actual Contact/Delivery/Payment form — the very
     first thing on mobile checkout was Order Summary, then express
     buttons, then an "— OR —" divider, before any real form field.
     Natural DOM order (steps first) matches what a checkout should open
     on. */
}

/* steps */
.bfa-step {
  border: 1px solid var(--border-lt);
  border-radius: var(--radius-md);
  background: var(--white);
  margin-bottom: 14px;
  overflow: hidden;
}

.bfa-step-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 22px;
}

.bfa-step.is-done:not(.is-open) .bfa-step-head { cursor: pointer; }

.bfa-step-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--off);
  border: 1px solid var(--border);
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
}

.bfa-step.is-open .bfa-step-num {
  background: var(--black);
  border-color: var(--black);
  color: var(--white);
}

.bfa-step.is-done .bfa-step-num {
  background: var(--copper);
  border-color: var(--copper);
  color: var(--white);
}

.bfa-step-label {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 800;
  color: var(--text);
}

.bfa-step-summary {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: right;
}

.bfa-step-edit {
  display: none;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: var(--ls-cta);
  text-transform: uppercase;
  color: var(--steel-dk);
  flex-shrink: 0;
}
.bfa-step-edit:hover { text-decoration: underline; }

.bfa-step.is-done:not(.is-open) .bfa-step-edit { display: block; }

.bfa-step-body {
  display: none;
  padding: 4px 22px 24px;
}

.bfa-step.is-open .bfa-step-body { display: block; }

.bfa-step-next {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: var(--ls-cta);
  text-transform: uppercase;
  background: var(--black);
  color: var(--white);
  border-radius: var(--radius-sm);
  padding: 14px 26px;
  margin-top: 14px;
  transition: background 0.2s;
}
.bfa-step-next:hover { background: var(--steel-dk); }

/* form rows (WC markup) */
.bfa-checkout .form-row {
  display: block;
  margin: 0 0 14px;
}

.bfa-checkout .form-row label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 5px;
}

.bfa-checkout .form-row .required { color: var(--copper); text-decoration: none; }

.bfa-checkout .form-row .woocommerce-input-wrapper { display: block; }

.bfa-checkout input.input-text,
.bfa-checkout select,
.bfa-checkout textarea { width: 100%; }

.bfa-checkout input.input-text:focus,
.bfa-checkout select:focus,
.bfa-checkout textarea:focus {
  outline: none;
  border-color: var(--steel);
  box-shadow: 0 0 0 3px rgba(77, 96, 112, 0.12);
}

.bfa-checkout .form-row.woocommerce-invalid input.input-text,
.bfa-checkout .form-row.woocommerce-invalid select {
  border-color: #b3261e;
}

/* two-up rows: WC gives first/last name form-row-first / form-row-last */
.bfa-checkout .form-row-first,
.bfa-checkout .form-row-last {
  width: calc(50% - 7px);
  display: inline-block;
  vertical-align: top;
}
.bfa-checkout .form-row-first { margin-right: 10px; }

@media (max-width: 560px) {
  .bfa-checkout .form-row-first,
  .bfa-checkout .form-row-last { width: 100%; margin-right: 0; }
}

/* select2 (WC country/state) matched to inputs */
.bfa-checkout .select2-container--default .select2-selection--single {
  height: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 7px 8px;
}
.bfa-checkout .select2-container--default .select2-selection--single .select2-selection__arrow { top: 8px; }

/* payment box (WC #payment) */
.bfa-checkout .woocommerce-checkout-payment { background: transparent; }

.bfa-checkout .wc_payment_methods {
  list-style: none;
  margin-bottom: 18px;
}

.bfa-checkout .wc_payment_method {
  border: 1px solid var(--border-lt);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  margin-bottom: 8px;
}

.bfa-checkout .wc_payment_method > label {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  cursor: pointer;
}

.bfa-checkout .wc_payment_method input[type="radio"] {
  accent-color: var(--copper);
  margin-right: 8px;
}

.bfa-checkout .payment_box {
  font-size: 13px;
  color: var(--muted);
  background: var(--off);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  margin-top: 10px;
  /* Stripe's own embedded card-element iframe enforces a ~320-328px floor
     (see the .bfa-checkout-layout comment above) that no amount of grid
     sizing on our side can shrink. On any real phone narrower than that,
     the iframe used to escape this box and widen the whole page, which
     mobile browsers respond to by zooming the entire viewport out to fit —
     containing the overflow HERE (scrollable, not the page) keeps the
     zoom-out from happening at all, at the cost of a horizontal scrollbar
     on just this one box on the narrowest phones.
     overflow-y: hidden — overflow-x: auto alone computes overflow-y to auto,
     making the card form a nested vertical scroller that can swallow a
     page-scroll swipe (same trap as the carousels, see base.css). */
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
}

/* The Stripe plugin's invisible #wc-stripe-hidden-style-input (it reads our
   input styling off it) is position:absolute + width:100% with no positioned
   ancestor, so its 100% resolved against the whole viewport — starting ~76px
   in, it pushed the page ~76px wider than the screen the moment step 3
   opened, and mobile browsers zoomed/shifted to fit. Anchor it to its own
   form instead. */
.bfa-checkout .wc-upe-form { position: relative; }

.bfa-checkout .woocommerce-privacy-policy-text {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 14px;
}

.bfa-checkout #place_order {
  width: 100%;
  font-size: 13px;
  padding: 16px 24px;
}

/* order summary sidebar */
.bfa-checkout-summary {
  position: sticky;
  top: calc(var(--nav-h) + var(--bar-h) + 24px);
  background: var(--off);
  border: 1px solid var(--border-lt);
  border-radius: var(--radius-md);
  padding: 24px;
}

@media (max-width: 980px) {
  /* Sticky only makes sense in the two-column desktop layout (a short
     400px sidebar). Reordered to the top of a single mobile column (see
     the earlier .bfa-checkout-layout media query), it's often taller than
     the viewport itself — product list + upsells + payment buttons —
     so staying "stuck" visually pins it over the checkout steps for the
     entire scroll distance needed to reach them, hiding every field. This
     has to come after the base rule above: equal specificity means source
     order decides the winner regardless of media-query nesting. */
  .bfa-checkout-summary { position: static; }
}

.bfa-checkout-summary-title {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 800;
  margin-bottom: 14px;
}

.bfa-checkout-summary table.shop_table th,
.bfa-checkout-summary table.shop_table td {
  padding: 10px 0;
  border-bottom: 1px solid var(--border-lt);
  font-size: 13px;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text);
}

.bfa-checkout-summary table.shop_table thead th {
  font-size: 11px;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--muted);
}

.bfa-checkout-summary .order-total td,
.bfa-checkout-summary .order-total th { font-size: 16px; font-weight: 800; }

/* ─── My account (light touch) ───────────────────────────── */

.woocommerce-MyAccount-navigation ul { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.woocommerce-MyAccount-navigation li a {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 8px 16px;
}
.woocommerce-MyAccount-navigation li.is-active a { background: var(--black); border-color: var(--black); color: var(--white); }


/* ─── Checkout summary upsell ("Complete Your Setup") ─────── */

.bfa-co-upsell {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}

.bfa-co-upsell-title {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: var(--ls-cta);
  text-transform: uppercase;
  color: var(--text);
  margin: 0 0 12px;
}

.bfa-co-upsell-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 10px;
  border: 1px solid var(--border-lt);
  border-radius: var(--radius-md);
  background: var(--white);
  margin-bottom: 10px;
  overflow: hidden;
  transition: opacity 0.3s, max-height 0.3s, margin 0.3s, padding 0.3s;
}
.bfa-co-upsell-item.is-added {
  opacity: 0;
  max-height: 0 !important;
  margin-bottom: 0;
  padding-top: 0;
  padding-bottom: 0;
}

.bfa-co-upsell-img img {
  width: 46px; height: 46px;
  object-fit: contain;
  background: var(--off);
  border-radius: var(--radius-sm);
  display: block;
}

.bfa-co-upsell-info { flex: 1 1 140px; min-width: 0; }
.bfa-co-upsell-name {
  display: block;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.3;
  overflow-wrap: break-word;
}
.bfa-co-upsell-price { font-size: 12px; font-weight: 700; color: var(--steel-dk); }

.bfa-co-upsell-qty-input {
  flex: 0 0 auto;
  width: 38px;
  font-family: var(--font-body);
  font-size: 12px; font-weight: 700; text-align: center;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 7px 2px;
}

.bfa-co-upsell-add {
  flex: 0 0 auto;
  margin-left: auto;
  background: var(--black);
  color: var(--white);
  border: none;
  border-radius: var(--radius-sm);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: var(--ls-cta);
  text-transform: uppercase;
  padding: 9px 12px;
  cursor: pointer;
  transition: background 0.2s;
}
.bfa-co-upsell-add:hover { background: var(--copper); }
.bfa-co-upsell-add:disabled { background: var(--steel-xl); cursor: wait; }

/* Narrow sidebars (mobile, and the desktop checkout column) can't fit the
   thumbnail, name and button on one line once a product name is long — let
   the button drop to its own full-width row rather than crushing the name. */
@media (max-width: 480px) {
  .bfa-co-upsell-add { flex: 1 0 100%; margin-left: 0; }
}

/* Remove link on checkout order lines */
.bfa-co-remove {
  display: inline-block;
  background: none;
  border: none;
  padding: 0;
  margin-left: 8px;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
  transition: color 0.15s;
}
.bfa-co-remove:hover { color: #b3261e; }
.bfa-co-remove:disabled { opacity: 0.5; cursor: wait; }

/* Checkout line items: thumbnail + qty bubble (plain "× n" hidden) */
.bfa-checkout .woocommerce-checkout-review-order-table .product-quantity { display: none; }

.bfa-co-line {
  display: flex;
  align-items: center;
  gap: 12px;
}

.bfa-co-line-thumb {
  position: relative;
  flex: 0 0 52px;
}
.bfa-co-line-thumb img {
  width: 52px; height: 52px;
  object-fit: contain;
  background: var(--off);
  border: 1px solid var(--border-lt);
  border-radius: var(--radius-sm);
  display: block;
}
.bfa-co-line-qty {
  position: absolute;
  top: -7px; right: -7px;
  min-width: 19px; height: 19px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--steel-dk);
  color: var(--white);
  font-size: 10.5px;
  font-weight: 800;
  border-radius: var(--radius-pill);
  padding: 0 5px;
}

.bfa-co-line-name {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
}

/* ─── Freight Shipping Quote Pro — restyle to match design system ──────
   The plugin's own modal/button use bare, unscoped tags (e.g. a plain
   <footer>), which our site-wide `footer{...}` rule (black bg, big
   padding) was leaking into — making the submit button look huge and
   black. Scoped overrides below undo that leak and bring the modal in
   line with the rest of the site (see .demo-form / .retailer-form). */

#freight-shipping-quote-popup form {
  border-radius: var(--radius-md);
  font-family: var(--font-body);
}

#freight-shipping-quote-popup h2,
#freight-shipping-quote-popup h3 {
  font-family: var(--font-display);
  color: var(--text);
}

.freight-shipping-quote-form-fields label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--muted);
}

.freight-shipping-quote-form-fields :is([type="text"], [type="email"], [type="tel"], select, textarea) {
  border-color: var(--border-lt);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--text);
}

.freight-shipping-quote-form footer {
  background: none;
  padding: 0;
  margin-top: 20px;
}

.freight-shipping-quote-form [type="submit"] {
  background-color: var(--black);
  border-radius: var(--radius-sm);
  padding: 11px 22px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: var(--ls-cta);
  text-transform: uppercase;
}
.freight-shipping-quote-form [type="submit"]:hover { background-color: var(--steel-dk); }

/* ─── Cart totals: shipping row ─────────────────────────────────────
   Mixes WC core markup (shipping methods list, destination text,
   change-address calculator) with the Freight Shipping Quote plugin's own
   "Request a quote" button. Two real bugs here beyond spacing: (1) the
   table's default vertical-align:middle centred the short "Shipment" label
   against this row's much taller value column, so the button visually sat
   ABOVE the label instead of below it; (2) the checkout button below
   inherited `float:right` from the generic .wc-forward rule meant for tiny
   "View cart" notice links, making it float narrow and right-aligned
   instead of matching the full-width Apple/Google Pay buttons under it. */

.woocommerce-shipping-totals th,
.woocommerce-shipping-totals td {
  vertical-align: top;
}

/* Break this one row out of the totals table's fixed 2-column split — the
   calculator form (country/state/suburb/postcode + Update) was being
   squeezed into just the td's ~half-width share of the sidebar, crushing
   every field into a ~120px column and making the whole thing look
   overlapping and uneven. Full-width block row instead. */
.woocommerce-shipping-totals { display: block; }
.woocommerce-shipping-totals th,
.woocommerce-shipping-totals td { display: block; width: 100%; }

.shipping-calculator-form {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border-lt);
}
.shipping-calculator-form .form-row {
  margin: 0 0 10px;
}
.shipping-calculator-form label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
}
.shipping-calculator-form select,
.shipping-calculator-form input[type="text"] {
  width: 100%;
  font-family: var(--font-body);
  font-size: 16px; /* iOS Safari zooms in on focus below 16px */
  color: var(--text);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  box-sizing: border-box;
}
.shipping-calculator-form p:last-of-type { margin: 4px 0 0; }
.shipping-calculator-form .button {
  width: 100%;
}

/* The Request-a-Quote method's own label just repeats the "Request a
   quote" button text right next to it while the quote is still pending —
   drop that one label rather than show both. Was a bare selector matching
   EVERY shipping method's label on both cart and checkout — with more
   than one method configured (e.g. Free Shipping), those labels are the
   only text identifying the option at all, so blanket-hiding left them as
   unlabelled radio buttons. :has() scopes this to specifically the
   quote-request row (identified by its own description/button block
   sitting next to it).
   BUG (found 2026-09-11, real customer stuck at checkout): once a quote
   is approved, this same label is the ONLY place WooCommerce renders the
   actual shipping price — the plugin only sets a cost on the rate once
   approved (freight-shipping-quote/inc/class-shipping-method.php), so
   before that there's no price span to hide alongside the redundant text,
   and after it the label IS the price. Hiding it unconditionally left
   "Shipment" blank at exactly the moment a customer had a real dollar
   figure to see. :not(:has(price span)) keeps the pending-state cleanup
   without swallowing the approved price. */
.woocommerce-shipping-methods li:has(.freight-shipping-quote-rate-description) label:not(:has(.woocommerce-Price-amount)) {
  display: none;
}

.woocommerce-shipping-totals .woocommerce-shipping-methods {
  list-style: none;
  margin: 0;
}
.woocommerce-shipping-totals .woocommerce-shipping-methods li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

/* A quote request is a secondary, occasional action — an outlined pill
   reads as "optional step" without competing with Proceed to Checkout for
   attention. (Selector matches the plugin's own compound one — a bare
   .freight-shipping-quote-request-button rule loses that specificity fight
   and the plugin's default green wins instead.) */
/* Column, not row — the plugin outputs the status message and the request/
   refresh button as separate divs and lets them fall into normal block flow;
   `flex` with the default row direction put them side by side on one line.
   `order: -1` puts the status text first regardless of the plugin's own
   source order (button, then status), since it reads better as the state
   of things before the action you'd take about it. */
.freight-shipping-quote-rate-description { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.freight-shipping-quote-rate-description .freight-shipping-quote-status { order: -1; }
.freight-shipping-quote-rate-description .freight-shipping-quote-request-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  white-space: nowrap;
  background: transparent;
  color: var(--steel-dk) !important;
  border: 1px solid var(--steel-dk);
  border-radius: var(--radius-pill);
  padding: 7px 14px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: var(--ls-cta);
  text-transform: uppercase;
  transition: background 0.2s, color 0.2s;
}
.freight-shipping-quote-rate-description .freight-shipping-quote-request-button:hover {
  background: var(--steel-dk);
  color: var(--white) !important;
}
/* Before any request exists, the button is the one thing blocking checkout —
   the small outlined pill above was easy to miss on mobile. Filled and full
   width until a quote is requested; afterwards ("Update quote request") it
   keeps the quieter outlined style.
   "No request yet" = no status line: the plugin only prints
   .freight-shipping-quote-status once a quote exists
   (class-shipping-method.php get_description()). Its container class is NOT
   usable for this — it carries ...-button-container-pending even for a fresh
   session with no quote at all. */
.freight-shipping-quote-rate-description:not(:has(.freight-shipping-quote-status)) .freight-shipping-quote-button-container { align-self: stretch; }
.freight-shipping-quote-rate-description:not(:has(.freight-shipping-quote-status)) .freight-shipping-quote-request-button {
  display: flex;
  width: 100%;
  background: var(--black);
  color: var(--white) !important;
  border-color: var(--black);
  padding: 12px 18px;
  font-size: 12px;
}
.freight-shipping-quote-rate-description:not(:has(.freight-shipping-quote-status)) .freight-shipping-quote-request-button:hover {
  background: var(--steel-dk);
  border-color: var(--steel-dk);
}

.woocommerce-shipping-totals .woocommerce-shipping-destination {
  margin: 12px 0 0;
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.5;
}
.woocommerce-shipping-totals .woocommerce-shipping-destination strong { color: var(--text); }

.woocommerce-shipping-totals .shipping-calculator-button {
  display: inline-block;
  margin-top: 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--steel-dk);
  text-decoration: underline;
}
.woocommerce-shipping-totals .shipping-calculator-button:hover { color: var(--steel); }

/* Proceed to Checkout: full width, matching the Apple/Google Pay/Link
   buttons directly below it instead of floating narrow and right-aligned. */
.wc-proceed-to-checkout a.checkout-button {
  float: none;
  width: 100%;
  margin: 0 0 12px;
}

/* WooCommerce's own update_checkout (fires on every "Add to order" click,
   coupon apply, shipping-method change, etc.) blocks BOTH the order-review
   table and the payment box with jQuery.blockUI's default overlay — a
   fairly opaque white wash + a generic grey spinner, over up to ~800px of
   the page at once on mobile (order review + payment stacked). Nothing
   here reloads or navigates (checkout.js's fetch-based flow, verified),
   but that heavy a covering read as "the whole page just refreshed".
   blockUI sets its overlay via inline style (jQuery .css()), so it needs
   !important to actually override here — this isn't fighting our own
   cascade, it's the only way to beat an inline style at all. */
.woocommerce-checkout-review-order-table.blockUI.blockOverlay,
.woocommerce-checkout-payment.blockUI.blockOverlay,
.woocommerce-checkout-review-order-table > .blockUI.blockOverlay,
.woocommerce-checkout-payment > .blockUI.blockOverlay {
  background: rgba(255, 255, 255, 0.3) !important;
}
.blockUI.blockMsg { border: none !important; background: none !important; }