/* ==========================================================================
   EC Carpets · Rugs — WOOCOMMERCE PURCHASE PATH (9B)
   ==========================================================================
   Cart · Checkout · Order received. Classic (shortcode + PHP template) Woo, with
   the theme owning the markup through woocommerce/ template overrides.

   SOURCE NOTE (DESIGN-SYNC rule 2, markup parity): v9b ships NO cart/checkout
   mockup, so this area is designed FROM the 9B system rather than copied from a
   mockup file — white ground, hairline separation instead of boxes, tracked
   eyebrow micro-labels, IvyPresto for the page title, Gordita everywhere else,
   Woodland Sage as the single action colour, --radius-media-sm on imagery. Every
   value below resolves through a token; no new colours or hard-coded type sizes.
   When a cart/checkout mockup does land, this file is the one place to resync.

   ENQUEUE: registered individually as the `pb-woo` handle with PB_VERSION_ID,
   dependency-chained after `pureboldbase_public_css` (inc/woocommerce.php).
   NEVER pull it in with an unversioned @import — that is the exact failure that
   served stale CSS across version bumps (DESIGN-SYNC "Conventions").

   WOO STYLESHEET POLICY (decided, see inc/woocommerce.php):
     keep  woocommerce-general      — notices, blockUI overlay, validation states
     drop  woocommerce-layout       — float layout, fights the grid
     drop  woocommerce-smallscreen  — its own !important table stacking
     drop  wc-blocks-style (cart/checkout only) — no Woo blocks render here
   This sheet therefore has to provide BOTH the 9B skin AND the layout/responsive
   behaviour the two dropped sheets used to supply.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. BOX-SIZING RE-ASSERT (Woo scope) — now REDUNDANT, kept as a guard.
   HISTORY, corrected 2026-08-09: "Woo/block CSS injects a same-specificity `*`
   rule AFTER our sheets and clobbers it" was the working theory, and it was wrong.
   A dump of every box-sizing declaration in the live CSSOM found no such rule on
   any page. The real cause was in pb-shell.css itself: a path glob in its opening
   comment closed that comment early, and the parser consumed the universal reset
   as part of the resulting garbage — so it was never in the CSSOM to be overridden.
   Fixed at source; the reset now governs and this rule changes nothing. Retained
   only as a cheap guard over the area this file owns. New page areas do NOT need
   to copy it — see DESIGN-SYNC Conventions.
   -------------------------------------------------------------------------- */
.pb-woo,
.pb-woo *,
.pb-woo *::before,
.pb-woo *::after,
.pb-woo-wrap,
.pb-woo-wrap *,
.pb-woo-wrap *::before,
.pb-woo-wrap *::after { box-sizing: border-box; }

/* --------------------------------------------------------------------------
   1. PAGE SHELL
   -------------------------------------------------------------------------- */

/* The fixed floating-glass chrome clearance. This lives on .pb-woo rather than on
   the page head via `.page-top`, because the notices region renders ABOVE the head
   and would otherwise be the element sliding under the header bar. */
.pb-woo {
  padding-top: calc(var(--chrome-bottom) + var(--chrome-inset));
  padding-bottom: var(--space-3xl);
  background: var(--surface);
}

/* Woo-templated pages (shop / product / product_cat fallback) get the same
   clearance from the wrapper-start.php override, which has no theme template of
   its own to hang `.page-top` on. */
.pb-woo-wrap { padding-top: calc(var(--chrome-bottom) + var(--chrome-inset)); }
/* …except the range template, which already pads itself (pb-range.css §1). */
.pb-range .pb-woo-wrap { padding-top: 0; }

/* The notices region always renders (empty or not): cart.js and checkout.js
   insert into `.woocommerce-notices-wrapper`, so it has to exist in the DOM
   before the first notice arrives. It therefore carries no padding of its own —
   the notices themselves bring their bottom margin. */
.pb-woo__notices > *:last-child { margin-bottom: 0; }

/* --- Page head: eyebrow · title · progress rail ------------------------- */
.pb-woo__head { padding-block: var(--space-lg) var(--space-xl); }
.pb-woo__eyebrow { margin-bottom: var(--space-xs); }
.pb-woo__title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--fs-h1);
  line-height: 1.08;
  letter-spacing: -0.012em;
  color: var(--text-strong);
  margin: 0;
}

.pb-woo__steps {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-md);
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: var(--rule);
}
.pb-woo__step {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  font-size: var(--fs-eyebrow);
  font-weight: var(--w-medium);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--text-muted);
}
.pb-woo__step + .pb-woo__step::before {
  content: "";
  width: 24px;
  height: var(--hairline-width);
  background: var(--hairline);
  margin-right: var(--space-2xs);
}
.pb-woo__step-n {
  display: grid;
  place-items: center;
  width: 22px; height: 22px;
  border-radius: var(--radius-circle);
  border: var(--rule-strong);
  font-size: 11px;
  letter-spacing: 0;
  line-height: 1;
}
.pb-woo__step.is-current { color: var(--text-strong); }
.pb-woo__step.is-current .pb-woo__step-n {
  background: var(--woodland-sage);
  border-color: var(--woodland-sage);
  color: var(--white);
}
.pb-woo__step.is-done { color: var(--text); }
.pb-woo__step.is-done .pb-woo__step-n {
  border-color: var(--woodland-sage-deep);
  color: var(--woodland-sage-deep);
}

