/*! @crucible/design-system 0.1.0 (e95a491) — built 2026-05-26T04:32:08.542Z */
/**
 * Crucible3D — WooCommerce surface overrides.
 *
 * WP-only. Never imported by Next. Scoped via body classes added by
 * inc/woocommerce.php (crucible-shop-page, crucible-quote-page,
 * crucible-cart-page, crucible-checkout-page, crucible-account-page).
 *
 * File layout — two tiers:
 *
 *   Tier 1 — shop-wide primitives. Scoped to .crucible-shop-page (which is
 *   present on every shop surface). Covers concerns that look the same
 *   across pages: typography, color, form primitives, money formatting,
 *   notices, primary CTAs, universal hides, layout containment. Selector
 *   lists in this tier cover BOTH WC vocabularies — block-rendered
 *   (.wc-block-*) and classic template (.woocommerce-*) — so a new
 *   classic-template surface (my-account is the obvious one) inherits the
 *   primitives without a rewrite.
 *
 *   Tier 2 — page composition. Scoped to a single page body class. Covers
 *   layout and structure unique to that page: intro paragraphs on /quote,
 *   line-item rows on /cart, sidebar order summary on /checkout. Rules
 *   here should not be re-implementing primitives.
 *
 * The wp3dprinting plugin DOM is styled in a sibling file (wp3dprinting.css)
 * and is not subject to this tiering — its scope is the plugin form only.
 */

/* ═══════════════════════════════════════════════════════════════════════
 * TIER 1 — shop-wide primitives
 * ═══════════════════════════════════════════════════════════════════════ */

/* -- Layout: contain WooCommerce's floats --------------------------------
 *    WC's single-product template uses `float: left` on .images and
 *    `float: right` on .summary. When embedded via shortcode inside a WP
 *    page (e.g. /quote/), the surrounding .entry-content collapses to the
 *    height of non-float content and the footer renders OVER the floats.
 *    `display: flow-root` on the WC wrapper establishes a new block
 *    formatting context that contains the floats. */

.crucible-shop-page main.site-main,
.crucible-shop-page #primary,
.crucible-shop-page .woocommerce,
.crucible-shop-page .entry-content,
.crucible-shop-page .page-container {
  display: flow-root;
}

/* -- Universal hides on configurator surfaces ----------------------------- */

.crucible-shop-page .woocommerce-breadcrumb,
.crucible-shop-page .woocommerce-tabs,
.crucible-shop-page #reviews,
.crucible-shop-page #comments,
.crucible-shop-page #review_form_wrapper,
.crucible-shop-page #sidebar {
  display: none !important;
}

/* The WC product title ("3dprint" h1/h2 inside the configurator summary)
 * is redundant with our injected quote-page H1 on /quote/, and on the bare
 * product page it duplicates the configurator's own context. Hide always. */
.crucible-shop-page .product_title.entry-title,
.crucible-shop-page h1.product_title,
.crucible-shop-page h2.product_title {
  display: none !important;
}

/* On product pages WC may also render a small "SKU / Category" meta block.
 * Hide it — meaningless for a one-product print-on-demand shop. */
.crucible-shop-page .product_meta,
.crucible-shop-page .posted_in,
.crucible-shop-page .sku_wrapper {
  display: none !important;
}

/* -- Page H1 (typography) ------------------------------------------------
 *    Quote, cart, and checkout all render an H1 at the top of the page.
 *    Quote and cart inject custom <h1 class="*-page__title">; checkout
 *    uses the WP entry-title (no injection). Shared typography lives here;
 *    per-page `margin` overrides stay in Tier 2 because the spacing below
 *    the H1 differs by layout (quote sits above the configurator with
 *    tighter spacing; cart and checkout sit above paneled content). */
.crucible-shop-page .quote-page__title,
.crucible-shop-page .cart-page__title,
.crucible-checkout-page .entry-title,
.crucible-checkout-page h1.page-title {
  font-family: var(--font-sans);
  font-size: var(--text-h1);
  line-height: var(--text-h1--line-height);
  font-weight: 700;
  letter-spacing: var(--tracking-h1);
  color: var(--color-text-primary);
}
@media (max-width: 768px) {
  .crucible-shop-page .quote-page__title,
  .crucible-shop-page .cart-page__title,
  .crucible-checkout-page .entry-title,
  .crucible-checkout-page h1.page-title {
    font-size: var(--text-h2);
    line-height: var(--text-h2--line-height);
  }
}

/* -- Money amounts (mono per P4b-10) -------------------------------------
 *    Covers both WC vocabularies. .wc-block-formatted-money-amount is the
 *    block-rendered shape (cart, checkout, my-account orders list in newer
 *    WC). .amount (classic) is used inside td.product-price, .cart-subtotal,
 *    .order-total, plus the configurator price — wp3dprinting.css already
 *    styles the configurator's .amount mono, so this rule duplicates that
 *    decision and won't visually change /product. */
.crucible-shop-page .wc-block-formatted-money-amount,
.crucible-shop-page .wc-block-components-formatted-money-amount,
.crucible-shop-page .wc-block-components-order-summary-item__individual-price,
.crucible-shop-page .wc-block-components-order-summary-item__total-price,
.crucible-shop-page .wc-block-components-totals-item__value,
.crucible-shop-page .wc-block-cart-item__total,
.crucible-shop-page td.product-price .amount,
.crucible-shop-page td.product-subtotal .amount,
.crucible-shop-page .cart-subtotal .amount,
.crucible-shop-page .order-total .amount {
  font-family: var(--font-mono);
  color: var(--color-text-primary);
  font-weight: 500;
}

/* -- Notice banners ------------------------------------------------------
 *    WC ships per-variant bg colors (mistyrose for errors, etc.) keyed on
 *    a modifier class. To beat them without !important, chain the modifier
 *    in. Two vocabularies handled together:
 *      - Block (cart, checkout): .wc-block-components-notice-banner.is-*
 *      - Classic (my-account, login, classic cart):
 *        .woocommerce-error, .woocommerce-message, .woocommerce-info */
.crucible-shop-page .wc-block-components-notice-banner.is-error,
.crucible-shop-page .wc-block-components-notice-banner.is-warning,
.crucible-shop-page .wc-block-components-notice-banner.is-success,
.crucible-shop-page .wc-block-components-notice-banner.is-info,
.crucible-shop-page .woocommerce-error,
.crucible-shop-page .woocommerce-message,
.crucible-shop-page .woocommerce-info {
  background: var(--color-surface-1);
  border: 1px solid var(--color-border);
  border-left-width: 4px;
  border-radius: var(--radius-btn);
  color: var(--color-text-primary);
  font-family: var(--font-sans);
  padding: 14px 16px;
  list-style: none;
}
.crucible-shop-page .wc-block-components-notice-banner.is-error,
.crucible-shop-page .woocommerce-error {
  border-left-color: var(--color-danger);
}
.crucible-shop-page .wc-block-components-notice-banner.is-warning {
  border-left-color: var(--color-warning);
}
.crucible-shop-page .wc-block-components-notice-banner.is-success,
.crucible-shop-page .woocommerce-message {
  border-left-color: var(--color-success);
}
.crucible-shop-page .wc-block-components-notice-banner.is-info,
.crucible-shop-page .woocommerce-info {
  border-left-color: var(--color-info);
}
.crucible-shop-page .wc-block-components-notice-banner__content {
  color: var(--color-text-primary);
}

