/* REACWARE polish layer — 2026-09-29
   Loaded after every other reacware-*.css. Remove the <link> to roll back. */

:root {
  --rwp-font: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --rwp-navy: #14283f;
  --rwp-red: #c62639;
  --rwp-ease: cubic-bezier(.22, 1, .36, 1);
  --rwp-shadow: 0 14px 30px -16px rgba(20, 40, 63, .28);
}

/* ---------- 1. Typeface ---------- */
body.rw-modern:not(#rwp),
body.rw-modern:not(#rwp) :is(h1, h2, h3, h4, h5, p, a, span, strong, small, em, b, li, label, figcaption, button, input, select, option, textarea, div, td, th):not(.fa, .fas, .far, .fab, [class*="icon"], [class^="fa-"]) {
  font-family: var(--rwp-font);
}
body.rw-modern:not(#rwp) {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "cv11", "ss01";
}

/* ---------- 2. Type scale: nothing below 11px ---------- */
body.rw-modern:not(#rwp) .rm-eyebrow,
body.rw-modern:not(#rwp) .rm-hero-index,
body.rw-modern:not(#rwp) .rm-hero-index span,
body.rw-modern:not(#rwp) .rm-image-caption,
body.rw-modern:not(#rwp) .rw-menu-title,
body.rw-modern:not(#rwp) .rw-footer-bottom span,
body.rw-modern:not(#rwp) .rw-footer-main h2 {
  font-size: 11px !important;
  letter-spacing: .12em !important;
  line-height: 1.5;
}
body.rw-modern:not(#rwp) .rm-hero-index strong { font-size: 13px !important; }
body.rw-modern:not(#rwp) .rm-model {
  font-size: 11px !important;
  letter-spacing: .06em !important;
  color: #5b6b7d;
}
body.rw-modern:not(#rwp) .rm-categories a span,
body.rw-modern:not(#rwp) .rm-help small,
body.rw-modern:not(#rwp) .rm-product-price small,
body.rw-modern:not(#rwp) .rm-service-row p,
body.rw-modern:not(#rwp) .rw-footer-contact,
body.rw-modern:not(#rwp) .rw-footer-contact span,
body.rw-modern:not(#rwp) .rw-cart-count {
  font-size: 12px !important;
}
body.rw-modern:not(#rwp) .rm-hero-meta,
body.rw-modern:not(#rwp) .rm-hero-meta span,
body.rw-modern:not(#rwp) .rm-section-head a,
body.rw-modern:not(#rwp) .rm-quote a,
body.rw-modern:not(#rwp) .rm-all,
body.rw-modern:not(#rwp) .rw2-filters button,
body.rw-modern:not(#rwp) .rm-product-actions a,
body.rw-modern:not(#rwp) .rm-shortcuts a,
body.rw-modern:not(#rwp) .rm-shortcuts strong,
body.rw-modern:not(#rwp) .rm-sort select,
body.rw-modern:not(#rwp) .rw-catalog-menu a,
body.rw-modern:not(#rwp) .rw-nav-contact,
body.rw-modern:not(#rwp) .rw-footer-main a,
body.rw-modern:not(#rwp) .rw-footer-main p {
  font-size: 13px !important;
}
body.rw-modern:not(#rwp) .rm-departments a { font-size: 13.5px !important; }
body.rw-modern:not(#rwp) .rm-hero-description { font-size: 15.5px !important; line-height: 1.6 !important; }
body.rw-modern:not(#rwp) .rm-product-copy h3,
body.rw-modern:not(#rwp) .rm-product-copy h3 a { font-size: 15px !important; line-height: 1.4 !important; }
body.rw-modern:not(#rwp) .rm-categories a strong,
body.rw-modern:not(#rwp) .rm-categories a h3 { font-size: 15px !important; }
body.rw-modern:not(#rwp) .rm-section-head h2 {
  font-size: clamp(24px, 1.5vw + 8px, 32px) !important;
  letter-spacing: -.015em;
}
body.rw-modern:not(#rwp) .rm-hero h1 { letter-spacing: -.025em; }

/* Big desktop monitors (27"+, 4K at 150%): one step up */
@media (min-width: 1800px) {
  body.rw-modern:not(#rwp) .rm-departments a,
  body.rw-modern:not(#rwp) .rm-shortcuts a,
  body.rw-modern:not(#rwp) .rw2-filters button,
  body.rw-modern:not(#rwp) .rm-product-actions a,
  body.rw-modern:not(#rwp) .rm-section-head a { font-size: 14px !important; }
  body.rw-modern:not(#rwp) .rm-product-copy h3,
  body.rw-modern:not(#rwp) .rm-product-copy h3 a { font-size: 16px !important; }
  body.rw-modern:not(#rwp) .rm-hero-description { font-size: 17px !important; }
  body.rw-modern:not(#rwp) .rm-categories a span,
  body.rw-modern:not(#rwp) .rm-help small { font-size: 13px !important; }
}

/* ---------- 3. Department list ---------- */
body.rw-modern:not(#rwp) .rm-departments { flex-direction: column; }
body.rw-modern:not(#rwp) .rm-departments > div { flex: 1 1 auto; display: flex; flex-direction: column; }
body.rw-modern:not(#rwp) .rm-departments > div > a {
  flex: 1 1 0;
  max-height: 46px;
  min-height: 34px;
  display: flex;
  align-items: center;
  position: relative;
  border-radius: 6px;
  padding-inline: 10px !important;
  transition: background-color .2s ease, color .2s ease, padding .25s var(--rwp-ease);
}
/* the › arrows promised a sub-menu that doesn't exist */
body.rw-modern:not(#rwp) .rm-departments > div > a > span[aria-hidden="true"] { display: none !important; }
body.rw-modern:not(#rwp) .rm-departments > div > a::before {
  content: "";
  position: absolute;
  left: 0; top: 25%; bottom: 25%;
  width: 2px;
  border-radius: 2px;
  background: var(--rwp-red);
  transform: scaleY(0);
  transition: transform .25s var(--rwp-ease);
}
body.rw-modern:not(#rwp) .rm-departments > div > a:hover,
body.rw-modern:not(#rwp) .rm-departments > div > a:focus-visible {
  background: #f2f4f7;
  color: var(--rwp-navy) !important;
  padding-left: 16px !important;
}
body.rw-modern:not(#rwp) .rm-departments > div > a:hover::before,
body.rw-modern:not(#rwp) .rm-departments > div > a:focus-visible::before { transform: scaleY(1); }

/* ---------- 4. Hero: one surface instead of two ---------- */
body.rw-modern:not(#rwp) .rm-hero-media {
  background: transparent !important;
  background-image: none !important;
}
body.rw-modern:not(#rwp) .rm-carousel-stage { border-radius: 10px; overflow: hidden; box-shadow: 0 20px 40px -28px rgba(20, 40, 63, .45); }
body.rw-modern:not(#rwp) .rm-carousel-stage img { display: block; }

/* Carousel: soft cross-fade with a gentle settle instead of a 0.3s flash */
@keyframes rwp-slide-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes rwp-img-settle {
  from { transform: scale(1.045); }
  to   { transform: scale(1); }
}
@keyframes rwp-copy-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: no-preference) {
  html body.rm-market:not(#rwp) .rm-carousel-slide:not([hidden]) {
    animation: rwp-slide-in .7s var(--rwp-ease) both !important;
  }
  html body.rm-market:not(#rwp) .rm-carousel-slide:not([hidden]) img {
    animation: rwp-img-settle 1.4s var(--rwp-ease) both;
  }
  body.rw-modern:not(#rwp) .rm-hero-copy.rwp-swap > * {
    animation: rwp-copy-in .55s var(--rwp-ease) both;
  }
  body.rw-modern:not(#rwp) .rm-hero-copy.rwp-swap > *:nth-child(2) { animation-delay: .05s; }
  body.rw-modern:not(#rwp) .rm-hero-copy.rwp-swap > *:nth-child(3) { animation-delay: .1s; }
  body.rw-modern:not(#rwp) .rm-hero-copy.rwp-swap > *:nth-child(4) { animation-delay: .15s; }
  body.rw-modern:not(#rwp) .rm-hero-copy.rwp-swap > *:nth-child(n+5) { animation-delay: .2s; }
}

/* Primary button */
body.rw-modern:not(#rwp) .rm-button {
  transition: background-color .2s ease, transform .2s var(--rwp-ease), box-shadow .2s ease !important;
}
body.rw-modern:not(#rwp) .rm-button span[aria-hidden="true"] { display: inline-block; transition: transform .25s var(--rwp-ease); }
body.rw-modern:not(#rwp) .rm-button:hover { box-shadow: 0 10px 20px -12px rgba(20, 40, 63, .6); transform: translateY(-1px); }
body.rw-modern:not(#rwp) .rm-button:hover span[aria-hidden="true"] { transform: translateX(4px); }

/* ---------- 5. Section heading rule ---------- */
body.rw-modern:not(#rwp) .rm-section-head h2::after {
  width: 46px !important;
  min-width: 46px;
  transform-origin: left center;
}

/* ---------- 6. Product cards ---------- */
body.rw-modern:not(#rwp) .rm-product {
  position: relative;
  transition: transform .3s var(--rwp-ease), box-shadow .3s ease, border-color .3s ease;
}
body.rw-modern:not(#rwp) .rm-product-image { overflow: hidden; }
body.rw-modern:not(#rwp) .rm-product-image img { transition: transform .6s var(--rwp-ease); }
body.rw-modern:not(#rwp) .rm-product-actions a {
  transition: background-color .2s ease, color .2s ease, border-color .2s ease !important;
}
body.rw-modern:not(#rwp) .rm-product-actions a span { display: inline-block; transition: transform .25s var(--rwp-ease); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  body.rw-modern:not(#rwp) .rm-product:hover {
    transform: translateY(-3px);
    box-shadow: var(--rwp-shadow);
    border-color: #d5dde6;
  }
  body.rw-modern:not(#rwp) .rm-product:hover .rm-product-image img { transform: scale(1.05); }
}
@media (hover: hover) {
  body.rw-modern:not(#rwp) .rm-product:hover .rm-product-actions a {
    background: var(--rwp-navy) !important;
    border-color: var(--rwp-navy) !important;
    color: #fff !important;
  }
  body.rw-modern:not(#rwp) .rm-product:hover .rm-product-actions a span { transform: translateX(3px); }
}
body.rw-modern:not(#rwp) .rm-product-copy h3 a {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Category tiles: image nudge on hover */
body.rw-modern:not(#rwp) .rm-categories a img { transition: transform .5s var(--rwp-ease); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  body.rw-modern:not(#rwp) .rm-categories a:hover img { transform: translateY(-4px) scale(1.04); }
}

/* ---------- 7. Keyboard focus ---------- */
body.rw-modern:not(#rwp) :is(a, button, select, input, summary):focus-visible {
  outline: 2px solid var(--rwp-red) !important;
  outline-offset: 2px !important;
  border-radius: 4px;
}

/* ---------- 8. Footer brand on navy ---------- */
body.rw-modern:not(#rwp) footer .rw-official-brand {
  background: transparent !important;
  padding-inline: 0 !important;
  box-shadow: none !important;
}
body.rw-modern:not(#rwp) footer .rw-official-symbol,
body.rw-modern:not(#rwp) footer .rw-official-wordmark {
  background-image: url("../../../../../image/catalog/reacware/reacware-logo-red.webp") !important;
  background-color: transparent !important;
}

/* ---------- 9. Phones & tablets ---------- */
@media (max-width: 760px) {
  /* filter pills: no scrollbar, fade hints there is more */
  body.rw-modern:not(#rwp) .rw2-filters {
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, #000 82%, transparent);
            mask-image: linear-gradient(90deg, #000 82%, transparent);
    padding-right: 28px;
  }
  body.rw-modern:not(#rwp) .rw2-filters::-webkit-scrollbar { display: none; }

  /* card actions: full-width button, compare becomes a round badge on the photo */
  body.rw-modern:not(#rwp) .rm-product-actions { display: block !important; }
  body.rw-modern:not(#rwp) .rm-product-actions a {
    width: 100% !important;
    min-height: 44px;
    white-space: nowrap;
    display: flex !important;
    align-items: center;
    justify-content: space-between;
  }
  body.rw-modern:not(#rwp) .rm-product-actions button[data-rm-compact] {
    position: absolute !important;
    top: 10px; right: 10px;
    width: 38px !important; height: 38px !important;
    min-height: 0 !important;
    padding: 0 !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, .94) !important;
    box-shadow: 0 4px 12px -6px rgba(20, 40, 63, .45);
    z-index: 2;
  }
  body.rw-modern:not(#rwp) .rm-product-actions button[data-rm-compact][aria-pressed="true"] {
    background: var(--rwp-navy) !important;
    color: #fff !important;
  }
  body.rw-modern:not(#rwp) .rm-hero-meta span { display: inline !important; margin-inline: 4px; }
  body.rw-modern:not(#rwp) .rm-section-head h2::after { width: 32px !important; min-width: 32px; }
}

/* Touch devices: 44px targets */
@media (pointer: coarse) {
  body.rw-modern:not(#rwp) .rw2-filters button,
  body.rw-modern:not(#rwp) .rm-shortcuts a,
  body.rw-modern:not(#rwp) .rm-section-head a,
  body.rw-modern:not(#rwp) .rm-all { min-height: 44px; display: inline-flex; align-items: center; }
  body.rw-modern:not(#rwp) .rm-departments > div > a { min-height: 44px; }
  body.rw-modern:not(#rwp) .rm-carousel-dots button { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
}

/* ---------- 10. One reduced-motion rule for everything ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  body.rw-modern:not(#rwp) *, body.rw-modern:not(#rwp) *::before, body.rw-modern:not(#rwp) *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ---------- 11. Header utility sizes ---------- */
body.rw-modern:not(#rwp) .rw-topline span,
body.rw-modern:not(#rwp) .rw-topline a { font-size: 11px !important; letter-spacing: .1em; }
body.rw-modern:not(#rwp) .rw-header-actions span:not(.rw-cart-count) { font-size: 13px !important; }

/* ---------- 12. Simplify & breathe (p5) ---------- */
/* 1. One entrance per job: no department column, full-width hero, enquiry as a slim strip */
@media (min-width: 701px) {
  body.rw-modern:not(#rwp) .rm-discovery { grid-template-columns: minmax(0, 1fr) !important; row-gap: 16px !important; }
  body.rw-modern:not(#rwp) .rm-departments { display: none !important; }
  body.rw-modern:not(#rwp) .rm-buying {
    display: grid !important;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: 16px !important;
    height: auto !important;
  }
  body.rw-modern:not(#rwp) .rm-quote {
    display: flex !important;
    align-items: center;
    gap: 28px;
    padding: 22px 28px !important;
    min-height: 0 !important;
    height: auto !important;
    border-radius: 10px;
  }
  body.rw-modern:not(#rwp) .rm-quote .rm-quote-icon,
  body.rw-modern:not(#rwp) .rm-quote .rm-eyebrow { display: none !important; }
  body.rw-modern:not(#rwp) .rm-quote h2 { margin: 0 !important; font-size: 20px !important; line-height: 1.25 !important; flex: 0 0 auto; }
  body.rw-modern:not(#rwp) .rm-quote p { margin: 0 !important; flex: 1 1 auto; font-size: 13px !important; line-height: 1.5 !important; }
  body.rw-modern:not(#rwp) .rm-quote a { margin: 0 !important; padding: 0 !important; border: 0 !important; white-space: nowrap; flex: 0 0 auto; gap: 10px; }
  body.rw-modern:not(#rwp) .rm-help { height: auto !important; align-items: center; border-radius: 10px; padding: 18px 20px !important; }
  body.rw-modern:not(#rwp) .rm-hero-layout { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr) !important; }
}
@media (min-width: 701px) and (max-width: 1100px) {
  body.rw-modern:not(#rwp) .rm-buying { grid-template-columns: 1fr 1fr; }
  body.rw-modern:not(#rwp) .rm-quote { grid-column: 1 / -1; }
}

/* 3. Fewer surfaces: white cards on the light-grey page, red as the single accent */
body.rw-modern:not(#rwp) .rm-hero,
body.rw-modern:not(#rwp) .rm-hero * { --rm-story-accent: var(--rwp-red) !important; }
body.rw-modern:not(#rwp) .rm-hero {
  background: #fff !important;
  border-color: transparent !important;
  border-radius: 12px !important;
}
body.rw-modern:not(#rwp) .rm-workflows > a {
  background: #fff !important;
  border-color: transparent !important;
  border-radius: 12px !important;
}

/* 4. One decorative device (the red rule); drop numbering and stacked eyebrows */
body.rw-modern:not(#rwp) .rm-categories a::before,
body.rw-modern:not(#rwp) .rm-workflows > a::before { content: none !important; display: none !important; }
body.rw-modern:not(#rwp) .rm-hero-index,
body.rw-modern:not(#rwp) .rm-section-head .rm-eyebrow,
body.rw-modern:not(#rwp) .rm-workflows .rm-eyebrow { display: none !important; }

/* 5. Space instead of lines */
body.rw-modern:not(#rwp) .rm-categories a,
body.rw-modern:not(#rwp) .rm-product,
body.rw-modern:not(#rwp) .rm-help,
body.rw-modern:not(#rwp) .rm-shortcuts { border-color: transparent !important; border-radius: 10px !important; }
body.rw-modern:not(#rwp) .rm-categories a { transition: box-shadow .3s ease, transform .3s var(--rwp-ease); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  body.rw-modern:not(#rwp) .rm-categories a:hover { box-shadow: var(--rwp-shadow); transform: translateY(-3px); }
}
body.rw-modern:not(#rwp) .rm-section,
body.rw-modern:not(#rwp) .rm-workflows { padding-top: clamp(56px, 6vw, 104px) !important; }
body.rw-modern:not(#rwp) .rm-service-row { margin-top: clamp(56px, 6vw, 104px) !important; }
body.rw-modern:not(#rwp) .rm-section-head { margin-bottom: 28px !important; }
body.rw-modern:not(#rwp) .rm-home { padding-bottom: clamp(56px, 6vw, 104px) !important; }

/* Header logo never gets squeezed by the search box */
body.rw-modern:not(#rwp) header :is(.rw-brand, .rw-official-brand) { flex-shrink: 0 !important; min-width: max-content !important; }

/* One typeface everywhere: route the older theme font variables to Inter */
body.rw-modern:not(#u):not(#rwp) { --u-font: var(--rwp-font); --rw-font: var(--rwp-font); }

/* ---------- 13. Back-to-top button ---------- */
body.rw-modern:not(#rwp) .scroll-top {
  right: 24px !important;
  bottom: 24px !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  background: #fff !important;
  color: var(--rwp-navy) !important;
  border: 1px solid rgba(20, 40, 63, .08);
  box-shadow: 0 1px 2px rgba(20, 40, 63, .08), 0 10px 24px -10px rgba(20, 40, 63, .45);
  display: flex !important;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform .4s ease-out .35s, opacity .2s, visibility .2s, background-color .2s ease, color .2s ease, box-shadow .25s ease, translate .25s var(--rwp-ease) !important;
}
body.rw-modern:not(#rwp) .scroll-top em { display: none !important; }
body.rw-modern:not(#rwp) .scroll-top::after {
  content: "";
  width: 18px;
  height: 18px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19V5M5.5 11.5L12 5l6.5 6.5'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19V5M5.5 11.5L12 5l6.5 6.5'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: translate .25s var(--rwp-ease);
}
@media (hover: hover) {
  body.rw-modern:not(#rwp) .scroll-top:hover {
    background: var(--rwp-red) !important;
    color: #fff !important;
    border-color: var(--rwp-red);
    box-shadow: 0 14px 28px -12px rgba(198, 38, 57, .55);
    translate: 0 -3px;
  }
  body.rw-modern:not(#rwp) .scroll-top:hover::after { translate: 0 -1px; }
}
@media (max-width: 760px) {
  body.rw-modern:not(#rwp) .scroll-top { right: 16px !important; bottom: 16px !important; width: 42px !important; height: 42px !important; }
}