/* --- The two-column grid shared by cart + checkout ---------------------- */
.pb-woo__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: var(--space-2xl);
  align-items: start;
}
/* The checkout rail carries a thumbnail + spec + totals + payment + terms in one
   column, so it gets 20px more than the cart's. */
.pb-woo--checkout .pb-woo__grid { grid-template-columns: minmax(0, 1fr) 400px; }
.pb-woo__main { min-width: 0; }
.pb-woo__aside { min-width: 0; }
/* Only the CART rail is sticky. The checkout rail carries payment + terms +
   place-order and is routinely taller than the viewport, where sticky would pin
   its top and hide its foot. */
.pb-woo--cart .pb-woo__aside {
  position: sticky;
  top: calc(var(--chrome-bottom) + var(--space-md));
}
.pb-woo__after:empty { display: none; }
.pb-woo__after { margin-top: var(--space-2xl); }

/* --------------------------------------------------------------------------
   2. WOO CHROME RESET — pull woocommerce-general's leftovers onto the 9B ground
   Selectors deliberately match Woo's own specificity so the later load wins,
   rather than reaching for !important.
   -------------------------------------------------------------------------- */
.pb-woo table.shop_table {
  border: 0;
  border-radius: 0;
  border-collapse: collapse;
  margin: 0;
  width: 100%;
}
.pb-woo table.shop_table th,
.pb-woo table.shop_table td {
  border: 0;
  padding: 0;
  vertical-align: top;
  background: none;
}
.pb-woo table.shop_table th { font-weight: var(--w-medium); }

/* Buttons: anything Woo emits with .button becomes the theme's shared primitive
   (pb-shell.css .btn / .btn--primary) — slate-deep outline at rest, Woodland Sage
   fill on hover/focus. #place_order is converted at source by the
   `woocommerce_order_button_html` filter, so it needs no rule here. */
.pb-woo a.button,
.pb-woo button.button,
.pb-woo input.button,
.pb-woo a.button.alt,
.pb-woo button.button.alt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  min-height: 50px;
  padding: 0 var(--space-xl);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: var(--w-medium);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  line-height: 1;
  border-radius: var(--radius-btn);
  background: transparent;
  color: var(--accent-contrast);
  border: var(--hairline-width) solid var(--accent-contrast);
  text-decoration: none;
  transition: background-color var(--dur-base) var(--ease-standard),
              color var(--dur-base) var(--ease-standard),
              border-color var(--dur-base) var(--ease-standard);
}
.pb-woo a.button:hover,
.pb-woo button.button:hover,
.pb-woo input.button:hover,
.pb-woo a.button:focus-visible,
.pb-woo button.button:focus-visible,
.pb-woo input.button:focus-visible,
.pb-woo a.button.alt:hover,
.pb-woo button.button.alt:hover {
  background: var(--woodland-sage);
  border-color: var(--woodland-sage);
  color: var(--white);
}
.pb-woo .button:disabled,
.pb-woo .button[disabled] { opacity: 0.4; cursor: not-allowed; }
/* pb-shell.css underlines every `p a` for body-copy links. Several Woo actions are
   a button or an animated-underline link inside a <p>, where that rule adds a
   second, static underline. */
.pb-woo p a.btn,
.pb-woo p a.button,
.pb-woo p a.link-underline { text-decoration: none; }

/* Woo notices, re-inked onto the white ground as hairline-led bands. */
.pb-woo .woocommerce-message,
.pb-woo .woocommerce-info,
.pb-woo .woocommerce-error {
  display: block;
  margin: 0 0 var(--space-md);
  padding: var(--space-sm) var(--space-md);
  border: 0;
  border-left: 3px solid var(--woodland-sage);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--woodland-sage) 12%, var(--white));
  color: var(--text-strong);
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  list-style: none;
}
.pb-woo .woocommerce-message::before,
.pb-woo .woocommerce-info::before,
.pb-woo .woocommerce-error::before { content: none; }
.pb-woo .woocommerce-error {
  border-left-color: var(--brick);
  background: color-mix(in srgb, var(--brick) 8%, var(--white));
}
.pb-woo .woocommerce-error li + li { margin-top: var(--space-2xs); }
.pb-woo .woocommerce-message .button,
.pb-woo .woocommerce-info .button {
  min-height: 38px;
  padding: 0 var(--space-md);
  margin-left: var(--space-md);
}

/* --------------------------------------------------------------------------
   3. CART LINES
   The <table> element and its Woo classes are load-bearing for cart.js, so the
   row layout is done by re-displaying the table as a grid rather than by
   changing the markup (see the note at the top of woocommerce/cart/cart.php).
   -------------------------------------------------------------------------- */
.pb-woo table.pb-cart-lines,
.pb-woo .pb-cart-lines thead,
.pb-woo .pb-cart-lines tbody { display: block; }

