/*!
 * RareX Frontend — Stage 10K unified design system.
 * ONE design language for the whole plugin. Scoped to .rarex / body.rarex-app.
 *
 * Accent discipline (the fix for the perceived-hue problem): the brand red is
 * used ONLY as a FILLED element (primary CTA buttons) plus two tiny controlled
 * marks (hero word-underline, hero badge dot). It is NEVER used as a thin
 * border, focus ring, eyebrow text, hover outline, chip fill, or link colour —
 * a saturated red used that way shifts perceptually on dark. All controls,
 * borders, hovers and active states are steel / off-white. WhatsApp green is
 * used ONLY on WhatsApp actions. No warm-amber or decorative/pastel hues.
 *
 * RareX frontend design and development by DR50N.
 */

/* ============================ TOKENS ============================ */
.rarex {
  --rx-font: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Noto Sans Arabic", Tahoma, sans-serif;
  --rx-mono: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;

  /* surfaces — near-black / graphite / dark steel */
  --rx-bg: #0a0d10;
  --rx-bg-2: #0c1014;
  --rx-surface: #12171d;
  --rx-surface-2: #182027;
  --rx-surface-3: #222c35;
  --rx-line: rgba(150, 166, 182, 0.13);
  --rx-line-2: rgba(150, 166, 182, 0.22);
  --rx-line-3: rgba(150, 166, 182, 0.34);

  /* text */
  --rx-ink: #eef2f6;
  --rx-ink-soft: #aab4bf;
  --rx-mut: #828d99;

  /* brand accent — DEEP brick red, FILLED use only (never thin/text/border) */
  --rx-accent: #a82417;
  --rx-accent-deep: #821b0f;

  /* whatsapp — only on WhatsApp actions */
  --rx-wa: #1fad54;
  --rx-wa-2: #25c462;
  --rx-wa-ink: #04210f;
  --rx-wa-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19.05 4.91A9.82 9.82 0 0 0 12.04 2C6.58 2 2.13 6.45 2.13 11.91c0 1.75.46 3.45 1.32 4.95L2.05 22l5.25-1.38a9.9 9.9 0 0 0 4.74 1.21h.004c5.46 0 9.91-4.45 9.91-9.91 0-2.65-1.03-5.14-2.9-7.01zM12.04 20.15h-.004a8.23 8.23 0 0 1-4.19-1.15l-.3-.18-3.12.82.83-3.04-.2-.31a8.2 8.2 0 0 1-1.26-4.38c0-4.54 3.7-8.23 8.24-8.23a8.2 8.2 0 0 1 8.23 8.24c0 4.54-3.7 8.23-8.24 8.23zm4.52-6.16c-.25-.12-1.47-.72-1.69-.81-.23-.08-.39-.12-.56.12-.17.25-.64.81-.79.97-.14.17-.29.19-.54.06-.25-.12-1.05-.39-1.99-1.23-.74-.66-1.23-1.47-1.38-1.72-.14-.25-.01-.38.11-.5.11-.11.25-.29.37-.43.12-.14.17-.25.25-.41.08-.17.04-.31-.02-.43-.06-.12-.56-1.34-.76-1.84-.2-.48-.41-.42-.56-.43-.14-.01-.31-.01-.48-.01-.17 0-.43.06-.66.31-.23.25-.86.85-.86 2.07 0 1.22.89 2.4 1.01 2.56.12.17 1.75 2.67 4.23 3.74.59.26 1.05.41 1.41.52.59.19 1.13.16 1.56.1.48-.07 1.47-.6 1.67-1.18.21-.58.21-1.07.14-1.18-.06-.11-.22-.17-.47-.29z'/%3E%3C/svg%3E");
  /* industrial cog line-icon for Part-Family cards (alpha-masked, tinted in CSS) */
  --rx-ic-cog: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3.1'/%3E%3Cpath d='M12 1.8v3.2M12 19v3.2M1.8 12h3.2M19 12h3.2M4.8 4.8l2.2 2.2M17 17l2.2 2.2M19.2 4.8l-2.2 2.2M7 17l-2.2 2.2'/%3E%3C/svg%3E");

  /* geometry */
  --rx-r: 10px;
  --rx-r-sm: 8px;
  --rx-r-lg: 14px;
  --rx-pill: 999px;
  --rx-wrap: 1180px;
  --rx-pad: 78px;
  --rx-shadow: 0 20px 50px rgba(0, 0, 0, 0.42);
  --rx-shadow-sm: 0 10px 26px rgba(0, 0, 0, 0.30);
  --rx-focus: 0 0 0 2px var(--rx-bg), 0 0 0 4px rgba(170, 186, 202, 0.55);

  color: var(--rx-ink);
  background: var(--rx-bg);
  font-family: var(--rx-font);
  font-size: 16px;
  line-height: 1.55;
  min-height: 100vh;
  position: relative;
  overflow: clip;
}

.rarex *, .rarex *::before, .rarex *::after { box-sizing: border-box; }
.rarex a, .rarex a:visited, .rarex a:hover, .rarex a:focus { color: inherit; text-decoration: none !important; }
.rarex .rx-link--text { text-decoration: underline !important; text-underline-offset: 3px; }
.rarex button, .rarex input, .rarex textarea, .rarex select { font: inherit; }
.rarex button, .rarex a, .rarex input, .rarex textarea, .rarex select { -webkit-tap-highlight-color: transparent; }
.rarex :focus-visible { outline: none; box-shadow: var(--rx-focus); border-radius: var(--rx-r-sm); }

.rarex, .rarex h1, .rarex h2, .rarex h3, .rarex h4, .rarex h5,
.rarex p, .rarex a, .rarex span, .rarex strong, .rarex em, .rarex li, .rarex dt, .rarex dd,
.rarex button, .rarex input, .rarex select, .rarex textarea, .rarex label {
  font-family: var(--rx-font) !important;
}
.rarex h1, .rarex h2, .rarex h3 { font-weight: 750; letter-spacing: -0.02em; }
.rarex[dir="rtl"] h1, .rarex[dir="rtl"] h2, .rarex[dir="rtl"] h3 { letter-spacing: 0; }

