/* ============================================================
   EXTRACUT — INNER PAGE INDUSTRIAL THEME v4.5
   Targets the REAL site-builder DOM (.Mo / .pic-item / .NItem ...)
   Must be loaded LAST (injected at end of <head>).
   ============================================================ */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600;700&display=swap");

:root {
  --xc-ink: #0A1628;
  --xc-red: #E63946;
  --xc-blue: #1D4ED8;
  --xc-line: #E5E9F0;
  --xc-gray: #6B7A99;
  --xc-bg-soft: #F4F6FA;
  --xc-cream: #FBF7F2;
  --xc-font: "Inter", -apple-system, "Segoe UI", system-ui, sans-serif;
  --xc-mono: "JetBrains Mono", ui-monospace, monospace;
}

/* ============================================================
   1. GLOBAL RESET TO INDUSTRIAL LIGHT THEME
   ============================================================ */
html, body, body#webBody, body.industrial-overlay {
  background: #ffffff !important;
  color: var(--xc-ink) !important;
  font-family: var(--xc-font) !important;
  -webkit-font-smoothing: antialiased;
  margin: 0 !important;
  padding: 0 !important;
}
body#webBody { padding-top: 0 !important; }

/* Content links only — injected chrome defines its own colours */
body#webBody .customModule a,
body#webBody .MoBody a,
body#webBody .editor_content_air a,
body#webBody .oneClassT a,
body#webBody .NItemTable a,
body#webBody .form-module a,
body#webBody .pic-title a,
body#webBody .text-list-a a {
  color: var(--xc-blue); text-decoration: none; transition: color .2s;
}
body#webBody .customModule a:hover,
body#webBody .MoBody a:hover,
body#webBody .editor_content_air a:hover,
body#webBody .oneClassT a:hover,
body#webBody .NItemTable a:hover,
body#webBody .form-module a:hover,
body#webBody .pic-title a:hover,
body#webBody .text-list-a a:hover {
  color: var(--xc-red);
}

body#webBody h1, body#webBody h2, body#webBody h3,
body#webBody h4, body#webBody h5, body#webBody h6 {
  font-family: var(--xc-font) !important;
  color: var(--xc-ink);
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
}

/* White-out module rows so dark inline backgrounds never show through */
body#webBody .customModuleRow,
body#webBody .customModuleRowInner,
body#webBody .CModulePA, body#webBody .CModulePC,
body#webBody .CModulePCLeft, body#webBody .CModulePCRight,
body#webBody .wrapper, body#webBody .mainContainer,
body#webBody .addContainer {
  background: #ffffff !important;
  background-color: #ffffff !important;
  background-image: none !important;
}

/* content area container */
body#webBody .wrapper { width: 100% !important; max-width: 1320px !important; margin: 0 auto !important; }

/* ============================================================
   2. HIDE LEGACY CHROME (backup for the JS injector)
   ============================================================ */
body#webBody #row_16,
body#webBody #web_nav,
body#webBody #header,
body#webBody #navWrap,
body#webBody #banner_area,
body#webBody #row_76,
body#webBody .headFullXY,
body#webBody .footPublicModuleRow,
body#webBody .headPublicModuleRow,
body#webBody .wx-code-div,
body#webBody .wx-code-div-back-btn,
body#webBody .ev_search_module {
  display: none !important;
}

/* neutralize absolute-positioned old header space */
body#webBody .customModuleRowAbsolute { position: static !important; }

/* ============================================================
   3. INJECTED CHROME (xc-*) — topbar / navbar / page hero / footer
   ============================================================ */
.xc-container { max-width: 1320px; margin: 0 auto; padding: 0 32px; box-sizing: border-box; }

/* ---- topbar ----

   Mirrors the hand-written homepage bar (.topbar / .topbar-inner /
   .topbar-marquee / .marquee-track / .marquee-item / .topbar-actions in
   industrial.css) — that file is the source of truth for the values below.
   They had drifted: the injected bar was 36px tall against the homepage's
   44px, weight 400 vs 500, 11px items vs 12px, 32px gaps vs 48px, and it
   hung the red bullet off ::after as a middot instead of ::before as a dot,
   so the "same" bar looked different on the two page families.

   `xc-*` class names are kept (rather than reusing .topbar): the CMS markup is
   full of generic `.container` / `.ev-container` classes that would collide.  */
.xc-topbar {
  background: var(--xc-ink);                 /* --ink-900 #0A1628 */
  color: rgba(255,255,255,.85);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .08em;
  padding: 10px 0;                           /* the homepage gets its 44px here, not from a fixed height */
  border-bottom: 1px solid rgba(255,255,255,.06);
  /* Do NOT clip here. The language menu is absolutely positioned inside this
     bar, so `overflow: hidden` swallowed it and the dropdown would not open —
     only on the CMS pages, which are the ones using .xc-topbar (the built
     pages use the hand-written .topbar). The marquee already clips itself
     with .xc-marquee { overflow: hidden }, so nothing escapes the bar. */
  overflow: visible;
  position: relative;
  z-index: 1001;
}
/* The bar follows the homepage container grid (--container-max 1440px /
   --container-padding 32|24|20px) so its left/right edges line up with the
   homepage bar at every viewport. Scoped to the topbar on purpose: the shared
   .xc-container still drives the injected navbar/hero/footer, which are not
   part of this fix. */
.xc-topbar > .xc-container { max-width: 1440px; padding: 0 32px; }
.xc-topbar-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.xc-marquee { flex: 1; overflow: hidden; white-space: nowrap; min-width: 0; }
.xc-marquee-track { display: inline-flex; align-items: center; gap: 48px; white-space: nowrap; animation: xcMarquee 50s linear infinite; }
.xc-marquee-item { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; text-transform: uppercase; letter-spacing: .1em; color: rgba(255,255,255,.7); }
.xc-marquee-item::before { content: ""; width: 4px; height: 4px; background: var(--xc-red); border-radius: 50%; flex-shrink: 0; }
@keyframes xcMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.xc-topbar-actions { display: flex; align-items: center; gap: 20px; flex-shrink: 0; font-size: 12px; font-family: var(--xc-mono); }
.xc-topbar-actions a { color: rgba(255,255,255,.7); transition: color .2s; display: inline-flex; align-items: center; gap: 6px; }
.xc-topbar-actions a:hover { color: #FF5765; }        /* --accent-red-light */
.xc-sep { color: rgba(255,255,255,.4); }

/* ---- navbar (visually identical to homepage .navbar) ---- */
.xc-navbar {
  background: rgba(255, 255, 255, 0.92) !important;
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid rgba(10, 22, 40, 0.06);
  box-shadow: 0 1px 0 rgba(10, 22, 40, .04);
  position: sticky;
  top: 0;
  z-index: 1000;
  transition: background .3s ease, box-shadow .3s ease;
}
.xc-navbar.scrolled {
  background: rgba(255, 255, 255, 0.98) !important;
  box-shadow: 0 4px 24px rgba(10, 22, 40, .08);
}
.xc-nav-inner { display: flex; align-items: center; justify-content: space-between; height: 76px; gap: 32px; }

.xc-brand { text-decoration: none !important; }
.xc-brand-mark {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  font-weight: 900;
  font-size: 24px;
  letter-spacing: -.04em;
  line-height: .9;
}
.xc-brand-line { display: flex; align-items: baseline; gap: 2px; line-height: .9; }
.xc-extra { color: var(--xc-ink) !important; font-size: 24px; font-weight: 900; letter-spacing: -.04em; }
.xc-navbar .xc-cut { color: var(--xc-blue) !important; font-size: 24px; font-weight: 900; letter-spacing: -.04em; }
.xc-reg { font-size: 10px; color: var(--xc-gray); vertical-align: super; }
.xc-navbar .xc-tagline {
  display: block;
  font-family: var(--xc-mono);
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--xc-red) !important;
  font-weight: 500;
  margin-top: 4px;
  position: relative;
  padding-bottom: 2px;
}
.xc-navbar .xc-tagline::after {
  content: "";
  position: absolute;
  bottom: 0; left: 0;
  width: 100%; height: 1.5px;
  background: var(--xc-red);
}

.xc-nav-menu { display: flex; align-items: center; gap: 8px; list-style: none; margin: 0; padding: 0; }
.xc-nav-item { position: relative; }
.xc-nav-link {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 10px 16px; border-radius: 10px;
  color: var(--xc-ink) !important; font-weight: 600; font-size: 14px;
  letter-spacing: -.01em; text-decoration: none !important;
  position: relative; transition: color .2s ease, background .2s ease;
}
.xc-nav-link::after {
  content: "";
  position: absolute; bottom: 4px; left: 50%;
  transform: translateX(-50%) scaleX(0);
  width: 18px; height: 2px;
  background: var(--xc-red);
  transition: transform .25s ease;
  transform-origin: center;
}
.xc-nav-link:hover,
.xc-nav-item:hover > .xc-nav-link { color: var(--xc-red) !important; background: transparent !important; }
.xc-nav-link:hover::after,
.xc-nav-item:hover > .xc-nav-link::after { transform: translateX(-50%) scaleX(1); }
.xc-nav-link.is-active { color: var(--xc-red) !important; }
.xc-nav-link.is-active::after { transform: translateX(-50%) scaleX(1); }