.pb-woo .pb-cart-lines thead tr,
.pb-woo .pb-cart-lines tr.pb-cart-line {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) 108px 116px 108px 40px;
  gap: var(--space-md);
  align-items: start;
}

.pb-woo .pb-cart-lines thead tr {
  padding-bottom: var(--space-2xs);
  border-bottom: var(--rule-strong);
  align-items: end;
}
.pb-woo .pb-cart-lines thead th {
  font-size: var(--fs-eyebrow);
  font-weight: var(--w-medium);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--text-muted);
  text-align: left;
}
.pb-woo .pb-cart-lines thead th.product-price,
.pb-woo .pb-cart-lines thead th.product-subtotal { text-align: right; }

.pb-woo .pb-cart-lines tr.pb-cart-line {
  padding-block: var(--space-lg);
  border-bottom: var(--rule);
}

.pb-woo .pb-cart-line .product-thumbnail img {
  width: 96px; height: 96px;
  object-fit: cover;
  border-radius: var(--radius-media-sm);
  background: var(--surface-recessed);
}
.pb-woo .pb-cart-line__title {
  display: block;
  font-size: var(--fs-h4);
  font-weight: var(--w-regular);
  line-height: var(--lh-snug);
  color: var(--text-strong);
}
.pb-woo .pb-cart-line__title a { color: inherit; }
.pb-woo .pb-cart-line__title a:hover { color: var(--text-accent); }

.pb-woo .pb-cart-line .product-price,
.pb-woo .pb-cart-line .product-subtotal { text-align: right; font-variant-numeric: tabular-nums; }
.pb-woo .pb-cart-line .product-price { color: var(--text-muted); }
.pb-woo .pb-cart-line .product-subtotal { color: var(--text-strong); font-weight: var(--w-medium); }

/* Made-to-order flag on a configured rug line. */
.pb-woo .pb-cart-line__note {
  margin-top: var(--space-2xs);
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

/* --- Line meta: the plugin's configured-rug snapshot + sample tier note ---
   Both arrive through `woocommerce_get_item_data` (pb-ec-commerce
   ConfiguredRugPricing::item_data and SampleCartPricing::item_data) and are
   rendered by Woo as <dl class="variation"> with `variation-{Key}` classes on
   each dt/dd. The generic rows read as a quiet spec list; the "Sample" row is
   promoted to a sage chip because "Free sample" is a price statement, not a
   spec. Keyed on the plugin's own label strings — documented coupling. */
.pb-woo .pb-cart-line dl.variation,
.pb-woo .pb-review dl.variation {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px var(--space-2xs);
  margin: var(--space-2xs) 0 0;
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
  color: var(--text-muted);
}
.pb-woo dl.variation dt { font-weight: var(--w-regular); }
.pb-woo dl.variation dt::after { content: ""; }
.pb-woo dl.variation dd { margin: 0; color: var(--text); }
.pb-woo dl.variation dd p { margin: 0; }

/* The `td.product-name` step is load-bearing, not decoration: woocommerce.css
   ships `.woocommerce td.product-name dl.variation dt` (0,3,3), which outranks a
   plain `.pb-woo dl.variation dt.variation-Sample` (0,3,2) and was leaving the
   redundant "Sample:" label visible next to the chip. */
.pb-woo td.product-name dl.variation dt.variation-Sample { display: none; }
.pb-woo td.product-name dl.variation dd.variation-Sample {
  grid-column: 1 / -1;
  margin-top: var(--space-3xs);
}
.pb-woo dl.variation dd.variation-Sample p {
  display: inline-block;
  padding: 3px var(--space-2xs);
  border-radius: var(--radius-pill);
  background: var(--woodland-sage);
  color: var(--white);
  font-size: var(--fs-xs);
  font-weight: var(--w-medium);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  line-height: 1.3;
}

/* --- Quantity stepper --------------------------------------------------- */
.pb-woo .quantity { display: inline-flex; }
.pb-woo .quantity .qty {
  width: 100%;
  max-width: 92px;
  min-height: var(--tap-min);
  padding: var(--space-2xs) var(--space-2xs);
  font: inherit;
  font-size: var(--fs-sm);
  text-align: center;
  color: var(--text);
  background: none;
  border: var(--rule);
  border-radius: var(--radius-sm);
}
.pb-woo .quantity .qty:focus { border-color: var(--woodland-sage-deep); outline: none; }
.pb-woo .quantity .qty:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* --- Remove ------------------------------------------------------------- */
.pb-woo .product-remove { text-align: right; }
.pb-woo .product-remove a.remove {
  display: inline-grid;
  place-items: center;
  width: 32px; height: 32px;
  border-radius: var(--radius-circle);
  font-size: 20px;
  line-height: 1;
  color: var(--text-muted);
  background: none;
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-standard), background-color var(--dur-fast) var(--ease-standard);
}
.pb-woo .product-remove a.remove:hover {
  background: color-mix(in srgb, var(--brick) 10%, transparent);
}
/* woocommerce.css ships `a.remove { color: #a00 !important }` — a bare red cross
   is the loudest thing on the page and reads as an error. !important is the only
   way past !important; it is used here and nowhere else in this sheet. */