/* -- Form inputs (text-like) --------------------------------------------
 *    Two vocabularies share the same visual treatment:
 *
 *      Block (cart coupon, checkout fields): the input is a bare <input>
 *      inside .wc-block-components-text-input. WC's checkout.css /
 *      packages-style.css paint a white bg at (0,3,1) and load at runtime
 *      AFTER our enqueue, so source order can't save us. Double-class the
 *      wrapper (P4b-3) to bump to (0,5,1).
 *
 *      Classic (my-account address forms, login, lost-password): raw
 *      <input> elements. Scoped to .crucible-account-page so this doesn't
 *      hit the configurator's .p3d-dim-input / scale / unit inputs which
 *      live on /quote and /product but never inside .crucible-account-page.
 *
 *    Cart's coupon input has a compact override in Tier 2 — it wins via
 *    source order with equal specificity. */
.crucible-shop-page .wc-block-components-text-input.wc-block-components-text-input input[type],
.crucible-account-page input[type="text"],
.crucible-account-page input[type="email"],
.crucible-account-page input[type="tel"],
.crucible-account-page input[type="number"],
.crucible-account-page input[type="password"],
.crucible-account-page textarea {
  background: var(--color-surface-1);
  color: var(--color-text-primary);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-btn);
  padding: 14px 16px;
  font-family: var(--font-sans);
  font-size: var(--text-body);
  width: 100%;
  box-sizing: border-box;
}
.crucible-shop-page .wc-block-components-text-input.wc-block-components-text-input input[type]::placeholder,
.crucible-account-page input::placeholder,
.crucible-account-page textarea::placeholder {
  color: var(--color-text-tertiary);
}
.crucible-shop-page .wc-block-components-text-input.wc-block-components-text-input input[type]:focus,
.crucible-account-page input:focus,
.crucible-account-page textarea:focus {
  outline: 2px solid color-mix(in srgb, var(--color-accent) 40%, transparent);
  outline-offset: 2px;
  border-color: var(--color-accent);
}

/* Floating label inside .wc-block-components-text-input (block forms). */
.crucible-shop-page .wc-block-components-text-input label {
  color: var(--color-text-secondary);
  font-family: var(--font-sans);
  background: var(--color-surface-1);
  padding: 0 4px;
}
.crucible-shop-page .wc-block-components-text-input.is-active label,
.crucible-shop-page .wc-block-components-text-input input:focus + label {
  color: var(--color-text-secondary);
}

/* -- Selects -------------------------------------------------------------
 *    Targets WC's block-form selects by class only. A bare `select` rule
 *    would clobber the plugin's .p3d-dropdown-searchable on /quote and
 *    /product — so the classic side is scoped to .crucible-account-page,
 *    activated only on my-account surfaces. */
.crucible-shop-page .wc-blocks-components-select__select,
.crucible-shop-page .wc-block-components-country-input select,
.crucible-shop-page .wc-block-components-state-input select,
.crucible-account-page select {
  background: var(--color-surface-1);
  color: var(--color-text-primary);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-btn);
  padding: 14px 16px;
  font-family: var(--font-sans);
  font-size: var(--text-body);
}
.crucible-shop-page .wc-blocks-components-select__select:focus,
.crucible-account-page select:focus {
  outline: 2px solid color-mix(in srgb, var(--color-accent) 40%, transparent);
  outline-offset: 2px;
  border-color: var(--color-accent);
}
.crucible-shop-page .wc-blocks-components-select svg {
  fill: var(--color-text-secondary);
}

/* -- Checkboxes & radios -------------------------------------------------
 *    accent-color recolors the browser-rendered tick / dot. Block-component
 *    classes cover the WC checkout/cart UIs. Bare input[type] selectors
 *    are scoped to .crucible-account-page so the plugin's configurator
 *    radios (.p3d-control[type=radio]) keep their 13px browser-default
 *    size on /quote and /product. */
.crucible-shop-page .wc-block-components-checkbox__input,
.crucible-shop-page .wc-block-components-radio-control__input,
.crucible-account-page input[type="checkbox"],
.crucible-account-page input[type="radio"] {
  accent-color: var(--color-accent);
  width: 16px;
  height: 16px;
}
.crucible-shop-page .wc-block-components-checkbox__label,
.crucible-shop-page .wc-block-components-radio-control__label {
  color: var(--color-text-primary);
  font-family: var(--font-sans);
}

/* -- Primary CTA (forge-amber, P4b-9) -----------------------------------
 *    One accent button per shop page (proceed-to-checkout on cart,
 *    place-order on checkout, account-level actions on my-account).
 *    Cart's CTA is an <a>, checkout's a <button>, and classic .button.alt
 *    can be either — universal text-decoration:none keeps the link case
 *    clean and doesn't affect buttons.
 *
 *    Layout differences (cart full-width + flex-centered; checkout
 *    auto-width) live in Tier 2. */
.crucible-shop-page .wc-block-cart__submit-button,
.crucible-shop-page .checkout-button,
.crucible-shop-page a.checkout-button.button.alt,
.crucible-shop-page .wc-block-components-checkout-place-order-button,
.crucible-shop-page .button.alt,
.crucible-account-page .woocommerce-Button.button,
.crucible-account-page .woocommerce-form-login__submit,
.crucible-account-page .woocommerce-MyAccount-content form button[type="submit"] {
  background: var(--color-accent);
  color: var(--color-text-primary);
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-btn);
  padding: 14px 28px;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--text-body);
  letter-spacing: var(--tracking-body);
  text-transform: none;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 100ms ease, border-color 100ms ease;
}
.crucible-shop-page .wc-block-cart__submit-button:hover,
.crucible-shop-page .checkout-button:hover,
.crucible-shop-page .wc-block-components-checkout-place-order-button:hover,
.crucible-shop-page .button.alt:hover,
.crucible-account-page .woocommerce-Button.button:hover,
.crucible-account-page .woocommerce-form-login__submit:hover,
.crucible-account-page .woocommerce-MyAccount-content form button[type="submit"]:hover {
  background: var(--color-accent-hover);
  border-color: var(--color-accent-hover);
}
.crucible-shop-page .wc-block-cart__submit-button:active,
.crucible-shop-page .checkout-button:active,
.crucible-shop-page .wc-block-components-checkout-place-order-button:active,
.crucible-shop-page .button.alt:active,
.crucible-account-page .woocommerce-Button.button:active,
.crucible-account-page .woocommerce-form-login__submit:active,
.crucible-account-page .woocommerce-MyAccount-content form button[type="submit"]:active {
  background: var(--color-accent-pressed);
  border-color: var(--color-accent-pressed);
}
.crucible-shop-page .wc-block-components-checkout-place-order-button:disabled,
.crucible-shop-page .button.alt:disabled,
.crucible-account-page .woocommerce-Button.button:disabled,
.crucible-account-page form button[type="submit"]:disabled {
  background: var(--color-accent-muted);
  border-color: var(--color-accent-muted);
  color: var(--color-text-tertiary);
  cursor: not-allowed;
}

/* -- Product-details metadata -------------------------------------------
 *    Per-line metadata block on cart line items and checkout order summary
 *    items (Material / Infill / Filename / Scale / Unit). Stacks slash-
 *    separated facts into one-fact-per-line key:value layout; hides the
 *    aria-hidden " / " separators and the plugin's internal hashed
 *    __model line. */
.crucible-shop-page .wc-block-components-product-details {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  font-size: var(--text-body-sm);
  color: var(--color-text-secondary);
  display: grid;
  gap: 2px;
}
.crucible-shop-page .wc-block-components-product-details > li,
.crucible-shop-page .wc-block-components-product-details > span,
.crucible-shop-page [class*="wc-block-components-product-details__"]:not([class*="__name"]):not([class*="__value"]) {
  display: block;
  margin: 0;
  padding: 0;
}
.crucible-shop-page .wc-block-components-product-details__name {
  color: var(--color-text-tertiary);
  margin-right: 6px;
  font-family: var(--font-sans);
  font-size: var(--text-body-sm);
}
.crucible-shop-page .wc-block-components-product-details__value {
  color: var(--color-text-primary);
  font-family: var(--font-sans);
  font-size: var(--text-body-sm);
}
.crucible-shop-page .wc-block-components-product-details [aria-hidden="true"] {
  display: none;
}
.crucible-shop-page .wc-block-components-product-details__model {
  display: none !important;
}