.xc-chevron { width: 10px; height: 10px; margin-left: 2px; opacity: .7; transition: transform .2s; }
.xc-nav-item:hover > .xc-nav-link .xc-chevron { transform: rotate(180deg); }

/* ---- megamenu (identical to homepage .megamenu) ---- */
.xc-megamenu {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  min-width: 720px;
  background: #fff;
  border: 1px solid var(--xc-line);
  border-radius: 24px;
  box-shadow: 0 32px 80px rgba(10, 22, 40, .14), 0 8px 24px rgba(10, 22, 40, .08);
  padding: 32px;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 32px;
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease, transform .3s ease, visibility .3s;
  pointer-events: none;
  z-index: 1001;
}
.xc-nav-item:hover > .xc-megamenu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}
/* hover bridge: cover the 8px gap so moving the mouse down never leaves :hover */
.xc-megamenu::before {
  content: "";
  position: absolute;
  top: -14px; left: 0; right: 0;
  height: 16px;
}
/* first item: anchor to the left edge so the wide panel never overflows */
.xc-nav-item:first-child > .xc-megamenu {
  left: 0;
  transform: translateY(8px);
}
.xc-nav-item:first-child:hover > .xc-megamenu { transform: translateY(0); }

.xc-mm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.xc-mm-item {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px; border-radius: 12px;
  transition: background .2s ease, transform .2s ease;
  text-decoration: none !important;
}
.xc-mm-item:hover { background: var(--xc-bg-soft); transform: translateX(2px); }
.xc-mm-icon {
  width: 36px; height: 36px; border-radius: 12px;
  background: var(--xc-bg-soft);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; color: var(--xc-red);
  transition: background .2s ease, color .2s ease;
}
.xc-mm-item:hover .xc-mm-icon { background: var(--xc-red); color: #fff; }
.xc-mm-body { flex: 1; min-width: 0; }
.xc-mm-title { font-size: 14px; font-weight: 700; color: var(--xc-ink) !important; margin-bottom: 2px; }
.xc-mm-desc { font-size: 12px; color: var(--xc-gray); line-height: 1.5; }

.xc-mm-feature {
  background: var(--xc-ink);
  color: #fff;
  border-radius: 16px;
  padding: 24px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 220px;
}
.xc-mm-feature::before {
  content: "";
  position: absolute;
  top: -50%; right: -30%;
  width: 200px; height: 200px;
  background: radial-gradient(circle, var(--xc-red) 0%, transparent 70%);
  opacity: .5;
  filter: blur(40px);
}
.xc-mm-feature-label {
  font-family: var(--xc-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: #FF5765;
  margin-bottom: 12px;
  position: relative;
}
.xc-mm-feature-title {
  font-size: 22px; font-weight: 700; line-height: 1.2;
  margin-bottom: 12px; position: relative;
}
.xc-mm-feature-cta {
  font-size: 13px; font-weight: 600; color: #FF5765;
  display: inline-flex; align-items: center; gap: 6px;
  text-decoration: none !important; position: relative;
}
.xc-mm-feature-cta svg { transition: transform .25s; }
.xc-mm-feature-cta:hover svg { transform: translateX(3px); }

/* Watch Video inside the featured card (2026-10-10).
   The generic `body#webBody button` skin above forces a solid dark pill
   (background var(--xc-ink), border none, padding 12px 26px) which would be
   invisible on the dark card — restore the outlined pill. */
body#webBody button.xc-mm-feature-video {
  position: relative; z-index: 1;
  align-self: flex-start; width: auto !important;
  display: inline-flex !important; align-items: center !important; gap: 9px;
  padding: 8px 15px 8px 11px !important;
  border: 1px solid rgba(255,255,255,.3) !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.07) !important;
  color: #fff !important;
  font-size: 12.5px !important; font-weight: 700 !important; line-height: 1 !important;
  letter-spacing: .01em;
  -webkit-appearance: none; appearance: none;
  transition: background .25s !important, border-color .25s !important,
              color .25s !important, transform .25s !important;
}
body#webBody button.xc-mm-feature-video:hover {
  background: #fff !important; border-color: #fff !important;
  color: var(--xc-ink) !important; transform: translateY(-1px);
}
.xc-mm-feature-play {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: rgba(255,255,255,.18); color: #fff;
  transition: background .25s, color .25s;
}
.xc-mm-feature-play svg { display: block; margin-left: 1px; }
body#webBody button.xc-mm-feature-video:hover .xc-mm-feature-play {
  background: var(--xc-ink); color: #fff;
}

/* ---- compact dropdown (Solutions / About) ---- */
.xc-dd {
  position: absolute; top: calc(100% + 8px); left: 0; min-width: 240px;
  background: #fff; border: 1px solid var(--xc-line); border-radius: 16px;
  box-shadow: 0 24px 48px rgba(10, 22, 40, .14);
  padding: 8px; opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: all .22s cubic-bezier(.34, 1.3, .64, 1);
  z-index: 1001;
}
.xc-nav-item:hover > .xc-dd { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; }
.xc-dd::before {
  content: "";
  position: absolute;
  top: -14px; left: 0; right: 0;
  height: 16px;
}
.xc-dd a {
  display: block; padding: 9px 14px; border-radius: 8px;
  color: var(--xc-ink) !important; font-size: 13.5px; font-weight: 500;
  text-decoration: none !important; transition: all .15s;
}
.xc-dd a:hover { background: var(--xc-bg-soft); color: var(--xc-red) !important; padding-left: 18px; }

.xc-btn-primary {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--xc-red); color: #fff !important;
  padding: 11px 22px; border-radius: 999px;
  font-weight: 700; font-size: 14px; text-decoration: none !important;
  transition: all .25s; white-space: nowrap;
}
.xc-btn-primary:hover { background: #c81e2b; transform: translateY(-2px); box-shadow: 0 10px 24px rgba(230, 57, 70, .35); color: #fff !important; }
.xc-btn-primary svg { transition: transform .25s; }
.xc-btn-primary:hover svg { transform: translateX(3px); }

/* ---- page hero (dark indigo banner) ---- */
.xc-page-hero {
  position: relative;
  background: linear-gradient(120deg, #0A1628 0%, #12233F 60%, #0A1628 100%);
  color: #fff;
  padding: 56px 0 48px;
  overflow: hidden;
}
.xc-hero-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(ellipse 90% 100% at 20% 0%, #000 30%, transparent 75%);
  mask-image: radial-gradient(ellipse 90% 100% at 20% 0%, #000 30%, transparent 75%);
}
.xc-page-hero::after {
  content: ""; position: absolute; right: -80px; top: -80px; width: 320px; height: 320px;
  border: 56px solid rgba(230,57,70,.16); border-radius: 50%;
}
.xc-page-hero .xc-container { position: relative; z-index: 1; }
.xc-hero-crumbs { font-family: var(--xc-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.55); margin-bottom: 14px; }
.xc-hero-crumbs a { color: rgba(255,255,255,.65); text-decoration: none; }
.xc-hero-crumbs a:hover { color: #fff; }
.xc-hero-crumbs span { margin: 0 10px; color: rgba(230,57,70,.9); }
.xc-hero-crumbs em { font-style: normal; color: #fff; }
.xc-hero-title {
  font-size: 44px; font-weight: 900; letter-spacing: -.03em; line-height: 1.08;
  margin: 0 0 12px; color: #fff !important;
}
.xc-hero-title::first-letter { color: var(--xc-red); }
.xc-hero-sub { color: rgba(255,255,255,.65); font-size: 15px; margin: 0; max-width: 560px; }

/* High-specificity colour guards for injected chrome. Values mirror the
   homepage bar (base .85, marquee items .7, links .7 → hover --accent-red-light,
   separator .4).
   :not(.xc-lang-opt) matters — the language dropdown lives inside
   .xc-topbar-actions and paints dark text on a white panel; without the
   exclusion this ID+!important rule turned those labels white-on-white. */
body#webBody .xc-topbar { color: rgba(255,255,255,.85) !important; }
body#webBody .xc-topbar .xc-marquee-item { color: rgba(255,255,255,.7) !important; }
body#webBody .xc-topbar-actions a:not(.xc-lang-opt) { color: rgba(255,255,255,.7) !important; }
body#webBody .xc-topbar-actions a:not(.xc-lang-opt):hover { color: #FF5765 !important; }
body#webBody .xc-topbar .xc-sep { color: rgba(255,255,255,.4) !important; }
body#webBody .xc-page-hero .xc-hero-title,
body#webBody .xc-page-hero .xc-hero-crumbs em { color: #fff !important; }
body#webBody .xc-page-hero .xc-hero-sub { color: rgba(255,255,255,.65) !important; }
body#webBody .xc-page-hero .xc-hero-crumbs { color: rgba(255,255,255,.55) !important; }
body#webBody .xc-page-hero .xc-hero-crumbs a { color: rgba(255,255,255,.65) !important; }
body#webBody .xc-page-hero .xc-hero-crumbs a:hover { color: #fff !important; }
body#webBody .xc-page-hero .xc-hero-crumbs span { color: rgba(230,57,70,.9) !important; }

/* ---- footer (matches homepage .footer exactly) ---- */
body#webBody .xc-footer {
  background: var(--xc-ink);
  color: rgba(255,255,255,.7) !important;
  padding: 80px 0 32px;
  margin-top: 80px;
  font-size: 14px;
  position: relative;
  overflow: hidden;
}
body#webBody .xc-footer::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--xc-red), transparent);
}
body#webBody .xc-footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr 1.2fr;
  gap: 40px;
  margin-bottom: 64px;
}
body#webBody .xc-footer-brand { max-width: 320px; }
body#webBody .xc-footer-brand .xc-brand { color: #fff !important; margin-bottom: 20px; display: inline-flex; }
body#webBody .xc-footer-brand .xc-extra { color: #fff !important; }
body#webBody .xc-footer-brand .xc-cut { color: var(--xc-red) !important; }
body#webBody .xc-footer-desc {
  font-size: 14px;
  line-height: 1.7;
  margin-bottom: 24px;
  color: rgba(255,255,255,.7) !important;
}
body#webBody .xc-footer-social {
  display: flex;
  gap: 8px;
}
body#webBody .xc-footer-social a {
  width: 40px; height: 40px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,.7) !important;
  transition: all .2s;
}
body#webBody .xc-footer-social a:hover {
  background: var(--xc-red);
  color: #fff !important;
  border-color: var(--xc-red);
  transform: translateY(-2px);
}
body#webBody .xc-footer-col h4 {
  color: #fff !important;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  margin-bottom: 20px;
  position: relative;
  padding-bottom: 12px;
}
body#webBody .xc-footer-col h4::after {
  content: "";
  position: absolute;
  bottom: 0; left: 0;
  width: 24px; height: 2px;
  background: var(--xc-red);
}
body#webBody .xc-footer-col ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0; padding: 0;
}
body#webBody .xc-footer-col li { margin: 0; }
body#webBody .xc-footer-col a {
  font-size: 14px;
  color: rgba(255,255,255,.65) !important;
  text-decoration: none;
  transition: all .2s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