.pb-woo .product-remove a.remove { color: var(--text-muted) !important; }
.pb-woo .product-remove a.remove:hover,
.pb-woo .product-remove a.remove:focus-visible { color: var(--brick) !important; }

/* --- Coupon + update row ------------------------------------------------ */
.pb-woo .pb-cart-actions-row,
.pb-woo .pb-cart-actions-row td.actions { display: block; }
.pb-woo .pb-cart-actions-row td.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding-top: var(--space-lg);
}
.pb-woo .coupon { display: flex; align-items: center; gap: var(--space-sm); flex-wrap: wrap; }
/* The `table.cart td.actions` steps are needed to outrank
   `.woocommerce table.cart td.actions .input-text` (0,4,2), which was leaving the
   coupon field as a boxed UA-default input among underlined ones. */
.pb-woo table.cart td.actions .coupon .input-text {
  min-height: var(--tap-min);
  min-width: 200px;
  width: auto;
  padding: var(--space-2xs) 0;
  font: inherit;
  font-size: var(--fs-sm);
  color: var(--text);
  background: none;
  border: none;
  border-bottom: var(--rule-strong);
  border-radius: 0;
}
.pb-woo .coupon .input-text::placeholder { color: var(--text-muted); }
.pb-woo table.cart td.actions .coupon .input-text:focus { border-bottom-color: var(--woodland-sage-deep); outline: none; }
.pb-woo .pb-btn--sm { min-height: 40px; padding: 0 var(--space-md); }
.pb-woo .pb-cart-update:disabled { opacity: 0.35; }

.pb-woo .pb-cart-back { margin-top: var(--space-lg); }

/* --------------------------------------------------------------------------
   4. SUMMARY RAIL (cart totals + checkout order review)
   -------------------------------------------------------------------------- */
.pb-woo .pb-summary {
  padding: var(--space-lg);
  border: var(--rule);
  border-radius: var(--radius-media-sm);
  background: var(--surface);
}
.pb-woo .pb-summary__title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--fs-h3);
  line-height: 1.15;
  color: var(--text-strong);
  margin: 0 0 var(--space-md);
}
/* The checkout heading sits OUTSIDE the .pb-summary box, so it needs the box's
   own top offset removed and a little air under it instead. */
.pb-woo--checkout #order_review_heading { margin-bottom: var(--space-sm); }

.pb-woo .pb-summary__table,
.pb-woo .pb-summary__table tbody,
.pb-woo table.woocommerce-checkout-review-order-table,
.pb-woo .woocommerce-checkout-review-order-table thead,
.pb-woo .woocommerce-checkout-review-order-table tbody,
.pb-woo .woocommerce-checkout-review-order-table tfoot { display: block; }

.pb-woo .pb-summary__table tr,
.pb-woo .woocommerce-checkout-review-order-table tfoot tr {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-md);
  padding-block: var(--space-xs);
  border-top: var(--rule);
  font-size: var(--fs-sm);
}
.pb-woo .pb-summary__table tr:first-child { border-top: 0; padding-top: 0; }
.pb-woo .pb-summary__table th,
.pb-woo .woocommerce-checkout-review-order-table tfoot th {
  font-weight: var(--w-regular);
  color: var(--text-muted);
  text-align: left;
}
.pb-woo .pb-summary__table td,
.pb-woo .woocommerce-checkout-review-order-table tfoot td {
  text-align: right;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.pb-woo .pb-summary__table .order-total,
.pb-woo .woocommerce-checkout-review-order-table tfoot .order-total {
  margin-top: var(--space-2xs);
  padding-top: var(--space-sm);
  border-top: var(--rule-strong);
  font-size: var(--fs-h4);
}
.pb-woo .order-total th { color: var(--text-strong); font-weight: var(--w-medium); }
.pb-woo .order-total td { color: var(--text-strong); font-weight: var(--w-medium); }
.pb-woo .order-total .woocommerce-Price-amount { font-size: inherit; }

/* Shipping rows carry a method list + destination + calculator, so they stack. */
.pb-woo .pb-summary__table tr.shipping,
.pb-woo .pb-summary__table tr.woocommerce-shipping-totals,
.pb-woo .woocommerce-checkout-review-order-table tfoot tr.woocommerce-shipping-totals {
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-2xs);
}
.pb-woo tr.woocommerce-shipping-totals td,
.pb-woo tr.shipping td { text-align: left; }
.pb-woo ul#shipping_method { display: grid; gap: var(--space-2xs); margin: 0; padding: 0; list-style: none; }
.pb-woo ul#shipping_method li { display: flex; align-items: baseline; gap: var(--space-2xs); }
.pb-woo ul#shipping_method label { color: var(--text); }
.pb-woo .woocommerce-shipping-destination { margin-top: var(--space-2xs); font-size: var(--fs-xs); color: var(--text-muted); }
.pb-woo .shipping-calculator-button { font-size: var(--fs-xs); color: var(--text-accent); text-decoration: underline; }

.pb-woo .wc-proceed-to-checkout { margin-top: var(--space-lg); display: grid; }
/* Full-width in a 380px rail: the shared .btn's --space-xl side padding pushed
   "Proceed to checkout" onto three lines, so trim the padding and hold one line. */