/* -- Classic shop_table -------------------------------------------------
 *    Used by: my-account orders list, my-account view-order, checkout
 *    order-received, and classic-fallback cart. Cart's WC-Block version
 *    has its own Tier 2 rules.
 *
 *    The configurator's table.p3d-stats is also a .shop_table descendant
 *    in some plugin versions — guard with :not(.p3d-stats) so the
 *    configurator's mono stats table keeps its plugin styling.
 *
 *    ⚠ FRAGILITY: 14 rules below carry `:not(.p3d-stats)`. The carve-out
 *    is keyed on the wp3dprinting plugin's literal `p3d-stats` class name
 *    (catalogued in WP_INTEGRATION_PHASE_4A.md Q1). If a plugin update
 *    renames the class, every shop_table rule below starts repainting
 *    the configurator's stats table on /quote and /product.
 *
 *    Mitigations:
 *      1. Pin the wp3dprinting plugin version in the production deploy
 *         manifest (Phase 5a). Selector stability is conditional on a
 *         fixed version — see Phase 4a P4a-5.
 *      2. Post-deploy: add a DOM-assertion smoke test that confirms
 *         table.p3d-stats keeps its expected font-family and right-aligned
 *         column. (Noted as a Phase 5 follow-up; no PNG snapshots — those
 *         break on font-rendering jitter and clutter PRs.) */
.crucible-shop-page table.shop_table:not(.p3d-stats) {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 24px;
  background: transparent;
}
.crucible-shop-page table.shop_table:not(.p3d-stats) thead th {
  font-family: var(--font-sans);
  font-size: var(--text-eyebrow);
  line-height: var(--text-eyebrow--line-height);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--color-text-tertiary);
  text-align: left;
  padding: 12px 16px;
  border-bottom: 1px solid var(--color-border);
}
.crucible-shop-page table.shop_table:not(.p3d-stats) tbody tr {
  border-bottom: 1px solid var(--color-border);
  background: transparent;
}
.crucible-shop-page table.shop_table:not(.p3d-stats) tbody td {
  padding: 16px;
  color: var(--color-text-primary);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  vertical-align: top;
  border: none;
}
/* Order details table — TOTAL column right-aligned. Header + data both. */
.crucible-shop-page table.shop_table:not(.p3d-stats) .product-total,
.crucible-shop-page table.shop_table:not(.p3d-stats) th.product-total,
.crucible-shop-page table.shop_table:not(.p3d-stats) td.product-total {
  text-align: right;
}
/* Product name link — text-primary, hover to accent. */
.crucible-shop-page table.shop_table:not(.p3d-stats) td.product-name a {
  color: var(--color-text-primary);
  font-weight: 500;
  text-decoration: none;
}
.crucible-shop-page table.shop_table:not(.p3d-stats) td.product-name a:hover {
  color: var(--color-accent);
}
/* Variation list inside product-name (Material / Infill / Scale / etc). */
.crucible-shop-page table.shop_table:not(.p3d-stats) .wc-item-meta,
.crucible-shop-page table.shop_table:not(.p3d-stats) .product-name dl.variation {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  font-size: var(--text-body-sm);
  color: var(--color-text-secondary);
  display: grid;
  gap: 2px;
}
.crucible-shop-page table.shop_table:not(.p3d-stats) .wc-item-meta li,
.crucible-shop-page table.shop_table:not(.p3d-stats) dl.variation dt {
  display: inline;
  color: var(--color-text-tertiary);
  font-family: var(--font-sans);
  font-weight: 400;
  margin: 0 6px 0 0;
}
.crucible-shop-page table.shop_table:not(.p3d-stats) .wc-item-meta strong,
.crucible-shop-page table.shop_table:not(.p3d-stats) dl.variation dd {
  display: inline;
  color: var(--color-text-primary);
  font-family: var(--font-sans);
  margin: 0;
}
.crucible-shop-page table.shop_table:not(.p3d-stats) .wc-item-meta__label {
  color: var(--color-text-tertiary);
  margin-right: 6px;
}
/* tfoot rows (Subtotal / Shipping / Total / Payment method) — right-align
 * the label and value pair, slight separator for the Total row. */
.crucible-shop-page table.shop_table:not(.p3d-stats) tfoot tr {
  border: none;
}
.crucible-shop-page table.shop_table:not(.p3d-stats) tfoot th {
  text-align: right;
  font-family: var(--font-sans);
  color: var(--color-text-secondary);
  font-weight: 500;
  padding: 6px 16px;
  border: none;
}
.crucible-shop-page table.shop_table:not(.p3d-stats) tfoot td {
  text-align: right;
  padding: 6px 16px;
  border: none;
}
.crucible-shop-page table.shop_table:not(.p3d-stats) tfoot tr:last-child th,
.crucible-shop-page table.shop_table:not(.p3d-stats) tfoot tr:last-child td {
  padding-top: 12px;
  border-top: 1px solid var(--color-border);
  font-weight: 600;
  color: var(--color-text-primary);
}

/* -- Address cards ------------------------------------------------------
 *    Two wrappers in play:
 *      .woocommerce-Addresses  — /my-account/edit-address (with edit links)
 *      .woocommerce-columns--addresses  — order-received + view-order
 *        customer details (read-only display)
 *    Both contain .col-1 / .col-2 children. Visual treatment identical.
 *    Inner element classes differ slightly:
 *      .woocommerce-Address vs .woocommerce-column
 *      .woocommerce-Address-title vs .woocommerce-column__title */
.crucible-shop-page .woocommerce-Addresses,
.crucible-shop-page .woocommerce-columns--addresses {
  display: flex;
  gap: 24px;
  margin: 0;
  flex-wrap: wrap;
}
.crucible-shop-page .woocommerce-Addresses > .woocommerce-Address,
.crucible-shop-page .woocommerce-columns--addresses > .woocommerce-column {
  flex: 1;
  min-width: 280px;
}
/* WC's woocommerce-layout.css `.woocommerce .col2-set .col-1` (0,3,0)
 * sets width:48%; float:left. Chain the wrapper to tie specificity. */
.crucible-shop-page .woocommerce-Addresses .woocommerce-Address,
.crucible-shop-page .woocommerce-columns--addresses .woocommerce-column {
  background: var(--color-surface-1);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: 20px 24px;
  width: auto;
  float: none;
}
.crucible-shop-page .woocommerce-Address-title h2,
.crucible-shop-page .woocommerce-Address-title h3,
.crucible-shop-page .woocommerce-column__title {
  font-family: var(--font-sans);
  font-size: var(--text-h4);
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0 0 12px;
}
.crucible-shop-page .woocommerce-Address address,
.crucible-shop-page .woocommerce-column address {
  font-style: normal;
  color: var(--color-text-secondary);
  font-family: var(--font-sans);
  font-size: var(--text-body-sm);
  line-height: 1.6;
  margin: 0;
}
/* "Edit" link on edit-address cards — small secondary action. */
.crucible-shop-page .woocommerce-Address-title .edit {
  float: right;
  font-size: var(--text-body-sm);
  color: var(--color-text-secondary);
  text-decoration: none;
  font-family: var(--font-sans);
  font-weight: 400;
}
.crucible-shop-page .woocommerce-Address-title .edit:hover {
  color: var(--color-accent);
}