body#webBody .xc-footer-col a:hover { color: var(--xc-red) !important; padding-left: 4px; }
body#webBody .xc-footer-contact-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 14px;
  margin-bottom: 12px;
  line-height: 1.5;
  color: rgba(255,255,255,.7) !important;
}
body#webBody .xc-footer-contact-item svg {
  color: var(--xc-red) !important;
  flex-shrink: 0;
  margin-top: 2px;
}
body#webBody .xc-footer-bottom {
  padding-top: 32px;
  border-top: 1px solid rgba(255,255,255,.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-size: 13px;
  flex-wrap: wrap;
  color: rgba(255,255,255,.5) !important;
}
body#webBody .xc-footer-bottom-links {
  display: flex;
  gap: 20px;
}
body#webBody .xc-footer-bottom-links a {
  color: rgba(255,255,255,.5) !important;
}
body#webBody .xc-footer-bottom-links a:hover { color: var(--xc-red) !important; }

/* ============================================================
   4. CONTENT MODULES (.Mo boxes) — white cards, red accents
   ============================================================ */
body#webBody .customModule { margin: 0 auto 24px !important; }

body#webBody .Mo {
  background: #ffffff !important;
  border: 1px solid var(--xc-line) !important;
  border-radius: 16px !important;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(10,22,40,.04) !important;
}
body#webBody .MoT, body#webBody .MoTL, body#webBody .MoTM, body#webBody .MoTR,
body#webBody .MoHeadL, body#webBody .MoHeadM, body#webBody .MoHeadR,
body#webBody .MoName, body#webBody .MoNameL, body#webBody .MoNameM, body#webBody .MoNameR,
body#webBody .MoBodyL, body#webBody .MoBodyR, body#webBody .MoBL, body#webBody .MoBR,
body#webBody .MoBM { background: transparent !important; background-image: none !important; }

body#webBody .MoHead { background: var(--xc-bg-soft) !important; border-bottom: 1px solid var(--xc-line) !important; }
body#webBody .MoName .NameTxt {
  font-family: var(--xc-font) !important;
  font-size: 15px !important; font-weight: 800 !important;
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--xc-ink) !important;
}
body#webBody .MoName .NameTxt a { color: var(--xc-ink) !important; text-decoration: none; }
body#webBody .MoHead .MoName { position: relative; }
body#webBody .MoHeadM { padding: 14px 18px !important; }
body#webBody .MoBody { padding: 0 !important; }
body#webBody .MoBodyM { padding: 20px !important; }
body#webBody .MoMore a {
  font-family: var(--xc-mono) !important; font-size: 11px;
  text-transform: uppercase; letter-spacing: .12em;
}

/* module header red left bar */
body#webBody .MoHead .MoName::before {
  content: ""; display: inline-block; width: 4px; height: 16px;
  background: var(--xc-red); border-radius: 2px; margin-right: 10px;
  vertical-align: -3px;
}

/* ============================================================
   5. PRODUCT GRID (.pic-text-list-module)
   ============================================================ */
body#webBody .pic-text-list-module { background: transparent !important; }
body#webBody .pic-text-list-module .pics,
body#webBody .pic-text-list-module .pic {
  background: transparent !important; border: none !important;
}
body#webBody .pic-text-list-module .pic-item {
  background: #ffffff !important;
  border: 1px solid var(--xc-line) !important;
  border-radius: 16px !important;
  padding: 14px !important;
  transition: transform .3s cubic-bezier(.34,1.4,.64,1), box-shadow .3s, border-color .3s !important;
}
body#webBody .pic-text-list-module .pic-item:hover {
  transform: translateY(-6px) !important;
  border-color: rgba(10,22,40,.25) !important;
  box-shadow: 0 20px 44px rgba(10,22,40,.12) !important;
}
body#webBody .pic-text-list-module .pic img {
  background: #ffffff !important;
  border-radius: 12px !important;
  transition: transform .35s ease 0s !important;
  max-width: 100% !important;
  max-height: 100% !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  display: block !important;
}
body#webBody .pic-text-list-module .pic-item:hover .pic img { transform: scale(1.04); }
body#webBody .pic-title {
  font-family: var(--xc-font) !important;
  color: var(--xc-ink) !important; font-weight: 700 !important; font-size: 14px !important;
  line-height: 1.45 !important;
}
body#webBody .pic-title a { color: var(--xc-ink) !important; text-decoration: none; }
body#webBody .pic-title a:hover { color: var(--xc-red) !important; }
body#webBody .pic-price, body#webBody .pic-attr {
  font-family: var(--xc-mono) !important; font-size: 12px; color: var(--xc-gray) !important;
}
body#webBody .pic-price b, body#webBody .pic-price strong { color: var(--xc-red) !important; }

/* ============================================================
   6. LEFT SIDEBAR NAV — PROFESSIONAL CATEGORY MENU v4.8
   Borderless · Clean · Blue Active · No Navy/Gray/Black
   ============================================================ */

/* ---- card container: no stroke, soft panel ---- */
body#webBody .sidebarLists,
body#webBody .catalogList,
body#webBody .oneClassList {
  background: #ffffff !important;
  border: none !important;
  border-radius: 16px !important;
  box-shadow: 0 8px 30px rgba(16,24,40,.07) !important;
  overflow: hidden !important;
  padding: 0 !important;
}

/* ---- kill old site module frame (navy strips) around sidebar ---- */
body#webBody .Mo:has(.sidebarLists) .MoHeadL,
body#webBody .Mo:has(.sidebarLists) .MoHeadM,
body#webBody .Mo:has(.sidebarLists) .MoHeadR,
body#webBody .Mo:has(.sidebarLists) .MoNameL,
body#webBody .Mo:has(.sidebarLists) .MoNameR,
body#webBody .Mo:has(.sidebarLists) .MoBodyL,
body#webBody .Mo:has(.sidebarLists) .MoBodyM,
body#webBody .Mo:has(.sidebarLists) .MoBodyR,
body#webBody .Mo:has(.sidebarLists) .MoBL,
body#webBody .Mo:has(.sidebarLists) .MoBM,
body#webBody .Mo:has(.sidebarLists) .MoBR,
body#webBody .Mo:has(.sidebarLists) .MoTL,
body#webBody .Mo:has(.sidebarLists) .MoTM,
body#webBody .Mo:has(.sidebarLists) .MoTR {
  background: transparent !important;
  background-image: none !important;
  border: none !important;
}

/* ---- KILL tjstyle black MoHeadM (#Mo_91 etc.) — RED HEADER BAR ---- */
/* Nuclear override: kill ALL header cell backgrounds, then paint MoHeadM red */
body#webBody .MoHead {
  background: var(--xc-red) !important;
  background-image: none !important;
  background-color: var(--xc-red) !important;
}
body#webBody .MoHeadL,
body#webBody .MoHeadR {
  background: var(--xc-red) !important;
  background-image: none !important;
  background-color: var(--xc-red) !important;
  width: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}
