/*
 * bridge.css - styles for markup this theme does not own.
 *
 * The three design stylesheets (tokens/typography/styles) ship unmodified,
 * so anything WordPress, WooCommerce or a plugin prints gets mapped onto the
 * design system here. Tokens only: no raw colour, spacing or radius values.
 *
 * Sections are per-source so it stays obvious what may be removed if a plugin
 * ever goes away.
 */

/* ---------------------------------------------------------------------------
 * WooCommerce - notices
 * Woo prints .woocommerce-message / -error / -info in several contexts
 * (cart bounce-backs, coupon feedback, login errors).
 * ------------------------------------------------------------------------ */
.woocommerce-message,
.woocommerce-error,
.woocommerce-info,
.woocommerce-notice,
.woocommerce-noreviews,
.wc-block-components-notice-banner {
  margin: 0 0 var(--space-600);
  padding: var(--space-400) var(--space-500);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-400);
  background: var(--color-bg-fill-info-subtle);
  color: var(--color-text-base);
  list-style: none;
}

.woocommerce-message,
.woocommerce-notice--success {
  border-color: var(--color-border-success-soft);
  background: var(--color-bg-fill-success-soft);
}

.woocommerce-error {
  border-color: var(--color-border-critical-soft);
  background: var(--color-bg-fill-critical-soft);
  color: var(--color-text-critical);
}

.woocommerce-message a,
.woocommerce-error a,
.woocommerce-info a {
  color: inherit;
  text-decoration: underline;
}

/* Safety net: a standalone WooCommerce notices wrapper (top-of-content on
   generic WC pages) never goes edge-to-edge - it stays within the site
   content width. Constrained contexts (auth 480px, dashboard, catalog
   .shell) are already narrower, so this is a no-op there; checkout has its
   own rule below with matching side gutters. */
.woocommerce-notices-wrapper {
  max-width: 1360px;
  margin-left: auto;
  margin-right: auto;
}

/* Toasts - the design's .ds-toast idiom: a dark pill that slides down from the
   top-centre. Both success (add-to-cart, coupon, account saved) and error
   (checkout / login / coupon failures) float here instead of a full-width
   banner; wp-extras.js moves them in and tags the variant. */
.bh-toast-region {
  position: fixed;
  top: var(--space-600);
  left: 50%;
  transform: translateX(-50%);
  z-index: 100002;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-300);
  width: max-content;
  max-width: min(92vw, 34rem);
  pointer-events: none;
}

.bh-toast {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: var(--space-300);
  max-width: 100%;
  padding: var(--space-300) var(--space-500);
  border-radius: var(--radius-full);
  background: var(--color-bg-ink);
  color: #fff;
  box-shadow: var(--shadow-400);
  font-family: "Nunito Sans", sans-serif;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  opacity: 0;
  transform: translateY(-12px);
  transition: opacity 220ms ease, transform 220ms ease;
}

.bh-toast.is-visible {
  opacity: 1;
  transform: none;
}

.bh-toast.is-leaving {
  opacity: 0;
  transform: translateY(-12px);
}

.bh-toast-icon {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
}

.bh-toast--success .bh-toast-icon {
  color: var(--color-text-success);
}

.bh-toast--error .bh-toast-icon {
  color: var(--color-text-critical);
}

.bh-toast-body {
  flex: 0 1 auto;
  min-width: 0;
  color: inherit;
}

.bh-toast-body ul,
.bh-toast-body p {
  margin: 0;
  padding: 0;
  list-style: none;
}

.bh-toast-body a {
  color: #fff;
  text-decoration: underline;
}

.bh-toast-close {
  flex: 0 0 auto;
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.7);
  font-size: 18px;
  line-height: 1;
  padding: 0;
  cursor: pointer;
}

.bh-toast-close:hover {
  color: #fff;
}

/* Inline WooCommerce login (order-received guest login, checkout returning
   customer) uses the design's Sign In card, centred and contained. */
.bh-wc-login .bh-auth-card {
  width: 100%;
  max-width: 32rem;
  margin-inline: auto;
}

.bh-auth-remember {
  display: flex;
  align-items: center;
  gap: var(--space-200);
  margin: 0 0 var(--space-400);
  cursor: pointer;
}

.bh-auth-remember input {
  width: auto;
  min-height: 0;
  margin: 0;
}

/* Payment / checkout processing: WooCommerce blocks the form with a grey
   blockUI overlay (reads as a blur). Show the brand spinner instead. */
.woocommerce-checkout .blockUI.blockOverlay,
.woocommerce-cart .blockUI.blockOverlay,
form.checkout .blockUI.blockOverlay {
  background: var(--color-bg-page) !important;
  opacity: 0.6 !important;
}

.woocommerce-checkout .blockUI.blockOverlay::after,
.woocommerce-cart .blockUI.blockOverlay::after,
form.checkout .blockUI.blockOverlay::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40px;
  height: 40px;
  margin: -20px 0 0 -20px;
  border: 3px solid var(--color-border-base);
  border-top-color: var(--color-text-brand);
  border-radius: 50%;
  animation: bh-spin 0.7s linear infinite;
}

/* ---------------------------------------------------------------------------
 * Mini-cart drawer - WordPress-only states
 * The approved design has no empty-cart drawer state; this is the neutral
 * fallback shown when the real cart has no lines.
 * ------------------------------------------------------------------------ */
.cart-empty {
  margin: 0;
  padding: var(--space-700) var(--space-500);
  color: var(--color-text-subtle);
  text-align: center;
}

/* ---------------------------------------------------------------------------
 * FiboSearch - header search
 * The header keeps the design's own search form; when FiboSearch's AJAX form is
 * mounted in the header its wrapper must not add width or
 * chrome of its own.
 * ------------------------------------------------------------------------ */
.search-form .dgwt-wcas-search-wrapp,
.mobile-search .dgwt-wcas-search-wrapp {
  width: 100%;
  max-width: none;
}

/* ---------------------------------------------------------------------------
 * Forminator - newsletter and form pages
 * Forms run in Forminator's "basic/none" design mode so the design system
 * supplies the styling rather than the plugin's own theme.
 * ------------------------------------------------------------------------ */
.forminator-ui.forminator-custom-form {
  margin: 0;
}

.forminator-ui .forminator-input,
.forminator-ui .forminator-textarea,
.forminator-ui select.forminator-select2 {
  width: 100%;
  padding: var(--space-400);
  border: 1px solid var(--color-border-base);
  border-radius: var(--radius-300);
  background: var(--color-bg-surface);
  color: var(--color-text-base);
}

.forminator-ui .forminator-input:focus,
.forminator-ui .forminator-textarea:focus {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 1px;
}

.forminator-ui .forminator-error-message {
  color: var(--color-text-critical);
}

/* Newsletter band.
   Ground truth from the rendered DOM: Forminator prints an EMPTY duplicate
   wrapper (<div class="forminator-ui ..."><br/></div>) before the real
   <form>, whose <br> adds a phantom line above the input - that is what
   pushed the icon high and inflated the wrapper. The form itself renders
   response message -> email row -> captcha row -> button row with the
   "forminator-enclosed" attached-button design. Every geometry property here
   is !important because Forminator's flat/enclosed stylesheet uses
   !important on its own geometry - AND every selector must carry at least
   FOUR classes: Forminator also generates a per-form settings stylesheet
   (uploads/forminator/653881_*/css/style-653881.css) whose rules like
   .forminator-ui.forminator-custom-form-653881.forminator-design--flat
   .forminator-input { padding/width ... !important } are specificity
   (0,4,0). With !important on both sides, specificity decides, so these
   selectors use form.forminator-ui.forminator-custom-form -> (0,4,n). */

/* Kill the empty duplicate wrapper (a div; the real form is a <form>). */
.bh-newsletter > div.forminator-ui.forminator-custom-form {
  display: none !important;
}

.bh-newsletter {
  position: relative;
}

.bh-newsletter .bh-newsletter-icon {
  position: absolute;
  left: var(--space-400);
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  color: var(--color-text-strong);
  pointer-events: none;
}

.bh-newsletter form.forminator-ui.forminator-custom-form {
  display: flex !important;
  flex-wrap: nowrap;
  gap: 12px !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* The captcha row between email and button must not participate in layout
   (the invisible reCAPTCHA still executes; its badge is fixed-position). */
.bh-newsletter form.forminator-ui.forminator-custom-form .forminator-row:has(.forminator-field-captcha) {
  display: none !important;
}

/* Response message: absolutely below the row when Forminator shows it. */
.bh-newsletter form.forminator-ui.forminator-custom-form .forminator-response-message {
  position: absolute !important;
  top: 100% !important;
  left: 0;
  right: 0;
  margin: var(--space-200) 0 0 !important;
  padding: 0 !important;
  background: none !important;
}

/* Field-level validation errors: same out-of-flow treatment as the response
   banner, so the row's geometry never changes when one appears. */
.bh-newsletter form.forminator-ui.forminator-custom-form .forminator-error-message {
  position: absolute !important;
  top: 100% !important;
  left: 0;
  right: 0;
  margin: var(--space-200) 0 0 !important;
}

.bh-newsletter form.forminator-ui.forminator-custom-form .forminator-response-message[aria-hidden="true"],
.bh-newsletter form.forminator-ui.forminator-custom-form .forminator-response-message:empty {
  display: none !important;
}

.bh-newsletter form.forminator-ui.forminator-custom-form .forminator-row {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  position: static !important;
}

.bh-newsletter form.forminator-ui.forminator-custom-form .forminator-row:not(.forminator-row-last) {
  flex: 0 1 auto !important;
  min-width: 0;
  width: auto !important;
}

.bh-newsletter form.forminator-ui.forminator-custom-form .forminator-row-last {
  flex: 0 0 auto !important;
  width: auto !important;
}

.bh-newsletter form.forminator-ui.forminator-custom-form .forminator-col,
.bh-newsletter form.forminator-ui.forminator-custom-form .forminator-field {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  width: 100% !important;
  position: static !important;
}

.bh-newsletter form.forminator-ui.forminator-custom-form input.forminator-input {
  height: 48px !important;
  min-height: 48px !important;
  width: 31em !important;
  max-width: 100% !important;
  margin: 0 !important;
  border: 1px solid var(--color-border-strong) !important;
  border-radius: var(--radius-300) !important;
  padding: 0 var(--space-400) 0 40px !important;
  padding-left: 40px !important;
  background: var(--color-bg-surface) !important;
  color: var(--color-text-base) !important;
  font: inherit !important;
  box-shadow: none !important;
}

.bh-newsletter form.forminator-ui.forminator-custom-form input.forminator-input::placeholder {
  font-style: normal !important;
  font-weight: 500;
  color: var(--color-text-placeholder) !important;
  opacity: 1;
}

.bh-newsletter form.forminator-ui.forminator-custom-form button.forminator-button-submit {
  height: 48px !important;
  min-height: 48px !important;
  width: 8.5em !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: var(--radius-300) !important;
  background: var(--color-bg-fill-brand) !important;
  color: var(--color-text-adaptive) !important;
  font-weight: 500 !important;
  font-size: 1rem !important;
  line-height: 1 !important;
  text-transform: none !important;
  cursor: pointer;
  white-space: nowrap;
  position: static !important;
}

.bh-newsletter form.forminator-ui.forminator-custom-form button.forminator-button-submit:hover {
  background: var(--color-bg-ink-blue) !important;
}

/* The invisible reCAPTCHA field must not occupy layout space in the row. */
.newsletter-form .forminator-field-captcha {
  display: none;
}

/* ---------------------------------------------------------------------------
 * WooCommerce - AJAX add-to-cart states on product cards
 * Woo toggles .loading and appends .added / .added_to_cart after a click.
 * ------------------------------------------------------------------------ */
/* The live bh-add-to-cart-shop-button plugin hides .add_to_cart_button
   (visibility:hidden, width:100%!important) and reveals it on hover of the
   Pro theme's .product_wrap_looper card - a wrapper this theme's cards do
   not have, so the button stayed invisible. Our cards show it always. */
.product-actions .add_to_cart_button {
  visibility: visible !important;
  width: auto !important;
  overflow: visible !important;
  z-index: 2 !important;
}

/* In-button spinner while an add is in flight: Woo toggles .loading on the
   card buttons; wp-extras toggles it on the PDP submit. Text goes
   transparent so the button keeps its width. */
.product-actions .add_to_cart_button.loading,
.pdp-price-row .single_add_to_cart_button.loading {
  position: relative;
  color: transparent !important;
  pointer-events: none;
}

.product-actions .add_to_cart_button.loading::after,
.pdp-price-row .single_add_to_cart_button.loading::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: bh-spin 0.6s linear infinite;
}

/* Whole remaining stock already in the cart: the gate in wp-extras
   disables the button and explains why. */
.pdp-price-row .single_add_to_cart_button.bh-stock-depleted {
  opacity: 0.5;
  cursor: not-allowed;
}

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

.product-actions .added_to_cart {
  display: none;
}

/* ---------------------------------------------------------------------------
 * Product page - WooCommerce's price and add-to-cart form
 * The design's price row hosts Woo's own output so variations, swatches, the
 * measurement calculator and quantity rules keep working. These rules lay that
 * output out as the designed row.
 * ------------------------------------------------------------------------ */
.pdp-price-row .price {
  margin: 0;
  font: inherit;
  color: inherit;
}

.pdp-price-row > .price,
.pdp-price-row .price .woocommerce-Price-amount {
  font-size: var(--pdp-price-size, 2rem);
  font-weight: 700;
  line-height: 1.1;
}

.pdp-price-row .price del {
  opacity: 0.6;
  font-size: 0.6em;
  margin-right: var(--space-200);
}

.pdp-price-row .price del .woocommerce-Price-amount {
  font-size: 1rem;
  font-weight: 400;
}

.pdp-price-row .price ins {
  text-decoration: none;
}

.pdp-price-row form.cart,
.pdp-price-row .woocommerce-variation-add-to-cart {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-300);
  align-items: center;
  margin: 0;
}

/* Let the form absorb the row's free space (the variation layout otherwise
   pins it to content width and the quantity control wraps mid-group). */
.pdp-price-row form.cart {
  flex: 1 1 auto;
  min-width: 0;
}

.pdp-price-row .woocommerce-variation-add-to-cart {
  flex-wrap: nowrap;
}

/* When WooCommerce caps the quantity (one unit left), it renders a hidden
   qty input; the injected label and stepper buttons have nothing to drive.
   wp-extras marks the form. */
form.cart.bh-qty-locked .qty_word,
form.cart.bh-qty-locked button.minus,
form.cart.bh-qty-locked button.plus,
form.cart.bh-qty-locked .quantity {
  display: none !important;
}

/* bh-stocking-message's availability line: full row under the buy controls
   in both price-row layouts (the container also renders inside the
   variation wrap on variable PDPs). */
.pdp-price-row .stock-message-system,
.pdp-price-row .woocommerce-variation-add-to-cart .stock-message-system {
  flex: 1 1 100%;
  grid-column: 1 / -1;
  order: 8;
}

.pdp-price-row .stock-message-system p {
  margin: var(--space-200) 0 0;
}

/* The design's status badge (synced in wp-extras) carries the availability
   state, so only the scarcity variant adds information - the plugin's other
   variants duplicate the badge, and its "unavailable" one literally reads
   "available". */