/* WC Checkout Block address-card — the saved-address summary view shown
 * on /checkout once the user has an address on file. Two stacked spans:
 *   --primary   = customer name (inherits text-primary at 500 weight)
 *   --secondary = the address line; WC ships `color: rgba(18,18,18,0.7)`
 *                 (~#121212 at 70%) baked into the block stylesheet — that
 *                 is near-black, fine on light, invisible on our dark bg.
 *
 * Specificity: WC's selector is
 *   `.wc-block-components-address-card address .wc-block-components-address-card__address-section--secondary`
 * which is (0,2,1) thanks to the `address` tag in the middle. We chain
 * `.wc-block-components-address-card` to bump our selector to (0,3,0) and
 * win — same posture as the Tier 1 quirk noted in
 * [[feedback-wc-block-specificity]]: never reach for !important; chain. */
.crucible-shop-page .wc-block-components-address-card .wc-block-components-address-card__address-section--secondary {
  color: var(--color-text-secondary);
}
.crucible-shop-page .wc-block-components-address-card .wc-block-components-address-card__edit {
  color: var(--color-text-secondary);
  text-decoration: none;
  font-family: var(--font-sans);
  font-weight: 500;
}
.crucible-shop-page .wc-block-components-address-card .wc-block-components-address-card__edit:hover {
  color: var(--color-accent);
}

/* ═══════════════════════════════════════════════════════════════════════
 * TIER 2 — page composition
 * ═══════════════════════════════════════════════════════════════════════ */

/* -- Quote-page intro ------------------------------------------------------
 * H1 is rendered by page-quote.php (template hierarchy); no the_title()
 * default to hide and no the_content() injection to defend against. */

.crucible-quote-page .quote-page__title {
  margin: 0 0 12px;
}

/* Subtitle — sits directly under the H1, carries the positioning line
 * (geographic + operator + file formats + instant price). Secondary text
 * color so it reads as supporting copy without competing with the H1. */
.crucible-quote-page .quote-page__subtitle {
  margin: 0 0 32px;
  max-width: 60ch;
  color: var(--color-text-secondary);
  font-family: var(--font-sans);
  font-size: var(--text-h4);
  line-height: var(--text-h4--line-height);
  font-weight: 400;
}
@media (max-width: 768px) {
  .crucible-quote-page .quote-page__subtitle {
    margin-bottom: 24px;
    font-size: var(--text-body);
    line-height: var(--text-body--line-height);
  }
}

/* Trust bar — 4-up grid of anchored proof points. Slots between the
 * H1/subtitle and the WC product summary column (where the_content()
 * renders nothing on /quote/, so the bar reclaims that empty zone). Each
 * cell carries an eyebrow (scanner-friendly summary) + a 1-2 line body.
 * Stacks to 2-up on tablet, 1-up on mobile. */
.crucible-quote-page .quote-trust-bar {
  margin: 0 0 40px;
}
.crucible-quote-page .quote-trust-bar__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
@media (max-width: 1024px) {
  .crucible-quote-page .quote-trust-bar__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
}
@media (max-width: 560px) {
  .crucible-quote-page .quote-trust-bar__grid {
    grid-template-columns: 1fr;
  }
}
.crucible-quote-page .quote-trust-bar__cell {
  background: var(--color-surface-1);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: 16px;
  min-width: 0;
}
.crucible-quote-page .quote-trust-bar__eyebrow {
  font-family: var(--font-sans);
  font-size: var(--text-eyebrow);
  line-height: var(--text-eyebrow--line-height);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--color-text-primary);
  margin: 0 0 8px;
}
.crucible-quote-page .quote-trust-bar__body {
  margin: 0;
  color: var(--color-text-secondary);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--text-body--line-height);
}

/* Footnote — single-line research/contact path at the bottom of the page,
 * for visitors not yet ready to upload. Muted treatment so it doesn't
 * compete with the value strip above. */
.crucible-quote-page .quote-footnote {
  margin: 32px 0 0;
  color: var(--color-text-tertiary);
  font-family: var(--font-sans);
  font-size: var(--text-body-sm);
  line-height: var(--text-body-sm--line-height);
}
.crucible-quote-page .quote-footnote a {
  color: var(--color-text-secondary);
  text-decoration: underline;
  text-decoration-color: var(--color-border);
  text-underline-offset: 3px;
  transition: color 150ms ease-out, text-decoration-color 150ms ease-out;
}
.crucible-quote-page .quote-footnote a:hover {
  color: var(--color-accent);
  text-decoration-color: var(--color-accent);
}

/* Intro paragraphs sit inside the WC summary column (right of viewer),
 * above the configurator. Rendered via woocommerce_single_product_summary
 * hook at priority 25; appears on both /quote/ and /product/. */
.crucible-shop-page .quote-page__intro {
  margin: 0 0 24px;
  color: var(--color-text-secondary);
  font-size: var(--text-body);
  line-height: var(--text-body--line-height);
}
.crucible-shop-page .quote-page__intro p {
  margin: 0 0 12px;
}
.crucible-shop-page .quote-page__intro p:last-child {
  margin-bottom: 0;
}

/* -- Cart page (Phase 4b.3) -----------------------------------------------
 * H1 + empty-state CTA are rendered by page-cart.php (template hierarchy);
 * no the_title() default to hide. */

.crucible-cart-page .cart-page__title {
  margin: 0 0 32px;
}

/* Empty state — replaces WC's "Your cart is currently empty!" + "New in
 * store" recommendation card. Vertically centered, with the CTA as the
 * page's single accent. */
.crucible-cart-page .cart-page__empty {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  padding: 64px 0;
  max-width: 60ch;
}
.crucible-cart-page .cart-page__empty-message {
  font-family: var(--font-sans);
  font-size: var(--text-h3);
  font-weight: 500;
  color: var(--color-text-secondary);
  margin: 0;
}

/* Hide WC's empty-state UI (sad face, "currently empty" message, "New in
 * store" recommendation card). We render our own. */
.crucible-cart-page .wc-empty-cart-message,
.crucible-cart-page .cart-empty,
.crucible-cart-page .wp-block-woocommerce-empty-cart-block,
.crucible-cart-page .wc-block-cart-items__empty,
.crucible-cart-page .return-to-shop,
.crucible-cart-page .wc-block-grid {
  display: none !important;
}

/* -- Cart populated state — speculative rules against WC Cart Block ------
 * These target documented WC Cart Block class names. Verified against the
 * user's populated cart in a later iteration. */

/* Cart block container — give it some breathing room. */
.crucible-cart-page .wp-block-woocommerce-cart,
.crucible-cart-page .woocommerce-cart-form,
.crucible-cart-page .wc-block-cart {
  color: var(--color-text-primary);
  font-family: var(--font-sans);
}

/* Line items table / list. */
.crucible-cart-page .wc-block-cart-items,
.crucible-cart-page table.shop_table.cart {
  background: transparent;
  border-collapse: collapse;
  width: 100%;
}
.crucible-cart-page .wc-block-cart-items__row,
.crucible-cart-page table.shop_table.cart tr.cart_item {
  background: var(--color-surface-1);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
}
.crucible-cart-page .wc-block-cart-items__row td,
.crucible-cart-page table.shop_table.cart tr.cart_item td {
  padding: 16px;
  border: none;
  vertical-align: middle;
  color: var(--color-text-primary);
}

/* Line item product name. */
.crucible-cart-page .wc-block-cart-item__name,
.crucible-cart-page td.product-name a {
  color: var(--color-text-primary);
  font-weight: 500;
  text-decoration: none;
}
.crucible-cart-page .wc-block-cart-item__name:hover,
.crucible-cart-page td.product-name a:hover {
  color: var(--color-accent);
}