body#webBody .MoHeadM {
  background: var(--xc-red) !important;
  background-image: none !important;
  background-color: var(--xc-red) !important;
  border: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  transition: none !important;
}
body#webBody .MoNameM,
body#webBody .MoNameM .NameTxt,
body#webBody .MoNameM .NameTxt a {
  display: block !important;
  background: transparent !important;
  color: #ffffff !important;
  font-family: var(--xc-mono) !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  padding: 3px 18px !important;
  text-decoration: none !important;
  line-height: 1.2 !important;
  border: none !important;
  border-bottom: none !important;
  transition: none !important;
}
/* kill hover gray/white block on ENTIRE sidebar header area
   ⚠️ 2026-10-15: 这里曾含 `body#webBody .Mo:hover`。.Mo 是整块白色卡片
   （见第 579 行 background:#ffffff !important），该选择器会把整张卡片在 hover
   时刷成红色，从 .MoHead 的 10px margin-bottom 缝隙漏出来 → 标题下方多出一条
   10px 红带，鼠标进出内容区就忽隐忽现。故移除，只保留真正的表头元素。 */
body#webBody .MoHead:hover,
body#webBody .MoHeadL:hover,
body#webBody .MoHeadR:hover,
body#webBody .MoHeadM:hover,
body#webBody .MoNameM:hover,
body#webBody .MoNameM .NameTxt:hover,
body#webBody .MoNameM .NameTxt a:hover {
  background: var(--xc-red) !important;
  background-color: var(--xc-red) !important;
  background-image: none !important;
}
/* kill any red accent mark / left bar on header */
body#webBody .MoNameM::before,
body#webBody .MoNameM::after,
body#webBody .MoHeadM::before,
body#webBody .MoHeadM::after {
  display: none !important;
  content: none !important;
}

/* ---- nav items base typography ---- */
body#webBody .oneClassT,
body#webBody .oneClassTinner,
body#webBody .oneClassT a {
  font-family: var(--xc-font) !important;
  color: var(--xc-ink) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  text-decoration: none !important;
  text-transform: uppercase !important;
  letter-spacing: .03em !important;
  transition: all .25s ease !important;
}

/* ---- category list item (dt): clean, no borders ---- */
body#webBody .oneClassT {
  position: relative !important;
  padding: 7px 22px 7px 8px !important;
  border: none !important;
  cursor: pointer !important;
  background: transparent !important;
  background-image: none !important;
}

/* ---- KILL tjstyle navy/gray on oneClassTinner (the real culprit!) ---- */
body#webBody .oneClassT .oneClassTinner {
  background: transparent !important;
  background-image: none !important;
  background-color: transparent !important;
  border: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  position: relative !important;
}
body#webBody .oneClassTinner code { display: none !important; }

/* remove old dot bullet */
body#webBody .oneClassT::before { content: none !important; }

/* ---- left accent bar (hidden by default, appears on hover/active) ---- */
body#webBody .oneClassT::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 50% !important;
  transform: translateY(-50%) scaleY(0) !important;
  width: 3px !important;
  height: 56% !important;
  background: #1D4ED8 !important;
  border-radius: 2px !important;
  transition: transform .28s cubic-bezier(.4,0,.2,1) !important;
}

/* ---- hover state (selectable menu feel) ---- */
body#webBody .oneClassT:hover {
  background: linear-gradient(90deg, rgba(29,78,216,.07), rgba(29,78,216,.02)) !important;
  transform: translateX(4px) !important;
}
body#webBody .oneClassT:hover .oneClassTinner {
  background: transparent !important;
  background-image: none !important;
}
body#webBody .oneClassT:hover::after {
  transform: translateY(-50%) scaleY(1) !important;
}
body#webBody .oneClassT:hover a,
body#webBody .oneClassT:hover span {
  color: #1D4ED8 !important;
}

/* ---- right chevron (appears on hover) ---- */
body#webBody .oneClassTinner::after {
  content: "\203A" !important;
  font-size: 20px !important;
  font-weight: 300 !important;
  color: transparent !important;
  opacity: 0 !important;
  transform: translateX(-4px) !important;
  transition: all .25s ease !important;
  flex-shrink: 0 !important;
  margin-left: 12px !important;
}
body#webBody .oneClassT:hover .oneClassTinner::after {
  color: #1D4ED8 !important;
  opacity: 1 !important;
  transform: translateX(0) !important;
}

/* ---- active / open item: light-blue fill, NO navy, NO border ---- */
body#webBody .oneClassTopen,
body#webBody .oneClassT.oneClassTopen {
  background: linear-gradient(90deg, rgba(29,78,216,.10), rgba(29,78,216,.03)) !important;
  background-color: rgba(29,78,216,.10) !important;
  background-image: none !important;
  border: none !important;
}
/* CRITICAL: kill tjstyle navy rgb(4,52,139) on child inner div */
body#webBody .oneClassTopen .oneClassTinner {
  background: transparent !important;
  background-image: none !important;
  background-color: transparent !important;
  border: none !important;
}
body#webBody .oneClassTopen::after {
  transform: translateY(-50%) scaleY(1) !important;
}
body#webBody .oneClassTopen a,
body#webBody .oneClassTopen span {
  color: #1D4ED8 !important;
  font-weight: 700 !important;
}
body#webBody .oneClassTopen .oneClassTinner::after {
  color: #1D4ED8 !important;
  opacity: 1 !important;
  transform: translateX(0) !important;
}

/* ---- KILL all old site navy/gray/black cell backgrounds in sidebar ---- */
body#webBody .oneClassT:hover td,
body#webBody .oneClassT:hover .NItemM,
body#webBody .oneClassT:hover .NItemL,
body#webBody .oneClassT:hover .NItemR,
body#webBody .oneClassTopen td,
body#webBody .oneClassTopen .NItemM,
body#webBody .oneClassTopen .NItemL,
body#webBody .oneClassTopen .NItemR,
body#webBody .NItemCur .NItemM,
body#webBody .NItemCur .NItemL,
body#webBody .NItemCur .NItemR {
  background: transparent !important;
  background-image: none !important;
  background-color: transparent !important;
  border: none !important;
}

/* ---- sub-nav links ---- */
body#webBody .NSub a, body#webBody .NSubC a {
  color: var(--xc-gray) !important;
}

/* ============================================================
   7. PAGINATION
   ============================================================ */
body#webBody .page, body#webBody .page a, body#webBody .page span {
  font-family: var(--xc-mono) !important;
}
body#webBody .page a,
body#webBody .page-prev, body#webBody .page-next, body#webBody .page-end {
  background: #fff !important;
  border: 1px solid var(--xc-line) !important;
  border-radius: 8px !important;
  color: var(--xc-ink) !important;
  font-weight: 600 !important;
  transition: all .2s !important;
  text-decoration: none !important;
}
body#webBody .page a:hover, body#webBody .page-prev:hover,
body#webBody .page-next:hover, body#webBody .page-end:hover {
  background: var(--xc-ink) !important; color: #fff !important; border-color: var(--xc-ink) !important;
}

/* ============================================================
   8. TEXT LISTS (news / downloads)
   ============================================================ */
body#webBody .text-list-module, body#webBody .text-list-a {
  background: transparent !important;
}
body#webBody .text-list-module li, body#webBody .text-list-a li {
  border-bottom: 1px dashed var(--xc-line) !important;
  transition: all .2s;
}
body#webBody .text-list-module li:hover, body#webBody .text-list-a li:hover {
  background: transparent !important;
}
body#webBody .text-list-a a {
  color: var(--xc-ink) !important; font-weight: 500 !important; text-decoration: none !important;
}
body#webBody .text-list-a a:hover { color: var(--xc-red) !important; }

/* ============================================================
   9. ARTICLE / PRODUCT DETAIL
   ============================================================ */
body#webBody .articleDetails, body#webBody .articleAbstract,
body#webBody .ev-text-article-1, body#webBody .FC_Con2 {
  font-family: var(--xc-font) !important;
  color: #1B2A4A !important;
  line-height: 1.85 !important;
  font-size: 15px !important;
}
body#webBody .articleDetails img, body#webBody .ev-text-article-1 img,
body#webBody .FC_Con2 img {
  border-radius: 12px !important; margin: 18px 0 !important;
  background: #ffffff !important;
}
body#webBody .articleDetails h1, body#webBody .ev-text-article-1 h1,
body#webBody .FC_Con2 h1 {
  font-size: 30px !important; margin: 0 0 18px !important; letter-spacing: -.02em !important;
}
body#webBody .articleAbstract {
  background: var(--xc-bg-soft) !important;
  border-left: 4px solid var(--xc-red) !important;
  border-radius: 0 10px 10px 0 !important;
  padding: 16px 20px !important;
  color: var(--xc-gray) !important;
  font-style: normal !important;
}

/* ============================================================
   10. FORMS / TABLES / SEARCH
   ============================================================ */