.pdp-price-row .stock-message-system .unavailable,
.pdp-price-row .stock-message-system .available,
.pdp-price-row .stock-message-system .instock-above {
  display: none;
}

/* Scarcity line: the plugin prints "in stock. <span>only N left!</span>" but the
   design's In-Stock badge already says in stock, so only the scarcity part
   shows (the <p> text is zeroed, the span restored) - "Only 5 Left!". */
.pdp-price-row .stock-message-system .instock-below {
  font-size: 0;
  line-height: 0;
  color: var(--color-text-base);
}

.pdp-price-row .stock-message-system .only-left {
  display: inline-block;
  font-size: var(--type-body-md-size);
  line-height: 1.4;
  font-weight: 600;
  color: var(--color-text-critical);
  text-transform: capitalize;
}

/* Inline add-to-cart feedback replaces alerts and the top-of-page banner. */
.bh-inline-notice {
  flex: 1 1 100%;
  grid-column: 1 / -1;
  order: 8;
  margin: var(--space-300) 0 0 !important;
}

/* Attribute dropdowns (attributes with many options) render as selects;
   the design's control is content-sized, not full width. */
.pdp-price-row form.cart .variations select {
  width: auto;
  max-width: 320px;
  min-height: 44px;
  padding: 0 var(--space-300);
  border: 1px solid var(--color-border-base);
  border-radius: var(--radius-300);
  background: var(--color-bg-surface);
  color: var(--color-text-base);
  font: inherit;
}

/* Keep the injected quantity pieces in their designed order regardless of
   which wrapper (simple form vs variation wrap) lays them out. */
.pdp-price-row form.cart .qty_word { order: 1; }
.pdp-price-row form.cart button.minus { order: 2; }
.pdp-price-row form.cart .quantity { order: 3; }
.pdp-price-row form.cart button.plus { order: 4; }
.pdp-price-row form.cart .single_add_to_cart_button { order: 5; }
.pdp-price-row .woocommerce-variation-add-to-cart .faux-add-to-cart { order: 5; }

.pdp-price-row .quantity {
  display: inline-flex;
  align-items: center;
}

/* The live site injects "Qty." + minus/plus buttons around Woo's quantity
   input (bh add-to-cart markup), separated from the submit by two <br>s.
   Style the pieces as one 48px control and drop the <br>s from the flex row. */
.pdp-price-row form.cart br {
  display: none;
}

.pdp-price-row .qty_word {
  margin: 0;
  font-weight: 600;
}

.pdp-price-row form.cart button.minus,
.pdp-price-row form.cart button.plus {
  width: 48px;
  min-height: 48px;
  border: 1px solid var(--color-border-base);
  border-radius: var(--radius-300);
  background: var(--color-bg-surface);
  color: var(--color-text-base);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
}

.pdp-price-row form.cart button.minus:hover,
.pdp-price-row form.cart button.plus:hover {
  border-color: var(--color-border-strong);
}

.pdp-price-row .quantity input[type="number"],
.pdp-price-row .quantity input[type="text"] {
  width: 5rem;
  min-height: 48px;
  padding: var(--space-200) var(--space-300);
  border: 1px solid var(--color-border-base);
  border-radius: var(--radius-300);
  background: var(--color-bg-surface);
  color: var(--color-text-base);
  text-align: center;
}

/* The design's Add to Cart is the primary (navy) button, not the magic
   gradient; radius matches the design's rounded rectangle. */
.pdp-price-row button.single_add_to_cart_button {
  min-height: 48px;
  padding-inline: var(--space-600);
  border: 0;
  border-radius: var(--radius-300);
  background: var(--color-bg-fill-brand);
  color: var(--color-text-adaptive);
  font-weight: 600;
  cursor: pointer;
}

.pdp-price-row button.single_add_to_cart_button:hover {
  background: var(--color-bg-ink-blue);
}

/* On variable products WooCommerce moves quantity + submit into the
   variation wrap; give the wrap (and its parent, which the form's flex
   layout would otherwise shrink) the full row so the control doesn't split. */
.pdp-price-row .single_variation_wrap,
.pdp-price-row .woocommerce-variation-add-to-cart {
  flex: 1 1 100%;
  width: 100%;
}

/* The design's buy row: price left, Add to Cart right on ONE line, with the
   variation controls (attribute pills, quantity) on their own full row
   beneath - the design has no variable-product design, so its simple
   price row is extended rather than letting Woo's stack spread across it. */
.pdp-price-row .price {
  display: flex;
  align-items: baseline;
  gap: var(--space-200);
  white-space: nowrap;
  order: 0;
}

/* Simple products: the same designed row discipline - price left, Add to
   Cart at the row's far right, and the live plugins' injected pieces (stock
   message, free-shipping note, quantity control) on their own lines below
   instead of sandwiched between price and button. display:contents lets the
   form's children participate in the price row directly. */
/* The design's row is nowrap; with the form's pieces participating it must
   wrap, or the 100%-basis lines can't break and the overflowing single line
   zeroes the button's auto margin. */
.pdp-price-row:has(> form.cart:not(.variations_form)) {
  flex-wrap: wrap;
  gap: var(--space-300) var(--space-400);
}

.pdp-price-row > form.cart:not(.variations_form) {
  display: contents;
}

/* Add to Cart sits right beside the quantity control, not at the page's
   far edge. */
.pdp-price-row > form.cart:not(.variations_form) .single_add_to_cart_button {
  order: 7;
  margin-left: var(--space-300);
}

.pdp-price-row > form.cart:not(.variations_form) .stock-message-system,
.pdp-price-row > form.cart:not(.variations_form) .free-shipping-container {
  order: 2;
  flex: 1 1 100%;
}

.pdp-price-row > form.cart:not(.variations_form) .qty_word { order: 3; }
.pdp-price-row > form.cart:not(.variations_form) button.minus { order: 4; }
.pdp-price-row > form.cart:not(.variations_form) .quantity { order: 5; }
.pdp-price-row > form.cart:not(.variations_form) button.plus { order: 6; }

/* The delivery estimate (bh-delivery-estimation) injects into form.cart just
   after the free-shipping note. The simple-product branch above puts that form
   in `display: contents`, so without an explicit order this lands at the flex
   default of 0 - i.e. beside the price - instead of on its own line. Sharing
   order 2 with the stock message and the free-shipping note leaves DOM order to
   break the tie, which is the production site's reading order: availability, then
   free shipping, then the date. */
.pdp-price-row > form.cart:not(.variations_form) .delivery-estimation-message {
  order: 2;
  flex: 1 1 100%;
}

/* Neither plugin ships any typography for its line - on the production site that
   comes from CSS added to the site after the design export, so it is not in
   this repo and the theme has to supply it. Markup and visibility rules stay
   the plugins': the free-shipping note still appears only when the product
   carries the current role's `_*_free_shipping` flag, and the date text is
   still whichever of Fastest/Estimated/Local Pickup the stock state chooses. */
/* The free-shipping note + delivery estimate are injected inside the add-to-
   cart form (before the quantity), but the design places them UNDER the
   availability badge - wp-extras.js moves them into .pdp-plugin-messages, so
   these are scoped to .pdp-info (covers both the moved home and the price-row
   fallback if the move ever doesn't run). */
.pdp-info .free-shipping-container {
  font-size: var(--type-body-md-size);
}

.pdp-info .bh-free-shipping-message {
  color: var(--color-text-critical) !important;
  font-weight: 600;
  text-transform: uppercase !important;
  letter-spacing: 0.02em;
}

/* The clickable "FREE SHIPPING" label opens the policy popup - signal it. */
.pdp-info .free-shipping-container .bh-free-shipping-message {
  cursor: pointer;
}

/* bh-same-day-shipping's "Order within: N hours M minutes for Same Day
   Shipping" countdown - moved under the delivery date like the production site.
   The plugin's own stylesheet is off in production (its .8em flex rule never
   loads), so the line is typed here to match the delivery estimate. Its
   "Shipping" popup has no opener (commented out in the plugin), so it is
   never shown. */
.pdp-info .ship-by-today-and-shipping-policy {
  display: block;
  font-size: var(--type-body-md-size);
  color: var(--color-text-base);
}

.pdp-info .bh-ship-today strong {
  font-weight: 700;
  color: var(--color-text-strong);
}

.pdp-info .ship-by-today-and-shipping-policy .shipping-modal {
  display: none;
}

/* bh-sales-per-day's social-proof line ("3 people have ordered this product
   in the last 24 hours") - only printed once 3+ units sold today/yesterday.
   Sits first under the badge, small and italic like the production site. */
.pdp-info .bh-sales-per-day-container {
  font-size: var(--type-body-sm-size);
  color: var(--color-text-subtle);
}

.pdp-info .bh-sales-per-day-container i {
  font-style: italic;
}

/* The moved lines stack directly under the availability badge. */
.pdp-plugin-messages {
  display: flex;
  flex-direction: column;
  gap: var(--space-100);
  margin-top: var(--space-300);
}

.pdp-plugin-messages:empty {
  display: none;
}

/* bh-free-shipping-message popup. The plugin makes it a position:fixed full-
   screen overlay, but .pdp-info's .fx-reveal transform trapped it in the right
   column; wp-extras.js re-parents it to <body> and toggles .bh-modal-open.
   Style it as the design's centred dialog with a reachable close (max-height
   caps it so the bottom Close button scrolls into view on short screens). */
.free-shipping-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 100002;
  padding: var(--space-500);
  background: rgba(15, 23, 42, 0.5);
}

.free-shipping-modal.bh-modal-open {
  display: flex;
  align-items: center;
  justify-content: center;
}

.free-shipping-modal .free-shipping-modal-content {
  position: relative;
  margin: 0;
  width: min(92vw, 34rem);
  max-height: 85vh;
  overflow-y: auto;
  padding: var(--space-600);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-400);
  background: var(--color-bg-surface);
  box-shadow: var(--shadow-400);
}

.free-shipping-modal .free-shipping-modal-content h3 {
  margin: 0 0 var(--space-300);
  color: var(--color-text-strong);
}

.free-shipping-modal .free-shipping-modal-content p {
  margin: 0 0 var(--space-500);
  color: var(--color-text-base);
  line-height: 1.6;
}

.free-shipping-modal .free-shipping-modal-content .close {
  position: absolute;
  top: var(--space-400);
  right: var(--space-400);
  font-size: 24px;
  line-height: 1;
  color: var(--color-text-subtle);
  cursor: pointer;
}

.free-shipping-modal .free-shipping-modal-content .close:hover {
  color: var(--color-text-strong);
}

.free-shipping-modal .free-shipping-close-btn {
  padding: var(--space-300) var(--space-600);
  border: 0;
  border-radius: var(--radius-full);
  background: var(--color-bg-fill-brand);
  color: var(--color-text-adaptive);
  font-weight: 600;
  cursor: pointer;
}

.pdp-info .estimation-message {
  font-size: var(--type-body-md-size);
  color: var(--color-text-base);
}

.pdp-info .estimation-message p {
  margin: 0;
}

/* The plugin's JS wraps the date in this id; the production site bolds it. */
.pdp-info .estimation-message #estimation-message-date {
  font-weight: 700;
  color: var(--color-text-strong);
}

/* Variable products inject the same two lines into
   .woocommerce-variation-add-to-cart, which is its own flex row holding the
   quantity stepper and the button - so they need the same full-width basis
   there, or they sit beside the stepper instead of above it. DOM order does
   the rest: availability, free shipping, then the date. */
.pdp-price-row .woocommerce-variation-add-to-cart .free-shipping-container,
.pdp-price-row .woocommerce-variation-add-to-cart .delivery-estimation-message {
  flex: 1 1 100%;
}

/* Variable products get an explicit grid: price + Add to Cart on row one,
   the whole variations form (attribute pills, quantity) on row two. Flex
   ordering could not keep the form off the first row deterministically. */
.pdp-price-row:has(form.variations_form) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-400);
}

.pdp-price-row:has(form.variations_form) .price {
  grid-column: 1;
  grid-row: 1;
}

.pdp-price-row:has(form.variations_form) form.cart {
  grid-column: 1 / -1;
  grid-row: 2;
}

/* With the fulfillment block present it takes row two; the form moves down. */
.pdp-price-row:has(form.variations_form) > .pdp-fulfillment {
  grid-column: 1 / -1;
  grid-row: 2;
}

.pdp-price-row:has(form.variations_form):has(> .pdp-fulfillment) form.cart {
  grid-row: 3;
}

/* The live add-to-cart JS swaps the real submit for a #faux-add-to-cart
   button outside the form; dress it as the design's primary button and keep
   it compact at the row's right edge. */
/* Until a variation is chosen the faux button reads as disabled, and the
   plugin's own inline hover rule (width:100%) must never stretch it. */
.pdp-price-row .faux-add-to-cart,
.pdp-price-row .faux-add-to-cart:hover {
  flex: 0 0 auto;
  width: auto !important;
  margin-left: var(--space-300);
  min-height: 48px;
  padding-inline: var(--space-600);
  border: 0 !important;
  border-radius: var(--radius-300);
  background: var(--color-bg-fill-brand) !important;
  color: var(--color-text-adaptive) !important;
  font-weight: 600;
  opacity: 0.5;
  cursor: not-allowed !important;
}

.pdp-price-row .faux-add-to-cart[disabled],
.pdp-price-row .faux-add-to-cart.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* The design shows availability only as the chip under the price row; the
   inline Woo availability text and the live stock-message system's in-stock
   note would print it twice more. (Backorder/lead-time messages keep showing.) */
.pdp-price-row p.stock,
.pdp-price-row .stock-message-system .instock-above {
  display: none;
}

.pdp-price-row button.single_add_to_cart_button.disabled,
.pdp-price-row button.single_add_to_cart_button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Variations: WooCommerce's table plus Iconic's swatches. */
.pdp-price-row .variations,
.pdp-price-row .variations tbody,
.pdp-price-row .variations tr,
.pdp-price-row .variations th,
.pdp-price-row .variations td {
  display: block;
  width: 100%;
  border: 0;
  padding: 0;
  text-align: left;
}

.pdp-price-row .variations {
  margin-bottom: var(--space-300);
}

.pdp-price-row .variations th {
  margin-bottom: var(--space-200);
  font-weight: 600;
}

.pdp-price-row .variations select {
  width: 100%;
  min-height: 48px;
  padding: var(--space-200) var(--space-400);
  border: 1px solid var(--color-border-base);
  border-radius: var(--radius-300);
  background: var(--color-bg-surface);
  color: var(--color-text-base);
}

.pdp-price-row .woocommerce-variation-price {
  margin-bottom: var(--space-300);
}

.pdp-price-row .reset_variations {
  color: var(--color-text-subtle);
  font-size: 0.875em;
}

/* Measurement Price Calculator, when a product enables it. */
.pdp-price-row .wc-measurement-price-calculator-price-table,
.pdp-price-row .wc-measurement-price-calculator input {
  max-width: 100%;
}

/* ---------------------------------------------------------------------------
 * Product page - messages injected by the bh-* plugins
 * (stock levels, free-shipping thresholds, same-day shipping, estimates)
 * ------------------------------------------------------------------------ */