/* Quantity input. */
.crucible-cart-page .wc-block-quantity-selector,
.crucible-cart-page .quantity input.qty {
  font-family: var(--font-mono);
  background: var(--color-bg);
  color: var(--color-text-primary);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-btn);
}
.crucible-cart-page .quantity input.qty {
  padding: 8px 12px;
  width: 70px;
  text-align: center;
}

/* Totals panel (sidebar in block, below table in classic). */
.crucible-cart-page .wc-block-components-totals-wrapper,
.crucible-cart-page .cart_totals {
  background: var(--color-surface-1);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: 24px;
}
.crucible-cart-page .cart_totals h2,
.crucible-cart-page .wc-block-cart__totals-title {
  font-family: var(--font-sans);
  font-size: var(--text-h4);
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0 0 16px;
}

/* Proceed-to-checkout CTA layout — visuals are set at Tier 1. The cart
 * variant is an <a> rendered full-width inside the totals panel; the
 * flex centering ensures the link text sits centered when widened. */
.crucible-cart-page .wc-block-cart__submit-button,
.crucible-cart-page .checkout-button,
.crucible-cart-page a.checkout-button.button.alt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

/* Coupon field — compact treatment overrides the Tier 1 input baseline.
 * The coupon input IS wrapped in .wc-block-components-text-input (so
 * Tier 1 matches it); we double-class .wc-block-components-totals-coupon
 * to tie specificity and win via Tier 2 source order. */
.crucible-cart-page .wc-block-components-totals-coupon.wc-block-components-totals-coupon input[type="text"],
.crucible-cart-page #coupon_code {
  background: var(--color-bg);
  color: var(--color-text-primary);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-btn);
  padding: 8px 12px;
  font-family: var(--font-sans);
}

/* Cart thumbnail — frame it like the viewer (light, bordered).
 * The wp3dprinting plugin injects .p3d-cart-thumbnail; WC's own thumbnail
 * uses .wc-block-cart-item__image / td.product-thumbnail img. */
.crucible-cart-page .p3d-cart-thumbnail,
.crucible-cart-page .wc-block-cart-item__image img,
.crucible-cart-page td.product-thumbnail img {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-btn);
  background: var(--color-light-island);
  max-width: 80px;
  height: auto;
}

/* Hide broken-image placeholders (same approach as the plugin loaders;
 * naturalWidth is 0 when the src 404s, but we can't query that in CSS, so
 * hide the woocommerce-placeholder image specifically). */
.crucible-cart-page img[src*="woocommerce-placeholder"],
.crucible-cart-page img.woocommerce-placeholder {
  display: none !important;
}

/* -- Cart polish (4b.3 final pass) --------------------------------------
 *    Small-caps headers, stacked product metadata, token-styled quantity
 *    stepper, trash hover state. */

/* Small-caps headers: "Product" / "Details" / "Total" + "CART TOTALS". */
.crucible-cart-page .wc-block-cart-items__header > th,
.crucible-cart-page .wc-block-cart-items__header > th > span,
.crucible-cart-page .wc-block-cart__totals-title {
  font-family: var(--font-sans);
  font-size: var(--text-eyebrow);
  line-height: var(--text-eyebrow--line-height);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--color-text-tertiary);
}

/* Quantity stepper. */
.crucible-cart-page .wc-block-components-quantity-selector {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-btn);
  background: var(--color-bg);
  overflow: hidden;
}
.crucible-cart-page .wc-block-components-quantity-selector__input {
  background: transparent;
  border: none;
  color: var(--color-text-primary);
  font-family: var(--font-mono);
  font-size: var(--text-body-sm);
  text-align: center;
  width: 48px;
  padding: 6px 4px;
  -moz-appearance: textfield;
}
.crucible-cart-page .wc-block-components-quantity-selector__input::-webkit-outer-spin-button,
.crucible-cart-page .wc-block-components-quantity-selector__input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.crucible-cart-page .wc-block-components-quantity-selector__button {
  background: var(--color-surface-1);
  border: none;
  color: var(--color-text-secondary);
  width: 32px;
  font-size: var(--text-body);
  cursor: pointer;
  transition: background-color 100ms ease, color 100ms ease;
}
.crucible-cart-page .wc-block-components-quantity-selector__button:hover {
  background: var(--color-surface-2);
  color: var(--color-text-primary);
}
.crucible-cart-page .wc-block-components-quantity-selector__button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.crucible-cart-page .wc-block-components-quantity-selector__button--minus {
  border-right: 1px solid var(--color-border);
}
.crucible-cart-page .wc-block-components-quantity-selector__button--plus {
  border-left: 1px solid var(--color-border);
}

/* Trash / remove button. */
.crucible-cart-page .wc-block-cart-item__remove-link {
  background: transparent;
  border: none;
  color: var(--color-text-tertiary);
  padding: 6px;
  margin-left: 8px;
  border-radius: var(--radius-btn);
  cursor: pointer;
  transition: color 100ms ease, background-color 100ms ease;
  vertical-align: middle;
}
.crucible-cart-page .wc-block-cart-item__remove-link:hover {
  color: var(--color-danger);
  background: var(--color-surface-2);
}
.crucible-cart-page .wc-block-cart-item__remove-link svg {
  display: block;
  width: 18px;
  height: 18px;
}

/* -- Checkout page (Phase 4b.4) ------------------------------------------
 *    WC Checkout Block on a single WP page (page-id-9 in the dev install).
 *    DOM is wc-block-checkout (main column + sidebar). woocommerce-general
 *    is dequeued upstream — plain specificity wins. */

/* Checkout H1 layout — typography set at Tier 1. The WC checkout block
 * doesn't render its own title; the WP entry-title carries it. */
.crucible-checkout-page .entry-title,
.crucible-checkout-page h1.page-title {
  margin: 0 0 32px;
}

/* Step titles ("Contact information", "Shipping address", ...). Rendered
 * as <h2 class="wc-block-components-checkout-step__title">. */
.crucible-checkout-page .wc-block-components-checkout-step__title {
  font-family: var(--font-sans);
  font-size: var(--text-h3);
  line-height: var(--text-h3--line-height);
  font-weight: 600;
  letter-spacing: var(--tracking-h3);
  color: var(--color-text-primary);
  margin: 0 0 16px;
}

/* Saved-address card panel frame — anchors the address visually so it
 * reads as a distinct "your data, confirm or edit" block rather than
 * loose text. Matches the surface-1 panel posture used by the shipping
 * radio options below and the order-summary sidebar. The card holds two
 * spans (name + address) and an Edit link; the Edit-link float plus the
 * address span's color come from Tier 1.
 *
 * Layout: WC renders the wrapper > card > [address spans + edit link].
 * The Edit link is positioned float: right by WC's stylesheet — we keep
 * that; the panel padding clears it. Adding margin-bottom so the panel
 * doesn't kiss the "Use same address for billing" checkbox below. */
.crucible-checkout-page .wc-block-components-address-card {
  background: var(--color-surface-1);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: 16px 20px;
  margin-bottom: 16px;
}

/* Shipping radio options — surface-1 panels, surface-2 + accent border
 * when selected. Same posture as the configurator material list. The radio
 * input is position: absolute at left:16px, so the label needs left padding
 * to clear it (≈40px = 16px option pad + 16px input + 8px gap). */
.crucible-checkout-page .wc-block-components-radio-control__option {
  background: var(--color-surface-1);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: 16px 16px 16px 44px;
  margin-bottom: 8px;
  transition: border-color 100ms ease, background-color 100ms ease;
}
.crucible-checkout-page .wc-block-components-radio-control__option-checked {
  background: var(--color-surface-2);
  border-color: var(--color-accent);
}
.crucible-checkout-page .wc-block-components-radio-control__secondary-label {
  color: var(--color-text-secondary);
  font-family: var(--font-mono);
  font-size: var(--text-body-sm);
}