body#webBody input[type="text"], body#webBody input[type="email"],
body#webBody input[type="tel"], body#webBody textarea, body#webBody select {
  background: #fff !important; color: var(--xc-ink) !important;
  border: 1px solid #C8D0DD !important; border-radius: 8px !important;
  padding: 11px 14px !important; font-family: var(--xc-font) !important;
  transition: all .2s !important; box-sizing: border-box;
}
body#webBody input:focus, body#webBody textarea:focus, body#webBody select:focus {
  outline: none !important; border-color: var(--xc-blue) !important;
  box-shadow: 0 0 0 3px rgba(29,78,216,.14) !important;
}
body#webBody input[type="submit"], body#webBody input[type="button"], body#webBody button {
  background: var(--xc-ink) !important; color: #fff !important;
  border: none !important; border-radius: 999px !important;
  padding: 12px 26px !important; font-weight: 700 !important; cursor: pointer;
  font-family: var(--xc-font) !important; transition: all .25s !important;
}
body#webBody input[type="submit"]:hover, body#webBody button:hover {
  background: var(--xc-red) !important; transform: translateY(-2px);
}

body#webBody table {
  background: #fff !important; border-collapse: collapse;
}
body#webBody table th {
  background: var(--xc-bg-soft) !important; color: var(--xc-ink) !important;
  font-weight: 700 !important; padding: 12px 16px !important;
  border: 1px solid var(--xc-line) !important; font-family: var(--xc-font) !important;
}
body#webBody table td {
  padding: 12px 16px !important; border: 1px solid var(--xc-line) !important;
  color: #1B2A4A !important;
}
/* Row-hover: keep white background — no color change on hover (user request) */
body#webBody table:not(.MoHead):not(.MoName):not(.NItemTable):not(.MoT) tr:hover td { background: transparent !important; }
/* Lock the PRODUCTS red header bar: never let row-hover turn it gray/transparent */
body#webBody .MoHead tr:hover td.MoHeadM,
body#webBody .MoName tr:hover td.MoNameM { background: var(--xc-red) !important; }

/* Neutralize base-CSS product list hover (was #F5FAFC gray-blue) — keep white */
body#webBody .P_ListItem_2:hover, body#webBody .P_ListItem_2_hover,
body#webBody .T_ListItem_2:hover, body#webBody .T_ListItem_2_hover,
body#webBody .Class_list:hover, body#webBody .Class_list_hover {
  background: transparent !important;
}

/* Remove table borders for layout tables (news list, contact form) */
body#webBody .NItemTable,
body#webBody .form_table,
body#webBody .MoT,
body#webBody .MoHead,
body#webBody .MoBody,
body#webBody .MoName,
body#webBody .customModule > table,
body#webBody .customModuleRow > table,
body#webBody .CModulePC > table {
  border: none !important;
}
body#webBody .NItemTable td,
body#webBody .MoT td,
body#webBody .MoHead td,
body#webBody .MoBody td,
body#webBody .MoName td,
body#webBody .customModule > table td,
body#webBody .customModuleRow > table td,
body#webBody .CModulePC > table td {
  border: none !important; padding: 0 !important;
}

/* contact / news list specific table cleanup */
body#webBody .NItemTable { width: 100% !important; }
body#webBody .NItemTable .NItem { border-bottom: 1px dashed var(--xc-line) !important; }
body#webBody .NItemTable .NItem:hover { background: transparent !important; }
body#webBody .NItemTable .NItemM a {
  color: var(--xc-ink) !important; font-weight: 500 !important; text-decoration: none !important;
}
body#webBody .NItemTable .NItemM a:hover { color: var(--xc-red) !important; }
body#webBody .NItemTable .NItemR { color: var(--xc-gray) !important; font-family: var(--xc-mono) !important; font-size: 12px; }

/* ============================================================
   11. IMAGE BOXES — prevent black rectangles
   ============================================================ */
body#webBody .picBox,
body#webBody .pic-con,
body#webBody .pro-pic,
body#webBody .product-pic,
body#webBody .imgBox,
body#webBody .img-con,
body#webBody .photoBox,
body#webBody .scroll-pic,
body#webBody .pro-img,
body#webBody .proImg,
body#webBody .tempWrap,
body#webBody .jCarouselLite,
body#webBody .picScroll-left,
body#webBody .picScroll,
body#webBody .ev-pic,
body#webBody .ev-pic-1,
body#webBody .default-img,
body#webBody .lazy-loading {
  background: #ffffff !important;
  background-color: #ffffff !important;
}
body#webBody .pic-item {
  background-color: #ffffff !important;
}
body#webBody .pic-item img,
body#webBody .ev-pic img,
body#webBody .default-img,
body#webBody .pro-img img,
body#webBody .product-pic img {
  background: #ffffff !important;
  border-radius: 12px !important;
}

/* product carousel thumbnails */
body#webBody .picScroll-left .pic-item,
body#webBody .picScroll .pic-item,
body#webBody .jCarouselLite li,
body#webBody .pro-img-list li {
  background: #ffffff !important;
  border: 1px solid var(--xc-line) !important;
  border-radius: 10px !important;
  overflow: hidden !important;
}
body#webBody .picScroll-left .pic-item img,
body#webBody .picScroll .pic-item img,
body#webBody .jCarouselLite li img,
body#webBody .pro-img-list li img {
  background: #ffffff !important;
  border-radius: 8px !important;
}

/* ---- product detail main image / thumbnails layout fix ---- */
body#webBody .p-preview-1 .pic,
body#webBody .p-preview-1 .pics,
body#webBody .small-pic-list .pic,
body#webBody .small-pic-list .pics {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
}
body#webBody .p-preview-1 .pic .hook,
body#webBody .small-pic-list .pic .hook {
  display: none !important;
}
body#webBody .p-preview-1 .pic img,
body#webBody .small-pic-list .pic img {
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  display: block !important;
}

/* ============================================================
   12. CONTACT PAGE SPECIFIC
   ============================================================ */
body#webBody .form-module { width: 100% !important; }
body#webBody .form-module .item-list {
  margin-bottom: 14px !important;
  display: flex; flex-direction: column; gap: 6px;
}
body#webBody .form-module .item-name {
  font-family: var(--xc-font) !important;
  color: var(--xc-ink) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
}
body#webBody .form-module .item-con,
body#webBody .form-module .form-text,
body#webBody .form-module .form-textarea {
  width: 100% !important;
}
body#webBody .form-module input[type="text"],
body#webBody .form-module textarea {
  width: 100% !important; max-width: 100% !important;
  min-width: 260px !important;
}
body#webBody .form-module textarea {
  min-height: 120px !important;
}
body#webBody .form-module .form-button {
  margin-top: 8px !important;
}
body#webBody .form_table td {
  padding: 8px 12px !important;
  border: none !important;
  vertical-align: top !important;
}
body#webBody .form_table input[type="text"],
body#webBody .form_table textarea {
  width: 100% !important; max-width: 100% !important;
}
body#webBody .form_table .form_label {
  color: var(--xc-gray) !important; font-size: 13px !important;
  font-weight: 600 !important;
}
/* widen narrow contact form container */
body#webBody .form-module .MoBodyC,
body#webBody #formField_14162,
body#webBody .form-module dl {
  width: 100% !important; max-width: 480px !important;
}

/* ============================================================
   13. NEWS PAGE SPECIFIC
   ============================================================ */
body#webBody .news-list-table,
body#webBody .newsListTable,
body#webBody .articleList {
  background: transparent !important;
  border: none !important;
}
body#webBody .news-list-table td,
body#webBody .newsListTable td,
body#webBody .articleList td {
  border: none !important; padding: 0 !important;
}

/* ============================================================
   14. FLOATING BACK-TOP
   ============================================================ */
body#webBody .backTop_Z {
  border-radius: 50% !important;
  background: var(--xc-ink) !important;
  box-shadow: 0 10px 24px rgba(10,22,40,.3) !important;
}

/* ============================================================
   15. RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  .xc-nav-menu { display: none; }
  .xc-footer-grid { grid-template-columns: 1fr 1fr; }
  .xc-hero-title { font-size: 32px; }
  .xc-topbar > .xc-container { padding: 0 24px; }   /* --container-padding */
}
@media (max-width: 640px) {
  .xc-container { padding: 0 18px; }
  .xc-topbar > .xc-container { padding: 0 20px; }   /* --container-padding */
  .xc-hero-title { font-size: 26px; }
  .xc-footer-grid { grid-template-columns: 1fr; }
  .xc-topbar-actions { display: none; }
}

/* ============================================================
   16. LONG-FORM COPY — About EXTRACUT / Our Mission
   The CMS writes these paragraphs with inline font-size /
   text-indent, which no class can outrank — so the inline styles
   were stripped from the two source pages and every rule below
   carries !important against the legacy skin.
   ============================================================ */
body#webBody .xc-copy { max-width: 780px; }