.pdp-plugin-messages {
  display: flex;
  flex-direction: column;
  gap: var(--space-200);
  margin: var(--space-400) 0;
  color: var(--color-text-subtle);
}

.pdp-plugin-messages p {
  margin: 0;
}

.pdp-save-link-wrap .yith-wcwl-add-to-wishlist {
  margin: 0;
}

/* The save control's feedback keeps its text but never links to the
   wishlist page (not part of the design). */
.pdp-save-link-wrap .yith-wcwl-wishlistaddedbrowse a,
.pdp-save-link-wrap .yith-wcwl-wishlistexistsbrowse a {
  display: none !important;
}

/* The wishlist and Save-for-Later plugins print second save controls through
   the summary hook; the design has only the Save control beside the title. */
.pdp-plugin-messages .yith-wcwl-add-to-wishlist,
.pdp-plugin-messages .ywsfl_button_container {
  display: none;
}

/* ---------------------------------------------------------------------------
 * Catalog - filter controls rendered as links
 * ------------------------------------------------------------------------ */
/* Category descriptions run long on some archives; the design keeps the
   intro to two lines. */
.catalog-heading .section-intro {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

a.catalog-filter-option,
a.catalog-filter-tag,
a.catalog-link-button {
  text-decoration: none;
  cursor: pointer;
}

/* The design draws a 20px checkbox at the left of every option row (the
   design used a real <input type="checkbox">). Options here are links  - 
   navigation is the filter - so the box is decorative; an applied filter
   shows as a removable chip above, matching the design's chip row. */
a.catalog-filter-option::before {
  content: "";
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  border: 1.5px solid var(--color-border-strong);
  border-radius: var(--radius-100, 4px);
  background: var(--color-bg-surface);
}

a.catalog-filter-option:hover::before {
  border-color: var(--color-text-brand);
}

/* Checked state: an active filter's box fills in with a check, exactly like
   the design's checked <input>. */
a.catalog-filter-option--selected::before {
  content: "\2713";
  display: grid;
  place-items: center;
  border-color: var(--color-text-brand);
  background: var(--color-text-brand);
  color: var(--color-text-adaptive);
  font-size: 14px;
  line-height: 1;
}

a.catalog-page-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.catalog-price-range button {
  align-self: center;
}

/* ---------------------------------------------------------------------------
 * FiboSearch - header field styled to the design's search bar
 * The plugin prints an inline settings stylesheet with 3-class selectors
 * (white submit, dark icons), so these rules use the same specificity plus
 * !important where the inline sheet would otherwise win. The magnifier shown
 * inside the field is the plugin's own; the copy inside the submit button is
 * hidden and the button carries the design's "Search" label instead.
 * ------------------------------------------------------------------------ */
.bh-fibosearch {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.bh-fibosearch .bh-fibosearch-icon {
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  color: var(--color-text-strong); /* #181b1f */
  pointer-events: none;
}

/* The design [hidden] quirk: a display rule would otherwise beat [hidden]. */
.bh-fibosearch[hidden] {
  display: none;
}

.bh-fibosearch .dgwt-wcas-search-wrapp {
  width: 100%;
  max-width: none;
}

.bh-fibosearch .dgwt-wcas-search-wrapp .dgwt-wcas-sf-wrapp {
  display: flex;
  align-items: center;
  gap: 12px;
}

.bh-fibosearch .dgwt-wcas-search-wrapp .dgwt-wcas-sf-wrapp .dgwt-wcas-search-input {
  min-height: 48px;
  padding-left: calc(20px + 28px) !important;
  border: 1px solid var(--color-border-strong) !important;
  border-radius: var(--radius-300) !important;
  background: var(--color-bg-surface) !important;
  color: var(--color-text-base);
  font: inherit;
  box-shadow: none !important;
}

/* The plugin ships an italic, light placeholder; the design's is upright. */
.bh-fibosearch .dgwt-wcas-search-input::placeholder {
  font-style: normal !important;
  font-weight: 500;
  color: var(--color-text-placeholder);
  opacity: 1;
}

.bh-fibosearch .dgwt-wcas-search-input:focus {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 1px;
}

/* The plugin's submit becomes the design's labeled navy Search button. */
.bh-fibosearch .dgwt-wcas-search-wrapp .dgwt-wcas-sf-wrapp .dgwt-wcas-search-submit {
  position: static;
  flex: 0 0 auto;
  min-height: 48px;
  height: 48px;
  width: auto;
  margin: 0;
  padding-inline: 18px;
  border: 0;
  border-radius: var(--radius-300) !important;
  background-color: var(--color-bg-fill-brand) !important;
  color: var(--color-text-adaptive) !important;
  font-weight: 600;
  font-size: 1rem;
  text-transform: none !important;
  letter-spacing: normal;
  cursor: pointer;
}

/* Hide everything the plugin puts inside its submit; the label below is the
   design's. (The input-side magnifier is a different element and stays.) */
.bh-fibosearch .dgwt-wcas-search-submit svg,
.bh-fibosearch .dgwt-wcas-search-submit img,
.bh-fibosearch .dgwt-wcas-search-submit span {
  display: none !important;
}

.bh-fibosearch .dgwt-wcas-search-submit::before {
  display: none !important;
}

.bh-fibosearch .dgwt-wcas-search-submit::after {
  content: "Search";
  font: inherit;
  color: inherit;
}

/* Plugin extras that are not part of the design. */
.bh-fibosearch .dgwt-wcas-preloader,
.bh-fibosearch .dgwt-wcas-voice-search {
  display: none !important;
}

/* Mobile slot has no button in the design. */
.mobile-search.bh-fibosearch .dgwt-wcas-search-submit {
  display: none !important;
}

.dgwt-wcas-suggestions-wrapp {
  border: 1px solid var(--color-border-base);
  border-radius: var(--radius-400);
  background: var(--color-bg-surface);
  box-shadow: var(--shadow-400);
}

.dgwt-wcas-suggestion {
  color: var(--color-text-base);
}

.dgwt-wcas-suggestion .dgwt-wcas-st-title {
  color: var(--color-text-strong);
}

.dgwt-wcas-suggestion .dgwt-wcas-sp {
  color: var(--color-text-magic);
}

/* ---------------------------------------------------------------------------
 * Checkout - WooCommerce's fields wearing the design's co-* look
 * The form is WooCommerce's own; these rules map its markup onto the design
 * rather than replacing it.
 * ------------------------------------------------------------------------ */
.bh-checkout .col2-set,
.bh-checkout #customer_details {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-500);
}

/* Single column always: the design stacks billing full-width with the
   ship-elsewhere toggle below; a second grid column just halved every
   field against an empty right side. */

.bh-checkout .form-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-200);
  margin: 0 0 var(--space-400);
  padding: 0;
}

/* Description band with no real product image: the copy takes the full
   width instead of sitting beside an empty media column. */
.pdp-description-layout--no-media {
  display: block;
}

/* Locator hub: the CTA cards keep their home-page top margin (72px), which
   stacked with the section padding into a dead band above the cards; below
   them the rhythm was too tight against the footer. */
.locator-tools .cta-section {
  margin-top: 0;
}

.locator-tools {
  padding-bottom: var(--space-1000, 96px);
}

/* Pages shorter than the viewport showed the body gradient below the footer:
   styles.css keeps the shell at 100vh but nothing stretches to fill it. Let
   main grow so short pages end on their own background. */
.site-shell {
  display: flex;
  flex-direction: column;
}

.site-shell > main {
  flex: 1 0 auto;
}

/* Order summary: variation meta renders as a dl; the design shows
   "Label: Value" pairs inline, not four stacked lines. */
.checkout-cart-col dl.variation {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px var(--space-200);
  margin: var(--space-100) 0 0;
}

.checkout-cart-col dl.variation dt,
.checkout-cart-col dl.variation dd {
  margin: 0;
  padding: 0;
}

.checkout-cart-col dl.variation dd p {
  margin: 0;
}

/* the_content()'s wpautop leaves stray empty <p>s inside the grid; as grid
   items they claim cells and push the summary column off the first row. Pin
   both real columns and drop the strays. */
.checkout-main > p:empty {
  display: none;
}

.checkout-main > .checkout-steps-col {
  grid-column: 1;
  grid-row: 1;
}

.checkout-main > .checkout-cart-col {
  grid-column: 2;
  grid-row: 1;
}

/* The design pairs First/Last name on one row; WooCommerce marks those
   fields form-row-first / form-row-last. Everything else spans the row. */
.bh-checkout .woocommerce-billing-fields__field-wrapper,
.bh-checkout .woocommerce-shipping-fields__field-wrapper {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 var(--space-400);
}

.bh-checkout .woocommerce-billing-fields__field-wrapper .form-row,
.bh-checkout .woocommerce-shipping-fields__field-wrapper .form-row {
  grid-column: 1 / -1;
}

.bh-checkout .woocommerce-billing-fields__field-wrapper .form-row-first,
.bh-checkout .woocommerce-shipping-fields__field-wrapper .form-row-first {
  grid-column: 1;
}

.bh-checkout .woocommerce-billing-fields__field-wrapper .form-row-last,
.bh-checkout .woocommerce-shipping-fields__field-wrapper .form-row-last {
  grid-column: 2;
}

.bh-checkout label {
  font-weight: 600;
}

.bh-checkout #ship-to-different-address {
  display: flex;
  align-items: center;
  gap: var(--space-300);
  margin: 0 0 var(--space-400);
}

.bh-checkout #ship-to-different-address input[type="checkbox"] {
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--color-text-brand);
}

/* Checkbox rows (terms, create-account): something in the stack gives the
   box auto margins, centering it in the leftover label space with the text
   pushed to the far edge. Pin the row to the design's checkbox pattern. */
.bh-checkout .woocommerce-form__label-for-checkbox {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-300);
  width: 100%;
  cursor: pointer;
}

.bh-checkout .woocommerce-form__label-for-checkbox input[type="checkbox"] {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  min-height: 0;
  margin: 0;
  accent-color: var(--color-bg-fill-brand);
  cursor: pointer;
}

.bh-checkout .woocommerce-form__label-for-checkbox span {
  display: inline;
  flex: 0 1 auto;
}

/* Order summary: shipping choices render as Woo's radio list. */
.checkout-cart-col ul#shipping_method {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-200);
}

.checkout-cart-col ul#shipping_method li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-200);
  margin: 0;
}

.checkout-cart-col ul#shipping_method input.shipping_method {
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  min-height: 0;
  margin: 3px 0 0;
  accent-color: var(--color-bg-fill-brand);
  cursor: pointer;
}

.checkout-cart-col ul#shipping_method label {
  margin: 0;
  font-weight: 400;
  cursor: pointer;
}

.bh-checkout .required {
  color: var(--color-text-critical);
  text-decoration: none;
}

.bh-checkout .input-text,
.bh-checkout select,
.bh-checkout textarea {
  width: 100%;
  min-height: 48px;
  padding: var(--space-300) var(--space-400);
  border: 1px solid var(--color-border-base);
  border-radius: var(--radius-300);
  background: var(--color-bg-surface);
  color: var(--color-text-base);
  font: inherit;
}

.bh-checkout textarea {
  min-height: 7rem;
  resize: vertical;
}

.bh-checkout .input-text:focus,
.bh-checkout select:focus,
.bh-checkout textarea:focus {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 1px;
}

.bh-checkout .select2-container .select2-selection--single {
  height: 48px;
  border-color: var(--color-border-base);
  border-radius: var(--radius-300);
}

.bh-checkout h3 {
  margin: 0 0 var(--space-400);
}

/* Steps: hidden panels stay hidden even though they are display:grid/flex. */
.bh-checkout .checkout-step-panel[hidden] {
  display: none;
}

/* An expanded checkout (validation error, or no JavaScript) shows everything. */
.bh-checkout--expanded .checkout-step-panel,
.no-js .bh-checkout .checkout-step-panel {
  display: block;
}

.bh-checkout--expanded .co-panel-actions {
  display: none;
}

/* Mirrors the design's .checkout-actions: row-reverse packs the primary
   (first in DOM) on the right, Back to its left. */
.bh-checkout .co-panel-actions {
  display: flex;
  flex-direction: row-reverse;
  flex-wrap: wrap;
  gap: var(--space-400);
  align-items: center;
  margin: var(--space-500) 0;
}

/* Payment methods list. */
.bh-payment ul.payment_methods {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-300);
}

/* Each gateway renders as the design's radio card (the design's
   shipping-method-card pattern): radio | name ... icons, with the gateway's
   own box spanning a second row when selected. */
.bh-payment ul.payment_methods > li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-300) var(--space-400);
  padding: var(--space-500) var(--space-600);
  border: 2px solid var(--color-border-base);
  border-radius: var(--radius-400);
  background: var(--color-bg-surface);
  transition: border-color 160ms ease;
}

.bh-payment ul.payment_methods > li:has(> input.input-radio:checked) {
  border-color: var(--color-bg-fill-brand);
}

.bh-payment ul.payment_methods > li > input.input-radio {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--color-bg-fill-brand);
  cursor: pointer;
}

/* #payment matches the gateway's own inline label style block. */
#payment.bh-payment ul.payment_methods > li > label {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-300);
  margin: 0;
  font-weight: 600;
  cursor: pointer;
}

.bh-payment .sv-wc-payment-gateway-card-icons {
  display: flex;
  align-items: center;
  gap: 4px;
}

.bh-payment .payment_box {
  flex: 1 1 100%;
  margin: 0;
  padding: var(--space-400);
  border-radius: var(--radius-300);
  background: var(--color-bg-surface-subtle);
  color: var(--color-text-base);
}

/* Gateway "Securely Save to Account" checkbox (Authorize.Net card
   tokenization, shown to logged-in users): lay it out as an inline
   checkbox row instead of the floating box the broad field rules produce. */
.bh-payment .payment_box p.form-row:has(> input[type="checkbox"]) {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-300);
  margin: var(--space-300) 0 0;
  text-align: left;
}

/* The gateway sets inline width:auto on the checkbox and display:inline on
   the label; !important is needed to beat those element styles. */
.bh-payment .payment_box p.form-row > input[type="checkbox"] {
  flex: 0 0 auto;
  width: 18px !important;
  height: 18px !important;
  min-height: 0 !important;
  margin: 0 !important;
  accent-color: var(--color-bg-fill-brand);
}

.bh-payment .payment_box p.form-row:has(> input[type="checkbox"]) > label {
  margin: 0 !important;
  font-weight: 400;
  cursor: pointer;
}

/* The card gateway's fieldset holds only hidden inputs until its lightbox
   runs - the browser-default fieldset border rendered as a stray bar. */
.bh-payment .payment_box fieldset {
  margin: 0;
  padding: 0;
  border: 0;
}

.bh-payment .payment_box p:last-child {
  margin-bottom: 0;
}

.bh-payment .payment_box input[type="text"],
.bh-payment .payment_box input[type="tel"],
.bh-payment .payment_box select {
  width: 100%;
  min-height: 44px;
  padding: var(--space-300);
  border: 1px solid var(--color-border-base);
  border-radius: var(--radius-300);
  background: var(--color-bg-surface);
}