/* "+ Add apartment, suite, etc." pseudo-link */
.crucible-checkout-page .wc-block-components-address-form__address_2-toggle {
  color: var(--color-accent);
  font-family: var(--font-sans);
  font-size: var(--text-body-sm);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.crucible-checkout-page .wc-block-components-address-form__address_2-toggle:hover {
  color: var(--color-accent-hover);
}

/* Place-order button — visuals set at Tier 1; checkout uses the base
 * (auto width, no extra layout). Listed here as a comment anchor for
 * 4b.5 readers; no rule body needed. */

/* Return-to-cart link (secondary, ghost-style). */
.crucible-checkout-page .wc-block-components-checkout-return-to-cart-button {
  color: var(--color-text-secondary);
  font-family: var(--font-sans);
  font-size: var(--text-body-sm);
  text-decoration: none;
}
.crucible-checkout-page .wc-block-components-checkout-return-to-cart-button:hover {
  color: var(--color-accent);
}

/* -- Order summary sidebar --------------------------------------------- */

/* Apply the panel frame to the OUTER sidebar, not to inner totals-wrappers.
 * The sidebar contains multiple nested .wc-block-components-totals-wrapper
 * divs; framing each would create a stacked-panel look. */
.crucible-checkout-page .wc-block-components-sidebar {
  background: var(--color-surface-1);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: 24px;
}
.crucible-checkout-page .wc-block-components-checkout-order-summary__title-text {
  font-family: var(--font-sans);
  font-size: var(--text-h4);
  font-weight: 600;
  color: var(--color-text-primary);
}

/* Order summary thumbnails — light island, same as cart. */
.crucible-checkout-page .wc-block-components-order-summary-item__image img,
.crucible-checkout-page .p3d-cart-thumbnail {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-btn);
  background: var(--color-light-island);
}

/* Order summary item product name. */
.crucible-checkout-page .wc-block-components-product-name {
  color: var(--color-text-primary);
  font-family: var(--font-sans);
  font-weight: 500;
}

.crucible-checkout-page .wc-block-components-totals-item__label {
  color: var(--color-text-secondary);
  font-family: var(--font-sans);
}

/* Subtotal / shipping rows separator before Total. */
.crucible-checkout-page .wc-block-components-totals-footer-item {
  border-top: 1px solid var(--color-border);
  padding-top: 12px;
  margin-top: 12px;
}
.crucible-checkout-page .wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
  font-weight: 600;
  color: var(--color-text-primary);
  font-size: var(--text-h4);
}


/* "Add coupons" collapsible panel button. */
.crucible-checkout-page .wc-block-components-panel__button {
  color: var(--color-text-secondary);
  font-family: var(--font-sans);
  font-size: var(--text-body-sm);
  background: transparent;
  border: none;
  cursor: pointer;
}
.crucible-checkout-page .wc-block-components-panel__button:hover {
  color: var(--color-accent);
}

/* Terms / proceeding-with-purchase fineprint. */
.crucible-checkout-page .wc-block-checkout__terms {
  color: var(--color-text-tertiary);
  font-family: var(--font-sans);
  font-size: var(--text-body-sm);
}
.crucible-checkout-page .wc-block-checkout__terms a {
  color: var(--color-text-secondary);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.crucible-checkout-page .wc-block-checkout__terms a:hover {
  color: var(--color-accent);
}

/* -- Order-received (thank-you) page -------------------------------------
 *    Rendered at /checkout/order-received/{id}/?key={key}. Body class is
 *    crucible-checkout-page (the page lives under /checkout/). Shares the
 *    Tier 1 shop_table + address card primitives with view-order. */

/* Thank-you headline notice. */
.crucible-checkout-page .woocommerce-notice--success,
.crucible-checkout-page .woocommerce-thankyou-order-received {
  background: var(--color-surface-1);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-success);
  border-radius: var(--radius-btn);
  padding: 16px 20px;
  color: var(--color-text-primary);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  margin: 0 0 24px;
}

/* Order overview — the 5-item key:value summary (Order number, Date,
 * Email, Total, Payment method). Display as a horizontal row of compact
 * cards. */