/* lead statement — red bar, large, no indent */
body#webBody .xc-copy .xc-lead {
  font-size: 23px !important;
  line-height: 1.5 !important;
  font-weight: 600 !important;
  letter-spacing: -.015em !important;
  color: var(--xc-ink) !important;
  text-indent: 0 !important;
  margin: 0 0 32px !important;
  padding: 3px 0 3px 24px !important;
  border-left: 3px solid var(--xc-red) !important;
}

/* body paragraphs — one left edge, no CJK first-line indent */
body#webBody .xc-copy .xc-p {
  font-size: 16.5px !important;
  line-height: 1.88 !important;
  color: #35435E !important;
  text-indent: 0 !important;
  margin: 0 0 20px !important;
}

/* mono kicker — "What we hold to:" */
body#webBody .xc-copy .xc-kicker {
  font-family: var(--xc-mono) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: .2em !important;
  text-transform: uppercase !important;
  color: var(--xc-red) !important;
  text-indent: 0 !important;
  margin: 34px 0 18px !important;
}
body#webBody .xc-copy .xc-kicker::after {
  content: ""; display: block; width: 38px; height: 2px;
  background: var(--xc-red); opacity: .3; margin-top: 13px;
}

/* creed cards */
body#webBody .xc-copy .xc-creeds {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 34px !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
body#webBody .xc-copy .xc-creed {
  margin: 0 !important;
  padding: 20px 22px !important;
  background: #F7F9FC !important;
  border: 1px solid var(--xc-line) !important;
  border-radius: 12px !important;
  font-size: 15.5px !important;
  line-height: 1.72 !important;
  color: #35435E !important;
  text-indent: 0 !important;
  transition: transform .25s, box-shadow .25s, border-color .25s, background .25s;
}
body#webBody .xc-copy .xc-creed:hover {
  background: #FFFFFF !important;
  border-color: #D3DBE8 !important;
  box-shadow: 0 10px 26px rgba(10,22,40,.07);
  transform: translateY(-2px);
}
/* the CMS red ▪ becomes a small red rule above each creed title */
body#webBody .xc-copy .xc-creed > span:first-child {
  display: block !important;
  width: 22px !important; height: 3px !important;
  overflow: hidden !important;
  color: transparent !important;
  background: var(--xc-red) !important;
  font-size: 1px !important;
  border-radius: 2px !important;
  margin: 0 0 13px !important;
}
body#webBody .xc-copy .xc-creed b {
  display: block !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--xc-ink) !important;
  letter-spacing: -.01em !important;
  margin: 0 0 5px !important;
}

/* closing statement — pull quote */
body#webBody .xc-copy .xc-pull {
  margin: 34px 0 30px !important;
  padding: 22px 26px !important;
  background: var(--xc-bg-soft) !important;
  border-left: 4px solid var(--xc-red) !important;
  border-radius: 0 12px 12px 0 !important;
  font-size: 18px !important;
  line-height: 1.62 !important;
  font-weight: 600 !important;
  letter-spacing: -.01em !important;
  color: var(--xc-ink) !important;
  text-indent: 0 !important;
}

/* closing photo */
body#webBody .xc-copy .xc-figure { margin: 8px 0 0 !important; text-indent: 0 !important; }
body#webBody .xc-copy .xc-figure img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  margin: 0 !important;
  border-radius: 14px !important;
}

/* ============================================================
   17. FACILITY GALLERY — office and production kept apart
   ============================================================ */
body#webBody .xc-fac-intro {
  font-size: 17px !important;
  line-height: 1.7 !important;
  color: #35435E !important;
  text-indent: 0 !important;
  margin: 0 0 36px !important;
}
body#webBody .xc-fac-label {
  display: flex !important;
  align-items: center !important;
  gap: 16px;
  font-family: var(--xc-mono) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: .22em !important;
  text-transform: uppercase !important;
  color: var(--xc-red) !important;
  text-indent: 0 !important;
  margin: 0 0 18px !important;
}
body#webBody .xc-fac-label::after {
  content: ""; flex: 1 1 auto; height: 1px; background: var(--xc-line);
}
body#webBody .xc-fac-grid {
  display: grid;
  gap: 14px;
  margin: 0 0 44px !important;
}
body#webBody .xc-fac-grid-2 { grid-template-columns: repeat(2, 1fr); }
body#webBody .xc-fac-grid-3 { grid-template-columns: repeat(3, 1fr); }
body#webBody .xc-fac-grid-3 .xc-fac-hero { grid-column: 1 / -1; }
body#webBody .xc-fac-item {
  margin: 0 !important;
  padding: 0 !important;
  text-indent: 0 !important;
  line-height: 0 !important;
  overflow: hidden;
  border-radius: 12px;
  background: #EEF1F6;
}
body#webBody .xc-fac-item img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  margin: 0 !important;
  border-radius: 0 !important;
  aspect-ratio: 2.35 / 1;
  object-fit: cover;
  transition: transform .7s cubic-bezier(.22,.61,.36,1);
}
body#webBody .xc-fac-item:hover img { transform: scale(1.05); }

@media (max-width: 1024px) {
  body#webBody .xc-copy { max-width: none; }
}
@media (max-width: 900px) {
  body#webBody .xc-copy .xc-creeds { grid-template-columns: 1fr !important; }
  body#webBody .xc-fac-grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  body#webBody .xc-copy .xc-lead {
    font-size: 19px !important; padding-left: 16px !important; margin-bottom: 24px !important;
  }
  body#webBody .xc-copy .xc-p { font-size: 16px !important; line-height: 1.8 !important; }
  body#webBody .xc-copy .xc-pull {
    font-size: 16.5px !important; padding: 18px 18px !important; margin: 26px 0 24px !important;
  }
  body#webBody .xc-copy .xc-kicker { margin: 26px 0 14px !important; }
  body#webBody .xc-fac-grid-2,
  body#webBody .xc-fac-grid-3 { grid-template-columns: 1fr; }
  body#webBody .xc-fac-grid-3 .xc-fac-hero { grid-column: auto; }
  body#webBody .xc-fac-intro { font-size: 16px !important; }
  body#webBody .xc-fac-grid { margin-bottom: 32px !important; }
}

/* ============================================================
   18. SAMPLE-ROOM GALLERY — Our Mission footer
   Six 4:3 shots of the actual EXTRACUT display wall. Reuses the
   .xc-fac-item tile from the facility gallery, but keeps the
   native 4:3 frame (the facility tiles crop to 2.35:1).
   ============================================================ */
body#webBody .xc-showroom {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 6px !important;
  display: grid !important;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
body#webBody .xc-showroom .xc-fac-item img {
  aspect-ratio: 4 / 3 !important;
}
@media (max-width: 640px) {
  body#webBody .xc-showroom { grid-template-columns: 1fr !important; }
}

/* ============================================================
   19. CONTACT — enquiry desk
   The old CMS block was a 267px-wide absolutely-positioned form
   with three fields and a PHP action that no longer exists.
   Rebuilt as a two-column desk: dark info card + white form card.
   Everything here carries body#webBody + !important to outrank
   the legacy skin (ID + !important, see section 20 note).
   ============================================================ */
body#webBody .xc-contact-row,
body#webBody .xc-contact-row .customModuleRowInner,
body#webBody .xc-contact-row .CModulePA {
  height: auto !important; min-height: 0 !important; position: relative !important;
}
body#webBody .xc-contact-row { background: #FFFFFF !important; }
body#webBody .xc-contact {
  max-width: 1320px; margin: 0 auto;
  padding: 76px 32px 88px;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.62fr);
  gap: 40px; align-items: start;
}

/* ---- left: direct contact ---- */
body#webBody .xc-eyebrow {
  font-family: var(--xc-mono); font-size: 11px; font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--xc-red) !important; margin: 0 0 13px;
}
body#webBody .xc-cinfo {
  position: relative; overflow: hidden;
  background: var(--xc-ink); border-radius: 16px; padding: 34px 32px 32px;
}
body#webBody .xc-cinfo::after {
  content: ""; position: absolute; right: -78px; bottom: -78px;
  width: 230px; height: 230px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.10);
}
body#webBody .xc-cinfo-name {
  font-size: 25px; font-weight: 800; letter-spacing: -.02em;
  color: #FFFFFF !important; margin: 0 0 24px;
}
body#webBody .xc-cinfo-list { margin: 0 0 26px !important; padding: 0 !important; display: block !important; }
body#webBody .xc-cinfo-list > div {
  display: grid !important; grid-template-columns: 76px 1fr; gap: 10px;
  padding: 11px 0 !important; margin: 0 !important;
  border-top: 1px solid rgba(255,255,255,.09);
}
body#webBody .xc-cinfo-list > div:first-child { border-top: 0; padding-top: 0 !important; }
body#webBody .xc-cinfo-list dt {
  font-family: var(--xc-mono); font-size: 10.5px; font-weight: 500;
  letter-spacing: .13em; text-transform: uppercase;
  color: rgba(255,255,255,.42) !important; padding-top: 3px;
}
body#webBody .xc-cinfo-list dd {
  margin: 0 !important; font-size: 14.5px; line-height: 1.72;
  color: rgba(255,255,255,.86) !important;
}
body#webBody .xc-cinfo-list dd a {
  color: #FFFFFF !important; text-decoration: none !important;
  border-bottom: 1px solid rgba(255,255,255,.28);
  transition: color .2s, border-color .2s;
}
body#webBody .xc-cinfo-list dd a:hover {
  color: var(--xc-red) !important; border-bottom-color: var(--xc-red);
}
body#webBody .xc-cinfo-actions {
  display: flex; flex-wrap: wrap; gap: 10px;
  position: relative; z-index: 1;
}
body#webBody .xc-cbtn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 12px 20px !important; border-radius: 999px !important;
  background: transparent !important; color: #FFFFFF !important;
  border: 1px solid rgba(255,255,255,.3) !important;
  font-size: 13px !important; font-weight: 600 !important; line-height: 1 !important;
  letter-spacing: .03em; text-decoration: none !important;
  transition: background .2s, border-color .2s, transform .2s;
}
body#webBody .xc-cbtn:hover { border-color: rgba(255,255,255,.65) !important; transform: translateY(-1px); }
body#webBody .xc-cbtn-primary {
  background: var(--xc-red) !important; border-color: var(--xc-red) !important;
  box-shadow: 0 8px 22px rgba(230,57,70,.28);
}
body#webBody .xc-cbtn-primary:hover { background: #D62F3C !important; border-color: #D62F3C !important; }