/* Checkout / auth header: centre "Secure Checkout" (or "Secure Sign In") on the
   page. The design lays the row out with space-between, which leaves the
   middle item off-centre whenever the two sides differ in width (the live cart
   counter, or the "New to BH-USA? Create account" link). A 3-column grid pins
   the middle cell to the true centre. MUST stay inside the desktop breakpoint  - 
   .checkout-nav-desktop is display:none at <=767px (styles.css), and an
   unscoped display:grid here overrode that (same specificity, loaded later),
   showing BOTH navs on mobile. */
@media (min-width: 768px) {
  .checkout-nav-desktop {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
  }

  .checkout-nav-desktop .checkout-logo {
    justify-self: start;
  }

  .checkout-nav-desktop .checkout-secure {
    justify-self: center;
  }

  .checkout-nav-desktop .checkout-edit-cart {
    justify-self: end;
  }
}

/* Lost-password ("Reset Password") card renders straight under the slim auth
   header; give it top room so it doesn't merge into the navbar. */
.woocommerce-ResetPassword.bh-wc-login {
  margin-top: var(--space-700);
}

/* Checkout error/success notices: WooCommerce prepends AJAX errors into the
   form and prints server notices via the before-checkout hook, both OUTSIDE
   the width-constrained .checkout-main (max-width 1360, centered) - so the
   banner went edge-to-edge full-bleed. Constrain the notice to the same
   content box so it lines up with the checkout columns instead of spanning
   the whole viewport. The inner .woocommerce-error keeps its own styling. */
.checkout-page-main .woocommerce-NoticeGroup,
.checkout-page-main .woocommerce-notices-wrapper {
  max-width: 1360px;
  margin: 0 auto;
  padding: var(--space-700) var(--space-1000) 0;
}

@media (max-width: 767px) {
  .checkout-page-main .woocommerce-NoticeGroup,
  .checkout-page-main .woocommerce-notices-wrapper {
    padding: var(--space-500) var(--space-600) 0;
  }
}

/* The login form now renders its own .co-panel card
   (woocommerce/global/form-login.php); the form wrapper must stay transparent,
   or it double-cards around that panel. */
.checkout-page-main form.woocommerce-form-login,
form.woocommerce-form-login.bh-wc-login {
  display: block;
  max-width: none;
  margin: 0 auto var(--space-600);
  padding: 0;
  border: 0;
  background: transparent;
}

/* The login form's fields ARE the design's components now - .co-panel /
   .co-input / .co-label / .button--primary (woocommerce/global/form-login.php,
   styled in styles.css). Only the row rhythm inside the card is set here; the
   remember-me row is handled by .bh-auth-remember above. */
.checkout-page-main form.woocommerce-form-login .form-row,
form.woocommerce-form-login.bh-wc-login .form-row {
  margin: 0 0 var(--space-400);
}

/* Guest order-received: WooCommerce returns a "Thank you" success notice + a
   "please log in to view this order" prompt + the Sign In card BEFORE
   thankyou.php runs, all spanning the checkout's full width. Contain the
   wrapper that holds the login form to a centred measure so the three read as
   one column. :has() keys it to the guest prompt only - the logged-in
   thank-you page (order + customer tables) has no login form and is untouched. */
.checkout-page-main .woocommerce:has(> form.woocommerce-form-login):not(:has(form.checkout)),
.checkout-page-main > .woocommerce:has(form.woocommerce-form-login):not(:has(form.checkout)) > .woocommerce {
  max-width: 40rem;
  margin-inline: auto;
  padding-top: var(--space-700);
}

/* The guest CHECKOUT also carries a login form (the "Returning customer?"
   reminder) as a direct child of the same wrapper; without the
   :not(:has(form.checkout)) guard above, the whole four-step checkout was
   squeezed into the 40rem measure for logged-out shoppers. */

.checkout-page-main .woocommerce:has(> form.woocommerce-form-login):not(:has(form.checkout)) > .woocommerce-info {
  margin-bottom: var(--space-500);
}

/* Catalog PJAX: a visible spinner over the product list while the next
   state loads, with only a light dim - the sidebar stays fully usable. */
.catalog-products.bh-catalog-busy [data-catalog-grid],
.catalog-products.bh-catalog-busy .catalog-pagination,
.catalog-products.bh-catalog-busy .catalog-heading {
  opacity: 0.6;
  pointer-events: none;
  transition: opacity 160ms ease;
}

.catalog-products.bh-catalog-busy {
  position: relative;
}

.catalog-products.bh-catalog-busy::after {
  content: "";
  position: absolute;
  top: min(34vh, 280px);
  left: 50%;
  width: 46px;
  height: 46px;
  margin-left: -23px;
  border: 4px solid rgba(36, 64, 131, 0.18);
  border-top-color: var(--color-bg-fill-brand);
  border-radius: 50%;
  animation: bh-spin 0.7s linear infinite;
  z-index: 5;
}

/* ---------------------------------------------------------------------------
 * Responsiveness repairs (mobile overflow sweep)
 * ------------------------------------------------------------------------ */

/* Newsletter band: the Forminator field inside the design's card carries an
   intrinsic ~500px width, which forces the grid column to ~644px and scrolls
   the whole page sideways on phones. Let every layer shrink. */
.newsletter-card {
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
}

.newsletter-card > * {
  min-width: 0;
  max-width: 100%;
}

.newsletter-card .bh-form-slot,
.newsletter-card .forminator-ui,
.newsletter-card .forminator-row,
.newsletter-card .forminator-col,
.newsletter-card .forminator-field {
  min-width: 0 !important;
  max-width: 100% !important;
}

.newsletter-card .forminator-field input {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

@media (max-width: 900px) {
  .newsletter-card {
    grid-template-columns: minmax(0, 1fr);
  }

  .newsletter-copy,
  .newsletter-copy h2,
  .newsletter-form {
    width: 100%;
    max-width: 100%;
  }

  .newsletter-form {
    flex-wrap: wrap;
  }

  .newsletter-card .email-signup-form-button {
    min-width: 0;
  }
}

/* Variable PDP buy row: on narrow screens the add button (real or the
   plugin's faux) may not fit beside the quantity stepper - wrap it onto its
   own full-width line instead of scrolling the page. */
.pdp-price-row .woocommerce-variation-add-to-cart {
  flex-wrap: wrap;
}

@media (max-width: 520px) {
  .pdp-price-row .woocommerce-variation-add-to-cart .single_add_to_cart_button,
  .pdp-price-row .faux-add-to-cart {
    flex: 1 1 100%;
    margin-left: 0;
    max-width: 100%;
  }
}

/* Mobile buy-box (simple products): the design's ≤767px rule turns
   .pdp-price-row into a column, and with the form's pieces participating via
   display:contents that stacked "Qty.", −, the input and + each on its own
   full-width line. Keep the row wrapping instead: price on line one, the
   quantity stepper as one compact inline group, Add to Cart full-width below. */
@media (max-width: 767px) {
  .pdp-price-row:has(> form.cart:not(.variations_form)) {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
  }

  .pdp-price-row:has(> form.cart:not(.variations_form)) > .price {
    flex: 1 1 100%;
  }

  .pdp-price-row > form.cart:not(.variations_form) .qty_word,
  .pdp-price-row > form.cart:not(.variations_form) button.minus,
  .pdp-price-row > form.cart:not(.variations_form) .quantity,
  .pdp-price-row > form.cart:not(.variations_form) button.plus {
    flex: 0 0 auto;
    width: auto;
  }

  .pdp-price-row > form.cart:not(.variations_form) .single_add_to_cart_button {
    flex: 1 1 100%;
    margin-left: 0;
  }
}

/* bh-returns search (return-products / returns-search): the plugin lays the
   form beside its intro in an unwrapped flex row and sizes inputs at 300px  - 
   off the right edge of a phone. Wrap the row and let everything shrink. */
.bh-form-slot div:has(> #transaction-number-returns-search) {
  flex-wrap: wrap;
}

.bh-form-slot #transaction-number-returns-search,
.bh-form-slot #transaction-number-returns-search > div,
.bh-form-slot #transaction-number-returns-search input,
.bh-form-slot #transaction-number-returns-search #results {
  max-width: 100%;
  min-width: 0;
}

/* Result tables (returns, warranty lookups): scroll inside their own box
   rather than widening the page. */
@media (max-width: 640px) {
  .bh-form-slot table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
  }
}

/* ---------------------------------------------------------------------------
 * Batch 5 - nav row, card media, category intro, ALL panel, WPSL locators
 * ------------------------------------------------------------------------ */

/* The category row now carries the whole menu; when it cannot fit it
   scrolls sideways (scrollbar hidden) instead of hiding entries. */
.nav-categories {
  overflow-x: auto;
  scrollbar-width: none;
  gap: clamp(12px, 1.3vw, 20px);
}

.nav-categories::-webkit-scrollbar {
  display: none;
}

.nav-categories .nav-category,
.nav-categories .all-trigger {
  flex: 0 0 auto;
}

/* Product photos are shot on white; the media area matches so cards read
   as one seamless surface. */
.product-media {
  background: var(--color-bg-surface);
}

/* Category description: full width of the products column (styles.css caps
   .section-intro at 760px), with the see-more toggle sitting at the
   bottom-right - exactly where the clamp cuts the text off. */
.catalog-heading .section-intro {
  position: relative;
  max-width: none;
}

.catalog-heading .section-intro.section-intro--expanded {
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
}

/* The toggle is a sibling placed right after the clamped paragraph (wp-extras
   .js), on its own line at every width; the in-box version collided with the
   cut-off word on phones. The clamp itself ends
   in an ellipsis. */
.bh-see-more {
  display: inline-block;
  margin: var(--space-100) 0 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-text-brand);
  font: inherit;
  font-size: var(--type-body-md-size);
  line-height: var(--type-body-md-line);
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}

/* The topbar reserved a right-hand column for the sort controls, capping
   the category description at ~2/3 width. The controls now sit on their own
   row, right-aligned (as the mobile layout already did), and the
   description spans the full products column. */
.catalog-topbar {
  grid-template-columns: minmax(0, 1fr);
}

.catalog-topbar .catalog-heading-row {
  grid-column: 1;
  grid-row: 1;
}

.catalog-topbar .catalog-toolbar-row {
  grid-column: 1;
  grid-row: 2;
  justify-self: end;
}

/* ALL panel rows are toggles - show it. */
.sidebar-item summary,
.sidebar-subitem summary {
  cursor: pointer;
}

/* ALL panel: the label is a link to the category page (the chevron/summary
   still toggles the submenu). */
.sidebar-level-one-link {
  flex: 1;
  color: inherit;
  text-decoration: none;
}

.sidebar-level-one-link:hover {
  color: var(--color-text-brand);
  text-decoration: underline;
}

/* WP Store Locator widget in the design's idiom (store + builder locator). */
.bh-wpsl .wpsl-search {
  margin: 0 0 var(--space-500);
  padding: var(--space-500);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-400);
  background: var(--color-bg-surface);
}

.bh-wpsl #wpsl-search-wrap form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-400);
}

/* #wpsl-wrap-scoped: the plugin's own ID rules set display:table and
   assorted margins, which threw every control off the shared midline. */
.bh-wpsl #wpsl-wrap .wpsl-input,
.bh-wpsl #wpsl-wrap .wpsl-select-wrap,
.bh-wpsl #wpsl-wrap #wpsl-radius {
  display: flex !important;
  flex-direction: row;
  align-items: center;
  gap: var(--space-300);
  margin: 0;
}

.bh-wpsl #wpsl-wrap .wpsl-input > div,
.bh-wpsl #wpsl-wrap .wpsl-input label,
.bh-wpsl #wpsl-wrap #wpsl-radius label {
  display: flex;
  align-items: center;
  height: auto;
  margin: 0;
}

.bh-wpsl #wpsl-wrap .wpsl-search-btn-wrap {
  display: flex;
  align-items: center;
  margin: 0;
}

.bh-wpsl #wpsl-wrap #wpsl-search-btn {
  margin: 0;
}

.bh-wpsl .wpsl-input label,
.bh-wpsl #wpsl-radius label {
  font-weight: 600;
}

.bh-wpsl #wpsl-search-input {
  min-height: 44px;
  min-width: 220px;
  max-width: 100%;
  padding: var(--space-200) var(--space-300);
  border: 1px solid var(--color-border-base);
  border-radius: var(--radius-300);
  background: var(--color-bg-surface);
  font: inherit;
}

.bh-wpsl .wpsl-dropdown {
  min-height: 44px;
  min-width: 110px;
  padding: var(--space-200) var(--space-300);
  border: 1px solid var(--color-border-base);
  border-radius: var(--radius-300);
  background: var(--color-bg-surface);
  cursor: pointer;
}

.bh-wpsl #wpsl-search-btn {
  min-height: 44px;
  padding: 0 var(--space-600);
  border: 0;
  border-radius: var(--radius-300);
  background: var(--color-bg-fill-brand);
  color: var(--color-text-adaptive);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.bh-wpsl #wpsl-result-list {
  max-height: 560px;
  overflow-y: auto;
}

.bh-wpsl #wpsl-stores li,
.bh-wpsl #wpsl-result-list li {
  margin: 0 0 var(--space-300);
  padding: var(--space-400);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-300);
  background: var(--color-bg-surface);
  list-style: none;
}

.bh-wpsl #wpsl-gmap {
  min-height: 480px;
  border-radius: var(--radius-400);
}

/* ---------------------------------------------------------------------------
 * Batch 6 - PDP description width/tables, bh-returns form styling
 * ------------------------------------------------------------------------ */

/* The design caps the description copy at 640px; here the section uses its
   full column. max-width:100% (not none) keeps it inside
   the column so wide content can't stretch it. The min-width:0 chain lets
   the grid column and its flex child shrink below their content's intrinsic
   width - without it a fixed-width table (some products carry
   <table width="1218">) blows the column out and the .pdp-description-compact
   wrapper (overflow:hidden) clips the copy on mobile. The desktop grid
   columns are widened to minmax(0,...) in styles.css so this cascade keeps
   the mobile single-column media query intact. */
.pdp-description-content {
  min-width: 0;
}

/* ---------------------------------------------------------------------------
 * PDP Policy Row - Stock / Shipping / Return
 * Three columns under the buy-box, each expanding a shared accordion panel
 * (one open at a time). New theme component (not in the design): the live
 * site rendered these as Cornerstone modals; here they follow the design's
 * inline-accordion idiom, matching the existing Read-Policy toggle.
 * ------------------------------------------------------------------------ */
.pdp-policy-box {
  margin-top: var(--space-500);
}

.pdp-policy-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-300);
}

.pdp-policy-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-100);
  padding: var(--space-400) var(--space-300);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-400);
  background: var(--color-bg-surface);
  text-align: center;
  white-space: normal;
  cursor: pointer;
  font: inherit;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.pdp-policy-col:hover {
  border-color: var(--color-border-base);
}

.pdp-policy-col.is-open {
  border-color: var(--color-text-brand);
  box-shadow: inset 0 -2px 0 var(--color-text-brand);
}

.pdp-policy-icon {
  width: 24px;
  height: 24px;
  color: var(--color-text-brand);
}

.pdp-policy-heading {
  color: var(--color-text-strong);
  font-weight: 700;
}

.pdp-policy-text {
  color: var(--color-text-subtle);
}