.crucible-checkout-page .woocommerce-order-overview {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 16px;
  margin: 0 0 32px;
  padding: 20px 24px;
  background: var(--color-surface-1);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
}
.crucible-checkout-page .woocommerce-order-overview li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  padding: 0;
  font-family: var(--font-sans);
  font-size: var(--text-body-sm);
  color: var(--color-text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.crucible-checkout-page .woocommerce-order-overview li::first-line {
  /* The "Label:" portion before strong is plain text; below applies to
   * the bare label text-node. */
  letter-spacing: 0.08em;
}
.crucible-checkout-page .woocommerce-order-overview li strong {
  color: var(--color-text-primary);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  font-weight: 500;
  text-transform: none;
  letter-spacing: var(--tracking-body);
}
.crucible-checkout-page .woocommerce-order-overview .woocommerce-Price-amount {
  font-family: var(--font-mono);
  font-weight: 500;
}

/* "Order details" subheading on order-received + view-order. */
.crucible-checkout-page .woocommerce-order-details__title,
.crucible-account-page .woocommerce-order-details__title {
  font-family: var(--font-sans);
  font-size: var(--text-h3);
  line-height: var(--text-h3--line-height);
  font-weight: 600;
  letter-spacing: var(--tracking-h3);
  color: var(--color-text-primary);
  margin: 32px 0 16px;
}

/* "Pay with cash upon delivery." method-specific note that WC appends
 * just below the overview list. */
.crucible-checkout-page .woocommerce-order > p {
  color: var(--color-text-secondary);
  font-family: var(--font-sans);
  font-size: var(--text-body-sm);
  margin: 0 0 24px;
}

/* -- My-account page (Phase 4b.5) ----------------------------------------
 *    Classic-template surface (not Blocks). WC renders a two-column shell:
 *    .woocommerce-MyAccount-navigation (left rail) + .woocommerce-MyAccount-
 *    content (right). All seven sub-pages (Dashboard, Orders, Downloads,
 *    Addresses, Account details, custom Price Requests, Lost password)
 *    share this shell.
 *
 *    Tier 1 already covers: page H1, money amounts, notice banners (incl.
 *    .woocommerce-info), classic form inputs (text/email/tel/password/
 *    textarea), classic selects, native check/radio accent, and the
 *    primary CTA (woocommerce-Button.button submit). Tier 2 below adds
 *    only the my-account-specific composition. */

/* Shell — give the WC wrapper a sane two-column layout. WC ships
 * float-based defaults from woocommerce-layout.css; we keep that
 * stylesheet enqueued so the float just works. The nav is ~25%, content
 * fills the rest. */
.crucible-account-page .woocommerce-MyAccount-navigation {
  width: 25%;
  float: left;
  padding-right: 32px;
  box-sizing: border-box;
}
.crucible-account-page .woocommerce-MyAccount-content {
  width: 75%;
  float: right;
  box-sizing: border-box;
  color: var(--color-text-primary);
  font-family: var(--font-sans);
}
@media (max-width: 768px) {
  .crucible-account-page .woocommerce-MyAccount-navigation,
  .crucible-account-page .woocommerce-MyAccount-content {
    width: 100%;
    float: none;
    padding-right: 0;
  }
  .crucible-account-page .woocommerce-MyAccount-navigation {
    margin-bottom: 32px;
  }
}

/* Nav rail — vertical list, current page marked with accent left-border. */
.crucible-account-page .woocommerce-MyAccount-navigation ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.crucible-account-page .woocommerce-MyAccount-navigation-link {
  display: block;
  border-left: 2px solid transparent;
  transition: border-color 100ms ease, background-color 100ms ease;
}
.crucible-account-page .woocommerce-MyAccount-navigation-link a {
  display: block;
  padding: 10px 16px;
  color: var(--color-text-secondary);
  text-decoration: none;
  font-family: var(--font-sans);
  font-size: var(--text-body);
  transition: color 100ms ease;
}
.crucible-account-page .woocommerce-MyAccount-navigation-link a:hover {
  color: var(--color-text-primary);
}
.crucible-account-page .woocommerce-MyAccount-navigation-link.is-active {
  border-left-color: var(--color-accent);
  background: var(--color-surface-1);
}
.crucible-account-page .woocommerce-MyAccount-navigation-link.is-active a {
  color: var(--color-text-primary);
  font-weight: 500;
}
/* Logout sits visually apart — slight separator above. */
.crucible-account-page .woocommerce-MyAccount-navigation-link--customer-logout {
  margin-top: 12px;
  border-top: 1px solid var(--color-border);
  padding-top: 12px;
}
.crucible-account-page .woocommerce-MyAccount-navigation-link--customer-logout a {
  color: var(--color-text-tertiary);
}

/* Dashboard hello-message + intro. */
.crucible-account-page .woocommerce-MyAccount-content > p {
  color: var(--color-text-secondary);
  font-size: var(--text-body);
  line-height: var(--text-body--line-height);
  margin: 0 0 16px;
}
.crucible-account-page .woocommerce-MyAccount-content > p:first-of-type strong {
  color: var(--color-text-primary);
}
.crucible-account-page .woocommerce-MyAccount-content > p a {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.crucible-account-page .woocommerce-MyAccount-content > p a:hover {
  color: var(--color-accent-hover);
}

/* Orders table layout moved to Tier 1 — used by both my-account
 * (orders list, view-order) and checkout (order-received). */
/* Address card layout moved to Tier 1 — used by both my-account
 * (edit-address) and order pages (customer details columns). */

/* Form rows — first/last side-by-side, wide full-width. */
.crucible-account-page .woocommerce-EditAccountForm,
.crucible-account-page .woocommerce-ResetPassword,
.crucible-account-page form.edit-account,
.crucible-account-page form.woocommerce-address-fields {
  max-width: 640px;
}
.crucible-account-page .form-row {
  margin: 0 0 16px;
}
.crucible-account-page .form-row-first,
.crucible-account-page .woocommerce-form-row--first {
  width: calc(50% - 8px);
  float: left;
}
.crucible-account-page .form-row-last,
.crucible-account-page .woocommerce-form-row--last {
  width: calc(50% - 8px);
  float: right;
}
.crucible-account-page .form-row-wide,
.crucible-account-page .woocommerce-form-row--wide {
  width: 100%;
  clear: both;
}
/* Row pair clearance — first+last need a clearfix on the following block. */
.crucible-account-page .form-row::after {
  content: '';
  display: table;
  clear: both;
}
.crucible-account-page .form-row label {
  display: block;
  margin: 0 0 6px;
  color: var(--color-text-secondary);
  font-family: var(--font-sans);
  font-size: var(--text-body-sm);
  font-weight: 500;
}
.crucible-account-page .form-row label .required,
.crucible-account-page .form-row label .optional {
  color: var(--color-text-tertiary);
  font-weight: 400;
  margin-left: 4px;
}
.crucible-account-page .form-row .description,
.crucible-account-page .form-row em {
  display: block;
  margin: 4px 0 0;
  color: var(--color-text-tertiary);
  font-size: var(--text-body-sm);
  font-style: normal;
}

/* Fieldset (password change section on edit-account). */
.crucible-account-page fieldset {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  background: var(--color-surface-1);
  padding: 20px 24px;
  margin: 24px 0;
}
.crucible-account-page fieldset legend {
  padding: 0 8px;
  margin-left: -8px;
  color: var(--color-text-primary);
  font-family: var(--font-sans);
  font-size: var(--text-h4);
  font-weight: 600;
}

/* Login form — sits at /my-account/ when logged out. */
.crucible-account-page .woocommerce-form-login {
  max-width: 440px;
}
.crucible-account-page .woocommerce-form-login__rememberme {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--color-text-secondary);
  font-size: var(--text-body-sm);
  cursor: pointer;
}
.crucible-account-page .woocommerce-form-login__rememberme input {
  width: 16px;
  height: 16px;
  margin: 0;
}
.crucible-account-page .lost_password {
  margin: 12px 0 0;
}
.crucible-account-page .lost_password a {
  color: var(--color-text-secondary);
  font-size: var(--text-body-sm);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.crucible-account-page .lost_password a:hover {
  color: var(--color-accent);
}

/* Misc action buttons that aren't the page's primary CTA — the
 * "Browse products" link on the empty orders state, "Pay" / "Cancel" /
 * "View" on order rows. Keep them as ghost buttons; the page's accent
 * budget stays with the form submits. */
.crucible-account-page .woocommerce-MyAccount-content a.button:not(.woocommerce-Button),
.crucible-account-page table.shop_table a.button {
  background: transparent;
  color: var(--color-text-primary);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-btn);
  padding: 8px 14px;
  font-family: var(--font-sans);
  font-size: var(--text-body-sm);
  font-weight: 500;
  text-decoration: none;
  display: inline-block;
  transition: border-color 100ms ease, color 100ms ease;
}
.crucible-account-page .woocommerce-MyAccount-content a.button:not(.woocommerce-Button):hover,
.crucible-account-page table.shop_table a.button:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

/* The empty-state "Make one" button uses .woocommerce-Button.button
 * which Tier 1 promotes to primary forge-amber. The wc-forward class
 * adds a → arrow via ::after below.
 *
 * Layout: WC renders the empty-orders notice as one block —
 *   <div class="woocommerce-info">No orders yet. <a class="...wc-forward...">Make one</a></div>
 * WC's woocommerce-layout.css sets `float: right` on .button, which leaves
 * the CTA dangling at the right edge and overflowing the notice. Stacking
 * the notice as a column flex container puts the text on row 1 and the
 * link on row 2, both left-aligned. Killing the float lets the link sit
 * cleanly inside the panel padding. */
.crucible-account-page .woocommerce-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}
.crucible-account-page .woocommerce-info .woocommerce-Button {
  float: none;
  margin: 0;
}

.crucible-account-page .woocommerce-Button.wc-forward::after {
  content: ' →';
}

/* -- Quote-page value strip (Phase 4b.6) ---------------------------------
 *    Two-up grid (BULK PRICING | RUSH DELIVERY) rendered by page-quote.php
 *    AFTER the_content() — sits below the WC product/configurator block
 *    inside the page-container, separated by a top divider.
 *
 *    ADP's default injection into .summary.entry-summary is suppressed via
 *    `add_filter('wdp_product_bulk_table_action', '__return_empty_array')`
 *    in inc/woocommerce.php — the table is rendered here via the
 *    [adp_product_bulk_rules_table id="N"] shortcode so layout is in git
 *    and not coupled to a Customizer setting.
 *
 *    Plugin DOM consumed in this section:
 *      span.wdp_bulk_table_content
 *        └─ div.bulk_table
 *           ├─ div.wdp_pricing_table_caption (hidden — we render our own eyebrow)
 *           └─ table.wdp_pricing_table
 *              ├─ thead > tr > td × 3 (Quantity / Discount / Discounted price)
 *              └─ tbody > tr[data-min] > td × 3 (last has .woocommerce-Price-amount.amount) */