/* ---- right: form card ---- */
body#webBody .xc-cform {
  background: #FFFFFF; border: 1px solid var(--xc-line); border-radius: 16px;
  padding: 38px 38px 34px; box-shadow: 0 18px 54px rgba(10,22,40,.07);
}
body#webBody .xc-cform-title {
  font-size: 25px; font-weight: 800; letter-spacing: -.025em; line-height: 1.3;
  color: var(--xc-ink) !important; margin: 0 0 12px !important; max-width: 21em;
}
body#webBody .xc-cform-sub {
  font-size: 15px; line-height: 1.72; color: #5A6A85 !important;
  margin: 0 0 30px !important; max-width: 36em;
}
body#webBody .xc-form { display: block !important; }
body#webBody .xc-grid2 {
  display: grid !important; grid-template-columns: 1fr 1fr; gap: 16px;
  margin: 0 0 16px !important;
}
body#webBody .xc-f { display: block !important; margin: 0 0 16px !important; padding: 0 !important; }
body#webBody .xc-grid2 .xc-f { margin: 0 !important; }
body#webBody .xc-f-lab {
  display: block !important; margin: 0 0 8px !important;
  font-size: 12px !important; font-weight: 600 !important; line-height: 1.4 !important;
  letter-spacing: .09em; text-transform: uppercase; color: #5A6A85 !important;
}
body#webBody .xc-f-lab i { font-style: normal !important; color: var(--xc-red) !important; margin-left: 3px; }
body#webBody .xc-form input[type="text"],
body#webBody .xc-form input[type="email"],
body#webBody .xc-form input[type="tel"],
body#webBody .xc-form select,
body#webBody .xc-form textarea {
  display: block !important; width: 100% !important; box-sizing: border-box !important;
  height: auto !important; min-height: 0 !important;
  padding: 13px 15px !important; margin: 0 !important;
  border: 1px solid #D7DEEA !important; border-radius: 9px !important;
  background: #FCFDFE !important; color: var(--xc-ink) !important;
  font-family: inherit !important; font-size: 15px !important; font-weight: 400 !important;
  line-height: 1.45 !important; box-shadow: none !important;
  -webkit-appearance: none; appearance: none;
  transition: border-color .2s, box-shadow .2s, background .2s;
}
body#webBody .xc-form select {
  padding-right: 38px !important; cursor: pointer;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%235A6A85' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important; background-position: right 15px center !important;
  background-size: 11px !important;
}
body#webBody .xc-form textarea { min-height: 134px !important; resize: vertical; line-height: 1.68 !important; }
body#webBody .xc-form input::placeholder,
body#webBody .xc-form textarea::placeholder { color: #A3AEC0 !important; opacity: 1; }
body#webBody .xc-form input[type="text"]:focus,
body#webBody .xc-form input[type="email"]:focus,
body#webBody .xc-form input[type="tel"]:focus,
body#webBody .xc-form select:focus,
body#webBody .xc-form textarea:focus {
  outline: none !important; background: #FFFFFF !important;
  border-color: var(--xc-red) !important;
  box-shadow: 0 0 0 3px rgba(230,57,70,.13) !important;
}
body#webBody .xc-form .xc-invalid {
  border-color: #CC0000 !important; background: #FFFAFA !important;
}
body#webBody .xc-form .xc-invalid:focus { box-shadow: 0 0 0 3px rgba(204,0,0,.13) !important; }

/* chips */
body#webBody .xc-f-chips { border: 0 !important; padding: 0 !important; margin: 0 0 20px !important; }
body#webBody .xc-chips { display: flex !important; flex-wrap: wrap; gap: 8px; }
body#webBody .xc-chips label {
  display: inline-flex !important; align-items: center;
  position: relative; cursor: pointer;
  padding: 8px 14px !important; margin: 0 !important;
  border: 1px solid #D7DEEA; border-radius: 999px;
  background: #FFFFFF; color: #42536F !important;
  font-size: 13px !important; font-weight: 500 !important; line-height: 1.2 !important;
  letter-spacing: 0; text-transform: none;
  transition: background .18s, border-color .18s, color .18s;
}
body#webBody .xc-chips label:hover { border-color: #B9C4D6; color: var(--xc-ink) !important; }
body#webBody .xc-chips label.is-on {
  background: var(--xc-ink) !important; border-color: var(--xc-ink) !important;
  color: #FFFFFF !important; font-weight: 600 !important;
}
body#webBody .xc-chips input {
  position: absolute !important; opacity: 0 !important;
  width: 0 !important; height: 0 !important; margin: 0 !important; pointer-events: none;
}

/* honeypot */
body#webBody .xc-hp {
  position: absolute !important; left: -9999px !important; top: auto !important;
  width: 1px; height: 1px; overflow: hidden;
}

/* submit */
body#webBody .xc-form-foot {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  margin: 26px 0 0 !important;
}
body#webBody .xc-submit {
  position: relative; display: inline-flex !important; align-items: center; gap: 10px;
  width: auto !important; height: auto !important;
  padding: 15px 34px !important; border: 0 !important; border-radius: 999px !important;
  background: var(--xc-red) !important; color: #FFFFFF !important;
  font-family: inherit !important; font-size: 14px !important; font-weight: 700 !important;
  line-height: 1 !important; letter-spacing: .05em; text-transform: uppercase;
  cursor: pointer; box-shadow: 0 10px 26px rgba(230,57,70,.26) !important;
  transition: transform .2s, box-shadow .2s, background .2s, opacity .2s;
}
body#webBody .xc-submit:hover { transform: translateY(-2px); box-shadow: 0 15px 32px rgba(230,57,70,.33) !important; }
body#webBody .xc-submit:disabled { opacity: .6 !important; cursor: default; transform: none; }
body#webBody .xc-submit-s {
  display: none; width: 13px; height: 13px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.4); border-top-color: #FFFFFF;
  animation: xcSpin .7s linear infinite;
}
body#webBody .xc-submit.is-busy .xc-submit-s { display: block; }
@keyframes xcSpin { to { transform: rotate(360deg); } }
body#webBody .xc-privacy {
  font-size: 12.5px !important; line-height: 1.6 !important;
  color: #8492A8 !important; margin: 0 !important; max-width: 32em;
}
body#webBody .xc-form-msg {
  margin: 14px 0 0 !important; font-size: 14px !important; line-height: 1.6 !important;
  color: #CC0000 !important;
}
body#webBody .xc-form-msg.is-ok { color: #147A46 !important; }

/* success panel */
body#webBody .xc-form-ok { text-align: center; padding: 24px 8px 6px; }
body#webBody .xc-form-ok[hidden] { display: none !important; }
body#webBody .xc-ok-mark { display: block; width: 56px; height: 56px; margin: 0 auto 18px; }
body#webBody .xc-form-ok h4 {
  font-size: 20px !important; font-weight: 800 !important; letter-spacing: -.015em;
  color: var(--xc-ink) !important; margin: 0 0 10px !important;
}
body#webBody .xc-form-ok p {
  font-size: 14.5px !important; line-height: 1.72 !important; color: #5A6A85 !important;
  margin: 0 auto 22px !important; max-width: 30em;
}
body#webBody .xc-form-ok p a { color: var(--xc-red) !important; }
body#webBody .xc-again {
  background: transparent !important; border: 1px solid #D7DEEA !important;
  color: var(--xc-ink) !important; border-radius: 999px !important;
  padding: 11px 22px !important; font-family: inherit !important;
  font-size: 13px !important; font-weight: 600 !important; cursor: pointer;
  transition: border-color .2s, background .2s;
}
body#webBody .xc-again:hover { border-color: #B9C4D6 !important; background: #F7F9FC !important; }