.pdp-policy-link {
  margin-top: var(--space-100);
  color: var(--color-text-brand);
  font-weight: 600;
}

.pdp-policy-col.is-open .pdp-policy-link {
  text-decoration: underline;
}

.pdp-policy-panel {
  margin-top: var(--space-400);
  padding: var(--space-500);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-400);
  background: var(--color-bg-surface);
}

.pdp-policy-panel p {
  margin: 0 0 var(--space-300);
  color: var(--color-text-base);
  line-height: 1.6;
}

.pdp-policy-panel p:last-child {
  margin-bottom: 0;
}

.pdp-policy-list {
  margin: 0;
  padding-left: 1.2em;
  list-style: disc;
}

.pdp-policy-list li {
  margin: 0 0 var(--space-200);
  color: var(--color-text-base);
  line-height: 1.6;
}

.pdp-policy-list li:last-child {
  margin-bottom: 0;
}

.pdp-policy-carriers {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-500);
  margin-top: var(--space-400);
  padding-top: var(--space-400);
  border-top: 1px solid var(--color-border-subtle);
}

.pdp-policy-carrier {
  height: 40px;
  width: auto;
}

/* Phones: three columns squeeze to unreadable slivers - one card per row. */
@media (max-width: 520px) {
  .pdp-policy-row {
    grid-template-columns: 1fr;
  }

  .pdp-policy-col {
    padding: var(--space-400) var(--space-300);
  }

  .pdp-policy-carriers {
    gap: var(--space-400);
  }
}

/* Product photos come in all shapes (many are square). `cover` in the 4:3
   desktop/tablet frame cropped them so they looked zoomed in; `contain`
   shows the whole photo and letterboxes it on the surface background. */
.pdp-gallery-main img {
  object-fit: contain;
}


/* The main gallery image opens a full-resolution lightbox (wp-extras.js);
   signal it. Only present when a zoom source was rendered. */
.pdp-gallery-main[data-pdp-zoom] {
  cursor: zoom-in;
}

/* The lightbox is a full-screen modal, so it must sit above the WordPress
   admin bar (z-index 99999) - otherwise the close button, which lives near
   the top edge, renders behind the bar for logged-in users. */
.pdp-lightbox {
  z-index: 100001;
}

/* Authored Specifications table (ACF `specifications` field). It is pasted
   from a WYSIWYG with hard-coded pixel widths/heights on the table and cells;
   neutralise those and give it the design's spec-table rhythm. First column is
   the label, second the value (both authored as <td>, no <th>). */
.pdp-spec-authored {
  overflow-x: auto;
}

.pdp-spec-authored table {
  width: 100% !important;
  height: auto !important;
  border-collapse: collapse;
  table-layout: auto;
}

.pdp-spec-authored td {
  width: auto !important;
  height: auto !important;
  padding: var(--space-400) 0;
  text-align: left;
  vertical-align: top;
  font-family: "Nunito Sans", sans-serif;
  font-size: 14px;
  line-height: 20px;
  border-bottom: 1px solid var(--color-border-subtle);
}

.pdp-spec-authored tr:last-child td {
  border-bottom: none;
}

.pdp-spec-authored td:first-child {
  width: 42% !important;
  color: var(--color-text-subtle);
  font-weight: 400;
  padding-right: var(--space-600);
}

.pdp-spec-authored td:last-child {
  color: var(--color-text-strong);
  font-weight: 500;
}

/* Product Overview (the short-description highlights). */
.pdp-overview ul {
  margin: 0;
  padding-left: 1.25em;
  list-style: disc;
}

.pdp-overview li {
  margin: 0 0 var(--space-200);
  color: var(--color-text-strong);
}

.pdp-overview li p {
  margin: 0;
  display: inline;
}

.pdp-overview li:last-child {
  margin-bottom: 0;
}

.pdp-description-body {
  max-width: 100%;
  min-width: 0;
  overflow-wrap: break-word;
}

/* Description content is user-authored HTML from the migrated product copy;
   keep its media inside the column (a broken/oversized image must not
   stretch the panel). */
.pdp-description-body img {
  max-width: 100%;
  height: auto;
}

/* WordPress content-alignment classes. Core normally ships these; this theme
   dequeues Woo/core content styles, so authored images that carry aligncenter
   (e.g. the freight-notice icon on the lift pages) were left flush-left. */
.pdp-description-body .aligncenter,
.content-prose .aligncenter {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.pdp-description-body .alignnone,
.content-prose .alignnone {
  display: block;
}

.pdp-description-body .alignleft,
.content-prose .alignleft {
  float: left;
  margin: 0 var(--space-400) var(--space-300) 0;
}

.pdp-description-body .alignright,
.content-prose .alignright {
  float: right;
  margin: 0 0 var(--space-300) var(--space-400);
}

/* The product headline (the title, rendered as .section-title) and the
   description's own lead heading read LEFT-aligned, like the copy beneath them
   - never centred. Scoped to headings (not <p>, not media), so a centred
   freight-notice icon (.aligncenter, or an icon wrapped in a centred <p>)
   stays centred. !important guards against any inline text-align the migrated
   or later-edited product copy may carry. */
.pdp-description-content .section-title,
.pdp-description-body h1,
.pdp-description-body h2,
.pdp-description-body h3,
.pdp-description-body h4,
.pdp-description-body h5,
.pdp-description-body h6 {
  text-align: left !important;
}

/* Product-copy tables (e.g. the gear-plate "Advanced Series" spec table):
   every column keeps breathing room and the table scrolls in place instead
   of clipping. */
.pdp-description-body table {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  margin: var(--space-400) 0;
  border-collapse: collapse;
}

.pdp-description-body table th,
.pdp-description-body table td {
  min-width: 120px;
  padding: 8px 12px;
}

/* bh-returns (and sibling plugin forms in the form slot): the plugin prints
   bare inputs with no styling - give them the design's field idiom so the
   page reads like every other form page. Forminator's own rules are more
   specific and win where they apply. */
.bh-form-slot input[type="text"],
.bh-form-slot input[type="email"],
.bh-form-slot input[type="number"],
.bh-form-slot input[type="date"],
.bh-form-slot input[type="tel"],
.bh-form-slot input[type="search"],
.bh-form-slot select {
  display: block;
  width: 100%;
  max-width: 480px;
  min-height: 44px;
  padding: var(--space-200) var(--space-300);
  /* The plugin's own <br><br> spacing already adds a blank line between
     fields; keep the margins tight so the rhythm stays compact. */
  margin: 2px 0 var(--space-200);
  border: 1px solid var(--color-border-base);
  border-radius: var(--radius-300);
  background: var(--color-bg-surface);
  font: inherit;
}

.bh-form-slot form:not(.forminator-ui) button {
  margin: var(--space-100) 0 var(--space-200);
}

.bh-form-slot input:focus-visible,
.bh-form-slot select:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 1px;
}

/* The returns page stacks two forms in one flex wrapper; give them rhythm. */
.bh-form-slot div:has(> #transaction-number-returns-search) {
  gap: var(--space-600);
}

.bh-form-slot small {
  display: block;
  margin: calc(-1 * var(--space-300)) 0 var(--space-300);
  color: var(--color-text-subtle);
}

/* Result tables (returns / warranty lookups). */
.bh-form-slot table {
  width: 100%;
  margin-top: var(--space-400);
  border-collapse: collapse;
}

.bh-form-slot table th {
  padding: 10px 12px;
  text-align: left;
  border-bottom: 2px solid var(--color-border-base);
}

.bh-form-slot table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--color-border-subtle);
}

/* Place order + terms. */
.bh-checkout .place-order {
  margin-top: var(--space-500);
}

.bh-checkout #place_order {
  min-height: 52px;
  width: 100%;
  padding-inline: var(--space-600);
  border: 0;
  border-radius: var(--radius-full);
  background: var(--color-bg-fill-magic);
  color: var(--color-text-adaptive);
  font-weight: 700;
  cursor: pointer;
}

.bh-checkout #place_order:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.bh-checkout .woocommerce-terms-and-conditions-wrapper {
  margin-bottom: var(--space-400);
}

.bh-checkout .woocommerce-form__label-for-checkbox {
  display: flex;
  gap: var(--space-300);
  align-items: flex-start;
  font-weight: 400;
}

/* Sidebar summary extras. */
.checkout-cart-col .cart-shipping-rows ul,
.bh-cart-page .cart-shipping-rows ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.checkout-cart-col .cart-item-qty {
  color: var(--color-text-subtle);
  font-weight: 400;
}

.checkout-cart-col .cart-fee .cart-total-value {
  font-weight: 600;
}

/* ---------------------------------------------------------------------------
 * Cart page (the "slim cart")
 * ------------------------------------------------------------------------ */
.bh-cart-page {
  max-width: 56rem;
  margin-inline: auto;
  padding-block: var(--space-700) var(--space-1000);
}

.bh-cart-panel {
  padding: var(--space-500);
  border: 1px solid var(--color-border-base);
  border-radius: var(--radius-400);
  background: var(--color-bg-surface);
}

.bh-cart-page .cart-qty-row .quantity input {
  width: 4.5rem;
  min-height: 40px;
  padding: var(--space-200);
  border: 1px solid var(--color-border-base);
  border-radius: var(--radius-300);
  text-align: center;
}

.bh-cart-page .cart-item-remove {
  color: var(--color-text-critical);
  text-decoration: underline;
  font-size: 0.875em;
}

.bh-cart-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-300);
  align-items: center;
  margin-top: var(--space-400);
}

.bh-cart-actions .promo-row {
  display: flex;
  gap: var(--space-200);
  flex: 1 1 18rem;
}

.bh-cart-page .cart-collaterals {
  margin-top: var(--space-700);
}

/* ---------------------------------------------------------------------------
 * Order confirmation
 * ------------------------------------------------------------------------ */
.bh-checkout-confirmation {
  max-width: 56rem;
  margin-inline: auto;
  padding-block: var(--space-700) var(--space-1000);
}

.bh-order-facts {
  display: grid;
  gap: var(--space-400);
  margin: 0;
  padding: 0;
  list-style: none;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
}

.bh-order-facts li {
  display: flex;
  flex-direction: column;
  gap: var(--space-100);
}

.bh-order-status {
  margin-top: var(--space-500);
  color: var(--color-text-subtle);
}

.bh-checkout-confirmation .woocommerce-order-details,
.bh-checkout-confirmation .woocommerce-customer-details {
  margin-top: var(--space-700);
}

/* ---------------------------------------------------------------------------
 * My Account - WooCommerce endpoints inside the dashboard chrome
 * The chrome is the design's; what each endpoint prints is WooCommerce's (or a
 * plugin's), so it is mapped onto the design system here.
 * ------------------------------------------------------------------------ */
.dashboard-content .woocommerce-MyAccount-content {
  padding: 0;
}

.dashboard-content > .woocommerce-message,
.dashboard-content > .woocommerce-error,
.dashboard-content > .woocommerce-info {
  margin-bottom: var(--space-500);
}

.dashboard-empty {
  margin: 0 0 var(--space-400);
  color: var(--color-text-subtle);
}

.dashboard-account-edit {
  display: inline-block;
  margin-top: var(--space-200);
  color: var(--color-text-brand);
  font-size: 0.875em;
}

/* Status pills: known statuses get a tint, anything custom keeps the base
   pill so new order statuses never render unstyled. */
.dashboard-status-pill--completed span {
  color: var(--color-text-success);
}

.dashboard-status-pill--processing span,
.dashboard-status-pill--order-received span,
.dashboard-status-pill--preparing-to-ship span {
  color: var(--color-text-info);
}

.dashboard-status-pill--on-hold span,
.dashboard-status-pill--approval-needed span,
.dashboard-status-pill--paused span {
  color: var(--color-text-warning);
}

.dashboard-status-pill--cancelled span,
.dashboard-status-pill--failed span,
.dashboard-status-pill--payment-rejected span,
.dashboard-status-pill--refunded span {
  color: var(--color-text-critical);
}

/* Account forms (details, addresses, login, lost password). */
.dashboard-content form .form-row,
.woocommerce-account form .form-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-200);
  margin: 0 0 var(--space-400);
}

.dashboard-content .woocommerce-Input,
.dashboard-content .input-text,
.dashboard-content select,
.woocommerce-account .woocommerce-Input,
.woocommerce-account .input-text,
.woocommerce-account select {
  width: 100%;
  min-height: 48px;
  padding: var(--space-300) var(--space-400);
  border: 1px solid var(--color-border-base);
  border-radius: var(--radius-300);
  background: var(--color-bg-surface);
  color: var(--color-text-base);
  font: inherit;
}

.dashboard-content .woocommerce-Button,
.dashboard-content button[type="submit"],
.woocommerce-account .woocommerce-Button,
.woocommerce-account button[type="submit"] {
  min-height: 48px;
  padding-inline: var(--space-600);
  border: 0;
  border-radius: var(--radius-full);
  background: var(--color-bg-fill-brand);
  color: var(--color-text-adaptive);
  font-weight: 600;
  cursor: pointer;
}

.dashboard-content fieldset {
  margin: var(--space-500) 0;
  padding: var(--space-500);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-400);
}

/* select2 - the widget WooCommerce swaps in for the Country / State selects
   (edit address, checkout). It replaces the native <select> with its own
   markup, so the account `select` rule above never reaches it; these map the
   widget's box onto the design's input, and its results panel (appended to
   <body>, so not scopable to a container) onto the design's surface. select2
   is loaded by the plugin, not the theme. */
.select2-container .select2-selection--single {
  display: flex;
  align-items: center;
  height: 48px;
  padding: 0 var(--space-400);
  border: 1px solid var(--color-border-base);
  border-radius: var(--radius-300);
  background: var(--color-bg-surface);
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  padding: 0 var(--space-500) 0 0;
  color: var(--color-text-base);
  font: inherit;
  line-height: 1.4;
}

.select2-container--default .select2-selection--single .select2-selection__placeholder {
  color: var(--color-text-subtle);
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 46px;
  right: var(--space-300);
}

.select2-container--open .select2-selection--single,
.select2-container--focus .select2-selection--single {
  border-color: var(--color-border-focus);
}

.select2-dropdown {
  border: 1px solid var(--color-border-base);
  border-radius: var(--radius-300);
  background: var(--color-bg-surface);
  box-shadow: var(--shadow-400);
  overflow: hidden;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
  min-height: 40px;
  padding: var(--space-200) var(--space-300);
  border: 1px solid var(--color-border-base);
  border-radius: var(--radius-200);
  font: inherit;
}

.select2-container--default .select2-results__option {
  padding: var(--space-300) var(--space-400);
  color: var(--color-text-base);
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background: var(--color-bg-fill-brand);
  color: var(--color-text-adaptive);
}

.select2-container--default .select2-results__option[aria-selected="true"] {
  background: var(--color-bg-surface-subtle);
  color: var(--color-text-strong);
}

/* Addresses, payment methods, downloads and order details tables. */
.dashboard-content .woocommerce-Addresses {
  display: grid;
  gap: var(--space-500);
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}