.pb-woo .wc-proceed-to-checkout .btn {
  width: 100%;
  padding-inline: var(--space-md);
  white-space: nowrap;
}
/* woocommerce.css appends a WooCommerce-icon-font glyph ("\e019") after the
   shipping calculator toggle, from
   `.woocommerce-cart .cart-collaterals .shipping-calculator-button::after`
   (0,3,0) — it renders as a tofu box next to "Change address". Matched here so
   the later load wins. */
.pb-woo .cart-collaterals .shipping-calculator-button::after { content: none; }
.pb-woo .pb-summary__note {
  margin-top: var(--space-md);
  font-size: var(--fs-xs);
  line-height: var(--lh-body);
  color: var(--text-muted);
}

/* --- Checkout review lines --------------------------------------------- */
.pb-woo .woocommerce-checkout-review-order-table thead { display: none; }
.pb-woo .pb-review__line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-sm);
  align-items: start;
  padding-block: var(--space-md);
  border-top: var(--rule);
}
.pb-woo .woocommerce-checkout-review-order-table tbody tr:first-child { border-top: 0; padding-top: 0; }
.pb-woo .pb-review__line .product-name { display: flex; gap: var(--space-xs); align-items: start; min-width: 0; }
.pb-woo .pb-review__thumb { flex: 0 0 44px; }
.pb-woo .pb-review__thumb img {
  width: 44px; height: 44px;
  object-fit: cover;
  border-radius: var(--radius-media-sm);
  background: var(--surface-recessed);
}
.pb-woo .pb-review__body { min-width: 0; }
.pb-woo .pb-review__title { display: block; font-size: var(--fs-sm); color: var(--text-strong); line-height: var(--lh-snug); }
/* The rail is narrow, so the spec drops a step and its label column is allowed to
   shrink — at --fs-sm a value like "2.0 x 3.0 m" was wrapping mid-dimension. */
.pb-woo .pb-review dl.variation { font-size: var(--fs-xs); column-gap: var(--space-3xs); }
.pb-woo .pb-review__title .product-quantity { font-weight: var(--w-regular); color: var(--text-muted); }
.pb-woo .pb-review__line .product-total {
  text-align: right;
  white-space: nowrap;
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
  color: var(--text-strong);
}

/* --------------------------------------------------------------------------
   5. CHECKOUT FORM
   woocommerce-layout.css supplied the .col2-set / .form-row-first floats; it is
   dequeued, so the grid below replaces it. Fields follow the 9B input language:
   an underline, not a box (same primitive as the footer .news-field).
   -------------------------------------------------------------------------- */
.pb-woo .col2-set { display: grid; grid-template-columns: 1fr; gap: var(--space-2xl); }
.pb-woo .col2-set .col-1,
.pb-woo .col2-set .col-2 { min-width: 0; }

.pb-woo .woocommerce-billing-fields h3,
.pb-woo .woocommerce-shipping-fields h3,
.pb-woo .woocommerce-additional-fields h3,
.pb-woo #order_review_heading {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--fs-h3);
  line-height: 1.15;
  color: var(--text-strong);
  margin: 0 0 var(--space-md);
}
.pb-woo .woocommerce-shipping-fields,
.pb-woo .woocommerce-additional-fields { margin-top: var(--space-xl); }

.pb-woo .woocommerce-billing-fields__field-wrapper,
.pb-woo .woocommerce-shipping-fields__field-wrapper,
.pb-woo .woocommerce-additional-fields__field-wrapper {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-md) var(--space-lg);
}
.pb-woo .form-row { margin: 0; padding: 0; grid-column: 1 / -1; }
.pb-woo .form-row-first { grid-column: 1; }
.pb-woo .form-row-last { grid-column: 2; }

.pb-woo .form-row label {
  display: block;
  margin-bottom: var(--space-3xs);
  font-size: var(--fs-eyebrow);
  font-weight: var(--w-medium);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  line-height: 1.6;
  color: var(--text-muted);
}
.pb-woo .form-row .required { color: var(--brick); border: 0; text-decoration: none; }
.pb-woo .form-row .optional { color: var(--text-muted); }
.pb-woo .woocommerce-input-wrapper { display: block; width: 100%; }

/* `textarea.input-text` rather than a bare `textarea`: at (0,2,1) the bare
   selector lost to Woo's own (0,3,1) field rule and Order notes rendered as a
   boxed, rounded field among underlined ones. */
