/* =========================================================
   Rotomec Parts Manual — rpm-style.css  v2.5
   Brand: Rotomec USA — rotomecusa.com
   Colors: Red #CC1111, Gray #383838 (matches rotomecusa.com site header), White #ffffff
   Layout: Diagram LEFT, Parts list RIGHT (side by side)
   ========================================================= */

/* ---------- Reset / Root ---------- */
.rpm-wrap *,
.rpm-wrap *::before,
.rpm-wrap *::after { box-sizing: border-box; margin: 0; padding: 0; }

.rpm-wrap {
  --rpm-red:      #CC1111;
  --rpm-red-dk:   #a00e0e;
  --rpm-red-lt:   #f9e8e8;
  --rpm-dark:     #383838;
  --rpm-mid:      #2b2b2b;
  --rpm-border:   #dde1e7;
  --rpm-bg:       #f5f6f8;
  --rpm-white:    #ffffff;
  --rpm-text:     #1a1a1a;
  --rpm-muted:    #6b7280;
  --rpm-accent:   #f0f2f5;
  --rpm-radius:   6px;
  --rpm-shadow:   0 2px 10px rgba(0,0,0,.08);

  font-family: 'Noto Sans', sans-serif;
  font-size: 14px;
  color: var(--rpm-text);
  background: var(--rpm-bg);
  border: 1px solid var(--rpm-border);
  border-radius: 10px;
  overflow: hidden;
  max-width: 1400px;
  margin: 0 auto 40px;
  box-shadow: var(--rpm-shadow);
}

/* ---------- Header ---------- */
.rpm-header {
  background: var(--rpm-white);
  border-bottom: 3px solid var(--rpm-red);
  padding: 14px 24px;
}
.rpm-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}
.rpm-logo-wrap { display: flex; align-items: center; gap: 14px; }
.rpm-logo-img  { height: 32px; width: auto; display: block; }
.rpm-logo-divider {
  width: 1px; height: 28px;
  background: #ddd;
}
.rpm-logo-title {
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: var(--rpm-dark);
  letter-spacing: .02em;
  text-transform: uppercase;
}
.rpm-logo-subtitle {
  font-size: 10px;
  color: var(--rpm-muted);
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-top: 1px;
}
.rpm-model-badge {
  background: var(--rpm-red);
  color: var(--rpm-white);
  font-size: 11px;
  font-weight: 700;
  padding: 5px 14px;
  border-radius: 20px;
  letter-spacing: .04em;
}