/* Every account table EXCEPT the designed dashboard orders table
   (.dashboard-table): WooCommerce's own (order details, downloads) and the
   classless / inline-styled ones the store plugins print - returns
   (bh-returns), outstanding orders (bh-net-30), and registered products +
   claimed warranties (bh-warranties). The theme's my-account.php renders
   endpoint content straight into .dashboard-content with NO
   .woocommerce-MyAccount-content wrapper, so these key on the content column,
   not that (absent) element. (bh-warranties / bh-net-30 pin font-size with an
   inline !important that external CSS cannot override, so the cells are
   spaced and bordered but keep the plugin's text size.) */
.dashboard-content table:not(.dashboard-table) {
  width: 100%;
  margin: 0 0 var(--space-500);
  border-collapse: collapse;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-400);
  overflow: hidden;
}

.dashboard-content table:not(.dashboard-table) th,
.dashboard-content table:not(.dashboard-table) td {
  padding: var(--space-300) var(--space-400);
  border-bottom: 1px solid var(--color-border-subtle);
  text-align: left;
  vertical-align: middle;
}

.dashboard-content table:not(.dashboard-table) th {
  background: var(--color-bg-fill-strong);
  color: var(--color-text-strong);
  font-weight: 600;
}

.dashboard-content table:not(.dashboard-table) tr:last-child > td,
.dashboard-content table:not(.dashboard-table) tr:last-child > th {
  border-bottom: 0;
}

/* Action buttons the account endpoints print with a bare `.button` or an
   <input type="submit"> (no design modifier - the designed orders table uses
   `.button--secondary/--small`, excluded here): top-of-list CTAs (Register a
   Product, Start a Warranty, Start Return) read as filled pills; in-cell row
   actions (View, Register, Claim Warranty, View Return) as compact outline
   pills. bh-returns prints its buttons as <input type=submit>, bh-warranties
   as <button class="button">, so both element shapes are matched. */
.dashboard-content a.button:not([class*="--"]),
.dashboard-content button.button:not([class*="--"]),
.dashboard-content input[type="submit"]:not([class*="--"]),
.dashboard-content input[type="button"]:not([class*="--"]) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 var(--space-500);
  border: 0;
  border-radius: var(--radius-full);
  background: var(--color-bg-fill-brand);
  color: var(--color-text-adaptive);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: filter 160ms ease;
}

.dashboard-content a.button:not([class*="--"]):hover,
.dashboard-content button.button:not([class*="--"]):hover,
.dashboard-content input[type="submit"]:not([class*="--"]):hover,
.dashboard-content input[type="button"]:not([class*="--"]):hover {
  filter: brightness(1.06);
  color: var(--color-text-adaptive);
}

.dashboard-content table:not(.dashboard-table) td .button,
.dashboard-content table:not(.dashboard-table) td button,
.dashboard-content table:not(.dashboard-table) td input[type="submit"],
.dashboard-content table:not(.dashboard-table) td input[type="button"] {
  min-height: 32px;
  padding: 0 var(--space-300);
  border: 1px solid var(--color-border-base);
  border-radius: var(--radius-full);
  background: var(--color-bg-surface);
  color: var(--color-text-brand);
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
}

.dashboard-content table:not(.dashboard-table) td .button:hover,
.dashboard-content table:not(.dashboard-table) td button:hover,
.dashboard-content table:not(.dashboard-table) td input[type="submit"]:hover,
.dashboard-content table:not(.dashboard-table) td input[type="button"]:hover {
  border-color: var(--color-text-brand);
  filter: none;
}

/* WooCommerce prints its order-intro highlights ("Order #X was placed on Y and
   is currently Z") in a yellow <mark>; neutralise it to the design's emphasis. */
.dashboard-content mark,
.bh-checkout-confirmation mark {
  background: transparent;
  color: var(--color-text-strong);
  font-weight: 600;
}

/* Addresses endpoint (my-address.php): card each block and turn the bare
   "Edit" title link into a pill button. */
.dashboard-content .woocommerce-Address {
  padding: var(--space-500);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-400);
  background: var(--color-bg-surface);
}

.dashboard-content .woocommerce-Address-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-400);
  margin-bottom: var(--space-300);
}

.dashboard-content .woocommerce-Address-title h3 {
  margin: 0;
}

.dashboard-content .woocommerce-Address-title .edit {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 var(--space-400);
  border: 1px solid var(--color-border-base);
  border-radius: var(--radius-full);
  color: var(--color-text-brand);
  font-size: 0.875em;
  font-weight: 600;
  text-decoration: none;
  transition: border-color 160ms ease;
}

.dashboard-content .woocommerce-Address-title .edit:hover {
  border-color: var(--color-text-brand);
}

.dashboard-content .woocommerce-Address address {
  font-style: normal;
  color: var(--color-text-base);
  line-height: 1.6;
}

/* View order (account endpoint): WooCommerce's default order-details.php +
   order-details-customer.php. The totals table is handled by the account-table
   rules above; here the section headings get the account rhythm and the
   billing / shipping blocks become a carded two-up. */
.dashboard-content .woocommerce-order-details,
.dashboard-content .woocommerce-customer-details {
  margin-bottom: var(--space-600);
}

.dashboard-content .woocommerce-order-details__title,
.dashboard-content .woocommerce-column__title {
  margin: 0 0 var(--space-400);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--color-text-strong);
}

.dashboard-content .woocommerce-customer-details .woocommerce-columns,
.dashboard-content .woocommerce-customer-details .col2-set {
  display: grid;
  gap: var(--space-500);
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  margin: 0;
}

.dashboard-content .woocommerce-customer-details .woocommerce-column {
  margin: 0;
}

.dashboard-content .woocommerce-customer-details address {
  padding: var(--space-500);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-400);
  background: var(--color-bg-surface);
  font-style: normal;
  line-height: 1.6;
  color: var(--color-text-base);
}

/* Keep the orders pager vertically centred. */
.dashboard-content .catalog-pagination {
  align-items: center;
}

/* Plugin endpoint panes (Invoices, Credit Memos, warranty tabs) print bare
   headings/text straight into the content column (the plugin wraps some in a
   single <div>). The designed dashboard nests its own headings inside classed
   <header>/<section> wrappers, so scoping to direct children and one <div>
   deep styles the plugin panes without touching the dashboard root. */
.dashboard-content > h1,
.dashboard-content > h2,
.dashboard-content > h3,
.dashboard-content > div > h1,
.dashboard-content > div > h2,
.dashboard-content > div > h3 {
  margin: 0 0 var(--space-300);
}

.dashboard-content > p,
.dashboard-content > div > p {
  margin: 0 0 var(--space-400);
  color: var(--color-text-base);
}

/* ---------------------------------------------------------------------------
 * bh-warranties - standalone register / claim / view forms
 * The plugin (inactive locally - it needs the CSD backend) prints raw <form>s
 * on /register-product/, /warranty-form/ and /warranty-view/. It has no page
 * wrapper of its own, so these map its plugin-specific classes (.form-customer-
 * info, .warranties-button, #bh-warranty-form, ...) onto the design's field +
 * button idiom. Keyed on those classes, not a page container, so they hold
 * whichever page template each slug uses. This markup is printed by the
 * plugin, not the theme.
 *
 * NB: display is never set here. scripts.js reveals rows as the user advances
 * (#product-selected, #purchase-place-selected, .hidden, #warranties-submit-
 * button, .not-register); a display override would break that reveal - so only
 * appearance is set, and box height comes from padding, not min-height+flex.
 * ------------------------------------------------------------------------ */
.form-customer-info label {
  display: block;
  margin: var(--space-400) 0 var(--space-100);
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--color-text-strong);
}

.form-customer-info input:not([type="checkbox"]):not([type="radio"]),
.form-customer-info select,
.form-customer-info textarea {
  width: 100%;
  max-width: 40rem;
  margin: 0;
  padding: var(--space-300) var(--space-400);
  border: 1px solid var(--color-border-base);
  border-radius: var(--radius-300);
  background: var(--color-bg-surface);
  color: var(--color-text-base);
  font: inherit;
  line-height: 1.4;
}

.form-customer-info textarea {
  min-height: 120px;
  resize: vertical;
}

.form-customer-info input:disabled,
.form-customer-info select:disabled,
.form-customer-info textarea:disabled {
  background: var(--color-bg-surface-subtle);
  color: var(--color-text-subtle);
  cursor: not-allowed;
}

.form-customer-info input[type="checkbox"],
.form-customer-info input[type="radio"] {
  width: auto;
  margin-right: var(--space-200);
  vertical-align: middle;
}

/* Claim-form terms checkboxes: the design's consent row - brand-coloured
   box beside its text. The row layout lives in the plugin's styles.css. */
#terms-and-conditions .warranty-terms-option {
  gap: var(--space-300);
  margin: 0 0 var(--space-400);
  color: var(--color-text-base);
  font-size: 0.9375rem;
  line-height: 1.5;
}

#terms-and-conditions .warranty-terms-option input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 4px 0 0;
  accent-color: var(--color-bg-fill-brand);
}

#terms-and-conditions .warranty-terms-option a {
  color: var(--color-text-brand);
  font-weight: 600;
}

/* Primary submit / navigation buttons (Submit, Return to Warranties, Get
   Serial Number, Login/Register). Appearance only - never display. */
.register-product-button,
.warranties-button,
#return-to-warranties .button {
  padding: var(--space-300) var(--space-600);
  border: 0;
  border-radius: var(--radius-full);
  background: var(--color-bg-fill-brand);
  color: var(--color-text-adaptive);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.4;
  text-decoration: none;
  cursor: pointer;
  transition: filter 160ms ease;
}

.register-product-button:hover,
.warranties-button:hover,
#return-to-warranties .button:hover {
  filter: brightness(1.06);
  color: var(--color-text-adaptive);
}

/* Purchase-place toggle (BH-USA / Third Party): outline pills. */
#purchase-place-select .x-btn {
  display: inline-block;
  margin-right: var(--space-300);
  padding: var(--space-300) var(--space-500);
  border: 1px solid var(--color-border-base);
  border-radius: var(--radius-full);
  color: var(--color-text-brand);
  font-weight: 600;
  cursor: pointer;
}

/* Proof-of-purchase / PDF download links and the print / back links the view
   page prints as bare bold anchors. */
.warranty_proof_of_purchase a,
.warranty_pdf_form a,
a.hideforprint {
  display: inline-block;
  margin: var(--space-300) 0;
  color: var(--color-text-brand);
  font-weight: 600;
  text-decoration: none;
}

.warranty_proof_of_purchase a:hover,
.warranty_pdf_form a:hover,
a.hideforprint:hover {
  text-decoration: underline;
}

/* Warranty view prints a read-only "Notes from BH USA" textarea outside
   .form-customer-info; give it the same read-only field treatment so it does
   not render as a tiny bare box. */
.content-prose textarea[disabled],
.content-prose textarea#customer_notes {
  display: block;
  width: 100%;
  max-width: 40rem;
  min-height: 96px;
  margin: var(--space-100) 0 var(--space-400);
  padding: var(--space-300) var(--space-400);
  border: 1px solid var(--color-border-base);
  border-radius: var(--radius-300);
  background: var(--color-bg-surface-subtle);
  color: var(--color-text-subtle);
  font: inherit;
}

/* ---------------------------------------------------------------------------
 * Form pages - Forminator, order tracking and the bh-* return/warranty flows
 * The page layout is the design's; what fills the slot belongs to a plugin, so
 * it is mapped onto the design system here rather than rebuilt.
 * ------------------------------------------------------------------------ */
.bh-form-page {
  padding-block: var(--space-700) var(--space-1000);
}

.bh-form-page .bh-form-intro {
  max-width: 60ch;
  margin-bottom: var(--space-600);
}

.bh-form-panel {
  max-width: 46rem;
}

.bh-form-page .bh-form-panel {
  margin-inline: auto;
}

.bh-form-unavailable {
  margin: 0;
}

/* Auth pages. */
.auth-main {
  padding-block: var(--space-800) var(--space-1000);
}

/* .auth-shell / .auth-tabs / .auth-tab / .auth-panel are the design's own
   components (styles.css) - no overrides here. */

/* The design [hidden] quirk: components with an explicit display rule
   (dashboard-note is flex) need the guard or the attribute loses. */
.dashboard-note[hidden],
.co-panel-subtext[hidden],
.auth-footer-link[hidden] {
  display: none !important;
}

.auth-footer-link {
  margin-top: var(--space-400);
  color: var(--color-text-subtle);
}

.auth-footer-link a {
  color: var(--color-text-brand);
}

.bh-login-context {
  margin-bottom: var(--space-400);
}

/* Forminator forms inside a form panel. */
.bh-form-slot .forminator-ui.forminator-custom-form {
  margin: 0;
}

.bh-form-slot .forminator-row {
  margin-bottom: var(--space-400);
}

.bh-form-slot .forminator-label {
  display: block;
  margin-bottom: var(--space-200);
  font-weight: 600;
  color: var(--color-text-base);
}

.bh-form-slot .forminator-button-submit {
  min-height: 48px;
  padding-inline: var(--space-600);
  border: 0;
  border-radius: var(--radius-300);
  background: var(--color-bg-fill-brand);
  color: var(--color-text-adaptive);
  font-weight: 600;
  cursor: pointer;
}

.bh-form-slot .forminator-button-submit:hover {
  background: var(--color-bg-ink-blue);
}

.bh-form-slot .forminator-response-message {
  margin-bottom: var(--space-400);
  padding: var(--space-400);
  border-radius: var(--radius-400);
  background: var(--color-bg-fill-info-subtle);
}

.bh-form-slot .forminator-response-message.forminator-error {
  background: var(--color-bg-fill-critical-soft);
  color: var(--color-text-critical);
}

.bh-form-slot .forminator-checkbox,
.bh-form-slot .forminator-radio {
  display: inline-flex;
  gap: var(--space-200);
  align-items: center;
}

/* Forminator prints an empty duplicate wrapper (<div class="forminator-ui
   ..."><br/></div>) before every real <form>; it adds a phantom line. */
.bh-form-slot > div.forminator-ui.forminator-custom-form {
  display: none !important;
}

/* Auth pages: the live login/register forms carry their own big centred
   heading (an HTML field) that duplicates the panel heading, and an
   invisible reCAPTCHA row that must not occupy layout. Geometry rules carry
   four classes + !important to out-rank each form's generated settings
   stylesheet (see the newsletter note above). */
.bh-login-form form.forminator-ui.forminator-custom-form .forminator-field-html h3,
.bh-signup-form form.forminator-ui.forminator-custom-form .forminator-field-html h3 {
  display: none !important;
}

.bh-login-form form.forminator-ui.forminator-custom-form .forminator-row:has(.recaptcha-invisible),
.bh-signup-form form.forminator-ui.forminator-custom-form .forminator-row:has(.recaptcha-invisible) {
  display: none !important;
}

.bh-form-slot form.forminator-ui.forminator-custom-form input.forminator-input {
  width: 100% !important;
  min-height: 48px !important;
  padding: 0 var(--space-400) !important;
  border: 1px solid var(--color-border-strong) !important;
  border-radius: var(--radius-300) !important;
  background: var(--color-bg-surface) !important;
  color: var(--color-text-base) !important;
  font: inherit !important;
}

.bh-form-slot form.forminator-ui.forminator-custom-form textarea.forminator-textarea {
  width: 100% !important;
  padding: var(--space-300) var(--space-400) !important;
  border: 1px solid var(--color-border-strong) !important;
  border-radius: var(--radius-300) !important;
  background: var(--color-bg-surface) !important;
  color: var(--color-text-base) !important;
  font: inherit !important;
}