.crucible-quote-page .quote-value-strip {
  margin: 48px 0 0;
  padding: 48px 0 0;
  border-top: 1px solid var(--color-border);
}
@media (max-width: 768px) {
  .crucible-quote-page .quote-value-strip {
    margin-top: 32px;
    padding-top: 32px;
  }
}

/* Section heading — single h2 above both cells. Concrete two-word label
 * tells a scrolling user what this band is about; matches BRAND.md H2
 * (32px / 700 / -0.02em). */
.crucible-quote-page .quote-value-strip__heading {
  font-family: var(--font-sans);
  font-size: var(--text-h2);
  line-height: var(--text-h2--line-height);
  font-weight: 700;
  letter-spacing: var(--tracking-h2);
  color: var(--color-text-primary);
  margin: 0 0 24px;
}
@media (max-width: 768px) {
  .crucible-quote-page .quote-value-strip__heading {
    font-size: var(--text-h3);
    line-height: var(--text-h3--line-height);
  }
}

.crucible-quote-page .quote-value-strip__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}
@media (max-width: 768px) {
  .crucible-quote-page .quote-value-strip__grid {
    grid-template-columns: 1fr;
  }
}

.crucible-quote-page .quote-value-strip__cell {
  background: var(--color-surface-1);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: 24px;
  min-width: 0;
}

.crucible-quote-page .quote-value-strip__eyebrow {
  font-family: var(--font-sans);
  font-size: var(--text-eyebrow);
  line-height: var(--text-eyebrow--line-height);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--color-text-tertiary);
  margin: 0 0 16px;
}

/* Lede — short framing line under the eyebrow, before either the bulk
 * pricing table (pricing cell) or the body paragraphs (delivery cell).
 * Primary text color so it reads as the offer summary, not commentary. */
.crucible-quote-page .quote-value-strip__lede {
  margin: 0 0 16px;
  color: var(--color-text-primary);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--text-body--line-height);
  font-weight: 500;
}

/* Delivery body — text-secondary, generous line-height. Carries the
 * page's only lead-time language (three production tiers). */
.crucible-quote-page .quote-value-strip__delivery .quote-value-strip__body {
  color: var(--color-text-secondary);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--text-body--line-height);
}
.crucible-quote-page .quote-value-strip__delivery p {
  margin: 0 0 12px;
}
.crucible-quote-page .quote-value-strip__delivery p:last-child {
  margin: 0;
}

/* -- ADP bulk-pricing table inside the strip -----------------------------
 *    Hide the plugin's internal caption — the strip already labels it via
 *    our .quote-value-strip__eyebrow. Strip the plugin's outer <span> /
 *    inner <div> chrome so the table sits flush. */

.crucible-quote-page .quote-value-strip__bulk .wdp_pricing_table_caption,
.crucible-quote-page .quote-value-strip__bulk .wdp_pricing_table_footer {
  display: none;
}
.crucible-quote-page .quote-value-strip__bulk .wdp_bulk_table_content,
.crucible-quote-page .quote-value-strip__bulk .bulk_table {
  display: block;
  margin: 0;
  padding: 0;
}
.crucible-quote-page .quote-value-strip__bulk .clear {
  display: none;
}

/* The table itself — overrides ADP's defaults plus Tier 1's classic
 * shop_table rules (which don't apply here since this isn't a .shop_table,
 * but state the typography explicitly so we're not relying on cascade). */
.crucible-quote-page .quote-value-strip__bulk .wdp_pricing_table {
  width: 100%;
  border-collapse: collapse;
  margin: 0;
  background: transparent;
  font-family: var(--font-sans);
}

/* ADP's plugin stylesheet (pricing-table.css) paints the <thead> element
 * itself with a light-gray bg — that shows through our transparent <td>s
 * as a banded row. Painting thead transparent fixes the visual. Same with
 * tbody for completeness. No !important needed here because the gray comes
 * from the plugin stylesheet, not the wp_head inline overrides. */
.crucible-quote-page .quote-value-strip__bulk .wdp_pricing_table thead,
.crucible-quote-page .quote-value-strip__bulk .wdp_pricing_table tbody,
.crucible-quote-page .quote-value-strip__bulk .wdp_pricing_table tr {
  background: transparent;
}

/* Header cells — ADP emits <td> not <th>, target both for resilience. */
.crucible-quote-page .quote-value-strip__bulk .wdp_pricing_table thead td,
.crucible-quote-page .quote-value-strip__bulk .wdp_pricing_table thead th {
  font-family: var(--font-sans);
  font-size: var(--text-eyebrow);
  line-height: var(--text-eyebrow--line-height);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  text-align: left;
  padding: 8px 12px;
  border: none;
  border-bottom: 1px solid var(--color-border);
  /* ⚠ !important is load-bearing here. ADP's CustomizerExtensions
   * (Includes/CustomizerExtensions/CustomizerExtensions.php:55) prints an
   * inline <style> in wp_head with `! important` declarations on
   * `.wdp_bulk_table_content table thead td { color, background-color }`.
   * That callback is registered as an anonymous closure on wp_head — not
   * removable via remove_action. Inline `!important` only loses to a
   * matching-or-stronger `!important`. Scope is tied to our wrapper class
   * so we never repaint ADP tables outside this page. */
  background: transparent !important;
  color: var(--color-text-tertiary) !important;
}

/* Body cells. */
.crucible-quote-page .quote-value-strip__bulk .wdp_pricing_table tbody td {
  padding: 12px;
  font-family: var(--font-sans);
  font-size: var(--text-body);
  border: none;
  border-bottom: 1px solid var(--color-border);
  vertical-align: middle;
  /* Counter ADP's wp_head inline override — see thead note above. The
   * per-column rules below set their own color/font; this base must clear
   * the white bg and tertiary text color first. */
  background: transparent !important;
  color: var(--color-text-primary) !important;
}
.crucible-quote-page .quote-value-strip__bulk .wdp_pricing_table tbody tr:last-child td {
  border-bottom: none;
}

/* Right-align the discount and price columns (cols 2 + 3). */
.crucible-quote-page .quote-value-strip__bulk .wdp_pricing_table thead td:nth-child(2),
.crucible-quote-page .quote-value-strip__bulk .wdp_pricing_table thead td:nth-child(3),
.crucible-quote-page .quote-value-strip__bulk .wdp_pricing_table tbody td:nth-child(2),
.crucible-quote-page .quote-value-strip__bulk .wdp_pricing_table tbody td:nth-child(3) {
  text-align: right;
}

/* Per-column color overrides — each carries `!important` to win against
 * ADP's inline color rule on `.wdp_bulk_table_content table tbody td`
 * (see the wp_head closure note above). */

/* Quantity column reads as a range — mono so the dashes align. */
.crucible-quote-page .quote-value-strip__bulk .wdp_pricing_table tbody td:nth-child(1) {
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  color: var(--color-text-secondary) !important;
}

/* Discount column — mono, accent on the savings to draw the eye. */
.crucible-quote-page .quote-value-strip__bulk .wdp_pricing_table tbody td:nth-child(2) {
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  font-weight: 500;
  color: var(--color-accent) !important;
}

/* Discounted price — mono, primary text color (Tier 1 already does this
 * via .crucible-shop-page .amount, but state it locally for clarity). */
.crucible-quote-page .quote-value-strip__bulk .wdp_pricing_table tbody td:nth-child(3) {
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  font-weight: 500;
  color: var(--color-text-primary) !important;
}
.crucible-quote-page .quote-value-strip__bulk .wdp_pricing_table .woocommerce-Price-amount {
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  font-weight: 500;
  color: var(--color-text-primary);
}