/* ============================================================================
   OD store UX -- Bundles A + B (approved 2026-10-19). od-store-ux-1-0-0.css
   Loaded by mu-plugin od-store-ux-bundles-ab.php AFTER od-style + od-store-tiles.
   A = store chrome (chip counts, archive gap, SOLD OUT/ribbon overlap, sidebar heading).
   B = single-product template (SKU eyebrow, actions row, trust strip, volume table).
   Chrome-CSS only; no content or product-data change. Revert: scripts/store_ux_ab_deploy.py --revert.
   Source of the A/B blocks: approved mockups bundle-a.css / bundle-b.css, verbatim,
   plus the Additions block at the bottom (sidebar heading, empty Reviews item, phone rules).
   ============================================================================ */


/* A1 — category chip counts: readable on inactive chips (was rgba(255,255,255,.6) on #f5f7fa). */
.wd-nav-product-cat > li:not(.wd-active):not(.current-menu-item) .nav-link-count {
  color: #5b6578 !important;
  transition: none;
}

/* A2 — remove the dead band between the chip strip and the products (store + category archives). */
body.woocommerce-shop .wd-page-title,
body.tax-product_cat .wd-page-title { margin-bottom: 0 !important; }
body.woocommerce-shop .wd-content-layout,
body.tax-product_cat .wd-content-layout { padding-top: 20px !important; }

/* A3 — one stock label per card: when the "More Stock Coming Soon" ribbon (Advanced Woo Labels)
   is present, hide Woodmart's overlapping SOLD OUT pill. */
.wd-product:has(.advanced-woo-labels) .product-labels .out-of-stock { display: none !important; }
/* Grey the image slightly so the restocking state still reads at a glance. */
.wd-product.outofstock .wd-product-thumb img { opacity: .72; }

.single-product .od-sku-line { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.single-product .od-sku { font: 500 13px/1 ui-monospace, "SFMono-Regular", Menlo, monospace; letter-spacing: .04em; color: #4a5568; background: #f1f5f1; border: 1px solid #dfe7df; border-radius: 4px; padding: 5px 8px; }
.single-product .od-copy { font: 600 12px/1 Poppins, sans-serif; color: var(--wd-primary-color, #008000); background: none; border: 0; padding: 4px; cursor: pointer; text-transform: none; min-height: 0; }

/* Price line holds only the price now; the CTA moved to the action row. */
.single-product .summary p.price .btn-single-product { display: none !important; }

.single-product .od-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 6px 0 4px; }
.single-product .od-actions a.button { text-transform: none; font-weight: 600; border-radius: 6px; min-height: 42px; padding: 0 18px; display: inline-flex; align-items: center; gap: 8px; letter-spacing: 0; }
.single-product .od-btn-outline { background: #fff !important; color: var(--wd-primary-color, #008000) !important; box-shadow: inset 0 0 0 2px var(--wd-primary-color, #008000) !important; }
.single-product .od-btn-outline:hover { background: #eef7ee !important; }
.single-product .od-btn-primary { background: var(--wd-primary-color, #008000) !important; color: #fff !important; }

.single-product .od-trust { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 14px 0 6px; padding: 10px 0; border-top: 1px solid #e6ebe6; border-bottom: 1px solid #e6ebe6; font-size: 14px; color: #4a5568; }
.single-product .od-trust span::before { content: "✓"; color: var(--wd-primary-color, #008000); font-weight: 700; margin-right: 6px; }

/* Volume pricing table */
.single-product .od-tiers { width: 100%; border-collapse: collapse; margin: 6px 0 8px; font-variant-numeric: tabular-nums; }
.single-product .od-tiers th { font: 600 12px/1.2 Poppins, sans-serif; text-transform: uppercase; letter-spacing: .05em; color: #6b7280; text-align: left; padding: 8px 10px; border-bottom: 1px solid #e6ebe6; }
.single-product .od-tiers td { padding: 9px 10px; border-bottom: 1px solid #eef1ee; }
.single-product .od-tiers td.od-save { color: var(--wd-primary-color, #008000); font-weight: 600; }
.single-product .od-tiers tr.od-current td { background: #eef7ee; }
.single-product .od-tiers tr.od-current td:first-child { box-shadow: inset 3px 0 0 var(--wd-primary-color, #008000); }

/* ---- Additions (not in the mockup CSS) ---- */
/* A4: heading printed by the mu-plugin before the first spec facet (matches the price widget title). */
.od-facets-heading { margin-bottom: 10px; }
/* B5: the mu-plugin swaps an empty Reviews tab body for <span class="od-no-reviews">; hide the whole item. */
.single-product .d-accordion__item:has(.od-no-reviews) { display: none !important; }
/* B: the table heading is now server-rendered with a class. */
.single-product .od-tiers-title { margin-bottom: 4px; }
/* Phone: actions wrap to full-width buttons; long part numbers wrap. */
@media (max-width: 575px) {
  .single-product .od-actions a.button { flex: 1 1 100%; justify-content: center; }
  .single-product .od-sku { overflow-wrap: anywhere; }
  .single-product .od-sku-line { flex-wrap: wrap; }
}