/* The design's regular-width primary submit, for every form slot (login and
   signup override the width to full in their own rules). */
.bh-form-slot form.forminator-ui.forminator-custom-form .forminator-button-submit {
  min-height: 48px !important;
  padding: 0 var(--space-600) !important;
  border: 0 !important;
  border-radius: var(--radius-300) !important;
  background: var(--color-bg-fill-brand) !important;
  color: var(--color-text-adaptive) !important;
  font-weight: 600 !important;
  text-transform: none !important;
}

.bh-form-slot form.forminator-ui.forminator-custom-form .forminator-row:has(.recaptcha-invisible) {
  display: none !important;
}

.bh-login-form form.forminator-ui.forminator-custom-form .forminator-button-submit,
.bh-signup-form form.forminator-ui.forminator-custom-form .forminator-button-submit {
  width: 100% !important;
  min-height: 48px !important;
  padding: 0 var(--space-600) !important;
  border: 0 !important;
  border-radius: var(--radius-300) !important;
  background: var(--color-bg-fill-brand) !important;
  color: var(--color-text-adaptive) !important;
  font-weight: 600 !important;
  text-transform: none !important;
}

/* The design puts "Forgot password?" right-aligned ON THE LABEL ROW. */
.bh-login-form .forminator-field-password {
  position: relative;
}

.bh-login-form .forminator-field-password p {
  position: absolute;
  top: 0;
  right: 0;
  margin: 0 !important;
  text-align: right;
}

.bh-login-form .forminator-field-password p a {
  color: var(--color-text-brand);
}

/* Wholesale application stepper: hidden rows must stay hidden regardless of
   Forminator's own display rules, and the injected nav needs panel spacing. */
.bh-wholesale-form .forminator-row[hidden] {
  display: none !important;
}

.bh-wholesale-form .bh-wstep-actions {
  display: flex;
  gap: var(--space-300);
  margin-top: var(--space-500);
}

.bh-wholesale-form .bh-wstep-actions[hidden] {
  display: none !important;
}

.bh-wholesale-form .bh-wstep-actions .button[hidden] {
  display: none !important;
}

/* Password visibility toggle - wp-extras injects the button into every
   password field (Forminator, Woo checkout/account/reset, the signup
   form); styled as the design's .auth-password-toggle. Woo's own empty
   toggle button is removed by the script and hidden here as a backstop. */
.bh-pw-wrap {
  position: relative;
  display: block;
  width: 100%;
}

.bh-pw-wrap input {
  padding-right: 52px !important;
}

.bh-pw-toggle {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px !important;
  height: 36px !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: var(--radius-200);
  background: transparent !important;
  color: var(--color-icon-subtle) !important;
  box-shadow: none !important;
  cursor: pointer;
  transition: color 160ms ease, background-color 160ms ease;
}

.bh-pw-toggle:hover,
.bh-pw-toggle:focus-visible {
  color: var(--color-text-brand) !important;
  background: var(--overlay-brand-8) !important;
}

.bh-pw-toggle:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 1px;
}

.bh-pw-toggle .icon-svg {
  width: 20px;
  height: 20px;
}

.show-password-input {
  display: none !important;
}

/* Woo-native registration form on the signup page, in the design's field
   idiom (labels above 48px bordered inputs, full-width navy submit). */
.bh-register-form .bh-auth-field {
  margin: 0 0 var(--space-400);
}

.bh-register-form .bh-auth-field label {
  display: block;
  margin-bottom: var(--space-200);
  font-weight: 600;
  color: var(--color-text-base);
}

.bh-register-form .bh-auth-field .input-text {
  width: 100%;
  min-height: 48px;
  padding: 0 var(--space-400);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-300);
  background: var(--color-bg-surface);
  color: var(--color-text-base);
  font: inherit;
}

.bh-register-form .bh-auth-submit {
  width: 100%;
  min-height: 48px;
  padding-inline: var(--space-600);
  border: 0;
  border-radius: var(--radius-300);
  background: var(--color-bg-fill-brand);
  color: var(--color-text-adaptive);
  font-weight: 600;
  cursor: pointer;
}

.bh-register-form .bh-auth-submit:hover {
  background: var(--color-bg-ink-blue);
}

/* WooCommerce order tracking. */
.bh-form-slot .track_order .form-row,
.bh-form-slot form.track_order p {
  display: flex;
  flex-direction: column;
  gap: var(--space-200);
  margin-bottom: var(--space-400);
}

.bh-form-slot .track_order input[type="text"],
.bh-form-slot .track_order input[type="email"] {
  width: 100%;
  min-height: 48px;
  padding: var(--space-300) var(--space-400);
  border: 1px solid var(--color-border-base);
  border-radius: var(--radius-300);
  background: var(--color-bg-surface);
}

.bh-form-slot .track_order button {
  min-height: 48px;
  padding-inline: var(--space-600);
  border: 0;
  border-radius: var(--radius-full);
  background: var(--color-bg-fill-magic);
  color: var(--color-text-adaptive);
  font-weight: 600;
  cursor: pointer;
}

/* Returns and warranty flows (bh-returns-system, bh-warranties). */
.bh-form-slot table {
  width: 100%;
  border-collapse: collapse;
}

.bh-form-slot table th,
.bh-form-slot table td {
  padding: var(--space-300) var(--space-400);
  border-bottom: 1px solid var(--color-border-subtle);
  text-align: left;
}

.bh-form-slot select,
.bh-form-slot input[type="text"],
.bh-form-slot input[type="email"],
.bh-form-slot input[type="number"],
.bh-form-slot input[type="date"],
.bh-form-slot textarea {
  width: 100%;
  min-height: 48px;
  padding: var(--space-300) var(--space-400);
  border: 1px solid var(--color-border-base);
  border-radius: var(--radius-300);
  background: var(--color-bg-surface);
  color: var(--color-text-base);
  font: inherit;
}

.bh-form-slot button:not(.forminator-button):not(.auth-password-toggle):not(.button):not(.bh-pw-toggle),
.bh-form-slot input[type="submit"] {
  min-height: 48px;
  padding-inline: var(--space-600);
  border: 0;
  border-radius: var(--radius-full);
  background: var(--color-bg-fill-brand);
  color: var(--color-text-adaptive);
  font-weight: 600;
  cursor: pointer;
}

/* ---------------------------------------------------------------------------
 * WP Job Manager - listings inside the careers design
 * ------------------------------------------------------------------------ */
.job_listings,
.job_listings ul.job_listings {
  margin: 0;
  padding: 0;
  list-style: none;
}

.job_listings li.job_listing a {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-300);
  align-items: center;
  justify-content: space-between;
  padding: var(--space-400);
  border: 1px solid var(--color-border-base);
  border-radius: var(--radius-400);
  background: var(--color-bg-surface);
  color: var(--color-text-base);
  text-decoration: none;
}

.job_listings li.job_listing .position h3 {
  margin: 0;
}

.job_listings .location,
.job_listings .job-type,
.job_listings .meta {
  color: var(--color-text-subtle);
  font-size: 0.9em;
  list-style: none;
}

.single_job_listing .application {
  margin-top: var(--space-600);
  padding: var(--space-500);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-400);
  background: var(--color-bg-surface-subtle);
}

.single_job_listing .application .application_button {
  min-height: 48px;
  padding-inline: var(--space-600);
  border: 0;
  border-radius: var(--radius-full);
  background: var(--color-bg-fill-magic);
  color: var(--color-text-adaptive);
  font-weight: 600;
  cursor: pointer;
}

/* ---------------------------------------------------------------------------
 * WP Store Locator - the plugin owns map, search and results
 * ------------------------------------------------------------------------ */
#wpsl-wrap {
  margin: 0;
  max-width: none;
}

#wpsl-search-wrap input[type="text"],
#wpsl-search-wrap select {
  min-height: 48px;
  padding: var(--space-300) var(--space-400);
  border: 1px solid var(--color-border-base);
  border-radius: var(--radius-300);
  background: var(--color-bg-surface);
  color: var(--color-text-base);
  font: inherit;
}

#wpsl-search-btn,
#wpsl-search-wrap button {
  min-height: 48px;
  padding-inline: var(--space-600);
  border: 0;
  border-radius: var(--radius-full);
  background: var(--color-bg-fill-brand);
  color: var(--color-text-adaptive);
  font-weight: 600;
  cursor: pointer;
}

#wpsl-gmap,
#wpsl-result-list {
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-400);
}

#wpsl-stores li {
  padding: var(--space-400);
  border-bottom: 1px solid var(--color-border-subtle);
}

/* ---------------------------------------------------------------------------
 * Brands grid - cards without a supplied logo stay legible
 * ------------------------------------------------------------------------ */
.brand-card:not(:has(img)) .brand-card-name {
  font-weight: 600;
}

.brand-card img {
  max-width: 100%;
  height: auto;
}

/* ---------------------------------------------------------------------------
 * Footer bottom links - menu-driven anchors get the design's spacing + dots
 * ------------------------------------------------------------------------ */
.footer-bottom-links {
  display: flex;
  align-items: center;
  gap: var(--space-300);
}

.footer-bottom-links a + a::before {
  content: "\00b7";
  margin-right: var(--space-300);
  color: var(--color-text-subtle);
}

/* ---------------------------------------------------------------------------
 * WordPress core pagination (blog index) - the design's pager buttons.
 * the_posts_pagination() prints nav.pagination > .nav-links > .page-numbers,
 * which nothing in the design styles.
 * ------------------------------------------------------------------------ */
.navigation.pagination {
  margin-top: var(--space-700);
}

.navigation.pagination .nav-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-200);
}

.navigation.pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 var(--space-300);
  border: 1px solid var(--color-border-base);
  border-radius: var(--radius-300);
  background: var(--color-bg-surface);
  color: var(--color-text-base);
  font-weight: 600;
  text-decoration: none;
}

.navigation.pagination a.page-numbers:hover {
  border-color: var(--color-border-strong);
  color: var(--color-text-strong);
}

.navigation.pagination .page-numbers.current {
  border-color: var(--color-bg-fill-brand);
  background: var(--color-bg-fill-brand);
  color: var(--color-text-adaptive);
}

.navigation.pagination .page-numbers.dots {
  border: 0;
  background: none;
  min-width: auto;
}

/* ---------------------------------------------------------------------------
 * WordPress core output
 * ------------------------------------------------------------------------ */
.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  white-space: nowrap;
}

.admin-bar .site-header {
  top: 32px;
}

@media screen and (max-width: 782px) {
  .admin-bar .site-header {
    top: 46px;
  }
}

/* ---------------------------------------------------------------------------
 * Refinements: footer social icons, product cards, cart pane,
 * locator, reviews sort, newsletter on mobile, hero, Our Company hero,
 * checkout stepper. (Heading centring across the site was the bh-warranties
 * stylesheet leaking a global `h2` rule - contained in inc/enqueue.php.)
 * ------------------------------------------------------------------------ */

/* Footer social icons: five 24-box SVGs, but the Facebook and YouTube glyphs
   don't fill their box, so they rendered visibly smaller and lower than
   Instagram, X and LinkedIn. Centre every icon in the same box and give those
   two a touch of optical scale so the row reads as one size. */
.footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.footer-social svg {
  display: block;
  width: 22px;
  height: 22px;
}

.footer-social a:nth-child(1) svg {
  transform: scale(1.12);
}

.footer-social a:nth-child(2) svg {
  transform: scale(1.18);
}

/* Product cards on phones: the two actions stack, and Add to Cart must span
   the card like Details does (it was sitting at content width, centred).
   Desktop keeps the design's side-by-side pair. */
@media (max-width: 767px) {
  /* The design stacks the actions in a column here; keep that (a 100%
     flex-basis in a column is HEIGHT, which stretched Details and wrapped
     Add to Cart into a sliver) and simply let each button fill the width. */
  .product-actions {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
  }

  .product-actions .button,
  .product-actions .add_to_cart_button {
    flex: 0 0 auto;
    width: 100%;
    max-width: none;
  }
}

/* Cart pane: Proceed to Checkout is inert while the cart is empty (script.js
   renders .cart-empty in that state; wp-extras.js also blocks the click, so
   an empty cart never lands on the checkout -> home redirect). */
.minicart-overlay:has(.cart-empty) .button--primary[href],
.mobile-minicart-overlay:has(.cart-empty) .button--primary[href] {
  opacity: 0.5;
  pointer-events: none;
}

/* Locator: both card buttons share one width. */
.locator-tools .cta-card .button {
  min-width: 16rem;
  justify-content: center;
  text-align: center;
}

/* Reviews / guides sort: a standalone .catalog-sort (outside the catalog
   toolbar) reads as a real field at every width, and its decorative chevron
   must not sit between the finger and the <select> - that is what stopped
   the picker opening on mobile. */
.reviews-toolbar .catalog-sort,
.guides-toolbar .catalog-sort {
  display: inline-flex;
  width: auto;
  border: 1px solid var(--color-border-base);
  border-radius: var(--radius-300);
  background: var(--color-bg-surface);
  box-shadow: var(--shadow-100);
  overflow: hidden;
}

.catalog-sort::after {
  pointer-events: none;
}

@media (max-width: 767px) {
  .reviews-toolbar .catalog-sort,
  .guides-toolbar .catalog-sort {
    display: flex;
    width: 100%;
  }

  .reviews-toolbar .catalog-sort select,
  .guides-toolbar .catalog-sort select {
    width: 100%;
    min-width: 0;
  }
}

/* Newsletter on mobile: stack the Forminator field and button (the design
   stacks .newsletter-form the same way), field and button full width; the
   mail icon then aligns to the 48px field rather than the whole stack. */