.pb-woo .form-row input.input-text,
.pb-woo .form-row textarea.input-text,
.pb-woo .form-row select.select,
.pb-woo .form-row select,
.pb-woo .select2-container .select2-selection--single {
  width: 100%;
  min-height: var(--tap-min);
  padding: var(--space-2xs) 0;
  font: inherit;
  font-size: var(--fs-body);
  color: var(--text);
  background: none;
  border: none;
  border-bottom: var(--rule-strong);
  border-radius: 0;
  appearance: none;
}
.pb-woo .form-row textarea.input-text { min-height: 96px; padding-block: var(--space-2xs); resize: vertical; }
.pb-woo .form-row select {
  /* Restore an affordance after appearance:none. */
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 10px) calc(50% + 1px), calc(100% - 5px) calc(50% + 1px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: var(--space-lg);
}
.pb-woo .form-row input.input-text::placeholder,
.pb-woo .form-row textarea.input-text::placeholder { color: var(--text-muted); }
.pb-woo .form-row input.input-text:focus,
.pb-woo .form-row textarea.input-text:focus,
.pb-woo .form-row select:focus { border-bottom-color: var(--woodland-sage-deep); outline: none; }
.pb-woo .form-row input.input-text:focus-visible,
.pb-woo .form-row textarea.input-text:focus-visible,
.pb-woo .form-row select:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; }

.pb-woo .woocommerce-invalid input.input-text,
.pb-woo .woocommerce-invalid select { border-bottom-color: var(--brick); }
.pb-woo .woocommerce-validated input.input-text { border-bottom-color: var(--woodland-sage); }

/* select2 (country / state) — re-ink Woo's default skin onto the underline. */
.pb-woo .select2-container--default .select2-selection--single {
  height: auto;
  border: none;
  border-bottom: var(--rule-strong);
  border-radius: 0;
  background: none;
}
.pb-woo .select2-container--default .select2-selection--single .select2-selection__rendered {
  padding-left: 0;
  line-height: var(--tap-min);
  color: var(--text);
}
.pb-woo .select2-container--default .select2-selection--single .select2-selection__arrow { height: var(--tap-min); }

/* "Ship to a different address?" is an h3 wrapping a checkbox label.
   woocommerce.css floats that h3 left; woocommerce-layout.css used to clear after
   it, and that sheet is dequeued — so the float collapsed .woocommerce-shipping-
   fields to zero height and the Order notes block rendered ON TOP of it. Un-float
   it rather than reintroduce a clearfix. */
.pb-woo #ship-to-different-address {
  width: auto;
  margin: 0 0 var(--space-md);
  font-family: var(--font-body);
  font-size: var(--fs-body);
}
/* Matches woocommerce.css's own
   `.woocommerce-checkout .checkout .col-2 h3#ship-to-different-address` (1,3,1)
   so the later load wins. */
.pb-woo .checkout .col-2 h3#ship-to-different-address { float: none; clear: both; }
.pb-woo .woocommerce-shipping-fields,
.pb-woo .woocommerce-additional-fields { clear: both; }
.pb-woo #ship-to-different-address label,
.pb-woo .woocommerce-form__label-for-checkbox {
  display: inline-flex;
  align-items: flex-start;
  gap: var(--space-2xs);
  margin: 0;
  font-size: var(--fs-sm);
  font-weight: var(--w-regular);
  letter-spacing: var(--ls-body);
  text-transform: none;
  color: var(--text);
  cursor: pointer;
}
.pb-woo input[type="checkbox"],
.pb-woo input[type="radio"] {
  flex: 0 0 auto;
  width: 18px; height: 18px;
  margin: 3px 0 0;
  accent-color: var(--woodland-sage-deep);
}

.pb-woo .pb-checkout-back { margin-top: var(--space-xl); }

/* --- Payment box -------------------------------------------------------- */
.pb-woo #payment {
  background: none;
  border-radius: 0;
  margin-top: var(--space-lg);
  padding-top: var(--space-lg);
  border-top: var(--rule-strong);
}
.pb-woo #payment ul.payment_methods {
  display: grid;
  gap: var(--space-2xs);
  margin: 0 0 var(--space-md);
  padding: 0;
  border: 0;
  list-style: none;
}
.pb-woo #payment ul.payment_methods li { margin: 0; }
.pb-woo #payment ul.payment_methods li label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  font-size: var(--fs-sm);
  color: var(--text-strong);
}
.pb-woo #payment div.payment_box {
  margin: var(--space-2xs) 0 0;
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-sm);
  background: var(--surface-recessed);
  color: var(--text);
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
}
.pb-woo #payment div.payment_box::before { content: none; }
.pb-woo #payment div.form-row { padding: 0; }
.pb-woo #payment .place-order { display: grid; gap: var(--space-md); padding: 0; }
.pb-woo #payment #place_order { width: 100%; float: none; }

/* --------------------------------------------------------------------------
   6. NON-REFUNDABLE ACKNOWLEDGEMENT  (client brief §7.1)
   Given a hairline field of its own so it reads as a distinct contractual step
   rather than another checkbox in the payment stack — but no alarm colour: this
   is a normal condition of a made-to-order product, not an error state.
   -------------------------------------------------------------------------- */
.pb-ack {
  padding: var(--space-md);
  border: var(--hairline-width) solid var(--woodland-sage);
  border-left-width: 3px;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--woodland-sage) 7%, var(--white));
}
.pb-ack__label {
  margin: 0 0 var(--space-2xs);
  font-size: var(--fs-eyebrow);
  font-weight: var(--w-medium);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--woodland-sage-deep);
}
.pb-woo .pb-ack .pb-ack__row { margin: 0; padding: 0; }
/* The extra `.pb-ack` step matters: this label lives inside a `.form-row`, and
   `.pb-woo .form-row label` (0,2,1) is the tracked uppercase eyebrow used for
   field labels. Without it the whole acknowledgement rendered in 12px caps at
   0.24em tracking — unreadable for a contractual sentence. */
