/* =========================================================
   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; }

/* 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;
}
.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; }

/* 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;
}