/* ---------- Toolbar ---------- */
.rpm-toolbar {
  background: var(--rpm-white);
  border-bottom: 1px solid var(--rpm-border);
  padding: 12px 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

/* Search */
.rpm-search-wrap {
  position: relative;
  flex: 1 1 220px;
  min-width: 180px;
}
.rpm-search-icon {
  position: absolute;
  right: 10px; top: 50%;
  transform: translateY(-50%);
  width: 15px; height: 15px;
  color: var(--rpm-muted);
  pointer-events: none;
}
.rpm-search {
  width: 100%;
  padding: 8px 32px 8px 10px;
  border: 1px solid var(--rpm-border);
  border-radius: var(--rpm-radius);
  font-size: 13px;
  background: var(--rpm-bg);
  transition: border-color .2s, box-shadow .2s;
}
.rpm-search:focus {
  outline: none;
  border-color: var(--rpm-red);
  box-shadow: 0 0 0 3px rgba(204,17,17,.1);
}
.rpm-search-clear {
  /* v2.7.3+: anchored to the RIGHT edge (was left, which placed the X
     on top of the user's typed text). When the user has typed
     anything the magnifier icon hides and the X takes its place
     in the same right slot — see the .rpm-search-active rule below. */
  position: absolute; right: 6px; top: 50%;
  transform: translateY(-50%);
  background: none; border: none; cursor: pointer;
  color: var(--rpm-muted); font-size: 14px; padding: 4px; line-height: 1; display: none;
}
.rpm-search-clear:hover { color: var(--rpm-red); }
.rpm-search-clear.visible { display: block; }
/* When the user has typed something the wrap goes into search-active
   mode — swap the magnifier for the X (which is already pinned at the
   right edge above). */
.rpm-search-active .rpm-search-icon { display: none; }

/* Model filter */
.rpm-filters { display: flex; gap: 5px; flex-wrap: wrap; align-items: center; }
.rpm-filter-label { font-size: 11px; color: var(--rpm-muted); font-weight: 700; white-space: nowrap; text-transform: uppercase; letter-spacing: .05em; }
.rpm-filter-btn {
  background: var(--rpm-accent);
  border: 1px solid var(--rpm-border);
  border-radius: 4px;
  padding: 5px 11px;
  font-size: 12px; font-weight: 600;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
  white-space: nowrap;
}
.rpm-filter-btn:hover { background: #e2e5ea; }
.rpm-filter-btn.rpm-btn-active {
  background: var(--rpm-red);
  color: var(--rpm-white);
  border-color: var(--rpm-red-dk);
}

/* Cart notice */
.rpm-cart-notice {
  background: #ecfdf5; border: 1px solid #6ee7b7;
  border-radius: var(--rpm-radius);
  padding: 6px 12px; font-size: 12px; color: #065f46;
  display: flex; align-items: center; gap: 10px;
}
.rpm-view-cart { color: #065f46; font-weight: 700; text-decoration: underline; white-space: nowrap; }
.rpm-cart-notice.rpm-cart-error { background: #fef2f2; border-color: #fca5a5; color: #991b1b; }

/* ---------- Section Nav ---------- */
.rpm-section-nav {
  background: var(--rpm-dark);
  display: flex; flex-wrap: wrap; gap: 0;
  /* v2.15.3+: dropped "overflow-x: auto" — flex-wrap already wraps the
     tabs across multiple rows so it was doing nothing visible. Setting
     overflow on one axis forces the other axis to also become "auto"
     per CSS spec, which made tall nav strips (e.g. PHD has 20+ sections)
     show a stray vertical scrollbar when wrapped tab rows ended up just
     a few pixels taller than the container. Removing the property
     restores the default "overflow: visible" on both axes. */
  border-bottom: 3px solid var(--rpm-red);
}
.rpm-nav-btn {
  background: none; border: none;
  color: #9ca3af;
  font-size: 12px; font-weight: 600;
  padding: 10px 16px; cursor: pointer;
  white-space: nowrap;
  border-bottom: 3px solid transparent;
  position: relative; bottom: -3px;
  transition: color .15s, border-color .15s;
  letter-spacing: .03em; text-transform: uppercase;
}
.rpm-nav-btn:hover { color: var(--rpm-white); }
.rpm-nav-btn.rpm-nav-active { color: var(--rpm-white); border-bottom-color: var(--rpm-red); }
/* Section-level model filter (v2.6.0+): nav buttons whose section.models
   doesn't include the selected model are hidden from the strip. */
.rpm-nav-btn.rpm-nav-hidden { display: none; }

/* ---------- Sections ---------- */
.rpm-section { display: none; padding: 20px; }
.rpm-section.rpm-section-active { display: block; }
/* Section panels for sections hidden by the model filter — even if a
   stale "active" class lingered, the hidden rule wins. */
.rpm-section.rpm-section-hidden,
.rpm-section.rpm-section-active.rpm-section-hidden { display: none; }

/* v2.7.0+: cross-section search.
   When the search box has text, the wrap gets .rpm-search-active and
   EVERY section (not hidden by the model filter and not flagged
   section-search-hidden by the JS) becomes visible at once. Diagrams
   collapse so the results read like a typical search-results page —
   stacked section headers + filtered tables, no big illustration
   between each. Clearing the search snaps back to the single-section
   view. */
.rpm-search-active .rpm-section { display: block; }
.rpm-search-active .rpm-section.rpm-section-hidden,
.rpm-search-active .rpm-section.rpm-section-search-hidden { display: none; }
.rpm-search-active .rpm-diagram-col { display: none; }
.rpm-search-active .rpm-parts-col   { width: 100%; }
/* A subtle divider between consecutive section blocks helps the eye
   when stacking 5+ matching sections vertically. */
.rpm-search-active .rpm-section + .rpm-section { border-top: 1px solid var(--rpm-border, #e5e7eb); }
/* v2.7.6+: every part row is clickable — in search mode it jumps the
   user to that row's section (with row + pin highlight); in normal
   mode it just highlights the row + flashes the matching hotspot pin
   on the diagram. Cursor + hover wash give the affordance. */
.rpm-part-row { cursor: pointer; }
.rpm-part-row:hover {
  background: var(--rpm-red-lt, #fef2f2);
}
/* The currently-highlighted row should "win" against the hover wash. */
.rpm-part-row.rpm-row-highlight:hover {
  background: var(--rpm-red-lt) !important;
}

/* v2.7.3+: one-shot "growing into the highlighted state" animation
   for the hotspot pin matched by a search-result click. The pin
   bumps from scale(1) → scale(1.55) (briefly oversized so the user
   notices it) → settles at scale(1.3) — which matches the existing
   .rpm-hs-active size, so when JS removes .rpm-pin-pulse a moment
   later the pin stays put. translate(-50%, -50%) is repeated in
   every keyframe because the base .rpm-hotspot uses transform to
   center on its anchor point; omitting it here would override
   that and make the pin jump off-center during the animation. */
.rpm-hotspot.rpm-pin-pulse {
  animation: rpm-pin-pulse 0.5s ease-out 1 forwards;
}
@keyframes rpm-pin-pulse {
  0% {
    transform: translate(-50%, -50%) scale(1);
    box-shadow: 0 0 0 0 rgba(204, 17, 17, 0.55);
  }
  60% {
    transform: translate(-50%, -50%) scale(1.55);
    box-shadow: 0 0 0 12px rgba(204, 17, 17, 0);
  }
  100% {
    transform: translate(-50%, -50%) scale(1.3);
    box-shadow: 0 0 0 0 rgba(204, 17, 17, 0);
  }
}

/* No-diagram sections (v2.6.0+): the diagram column simply isn't
   rendered. .rpm-content-row's flex layout naturally gives the parts
   column the full width since it's the only child, but make it explicit
   so any future CSS doesn't accidentally constrain it. */
.rpm-section-no-diagram .rpm-content-row { display: block; }
.rpm-section-no-diagram .rpm-parts-col   { width: 100%; }

.rpm-sec-header { margin-bottom: 16px; }
.rpm-sec-title { font-family: 'Montserrat', sans-serif; font-size: 17px; font-weight: 700; color: var(--rpm-dark); }
.rpm-sec-desc  { font-size: 13px; color: var(--rpm-muted); margin-top: 3px; }

/* v2.9.0+: SKU references inside section + row descriptions get
   click-to-jump linkified by the PHP renderer. Style as a soft
   red dotted underline so the affordance reads without competing
   with the surrounding prose. Hover firms up to a solid underline. */
.rpm-sku-link {
  color: var(--rpm-red);
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 2px;
  cursor: pointer;
  font-weight: 600;
  white-space: nowrap;
}
.rpm-sku-link:hover,
.rpm-sku-link:focus {
  color: var(--rpm-red-dk);
  text-decoration-style: solid;
  outline: none;
}

/* ---------- SIDE-BY-SIDE LAYOUT ---------- */
.rpm-content-row {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

/* Diagram — LEFT, sticky while scrolling table */
.rpm-diagram-col {
  flex: 0 0 52%;
  max-width: 52%;
  position: sticky;
  top: 20px;
}

/* Parts table — RIGHT, scrollable */
.rpm-parts-col {
  flex: 1 1 0;
  min-width: 0;
}

/* ---------- Diagram ---------- */
.rpm-diagram-wrap {
  background: #f0f2f5;
  border: 1px solid var(--rpm-border);
  border-radius: var(--rpm-radius);
  padding: 10px;
  /* v2.14.0+: clip the diagram-inner when it's CSS-transformed up
     beyond the wrap's bounds (zoom + pan). Without overflow:hidden the
     scaled image would overflow and push the layout around. */
  position: relative;
  overflow: hidden;
}
.rpm-diagram-inner {
  position: relative;
  display: block;
  width: 100%;
  /* v2.14.0+: the JS pans + zooms by setting an inline `transform` on
     this element. transform-origin: center grows the image symmetrically
     from the centre, which is the most intuitive feel when clicking the
     +/- buttons. transition makes the click-zoom smooth; the JS removes
     the transition during drag-pan so the image follows the cursor 1:1. */
  transform-origin: center center;
  transition: transform 0.18s ease-out;
  will-change: transform;
}
.rpm-diagram-wrap.rpm-zoomed .rpm-diagram-inner { cursor: grab; }
.rpm-diagram-wrap.rpm-dragging .rpm-diagram-inner {
  cursor: grabbing;
  transition: none;
}
.rpm-diagram-img {
  width: 100%; height: auto;
  display: block; border-radius: 4px;
  user-select: none;
}

/* v2.14.0+: zoom + pan controls — small button stack pinned to the
   top-right corner of the diagram. Sits OUTSIDE .rpm-diagram-inner so
   the buttons don't scale with the image. */
.rpm-zoom-controls {
  position: absolute;
  top: 14px;
  right: 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  z-index: 5;
}
.rpm-zoom-btn {
  width: 30px;
  height: 30px;
  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  padding: 0;
  color: var(--rpm-dark);
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  transition: background 0.12s, border-color 0.12s, color 0.12s, transform 0.08s;
  -webkit-user-select: none;
  user-select: none;
}
.rpm-zoom-btn:hover {
  background: #fff;
  border-color: var(--rpm-red);
  color: var(--rpm-red);
}
.rpm-zoom-btn:active { transform: scale(0.93); }
.rpm-zoom-btn:focus-visible {
  outline: 2px solid var(--rpm-red);
  outline-offset: 1px;
}
.rpm-zoom-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  background: rgba(255,255,255,0.6);
  color: var(--rpm-muted);
  border-color: rgba(0,0,0,0.08);
}
.rpm-hotspot-layer {
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
}
.rpm-hotspot {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--rpm-red);
  color: #fff;
  font-size: 8px; font-weight: 800;
  border: 2px solid #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,.35);
  cursor: pointer; pointer-events: all;
  transition: transform .15s, background .15s;
  display: flex; align-items: center; justify-content: center;
  line-height: 1; z-index: 5;
}
.rpm-hotspot:hover,
.rpm-hotspot.rpm-hs-active {
  background: var(--rpm-dark);
  transform: translate(-50%,-50%) scale(1.3);
  z-index: 6;
}
/* v2.11.1+: per-section "small" pin size for dense diagrams (set via
   'hotspot_size' => 'small' on the section in parts.php). The class
   sits on the .rpm-section wrapper so every pin inside its hotspot
   layer shrinks proportionally. Hover/active scale(1.3) still applies
   because it's a transform multiplier — the small pin grows to ~13px
   on hover, which keeps the click target tolerable on desktop.
   v2.11.2 tightened these from 16px to 10px after testing showed
   the 1xx-tiller Frame (89 refs) still had overlapping pins. */
.rpm-hotspots-small .rpm-hotspot {
  width: 12px; height: 12px;
  font-size: 6px; font-weight: 800;
  border-width: 1px;
}
/* v2.11.3+: bump the hover/active scale for small pins. With a 10px
   base, the standard scale(1.3) only grows to ~13px — too subtle to
   notice. scale(2.4) takes it to ~24px (matches normal-pin size) so
   the affordance is unmistakable, while leaving the pin tiny at rest. */
.rpm-hotspots-small .rpm-hotspot:hover,
.rpm-hotspots-small .rpm-hotspot.rpm-hs-active {
  transform: translate(-50%,-50%) scale(2.4);
}
/* And the click-pulse settles at the same enlarged "active" size for
   small pins so the pin doesn't snap back to tiny after the pulse. */
.rpm-hotspots-small .rpm-hotspot.rpm-pin-pulse {
  animation: rpm-pin-pulse-small 0.5s ease-out 1 forwards;
}
@keyframes rpm-pin-pulse-small {
  0% {
    transform: translate(-50%, -50%) scale(1);
    box-shadow: 0 0 0 0 rgba(204, 17, 17, 0.55);
  }
  60% {
    transform: translate(-50%, -50%) scale(2.7);
    box-shadow: 0 0 0 10px rgba(204, 17, 17, 0);
  }
  100% {
    transform: translate(-50%, -50%) scale(2.4);
    box-shadow: 0 0 0 0 rgba(204, 17, 17, 0);
  }
}
.rpm-diagram-hint {
  font-size: 11px; color: var(--rpm-muted);
  margin-top: 8px; text-align: center; font-style: italic;
}

/* ---------- Table ---------- */
.rpm-table-wrap {
  overflow-x: auto;
  border-radius: var(--rpm-radius);
  border: 1px solid var(--rpm-border);
  max-height: 780px;
  overflow-y: auto;
}
.rpm-table {
  width: 100%; border-collapse: collapse;
  font-size: 12px; background: var(--rpm-white);
}
.rpm-table thead tr { background: var(--rpm-dark); position: sticky; top: 0; z-index: 2; }
.rpm-table th {
  color: var(--rpm-white); font-weight: 600;
  padding: 7px 8px; text-align: left;
  font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
  white-space: nowrap;
}
.rpm-table tbody tr { border-bottom: 1px solid var(--rpm-border); transition: background .1s; line-height: 1; }
.rpm-table tbody tr:last-child { border-bottom: none; }
.rpm-table tbody tr:hover { background: #f5f8ff; }
.rpm-table tbody tr.rpm-row-hidden { display: none; }
.rpm-table td { padding: 4px 8px; vertical-align: middle; line-height: 1.3; }

/* Unavailable rows (v2.5.1+) — parts without a WC product or with a $0 price.
   Subtle fade so the eye skips them when scanning for orderable parts, but
   the data stays readable for diagnostic / discontinued-lookup use cases. */
.rpm-table tbody tr.rpm-row-unavailable { opacity: 0.55; }
.rpm-table tbody tr.rpm-row-unavailable:hover { opacity: 0.9; background: #fafafa; }
.rpm-no-cart {
  display: inline-block; color: #9ca3af; font-size: 14px; cursor: help;
  user-select: none; padding: 0 4px;
}
.rpm-popup-row-unavail { opacity: 0.6; }
.rpm-popup-row-unavail .rpm-popup-row-desc { font-style: italic; }

/* Column widths */
.rpm-col-ref    { width: 36px; }
.rpm-col-sku    { width: 118px; }
.rpm-col-qty    { width: 30px; text-align: center; }
.rpm-col-models { width: 78px; }
.rpm-col-action { min-width: 32px; text-align: center; }
.rpm-col-desc   { min-width: 180px; }

/* v3.7.0+ — no-WooCommerce (Befco) price column + discontinued treatment.
   Kept tight (small font, no badge box, trimmed cell padding) so the extra
   column doesn't push the side-by-side parts table into horizontal scroll. */
.rpm-col-price  { width: 58px; text-align: right; }
.rpm-table th.rpm-col-price,
.rpm-table td.rpm-col-price { padding-left: 4px; padding-right: 6px; }
.rpm-price {
  /* Match the 12px table body weight so prices don't read heavier than the
     rest of the row (bold made them look oversized). */
  font-size: 12px; font-weight: 400; color: var(--rpm-dark);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.rpm-discontinued-tag { font-size: 11px; font-weight: 600; color: #b45309; white-space: nowrap; }
.rpm-no-price { color: #9ca3af; }

/* Befco (no-WC) only: recover the width the List Price column adds by
   tightening the part-number and description columns. Rotomec (WC) is
   untouched. */
.rpm-mode-nowc .rpm-col-sku  { width: 96px; }
.rpm-mode-nowc .rpm-col-desc { min-width: 140px; }

/* v3.7.4+ — auto-added "(replaces X)" replacement rows: kept subtle so they
   read as the current part without dominating the table — a faint tint, ONE
   thin accent on the left edge of the row (not every cell), and a small
   "new" ref badge. */
.rpm-table tbody tr.rpm-row-replacement > td { background: #f7fcf9; }
.rpm-table tbody tr.rpm-row-replacement > td:first-child { box-shadow: inset 2px 0 0 #a7d8b9; }
.rpm-table tbody tr.rpm-row-replacement .rpm-ref-badge {
  background: #15803d; color: #fff; font-size: 9px; letter-spacing: .02em;
}

/* v3.8.0+ — Email order form (no-WooCommerce / Befco) */
.rpm-add-order {
  margin-left: 6px; padding: 2px 8px; font-size: 11px; font-weight: 700;
  color: var(--rpm-red, #CC1111); background: var(--rpm-red-lt, #fdeaea);
  border: 1px solid var(--rpm-red, #CC1111); border-radius: 4px;
  cursor: pointer; white-space: nowrap; vertical-align: middle;
}
.rpm-add-order:hover  { background: var(--rpm-red, #CC1111); color: #fff; border-color: #888; }
/* Brief on-brand "✓ Added" flash (no green). */
.rpm-add-order.rpm-added { background: var(--rpm-red, #CC1111); color: #fff; border-color: #888; }

/* Floating "Order (N)" button */
.rpm-order-fab {
  position: fixed; right: 18px; bottom: 18px; z-index: 9998;
  padding: 7px 14px; font-size: 13px; font-weight: 700;
  color: var(--rpm-red, #CC1111);
  background: var(--rpm-red-lt, #fdeaea);
  border: 1.5px solid var(--rpm-red, #CC1111); border-radius: 24px;
  box-shadow: 0 3px 10px rgba(0,0,0,.18); cursor: pointer;
}
.rpm-order-fab:hover { background: var(--rpm-red, #CC1111); color: #fff; border-color: #888; }
.rpm-order-fab .rpm-order-count {
  display: inline-block; min-width: 18px; margin-left: 5px; padding: 0 6px;
  background: var(--rpm-red, #CC1111); color: #fff; border-radius: 11px; text-align: center; font-size: 12px;
}
.rpm-order-fab:hover .rpm-order-count { background: #fff; color: var(--rpm-red, #CC1111); }
.rpm-order-fab-bump { animation: rpm-fab-bump .3s ease; }
@keyframes rpm-fab-bump { 50% { transform: scale(1.12); } }

/* Overlay + slide-in panel. z-index sits above the WP admin bar (99999) and
   typical sticky site headers so the panel's own header isn't covered. */
.rpm-order-overlay {
  position: fixed; inset: 0; z-index: 1000000; background: rgba(0,0,0,.45);
  display: flex; justify-content: flex-end;
}
/* Our display rules (and some themes' button/div rules) would otherwise
   override the [hidden] attribute, leaving the panel stuck open. Force
   hidden to mean hidden for every order element. */
.rpm-order-overlay[hidden],
.rpm-order-fab[hidden],
.rpm-order-addr[hidden] { display: none !important; }
.rpm-order-panel {
  width: 560px; max-width: 100%; height: 100%; background: #fff;
  display: flex; flex-direction: column; box-shadow: -4px 0 24px rgba(0,0,0,.25);
  animation: rpm-panel-in .2s ease;
  /* The panel lives in the footer, outside .rpm-wrap, so set our own base
     font — otherwise the theme's larger body/input font bleeds in. */
  font-size: 13px; line-height: 1.45; color: #1f2937;
}
/* Form controls don't inherit font-size by default — pin them so part
   numbers / fields aren't oversized by the theme. */
.rpm-order-panel input,
.rpm-order-panel select,
.rpm-order-panel textarea,
.rpm-order-panel button { font-family: inherit; font-size: 13px; }
@keyframes rpm-panel-in { from { transform: translateX(40px); opacity: .6; } }
.rpm-order-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px; background: var(--rpm-red, #CC1111); color: #fff;
}
.rpm-order-head h2 { margin: 0; font-size: 18px; color: #fff; }
.rpm-order-close { background: none; border: none; color: #fff; font-size: 26px; line-height: 1; cursor: pointer; }
.rpm-order-body { padding: 16px 18px; overflow-y: auto; }
.rpm-order-body h3 { margin: 18px 0 6px; font-size: 14px; border-bottom: 1px solid #e5e7eb; padding-bottom: 4px; }
/* Only the very first heading ("Items to order") loses its top margin. Use ">"
   so this doesn't also catch "Account & contact" (the form's first child),
   which must keep the same 18px gap as the "Bill to" / "Ship to" headings. */
.rpm-order-body > h3:first-child { margin-top: 0; }
.rpm-order-items { width: 100%; border-collapse: collapse; font-size: 13px; border: 1px solid #d4d7dd; }
.rpm-order-items th { text-align: left; font-size: 11px; text-transform: uppercase; color: #6b7280; padding: 5px 5px; border: 0; }
.rpm-order-items td { padding: 5px 5px; border: 0; }                       /* a little breathing room, but still compact */
/* Flat thin border + minimal padding: trims the chunky default input bevel
   so the white (editable) boxes match the gray (read-only) ones and sit tight.
   margin:0 is critical — the theme bleeds a big input margin-bottom into the
   panel (it renders in the footer), which was doubling each row's height. */
.rpm-order-items input { width: 100%; box-sizing: border-box; margin: 0; padding: 0 4px; line-height: 1.4; border: 1px solid #ccced3; border-radius: 3px; background: #fff; }
.rpm-order-items .rpm-oi-qty { width: 52px; }
/* Right-align prices + totals so the column reads as a tidy money column. */
.rpm-order-items th:nth-child(4), .rpm-order-items th:nth-child(5) { text-align: right; }
.rpm-order-items .rpm-oi-price, .rpm-order-items .rpm-oi-total { text-align: right; }
/* Description, list price and total come from the catalog and aren't dealer-editable:
   render them as read-only gray boxes; only Qty + Part # stay white/editable. */
.rpm-order-items .rpm-oi-desc[readonly],
.rpm-order-items .rpm-oi-price[readonly],
.rpm-order-items .rpm-oi-total { color: #1f2937; background: #f1f3f5; cursor: default; }
.rpm-order-items .rpm-oi-price, .rpm-order-items .rpm-oi-total { font-variant-numeric: tabular-nums; }
/* The full description shows as a hover tooltip on the cell (the title lives on
   the <td>, since readonly <input> tooltips are unreliable). Hint it with the
   help cursor — this also overrides the cursor:default set just above. */
.rpm-order-items .rpm-oi-desc-cell,
.rpm-order-items .rpm-oi-desc[readonly] { cursor: help; }
/* We cleared the theme's heavy full-cell borders above; add our own light
   separators so the rows still read as distinct without the big grid + gaps. */
.rpm-order-items thead th { border-bottom: 1px solid #e5e7eb; }
.rpm-order-items tbody tr + tr td { border-top: 1px solid #f0f1f4; }
/* Grand total: the value reuses the right column's boxed style (.rpm-oi-total);
   the label sits to its left, right-aligned + bold. */
.rpm-order-grandrow td { padding-top: 6px; border-top: 1px solid var(--rpm-border, #dde1e7); }
.rpm-order-grandrow td:first-child { text-align: right; font-weight: 700; }
#rpm-order-grandtotal { text-align: right; font-weight: 700; }
.rpm-oi-remove { background: none; border: none; margin: 0; padding: 0 4px; color: #b91c1c; font-size: 18px; line-height: 1; cursor: pointer; }
.rpm-order-empty { color: #6b7280; font-size: 13px; margin: 6px 0; }
/* Compact + outline look (overrides the theme's taller .button). */
.rpm-order-addrow {
  margin: 6px 0 4px; padding: 4px 10px !important; min-height: 0 !important;
  height: auto !important; line-height: 1.4 !important; font-size: 12px !important;
  border-radius: 5px !important;
  background: var(--rpm-red-lt, #fdeaea) !important; color: var(--rpm-red, #CC1111) !important;
  border: 1.5px solid var(--rpm-red, #CC1111) !important;
}
.rpm-order-addrow:hover { background: var(--rpm-red, #CC1111) !important; color: #fff !important; border-color: #888 !important; }
.rpm-order-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; }
/* Block label so the caption + its "*" stay on one line (Email*), with the
   field on the next line. (flex-column put the * on its own line.) */
.rpm-order-grid label, .rpm-order-body > form > label { display: block; font-size: 12px; font-weight: 600; color: #374151; }
.rpm-order-grid input, .rpm-order-body textarea { display: block; width: 100%; box-sizing: border-box; margin-top: 3px; padding: 6px 8px; font-weight: 400; font-size: 13px; }
.rpm-order-reqnote { font-size: 12px; color: #6b7280; margin: 2px 0 10px; }
.req { color: var(--rpm-red, #CC1111); font-weight: 700; }
.rpm-order-body textarea { width: 100%; box-sizing: border-box; }
.rpm-order-radio { display: block; font-size: 13px; font-weight: 400; margin: 3px 0; }
.rpm-order-shipping { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.rpm-order-radio .req, .rpm-order-grid .req { color: var(--rpm-red, #CC1111); }
.rpm-order-actions { margin-top: 16px; display: flex; align-items: center; gap: 12px; }
.rpm-order-submit {
  background: var(--rpm-red-lt, #fdeaea) !important; color: var(--rpm-red, #CC1111) !important;
  border: 1.5px solid var(--rpm-red, #CC1111) !important; text-shadow: none !important;
}
.rpm-order-submit:hover { background: var(--rpm-red, #CC1111) !important; color: #fff !important; border-color: #888 !important; }
/* "✓ Order sent!" state — solid + clearly done, not faded. */
.rpm-order-submit:disabled { background: var(--rpm-red, #CC1111) !important; color: #fff !important; border-color: #888 !important; opacity: 1; cursor: default; }
.rpm-order-status { font-size: 13px; font-weight: 600; }
.rpm-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
@media (max-width: 600px) {
  .rpm-order-grid { grid-template-columns: 1fr; }
  .rpm-order-panel { width: 100%; }
}
/* The substitute "use X" line under a discontinued part's description */
.rpm-substitute {
  margin-top: 3px; font-size: 12px; color: #6b7280;
}
.rpm-substitute .rpm-sku-link { font-weight: 600; }
/* Keep the discontinued row's substitute link readable despite the row fade */
.rpm-table tbody tr.rpm-row-discontinued .rpm-substitute { font-style: normal; }

/* Ref badge */
.rpm-ref-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 22px; padding: 0 4px;
  background: var(--rpm-red-lt); border: 1px solid #f0c0c0;
  border-radius: 3px; font-weight: 700; font-size: 11px; color: var(--rpm-red-dk);
}

/* SKU */
.rpm-sku {
  font-family: 'Courier New', monospace; font-size: 10.5px;
  background: #f1f5f9; border: 1px solid #e2e8f0;
  border-radius: 3px; padding: 1px 4px;
  color: var(--rpm-dark); white-space: nowrap;
}

/* Model tags */
.rpm-model-tag {
  display: inline-block; font-size: 9px; font-weight: 700;
  padding: 1px 5px; border-radius: 3px;
  margin: 1px 2px 1px 0; letter-spacing: .03em; text-transform: uppercase;
  white-space: nowrap;
  /* v3.2.1+: neutral default pill so any model WITHOUT a specific colour
     rule below still renders as a proper badge (not unstyled text). This
     future-proofs every new Befco manual — a model id with no dedicated
     colour falls back to this slate pill instead of looking broken. */
  background: #f1f5f9; color: #475569;
}
.rpm-tag-all       { background: #e0e7ff; color: #3730a3; }
/* C28 mower — amber / green / pink */
.rpm-tag-c28-rd4   { background: #fef3c7; color: #92400e; }
.rpm-tag-c28-rd5   { background: #dcfce7; color: #166534; }
.rpm-tag-c28-rd6   { background: #fce7f3; color: #9d174d; }
/* PHD digger — blue / teal / orange / purple */
.rpm-tag-phd-100   { background: #dbeafe; color: #1e40af; }
.rpm-tag-phd-200   { background: #cffafe; color: #155e75; }
.rpm-tag-phd-300   { background: #ffedd5; color: #9a3412; }
.rpm-tag-phd-400   { background: #f3e8ff; color: #6b21a8; }
/* Side Shift Tiller — sky / lime / rose / violet */
.rpm-tag-142-231   { background: #e0f2fe; color: #075985; }
.rpm-tag-150-231   { background: #ecfccb; color: #3f6212; }
.rpm-tag-158-231   { background: #ffe4e6; color: #9f1239; }
.rpm-tag-166-231   { background: #ede9fe; color: #5b21b6; }
/* Befco Cyclone C70 — teal / amber */
.rpm-tag-c70-090   { background: #ccfbf1; color: #115e59; }
.rpm-tag-c70-110   { background: #fef9c3; color: #854d0e; }

/* Add to cart btn — table-row buttons are the tight "+"-only variant.
   Popup variant buttons (.rpm-popup-row-atc) override below to carry
   the price label "+ $245.00" since the popup has room for it. */
.rpm-atc-btn {
  background: var(--rpm-red); color: var(--rpm-white);
  border: none; border-radius: 4px;
  padding: 4px 6px; font-size: 13px; font-weight: 700; line-height: 1;
  cursor: pointer; white-space: nowrap;
  transition: background .15s, transform .1s;
}
/* v2.13.1+: popup variant buttons need extra room for the inline price
   label. min-width keeps "+ $5.00" from looking dwarfed next to
   "+ $1,234.99" in the same popup. */
.rpm-popup-row-atc.rpm-atc-btn {
  padding: 4px 10px;
  font-size: 12px;
  line-height: 1.2;
  min-width: 84px;
  text-align: center;
}
.rpm-atc-btn:hover { background: var(--rpm-red-dk); }
.rpm-atc-btn:active { transform: scale(.97); }
.rpm-atc-btn.rpm-loading { opacity: .6; pointer-events: none; }

/* Row highlight from hotspot */
.rpm-part-row.rpm-row-highlight {
  background: var(--rpm-red-lt) !important;
  outline: 2px solid var(--rpm-red);
}

/* Search highlight */
.rpm-highlight { background: #fef08a; border-radius: 2px; }

/* No results */
.rpm-no-results { text-align: center; color: var(--rpm-muted); padding: 24px; font-size: 13px; }

/* ---------- Hotspot Popup ---------- */
.rpm-popup {
  position: absolute; z-index: 100;
  background: var(--rpm-white);
  border: 1px solid var(--rpm-border);
  border-top: 3px solid var(--rpm-red);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,.16);
  padding: 14px 16px; width: 320px; font-size: 13px;
}
.rpm-popup-close {
  position: absolute; top: 8px; right: 10px;
  background: none; border: none; cursor: pointer;
  color: var(--rpm-muted); font-size: 13px;
}
.rpm-popup-ref {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .07em; color: var(--rpm-red); margin-bottom: 4px;
}
   /* hidden — replaced by per-row buttons */

/* Per-part inline row inside popup */
.rpm-popup-desc { margin-bottom: 0; }
.rpm-popup-part-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
  border-bottom: 1px solid #f0f0f0;
}
.rpm-popup-part-row:last-child { border-bottom: none; padding-bottom: 2px; }
.rpm-popup-part-row .rpm-sku {
  flex-shrink: 0;
  font-size: 10px; padding: 1px 4px;
  white-space: nowrap;
}
.rpm-popup-row-desc {
  flex: 1;
  font-size: 12px;
  color: var(--rpm-dark);
  line-height: 1.3;
}
.rpm-popup-row-atc {
  flex-shrink: 0;
  padding: 3px 8px;
  font-size: 13px;
  line-height: 1;
}


/* ---------- Popup rows ---------- */
.rpm-popup-ref {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .07em; color: var(--rpm-red); margin-bottom: 8px;
}
.rpm-popup-body { }

.rpm-popup-part-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
  border-bottom: 1px solid #f0f0f0;
}
.rpm-popup-part-row:last-child { border-bottom: none; padding-bottom: 0; }

.rpm-popup-part-row .rpm-sku {
  flex-shrink: 0;
  font-size: 10px;
  padding: 1px 4px;
  white-space: nowrap;
}
.rpm-popup-row-desc {
  flex: 1;
  font-size: 12px;
  color: var(--rpm-dark);
  line-height: 1.3;
  font-variant: normal;
  text-transform: none;
}
.rpm-popup-row-atc {
  flex-shrink: 0;
  padding: 3px 8px;
  font-size: 13px;
  line-height: 1;
}

/* Footer removed */

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .rpm-content-row { flex-direction: column; }
  .rpm-diagram-col { flex: none; max-width: 100%; position: static; }
  .rpm-table-wrap  { max-height: none; }
}
@media (max-width: 600px) {
  .rpm-col-models { display: none; }
  .rpm-col-qty    { display: none; }
  .rpm-toolbar    { flex-direction: column; align-items: stretch; }
}

/* ─── Theme-conflict overrides ────────────────────────────────────────────
   Some WordPress themes (e.g. Astra) inject a rule like:
       body.archive .ast-archive-description * { color: #373737; }
   on product-category archive pages. The wildcard selector can have higher
   cascade priority than our single-class rules and turns nav button text
   and table header text dark-on-dark (invisible). Force our intentional
   values with !important so the plugin renders correctly regardless of
   which theme or page type it is embedded in.
──────────────────────────────────────────────────────────────────────────── */
.rpm-wrap .rpm-nav-btn                { color: #9ca3af !important; }
.rpm-wrap .rpm-nav-btn:hover,
.rpm-wrap .rpm-nav-btn.rpm-nav-active { color: #ffffff !important; }
.rpm-wrap .rpm-table th               { color: #ffffff !important; }
/* v2.15.1+: inactive model-filter buttons (e.g. "142-231 (42″)")
   inherit their text color from the theme's generic `button` rule —
   Astra sets that to a faded gray on a light-gray button background,
   making the labels almost invisible. Pin the inactive color to the
   plugin's dark text; the active state already overrides to white. */
.rpm-wrap .rpm-filter-btn                { color: var(--rpm-dark) !important; }
.rpm-wrap .rpm-filter-btn.rpm-btn-active { color: var(--rpm-white) !important; }
.rpm-wrap .rpm-logo-title             { color: var(--rpm-dark) !important; }
.rpm-wrap .rpm-logo-subtitle          { color: var(--rpm-muted) !important; }
.rpm-wrap .rpm-header-subtitle        { color: var(--rpm-muted) !important; }
.rpm-wrap a.rpm-sku-link              { color: var(--rpm-red)   !important; }

/* v2.17.0+: admin-only "edit in WC" pencil link. Rendered next to
   the + cart button (or the — placeholder) in the Cart column when
   the viewer can manage WooCommerce. Pinned via .rpm-wrap for
   theme-conflict protection. */
.rpm-wrap a.rpm-edit-product-link {
  display: inline-block;
  margin-left: 4px;
  color: var(--rpm-muted) !important;
  font-size: 14px;
  text-decoration: none !important;
  vertical-align: middle;
  padding: 2px 5px;
  border-radius: 3px;
  line-height: 1;
  transition: color 0.12s, background 0.12s;
}
.rpm-wrap a.rpm-edit-product-link:hover,
.rpm-wrap a.rpm-edit-product-link:focus {
  color: var(--rpm-red) !important;
  background: rgba(204, 17, 17, 0.08);
  text-decoration: none !important;
  outline: none;
}

/* ═══════════════════════════════════════════════════════════════════
   PARTS CATALOG landing page ([parts_catalog]) — v3.4.0+
   "Find your machine" search + card drill-down. Uses the shared
   --rpm-* variables so it picks up the brand color settings later.
═══════════════════════════════════════════════════════════════════ */
/* The catalog + breadcrumb are separate root elements from .rpm-wrap,
   so re-declare the shared palette vars on them. (Kept identical to the
   .rpm-wrap block so a future brand-color setting can override both.) */
.rpm-catalog, .rpm-cat-breadcrumb {
  --rpm-red:      #CC1111;
  --rpm-red-dk:   #a00e0e;
  --rpm-red-lt:   #f9e8e8;
  --rpm-dark:     #383838;
  --rpm-border:   #dde1e7;
  --rpm-bg:       #f5f6f8;
  --rpm-white:    #ffffff;
  --rpm-text:     #1a1a1a;
  --rpm-muted:    #6b7280;
  --rpm-accent:   #f0f2f5;
  --rpm-radius:   6px;
  --rpm-shadow:   0 2px 10px rgba(0,0,0,.08);
}
.rpm-catalog {
  max-width: 1100px;
  margin: 0 auto;
  color: var(--rpm-text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.rpm-catalog *, .rpm-catalog *::before, .rpm-catalog *::after { box-sizing: border-box; }

.rpm-catalog-head {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 14px; margin-bottom: 18px;
}
.rpm-catalog-title { margin: 0; font-size: 22px; font-weight: 700; color: var(--rpm-dark); }

.rpm-catalog-searchwrap { position: relative; flex: 1 1 320px; max-width: 480px; }
.rpm-catalog-search-ico {
  /* v3.4.2+: anchored RIGHT (was left, where the wide emoji overlapped
     the placeholder / typed text). Matches the manual search box, which
     also keeps its magnifier on the right. */
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  font-size: 14px; opacity: .5; pointer-events: none;
}
.rpm-catalog-search {
  width: 100%; padding: 11px 38px 11px 14px;
  border: 1px solid var(--rpm-border); border-radius: var(--rpm-radius);
  font-size: 15px; background: var(--rpm-white); color: var(--rpm-text);
  transition: border-color .12s, box-shadow .12s;
}
.rpm-catalog-search:focus {
  outline: none; border-color: var(--rpm-red);
  box-shadow: 0 0 0 3px rgba(204,17,17,.12);
}

/* Breadcrumb nav inside the browser */
.rpm-catalog-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 16px; font-size: 14px; }
.rpm-cat-nav-link {
  background: none; border: none; padding: 4px 6px; cursor: pointer;
  color: var(--rpm-red); font: inherit; border-radius: 4px;
}
.rpm-cat-nav-link:hover { background: var(--rpm-red-lt); text-decoration: underline; }
.rpm-cat-nav-cur { color: var(--rpm-muted); font-weight: 600; padding: 4px 0; }
.rpm-cat-nav-sep { color: var(--rpm-muted); opacity: .6; }

/* Card grid */
.rpm-catalog-grid {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
.rpm-cat-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  text-align: left; width: 100%;
  padding: 16px 18px; min-height: 92px;
  background: var(--rpm-white); border: 1px solid var(--rpm-border);
  border-radius: var(--rpm-radius); box-shadow: var(--rpm-shadow);
  cursor: pointer; font: inherit; color: var(--rpm-text);
  text-decoration: none; position: relative;
  transition: border-color .12s, box-shadow .12s, transform .06s;
}
.rpm-cat-card:hover {
  border-color: var(--rpm-red); box-shadow: 0 4px 16px rgba(0,0,0,.12);
  transform: translateY(-1px);
}
.rpm-cat-card:focus-visible { outline: 2px solid var(--rpm-red); outline-offset: 2px; }

/* v3.8.5: category + model drill buttons use the brand "outline" look —
   light accent fill + accent outline, going solid accent with a gray
   outline on hover / press. (Manual links keep the plain white card.) */
.rpm-cat-card--cat, .rpm-cat-card--model {
  background: var(--rpm-red-lt, #fdeaea);
  border-color: var(--rpm-red, #CC1111);
}
.rpm-cat-card--cat:hover, .rpm-cat-card--model:hover,
.rpm-cat-card--cat:active, .rpm-cat-card--model:active {
  background: var(--rpm-red, #CC1111); border-color: #888;
}
.rpm-cat-card--cat:hover  .rpm-cat-card-name,  .rpm-cat-card--model:hover  .rpm-cat-card-name,
.rpm-cat-card--cat:active .rpm-cat-card-name,  .rpm-cat-card--model:active .rpm-cat-card-name,
.rpm-cat-card--cat:hover  .rpm-cat-card-meta,  .rpm-cat-card--model:hover  .rpm-cat-card-meta,
.rpm-cat-card--cat:active .rpm-cat-card-meta,  .rpm-cat-card--model:active .rpm-cat-card-meta,
.rpm-cat-card--cat:hover  .rpm-cat-card-arrow, .rpm-cat-card--model:hover  .rpm-cat-card-arrow,
.rpm-cat-card--cat:active .rpm-cat-card-arrow, .rpm-cat-card--model:active .rpm-cat-card-arrow { color: #fff; }
.rpm-cat-card-name { font-size: 16px; font-weight: 700; color: var(--rpm-dark); line-height: 1.25; }
.rpm-cat-card-meta { font-size: 13px; color: var(--rpm-muted); }
.rpm-cat-card-cov  { font-size: 12px; color: var(--rpm-muted); margin-top: 2px; line-height: 1.35; }
.rpm-cat-card-arrow {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  font-size: 26px; line-height: 1; color: var(--rpm-border);
}
.rpm-cat-card:hover .rpm-cat-card-arrow { color: var(--rpm-red); }
.rpm-cat-card--manual { padding-right: 18px; }
.rpm-cat-card-go {
  margin-top: 8px; font-size: 13px; font-weight: 600; color: var(--rpm-red);
}

.rpm-catalog-empty { padding: 30px 10px; text-align: center; color: var(--rpm-muted); font-size: 15px; }

.rpm-catalog-fallback { list-style: disc; padding-left: 22px; }
.rpm-catalog-fallback a { color: var(--rpm-red); }

/* Breadcrumb shown above an inline-rendered manual (?machine=…) */
.rpm-cat-breadcrumb {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  max-width: 1100px; margin: 0 auto 14px;
  font-size: 14px; color: var(--rpm-muted);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.rpm-cat-back {
  display: inline-block; padding: 6px 12px;
  background: var(--rpm-white); border: 1px solid var(--rpm-border);
  border-radius: var(--rpm-radius); color: var(--rpm-red);
  text-decoration: none; font-weight: 600; white-space: nowrap;
}
.rpm-cat-back:hover { border-color: var(--rpm-red); background: var(--rpm-red-lt); }
.rpm-cat-crumbs { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.rpm-cat-crumbs strong { color: var(--rpm-dark); }
.rpm-cat-sep { opacity: .6; }

@media (max-width: 600px) {
  .rpm-catalog-head { flex-direction: column; align-items: stretch; }
  .rpm-catalog-searchwrap { max-width: none; }
  .rpm-catalog-grid { grid-template-columns: 1fr; }
}