.pb-woo .pb-ack .pb-ack__check {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2xs);
  font-size: var(--fs-sm);
  font-weight: var(--w-regular);
  letter-spacing: var(--ls-body);
  text-transform: none;
  line-height: var(--lh-body);
  color: var(--text-strong);
  cursor: pointer;
}
.pb-woo .pb-ack__input { margin-top: 4px; }
.pb-ack__text { display: inline; }
.pb-ack__more { margin: var(--space-2xs) 0 0 26px; font-size: var(--fs-xs); }
/* Client-side rejection state (pb-woo-checkout.js). Brick, because at this point
   it IS an error the customer has to resolve — unlike the resting state. */
.pb-ack--invalid { border-color: var(--brick); background: color-mix(in srgb, var(--brick) 6%, var(--white)); }
.pb-ack--invalid .pb-ack__label { color: var(--brick); }
.pb-ack__error {
  margin: var(--space-2xs) 0 0 26px;
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  color: var(--brick);
}
.pb-ack__more a { color: var(--text-accent); text-decoration: underline; text-underline-offset: 0.15em; }

/* Woo's own T&C block, when a terms page is finally set, sits directly below. */
.pb-woo .woocommerce-terms-and-conditions-wrapper { font-size: var(--fs-sm); color: var(--text-muted); }
.pb-woo .woocommerce-privacy-policy-text p { margin: 0; font-size: var(--fs-xs); line-height: var(--lh-body); }

/* --------------------------------------------------------------------------
   7. ORDER RECEIVED
   -------------------------------------------------------------------------- */
.pb-thanks { max-width: var(--container-max); }
.pb-thanks__lead p {
  margin: 0;
  font-size: var(--fs-lead);
  line-height: var(--lh-snug);
  color: var(--text);
  max-width: var(--measure);
}
.pb-thanks__facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-md) var(--space-xl);
  margin: var(--space-xl) 0 0;
  padding: var(--space-lg) 0;
  border-top: var(--rule);
  border-bottom: var(--rule);
  list-style: none;
}
.pb-thanks__fact dt {
  font-size: var(--fs-eyebrow);
  font-weight: var(--w-medium);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--text-muted);
}
.pb-thanks__fact dd {
  margin: var(--space-3xs) 0 0;
  font-size: var(--fs-body);
  color: var(--text-strong);
}
.pb-thanks__note {
  margin-top: var(--space-lg);
  max-width: var(--measure);
  font-size: var(--fs-sm);
  color: var(--text-muted);
}
.pb-thanks__actions { display: flex; align-items: center; gap: var(--space-lg); flex-wrap: wrap; margin-top: var(--space-lg); }
.pb-thanks__details { margin-top: var(--space-2xl); }

/* Woo's own order/order-details.php + customer details are NOT overridden, only
   re-inked here, so Woo keeps ownership of that markup. */
.pb-woo .woocommerce-order-details__title,
.pb-woo .woocommerce-column__title,
.pb-woo .woocommerce-customer-details h2 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--fs-h3);
  color: var(--text-strong);
  margin: 0 0 var(--space-md);
}
.pb-woo table.woocommerce-table--order-details { margin-bottom: var(--space-2xl); }
.pb-woo table.woocommerce-table--order-details th,
.pb-woo table.woocommerce-table--order-details td {
  padding: var(--space-xs) 0;
  border-bottom: var(--rule);
  vertical-align: top;
}
.pb-woo table.woocommerce-table--order-details thead th {
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--text-muted);
  border-bottom: var(--rule-strong);
}
.pb-woo table.woocommerce-table--order-details td.woocommerce-table__product-total,
.pb-woo table.woocommerce-table--order-details th:last-child,
.pb-woo table.woocommerce-table--order-details td:last-child { text-align: right; }
.pb-woo table.woocommerce-table--order-details tfoot th { color: var(--text-muted); font-weight: var(--w-regular); }
.pb-woo .woocommerce-order-details .wc-item-meta {
  margin: var(--space-2xs) 0 0;
  padding: 0;
  list-style: none;
  font-size: var(--fs-sm);
  color: var(--text-muted);
}
.pb-woo .woocommerce-order-details .wc-item-meta li { display: flex; gap: var(--space-2xs); }
.pb-woo .woocommerce-order-details .wc-item-meta p { margin: 0; }
.pb-woo .woocommerce-customer-details { display: grid; gap: var(--space-xl); }
.pb-woo .woocommerce-columns--addresses { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-xl); }
/* Woo boxes each address in a rounded 1px card. On the 9B ground that reads as a
   stray container; a single top hairline separates them the way the rest of the
   page does. */
.pb-woo .woocommerce-customer-details address {
  font-style: normal;
  line-height: var(--lh-body);
  border: 0;
  border-top: var(--rule);
  border-radius: 0;
  padding: var(--space-sm) 0 0;
}
/* Gateway instructions (`woocommerce_thankyou_{method}`) land bare above the
   order table — give them room so they do not read as its subtitle. */