@media (max-width: 1024px) {
  body#webBody .xc-contact { grid-template-columns: 1fr; gap: 28px; padding: 54px 24px 66px; }
}
@media (max-width: 640px) {
  body#webBody .xc-contact { padding: 40px 20px 52px; }
  body#webBody .xc-cinfo { padding: 26px 22px 24px; border-radius: 14px; }
  body#webBody .xc-cinfo-list > div { grid-template-columns: 64px 1fr; }
  body#webBody .xc-cform { padding: 26px 20px 24px; border-radius: 14px; }
  body#webBody .xc-cform-title { font-size: 21px !important; }
  body#webBody .xc-grid2 { grid-template-columns: 1fr !important; gap: 0 !important; }
  body#webBody .xc-grid2 .xc-f { margin: 0 0 16px !important; }
  body#webBody .xc-submit { width: 100% !important; justify-content: center; }
  body#webBody .xc-form-foot { gap: 14px; }
}

/* inline field errors (injected by js/contact-form.js) */
body#webBody .xc-err {
  display: block !important; margin: 7px 0 0 !important;
  font-size: 12.5px !important; font-weight: 500 !important; line-height: 1.5 !important;
  color: #CC0000 !important;
}

/* ==========================================================================
   20. CONTACT — country combobox
   The native <input list> menu was drawn by the OS: unstylable, and a second
   click would not close it. This is a hand-rolled listbox instead, with the
   affordances people expect — click to toggle, type to filter, arrows/Enter/
   Esc, click-away to dismiss.
   ========================================================================== */
body#webBody .xc-form .xc-combo { position: relative !important; display: block !important; }

body#webBody .xc-form .xc-combo > input[type="text"] {
  padding-right: 46px !important;
  cursor: pointer;
}

/* chevron — a span, not a <button>: the CMS skin repaints every button */
body#webBody .xc-form .xc-combo-tog {
  position: absolute !important; top: 0; right: 0; bottom: 0; width: 46px;
  display: flex !important; align-items: center; justify-content: center;
  margin: 0 !important; padding: 0 !important; border: 0 !important;
  background: none !important; color: #8493AA !important;
  cursor: pointer; z-index: 2;
  transition: color .22s ease, transform .42s cubic-bezier(.16, 1, .3, 1);
}
body#webBody .xc-form .xc-combo-tog svg { display: block !important; width: 11px; height: 8px; }
body#webBody .xc-form .xc-combo:hover .xc-combo-tog { color: #42536F !important; }
body#webBody .xc-form .xc-combo.is-open .xc-combo-tog {
  color: var(--xc-red) !important; transform: rotate(180deg);
}

/* panel */
body#webBody .xc-form .xc-combo-panel {
  position: absolute !important; left: 0; right: 0; top: calc(100% + 8px); z-index: 70;
  display: block !important; margin: 0 !important; padding: 0 !important;
  background: #FFFFFF !important; border: 1px solid #E3E9F3 !important;
  border-radius: 14px !important; overflow: hidden;
  box-shadow: 0 30px 70px -22px rgba(10, 22, 40, .34), 0 6px 18px rgba(10, 22, 40, .05);
  opacity: 0; visibility: hidden;
  transform: translateY(-8px) scale(.985);
  transform-origin: 50% 0;
  transition: opacity .18s ease, transform .34s cubic-bezier(.16, 1, .3, 1),
              visibility 0s linear .34s;
}
body#webBody .xc-form .xc-combo-panel::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; z-index: 3;
  background: linear-gradient(90deg,
    var(--xc-red) 0%, rgba(230, 57, 70, .20) 48%, rgba(230, 57, 70, 0) 84%);
}
body#webBody .xc-form .xc-combo.is-open .xc-combo-panel {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity .2s ease, transform .38s cubic-bezier(.16, 1, .3, 1), visibility 0s;
}

/* scroll area */
body#webBody .xc-form .xc-combo-list {
  display: block !important; max-height: 274px; overflow-y: auto;
  overscroll-behavior: contain; padding: 7px 0 9px;
  scrollbar-width: thin; scrollbar-color: #C9D3E2 transparent;
}
body#webBody .xc-form .xc-combo-list::-webkit-scrollbar { width: 9px; }
body#webBody .xc-form .xc-combo-list::-webkit-scrollbar-track { background: transparent; }
body#webBody .xc-form .xc-combo-list::-webkit-scrollbar-thumb {
  background: #D3DBE8; border: 3px solid #FFFFFF; border-radius: 999px;
}
body#webBody .xc-form .xc-combo-list::-webkit-scrollbar-thumb:hover { background: #B7C3D6; }

/* A–Z index letter — sticky so it stays readable while scrolling */
body#webBody .xc-form .xc-combo-grp {
  position: sticky; top: 0; z-index: 2;
  display: block !important; margin: 0 !important; padding: 10px 16px 5px !important;
  background: #FFFFFF !important; border-bottom: 1px solid #F2F5FA;
  font-family: var(--xc-mono) !important; font-size: 10px !important;
  font-weight: 700 !important; letter-spacing: .24em !important;
  line-height: 1.2 !important; text-transform: uppercase; color: #A6B2C6 !important;
}

/* one country */
body#webBody .xc-form .xc-combo-opt {
  position: relative !important; display: block !important;
  margin: 0 !important; padding: 9px 16px 9px 18px !important;
  font-family: var(--xc-font) !important; font-size: 14.5px !important;
  font-weight: 600 !important; letter-spacing: .008em !important;
  line-height: 1.35 !important; text-transform: none;
  color: #44506A !important; cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
body#webBody .xc-form .xc-combo-opt::before {
  content: ""; position: absolute; left: 0; top: 5px; bottom: 5px; width: 2px;
  border-radius: 0 2px 2px 0; background: var(--xc-red);
  transform: scaleY(0); transform-origin: 50% 0;
  transition: transform .26s cubic-bezier(.16, 1, .3, 1);
}
body#webBody .xc-form .xc-combo-opt:hover,
body#webBody .xc-form .xc-combo-opt.is-active {
  background: #F4F7FC !important; color: var(--xc-ink) !important;
}
body#webBody .xc-form .xc-combo-opt:hover::before,
body#webBody .xc-form .xc-combo-opt.is-active::before { transform: scaleY(1); }
/* the characters that matched what was typed */
body#webBody .xc-form .xc-combo-opt .xc-hit {
  font-weight: 800 !important; color: var(--xc-ink) !important;
  background: linear-gradient(180deg, transparent 64%, rgba(230, 57, 70, .18) 64%);
}
body#webBody .xc-form .xc-combo-empty {
  display: block !important; margin: 0 !important; padding: 15px 16px 16px !important;
  font-size: 13px !important; font-weight: 500 !important;
  line-height: 1.6 !important; color: #93A0B5 !important;
}

/* read-only fields (quantity): the field shows the chosen band in the visitor's
   language, a hidden mirror carries the value that is actually submitted */
body#webBody .xc-form .xc-combo > input[readonly] {
  cursor: pointer; caret-color: transparent; text-overflow: ellipsis;
  background: #FFFFFF !important; color: var(--xc-ink) !important;
}
body#webBody .xc-form .xc-combo > input[readonly]::placeholder {
  color: #93A0B5 !important; font-weight: 500 !important;
}

/* the option that is currently chosen */
body#webBody .xc-form .xc-combo-opt.is-picked { color: var(--xc-ink) !important; }
body#webBody .xc-form .xc-combo-opt.is-picked::before { transform: scaleY(1); }
body#webBody .xc-form .xc-combo-opt.is-picked::after {
  content: ""; position: absolute; top: 50%; right: 14px;
  width: 13px; height: 13px; margin-top: -6px; pointer-events: none;
  background: no-repeat 50% 50% / 13px 13px
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.6 8.5l3.4 3.4 7.4-7.4' fill='none' stroke='%23E63946' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* entrance — the panel lifts in, the rows follow in a short cascade */
@keyframes xcGrpIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes xcOptIn {
  from { opacity: 0; transform: translateY(-5px); }
  to   { opacity: 1; transform: translateY(0); }
}
body#webBody .xc-form .xc-combo.is-animated .xc-combo-grp {
  animation: xcGrpIn .3s ease both;
}
body#webBody .xc-form .xc-combo.is-animated .xc-combo-opt {
  animation: xcOptIn .34s cubic-bezier(.16, 1, .3, 1) both;
  animation-delay: calc(var(--i, 0) * 11ms);
}

@media (max-width: 640px) {
  body#webBody .xc-form .xc-combo-list { max-height: 232px; }
  body#webBody .xc-form .xc-combo-grp { padding: 9px 14px 5px !important; }
  body#webBody .xc-form .xc-combo-opt { padding: 10px 14px 10px 16px !important; font-size: 14px !important; }
}
@media (prefers-reduced-motion: reduce) {
  body#webBody .xc-form .xc-combo-panel,
  body#webBody .xc-form .xc-combo-tog { transition-duration: .01ms; }
  body#webBody .xc-form .xc-combo.is-animated .xc-combo-opt,
  body#webBody .xc-form .xc-combo.is-animated .xc-combo-grp { animation: none; }
}