@media (max-width: 767px) {
  .bh-newsletter form.forminator-ui.forminator-custom-form {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .bh-newsletter form.forminator-ui.forminator-custom-form .forminator-row,
  .bh-newsletter form.forminator-ui.forminator-custom-form .forminator-row:not(.forminator-row-last) {
    flex: 1 1 auto !important;
    width: 100%;
  }

  /* `button.` keeps this at (0,4,2) - the desktop rule above carries the same
     element selector, so a class-only selector here would lose to it. */
  .bh-newsletter form.forminator-ui.forminator-custom-form button.forminator-button-submit {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  /* Centre the icon on the 48px field (top = field midpoint, then pull the
     icon up by half its own height). */
  .bh-newsletter .bh-newsletter-icon {
    top: 24px;
    transform: translateY(-50%);
  }
}

/* Forminator's admin-only "Edit form" link was inline in the row and shoved
   the mail icon off its field for logged-in admins; take it out of flow. */
.bh-newsletter .forminator-edit-module {
  position: absolute;
  right: 0;
  top: 100%;
  margin-top: var(--space-200);
  font-size: 12px;
}

/* Hero (≤420px): the 2xl headline wraps to five lines, which pushed the
   second CTA under the trust bar where it was clipped; give the hero room. */
@media (max-width: 420px) {
  .hero {
    min-height: 960px;
  }
}

/* Our Company hero (≤480px): the caption (eyebrow + headline + lede + stats)
   outgrows the fixed figure height and its top was clipped. Let the figure
   size to the caption; the photo stays absolutely positioned behind it. */
@media (max-width: 600px) {
  /* The design sizes the figure by aspect-ratio on phones, so height:auto
     alone kept a width-proportional box that the caption overflowed (stats
     clipped at 375/320) or under-filled (raw photo below it at 425). Let the
     figure be exactly as tall as its caption. */
  .oc-hero-media {
    aspect-ratio: auto;
    height: auto;
    min-height: 0;
    max-height: none;
  }

  /* Caption in flow (the photo stays absolutely behind it), and a fade that
     covers the whole box - the desktop gradient is clear for its top 22%,
     which on a content-sized box put the eyebrow/headline over raw photo. */
  .oc-hero-caption {
    position: relative;
    justify-content: flex-start;
    background: linear-gradient(180deg, rgba(8, 16, 32, 0.6) 0%, rgba(8, 16, 32, 0.9) 100%);
  }
}

/* Checkout stepper (≤400px): the four uppercase labels ran into each other
   under the dots; tighten them and keep clear air before the step heading. */
@media (max-width: 400px) {
  .co-step-label {
    font-size: 10px;
    letter-spacing: 0.02em;
    padding: 0 2px;
  }

  .checkout-stepper {
    margin-bottom: var(--space-500);
  }
}

/* 320px sweep fixes. */

/* Home product rails: the tab row (New Arrivals / Clearance) and the carousel
   arrows share one line and overflowed a 320px screen; let the arrows wrap
   under the tabs there. */
@media (max-width: 360px) {
  .tab-row-wrap {
    flex-wrap: wrap;
    row-gap: var(--space-300);
  }

  .carousel-nav {
    margin-left: 0;
  }
}

/* bh-returns search: at phone widths the input's intrinsic size still pushed
   the form past the edge; pin the form and its field to the column. */
@media (max-width: 480px) {
  .bh-form-slot div:has(> #transaction-number-returns-search),
  .bh-form-slot #transaction-number-returns-search,
  .bh-form-slot #transaction-number-returns-search > div,
  .bh-form-slot #transaction-number-returns-search input {
    width: 100%;
    box-sizing: border-box;
  }
}

/* The returns lookup input is sized by an inline style="width:300px" from the
   plugin, so only !important can rein it in on a 320px screen. */
@media (max-width: 480px) {
  .bh-form-slot input[style*="width"],
  .bh-form-slot #transaction-number-returns-search input {
    width: 100% !important;
    max-width: 100% !important;
  }

  .bh-form-slot #results {
    width: auto;
    max-width: 100%;
  }
}

/* CTA cards on phones (home "Wholesale Access" / "Find a Contractor", the
   locator): a long label like "Apply for Contractor Account" ran past the
   card's padding - let the button fill the card and wrap its text. */
@media (max-width: 480px) {
  .cta-card .button {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    white-space: normal;
    justify-content: center;
    text-align: center;
  }
}

/* "What Customers Say": the head is a heading + "Rated 4.6 on Google" row; on
   phones the rating sits under the heading instead of beside it. */
@media (max-width: 767px) {
  .section--testimonials .section-head {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-200);
  }
}

/* PDP price on narrow phones: a variable-product range ("$7,149.68 - $7,313.27")
   was kept on one line and grew wider than the column, widening the whole page.
   Let it wrap at the dash and step the size down. */
@media (max-width: 400px) {
  .pdp-price-row .price,
  .pdp-price-row .price .woocommerce-Price-amount {
    white-space: normal;
    overflow-wrap: anywhere;
    min-width: 0;
    max-width: 100%;
  }

  .pdp-price-row .price {
    font-size: 26px;
    line-height: 1.15;
  }
}

/* Footer bottom links on 320-class screens: as flex items the three links
   shrank and broke mid-phrase ("Terms of / Service"). One link per row there,
   separators hidden; from 361px up they still sit inline on one line. */
@media (max-width: 360px) {
  .footer-bottom-links {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-200);
  }

  .footer-bottom-links a {
    white-space: nowrap;
  }

  .footer-bottom-links a + a::before {
    content: none;
    margin: 0;
  }
}

/* Three-item trust bar. The design's bar is laid out for four claims:
   space-between pins the outer items to the margins, and mobile is a 2x2 grid.
   With three, give each an equal third on desktop (dividers land on the
   thirds), and on mobile centre the third item on its own row instead of
   leaving it orphaned in the left column. */
.trust-bar--count-3 .trust-item {
  flex: 1 1 0;
}

@media (max-width: 767px) {
  .trust-bar--count-3 .trust-item:last-of-type {
    grid-column: 1 / -1;
  }
}

/* ---------------------------------------------------------------------------
 * 320px refinements.
 * ------------------------------------------------------------------------ */

/* Trust bar (<=359px): the design breaks it out of the shell with
   width:100vw + calc(50% - 50vw) margins. 100vw includes the vertical
   scrollbar, so on any browser with a classic scrollbar (Windows Chrome/Edge,
   DevTools device frame) the bar is ~17px wider than the page and creates
   horizontal scroll. Its parent .hero-section is already full-bleed, so plain
   100% gives the same edge-to-edge band without touching vw. */
@media (max-width: 359px) {
  .trust-bar {
    width: 100%;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* Headlines on 320-class screens: single long uppercase words ("ALUMINUM",
   "WATERCRAFT", "MODIFICATIONS", "INFORMATION") were wider than the column and
   clipped at the edge. The hero size steps down to a fixed 34px; the card
   headings (.type-heading-xl on policy cards, .co-panel-heading on the
   contact/mailing-list panels) scale with the viewport instead, because the
   longest words ("MODIFICATIONS" 239px, "INFORMATION" 248px) fit their card at
   350px but not at 320px - 6.6vw gives ~21px at 320 and ~23px at 350, both
   inside the card, so no word breaks mid-way. overflow-wrap stays as the
   last-resort net; a hyphen is still better than horizontal scroll. */
@media (max-width: 400px) {
  .type-heading-2xl {
    font-size: 34px;
    line-height: 36px;
  }

  .type-heading-xl {
    font-size: min(24px, 6.6vw);
    line-height: 1.1;
  }

  .co-panel-heading {
    font-size: min(28px, 6.6vw);
    line-height: 1.1;
  }

  .type-heading-2xl,
  .type-heading-xl,
  .type-heading-lg,
  .co-panel-heading {
    max-width: 100%;
    overflow-wrap: anywhere;
    hyphens: auto;
  }
}

/* Mobile menu / minicart drawers (<=767px): the design sizes the panel with
   100vw x 100vh inside a position:fixed overlay. The page keeps its own
   scrollbar while a drawer is open, so on a classic-scrollbar browser the
   overlay is ~15px narrower than 100vw and the panel spills out of it in both
   directions; the overlay's overflow:auto then adds a horizontal scrollbar and
   a second vertical one (the panel and its body each scroll too). Size the
   panel to the overlay itself and let only the list scroll. */
@media (max-width: 767px) {
  .mobile-sidebar-overlay,
  .mobile-minicart-overlay {
    overflow: hidden;
  }

  .mobile-sidebar-panel,
  .mobile-minicart-panel {
    width: 100%;
    max-width: 100%;
    height: 100%;
    min-height: 100%;
    max-height: 100%;
    overflow-x: hidden;
  }

  /* The menu's list (.sidebar-body) scrolls by itself; the minicart body
     does not, so that panel keeps scrolling as a whole. */
  .mobile-sidebar-panel {
    overflow-y: hidden;
  }

  .mobile-minicart-panel {
    overflow-y: auto;
  }
}

/* Remove-from-mailing-list / contact layout (<=480px): a `1fr` track is
   minmax(auto, 1fr), so it grew to a panel's min-content (297px) past the
   272px column and pushed the page to 322px. Clamp the track and let the
   panels and their fields shrink. */
@media (max-width: 480px) {
  .contact-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .contact-layout > *,
  .contact-layout .co-panel,
  .contact-layout .contact-info,
  .contact-layout .contact-card {
    min-width: 0;
    max-width: 100%;
  }

  .contact-layout input,
  .contact-layout select,
  .contact-layout textarea {
    min-width: 0;
    max-width: 100%;
  }

  /* Locator card buttons: the desktop equal-width rule (min-width:16rem) is
     more specific than the generic CTA override, so match it here. */
  .locator-tools .cta-card .button {
    min-width: 0;
    width: 100%;
  }
}

/* Dashboard on phones: CookieYes's "revisit consent" button is fixed at the
   bottom-left, exactly where the floating Directory pill sits on narrow
   screens (it overlapped the pill below ~360px). Hide it on account screens
   at mobile widths only; the cookie policy stays reachable from the footer. */
@media (max-width: 767px) {
  body.dashboard-page .cky-btn-revisit-wrapper {
    display: none !important;
  }
}

/* Compact mobile header (<=480px). The wordmark only gets what the row leaves
   over: 24px side padding + four 40px buttons with 8px gaps + a 12px gap put
   it at 61x9 on a 320 screen and 101x15 on a 360 one (its designed size is
   163x24), which reads as "squished". Trim the spacing, keep the
   40px touch targets: 140x21 at 360, 155x23 at 375, full size from ~390.
   Under 340px the buttons step to 36px so a 320 screen still shows 112x17. */
@media (max-width: 480px) {
  .mobile-header.shell {
    padding-left: 16px;
    padding-right: 16px;
  }

  .mobile-topbar {
    gap: 10px;
  }

  .mobile-actions {
    gap: 6px;
  }
}

@media (max-width: 339px) {
  .mobile-header .icon-button,
  .mobile-header .mobile-menu-button {
    width: 36px;
    height: 36px;
  }
}

/* ---------------------------------------------------------------------------
 * Fulfillment choice: Ship to Me / Free Store Pickup
 * ------------------------------------------------------------------------ */
.pdp-fulfillment {
  margin-top: var(--space-400);
}

/* Inside the price row (its normal home): a full-width line between the
   price and the quantity/Add-to-Cart controls. The simple-product form is
   display:contents, so its children are the row's flex items - negative
   orders keep price, then the scarcity line, then the block, ahead of them;
   the variable form is a single flex item after the block. */
.pdp-price-row:has(> .pdp-fulfillment) {
  flex-wrap: wrap;
}

.pdp-price-row > .pdp-fulfillment {
  flex: 1 1 100%;
  grid-column: 1 / -1; /* the variable-product row is a grid: span it */
  order: -1;
  margin-top: 0;
}

.pdp-price-row > .price {
  order: -3;
}

.pdp-price-row > form.cart:not(.variations_form) > .stock-message-system {
  order: -2;
}

/* One option only (viewer can't pick up): same card, nothing to click. */
.pdp-fulfillment--single .pdp-fulfillment-option {
  cursor: default;
}

.pdp-fulfillment--single .pdp-fulfillment-option:hover:not(.is-selected) {
  background: var(--color-bg-fill-base);
}

/* Pickup-only product: Ship to Me stays visible but is not an option. */
.pdp-fulfillment-option.is-disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.pdp-fulfillment-calc {
  font-weight: 400;
  color: var(--color-text-subtle);
}

.pdp-fulfillment-stock-inline.is-out {
  color: var(--color-text-critical);
}

.pdp-fulfillment-detail:empty {
  display: none;
}

/* The relocated delivery-estimate line becomes the option's detail text. */
.pdp-fulfillment-detail .delivery-estimation-message,
.pdp-fulfillment-detail .estimation-message,
.pdp-fulfillment-detail .estimation-message p {
  display: block;
  margin: 0;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
}

.pdp-fulfillment-detail .estimation-message #estimation-message-date {
  font-weight: 700;
  color: var(--color-text-strong);
}

.pdp-fulfillment-store {
  width: 100%;
  min-height: 36px;
  padding: 0 var(--space-300);
  border: 1px solid var(--color-border-base);
  border-radius: var(--radius-300);
  background: var(--color-bg-surface);
  font: inherit;
}

/* Checkout: the cards' slot in the Shipping step; the summary keeps a plain
   cost line (review-order.php). */
.bh-shipping-step {
  margin-top: var(--space-600);
}

.bh-shipping-step .co-section-label {
  margin: 0 0 var(--space-400);
}

.bh-shipping-step .cart-shipping-rows {
  margin: 0;
}

.shipping-method-card input[type="radio"][disabled] {
  pointer-events: none;
}

.bh-shipping-note {
  margin: 0;
}

/* Before the move (no JS yet), the cards sit in the summary; keep them tidy. */
.checkout-cart-col .cart-shipping-rows .shipping-methods {
  gap: var(--space-300);
  margin-bottom: var(--space-300);
}

/* Order details: the "Pickup location" row printed by the totals filter. */
tr.pickup th {
  font-weight: 600;
}

/* Checkout sign-in gate: WooCommerce refuses the checkout to logged-out
   shoppers when guest checkout and in-checkout registration are both off.
   Its bare "You must be logged in" line becomes a centred card with the two
   ways forward (woocommerce/checkout/form-checkout.php). */
.bh-checkout-gate {
  display: flex;
  justify-content: center;
  padding: var(--space-900) var(--space-500) var(--space-1000);
}

.bh-checkout-gate .co-panel {
  width: 100%;
  max-width: 32rem;
  text-align: center;
}

.bh-checkout-gate-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin: 0 auto var(--space-400);
  border-radius: 50%;
  background: var(--color-bg-fill-brand-tint, rgba(30, 58, 138, 0.08));
  color: var(--color-text-brand);
}

.bh-checkout-gate-icon .icon-svg {
  width: 28px;
  height: 28px;
}

.bh-checkout-gate-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-300);
  margin-top: var(--space-500);
}

.bh-checkout-gate-actions .button {
  min-width: 12rem;
}

.bh-checkout-gate .auth-footer-link {
  margin-top: var(--space-500);
}

@media (max-width: 480px) {
  .bh-checkout-gate-actions .button {
    width: 100%;
  }
}

/* PDP "Product Videos" accordion (template-parts/pdp/specs.php): the embeds
   sit in the same .pdp-spec-content body as the other details groups - one
   column on phones, two from tablet up, each a 16:9 frame. */
.pdp-videos-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-400);
}

.pdp-video {
  aspect-ratio: 16 / 9;
  border: 1px solid var(--color-border-base);
  border-radius: var(--radius-400);
  background: var(--color-bg-surface);
  overflow: hidden;
}

.pdp-video iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

@media (min-width: 768px) {
  .pdp-videos-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ---------------------------------------------------------------------------
 * Pay for order (order-pay endpoint) - woocommerce/checkout/form-pay.php.
 * Same two-column checkout layout; on phones the summary stays visible
 * (there is no floating "Your Order" drawer on this page).
 * ------------------------------------------------------------------------ */
.bh-pay .checkout-cart-col {
  top: 96px;
}

.bh-pay .payment_box p {
  margin: 0 0 var(--space-300);
}

.bh-pay .special-items-notice-wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--space-300);
  margin-bottom: var(--space-400);
  padding: var(--space-400);
  border: 1px solid var(--color-border-base);
  border-radius: var(--radius-300);
  background: var(--color-bg-surface-subtle);
}

@media (max-width: 767px) {
  .bh-pay .checkout-cart-col {
    display: flex;
    position: static;
    order: -1;
  }
}