html.rx-noscroll, html.rx-noscroll body { overflow: hidden; }
.rx-wrap { width: min(var(--rx-wrap), calc(100% - 40px)); margin-inline: auto; }
.rx-main { background: linear-gradient(180deg, #0a0d10, #0b0f13 60%, #0a0d10); }

/* ============================ THEME CONTAINMENT ============================ */
body.rarex-app { margin: 0 !important; background: #0a0d10 !important; }
body.rarex-app #wpadminbar { display: none !important; }
html:has(body.rarex-app) { margin-top: 0 !important; }
body.rarex-app #masthead, body.rarex-app .site-header, body.rarex-app header.site-header,
body.rarex-app .ast-primary-header-bar, body.rarex-app .ast-mobile-header-wrap,
body.rarex-app .elementor-location-header, body.rarex-app .ehbiz-header, body.rarex-app .ehf-template-header,
body.rarex-app .dsgo-header, body.rarex-app .entry-header, body.rarex-app .page-title,
body.rarex-app footer.site-footer, body.rarex-app .site-footer,
body.rarex-app .elementor-location-footer, body.rarex-app .ehf-template-footer,
body.rarex-app header.wp-block-template-part, body.rarex-app footer.wp-block-template-part,
body.rarex-app .wp-site-blocks > header.wp-block-template-part,
body.rarex-app .wp-site-blocks > footer.wp-block-template-part,
body.rarex-app .wp-block-post-title, body.rarex-app .wp-block-spacer,
body.rarex-app .wp-block-template-part .wp-block-site-title,
body.rarex-app .wp-block-template-part .wp-block-navigation { display: none !important; }
/* Neutralize THEME wrappers only. NB: do NOT reset bare `article` — the RareX
   component cards (.rx-pcard, brand .rx-blogo) are <article> elements, and a
   blanket `article{background:transparent!important}` strips their surfaces/white
   tiles. The active theme wraps content in block groups, not <article>, so the
   theme-specific selectors below are sufficient. `main` is scoped to exclude the
   RareX main. */
body.rarex-app #page, body.rarex-app #content, body.rarex-app .site-content, body.rarex-app .ast-container,
body.rarex-app .content-area, body.rarex-app #primary, body.rarex-app main:not(.rx-main),
body.rarex-app .entry-content, body.rarex-app .wp-block-post-content, body.rarex-app .elementor, body.rarex-app .e-con,
body.rarex-app .site {
  width: auto !important; max-width: none !important; margin: 0 !important; padding: 0 !important;
  background: transparent !important; border: 0 !important;
}
body.rarex-app .entry-content > * { max-width: none !important; }
body.rarex-app .has-global-padding { padding: 0 !important; }
body.rarex-app .is-layout-constrained { max-width: none !important; }
body.rarex-app .wp-site-blocks { padding: 0 !important; }
body.rarex-app .wp-block-group.has-base-background-color, body.rarex-app .has-base-background-color { background: transparent !important; }
body.rarex-app .rarex { width: 100%; min-height: 100vh; }
/* Defensive: hide third-party promo/badge floats if a future deploy carries them
   (TrustedSite, "for WordPress" demo bars, generic floating widgets). Scoped to
   RareX review pages only; cannot affect admin or other pages. */
body.rarex-app #trustedsite-container, body.rarex-app .trustedsite-container,
body.rarex-app [id*="trustedsite"], body.rarex-app [class*="trustedsite"],
body.rarex-app [id*="trusted-site"], body.rarex-app [class*="trusted-site"],
body.rarex-app .for-wordpress-bar, body.rarex-app [class*="-for-wordpress"],
body.rarex-app .wpfront-notification-bar, body.rarex-app #wpadminbar { display: none !important; }

/* ============================ HEADER ============================ */
.rx-header {
  position: sticky; inset-block-start: 0; z-index: 40;
  border-block-end: 1px solid var(--rx-line); background: rgba(10, 13, 16, 0.9); backdrop-filter: blur(18px);
}
.rx-header__bar { min-height: 72px; display: grid; grid-template-columns: auto 1fr auto; gap: 20px; align-items: center; }
.rx-logo { display: inline-flex; align-items: center; gap: 10px; }
.rx-logo__mark { height: 38px; width: auto; display: block; }
.rx-logo__text { display: none; }
.rx-nav { display: flex; justify-content: center; align-items: center; gap: 2px; }
.rx-nav a {
  border-radius: var(--rx-r-sm); color: var(--rx-ink-soft); font-size: 13px; font-weight: 650; line-height: 1; padding: 11px 12px;
  transition: color 150ms ease, background 150ms ease;
}
.rx-nav a:hover { color: var(--rx-ink); background: rgba(255, 255, 255, 0.05); }
.rx-header__cta, .rx-lang { display: flex; align-items: center; gap: 8px; }
.rx-lang { border: 1px solid var(--rx-line); border-radius: var(--rx-r-sm); background: rgba(255, 255, 255, 0.03); padding: 3px; }
.rx-lang button {
  border: 0; border-radius: 6px; color: var(--rx-mut); background: transparent; cursor: pointer;
  font-size: 11px; font-weight: 750; min-width: 32px; padding: 7px 7px; transition: color 150ms ease, background 150ms ease;
}
.rx-lang button:hover { color: var(--rx-ink); }
.rx-lang button.is-on { color: var(--rx-bg); background: var(--rx-ink); }   /* clean white pill — no red */
.rx-burger {
  display: none; border: 1px solid var(--rx-line-2); border-radius: var(--rx-r-sm);
  color: var(--rx-ink); background: rgba(255, 255, 255, 0.05); cursor: pointer; font-size: 20px; inline-size: 46px; block-size: 44px;
}
.rx-head-inq { display: none; }

/* ============================ BUTTON SYSTEM ============================ */
.rx-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 12px 20px;
  border: 1px solid var(--rx-line-2); border-radius: var(--rx-r);
  color: var(--rx-ink); background: var(--rx-surface-2);
  cursor: pointer; font-size: 13px; font-weight: 650; line-height: 1.15; text-align: center; white-space: normal;
  transition: transform 130ms ease, border-color 150ms ease, background 150ms ease, box-shadow 150ms ease, filter 130ms ease;
}
.rx-btn:hover { border-color: var(--rx-line-3); background: var(--rx-surface-3); }
.rx-btn:active { transform: translateY(1px); }
/* PRIMARY = filled deep red, white text (the only place red carries the UI) */
.rx-btn--primary {
  color: #fff; border-color: transparent; font-weight: 700;
  background: linear-gradient(180deg, var(--rx-accent), var(--rx-accent-deep));
  box-shadow: 0 8px 20px rgba(149, 31, 18, 0.34);
}
.rx-btn--primary:hover { filter: brightness(1.08); background: linear-gradient(180deg, var(--rx-accent), var(--rx-accent-deep)); }
/* WHATSAPP = filled green + glyph */
.rx-btn--wa {
  color: #fff; border-color: transparent; font-weight: 700;
  background: linear-gradient(180deg, var(--rx-wa-2), var(--rx-wa));
  box-shadow: 0 8px 20px rgba(31, 173, 84, 0.26);
}
.rx-btn--wa:hover { filter: brightness(1.06); background: linear-gradient(180deg, var(--rx-wa-2), var(--rx-wa)); }
.rx-btn--wa::before {
  content: ""; inline-size: 16px; block-size: 16px; flex: 0 0 auto;
  background: currentColor; -webkit-mask: var(--rx-wa-icon) center / contain no-repeat; mask: var(--rx-wa-icon) center / contain no-repeat;
}
/* SECONDARY = steel outline */
.rx-btn--line { color: var(--rx-ink); border-color: var(--rx-line-2); background: rgba(255, 255, 255, 0.03); }
.rx-btn--line:hover { border-color: var(--rx-line-3); background: rgba(255, 255, 255, 0.06); }
.rx-btn--sm { min-height: 40px; padding: 10px 14px; font-size: 12px; }

/* ============================ SECTION TYPOGRAPHY ============================ */
.rx-eyebrow {
  margin: 0 0 12px; color: var(--rx-mut); font-size: 11.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
}
.rx-hero h1, .rx-phero h1 {
  margin: 0; color: var(--rx-ink); font-size: clamp(2rem, 4.3vw, 3rem); line-height: 1.06; font-weight: 750; max-width: 17ch;
}
.rx-hero__sub, .rx-phero p, .rx-section-lead, .rx-lead {
  color: var(--rx-ink-soft); font-size: 1.02rem; line-height: 1.68; margin: 18px 0 0; max-width: 60ch;
}
.rx-section-lead { color: var(--rx-mut); }
.rx-families h2, .rx-featured h2, .rx-brands-strip h2, .rx-inquiry h2, .rx-how h2, .rx-brands h2 {
  margin: 0; color: var(--rx-ink); font-size: clamp(1.6rem, 3.1vw, 2.25rem); line-height: 1.08; font-weight: 750;
}
.rx-section-strong, .rx-families, .rx-featured, .rx-inquiry, .rx-brands, .rx-about, .rx-contact, .rx-catalog, .rx-how, .rx-brands-strip {
  padding-block: var(--rx-pad);
}
.rx-section-strong, .rx-brands-strip { border-block: 1px solid var(--rx-line); background: linear-gradient(180deg, #0b0e12, #0a0d10); }

/* ============================ HERO ============================ */
.rx-hero {
  position: relative; overflow: hidden; border-block-end: 1px solid var(--rx-line);
  background: radial-gradient(760px 460px at 8% 110%, rgba(150, 166, 182, 0.06), transparent 60%), linear-gradient(160deg, #0b1016, #0a0d10 78%);
}
.rx-hero__grid { display: grid; grid-template-columns: 1.06fr 0.94fr; gap: 46px; align-items: center; padding-block: 60px 56px; }
/* single-column hero (Stage 10K-F) */
.rx-hero__inner { padding-block: 72px 64px; }
.rx-hero__inner .rx-hero__copy { max-width: 760px; }
.rx-hero__inner .rx-hero h1, .rx-hero__inner h1 { max-width: 20ch; }
.rx-trust--hero { margin-block-start: 36px; grid-template-columns: repeat(3, minmax(0, 200px)); }
.rx-hero h1 .rx-hl { color: var(--rx-ink); box-shadow: inset 0 -0.32em 0 rgba(189, 43, 27, 0.9); }  /* controlled red underline mark */
.rx-search {
  display: flex; gap: 8px; margin-block-start: 26px; max-width: 640px;
  background: rgba(10, 14, 18, 0.7); border: 1px solid var(--rx-line-2); padding: 7px; border-radius: var(--rx-r-lg); box-shadow: var(--rx-shadow-sm);
}
.rx-search input { width: 100%; border: 0; background: transparent; color: var(--rx-ink); padding: 11px 13px; }
.rx-search input::placeholder { color: var(--rx-mut); }
.rx-search .rx-btn { flex: 0 0 auto; }
.rx-hero__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-block-start: 16px; }
.rx-hero__paths { display: flex; flex-wrap: wrap; gap: 8px; margin-block-start: 22px; }
.rx-path {
  display: inline-flex; align-items: center; border: 1px solid var(--rx-line); border-radius: var(--rx-pill);
  color: var(--rx-ink-soft); background: rgba(255, 255, 255, 0.03); font-size: 12px; font-weight: 550; min-height: 30px; padding: 6px 12px;
}
.rx-hero__aside { min-width: 0; display: grid; gap: 14px; }
.rx-hero__visual {
  position: relative; border-radius: var(--rx-r-lg); overflow: hidden; min-height: 360px;
  border: 1px solid var(--rx-line-2); background: #0a141d center / cover no-repeat; box-shadow: var(--rx-shadow);
}
.rx-hero__visual::after { content: ""; position: absolute; inset: 0; background: linear-gradient(160deg, rgba(10, 13, 16, 0.08), rgba(10, 13, 16, 0.68) 82%); }
.rx-hero__tag {
  position: absolute; z-index: 1; inset-inline-start: 16px; inset-block-end: 16px; display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--rx-line-2); border-radius: var(--rx-pill); background: rgba(10, 13, 16, 0.66); backdrop-filter: blur(8px);
  color: var(--rx-ink); font-size: 12px; font-weight: 700; letter-spacing: 0.04em; padding: 8px 14px; text-transform: uppercase;
}
.rx-hero__tag::before { content: ""; inline-size: 7px; block-size: 7px; border-radius: 50%; background: var(--rx-accent); }  /* one tiny accent dot */
.rx-trust { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; list-style: none; margin: 0; padding: 0; }
.rx-trust li { border: 1px solid var(--rx-line); border-radius: var(--rx-r); background: var(--rx-surface); padding: 15px; }
.rx-trust strong { display: block; color: var(--rx-ink); font-size: 23px; line-height: 1; font-weight: 750; }
.rx-trust span { display: block; color: var(--rx-mut); font-size: 11.5px; font-weight: 600; margin-block-start: 7px; }
.rx-trust--row { grid-template-columns: repeat(3, auto); justify-content: start; }

@keyframes rxUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.rx-hero__copy > * { animation: rxUp 0.55s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.rx-hero__copy > *:nth-child(2) { animation-delay: 0.05s; }
.rx-hero__copy > *:nth-child(3) { animation-delay: 0.1s; }
.rx-hero__copy > *:nth-child(4) { animation-delay: 0.15s; }
.rx-hero__aside { animation: rxUp 0.65s 0.1s cubic-bezier(0.2, 0.7, 0.2, 1) both; }

/* ============================ BRAND MARQUEE (Home) ============================ */
.rx-brands-strip h2 { color: var(--rx-ink); }
.rx-brands-note { margin-block-start: 16px; color: var(--rx-mut); font-size: 13px; max-width: 80ch; }
.rx-brands-note b { color: var(--rx-ink-soft); font-weight: 700; }
/* Stage 10M-Y(C): seamless premium brand marquee.
   Edge fades (mask) so logos enter/leave naturally — no chopped half-logo frozen
   at an edge. overflow:hidden contains the wide track (no page H-overflow). */
.rx-rail {
  position: relative; margin-block-start: 24px; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
/* the moving track: flex of two identical sequences; translateX 0 -> -50% lands
   the 2nd copy exactly where the 1st began => mathematically seamless loop.
   Each tile carries its own trailing margin (no flex gap) so the seam spacing
   equals every other inter-logo gap. Linear timing, no easing at the loop point. */
.rx-marquee { display: flex; inline-size: max-content; animation: rxMarq 28s linear infinite; will-change: transform; }
.rx-marquee__seq { display: flex; flex: 0 0 auto; }
.rx-marquee .rx-rlogo { margin-inline-end: 16px; }
.rx-rail:hover .rx-marquee, .rx-rail:focus-within .rx-marquee { animation-play-state: paused; }
@keyframes rxMarq { from { transform: translateX(0); } to { transform: translateX(-50%); } }
/* reduced-motion fallback (JS renders this grid; CSS also halts any track) */
.rx-logogrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 14px; align-items: stretch; }
.rx-logogrid .rx-rlogo { inline-size: auto; block-size: 92px; }
.rx-rlogo {
  flex: 0 0 auto; inline-size: 158px; block-size: 88px; display: grid; place-items: center; padding: 16px 20px;
  background: #f4f6f8; border: 1px solid var(--rx-line-2); border-radius: var(--rx-r-lg); box-shadow: var(--rx-shadow-sm);
  transition: border-color 180ms ease, box-shadow 180ms ease;
}
.rx-rlogo:hover { border-color: var(--rx-line-3); box-shadow: 0 14px 30px rgba(0, 0, 0, 0.40); }   /* subtle steel response, no lift/zoom */
.rx-rlogo img { max-block-size: 46px; max-inline-size: 80%; inline-size: auto; block-size: auto; object-fit: contain; }
.rx-rlogo span { display: none; }                 /* logo image carries the name */
.rx-rlogo.is-primary { box-shadow: 0 0 0 2px rgba(170, 186, 202, 0.4), var(--rx-shadow-sm); }   /* subtle steel ring, no red */
.rx-rlogo.is-text { background: var(--rx-surface); border-color: var(--rx-line-2); }
.rx-rlogo.is-text span { display: grid; place-items: center; color: var(--rx-ink); font-weight: 750; letter-spacing: 0.04em; }
.rx-rlogo.is-error img { display: none; }
.rx-rlogo.is-error span { display: grid; color: #10161c; font-weight: 750; }

/* ============================ FAMILY / CATEGORY CARDS ============================ */
.rx-fgrid, .rx-pgrid, .rx-bgrid { display: grid; gap: 16px; margin-block-start: 26px; }
.rx-fgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.rx-pgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rx-bgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.rx-fcard {
  display: flex; flex-direction: column; overflow: hidden; min-block-size: 220px;
  border: 1px solid var(--rx-line); border-radius: var(--rx-r-lg); background: var(--rx-surface);
  transition: transform 170ms ease, border-color 180ms ease, box-shadow 180ms ease;
}
.rx-fcard:hover { transform: translateY(-4px); border-color: var(--rx-line-3); box-shadow: var(--rx-shadow); }
.rx-fcard__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #0a141d; }
.rx-fcard__media img { inline-size: 100%; block-size: 100%; object-fit: cover; transition: transform 0.5s ease; }
.rx-fcard:hover .rx-fcard__media img { transform: scale(1.05); }
.rx-fcard__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 13, 16, 0.03), rgba(10, 13, 16, 0.66)); }
.rx-fcard__media--ph { display: grid; place-items: center; background: linear-gradient(150deg, #101922, #0a141d); }
.rx-fcard__media--ph img { display: none; }
.rx-fcard__media--ph::before { content: ""; inline-size: 38px; block-size: 38px; border: 2px solid var(--rx-line-3); border-radius: var(--rx-r-sm); opacity: 0.6; }
.rx-fcard__body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 5px; flex: 1; }
.rx-fcard__body h3 { font-size: 15px; color: var(--rx-ink); margin: 0; font-weight: 700; }
.rx-fcard__body p { font-size: 12.5px; color: var(--rx-mut); margin: 0; flex: 1; }
.rx-flink { font-size: 12px; font-weight: 700; color: var(--rx-ink-soft); margin-block-start: 8px; }
.rx-fcard:hover .rx-flink { color: var(--rx-ink); }

/* ============================ HOW IT WORKS ============================ */
.rx-how__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-block-start: 26px; }
.rx-step { position: relative; background: var(--rx-surface); border: 1px solid var(--rx-line); border-radius: var(--rx-r-lg); padding: 22px; }
.rx-step__no { font-family: var(--rx-mono); font-size: 13px; font-weight: 700; color: var(--rx-mut); }
.rx-step h3 { font-size: 15px; color: var(--rx-ink); margin: 10px 0 6px; font-weight: 700; }
.rx-step p { font-size: 13px; color: var(--rx-mut); margin: 0; }

/* ============================ PRODUCT CARDS (RFQ catalog) ============================ */
.rx-pcard {
  display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid var(--rx-line); border-radius: var(--rx-r-lg); background: var(--rx-surface); color: var(--rx-ink);
  transition: transform 160ms ease, border-color 180ms ease, box-shadow 180ms ease;
}
.rx-pcard:hover { transform: translateY(-3px); border-color: var(--rx-line-3); box-shadow: var(--rx-shadow); }
.rx-pmedia {
  position: relative; display: block; inline-size: 100%; aspect-ratio: 16 / 11; overflow: hidden;
  border: 0; border-block-end: 1px solid var(--rx-line); color: inherit; background: #0c141c; cursor: pointer; padding: 0; text-align: start;
}
.rx-pimg { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 8px; background: linear-gradient(150deg, #131a22, #0b1117); }
.rx-pimg img { max-inline-size: 100%; max-block-size: 100%; inline-size: auto; block-size: auto; object-fit: contain; object-position: center; }
.rx-pimg .rx-imgph, .rx-drawer__media .rx-imgph { color: var(--rx-mut); border: 1px dashed var(--rx-line-2); border-radius: var(--rx-r-sm); padding: 9px 12px; font-size: 12px; font-weight: 600; }
.rx-pimg img + .rx-imgph, .rx-drawer__media img + .rx-imgph { display: none; }
.rx-pimg.is-error img, .rx-drawer__media.is-error img { display: none; }
.rx-pimg.is-error .rx-imgph, .rx-drawer__media.is-error .rx-imgph { display: inline-flex; }
.rx-pbody { display: flex; flex-direction: column; gap: 9px; padding: 14px 15px 0; flex: 1; }
.rx-pfam { align-self: start; color: var(--rx-mut); font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.rx-pname { display: block; inline-size: 100%; border: 0; color: var(--rx-ink); background: transparent; cursor: pointer; font-size: 15px; font-weight: 650; line-height: 1.34; padding: 0; text-align: start; overflow-wrap: anywhere; }
.rx-pname:hover { color: #fff; text-decoration: underline !important; text-underline-offset: 2px; }
/* reference — prominent, mono, steel chip (NO coloured bar) */
.rx-refbar { display: flex; align-items: center; gap: 9px; margin-block-start: auto; border: 1px solid var(--rx-line-2); border-radius: var(--rx-r-sm); background: var(--rx-surface-2); padding: 9px 11px; min-inline-size: 0; }
.rx-refbar span { color: var(--rx-mut); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; flex: 0 0 auto; }
.rx-refbar b, .rx-ref { color: var(--rx-ink); font-family: var(--rx-mono); font-size: 13px; font-weight: 600; overflow-wrap: anywhere; min-inline-size: 0; }
.rx-refbar--muted b { color: var(--rx-mut); }
.rx-pmeta { color: var(--rx-ink-soft); font-size: 12.5px; }
.rx-pmeta b { color: var(--rx-ink); font-weight: 650; }
.rx-pcta { display: flex; gap: 8px; padding: 13px 15px 15px; }
.rx-pcta .rx-btn { flex: 1 1 0; min-inline-size: 0; padding-inline: 10px; }
.rx-empty { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 14px; border: 1px solid var(--rx-line); border-radius: var(--rx-r-lg); background: var(--rx-surface); color: var(--rx-ink-soft); padding: 24px; }

/* ============================ HOME CATALOG CTA (replaces product grid) ============================ */
.rx-catalogcta { padding-block: 56px; border-block: 1px solid var(--rx-line); background: linear-gradient(180deg, #0b0e12, #0a0d10); }
.rx-catalogcta__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.rx-catalogcta h2 { margin: 0; color: var(--rx-ink); font-size: clamp(1.3rem, 2.4vw, 1.8rem); font-weight: 750; max-width: 26ch; }
.rx-catalogcta .rx-btn { flex: 0 0 auto; }

/* ============================ PAGE HERO ============================ */
.rx-phero { padding: 60px 0 46px; border-block-end: 1px solid var(--rx-line); background: linear-gradient(180deg, #0b0e12, transparent); }
.rx-phero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 360px); gap: 28px; align-items: center; }
.rx-phero__proof { display: grid; gap: 8px; border: 1px solid var(--rx-line); border-radius: var(--rx-r-lg); background: var(--rx-surface); padding: 20px; }
.rx-phero__proof span { color: var(--rx-ink); font-size: 13.5px; font-weight: 650; padding-block: 7px; border-block-end: 1px solid var(--rx-line); }
.rx-phero__proof span:last-child { border-block-end: 0; }
.rx-phero .rx-search { grid-column: 1 / -1; max-width: none; }

/* ============================ CATALOG (compact control rail + grid) ============================ */
.rx-catalog__layout { display: grid; grid-template-columns: 244px minmax(0, 1fr); gap: 26px; align-items: start; }
.rx-side { position: sticky; top: 92px; align-self: start; max-height: calc(100dvh - 108px); overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; scrollbar-gutter: stable; border: 1px solid var(--rx-line); border-radius: var(--rx-r-lg); background: var(--rx-surface); box-shadow: var(--rx-shadow-sm); padding: 16px; }
.rx-side__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.rx-side h2 { margin: 0; color: var(--rx-ink); font-size: 13px; font-weight: 750; text-transform: uppercase; letter-spacing: 0.08em; }
.rx-fg { margin-block-start: 18px; }
.rx-fg h3 { margin: 0 0 8px; color: var(--rx-mut); font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; }
.rx-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.rx-chip {
  display: inline-flex; align-items: center; border: 1px solid var(--rx-line-2); border-radius: var(--rx-r-sm);
  color: var(--rx-ink-soft); background: rgba(255, 255, 255, 0.02); cursor: pointer;
  font-size: 12px; font-weight: 600; min-height: 32px; padding: 6px 11px; transition: color 140ms ease, background 140ms ease, border-color 140ms ease;
}
.rx-chip:hover:not(:disabled) { color: var(--rx-ink); border-color: var(--rx-line-3); background: rgba(255, 255, 255, 0.05); }
.rx-chip.is-on { color: var(--rx-bg); border-color: transparent; background: var(--rx-ink); font-weight: 700; }   /* clean white active — no red */
.rx-chip:disabled { opacity: 0.36; cursor: default; }
/* part-family group reads as a clean catalog list, not tag soup */
[data-rx-chips="family"] { flex-direction: column; gap: 4px; }
[data-rx-chips="family"] .rx-chip { inline-size: 100%; justify-content: flex-start; min-height: 36px; border-color: transparent; background: transparent; padding-inline: 10px; }
[data-rx-chips="family"] .rx-chip:hover:not(:disabled) { background: rgba(255, 255, 255, 0.04); }
[data-rx-chips="family"] .rx-chip.is-on { background: var(--rx-surface-3); color: var(--rx-ink); border-color: transparent; }
.rx-note { margin-block-start: 14px; color: var(--rx-mut); font-size: 12px; }
.rx-results__top { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-block-end: 16px; }
.rx-status { color: var(--rx-mut); font-size: 13px; font-weight: 650; }
.rx-sort { display: flex; align-items: center; gap: 8px; color: var(--rx-mut); font-size: 12px; font-weight: 700; text-transform: uppercase; }
.rx-sort select { width: auto; min-width: 130px; border: 1px solid var(--rx-line-2); border-radius: var(--rx-r-sm); color: var(--rx-ink); background: var(--rx-surface-2); padding: 9px 12px; }
.rx-filtersbtn, .rx-side [data-rx-filters-close] { display: none; }

/* ============================ BRAND CARDS (page) — logo-first ============================ */
.rx-blogo--card { block-size: 128px; transition: transform 170ms ease, box-shadow 180ms ease; }
.rx-blogo--card:hover { transform: translateY(-3px); box-shadow: var(--rx-shadow); }
/* logo-first brand cards: just a normalized logo well — no per-card CTA, no
   repeated name, no badge. One shared inquiry CTA sits below the grid. */
.rx-blogo { display: grid; place-items: center; block-size: 110px; padding: 20px; background: #fbfcfd; border: 1px solid #e7ebee; border-radius: var(--rx-r); position: relative; }
.rx-blogo img { max-block-size: 54px; max-inline-size: 76%; inline-size: auto; object-fit: contain; }
.rx-blogo.is-text { background: var(--rx-surface-2); border-color: var(--rx-line-2); }
.rx-blogo.is-text span { color: var(--rx-ink); font-weight: 750; letter-spacing: 0.04em; font-size: 16px; }
.rx-blogo__txt { display: none; }
.rx-blogo.is-error img { display: none; }
.rx-blogo.is-error .rx-blogo__txt { display: grid; place-items: center; color: #10161c; font-weight: 750; font-size: 16px; }
.rx-brands__cta { display: flex; justify-content: center; margin-block-start: 26px; }
.rx-brands__cta .rx-btn { min-inline-size: 280px; }

/* ============================ INQUIRY FORM ============================ */
.rx-inquiry__sub { margin: 12px 0 0; color: var(--rx-ink-soft); }
.rx-inquiry__form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; margin-block-start: 24px; padding: 24px; border: 1px solid var(--rx-line); border-radius: var(--rx-r-lg); background: var(--rx-surface); }
.rx-field { display: grid; gap: 7px; }
.rx-field--full, .rx-inquiry__help, .rx-inquiry__cta, .rx-inquiry__fine { grid-column: 1 / -1; }
.rx-field label { color: var(--rx-ink); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.rx-field input, .rx-field textarea { width: 100%; border: 1px solid var(--rx-line-2); border-radius: var(--rx-r-sm); color: var(--rx-ink); background: var(--rx-surface-2); padding: 12px 13px; }
.rx-field input::placeholder, .rx-field textarea::placeholder { color: var(--rx-mut); }
.rx-inquiry__help { color: var(--rx-ink-soft); font-size: 14px; }
.rx-inquiry__cta { display: flex; flex-wrap: wrap; gap: 10px; }
.rx-inquiry__fine { color: var(--rx-mut); font-size: 12px; }

/* ============================ ABOUT ============================ */
.rx-about__grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 28px; align-items: start; }
.rx-scene { position: relative; border-radius: var(--rx-r-lg); overflow: hidden; min-height: 320px; border: 1px solid var(--rx-line-2); background: #0a141d center / cover no-repeat; }
.rx-scene::after { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, rgba(10, 13, 16, 0.46), rgba(10, 13, 16, 0.16)); }
/* neutral, text-free industrial panel (no AI company imagery / no claims) */
.rx-scene--panel {
  background:
    radial-gradient(420px 280px at 78% 18%, rgba(168, 36, 23, 0.10), transparent 70%),
    repeating-linear-gradient(90deg, rgba(150,166,182,0.05) 0 1px, transparent 1px 38px),
    repeating-linear-gradient(0deg, rgba(150,166,182,0.05) 0 1px, transparent 1px 38px),
    linear-gradient(150deg, #131b24, #0a0f15);
}
.rx-scene--panel::after { background: none; }
.rx-scene--panel .rx-scene__mark { position: absolute; inset-block-end: 18px; inset-inline-start: 20px; color: var(--rx-mut); font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
.rx-scene--panel .rx-scene__mark::before { content: ""; display: inline-block; inline-size: 22px; block-size: 2px; background: var(--rx-accent); margin-inline-end: 8px; vertical-align: middle; }
.rx-sectiongrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-block-start: 22px; }
.rx-mini { background: var(--rx-surface); border: 1px solid var(--rx-line); border-radius: var(--rx-r-lg); padding: 20px; }
.rx-mini h3 { font-size: 15px; color: var(--rx-ink); margin: 0 0 6px; font-weight: 700; }
.rx-mini p { font-size: 13px; color: var(--rx-mut); margin: 0; }
.rx-mini .rx-eyebrow { margin-bottom: 8px; }
.rx-disclaimer { color: var(--rx-mut); font-size: 12px; margin-block-start: 18px; }

/* ============================ CONTACT ============================ */
.rx-contact__grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 24px; align-items: start; }
.rx-contact__cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.rx-ccard { background: var(--rx-surface); border: 1px solid var(--rx-line); border-radius: var(--rx-r-lg); padding: 16px; }
.rx-ccard .rx-eyebrow { margin-bottom: 6px; }
.rx-ccard a, .rx-ccard span { color: var(--rx-ink); font-weight: 600; font-size: 14px; display: block; word-break: break-word; }
.rx-ccard a:hover { color: #fff; text-decoration: underline !important; }
.rx-ccard--wa { background: linear-gradient(160deg, #0c2519, #0a1c14); border-color: rgba(31, 173, 84, 0.36); }
.rx-ccard--wa a { color: #79e6a6; }
.rx-contact__full { grid-column: 1 / -1; }
.rx-check { list-style: none; margin: 0; padding: 24px; border: 1px solid var(--rx-line); border-radius: var(--rx-r-lg); background: var(--rx-surface); color: var(--rx-ink-soft); }
.rx-check li { padding: 11px 0; border-block-end: 1px solid var(--rx-line); }
.rx-check li:last-child { border-block-end: 0; }
.rx-check li strong { color: var(--rx-ink); }

/* ===================== CONTACT LOCATION MAP (Stage 11D-H amendment) ===================== */
/* Full-width section below the contact/inquiry layout. Reuses surfaces, line
   colors, radii, shadow, button styles and section padding — no new framework,
   no new accent, no animation. Dark-theme consistent. */
.rx-maploc { padding-block: var(--rx-pad); border-block-start: 1px solid var(--rx-line); background: linear-gradient(180deg, #0b0e12, #0a0d10); }
.rx-maploc h2 { margin: 0; color: var(--rx-ink); font-size: clamp(1.3rem, 2.4vw, 1.8rem); line-height: 1.1; font-weight: 750; }
.rx-maploc__addr { margin: 12px 0 0; color: var(--rx-ink-soft); font-size: 1rem; line-height: 1.6; max-width: 56ch; }
.rx-maploc__addr bdi { unicode-bidi: isolate; }
.rx-maploc__frame {
  position: relative; margin-block-start: 20px; inline-size: 100%; block-size: 460px;
  overflow: hidden; border: 1px solid var(--rx-line); border-radius: var(--rx-r-lg);
  background: var(--rx-surface); box-shadow: var(--rx-shadow-sm);
}
.rx-maploc__frame iframe { display: block; inline-size: 100%; block-size: 100%; border: 0; }
.rx-maploc__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-block-start: 16px; }
@media (max-width: 1024px) { .rx-maploc__frame { block-size: 400px; } }
@media (max-width: 768px)  { .rx-maploc__frame { block-size: 340px; } }
@media (max-width: 480px)  { .rx-maploc__frame { block-size: 300px; } }

/* ============================ FOOTER ============================ */
.rx-footer { padding: 48px 0 92px; border-block-start: 1px solid var(--rx-line); background: #07090c; }
.rx-footer__nav, .rx-footer__contact { display: flex; flex-wrap: wrap; gap: 14px; }
.rx-footer__nav a, .rx-footer__contact a { color: var(--rx-ink); font-weight: 600; }
.rx-footer__nav a:hover, .rx-footer__contact a:hover { color: #fff; text-decoration: underline !important; }
.rx-footer__contact { margin-block-start: 18px; color: var(--rx-ink-soft); }
.rx-addr { color: var(--rx-mut); }
.rx-copy { margin-block-start: 18px; color: var(--rx-mut); font-size: 12px; }
.rx-sticky { position: fixed; z-index: 50; inset-inline: 16px; inset-block-end: 14px; display: none; grid-template-columns: 1fr 1fr; gap: 10px; }

/* ============================ DRAWER (single-column RFQ) ============================ */
.rx-drawer { position: fixed; z-index: 80; inset: 0; }
.rx-drawer[hidden] { display: none !important; }
.rx-drawer__scrim { position: absolute; inset: 0; background: rgba(6, 8, 11, 0.6); backdrop-filter: blur(4px); }
.rx-drawer__panel {
  position: absolute; inset-block: 0; inset-inline-end: 0; inline-size: min(600px, 100%);
  display: flex; flex-direction: column; overflow: hidden; border-inline-start: 1px solid var(--rx-line-2);
  background: linear-gradient(180deg, #0d131a, #0a0e12); box-shadow: -34px 0 80px rgba(0, 0, 0, 0.5);
  animation: rxSlideIn 0.28s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
@keyframes rxSlideIn { from { transform: translateX(4%); opacity: 0.4; } to { transform: none; opacity: 1; } }
.rarex[dir="rtl"] .rx-drawer__panel { inset-inline-start: 0; inset-inline-end: auto; border-inline-start: 0; border-inline-end: 1px solid var(--rx-line-2); box-shadow: 34px 0 80px rgba(0, 0, 0, 0.5); }
.rx-drawer__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; border-block-end: 1px solid var(--rx-line); background: rgba(10, 14, 18, 0.6); flex: 0 0 auto; }
.rx-drawer__label { color: var(--rx-mut); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.rx-drawer__close { display: grid; place-items: center; inline-size: 40px; block-size: 40px; flex: 0 0 auto; border: 1px solid var(--rx-line-2); border-radius: var(--rx-pill); color: var(--rx-ink); background: rgba(255, 255, 255, 0.04); cursor: pointer; font-size: 24px; line-height: 1; transition: border-color 150ms ease, background 150ms ease; }
.rx-drawer__close:hover { border-color: var(--rx-line-3); background: rgba(255, 255, 255, 0.08); }
.rx-drawer__scroll { flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; padding: 18px; }
.rx-drawer__media { position: relative; display: grid; place-items: center; aspect-ratio: 4 / 3; max-block-size: 320px; overflow: hidden; border: 1px solid var(--rx-line); border-radius: var(--rx-r-lg); background: linear-gradient(150deg, #121a23, #0a141d); padding: 16px; }
.rx-drawer__media img { inline-size: 100%; block-size: 100%; object-fit: contain; filter: drop-shadow(0 18px 26px rgba(0, 0, 0, 0.5)); }
.rx-drawer__body { display: grid; gap: 12px; padding: 18px 2px 4px; }
.rx-drawer__title { margin: 0; color: var(--rx-ink); font-size: 20px; font-weight: 750; line-height: 1.24; overflow-wrap: anywhere; }
.rx-drawer__body .rx-pfam { color: var(--rx-mut); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.rx-drawer__ref { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; border: 1px solid var(--rx-line-2); border-radius: var(--rx-r-sm); background: var(--rx-surface-2); padding: 11px 13px; }
.rx-drawer__ref .rx-k { color: var(--rx-mut); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; }
.rx-drawer__ref .rx-ref { color: var(--rx-ink); font-family: var(--rx-mono); font-size: 15px; font-weight: 600; }
.rx-drawer__meta { display: grid; gap: 0; margin: 0; border: 1px solid var(--rx-line); border-radius: var(--rx-r); overflow: hidden; }
.rx-drawer__row { display: grid; grid-template-columns: 42% 1fr; gap: 10px; padding: 11px 13px; border-block-end: 1px solid var(--rx-line); }
.rx-drawer__row:last-child { border-block-end: 0; }
.rx-drawer__row dt { color: var(--rx-mut); font-size: 12px; font-weight: 650; }
.rx-drawer__row dd { margin: 0; color: var(--rx-ink); font-size: 13px; font-weight: 600; overflow-wrap: anywhere; }
.rx-drawer__desc { margin: 0; color: var(--rx-ink-soft); font-size: 13.5px; line-height: 1.6; }
.rx-drawer__foot { flex: 0 0 auto; padding: 14px 18px 18px; border-block-start: 1px solid var(--rx-line); background: rgba(10, 14, 18, 0.6); }
.rx-drawer__cta { display: grid; gap: 9px; }
.rx-drawer__cta .rx-btn { inline-size: 100%; }
.rx-drawer__help { margin: 11px 0 0; color: var(--rx-mut); font-size: 12px; line-height: 1.55; }

/* ============================ RTL ============================ */
.rarex[dir="rtl"] { direction: rtl; }
.rarex[dir="rtl"] .rx-ref, .rarex[dir="rtl"] .rx-refbar b, .rarex[dir="rtl"] .rx-drawer__ref .rx-ref,
.rarex[dir="rtl"] [href^="tel"], .rarex[dir="rtl"] [href*="wa.me"],
.rarex[dir="rtl"] input, .rarex[dir="rtl"] textarea, .rarex[dir="rtl"] .rx-step__no { direction: ltr; unicode-bidi: plaintext; }
.rarex[dir="rtl"] .rx-marquee { animation-direction: reverse; }
.rarex[dir="rtl"] .rx-hero__tag { inset-inline-end: auto; inset-inline-start: 16px; }

/* ============================ MOTION ============================ */
@media (prefers-reduced-motion: reduce) {
  .rarex *, .rarex *::before, .rarex *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
  .rarex .rx-marquee { animation: none !important; }
  .rarex .rx-fcard:hover .rx-fcard__media img { transform: none; }
}

/* ============================ RESPONSIVE ============================ */
@media (max-width: 1024px) {
  .rx-header__bar { grid-template-columns: auto auto; }
  .rx-burger { display: grid; justify-self: end; }
  .rx-nav, .rx-header__cta { grid-column: 1 / -1; }
  .rx-nav { display: none; flex-direction: column; align-items: stretch; padding: 0 0 14px; }
  .rx-nav.is-open { display: flex; }
  .rx-nav a { padding: 14px; }
  .rx-header__cta { justify-content: space-between; padding-block-end: 14px; }
  .rx-hero__grid, .rx-phero__grid, .rx-about__grid, .rx-contact__grid { grid-template-columns: 1fr; }
  .rx-fgrid, .rx-bgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rx-pgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rx-how__grid { grid-template-columns: repeat(2, 1fr); }
  .rx-sectiongrid { grid-template-columns: 1fr 1fr; }
  .rx-catalog__layout { grid-template-columns: 1fr; }
  .rx-side { position: fixed; z-index: 70; inset-block: 0; inset-inline-start: 0; inline-size: min(340px, 92vw); border-radius: 0; transform: translateX(-110%); transition: transform 200ms ease; overflow: auto; }
  .rarex[dir="rtl"] .rx-side { inset-inline-start: auto; inset-inline-end: 0; transform: translateX(110%); }
  .rx-side.is-open { transform: translateX(0); }
  .rarex[dir="rtl"] .rx-side.is-open { transform: translateX(0); } /* Patch: RTL drawer must override the dir=rtl off-canvas transform */
  .rx-scrim { position: fixed; z-index: 69; inset: 0; display: none; background: rgba(6, 8, 11, 0.6); }
  .rx-scrim.is-open { display: block; }
  .rx-filtersbtn, .rx-side [data-rx-filters-close] { display: inline-flex; }
}
@media (max-width: 760px) {
  .rx-wrap { width: min(100% - 28px, var(--rx-wrap)); }
  .rx-header__bar { min-height: 62px; gap: 12px; }
  .rx-head-wa { display: none; }
  .rx-section-strong, .rx-families, .rx-featured, .rx-inquiry, .rx-brands, .rx-about, .rx-contact, .rx-catalog, .rx-how, .rx-brands-strip, .rx-hero, .rx-phero { padding-block: 46px; }
  .rx-hero__grid { padding-block: 40px; gap: 28px; }
  .rx-hero h1, .rx-phero h1 { font-size: clamp(1.9rem, 8vw, 2.4rem); }
  .rx-hero__visual { min-height: 280px; }
  .rx-search { flex-direction: column; }
  .rx-search .rx-btn { width: 100%; }
  .rx-trust, .rx-fgrid, .rx-pgrid, .rx-bgrid, .rx-how__grid, .rx-sectiongrid, .rx-contact__cards, .rx-inquiry__form { grid-template-columns: 1fr; }
  .rx-trust--row { grid-template-columns: repeat(3, 1fr); }
  .rx-results__top { flex-direction: column; align-items: stretch; }
  .rx-sticky { display: grid; }
  .rx-drawer__panel { inline-size: 100%; }
  .rx-drawer__media { max-block-size: 240px; }
}
@media (max-width: 420px) {
  .rx-wrap { width: calc(100% - 24px); }
  .rx-lang button { min-width: 30px; padding-inline: 6px; }
  .rx-pcta { flex-direction: column; }
  .rx-rlogo { inline-size: 144px; block-size: 82px; }
}

/* =================================================================
   STAGE 10M-X — HOST-THEME ARMOR v2: ABSOLUTE INTERACTION-STATE LOCK
   ----------------------------------------------------------------
   Production hello-biz theme sets global (and, as the live review proved, on
   EVERY interaction state — not just default + hover):
     [type=button],[type=submit],button{border:1px solid #c36;color:#c36;display:inline-block}
     button:focus,button:focus-visible,button:hover,button:active{background:#c36;color:#fff;border-color:#c36}
     a, a:hover, a:focus, a:visited { color:#c36 }
     input:focus, textarea:focus { border-color:#c36; outline-color:#c36 }

   Why v1 leaked: v1 only set color/border-color on the DEFAULT state. The host's
   PSEUDO-class rules (e.g. `button:focus{background:#c36}`, specificity 0,1,1)
   beat RareX's single-class base background (`.rx-btn{background}`, 0,1,0) on
   :focus / :active — so buttons (Email, language, View Details) flashed pink the
   instant they were focused, pressed, or keyboard-selected.

   v2 fix: every interactive role below declares color + background-color +
   border-color + outline-color for ALL states (:hover :focus :focus-visible
   :active :visited [aria-pressed] [aria-current] .is-on .is-active :disabled)
   with `!important`, scoped under `.rarex`. The host theme uses no `!important`,
   so a scoped `.rarex …!important` declaration wins regardless of the host
   selector's specificity. Scope = RareX UI only; WP admin / other pages untouched.
   ================================================================= */

/* ---- 0) generic catch-all: any unknown RareX <button>/input never inherits #c36 ---- */
.rarex button, .rarex [type=button], .rarex [type=submit], .rarex [type=reset] {
  color: var(--rx-ink) !important; background-color: transparent !important; border-color: var(--rx-line-2) !important; outline-color: transparent !important;
}
.rarex button:hover, .rarex button:focus, .rarex button:focus-visible, .rarex button:active,
.rarex [type=button]:hover, .rarex [type=button]:focus, .rarex [type=button]:focus-visible, .rarex [type=button]:active,
.rarex [type=submit]:hover, .rarex [type=submit]:focus, .rarex [type=submit]:active {
  color: var(--rx-ink) !important; background-color: transparent !important; border-color: var(--rx-line-3) !important;
}
.rarex input, .rarex select, .rarex textarea {
  color: var(--rx-ink) !important; background-color: var(--rx-surface-2) !important; border-color: var(--rx-line-2) !important;
}
.rarex input:hover, .rarex select:hover, .rarex textarea:hover,
.rarex input:focus, .rarex select:focus, .rarex textarea:focus,
.rarex input:focus-visible, .rarex textarea:focus-visible {
  color: var(--rx-ink) !important; border-color: var(--rx-line-3) !important; outline-color: transparent !important;
}
.rarex .rx-search input, .rarex .rx-search input:focus { background-color: transparent !important; border-color: transparent !important; }

/* ---- links: never pink in any state. Button-styled <a> handled by role rules below. ---- */
.rarex a, .rarex a:link, .rarex a:visited, .rarex a:hover, .rarex a:focus, .rarex a:active { color: inherit !important; }

/* ---- :focus-visible ring is always steel, never pink ---- */
.rarex :focus-visible { outline-color: transparent !important; box-shadow: var(--rx-focus) !important; }

/* ---- 1) BUTTON SYSTEM — secondary / line (Email, View Details, Request Quote) ---- */
.rarex .rx-btn,
.rarex .rx-btn:hover, .rarex .rx-btn:focus, .rarex .rx-btn:focus-visible, .rarex .rx-btn:active {
  color: var(--rx-ink) !important; border-color: var(--rx-line-2) !important;
}
.rarex .rx-btn { background-color: var(--rx-surface-2) !important; }
.rarex .rx-btn:hover, .rarex .rx-btn:focus, .rarex .rx-btn:focus-visible, .rarex .rx-btn:active { background-color: var(--rx-surface-3) !important; border-color: var(--rx-line-3) !important; }
.rarex .rx-btn--line { background-color: rgba(255,255,255,0.03) !important; border-color: var(--rx-line-2) !important; color: var(--rx-ink) !important; }
.rarex .rx-btn--line:hover, .rarex .rx-btn--line:focus, .rarex .rx-btn--line:focus-visible, .rarex .rx-btn--line:active {
  background-color: rgba(255,255,255,0.07) !important; border-color: var(--rx-line-3) !important; color: var(--rx-ink) !important;
}
/* PRIMARY = filled deep red (the ONLY UI red). White text every state. */
.rarex .rx-btn--primary,
.rarex .rx-btn--primary:hover, .rarex .rx-btn--primary:focus, .rarex .rx-btn--primary:focus-visible, .rarex .rx-btn--primary:active {
  color: #fff !important; border-color: transparent !important;
  background-color: var(--rx-accent) !important;
  background-image: linear-gradient(180deg, var(--rx-accent), var(--rx-accent-deep)) !important;
}
/* WHATSAPP = filled green every state */
.rarex .rx-btn--wa,
.rarex .rx-btn--wa:hover, .rarex .rx-btn--wa:focus, .rarex .rx-btn--wa:focus-visible, .rarex .rx-btn--wa:active {
  color: #fff !important; border-color: transparent !important;
  background-color: var(--rx-wa) !important;
  background-image: linear-gradient(180deg, var(--rx-wa-2), var(--rx-wa)) !important;
}

/* ---- 2) LANGUAGE SWITCHER — steel system, never pink, consistent when selected ---- */
.rarex .rx-lang { border-color: var(--rx-line) !important; background-color: rgba(255,255,255,0.03) !important; }
.rarex .rx-lang button,
.rarex .rx-lang button:focus, .rarex .rx-lang button:focus-visible {
  color: var(--rx-mut) !important; background-color: transparent !important; border-color: transparent !important; outline-color: transparent !important;
}
.rarex .rx-lang button:hover, .rarex .rx-lang button:active {
  color: var(--rx-ink) !important; background-color: rgba(255,255,255,0.07) !important; border-color: transparent !important;
}
/* selected / current language = solid off-white pill, dark text — identical in hover/focus/active */
.rarex .rx-lang button.is-on,
.rarex .rx-lang button.is-on:hover, .rarex .rx-lang button.is-on:focus, .rarex .rx-lang button.is-on:focus-visible, .rarex .rx-lang button.is-on:active,
.rarex .rx-lang button[aria-current="true"] {
  color: var(--rx-bg) !important; background-color: var(--rx-ink) !important; border-color: transparent !important;
}

/* ---- 3) FILTER CHIPS — steel; active = off-white, never pink ---- */
.rarex .rx-chip,
.rarex .rx-chip:focus, .rarex .rx-chip:focus-visible { color: var(--rx-ink-soft) !important; background-color: rgba(255,255,255,0.02) !important; border-color: var(--rx-line-2) !important; }
.rarex .rx-chip:hover:not(:disabled), .rarex .rx-chip:active { color: var(--rx-ink) !important; background-color: rgba(255,255,255,0.06) !important; border-color: var(--rx-line-3) !important; }
.rarex .rx-chip.is-on,
.rarex .rx-chip.is-on:hover, .rarex .rx-chip.is-on:focus, .rarex .rx-chip.is-on:focus-visible, .rarex .rx-chip.is-on:active,
.rarex .rx-chip[aria-pressed="true"] { color: var(--rx-bg) !important; background-color: var(--rx-ink) !important; border-color: transparent !important; }
.rarex [data-rx-chips="family"] .rx-chip { background-color: transparent !important; border-color: transparent !important; }
.rarex [data-rx-chips="family"] .rx-chip:hover:not(:disabled) { background-color: rgba(255,255,255,0.04) !important; }
.rarex [data-rx-chips="family"] .rx-chip.is-on { background-color: var(--rx-surface-3) !important; color: var(--rx-ink) !important; }

/* ---- 4) NAV / FOOTER / CONTACT LINKS — soft ink, white on hover, never pink ---- */
.rarex .rx-nav a, .rarex .rx-nav a:visited { color: var(--rx-ink-soft) !important; background-color: transparent !important; }
.rarex .rx-nav a:hover, .rarex .rx-nav a:focus, .rarex .rx-nav a:focus-visible, .rarex .rx-nav a:active { color: var(--rx-ink) !important; background-color: rgba(255,255,255,0.05) !important; }
.rarex .rx-nav a[aria-current], .rarex .rx-nav a.is-active { color: var(--rx-ink) !important; }
.rarex .rx-footer__nav a, .rarex .rx-footer__contact a, .rarex .rx-footer__nav a:visited, .rarex .rx-footer__contact a:visited { color: var(--rx-ink) !important; }
.rarex .rx-footer__nav a:hover, .rarex .rx-footer__contact a:hover, .rarex .rx-footer__nav a:focus, .rarex .rx-footer__contact a:focus { color: #fff !important; }
.rarex .rx-ccard a, .rarex .rx-ccard a:visited { color: var(--rx-ink) !important; }
.rarex .rx-ccard a:hover, .rarex .rx-ccard a:focus { color: #fff !important; }
.rarex .rx-ccard--wa a, .rarex .rx-ccard--wa a:visited, .rarex .rx-ccard--wa a:hover, .rarex .rx-ccard--wa a:focus { color: #79e6a6 !important; }
.rarex .rx-flink { color: var(--rx-ink-soft) !important; }
.rarex .rx-fcard:hover .rx-flink, .rarex .rx-fcard:focus-visible .rx-flink { color: var(--rx-ink) !important; }
.rarex .rx-link--text { color: var(--rx-ink) !important; }

/* ---- 5) PRODUCT TITLE / MEDIA / DRAWER / BURGER / SORT — neutral every state ---- */
.rarex .rx-pname, .rarex .rx-pname:focus, .rarex .rx-pname:focus-visible { color: var(--rx-ink) !important; background-color: transparent !important; border: 0 !important; }
.rarex .rx-pname:hover, .rarex .rx-pname:active { color: #fff !important; background-color: transparent !important; }
.rarex .rx-pmedia, .rarex .rx-prow__media,
.rarex .rx-pmedia:hover, .rarex .rx-prow__media:hover, .rarex .rx-pmedia:focus, .rarex .rx-prow__media:focus,
.rarex .rx-pmedia:focus-visible, .rarex .rx-prow__media:focus-visible, .rarex .rx-pmedia:active, .rarex .rx-prow__media:active {
  background-color: #0c141c !important; border-color: var(--rx-line) !important; color: inherit !important;
}
/* Stage 10M-Y: product images render the WHOLE part. Scoped !important so the
   host theme cannot re-impose display/object-fit/dimensions/margins/alignment
   that would crop, zoom, stretch, or mis-align the thumbnail. */
.rarex .rx-prow__media img, .rarex .rx-pimg img, .rarex .rx-drawer__media img {
  display: block !important; object-fit: contain !important; object-position: center !important;
  max-inline-size: 100% !important; max-block-size: 100% !important; inline-size: auto !important; block-size: auto !important;
  margin: 0 !important; float: none !important;
}
/* Stage 10M-Y(C): brand marquee containment. Host theme must not alter the tile
   border/background, the track overflow, or the logo image fit. No pink ever. */
.rarex .rx-rail { overflow: hidden !important; }
.rarex .rx-rlogo, .rarex .rx-rlogo:hover, .rarex .rx-rlogo:focus, .rarex .rx-rlogo:focus-within { border-color: var(--rx-line-2) !important; }
.rarex .rx-rlogo:hover { border-color: var(--rx-line-3) !important; }
.rarex .rx-rlogo img { display: block !important; object-fit: contain !important; margin: 0 !important; float: none !important; filter: none !important; }
.rarex .rx-drawer__close,
.rarex .rx-drawer__close:focus, .rarex .rx-drawer__close:focus-visible { color: var(--rx-ink) !important; background-color: rgba(255,255,255,0.04) !important; border-color: var(--rx-line-2) !important; }
.rarex .rx-drawer__close:hover, .rarex .rx-drawer__close:active { color: var(--rx-ink) !important; background-color: rgba(255,255,255,0.08) !important; border-color: var(--rx-line-3) !important; }
.rarex .rx-burger,
.rarex .rx-burger:hover, .rarex .rx-burger:focus, .rarex .rx-burger:focus-visible, .rarex .rx-burger:active {
  color: var(--rx-ink) !important; background-color: rgba(255,255,255,0.05) !important; border-color: var(--rx-line-2) !important;
}
.rarex .rx-sort select, .rarex .rx-sort select:focus, .rarex .rx-sort select:hover { color: var(--rx-ink) !important; background-color: var(--rx-surface-2) !important; border-color: var(--rx-line-2) !important; }
.rarex .rx-path { color: var(--rx-ink-soft) !important; background-color: rgba(255,255,255,0.03) !important; border-color: var(--rx-line) !important; }

/* ---- 6) layout holds: no desktop hamburger / no stray desktop Filters button ---- */
.rarex .rx-burger { display: none; }
.rarex .rx-filtersbtn, .rarex .rx-side [data-rx-filters-close] { display: none; }
.rarex .rx-head-inq { display: none; }
@media (max-width: 1024px) {
  .rarex .rx-burger { display: grid; }
  .rarex .rx-filtersbtn, .rarex .rx-side [data-rx-filters-close] { display: inline-flex; }
}

/* =================================================================
   STAGE 10M-R — components: compact CTA, icon family cards, catalog de-emphasis
   ================================================================= */
/* compact inquiry CTA (replaces full form on Home/About/Families) */
.rx-cta { padding-block: 52px; border-block: 1px solid var(--rx-line); background: linear-gradient(180deg, #0b0e12, #0a0d10); }
.rx-cta__inner { display: flex; align-items: center; justify-content: space-between; gap: 22px; flex-wrap: wrap; }
.rx-cta__copy h2 { margin: 0 0 6px; color: var(--rx-ink); font-size: clamp(1.3rem, 2.4vw, 1.7rem); font-weight: 750; }
.rx-cta__copy p { margin: 0; color: var(--rx-ink-soft); font-size: 0.95rem; max-width: 56ch; }
.rx-cta__row { display: flex; gap: 10px; flex-wrap: wrap; flex: 0 0 auto; }

/* icon family cards (Stage 10M-X: refined industrial mark — a centered cog glyph
   on a clean steel tile. No hairline/empty-box look that reads as a missing image. */
.rx-fcard--icon { flex-direction: row; align-items: center; gap: 14px; min-block-size: 0; padding: 16px 18px; }
.rx-fcard--icon .rx-fcard__ic {
  position: relative; flex: 0 0 auto; inline-size: 50px; block-size: 50px; border-radius: var(--rx-r);
  border: 1px solid var(--rx-line-2);
  background: linear-gradient(150deg, var(--rx-surface-3), var(--rx-surface));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}
/* centered line-icon (alpha mask -> tinted steel, no pink, scales crisply) */
.rx-fcard--icon .rx-fcard__ic::before {
  content: ""; position: absolute; inset: 0; margin: auto; inline-size: 26px; block-size: 26px;
  background: var(--rx-ink-soft);
  -webkit-mask: var(--rx-ic-cog) center / contain no-repeat; mask: var(--rx-ic-cog) center / contain no-repeat;
}
.rx-fcard--icon:hover .rx-fcard__ic::before { background: var(--rx-ink); }
/* one small controlled accent: a thin brick-red corner tick (not a full bar) */
.rx-fcard--icon .rx-fcard__ic::after {
  content: ""; position: absolute; inset-block-start: 7px; inset-inline-end: 7px; inline-size: 5px; block-size: 5px;
  border-radius: 1px; background: var(--rx-accent); opacity: .9;
}
.rx-fcard--icon .rx-fcard__body { padding: 0; gap: 3px; }
.rx-fcard--icon .rx-fcard__body h3 { font-size: 14.5px; }
.rx-fcard--icon .rx-fcard__body p { font-size: 12px; }
.rx-fcard--icon .rx-flink { margin-block-start: 4px; font-size: 11.5px; letter-spacing: .04em; text-transform: uppercase; }

/* catalog: images become supporting thumbnails, not dominant white blocks */
.rarex .rx-pmedia { aspect-ratio: auto; block-size: 150px; }
@media (max-width: 760px) { .rarex .rx-pmedia { block-size: 140px; } }

/* Stage 10M-R — functional hero panel */
.rx-hero__grid2 { display: grid; grid-template-columns: 1.25fr 0.75fr; gap: 40px; align-items: center; padding-block: 64px 56px; }
.rx-hero__grid2 .rx-hero__copy { max-width: 720px; }
.rx-hero__grid2 .rx-trust--hero { margin-block-start: 30px; }
.rx-hpanel { background: var(--rx-surface); border: 1px solid var(--rx-line-2); border-radius: var(--rx-r-lg); padding: 22px; box-shadow: var(--rx-shadow-sm); }
.rx-hpanel__list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 11px; }
.rx-hpanel__list li { position: relative; color: var(--rx-ink-soft); font-size: 13.5px; line-height: 1.45; padding-inline-start: 22px; }
.rx-hpanel__list li::before { content: ""; position: absolute; inset-inline-start: 0; inset-block-start: 7px; inline-size: 8px; block-size: 8px; border-radius: 2px; background: var(--rx-accent); }
.rx-hpanel__foot { margin-block-start: 18px; padding-block-start: 16px; border-block-start: 1px solid var(--rx-line); display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.rx-hpanel__lead { color: var(--rx-ink); font-size: 13px; font-weight: 650; max-width: 24ch; }
@media (max-width: 1024px) { .rx-hero__grid2 { grid-template-columns: 1fr; gap: 26px; } }

/* =================================================================
   STAGE 10M-R — DENSE B2B RFQ CATALOG LIST (rows, not ecommerce tiles)
   ================================================================= */
[data-rx-view="catalog"] .rx-pgrid { display: grid; grid-template-columns: 1fr; gap: 9px; margin-block-start: 4px; }
.rx-prow {
  display: grid; grid-template-columns: 116px minmax(0, 1fr) auto; gap: 16px; align-items: center;
  border: 1px solid var(--rx-line); border-radius: var(--rx-r); background: var(--rx-surface); padding: 12px 14px;
  transition: border-color 150ms ease, background 150ms ease;
}
.rx-prow:hover { border-color: var(--rx-line-3); background: var(--rx-surface-2); }
/* controlled thumbnail (scoped so the host theme can't pink/inline-block it).
   Stage 10M-Y: FULL-VISIBILITY — object-fit:contain so the WHOLE part shows
   whenever the source contains it; slight empty space is preferred over cropping. */
.rarex .rx-prow__media {
  position: relative; display: block; inline-size: 116px; block-size: 86px; overflow: hidden;
  border: 1px solid var(--rx-line); border-radius: var(--rx-r-sm); background: #0c141c; cursor: pointer; padding: 0; color: inherit;
}
.rx-prow__media .rx-pimg { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 6px; background: linear-gradient(150deg, #131a22, #0b1117); }
.rx-prow__media .rx-pimg img { max-inline-size: 100%; max-block-size: 100%; inline-size: auto; block-size: auto; object-fit: contain; object-position: center; }
.rx-prow__media .rx-imgph { color: var(--rx-mut); font-size: 9px; font-weight: 700; text-align: center; padding: 4px; }
.rx-prow__media .rx-pimg img + .rx-imgph { display: none; }
.rx-prow__main { min-inline-size: 0; display: grid; gap: 5px; }
.rx-prow .rx-pfam { color: var(--rx-mut); font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.rx-prow .rx-pname { font-size: 15px; font-weight: 650; line-height: 1.3; }
.rx-prow__meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-block-start: 2px; }
.rx-refchip { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--rx-line-2); border-radius: var(--rx-r-sm); background: var(--rx-surface-2); padding: 4px 9px; }
.rx-refchip i { color: var(--rx-mut); font-size: 9.5px; font-weight: 800; font-style: normal; text-transform: uppercase; letter-spacing: 0.06em; }
.rx-refchip b { color: var(--rx-ink); font-family: var(--rx-mono); font-size: 12.5px; font-weight: 600; overflow-wrap: anywhere; }
.rx-refchip--muted b { color: var(--rx-mut); }
.rx-prow__bm { color: var(--rx-ink-soft); font-size: 12.5px; }
.rx-prow__act { display: flex; gap: 8px; flex: 0 0 auto; }
.rx-prow__act .rx-btn { min-inline-size: 0; }
/* dense list -> sidebar can be a touch tighter */
.rx-catalog__layout { grid-template-columns: 236px minmax(0, 1fr); }

/* mobile: compact stacked card, smaller thumbnail, full-width touch actions */
@media (max-width: 760px) {
  .rx-prow { grid-template-columns: 84px minmax(0, 1fr); gap: 12px; padding: 12px; }
  .rx-prow__media { inline-size: 84px; }
  .rarex .rx-prow__media { inline-size: 84px; block-size: 74px; }
  .rx-prow__act { grid-column: 1 / -1; margin-block-start: 2px; }
  .rx-prow__act .rx-btn { flex: 1 1 0; }
}

/* ============================================================
   Stage 11D — full-card catalog grid + enlarge drawer
   Uses existing RareX tokens only (no new hues; no pink).
   ============================================================ */
/* Stage 11D-B: auto-fill sizing so cards stay ~260-300px (no stretch/oversize).
   Columns scale with the (widened) full-card catalog wrap below. */
/* Scoped to [data-rx-view="catalog"] to override the Stage-10 dense-row rule
   `[data-rx-view="catalog"] .rx-pgrid { grid-template-columns: 1fr }` (equal
   specificity, later in source → wins). */
[data-rx-view="catalog"] .rx-fcgrid { grid-template-columns: repeat(auto-fill, minmax(260px, 300px));
  justify-content: start; align-items: start; gap: clamp(14px, 1.4vw, 20px); margin-block-start: 8px; }
/* mobile: single full-width card (no left-aligned gap) */
@media (max-width: 430px) {
  [data-rx-view="catalog"] .rx-fcgrid { grid-template-columns: 1fr; }
}

/* Widen the catalog container only in full-card mode so 4-5 columns fit while
   each card stays within 260-300px (5@1920, 4@1440/1366, 3@1024, 2@768, 1@<=430). */
.rx-catalog--fullcard .rx-wrap { width: min(1680px, calc(100% - 40px)); max-width: 1680px; }
/* At <=1024 the sidebar becomes a fixed drawer (removed from flow). A later base
   rule re-adds a 236px track, which would squeeze results into 236px; collapse the
   full-card layout to one full-width column so the grid uses the full width. */
@media (max-width: 1024px) {
  .rx-catalog--fullcard .rx-catalog__layout { grid-template-columns: 1fr; }
}

.rx-fccard { display: flex; flex-direction: column; background: var(--rx-surface);
  border: 1px solid var(--rx-line); border-radius: var(--rx-r-lg); overflow: hidden;
  transition: border-color .15s, transform .15s; }
.rx-fccard:hover { border-color: var(--rx-line-3); transform: translateY(-2px); }
.rx-fcimg { position: relative; display: flex; align-items: center; justify-content: center;
  inline-size: 100%; aspect-ratio: 0.919; padding: 12px; cursor: zoom-in;
  background: radial-gradient(120% 120% at 50% 0%, var(--rx-surface-2), var(--rx-bg-2));
  border: 0; }
.rx-fcimg img { inline-size: 100%; block-size: 100%; object-fit: contain; object-position: center;
  display: block; filter: drop-shadow(0 6px 14px rgba(0,0,0,.45)); }
.rx-fcimg .rx-zoom { position: absolute; inset-inline-end: 12px; inset-block-start: 12px;
  background: rgba(10,12,15,.7); border: 1px solid var(--rx-line-2); border-radius: var(--rx-r-sm);
  color: var(--rx-ink-soft); font-size: 11px; padding: 4px 8px; opacity: 0; transition: opacity .15s; }
.rx-fcimg:hover .rx-zoom, .rx-fcimg:focus-visible .rx-zoom { opacity: 1; }
.rx-fcmeta { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px 14px;
  border-block-start: 1px solid var(--rx-line); }
.rx-fcfam { font-size: 14px; font-weight: 650; color: var(--rx-ink); }
.rx-fcseries { font-size: 12px; color: var(--rx-mut); }
.rx-fcref { align-self: flex-start; font-family: var(--rx-mono); font-size: 12px; color: var(--rx-ink-soft);
  background: var(--rx-surface-2); border: 1px solid var(--rx-line); border-radius: var(--rx-r-sm); padding: 3px 9px; }
.rx-fcref--none { color: var(--rx-mut); }
.rx-fcactions { display: flex; gap: 8px; margin-block-start: 2px; }
.rx-fcactions .rx-btn { flex: 1 1 0; min-inline-size: 0; }
.rx-fcmore { display: flex; justify-content: center; margin-block: 24px; }
.rx-fcmore[hidden] { display: none; }

/* ---- Stage 11D-B: centered detail MODAL (one backdrop + one opaque surface) ---- */
.rx-fc-modal-backdrop { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center;
  padding: 24px; background: rgba(4, 6, 8, 0.82); }
.rx-fc-modal-backdrop[hidden] { display: none; }
.rx-fc-modal { position: relative; display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
  inline-size: min(1180px, calc(100vw - 48px)); max-block-size: calc(100dvh - 48px);
  overflow: hidden; background: var(--rx-surface); border: 1px solid var(--rx-line-2);
  border-radius: 22px; box-shadow: var(--rx-shadow); outline: none; }
.rx-fc-modal-close { position: absolute; inset-block-start: 12px; inset-inline-end: 12px; z-index: 2;
  inline-size: 38px; block-size: 38px; border-radius: var(--rx-r-sm); cursor: pointer;
  background: rgba(10, 12, 15, 0.78); border: 1px solid var(--rx-line-2); color: var(--rx-ink); font-size: 19px; line-height: 1; }
.rx-fc-modal-close:hover { border-color: var(--rx-line-3); }
.rx-fc-modal-media { min-inline-size: 0; display: flex; align-items: center; justify-content: center;
  padding: 22px; background: radial-gradient(120% 120% at 50% 0%, var(--rx-surface-2), var(--rx-bg)); }
.rx-fc-modal-media img { max-inline-size: 100%; max-block-size: calc(100dvh - 92px); inline-size: auto;
  block-size: auto; object-fit: contain; filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.5)); }
.rx-fc-modal-content { min-inline-size: 0; overflow-y: auto; overscroll-behavior: contain;
  padding: 22px; border-inline-start: 1px solid var(--rx-line); background: var(--rx-surface); }
.rx-fc-modal-title { margin: 0 0 14px; font-size: 15px; font-weight: 650; color: var(--rx-ink);
  font-family: var(--rx-mono); }
.rx-fc-modal-fields { border: 1px solid var(--rx-line); border-radius: var(--rx-r-lg); overflow: hidden; }
.rx-fc-modal-row { display: grid; grid-template-columns: 140px 1fr; border-block-end: 1px solid var(--rx-line); font-size: 13px; }
.rx-fc-modal-row:last-child { border-block-end: 0; }
.rx-fc-modal-k { background: var(--rx-surface-2); color: var(--rx-ink-soft); padding: 10px 12px; font-weight: 600; }
.rx-fc-modal-v { padding: 10px 12px; color: var(--rx-ink); overflow-wrap: anywhere; }
.rx-fc-modal-actions { margin-block-start: 16px; }
.rx-fc-modal-actions .rx-btn { inline-size: 100%; }
[dir="rtl"] .rx-fc-modal-row { grid-template-columns: 1fr 140px; }
[dir="rtl"] .rx-fc-modal-content { border-inline-start: 0; border-inline-end: 1px solid var(--rx-line); }
@media (max-width: 820px) {
  .rx-fc-modal { grid-template-columns: 1fr; grid-template-rows: auto 1fr;
    inline-size: min(560px, calc(100vw - 28px)); max-block-size: calc(100dvh - 28px); }
  .rx-fc-modal-media { max-block-size: 46dvh; padding: 16px; }
  .rx-fc-modal-media img { max-block-size: calc(46dvh - 32px); }
  .rx-fc-modal-content { border-inline-start: 0; border-block-start: 1px solid var(--rx-line); }
  [dir="rtl"] .rx-fc-modal-content { border-inline-end: 0; }
}

/* Stage 11D-B: restrained designer credit (secondary; no watermark/badge) */
.rx-credit { margin-block-start: 8px; color: var(--rx-mut); font-size: 12px; }
.rx-credit a { color: var(--rx-ink-soft); text-decoration: underline; text-underline-offset: 2px; }
.rx-credit a:hover { color: var(--rx-ink); }

/* Stage 11D-D: About-view website-credits block. Reuses tokens/eyebrow/surface
 * language; sits below the company content as a secondary, divider-separated
 * card. No new palette, font, animation, or watermark. RTL-safe (logical props). */
.rx-credit-block { max-width: 640px; margin-block-start: 30px; padding-block-start: 26px; border-block-start: 1px solid var(--rx-line); }
.rx-credit-block h2 { margin: 0 0 8px; color: var(--rx-ink); font-size: clamp(1.1rem, 2.2vw, 1.35rem); line-height: 1.16; font-weight: 720; }
.rx-credit-block p { margin: 0; color: var(--rx-ink-soft); font-size: 14px; line-height: 1.6; max-width: 60ch; }
.rx-credit-block .rx-credit-link { display: inline-block; margin-block-start: 14px; color: var(--rx-ink-soft); font-size: 13px; font-weight: 650; text-decoration: underline; text-underline-offset: 3px; }
.rx-credit-block .rx-credit-link:hover { color: var(--rx-ink); }

/* =================================================================
   STAGE 11E — FULL-SITE LIGHT / DARK THEME SYSTEM
   -----------------------------------------------------------------
   Canonical state: <html data-rx-theme="dark|light">, set pre-paint by a tiny
   head bootstrap, persisted in localStorage 'rarex-theme', otherwise following
   prefers-color-scheme. The dark design ABOVE is unchanged — this section only
   ADDS the theme toggle, restrained theme transitions, and a LIGHT override
   layer (token remap + atmosphere). Dark therefore renders byte-for-byte as
   before. The light layer is scoped to .rarex (admin/login/legacy untouched).
   Brand-red stays filled-CTA-only; WhatsApp green stays WhatsApp-only.
   ================================================================= */

/* ---- THEME TOGGLE (shared header control; both themes; token-driven) ---- */
.rx-themetoggle {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  inline-size: 40px; block-size: 40px; padding: 0;
  border: 1px solid var(--rx-line-2); border-radius: var(--rx-r-sm);
  background: var(--rx-fill-1, rgba(255,255,255,0.03)); color: var(--rx-ink-soft); cursor: pointer;
  transition: color 150ms ease, background 150ms ease, border-color 150ms ease;
}
.rx-themetoggle svg { inline-size: 18px; block-size: 18px; display: block; pointer-events: none; }
.rx-themetoggle .rx-ic-sun { display: none; }
.rx-themetoggle .rx-ic-moon { display: block; }
[data-rx-theme="light"] .rx-themetoggle .rx-ic-sun { display: block; }
[data-rx-theme="light"] .rx-themetoggle .rx-ic-moon { display: none; }
/* host-theme armor: the toggle is a <button>; beat the generic button armor and
   hello-biz #c36 with a more-specific scoped !important rule, every state */
.rarex .rx-themetoggle,
.rarex .rx-themetoggle:focus, .rarex .rx-themetoggle:focus-visible {
  color: var(--rx-ink-soft) !important; background-color: var(--rx-fill-1, rgba(255,255,255,0.03)) !important; border-color: var(--rx-line-2) !important; outline-color: transparent !important;
}
.rarex .rx-themetoggle:hover, .rarex .rx-themetoggle:active {
  color: var(--rx-ink) !important; background-color: var(--rx-fill-4, rgba(255,255,255,0.07)) !important; border-color: var(--rx-line-3) !important;
}

/* ---- RESTRAINED THEME TRANSITION (only large surfaces lacking a transition;
        reduced-motion already neutralizes .rarex * transition-duration) ---- */
.rarex .rx-header, .rarex .rx-footer, .rarex .rx-side, .rarex .rx-main,
.rarex .rx-hero, .rarex .rx-phero, .rarex .rx-brands-strip, .rarex .rx-families,
.rarex .rx-how, .rarex .rx-about, .rarex .rx-contact, .rarex .rx-catalogcta,
.rarex .rx-cta, .rarex .rx-maploc, .rarex .rx-ccard, .rarex .rx-mini,
.rarex .rx-step, .rarex .rx-hpanel, .rarex .rx-check, .rarex .rx-inquiry__form,
.rarex .rx-fc-modal, .rarex .rx-fc-modal-content, .rarex .rx-fcmeta,
.rarex .rx-maploc__frame {
  transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease;
}

/* =====================  LIGHT THEME  =====================
   Premium technical-documentation light: engineered off-white page, near-white
   elevated cards, graphite ink, restrained steel borders, soft slate shadows. */
[data-rx-theme="light"] .rarex {
  --rx-bg: #e9edf2;
  --rx-bg-2: #e3e8ee;
  --rx-surface: #ffffff;
  --rx-surface-2: #f1f4f8;
  --rx-surface-3: #e5eaf0;
  --rx-line: rgba(18, 28, 40, 0.10);
  --rx-line-2: rgba(18, 28, 40, 0.16);
  --rx-line-3: rgba(18, 28, 40, 0.28);
  --rx-ink: #161b22;
  --rx-ink-soft: #44505f;
  --rx-mut: #586472;
  --rx-shadow: 0 18px 40px rgba(20, 32, 48, 0.14);
  --rx-shadow-sm: 0 10px 24px rgba(20, 32, 48, 0.10);
  --rx-focus: 0 0 0 2px var(--rx-bg), 0 0 0 4px rgba(40, 56, 78, 0.55);
  /* light-only helper tokens consumed by the override rules below */
  --rx-ink-strong: #05080b;
  --rx-fill-faint: rgba(18, 28, 40, 0.03);
  --rx-fill-1: rgba(18, 28, 40, 0.045);
  --rx-fill-2: rgba(18, 28, 40, 0.06);
  --rx-fill-3: rgba(18, 28, 40, 0.07);
  --rx-fill-4: rgba(18, 28, 40, 0.09);
  --rx-fill-5: rgba(18, 28, 40, 0.11);
  --rx-fill-6: rgba(18, 28, 40, 0.13);
  --rx-well: #e2e7ed;
  --rx-well-2: #e6ebf0;
  color: var(--rx-ink); background: var(--rx-bg); color-scheme: light;
}
.rarex { color-scheme: dark; }
[data-rx-theme="light"] body.rarex-app { background: #e9edf2 !important; }

/* atmosphere: page + sections + hero + header + search (light steel gradients) */
[data-rx-theme="light"] .rarex .rx-main { background: linear-gradient(180deg, #eef1f5, #e9edf2 60%, #eef1f5); }
[data-rx-theme="light"] .rarex .rx-hero {
  background: radial-gradient(760px 460px at 8% 110%, rgba(40, 60, 90, 0.06), transparent 60%), linear-gradient(160deg, #eef2f6, #e7ecf2 78%);
}
[data-rx-theme="light"] .rarex .rx-section-strong,
[data-rx-theme="light"] .rarex .rx-brands-strip { background: linear-gradient(180deg, #eef1f5, #e9edf2); }
[data-rx-theme="light"] .rarex .rx-phero { background: linear-gradient(180deg, #eef1f5, transparent); }
[data-rx-theme="light"] .rarex .rx-catalogcta,
[data-rx-theme="light"] .rarex .rx-cta { background: linear-gradient(180deg, #eef1f5, #e9edf2); }
[data-rx-theme="light"] .rarex .rx-maploc { background: linear-gradient(180deg, #eef1f5, #e9edf2); }
[data-rx-theme="light"] .rarex .rx-header { background: rgba(233, 237, 242, 0.82); }
[data-rx-theme="light"] .rarex .rx-search { background: rgba(255, 255, 255, 0.72); }

/* media wells: keep contained part photos on a clean light surface */
[data-rx-theme="light"] .rarex .rx-hero__visual,
[data-rx-theme="light"] .rarex .rx-fcard__media,
[data-rx-theme="light"] .rarex .rx-scene { background-color: var(--rx-well); }
[data-rx-theme="light"] .rarex .rx-pmedia,
[data-rx-theme="light"] .rarex .rx-prow__media { background-color: var(--rx-well-2) !important; }
[data-rx-theme="light"] .rarex .rx-pimg,
[data-rx-theme="light"] .rarex .rx-prow__media .rx-pimg { background: linear-gradient(150deg, #eef2f6, #e2e8ef); }
[data-rx-theme="light"] .rarex .rx-fcard__media--ph { background: linear-gradient(150deg, #eef2f6, #e2e8ef); }
[data-rx-theme="light"] .rarex .rx-drawer__media { background: linear-gradient(150deg, #eef2f6, #e2e8ef); }
[data-rx-theme="light"] .rarex .rx-drawer__panel { background: linear-gradient(180deg, #ffffff, #f3f6f9); }
[data-rx-theme="light"] .rarex .rx-drawer__head,
[data-rx-theme="light"] .rarex .rx-drawer__foot { background: rgba(241, 244, 248, 0.7); }
[data-rx-theme="light"] .rarex .rx-rlogo,
[data-rx-theme="light"] .rarex .rx-blogo { background: #ffffff; }

/* armored fills: beat the !important armor so hovers darken (not lighten) on light */
[data-rx-theme="light"] .rarex .rx-btn--line { background-color: var(--rx-fill-1) !important; }
[data-rx-theme="light"] .rarex .rx-btn--line:hover,
[data-rx-theme="light"] .rarex .rx-btn--line:focus,
[data-rx-theme="light"] .rarex .rx-btn--line:focus-visible,
[data-rx-theme="light"] .rarex .rx-btn--line:active { background-color: var(--rx-fill-3) !important; }
[data-rx-theme="light"] .rarex .rx-lang { background-color: var(--rx-fill-1) !important; }
[data-rx-theme="light"] .rarex .rx-lang button:hover,
[data-rx-theme="light"] .rarex .rx-lang button:active { background-color: var(--rx-fill-3) !important; }
[data-rx-theme="light"] .rarex .rx-chip,
[data-rx-theme="light"] .rarex .rx-chip:focus,
[data-rx-theme="light"] .rarex .rx-chip:focus-visible { background-color: var(--rx-fill-faint) !important; }
[data-rx-theme="light"] .rarex .rx-chip:hover:not(:disabled),
[data-rx-theme="light"] .rarex .rx-chip:active { background-color: var(--rx-fill-2) !important; }
[data-rx-theme="light"] .rarex [data-rx-chips="family"] .rx-chip { background-color: transparent !important; }
[data-rx-theme="light"] .rarex [data-rx-chips="family"] .rx-chip:hover:not(:disabled) { background-color: var(--rx-fill-1) !important; }
[data-rx-theme="light"] .rarex .rx-nav a:hover,
[data-rx-theme="light"] .rarex .rx-nav a:focus,
[data-rx-theme="light"] .rarex .rx-nav a:focus-visible,
[data-rx-theme="light"] .rarex .rx-nav a:active { background-color: var(--rx-fill-2) !important; }
[data-rx-theme="light"] .rarex .rx-burger,
[data-rx-theme="light"] .rarex .rx-burger:hover, [data-rx-theme="light"] .rarex .rx-burger:focus,
[data-rx-theme="light"] .rarex .rx-burger:focus-visible, [data-rx-theme="light"] .rarex .rx-burger:active { background-color: var(--rx-fill-2) !important; }
[data-rx-theme="light"] .rarex .rx-path { background-color: var(--rx-fill-1) !important; }
[data-rx-theme="light"] .rarex .rx-drawer__close,
[data-rx-theme="light"] .rarex .rx-drawer__close:focus, [data-rx-theme="light"] .rarex .rx-drawer__close:focus-visible { background-color: var(--rx-fill-1) !important; }
[data-rx-theme="light"] .rarex .rx-drawer__close:hover, [data-rx-theme="light"] .rarex .rx-drawer__close:active { background-color: var(--rx-fill-4) !important; }

/* #fff hover text would be invisible on light surfaces -> strong ink (footer stays dark, handled below) */
[data-rx-theme="light"] .rarex .rx-ccard a:hover,
[data-rx-theme="light"] .rarex .rx-ccard a:focus { color: var(--rx-ink-strong) !important; }
[data-rx-theme="light"] .rarex .rx-pname:hover,
[data-rx-theme="light"] .rarex .rx-pname:active { color: var(--rx-ink-strong) !important; }

/* WhatsApp CONTACT CARD: light-green variant (green stays WhatsApp-only) */
[data-rx-theme="light"] .rarex .rx-ccard--wa { background: linear-gradient(160deg, #e7f6ee, #dcefe4); border-color: rgba(20, 140, 70, 0.40); }
[data-rx-theme="light"] .rarex .rx-ccard--wa a,
[data-rx-theme="light"] .rarex .rx-ccard--wa a:visited,
[data-rx-theme="light"] .rarex .rx-ccard--wa a:hover,
[data-rx-theme="light"] .rarex .rx-ccard--wa a:focus { color: #0b6e39 !important; }

/* scrims / backdrops / floating pills */
[data-rx-theme="light"] .rarex .rx-drawer__scrim,
[data-rx-theme="light"] .rarex .rx-scrim { background: rgba(22, 30, 40, 0.40); }
[data-rx-theme="light"] .rarex .rx-fc-modal-backdrop { background: rgba(22, 30, 40, 0.52); }
[data-rx-theme="light"] .rarex .rx-fc-modal-close { background: rgba(255, 255, 255, 0.85); }
[data-rx-theme="light"] .rarex .rx-fcimg .rx-zoom { background: rgba(255, 255, 255, 0.82); }

/* FOOTER stays a deliberate DARK BRAND ANCHOR in light theme; force inner text light */
[data-rx-theme="light"] .rarex .rx-footer { background: #07090c; border-block-start-color: rgba(150, 166, 182, 0.14); }
[data-rx-theme="light"] .rarex .rx-footer__nav a,
[data-rx-theme="light"] .rarex .rx-footer__contact a,
[data-rx-theme="light"] .rarex .rx-footer__nav a:visited,
[data-rx-theme="light"] .rarex .rx-footer__contact a:visited { color: #eef2f6 !important; }
[data-rx-theme="light"] .rarex .rx-footer__nav a:hover,
[data-rx-theme="light"] .rarex .rx-footer__contact a:hover,
[data-rx-theme="light"] .rarex .rx-footer__nav a:focus,
[data-rx-theme="light"] .rarex .rx-footer__contact a:focus { color: #ffffff !important; }
[data-rx-theme="light"] .rarex .rx-footer__contact { color: #aab4bf; }
[data-rx-theme="light"] .rarex .rx-footer .rx-addr,
[data-rx-theme="light"] .rarex .rx-footer .rx-disclaimer,
[data-rx-theme="light"] .rarex .rx-footer .rx-copy,
[data-rx-theme="light"] .rarex .rx-footer .rx-copy span,
[data-rx-theme="light"] .rarex .rx-footer .rx-credit { color: #828d99; }
[data-rx-theme="light"] .rarex .rx-footer .rx-credit a { color: #aab4bf; }
[data-rx-theme="light"] .rarex .rx-footer .rx-credit a:hover { color: #ffffff; }

/* ---- NO-JS FALLBACK: honor the OS light preference when no explicit choice ----
   (JS sets data-rx-theme pre-paint for virtually all users; this covers JS-off.) */
@media (prefers-color-scheme: light) {
  :root:not([data-rx-theme]) .rarex {
    --rx-bg: #e9edf2; --rx-bg-2: #e3e8ee; --rx-surface: #ffffff; --rx-surface-2: #f1f4f8;
    --rx-surface-3: #e5eaf0; --rx-line: rgba(18,28,40,0.10); --rx-line-2: rgba(18,28,40,0.16);
    --rx-line-3: rgba(18,28,40,0.28); --rx-ink: #161b22; --rx-ink-soft: #44505f; --rx-mut: #586472;
    --rx-shadow: 0 18px 40px rgba(20,32,48,0.14); --rx-shadow-sm: 0 10px 24px rgba(20,32,48,0.10);
    --rx-focus: 0 0 0 2px var(--rx-bg), 0 0 0 4px rgba(40,56,78,0.55); color: var(--rx-ink); background: var(--rx-bg); color-scheme: light;
  }
  :root:not([data-rx-theme]) body.rarex-app { background: #e9edf2 !important; }
  :root:not([data-rx-theme]) .rarex .rx-main { background: linear-gradient(180deg, #eef1f5, #e9edf2 60%, #eef1f5); }
  :root:not([data-rx-theme]) .rarex .rx-header { background: rgba(233,237,242,0.82); }
  :root:not([data-rx-theme]) .rarex .rx-footer { background: #07090c; }
  :root:not([data-rx-theme]) .rarex .rx-footer__nav a, :root:not([data-rx-theme]) .rarex .rx-footer__contact a { color: #eef2f6 !important; }
}