.pb-thanks__details > p { margin-bottom: var(--space-xl); color: var(--text-muted); font-size: var(--fs-sm); }

/* --------------------------------------------------------------------------
   8. RESPONSIVE
   woocommerce-smallscreen.css is dequeued, so all of the stacking is here.
   -------------------------------------------------------------------------- */

/* Summary rail drops under the content. */
@media (max-width: 1024px) {
  /* Both selectors are needed: the checkout's wider rail is set at (0,2,0) above,
     so a bare `.pb-woo__grid` (0,1,0) here would never beat it. */
  .pb-woo__grid,
  .pb-woo--checkout .pb-woo__grid { grid-template-columns: 1fr; gap: var(--space-xl); }
  .pb-woo--cart .pb-woo__aside { position: static; }
  .pb-woo .pb-cart-lines thead tr,
  .pb-woo .pb-cart-lines tr.pb-cart-line { grid-template-columns: 84px minmax(0, 1fr) 96px 104px 96px 40px; gap: var(--space-sm); }
  .pb-woo .pb-cart-line .product-thumbnail img { width: 84px; height: 84px; }
}

/* Single-column cart lines. */
@media (max-width: 760px) {
  .pb-woo { padding-bottom: var(--space-2xl); }
  .pb-woo .pb-cart-lines thead { display: none; }

  /* The subtotal moved OFF the 36px remove column: an 86px price in a 36px track
     hung 50px past the viewport edge at 390. It now spans the two right-hand
     tracks on its own row, with the quantity stepper under the thumbnail. */
  .pb-woo .pb-cart-lines tr.pb-cart-line {
    grid-template-columns: 76px minmax(0, 1fr) 36px;
    grid-template-areas:
      "thumb    name     remove"
      "thumb    price    price"
      "quantity subtotal subtotal";
    column-gap: var(--space-sm);
    row-gap: var(--space-2xs);
    align-items: start;
    padding-block: var(--space-md);
  }
  .pb-woo .pb-cart-line .product-quantity { margin-top: var(--space-2xs); }
  .pb-woo .pb-cart-line .product-subtotal { text-align: right; }
  .pb-woo .pb-cart-line .product-thumbnail { grid-area: thumb; }
  .pb-woo .pb-cart-line .product-name      { grid-area: name; }
  .pb-woo .pb-cart-line .product-price     { grid-area: price; text-align: left; }
  .pb-woo .pb-cart-line .product-quantity  { grid-area: quantity; }
  .pb-woo .pb-cart-line .product-subtotal  { grid-area: subtotal; align-self: center; }
  .pb-woo .pb-cart-line .product-remove    { grid-area: remove; }
  .pb-woo .pb-cart-line .product-thumbnail img { width: 76px; height: 76px; }

  /* data-title labels replace the dropped column headings. */
  .pb-woo .pb-cart-line .product-price::before,
  .pb-woo .pb-cart-line .product-quantity::before {
    content: attr(data-title) " ";
    font-size: var(--fs-eyebrow);
    letter-spacing: var(--ls-eyebrow);
    text-transform: uppercase;
    color: var(--text-muted);
    margin-right: var(--space-3xs);
  }
  .pb-woo .pb-cart-line .product-quantity::before { display: block; margin-bottom: var(--space-3xs); }
  .pb-woo .pb-cart-line .product-price { font-size: var(--fs-sm); }
  .pb-woo .quantity .qty { max-width: 76px; }

  .pb-woo .pb-cart-actions-row td.actions { flex-direction: column; align-items: stretch; }
  .pb-woo .coupon { flex-direction: column; align-items: stretch; }
  .pb-woo .coupon .input-text { min-width: 0; }
  .pb-woo .pb-btn--sm { width: 100%; }

  .pb-woo .woocommerce-billing-fields__field-wrapper,
  .pb-woo .woocommerce-shipping-fields__field-wrapper,
  .pb-woo .woocommerce-additional-fields__field-wrapper { grid-template-columns: 1fr; }
  .pb-woo .form-row-first,
  .pb-woo .form-row-last { grid-column: 1 / -1; }

  .pb-woo .pb-summary { padding: var(--space-md); }
  /* nowrap is a desktop-rail affordance; at 390 the label is wider than the rail
     and hung past the viewport edge, so let it wrap and tighten the side padding. */
  .pb-woo .wc-proceed-to-checkout .btn { white-space: normal; padding-inline: var(--space-sm); }
  .pb-woo__steps { gap: var(--space-2xs); }
  .pb-woo__step + .pb-woo__step::before { width: 12px; margin-right: var(--space-3xs); }
  .pb-woo__step-label { font-size: 10px; }
}

/* Very narrow: let the step rail drop its connectors rather than wrap raggedly. */
@media (max-width: 400px) {
  .pb-woo__step + .pb-woo__step::before { display: none; }
  .pb-woo .pb-cart-lines tr.pb-cart-line { grid-template-columns: 64px minmax(0, 1fr) 32px; }
  .pb-woo .pb-cart-line .product-thumbnail img { width: 64px; height: 64px; }
}