/* ==========================================================================
   JINGWEI — Premium B2B Industrial Theme
   Design system + full site skin. Loaded last, wins on specificity.
   Palette: Navy #0A1F44 / Gold #C6A052 / Slate / Neutral greys
   ========================================================================== */

/* ---------- 1. Design Tokens ---------- */
:root {
  /* Brand */
  --jw-navy-900: #061530;
  --jw-navy-800: #0A1F44;
  --jw-navy-700: #12305F;
  --jw-navy-600: #1B3F79;
  --jw-navy-500: #27518F;
  --jw-gold-600: #A8873C;
  --jw-gold-500: #C6A052;
  --jw-gold-400: #D9B96E;
  --jw-gold-300: #E8D2A0;

  /* Neutral */
  --jw-ink: #0E1526;
  --jw-slate-700: #37435A;
  --jw-slate-500: #5C6B85;
  --jw-slate-400: #8A97AD;
  --jw-slate-300: #C3CBD9;
  --jw-slate-200: #E2E7EF;
  --jw-slate-100: #F1F4F9;
  --jw-white: #FFFFFF;

  /* Semantic */
  --jw-bg: #FFFFFF;
  --jw-bg-soft: #F7F9FC;
  --jw-bg-dark: var(--jw-navy-900);
  --jw-line: #E4E9F2;
  --jw-price: #B3261E;

  /* Typography */
  --jw-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
             'Helvetica Neue', Arial, 'PingFang SC', 'Microsoft YaHei', sans-serif;
  --jw-font-head: 'Inter', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  /* Radii & elevation */
  --jw-r-sm: 4px;
  --jw-r: 8px;
  --jw-r-lg: 14px;
  --jw-r-pill: 999px;
  --jw-sh-1: 0 1px 2px rgba(14, 21, 38, .06), 0 1px 3px rgba(14, 21, 38, .08);
  --jw-sh-2: 0 4px 12px rgba(14, 21, 38, .08), 0 2px 4px rgba(14, 21, 38, .04);
  --jw-sh-3: 0 12px 32px rgba(14, 21, 38, .12), 0 4px 10px rgba(14, 21, 38, .06);
  --jw-sh-4: 0 24px 60px rgba(6, 21, 48, .18);

  /* Motion */
  --jw-ease: cubic-bezier(.22, .61, .36, 1);
  --jw-t: .28s var(--jw-ease);

  /* Layout */
  --jw-max: 1320px;
  --jw-gutter: 15px;
  --jw-header-h: 76px;
}

/* ---------- 2. Base override ---------- */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  font-family: var(--jw-font) !important;
  font-size: 15px;
  line-height: 1.65;
  color: var(--jw-slate-700) !important;
  background: var(--jw-bg) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--jw-font-head) !important;
  color: var(--jw-navy-800) !important;
  font-weight: 700 !important;
  letter-spacing: -.015em;
  margin-top: 0;
}
h1 { font-size: 38px; line-height: 1.2; }
h2 { font-size: 30px; line-height: 1.25; }
h3 { font-size: 22px; line-height: 1.3; }
h4 { font-size: 18px; }
h5 { font-size: 15px; }

a { color: var(--jw-navy-600); transition: color var(--jw-t); }
a:hover, a:focus { color: var(--jw-gold-600); text-decoration: none; }

img { max-width: 100%; height: auto; }
hr { border-top: 1px solid var(--jw-line); margin: 28px 0; }

.container { max-width: var(--jw-max); width: 100%; }

::selection { background: var(--jw-gold-400); color: var(--jw-navy-900); }

/* Scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--jw-slate-100); }
::-webkit-scrollbar-thumb { background: var(--jw-slate-300); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: var(--jw-slate-400); }

/* ---------- 3. Utility: section rhythm ---------- */
.jw-section { padding: 84px 0; position: relative; }
.jw-section--tight { padding: 56px 0; }
.jw-section--soft { background: var(--jw-bg-soft); }
.jw-section--dark { background: var(--jw-navy-900); color: #C9D4E6; }
.jw-section--dark h1, .jw-section--dark h2,
.jw-section--dark h3, .jw-section--dark h4 { color: #fff !important; }

.jw-eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--jw-gold-600);
  margin-bottom: 14px;
  position: relative;
  padding-left: 30px;
}
.jw-eyebrow::before {
  content: '';
  position: absolute; left: 0; top: 50%;
  width: 20px; height: 2px;
  background: var(--jw-gold-500);
  transform: translateY(-50%);
}
.jw-section--dark .jw-eyebrow { color: var(--jw-gold-400); }

.jw-title { font-size: 34px; font-weight: 700; color: var(--jw-navy-800); margin: 0 0 16px; }
.jw-sub { font-size: 16px; color: var(--jw-slate-500); max-width: 720px; line-height: 1.75; }
.jw-center { text-align: center; }
.jw-center .jw-sub { margin-left: auto; margin-right: auto; }
.jw-center .jw-eyebrow { padding-left: 0; }
.jw-center .jw-eyebrow::before { display: none; }

.jw-rule {
  width: 56px; height: 3px; background: var(--jw-gold-500);
  border-radius: 2px; margin: 0 0 22px;
}
.jw-center .jw-rule { margin-left: auto; margin-right: auto; }

/* ---------- 4. Buttons ---------- */
.btn {
  font-family: var(--jw-font);
  font-weight: 600;
  border-radius: var(--jw-r-sm);
  transition: all var(--jw-t);
  letter-spacing: .01em;
}
.btn-primary, .btn-primary:focus {
  background: var(--jw-navy-800) !important;
  border: 1px solid var(--jw-navy-800) !important;
  color: #fff !important;
}
.btn-primary:hover {
  background: var(--jw-navy-600) !important;
  border-color: var(--jw-navy-600) !important;
  transform: translateY(-1px);
  box-shadow: var(--jw-sh-2);
}
.btn-default {
  background: #fff !important;
  border: 1px solid var(--jw-slate-300) !important;
  color: var(--jw-slate-700) !important;
}
.btn-default:hover {
  border-color: var(--jw-navy-600) !important;
  color: var(--jw-navy-700) !important;
  background: #fff !important;
}

/* Gold CTA */
.jw-btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 15px 32px;
  font-size: 14px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
  border-radius: var(--jw-r-sm);
  border: 1px solid transparent;
  cursor: pointer;
  transition: all var(--jw-t);
  text-decoration: none !important;
  line-height: 1;
}
.jw-btn i { font-size: 15px; }

.jw-btn--gold { background: var(--jw-gold-500); color: var(--jw-navy-900) !important; }
.jw-btn--gold:hover {
  background: var(--jw-gold-400);
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(198, 160, 82, .38);
  color: var(--jw-navy-900) !important;
}

.jw-btn--navy { background: var(--jw-navy-800); color: #fff !important; }
.jw-btn--navy:hover {
  background: var(--jw-navy-600);
  transform: translateY(-2px);
  box-shadow: var(--jw-sh-3);
  color: #fff !important;
}

.jw-btn--ghost { background: transparent; color: #fff !important; border-color: rgba(255,255,255,.4); }
.jw-btn--ghost:hover {
  background: #fff; color: var(--jw-navy-800) !important;
  border-color: #fff; transform: translateY(-2px);
}

.jw-btn--outline { background: transparent; color: var(--jw-navy-800) !important; border-color: var(--jw-slate-300); }
.jw-btn--outline:hover { border-color: var(--jw-navy-800); background: var(--jw-navy-800); color: #fff !important; }

.jw-btn--lg { padding: 18px 40px; font-size: 15px; }

/* ---------- 5. Header ---------- */
#top {
  background: var(--jw-navy-900) !important;
  border: 0 !important;
  color: #9FB0CA !important;
  font-size: 13px !important;
  padding: 9px 0;
  min-height: 0;
}
#top .welcome-text { color: #9FB0CA; display: inline-flex; align-items: center; gap: 8px; }
#top .welcome-text i { color: var(--jw-gold-500); }
#top-links ul { margin: 0; }
#top-links li { padding: 0 12px; }
#top-links li + li { border-left: 1px solid rgba(255,255,255,.12); }
#top-links a { color: #9FB0CA !important; font-size: 13px; display: inline-flex; align-items: center; gap: 7px; }
#top-links a:hover { color: var(--jw-gold-400) !important; }
#top-links i { color: var(--jw-gold-500); }

header {
  background: #fff !important;
  border: 0 !important;
  border-bottom: 1px solid var(--jw-line) !important;
  box-shadow: none !important;
  padding: 18px 0;
  position: relative;
  z-index: 1030;
  transition: box-shadow var(--jw-t), padding var(--jw-t);
}
header.jw-stuck {
  position: fixed; top: 0; left: 0; right: 0;
  padding: 10px 0;
  box-shadow: var(--jw-sh-3);
  animation: jwDrop .3s var(--jw-ease);
  z-index: 1050;
}
@keyframes jwDrop { from { transform: translateY(-100%); } to { transform: translateY(0); } }

#logo { display: flex; align-items: center; }
#logo img { max-height: 52px; width: auto; }
#logo h1, #logo a { margin: 0; }

/* Header row: a real 3-column grid.
   Previously this used Bootstrap float columns inside an inline-flex .row,
   which nullified the column widths and made the search box overlap the
   contact block. Explicit grid tracks fix the collision. */
.jw-head-row {
  display: grid;
  grid-template-columns: minmax(210px, auto) minmax(240px, 1fr) minmax(0, auto);
  align-items: center;
  gap: 26px;
}
.jw-head-logo { display: flex; align-items: center; }
.jw-head-search { min-width: 0; }
.jw-head-search #search { width: 100%; max-width: 460px; }
.jw-head-contact { min-width: 0; }
.jw-head-mobile-cta { display: none; }

@media (max-width: 991px) {
  .jw-head-row { grid-template-columns: 1fr auto; gap: 16px; }
  .jw-head-search, .jw-head-contact { display: none; }
  .jw-head-mobile-cta { display: block; }
}

.jw-brand { display: flex; align-items: center; gap: 14px; text-decoration: none !important; }
.jw-brand__mark {
  width: 46px; height: 46px; flex: 0 0 46px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--jw-navy-700), var(--jw-navy-900));
  display: flex; align-items: center; justify-content: center;
  color: var(--jw-gold-400); font-weight: 800; font-size: 19px;
  letter-spacing: -.5px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14);
}
.jw-brand__text { line-height: 1.15; }
.jw-brand__name {
  display: block; font-size: 20px; font-weight: 800;
  color: var(--jw-navy-800); letter-spacing: -.02em;
}
.jw-brand__tag {
  display: block; font-size: 10.5px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--jw-gold-600); margin-top: 3px;
}

/* Header search */
#search { position: relative; }
#search .input-group { display: flex; width: 100%; }
#search input.form-control, #search .input-lg {
  height: 46px !important;
  border: 1.5px solid var(--jw-slate-200) !important;
  border-right: 0 !important;
  border-radius: var(--jw-r-sm) 0 0 var(--jw-r-sm) !important;
  box-shadow: none !important;
  font-size: 14px;
  background: var(--jw-slate-100);
  transition: all var(--jw-t);
  padding-left: 18px;
  color: var(--jw-ink);
}
#search input.form-control:focus, #search .input-lg:focus {
  background: #fff;
  border-color: var(--jw-navy-600) !important;
}
#search .btn, #search .btn-lg, #search button.btn {
  height: 46px !important;
  background: var(--jw-navy-800) !important;
  border: 1.5px solid var(--jw-navy-800) !important;
  color: #fff !important;
  border-radius: 0 var(--jw-r-sm) var(--jw-r-sm) 0 !important;
  padding: 0 24px;
  transition: all var(--jw-t);
}
#search .btn:hover { background: var(--jw-gold-500) !important; border-color: var(--jw-gold-500) !important; color: var(--jw-navy-900) !important; }

/* Header quick contacts */
.jw-head-cta { display: flex; align-items: center; justify-content: flex-end; gap: 10px; height: 100%; }
.jw-head-cta__item {
  display: flex; align-items: center; gap: 11px;
  padding: 0 18px;
  border-left: 1px solid var(--jw-line);
  text-decoration: none !important;
}
.jw-head-cta__item:first-child { border-left: 0; }
.jw-head-cta__ico {
  width: 40px; height: 40px; flex: 0 0 40px;
  border-radius: 50%;
  background: var(--jw-slate-100);
  color: var(--jw-navy-700);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
  transition: all var(--jw-t);
}
.jw-head-cta__item:hover .jw-head-cta__ico { background: var(--jw-gold-500); color: var(--jw-navy-900); }
.jw-head-cta__lbl { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--jw-slate-400); font-weight: 600; }
.jw-head-cta__val { display: block; font-size: 14px; font-weight: 700; color: var(--jw-navy-800); white-space: nowrap; }

/* ---------- 6. Main navigation ---------- */
#menu {
  background: var(--jw-navy-800) !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  margin: 0 !important;
  min-height: 0 !important;
  position: sticky; top: 0; z-index: 1040;
}
/* Ensure the bar is fully opaque over the hero and never lets it bleed through,
   including behind a wrapped/scrolled nav row. */
#menu > .container,
#menu .side-menu,
#menu .side-inner { background: var(--jw-navy-800); }
#menu.jw-stuck { box-shadow: 0 10px 30px rgba(6,21,48,.18); }

#menu .container { position: relative; display: flex; align-items: stretch; }
#menu .side-menu { width: 100%; }
#menu .side-title { display: none; }
#menu ul.nav.navbar-nav {
  display: flex;
  flex-wrap: nowrap;              /* single clean row — was wrapping onto the hero */
  align-items: stretch;
  margin: 0;
  float: none;
  width: 100%;
  overflow: hidden;               /* clip the horizontal overflow only — pairing
                                     `overflow-x:auto` with `overflow-y:visible` is
                                     illegal in CSS and resolves y to `auto`, which
                                     created a vertical scroll container that sliced
                                     the nav labels in half. */
  scrollbar-width: none;          /* Firefox */
  -ms-overflow-style: none;       /* legacy Edge */
}
/* Let the desktop row breathe vertically: nothing inside may be height-capped.
   Must come AFTER the `overflow` shorthand above, otherwise `hidden` would be
   re-applied to the y-axis and re-introduce the vertical clip. */
@media (min-width: 992px) {
  #menu,
  #menu .container,
  #menu .side-menu,
  #menu .side-inner,
  #menu ul.nav.navbar-nav {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }
}
#menu ul.nav.navbar-nav::-webkit-scrollbar { display: none; }
#menu ul.nav.navbar-nav > li { float: none; position: static; flex: 0 0 auto; }


/* NOTE: the stock theme (inside `@media (min-width:992px)`) forces
   `#menu .nav>li>a { height:40px; line-height:40px; padding:0 15px }`.
   A fixed 40px line-height PLUS our own vertical padding makes the content box
   taller than the 40px bar, so the descenders get sliced off — the "menu only
   shows half" defect. We therefore must reset height/line-height here, and let
   the bar size itself from the link's padding (see $NAV-H below). */
#menu .nav > li > a {
  display: block;
  color: rgba(255,255,255,.9) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: .01em;
  text-transform: none !important;
  text-shadow: none !important;
  height: auto !important;
  line-height: 1.35 !important;
  padding: 14px 11px !important;
  transition: all var(--jw-t);
  position: relative;
  border: 0 !important;
  background: transparent !important;
  transform: none !important;
  box-shadow: none !important;
  white-space: nowrap;
  box-sizing: border-box;
}
@media (min-width: 992px) and (max-width: 1199px) {
  #menu .nav > li > a { padding: 13px 8px !important; font-size: 12.5px !important; }
}
/* When the nav cannot fit, allow a subtle edge fade so the cut looks
   intentional rather than broken, and keep the row horizontally scrollable
   (scrollbar hidden above). */
@media (min-width: 992px) {
  #menu .side-inner { position: relative; }
  #menu .side-inner::after {
    content: '';
    position: absolute; top: 0; right: 0; bottom: 0; width: 46px;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, var(--jw-navy-800));
  }
  #menu ul.nav.navbar-nav { padding-right: 46px; }

  /* The nav container mirrors the page container so the 8 top-level items get
     the same usable width as the rest of the layout. It used to be capped at
     1280px, which clipped the last items on 1440px displays.
     IMPORTANT: every step below must stay `min(measured, 100% - gutters)` so the
     row can NEVER be wider than the viewport — otherwise the trailing items
     ("Contact") get pushed off-screen at 1024–1439px. */
  #menu > .container {
    width: auto;
    max-width: 100%;
    padding-left: 15px;
    padding-right: 15px;
  }
}
@media (min-width: 1200px) {
  #menu > .container { width: min(1200px, 100%); max-width: 100%; }
}
@media (min-width: 1440px) {
  #menu > .container { width: min(1400px, 100%); max-width: 100%; }
}
@media (min-width: 1680px) {
  #menu > .container { width: min(1560px, 100%); max-width: 100%; }
}
/* Below 1440px the 8 items are tight, so reduce side padding + font a touch.
   Tuned so the full row fits without clipping down to ~1024px. */
@media (min-width: 992px) and (max-width: 1439px) {
  #menu .nav > li { margin-right: 14px !important; }
  #menu .nav > li > a { padding: 14px 7px !important; font-size: 12.5px !important; }
}
@media (min-width: 992px) and (max-width: 1199px) {
  #menu .nav > li { margin-right: 8px !important; }
  #menu .nav > li > a { padding: 14px 5px !important; font-size: 11.5px !important; letter-spacing: 0 !important; }
}


#menu .nav > li > a::after {
  content: '';
  position: absolute; left: 16px; right: 16px; bottom: 0;
  height: 3px; background: var(--jw-gold-500);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--jw-t);
}
#menu .nav > li:hover > a,
#menu .nav > li > a:hover,
#menu .nav > li.open > a,
#menu .nav > li.active > a {
  color: #fff !important;
  background: rgba(255,255,255,.06) !important;
  box-shadow: none !important;
}
#menu .nav > li:hover > a::after,
#menu .nav > li.open > a::after { transform: scaleX(1); }

#menu .nav > li .toggle-button { display: none; }

/* Mega dropdown */
#menu .dropdown-menu {
  background: #fff !important;
  border: 0 !important;
  border-top: 3px solid var(--jw-gold-500) !important;
  border-radius: 0 0 var(--jw-r) var(--jw-r) !important;
  box-shadow: var(--jw-sh-4) !important;
  padding: 8px 0 !important;
  min-width: 268px;
  margin-top: 0 !important;
  animation: jwDrop2 .22s var(--jw-ease);
  left: auto;
}
@keyframes jwDrop2 { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

#menu .dropdown-menu > li > a,
#menu .dropdown-inner a {
  display: block !important;
  padding: 10px 22px !important;
  font-size: 13.5px !important;
  color: var(--jw-slate-700) !important;
  font-weight: 500 !important;
  white-space: normal !important;
  border-bottom: 0 !important;
  border-left: 3px solid transparent;
  transition: all var(--jw-t);
  line-height: 1.45;
}
#menu .dropdown-menu > li > a:hover,
#menu .dropdown-inner a:hover {
  background: var(--jw-slate-100) !important;
  color: var(--jw-navy-700) !important;
  border-left-color: var(--jw-gold-500);
  padding-left: 26px !important;
}
#menu .see-all { display: none !important; }

/* ---------- 7. Hero ----------
   Layout: navy field + two columns (copy left, product panel right).
   The category imagery is cut-out product photography with catalogue captions
   burned into the pixels, so it must NOT be stretched full-bleed behind the
   headline — the captions read as ghost text. It is shown inside a framed
   panel instead, and the copy sits on a clean navy field. */
.jw-hero {
  position: relative;
  min-height: 620px;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--jw-navy-900);
  isolation: isolate;
}
/* `.jw-hero` is a flex row, so each slide is a flex item and would otherwise
   shrink to its max-content width and sit flush left — which left the inner
   `.container` unable to centre itself (margin:auto has nothing to distribute).
   Stretching the slide to 100% restores normal block layout inside. */
.jw-hero__slide {
  flex: 1 1 100%;
  width: 100%;
  min-width: 0;
  position: relative;
  z-index: 2;
}

/* Decorative navy field: a soft diagonal light plus a fine engineered grid. */
.jw-hero__bg {
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(ellipse 68% 78% at 88% 18%, rgba(198,160,82,.13), transparent 62%),
    radial-gradient(ellipse 60% 70% at 8% 92%, rgba(35,72,133,.5), transparent 66%),
    linear-gradient(118deg, #061530 0%, #0A1F44 46%, #123363 100%);
}
.jw-hero__bg-grid {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 82% 78% at 22% 46%, #000 0%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 82% 78% at 22% 46%, #000 0%, transparent 78%);
}

/* Two columns: copy ~ 1fr, figure ~ 0.92fr. */
.jw-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr);
  gap: 56px;
  align-items: center;
}

.jw-hero__inner { padding: 96px 0 90px; width: 100%; }
.jw-hero__eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: var(--jw-gold-400);
  background: rgba(198,160,82,.12);
  border: 1px solid rgba(198,160,82,.32);
  padding: 8px 18px; border-radius: var(--jw-r-pill);
  margin-bottom: 26px;
}
.jw-hero__eyebrow i { font-size: 12px; }

/* The headline lives in a grid track, so cap it by character count rather than
   a fixed pixel width — that keeps the line breaks stable as the track
   resizes. */
.jw-hero h1,
.jw-hero h2.hw-h1 {
  color: #fff !important;
  font-size: 50px;
  line-height: 1.13;
  font-weight: 800;
  letter-spacing: -.028em;
  margin: 0 0 22px;
  max-width: 13ch;
}
.jw-hero h1 em,
.jw-hero h2.hw-h1 em { font-style: normal; color: var(--jw-gold-400); }
.jw-hero__lead {
  font-size: 17px;
  line-height: 1.72;
  color: #B9C6DC;
  max-width: 46ch;
  margin: 0 0 34px;
}
.jw-hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 46px; }

/* --- Product panel --- */
.jw-hero__figure { min-width: 0; }
.jw-hero__frame {
  position: relative;
  border-radius: 18px;
  padding: 18px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.13);
  box-shadow:
    0 34px 80px rgba(2,8,22,.55),
    inset 0 1px 0 rgba(255,255,255,.12);
  backdrop-filter: blur(2px);
}
/* The source images are tall product shots on white; contain them so the whole
   machine is visible (never cropped) and give them a light plate so the white
   background blends into the panel instead of showing a hard rectangle. */
.jw-hero__frame img {
  display: block;
  width: 100%;
  height: 348px;
  object-fit: contain;
  border-radius: 10px;
  background: linear-gradient(170deg, #FFFFFF 0%, #EEF3FA 100%);
}
/* Gold corner accent, echoing the wordmark rule. */
.jw-hero__frame::after {
  content: '';
  position: absolute;
  left: 18px; right: 18px; bottom: -3px;
  height: 3px; border-radius: 3px;
  background: linear-gradient(90deg, rgba(198,160,82,0), var(--jw-gold-500), rgba(198,160,82,0));
}

.jw-hero__stats {
  display: flex; flex-wrap: wrap; gap: 0;
  border-top: 1px solid rgba(255,255,255,.13);
  padding-top: 30px;
  max-width: 560px;
}
.jw-hero__stat { padding: 0 30px; border-left: 1px solid rgba(255,255,255,.13); min-width: 0; }
.jw-hero__stat:first-child { padding-left: 0; border-left: 0; }
.jw-hero__stat b {
  display: block; font-size: 30px; font-weight: 800;
  color: #fff; line-height: 1.1; letter-spacing: -.02em;
}
.jw-hero__stat b i { color: var(--jw-gold-400); font-style: normal; font-size: 22px; }
.jw-hero__stat span {
  display: block; font-size: 11.5px; margin-top: 5px;
  text-transform: uppercase; letter-spacing: .1em;
  color: var(--jw-slate-400); font-weight: 600;
}

/* ---------- 8. Trust bar ---------- */
.jw-trust { background: var(--jw-navy-800); padding: 0; }
.jw-trust__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}
.jw-trust__cell {
  padding: 30px 26px;
  border-right: 1px solid rgba(255,255,255,.09);
  display: flex; align-items: flex-start; gap: 16px;
  transition: background var(--jw-t);
}
.jw-trust__cell:last-child { border-right: 0; }
.jw-trust__cell:hover { background: rgba(255,255,255,.04); }
.jw-trust__cell i {
  font-size: 24px; color: var(--jw-gold-500);
  flex: 0 0 auto; margin-top: 2px;
}
.jw-trust__cell h5,
.jw-trust__title {
  color: #fff !important;
  font-size: 14px !important; font-weight: 700;
  margin: 0 0 5px; letter-spacing: 0;
}
.jw-trust__cell p {
  margin: 0; font-size: 12.5px; line-height: 1.55;
  color: #93A4C0;
}

/* ---------- 9. Category cards ---------- */
.jw-cats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.jw-cat {
  display: flex; flex-direction: column;
  background: #fff;
  border: 1px solid var(--jw-line);
  border-radius: var(--jw-r);
  overflow: hidden;
  text-decoration: none !important;
  transition: all var(--jw-t);
  position: relative;
}
.jw-cat::after {
  content: '';
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px; background: var(--jw-gold-500);
  transform: scaleY(0); transform-origin: top;
  transition: transform var(--jw-t);
}
.jw-cat:hover {
  box-shadow: var(--jw-sh-3);
  transform: translateY(-5px);
  border-color: transparent;
}
.jw-cat:hover::after { transform: scaleY(1); }
.jw-cat__img {
  height: 190px;
  background: var(--jw-slate-100);
  background-size: cover; background-position: center;
  transition: transform .6s var(--jw-ease);
  position: relative;
}
.jw-cat:hover .jw-cat__img { transform: scale(1.05); }
.jw-cat__body { padding: 22px 22px 24px; flex: 1; display: flex; flex-direction: column; }
.jw-cat__name {
  font-size: 16.5px; font-weight: 700; color: var(--jw-navy-800);
  margin: 0 0 9px; line-height: 1.35;
  transition: color var(--jw-t);
}
.jw-cat:hover .jw-cat__name { color: var(--jw-gold-600); }
.jw-cat__desc {
  font-size: 13px; color: var(--jw-slate-500);
  line-height: 1.58; margin: 0 0 16px; flex: 1;
}
.jw-cat__more {
  font-size: 12px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--jw-navy-700);
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: auto;
}
.jw-cat__more i { transition: transform var(--jw-t); font-size: 12px; }
.jw-cat:hover .jw-cat__more { color: var(--jw-gold-600); }
.jw-cat:hover .jw-cat__more i { transform: translateX(5px); }
.jw-cat__count {
  position: absolute; top: 12px; right: 12px;
  background: rgba(6,21,48,.82);
  color: #fff; font-size: 11px; font-weight: 700;
  padding: 5px 12px; border-radius: var(--jw-r-pill);
  backdrop-filter: blur(4px);
}

/* ---------- 10. Feature / solution split ---------- */
.jw-split { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.jw-split--rev .jw-split__text { order: 2; }
.jw-split__media {
  border-radius: var(--jw-r-lg);
  overflow: hidden;
  box-shadow: var(--jw-sh-4);
  position: relative;
  background: var(--jw-slate-100);
}
.jw-split__media img { display: block; width: 100%; }
.jw-split__media::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(6,21,48,.24), transparent 55%);
  pointer-events: none;
}

.jw-checklist { list-style: none; padding: 0; margin: 26px 0 0; }
.jw-checklist li {
  position: relative; padding-left: 34px; margin-bottom: 16px;
  font-size: 14.5px; line-height: 1.62; color: var(--jw-slate-700);
}
.jw-checklist li::before {
  content: '\f00c';
  font-family: 'FontAwesome';
  position: absolute; left: 0; top: 1px;
  width: 21px; height: 21px;
  background: rgba(198,160,82,.14);
  color: var(--jw-gold-600);
  border-radius: 50%;
  font-size: 10px;
  display: flex; align-items: center; justify-content: center;
}
.jw-checklist li b { color: var(--jw-navy-800); font-weight: 700; }

/* ---------- 11. Stats band ---------- */
.jw-stats {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.jw-stat {
  text-align: center; padding: 34px 18px;
  border-radius: var(--jw-r);
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.1);
  transition: all var(--jw-t);
}
.jw-stat:hover { background: rgba(198,160,82,.1); border-color: rgba(198,160,82,.35); transform: translateY(-4px); }
.jw-stat b {
  display: block; font-size: 42px; font-weight: 800;
  color: var(--jw-gold-400); line-height: 1; letter-spacing: -.03em;
  font-family: var(--jw-font-head);
}
.jw-stat span {
  display: block; margin-top: 10px; font-size: 12px;
  text-transform: uppercase; letter-spacing: .12em;
  color: #93A4C0; font-weight: 600;
}

/* ---------- 12. Industry / application tiles ---------- */
.jw-industries { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.jw-industry {
  position: relative; border-radius: var(--jw-r); overflow: hidden;
  min-height: 230px; display: flex; align-items: flex-end;
  background: var(--jw-navy-800);
  text-decoration: none !important;
  transition: all var(--jw-t);
}
.jw-industry__img {
  position: absolute; inset: 0; background-size: cover; background-position: center;
  transition: transform .7s var(--jw-ease);
}
.jw-industry::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(6,21,48,.94) 8%, rgba(6,21,48,.42) 52%, rgba(6,21,48,.16) 100%);
  transition: opacity var(--jw-t);
}
.jw-industry:hover { transform: translateY(-5px); box-shadow: var(--jw-sh-3); }
.jw-industry:hover .jw-industry__img { transform: scale(1.08); }
.jw-industry__body { position: relative; z-index: 2; padding: 22px; width: 100%; }
.jw-industry__body h4 {
  color: #fff !important; font-size: 16.5px !important;
  font-weight: 700; margin: 0 0 6px;
}
.jw-industry__body p { color: #A9B8D2; font-size: 12.5px; margin: 0; line-height: 1.5; }

/* ---------- 13. Process / steps ---------- */
.jw-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; counter-reset: jwstep; }
.jw-step { position: relative; padding-top: 12px; }
.jw-step__num {
  font-family: var(--jw-font-head);
  font-size: 42px; font-weight: 800;
  color: var(--jw-slate-200);
  line-height: 1; margin-bottom: 12px;
  letter-spacing: -.04em;
}
.jw-step h4,
.jw-step__title { font-size: 16px; margin: 0 0 9px; font-weight: 700; }
.jw-step p { font-size: 13.5px; color: var(--jw-slate-500); margin: 0; line-height: 1.65; }
.jw-step::before {
  content: ''; position: absolute; top: 36px; left: 50px; right: -28px;
  height: 1px;
  background: repeating-linear-gradient(90deg, var(--jw-slate-300) 0 6px, transparent 6px 12px);
}
.jw-step:last-child::before { display: none; }

/* ---------- 14. Testimonial / quote ---------- */
.jw-quote {
  background: #fff; border: 1px solid var(--jw-line);
  border-radius: var(--jw-r-lg);
  padding: 40px 44px;
  position: relative;
  box-shadow: var(--jw-sh-1);
}
.jw-quote::before {
  content: '\201C';
  position: absolute; top: 10px; left: 30px;
  font-size: 92px; line-height: 1;
  color: var(--jw-gold-300);
  font-family: Georgia, serif;
}
.jw-quote p {
  font-size: 17px; line-height: 1.78; color: var(--jw-slate-700);
  margin: 0 0 22px; position: relative; font-style: italic;
}
.jw-quote__by { display: flex; align-items: center; gap: 14px; }
.jw-quote__av {
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--jw-navy-800); color: var(--jw-gold-400);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 17px;
}
.jw-quote__by b { display: block; font-size: 14px; color: var(--jw-navy-800); }
.jw-quote__by span { display: block; font-size: 12.5px; color: var(--jw-slate-400); }

/* ---------- 15. CTA band ---------- */
.jw-cta {
  position: relative; overflow: hidden;
  background: linear-gradient(115deg, var(--jw-navy-900) 0%, var(--jw-navy-700) 55%, var(--jw-navy-600) 100%);
  padding: 72px 0;
}
.jw-cta::before {
  content: ''; position: absolute; right: -120px; top: -120px;
  width: 460px; height: 460px; border-radius: 50%;
  background: radial-gradient(circle, rgba(198,160,82,.2), transparent 68%);
}
.jw-cta__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 40px; position: relative; z-index: 2; flex-wrap: wrap;
}
.jw-cta h2 { color: #fff !important; font-size: 31px; margin: 0 0 12px; }
.jw-cta p { color: #B4C2D9; font-size: 15.5px; margin: 0; max-width: 610px; line-height: 1.68; }
.jw-cta__actions { display: flex; gap: 14px; flex-wrap: wrap; }

/* ---------- 16. Inquiry form ---------- */
.jw-form-panel {
  background: #fff;
  border: 1px solid var(--jw-line);
  border-radius: var(--jw-r-lg);
  padding: 38px;
  box-shadow: var(--jw-sh-3);
}
.jw-form-panel__head { margin-bottom: 26px; }
.jw-form-panel__head h3 { font-size: 22px; margin: 0 0 8px; }
.jw-form-panel__head p { font-size: 13.5px; color: var(--jw-slate-500); margin: 0; }

.jw-field { margin-bottom: 17px; }
.jw-field label {
  display: block; font-size: 12.5px; font-weight: 700;
  color: var(--jw-navy-800); margin-bottom: 7px;
  letter-spacing: .02em;
}
.jw-field label .req { color: var(--jw-price); margin-left: 3px; }
.jw-field .form-control {
  height: 46px; border: 1.5px solid var(--jw-slate-200);
  border-radius: var(--jw-r-sm); box-shadow: none;
  font-size: 14px; color: var(--jw-ink);
  transition: all var(--jw-t); background: #fff;
}
.jw-field textarea.form-control { height: auto; min-height: 118px; resize: vertical; padding-top: 12px; }
.jw-field .form-control:focus {
  border-color: var(--jw-navy-600);
  box-shadow: 0 0 0 3px rgba(27,63,121,.1);
}
.jw-field .form-control::placeholder { color: var(--jw-slate-400); }
.jw-field .jw-privacy { font-size: 11.5px; color: var(--jw-slate-400); margin: 12px 0 0; line-height: 1.55; }

/* Contact info list */
.jw-contact-list { list-style: none; padding: 0; margin: 0; }
.jw-contact-list li {
  display: flex; gap: 16px; padding: 18px 0;
  border-bottom: 1px solid var(--jw-line);
}
.jw-contact-list li:last-child { border-bottom: 0; }
.jw-contact-list i {
  width: 42px; height: 42px; flex: 0 0 42px;
  border-radius: 50%; background: var(--jw-slate-100);
  color: var(--jw-navy-700);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
}
.jw-contact-list b {
  display: block; font-size: 11.5px; text-transform: uppercase;
  letter-spacing: .09em; color: var(--jw-slate-400);
  font-weight: 700; margin-bottom: 4px;
}
.jw-contact-list span, .jw-contact-list a {
  font-size: 14.5px; color: var(--jw-navy-800);
  font-weight: 600; line-height: 1.5; word-break: break-word;
}
.jw-contact-list a:hover { color: var(--jw-gold-600); }

/* ---------- 17. Product cards ---------- */
.product-thumb {
  border: 1px solid var(--jw-line) !important;
  border-radius: var(--jw-r) !important;
  background: #fff;
  overflow: hidden;
  transition: all var(--jw-t);
  margin-bottom: 24px;
}
.product-thumb:hover {
  box-shadow: var(--jw-sh-3) !important;
  transform: translateY(-5px);
  border-color: transparent !important;
}
.product-thumb .image { padding: 0 !important; background: var(--jw-slate-100); position: relative; overflow: hidden; }
.product-thumb .image a { display: block; }
.product-thumb .image img {
  width: 100%; height: auto; display: block;
  transition: transform .6s var(--jw-ease);
}
.product-thumb:hover .image img { transform: scale(1.06); }
.product-thumb .caption {
  padding: 20px 20px 22px !important;
  background: #fff !important;
  display: flex; flex-direction: column;
}
.product-thumb .caption h4,
.product-thumb .caption h3 { margin: 0 0 10px !important; min-height: 0 !important; }
.product-thumb .caption h4 a,
.product-thumb .caption h3 a {
  color: var(--jw-navy-800) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1.45 !important;
  white-space: normal !important;
  display: block !important;
  transition: color var(--jw-t);
}
.product-thumb:hover .caption h4 a,
.product-thumb:hover .caption h3 a { color: var(--jw-gold-600) !important; }
/* 卡片正文不再展示描述文字（产品描述含视频/HTML 片段，截图会出现乱码），
   只保留 标题 + 型号 + 按钮；用 min-height 保证网格高度一致，按钮贴底。 */
.product-thumb .caption { flex: 1 1 auto; }
.product-thumb .caption h4,
.product-thumb .caption h3 { flex: 0 0 auto; }
.product-thumb .price {
  color: var(--jw-navy-800) !important;
  font-size: 16px !important; font-weight: 700 !important;
  margin: 0 0 14px !important;
}
.product-thumb .price-new { color: var(--jw-price) !important; }
.product-thumb .price-old { color: var(--jw-slate-400); font-size: 13px; font-weight: 400; text-decoration: line-through; }

/* Inquiry button on cards */
.product-thumb .button-group { margin-top: auto; border-top: 0 !important; display: flex; gap: 8px; }
.product-thumb .button-group button,
.product-thumb .button-group .btn {
  flex: 1;
  background: var(--jw-navy-800) !important;
  border: 1px solid var(--jw-navy-800) !important;
  color: #fff !important;
  border-radius: var(--jw-r-sm) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: 11px 10px !important;
  transition: all var(--jw-t);
}
.product-thumb .button-group button:hover,
.product-thumb .button-group .btn:hover {
  background: var(--jw-gold-500) !important;
  border-color: var(--jw-gold-500) !important;
  color: var(--jw-navy-900) !important;
}
.product-thumb .button-group button i { margin-right: 6px; }

.product-wrapper { display: flex; flex-wrap: wrap; align-items: stretch; }
.product-wrapper .product-layout { display: flex !important; flex-direction: column; height: auto !important; margin-bottom: 0; }
.product-wrapper .product-thumb { height: 100%; display: flex; flex-direction: column; width: 100%; }
.product-wrapper .product-thumb .caption { height: 100%; }

/* ---------- 18. Section heading with link ---------- */
.jw-sec-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; margin-bottom: 44px; flex-wrap: wrap;
}
.jw-sec-head__text { max-width: 660px; }
.jw-sec-head .jw-title { margin-bottom: 12px; }
.jw-link-arrow {
  font-size: 13px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--jw-navy-700);
  display: inline-flex; align-items: center; gap: 9px;
  padding-bottom: 4px; border-bottom: 2px solid var(--jw-gold-500);
  white-space: nowrap;
}
.jw-link-arrow:hover { color: var(--jw-gold-600); }
.jw-link-arrow i { transition: transform var(--jw-t); font-size: 12px; }
.jw-link-arrow:hover i { transform: translateX(5px); }

/* ---------- 19. Breadcrumb ---------- */
.breadcrumb {
  background: transparent !important;
  padding: 20px 0 !important;
  border-bottom: 1px solid var(--jw-line) !important;
  margin: 0 0 32px !important;
  font-size: 13px;
  border-radius: 0;
}
.breadcrumb li a { color: var(--jw-slate-500); }
.breadcrumb li a:hover { color: var(--jw-gold-600); }
.breadcrumb > li + li::before { color: var(--jw-slate-300); content: '/'; padding: 0 9px; }

/* ---------- 20. Sidebar ---------- */
#column-left .list-group, #column-right .list-group { border-radius: var(--jw-r); overflow: hidden; box-shadow: var(--jw-sh-1); margin-bottom: 26px; }
.list-group-item {
  border-color: var(--jw-line) !important;
  font-size: 13.5px;
  padding: 12px 18px;
  color: var(--jw-slate-700);
  transition: all var(--jw-t);
}
.list-group-item:hover, .list-group-item.active {
  background: var(--jw-slate-100) !important;
  color: var(--jw-navy-700) !important;
  border-left: 3px solid var(--jw-gold-500) !important;
}
#column-left h3, #column-right h3,
#column-left .box-heading, #column-right .box-heading {
  font-size: 14px !important;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 700;
  color: var(--jw-navy-800) !important;
  padding: 14px 18px;
  background: var(--jw-slate-100);
  border-radius: var(--jw-r) var(--jw-r) 0 0;
  margin: 0;
}

/* ---------- 21. Product detail ---------- */
.product-info h2, #content h1 { letter-spacing: -.02em; }
.product-info .price, .product-info .price-new { color: var(--jw-price) !important; font-weight: 700; }
.nav-tabs { border-bottom: 2px solid var(--jw-line); }
.nav-tabs > li > a {
  border: 0 !important; border-radius: 0 !important;
  font-size: 14px; font-weight: 600;
  color: var(--jw-slate-500);
  padding: 13px 22px;
  margin: 0;
  position: relative;
}
.nav-tabs > li > a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -2px;
  height: 2px; background: var(--jw-gold-500);
  transform: scaleX(0); transition: transform var(--jw-t);
}
.nav-tabs > li.active > a, .nav-tabs > li > a:hover {
  background: transparent !important;
  color: var(--jw-navy-800) !important;
  border: 0 !important;
}
.nav-tabs > li.active > a::after, .nav-tabs > li > a:hover::after { transform: scaleX(1); }

#button-cart, #button-inquiry {
  background: var(--jw-gold-500) !important;
  border: 1px solid var(--jw-gold-500) !important;
  color: var(--jw-navy-900) !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: .05em;
  border-radius: var(--jw-r-sm) !important;
  padding: 13px 30px !important;
  transition: all var(--jw-t);
}
#button-cart:hover, #button-inquiry:hover {
  background: var(--jw-gold-400) !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(198,160,82,.36);
}

/* ---------- 22. Footer ---------- */
footer {
  background: var(--jw-navy-900) !important;
  color: #8E9FB9 !important;
  padding: 0 !important;
  font-size: 13.5px;
  margin-top: 0;
}
footer .jw-foot-main { padding: 68px 0 48px; }
footer h5,
footer h4 {
  color: #fff !important;
  font-size: 13px !important;
  text-transform: uppercase;
  letter-spacing: .13em;
  font-weight: 700;
  margin: 0 0 24px !important;
  padding: 0 0 14px !important;
  border-bottom: 1px solid rgba(255,255,255,.1) !important;
  display: block !important;
  position: relative;
}
footer h5::after,
footer h4::after {
  content: ''; position: absolute; left: 0; bottom: -1px;
  width: 40px; height: 2px; background: var(--jw-gold-500);
}
footer a { color: #8E9FB9 !important; transition: all var(--jw-t); }
footer a:hover { color: var(--jw-gold-400) !important; padding-left: 4px; }
footer p { color: #8E9FB9; line-height: 1.72; }
footer ul.list-unstyled li { margin-bottom: 11px; }
footer ul.list-unstyled li a { display: inline-block; }
footer .jw-foot-brand { display: flex; align-items: center; gap: 13px; margin-bottom: 20px; }
footer .jw-foot-brand .jw-brand__mark { background: rgba(255,255,255,.07); }
footer .jw-foot-brand b { color: #fff; font-size: 17px; font-weight: 800; display: block; line-height: 1.2; }
footer .jw-foot-brand small { color: var(--jw-gold-400); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; }

.jw-newsletter { display: flex; margin-top: 16px; }
.jw-newsletter input {
  flex: 1; height: 46px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  border-right: 0;
  border-radius: var(--jw-r-sm) 0 0 var(--jw-r-sm);
  color: #fff; padding: 0 16px; font-size: 13.5px;
  outline: none; transition: all var(--jw-t);
}
.jw-newsletter input::placeholder { color: #6C7F9C; }
.jw-newsletter input:focus { background: rgba(255,255,255,.1); border-color: rgba(198,160,82,.5); }
.jw-newsletter button {
  height: 46px; padding: 0 24px;
  background: var(--jw-gold-500); border: 0;
  border-radius: 0 var(--jw-r-sm) var(--jw-r-sm) 0;
  color: var(--jw-navy-900); font-weight: 700; font-size: 13px;
  text-transform: uppercase; letter-spacing: .05em;
  cursor: pointer; transition: all var(--jw-t);
}
.jw-newsletter button:hover { background: var(--jw-gold-400); }

.jw-foot-contact li { display: flex; gap: 13px; margin-bottom: 16px; align-items: flex-start; }
.jw-foot-contact i {
  color: var(--jw-gold-500); font-size: 15px;
  width: 18px; text-align: center; margin-top: 3px; flex: 0 0 18px;
}
.jw-foot-contact span { line-height: 1.6; color: #8E9FB9; }

footer hr { border-color: rgba(255,255,255,.08) !important; margin: 0 !important; }
.jw-foot-bottom {
  padding: 22px 0;
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
  font-size: 12.5px;
}
.jw-foot-bottom p { margin: 0; }
.jw-foot-soc { display: flex; gap: 10px; }
.jw-foot-soc a {
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255,255,255,.06);
  display: flex !important; align-items: center; justify-content: center;
  font-size: 15px; padding: 0 !important;
}
.jw-foot-soc a:hover { background: var(--jw-gold-500); color: var(--jw-navy-900) !important; padding: 0 !important; }

.jw-foot-certs { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 18px; }
.jw-foot-certs span {
  font-size: 10.5px; font-weight: 700; letter-spacing: .07em;
  padding: 6px 12px; border-radius: var(--jw-r-sm);
  border: 1px solid rgba(255,255,255,.15);
  color: #A3B3CC;
}

/* ---------- 23. Floating contact rail ---------- */
.jw-rail {
  position: fixed; right: 18px; bottom: 90px; z-index: 900;
  display: flex; flex-direction: column; gap: 10px;
}
.jw-rail a {
  width: 50px; height: 50px; border-radius: 50%;
  background: #fff; color: var(--jw-navy-700);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
  box-shadow: var(--jw-sh-2);
  border: 1px solid var(--jw-line);
  transition: all var(--jw-t);
  text-decoration: none !important;
}
.jw-rail a:hover { transform: translateY(-3px) scale(1.06); box-shadow: var(--jw-sh-3); }
.jw-rail a.jw-rail--wa { background: #25D366; color: #fff; border-color: #25D366; }
.jw-rail a.jw-rail--wa:hover { background: #1EBE57; }
.jw-rail a.jw-rail--top { background: var(--jw-navy-800); color: #fff; border-color: var(--jw-navy-800); opacity: 0; pointer-events: none; }
.jw-rail a.jw-rail--top.is-on { opacity: 1; pointer-events: auto; }

/* ---------- 24. Back to top ---------- */
.jw-top {
  position: fixed; right: 18px; bottom: 24px; z-index: 899;
  width: 50px; height: 50px; border-radius: 50%;
  background: var(--jw-gold-500); color: var(--jw-navy-900);
  border: 0; font-size: 17px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--jw-sh-3); cursor: pointer;
  opacity: 0; pointer-events: none;
  transition: all var(--jw-t);
}
.jw-top.is-on { opacity: 1; pointer-events: auto; }
.jw-top:hover { background: var(--jw-gold-400); transform: translateY(-3px); }

/* ---------- 24b. WeChat rail button + QR popover ---------- */
.jw-rail a.jw-rail--wechat { background: #07C160; color: #fff; border-color: #07C160; }
.jw-rail a.jw-rail--wechat:hover { background: #06AD56; }

.jw-wechat-qr {
  position: fixed; right: 86px; bottom: 118px; z-index: 900;
  padding: 14px 14px 10px;
  background: #fff; border-radius: 14px;
  box-shadow: 0 18px 46px rgba(6, 21, 48, .22);
  border: 1px solid var(--jw-line, #E4E9F2);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  opacity: 0; visibility: hidden; transform: translateY(8px) scale(.96);
  transform-origin: bottom right;
  transition: opacity var(--jw-t), transform var(--jw-t), visibility var(--jw-t);
}
.jw-wechat-qr.is-open { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
.jw-wechat-qr img { display: block; border-radius: 8px; }
.jw-wechat-qr span {
  font-size: 12px; font-weight: 600; letter-spacing: .04em;
  color: var(--jw-navy-800); white-space: nowrap;
}

/* ---------- 25. Responsive ---------- */
@media (max-width: 1199px) {
  .jw-hero h1, .jw-hero h2.hw-h1 { font-size: 42px; }
  .jw-hero__grid { gap: 40px; }
  .jw-hero__frame img { height: 300px; }
  .jw-cats, .jw-industries { grid-template-columns: repeat(3, 1fr); }
  .jw-trust__grid { grid-template-columns: repeat(2, 1fr); }
  .jw-trust__cell:nth-child(2) { border-right: 0; }
  .jw-trust__cell:nth-child(-n+2) { border-bottom: 1px solid rgba(255,255,255,.09); }
  .jw-head-cta__item { padding: 0 12px; }
}

@media (max-width: 991px) {
  .jw-section { padding: 60px 0; }
  .jw-title { font-size: 27px; }
  .jw-hero { min-height: 0; }
  .jw-hero h1, .jw-hero h2.hw-h1 { font-size: 36px; max-width: none; }
  .jw-hero__lead { font-size: 15.5px; max-width: none; }
  /* Stack to one column: copy first, product panel beneath. */
  .jw-hero__grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .jw-hero__figure { order: 2; }
  .jw-hero__frame { padding: 14px; }
  .jw-hero__frame img { height: 260px; }
  .jw-hero__stats { max-width: none; }
  .jw-split { grid-template-columns: 1fr; gap: 38px; }
  .jw-split--rev .jw-split__text { order: 0; }
  .jw-steps { grid-template-columns: repeat(2, 1fr); }
  .jw-step::before { display: none; }
  .jw-stats { grid-template-columns: repeat(2, 1fr); }
  .jw-head-cta__item:not(:first-child) { display: none; }

  /* Legacy <768px rules (icon-only "About  About  Contact  Contact" etc.) */
  #top .btn-link { display: none !important; }
  #top .welcome-text { display: none !important; }
  #top .dropdown.pull-right { display: none !important; }
  #cart-total { display: none !important; }
  #menu { position: relative; }

  /* --- Mobile navigation ---
     The stock theme renders the menu as a full-screen overlay drawer
     (`.side-menu` is position:fixed with a black scrim, display:none until the
     hamburger opens it). We don't want a drawer on phones, so the overlay is
     neutralised into a normal in-flow bar holding a horizontally scrollable
     row of real category links. */
  #menu .navbar-header { display: none !important; }

  #menu .side-menu {
    position: static !important;
    display: block !important;
    background: var(--jw-navy-800) !important;
    cursor: default !important;
    inset: auto !important;
    z-index: auto !important;
  }
  #menu .side-inner {
    position: static !important;
    transform: none !important;
    -webkit-transform: none !important;
    -ms-transform: none !important;
    box-shadow: none !important;
    background: var(--jw-navy-800) !important;
    padding: 0 !important;
    overflow: visible !important;
    width: auto !important;
    max-width: none !important;
  }
  #menu .side-inner::before,
  #menu .side-inner::after { display: none !important; }
  #menu .side-title { display: none !important; }
  #menu .side-menu #search { display: none !important; }

  /* Single-row scroller. The desktop rule leaves `overflow-x:auto` on, so the
     element must stay flex or it collapses to a 0-height strip. */
  #menu .container { display: block; }
  #menu ul.nav.navbar-nav {
    display: flex !important;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    height: auto;
    margin: 0;
    padding: 0;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
  }
  #menu ul.nav.navbar-nav > li {
    flex: 0 0 auto;
    float: none;
    border-bottom: 0 !important;
    scroll-snap-align: start;
  }
  #menu .nav > li > a {
    padding: 13px 14px !important;
    font-size: 13px !important;
    white-space: nowrap;
  }
  #menu .nav > li > a::after { display: none; }
  #menu .nav > li > a i.fa-angle-down { display: none; }
  #menu .toggle-button { display: none !important; }

  /* Dropdown menus open inline instead of as floating panels. */
  #menu .dropdown-menu {
    position: static !important;
    float: none !important;
    display: none;
    box-shadow: none !important;
    border: 0 !important;
    background: rgba(0,0,0,.18) !important;
    padding: 4px 0 !important;
    margin: 0 !important;
  }
  #menu .dropdown.open > .dropdown-menu { display: block; }
  #menu .dropdown-menu > li { border-bottom: 0 !important; }
  #menu .dropdown-menu > li > a {
    color: rgba(255,255,255,.82) !important;
    padding: 9px 22px !important;
    font-size: 13px !important;
    white-space: normal;
  }
}

@media (max-width: 767px) {
  body { font-size: 14.5px; }
  h1 { font-size: 27px; }
  h2 { font-size: 23px; }
  .jw-section { padding: 48px 0; }
  .jw-title { font-size: 23px; }
  .jw-sub { font-size: 14.5px; }
  .jw-hero { min-height: auto; }
  .jw-hero__inner { padding: 56px 0 52px; }
  .jw-hero h1, .jw-hero h2.hw-h1 { font-size: 28px; }
  .jw-hero__lead { font-size: 14.5px; margin-bottom: 28px; }
  .jw-hero__eyebrow { font-size: 10px; letter-spacing: .12em; padding: 7px 13px; margin-bottom: 20px; }
  .jw-hero__actions { margin-bottom: 36px; }
  .jw-hero__frame img { height: 220px; }
  .jw-hero__stats { padding-top: 24px; }
  /* 2x2 stat grid; without min-width:0 the grid item cannot shrink below its
     max-content width and pushes the row past the viewport. */
  .jw-hero__stat { flex: 1 0 50%; min-width: 0; padding: 12px 12px; border-left: 0; }
  .jw-hero__stat:first-child { padding-left: 0; }
  .jw-hero__stat b { font-size: 25px; }
  .jw-hero__stat span { white-space: normal; overflow-wrap: anywhere; }
  .jw-cats, .jw-industries { grid-template-columns: 1fr; }
  .jw-trust__grid { grid-template-columns: 1fr; }
  .jw-trust__cell { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.09); }
  .jw-stats, .jw-steps { grid-template-columns: 1fr; }
  .jw-sec-head { flex-direction: column; align-items: flex-start; }
  .jw-cta__inner { flex-direction: column; align-items: flex-start; }
  .jw-cta h2 { font-size: 24px; }
  .jw-form-panel { padding: 26px 20px; }
  .jw-quote { padding: 30px 24px; }
  .jw-quote p { font-size: 15px; }
  .jw-rail { right: 12px; bottom: 74px; }
  .jw-rail a { width: 44px; height: 44px; font-size: 17px; }
  .jw-top { right: 12px; bottom: 18px; width: 44px; height: 44px; }
  footer .jw-foot-main { padding: 44px 0 30px; }
  .jw-foot-bottom { flex-direction: column; text-align: center; }
}

/* ---------- 26. Legacy cleanup ---------- */
#top .container > .row { display: flex; align-items: center; }
.welcome-text strong { color: var(--jw-gold-400); }
.jw-noscroll { overflow: hidden; }
.box .box-heading { margin-bottom: 0; }

/* ---------- 27. Header / hero hardening ----------
   Fixes found by visual QA:
   a) the legacy theme set a fixed page width that made the layout wider than
      the viewport on phones, clipping hero text ("EXPORT COUNTRIE…")
   b) the hero scrim was too light over the right half, so the white H1 lost
      contrast against bright machinery photography
   c) the hero was taller than it needed to be, pushing the fold down
*/
html, body { max-width: 100%; overflow-x: hidden; }

/* The stock theme hard-codes widths on these wrappers; neutralise them so the
   Bootstrap container governs layout at every breakpoint.
   NOTE: do NOT set `max-width:100%` on `.container` — a block with
   `width:100%` plus `max-width:100%` fills its parent exactly, so Bootstrap's
   `margin:0 auto` resolves to 0 and the container sticks to the left edge
   instead of being centred. Use `width` + `margin-inline:auto` instead. */
#container, #content, #column-left, #column-right { max-width: 100%; }
.container {
  margin-left: auto;
  margin-right: auto;
  padding-left: 15px;
  padding-right: 15px;
}
@media (min-width: 1200px) {
  .container { width: 1200px; max-width: 1200px; }
}

/* Grid children must be allowed to shrink, otherwise long unbroken strings
   (emails, phone numbers, long product titles) force horizontal overflow. */
.row > [class*="col-"] { min-width: 0; }
.jw-head-cta__val, .jw-brand, footer a { word-break: break-word; }

/* --- Header logo sizing ---
   config_logo is now an 840x176 @2x PNG, so cap by height and let width float. */
#logo img {
  max-height: 54px !important;
  width: auto !important;
  display: block;
}
@media (max-width: 767px) {
  #logo img { max-height: 38px !important; }
}

/* --- Hero contrast + height --- */
.jw-hero {
  min-height: 560px !important;
  max-width: 100vw;
  /* Sit below the sticky nav in the paint order so the two never merge. */
  position: relative;
  z-index: 1;
}
/* A hairline gold rule marks the boundary between nav and hero. */
#menu::after {
  content: '';
  display: block;
  height: 2px;
  background: linear-gradient(90deg,
    rgba(198,160,82,0) 0%,
    rgba(198,160,82,.55) 18%,
    rgba(198,160,82,.55) 82%,
    rgba(198,160,82,0) 100%);
}
/* Extra top padding so the copy clears the nav and sits lower in the frame. */
.jw-hero__inner {
  padding: 96px 0 72px !important;
  max-width: 100%;
}
.jw-hero h1,
.jw-hero h2.hw-h1 {
  text-wrap: balance;
  text-shadow: 0 2px 22px rgba(3,10,24,.55);
}
.jw-hero__lead { text-shadow: 0 1px 12px rgba(3,10,24,.5); }

@media (max-width: 991px) {
  .jw-hero { min-height: 0 !important; }
  .jw-hero__inner { padding: 62px 0 58px !important; }
  .jw-hero h1, .jw-hero h2.hw-h1 { max-width: none; }
}
@media (max-width: 767px) {
  .jw-hero { min-height: 0 !important; }
  .jw-hero__inner { padding: 44px 0 40px !important; }
  .jw-hero h1, .jw-hero h2.hw-h1 { font-size: 27px !important; line-height: 1.25; }
  .jw-hero__lead { font-size: 14px !important; }
  .jw-hero__actions { gap: 10px; margin-bottom: 30px !important; }
  .jw-hero__actions .jw-btn { flex: 1 1 100%; justify-content: center; }
  .jw-hero__frame { padding: 11px; border-radius: 14px; }
  .jw-hero__frame img { height: 190px; }
  .jw-hero__stats { flex-wrap: wrap; gap: 0 !important; }
  .jw-hero__stat b { font-size: 22px !important; }
  .jw-hero__stat span { font-size: 11px !important; }
}

/* --- Container gutters on small screens --- */
@media (max-width: 767px) {
  .container { padding-left: 16px; padding-right: 16px; }
}

/* --- Legacy pre-/post-header strips that overflow on phones --- */
.jw-head-cta, .jw-head-cta__item { min-width: 0; }
@media (max-width: 991px) {
  .jw-head-cta__val { font-size: 12.5px; }
  .jw-head-cta__item { padding: 0 10px; }
}

/* ---------- 28. Mobile overflow guard ----------
   Visual QA at 390px showed hero copy and the stat row clipped at the right
   edge while the document scrolled sideways. Legacy theme rules apply fixed
   widths to a handful of wrappers; these overrides keep every block inside
   the viewport without touching the desktop layout. */
@media (max-width: 767px) {
  img, video, iframe, table { max-width: 100%; }
  .jw-btn { max-width: 100%; }
  .jw-hero, .jw-section, .jw-trust, .jw-stats, .jw-steps, .jw-split, .jw-cats,
  .jw-industries, .jw-quote, .jw-cta__inner, .jw-form-panel, .jw-sec-head,
  .jw-sec-head > div, .jw-hero__inner, .jw-hero__grid, .jw-hero__copy,
  .jw-hero__figure, .jw-hero__frame, .jw-hero__actions,
  .jw-hero__stats, .jw-trust__grid, .jw-trust__cell, .jw-foot-main,
  .jw-foot-main .row, .jw-foot-main [class*="col-"], .jw-foot-bottom {
    min-width: 0;
    max-width: 100%;
  }
  /* Decorative circles were sized in screen pixels, not relative units. */
  .jw-cta__wire { max-width: 100% !important; height: auto !important; aspect-ratio: 1 / 1; }
  .jw-quote::before, .jw-quote::after { max-width: 100%; }
  /* Long unbroken strings (emails / urls / phone numbers) */
  .jw-hero__lead, .jw-hero h1, .jw-trust__cell p, .jw-quote p,
  footer a, footer p, .jw-head-cta__val {
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  /* Any residual horizontal travel is clipped rather than showing a scrollbar. */
  html, body { overflow-x: hidden; }
}

/* Sections that bleed to the edges must never widen the document. */
.jw-split, .jw-cats, .jw-industries, .jw-trust__grid, .jw-stats, .jw-steps {
  max-width: 100%;
}

/* ---------- 29. Stat row rhythm on phones ---------- */
@media (max-width: 575px) {
  .jw-hero__stats { border-top-color: rgba(255,255,255,.16); }
  .jw-hero__stat { flex: 1 0 50%; padding: 14px 10px 14px 0; }
  .jw-hero__stat:nth-child(odd) { padding-right: 14px; }
  .jw-hero__stat b { font-size: 20px !important; }
  .jw-hero__stat span { font-size: 10px !important; letter-spacing: .06em; }
}


/* ==========================================================================
   30. Category / listing page — modern layout
   Replaces the stock Bootstrap look: light header card, tile grid for
   sub-categories, a real toolbar, and evenly-stretched cards.
   ========================================================================== */

/* ---- 30.1 Page shell ------------------------------------------------- */
.jw-cat-page { padding-top: 26px; }
.jw-cat-page .breadcrumb { margin-bottom: 22px !important; }

/* ---- 30.2 Page header ------------------------------------------------- */
.jw-cat-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 32px;
  align-items: center;
  padding: 30px 34px;
  margin-bottom: 34px;
  border-radius: var(--jw-r-lg);
  border: 1px solid var(--jw-line);
  background:
    radial-gradient(ellipse 60% 120% at 100% 0%, rgba(198,160,82,.10), transparent 62%),
    linear-gradient(180deg, #FFFFFF 0%, var(--jw-bg-soft) 100%);
  box-shadow: var(--jw-sh-1);
}
.jw-cat-head__title {
  margin: 0 0 12px !important;
  font-family: var(--jw-font-head);
  font-size: 30px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  letter-spacing: -.015em;
  color: var(--jw-navy-800) !important;
  position: relative;
  padding-bottom: 14px;
}
.jw-cat-head__title::after {
  content: ''; position: absolute; left: 0; bottom: 0;
  width: 54px; height: 3px; border-radius: 3px;
  background: linear-gradient(90deg, var(--jw-gold-500), var(--jw-gold-300));
}
.jw-cat-head__desc {
  font-size: 14.5px;
  line-height: 1.78;
  color: var(--jw-slate-700);
  max-width: 76ch;
}
.jw-cat-head__desc p { margin: 0 0 10px; }
.jw-cat-head__desc p:last-child { margin-bottom: 0; }
.jw-cat-head__thumb {
  width: 168px; height: 168px;
  display: grid; place-items: center;
  padding: 12px;
  border-radius: var(--jw-r);
  background: #fff;
  border: 1px solid var(--jw-line);
  box-shadow: var(--jw-sh-2);
  flex: none;
}
.jw-cat-head__thumb img {
  max-width: 100%; max-height: 100%;
  width: auto; height: auto;
  object-fit: contain; display: block;
}

/* ---- 30.3 Sub-category tiles ----------------------------------------- */
.jw-subcats { margin-bottom: 40px; }
.jw-subcats__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--jw-line);
}
.jw-subcats__title {
  margin: 0 !important;
  font-family: var(--jw-font-head);
  font-size: 19px !important; font-weight: 700 !important;
  color: var(--jw-navy-800) !important;
  letter-spacing: -.01em;
}
.jw-subcats__count {
  font-size: 12px; font-weight: 600;
  color: var(--jw-slate-400);
  text-transform: uppercase; letter-spacing: .08em;
}
.jw-subcats__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 18px;
}
.jw-subcat {
  display: flex; flex-direction: column;
  padding: 16px 14px 14px;
  border-radius: var(--jw-r);
  border: 1px solid var(--jw-line);
  background: #fff;
  text-decoration: none !important;
  transition: all var(--jw-t);
  position: relative;
  overflow: hidden;
}
.jw-subcat::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0;
  height: 3px; background: var(--jw-gold-500);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--jw-t);
}
.jw-subcat:hover {
  border-color: transparent;
  box-shadow: var(--jw-sh-3);
  transform: translateY(-4px);
}
.jw-subcat:hover::before { transform: scaleX(1); }
.jw-subcat__media {
  display: grid; place-items: center;
  height: 118px; margin-bottom: 13px;
  border-radius: var(--jw-r-sm);
  background: var(--jw-slate-100);
  overflow: hidden;
}
.jw-subcat__media img {
  max-width: 88%; max-height: 96px;
  width: auto; height: auto;
  object-fit: contain; display: block;
  transition: transform .5s var(--jw-ease);
}
.jw-subcat:hover .jw-subcat__media img { transform: scale(1.09); }
.jw-subcat__name {
  font-size: 13.5px; font-weight: 700; line-height: 1.45;
  color: var(--jw-navy-800);
  margin-bottom: 8px;
  transition: color var(--jw-t);
}
.jw-subcat:hover .jw-subcat__name { color: var(--jw-gold-600); }
.jw-subcat__cta {
  margin-top: auto;
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .07em;
  color: var(--jw-slate-400);
  transition: color var(--jw-t);
}
.jw-subcat__cta i { margin-left: 3px; transition: transform var(--jw-t); display: inline-block; }
.jw-subcat:hover .jw-subcat__cta { color: var(--jw-gold-600); }
.jw-subcat:hover .jw-subcat__cta i { transform: translateX(3px); }

/* ---- 30.4 Toolbar ----------------------------------------------------- */
.jw-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
  padding: 14px 18px;
  margin-bottom: 26px;
  border-radius: var(--jw-r);
  border: 1px solid var(--jw-line);
  background: var(--jw-bg-soft);
}
.jw-toolbar__left,
.jw-toolbar__right { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }

.jw-viewtoggle {
  display: inline-flex;
  border: 1px solid var(--jw-line);
  border-radius: var(--jw-r-sm);
  overflow: hidden;
  background: #fff;
}
.jw-viewtoggle__btn {
  width: 38px; height: 36px;
  display: grid; place-items: center;
  color: var(--jw-slate-500) !important;
  font-size: 14px;
  text-decoration: none !important;
  border-right: 1px solid var(--jw-line);
  transition: all var(--jw-t);
}
.jw-viewtoggle__btn:last-child { border-right: 0; }
.jw-viewtoggle__btn:hover { background: var(--jw-slate-100); color: var(--jw-navy-800) !important; }
.jw-viewtoggle__btn.is-active {
  background: var(--jw-navy-800) !important;
  color: #fff !important;
}
.jw-toolbar__count {
  font-size: 13px; color: var(--jw-slate-500);
}
.jw-toolbar__count b { color: var(--jw-navy-800); font-weight: 700; }
.jw-toolbar__compare {
  font-size: 13px; font-weight: 600;
  color: var(--jw-gold-600) !important;
  text-decoration: none !important;
  padding: 6px 12px;
  border-radius: var(--jw-r-pill);
  background: rgba(198,160,82,.10);
  transition: all var(--jw-t);
}
.jw-toolbar__compare:hover { background: rgba(198,160,82,.20); }

.jw-select { display: inline-flex; align-items: center; gap: 9px; }
.jw-select__label {
  font-size: 12px; font-weight: 600; margin: 0;
  color: var(--jw-slate-500);
  text-transform: uppercase; letter-spacing: .06em;
  white-space: nowrap;
}
.jw-select__input {
  height: 36px !important;
  padding: 0 30px 0 12px !important;
  border: 1px solid var(--jw-line) !important;
  border-radius: var(--jw-r-sm) !important;
  background-color: #fff !important;
  font-size: 13px !important;
  color: var(--jw-navy-800) !important;
  box-shadow: none !important;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%235C6B85' d='M5 6L0 0h10z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 11px center !important;
  transition: border-color var(--jw-t);
  cursor: pointer;
}
.jw-select__input:focus { border-color: var(--jw-gold-500) !important; outline: none; }

/* ---- 30.5 Product grid ------------------------------------------------ */
.jw-grid-row { margin-bottom: 4px; }
.jw-grid { display: flex; flex-wrap: wrap; align-items: stretch; margin: 0 -15px; }
.jw-grid .product-layout {
  display: flex !important;
  flex-direction: column;
  height: auto !important;
  margin-bottom: 30px;
  padding: 0 15px;
}
.jw-grid .product-thumb { height: 100%; display: flex; flex-direction: column; width: 100%; }
.jw-grid .product-thumb .caption { height: 100%; }
/* The stock theme puts an 80px inline image beside the text; our cards are
   vertical, so force a full-width media box. */
.jw-grid .product-thumb .image {
  background: linear-gradient(180deg, #FFFFFF 0%, var(--jw-slate-100) 100%);
  border-bottom: 1px solid var(--jw-line);
}
.jw-grid .product-thumb .image img {
  width: 100%; height: 236px;
  object-fit: contain;
  padding: 14px;
}

/* Card polish */
.jw-grid .product-thumb {
  border-radius: var(--jw-r-lg) !important;
  box-shadow: var(--jw-sh-1);
}
.jw-grid .product-thumb:hover { box-shadow: var(--jw-sh-3) !important; }
.jw-grid .product-thumb .caption { padding: 18px 18px 20px !important; }
.jw-grid .product-thumb .caption h4 a {
  font-size: 14.5px !important;
  line-height: 1.48 !important;
  /* Clamp long titles to 3 lines so every card keeps the same rhythm. */
  display: -webkit-box !important;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden !important;
  min-height: 0 !important;
}
.jw-grid .product-thumb .caption p {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 14px !important;
}
.jw-grid .product-thumb .button-group button,
.jw-grid .product-thumb .button-group .btn {
  padding: 12px 10px !important;
  border-radius: var(--jw-r-sm) !important;
}

/* ---- 30.6 List view --------------------------------------------------- */
.jw-grid.is-list { display: block; }
.jw-grid.is-list .product-layout { display: block !important; margin-bottom: 20px; }
.jw-grid.is-list .product-thumb {
  flex-direction: row; align-items: stretch;
  overflow: visible;
}
.jw-grid.is-list .product-thumb .image {
  width: 230px; flex: 0 0 230px;
  border-bottom: 0; border-right: 1px solid var(--jw-line);
  display: grid; place-items: center;
  align-self: stretch;
}
.jw-grid.is-list .product-thumb .image a { width: 100%; display: grid; place-items: center; }
.jw-grid.is-list .product-thumb .image img { height: 180px; padding: 12px; }
.jw-grid.is-list .product-thumb .caption {
  flex: 1 1 auto; min-width: 0;
  display: flex; flex-direction: column; justify-content: center;
  padding: 22px 26px !important;
}
.jw-grid.is-list .product-thumb .caption h4 { margin-bottom: 12px !important; }
.jw-grid.is-list .product-thumb .caption h4 a {
  font-size: 17px !important;
  -webkit-line-clamp: 2;
}
.jw-grid.is-list .product-thumb .caption p {
  -webkit-line-clamp: 2;
  font-size: 13.5px !important;
  flex-grow: 0;
  margin-bottom: 18px !important;
}
/* Keep the CTA inline and left-aligned in list mode instead of stretching it
   across the whole row.
   NOTE: the stock theme hides the CTA in list view via
   `.product-list .product-thumb .button-group { display: none }`, so we must
   explicitly turn it back on. */
.jw-grid.is-list .product-thumb .button-group {
  display: flex !important;
  margin-top: 0;
  max-width: 260px;
}
.jw-grid.is-list .product-thumb .cart-wrapper { display: flex !important; }

/* ---- 30.7 Pagination / results ---------------------------------------- */
.jw-pager-row { margin-top: 10px; }
/* The stock template wraps both blocks in `.col-sm-12.text-right`; centre them
   and give the pager a modern pill treatment. */
.jw-pager-row > div { text-align: center !important; }
.jw-pager-row .pagination {
  display: inline-flex;
  gap: 6px;
  margin: 6px 0 10px !important;
  padding: 0;
  list-style: none;
}
.jw-pager-row .pagination > li { display: inline-flex; }
.jw-pager-row .pagination > li > a,
.jw-pager-row .pagination > li > span {
  display: grid; place-items: center;
  min-width: 38px; height: 38px;
  padding: 0 10px !important;
  border: 1px solid var(--jw-line) !important;
  border-radius: var(--jw-r-sm) !important;
  background: #fff !important;
  color: var(--jw-slate-700) !important;
  font-size: 13px; font-weight: 600;
  text-decoration: none !important;
  transition: all var(--jw-t);
}
.jw-pager-row .pagination > li > a:hover {
  border-color: var(--jw-gold-500) !important;
  color: var(--jw-gold-600) !important;
  background: rgba(198,160,82,.08) !important;
}
.jw-pager-row .pagination > .active > span,
.jw-pager-row .pagination > .active > a,
.jw-pager-row .pagination > .active > span:hover {
  background: var(--jw-navy-800) !important;
  border-color: var(--jw-navy-800) !important;
  color: #fff !important;
  box-shadow: var(--jw-sh-2);
}
.jw-pager-row .pagination > .disabled > span,
.jw-pager-row .pagination > .disabled > a {
  color: var(--jw-slate-300) !important;
  background: var(--jw-bg-soft) !important;
  cursor: not-allowed;
}
.jw-pager-row__meta { color: var(--jw-slate-500); font-size: 13px; text-align: center; }

/* ---- 30.8 Empty state ------------------------------------------------- */
.jw-empty {
  text-align: center; padding: 70px 20px;
  border: 1px dashed var(--jw-slate-300);
  border-radius: var(--jw-r-lg);
  background: var(--jw-bg-soft);
}
.jw-empty i { font-size: 40px; color: var(--jw-slate-300); margin-bottom: 16px; display: block; }
.jw-empty p { font-size: 15px; color: var(--jw-slate-500); margin-bottom: 20px; }

/* ---- 30.9 Sidebar refinement ------------------------------------------ */
.jw-sidebar-card {
  border: 1px solid var(--jw-line);
  border-radius: var(--jw-r-lg);
  background: #fff;
  overflow: hidden;
  box-shadow: var(--jw-sh-1);
}
.jw-sidebar-card__head {
  padding: 15px 18px;
  background: var(--jw-navy-800);
  color: #fff;
  font-family: var(--jw-font-head);
  font-size: 13px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .09em;
}
ul.jw-cat-tree {
  list-style: none !important;
  margin: 0 !important; padding: 8px 0 !important;
  max-height: 640px;
  overflow-y: auto;
}
ul.jw-cat-tree::-webkit-scrollbar { width: 6px; }
ul.jw-cat-tree::-webkit-scrollbar-thumb { background: var(--jw-slate-300); border-radius: 3px; }

.jw-cat-tree__item { border-bottom: 1px solid var(--jw-slate-100); }
.jw-cat-tree__item:last-child { border-bottom: 0; }
.jw-cat-tree__row { display: flex; align-items: center; }
.jw-cat-tree__link {
  flex: 1;
  padding: 11px 8px 11px 18px;
  font-size: 13.5px; font-weight: 600;
  color: var(--jw-slate-700) !important;
  text-decoration: none !important;
  transition: all var(--jw-t);
  position: relative;
}
.jw-cat-tree__link::before {
  content: ''; position: absolute; left: 7px; top: 50%;
  width: 3px; height: 0; border-radius: 2px;
  background: var(--jw-gold-500);
  transform: translateY(-50%);
  transition: height var(--jw-t);
}
.jw-cat-tree__link:hover { color: var(--jw-navy-800) !important; background: var(--jw-slate-100); }
.jw-cat-tree__link:hover::before { height: 16px; }
.jw-cat-tree__item.active > .jw-cat-tree__row > .jw-cat-tree__link {
  color: var(--jw-gold-600) !important;
  background: rgba(198,160,82,.08);
  font-weight: 700;
}
.jw-cat-tree__item.active > .jw-cat-tree__row > .jw-cat-tree__link::before { height: 18px; }

.jw-cat-tree__toggle {
  width: 38px; height: 38px; flex: none;
  display: grid; place-items: center;
  color: var(--jw-slate-400) !important;
  font-size: 12px;
  text-decoration: none !important;
  transition: all var(--jw-t);
}
.jw-cat-tree__toggle:hover { color: var(--jw-gold-600) !important; background: var(--jw-slate-100); }
.jw-cat-tree__toggle i { transition: transform var(--jw-t); }
.jw-cat-tree__toggle[aria-expanded="true"] i { transform: rotate(180deg); }

.jw-cat-tree__sub { list-style: none !important; margin: 0 !important; padding: 0 0 8px !important; background: var(--jw-bg-soft); }
.jw-cat-tree__sub-item > a {
  display: block;
  padding: 8px 12px 8px 32px;
  font-size: 13px;
  color: var(--jw-slate-500) !important;
  text-decoration: none !important;
  transition: all var(--jw-t);
}
.jw-cat-tree__sub-item > a:hover { color: var(--jw-gold-600) !important; padding-left: 36px; }
.jw-cat-tree__sub-item.active > a { color: var(--jw-gold-600) !important; font-weight: 700; }

/* ---- 30.10 Responsive ------------------------------------------------- */
@media (max-width: 1199px) {
  .jw-cat-head { padding: 26px 28px; gap: 26px; }
  .jw-cat-head__title { font-size: 26px !important; }
  .jw-cat-head__thumb { width: 140px; height: 140px; }
  .jw-grid .product-thumb .image img { height: 200px; }
}
@media (max-width: 991px) {
  .jw-cat-head {
    grid-template-columns: minmax(0, 1fr);
    padding: 24px 22px;
  }
  .jw-cat-head__thumb { display: none; }
  .jw-cat-head__title { font-size: 24px !important; }
  .jw-grid .product-thumb .image img { height: 190px; }
  .jw-toolbar { padding: 12px 14px; gap: 14px; }
  /* At tablet widths the sidebar is still shown, so the content column is
     narrow (~546px) - force two roomier tiles per row instead of three tight
     ones that kiss the container edge. */
  .jw-subcats__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .jw-subcat__media { height: 130px; }
  .jw-subcat__media img { max-height: 108px; }
  .jw-grid.is-list .product-thumb { flex-direction: column; }
  .jw-grid.is-list .product-thumb .image {
    width: 100%; border-right: 0; border-bottom: 1px solid var(--jw-line);
  }
  .jw-grid.is-list .product-thumb .image img { height: 210px; }
  .jw-grid.is-list .product-thumb .button-group { max-width: none; }
}
@media (max-width: 767px) {
  .jw-cat-page { padding-top: 16px; }
  .jw-cat-head { margin-bottom: 26px; border-radius: var(--jw-r); }
  .jw-cat-head__title { font-size: 21px !important; padding-bottom: 11px; }
  .jw-cat-head__desc { font-size: 13.5px; line-height: 1.7; }
  .jw-subcats__grid { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 12px; }
  .jw-subcat { padding: 12px 10px 11px; }
  .jw-subcat__media { height: 92px; margin-bottom: 10px; }
  .jw-subcat__media img { max-height: 76px; }
  .jw-subcat__name { font-size: 12.5px; }
  .jw-toolbar { flex-direction: column; align-items: stretch; gap: 12px; }
  .jw-toolbar__left, .jw-toolbar__right { justify-content: space-between; gap: 10px; }
  .jw-select__label { display: none; }
  .jw-grid .product-layout { margin-bottom: 20px; }
  .jw-grid .product-thumb .image img { height: 148px; padding: 10px; }
  .jw-grid .product-thumb .caption { padding: 14px 14px 16px !important; }
  .jw-grid .product-thumb .caption h4 a,
  .jw-grid .product-thumb .caption h3 a { font-size: 13px !important; -webkit-line-clamp: 3; }
  .jw-grid .product-thumb .caption p { display: none; }
  .jw-grid .product-thumb .button-group button,
  .jw-grid .product-thumb .button-group .btn { padding: 10px 8px !important; font-size: 11px !important; }
}
@media (max-width: 575px) {
  .jw-subcats__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .jw-cat-head { padding: 20px 16px; }
}

/* ==========================================================================
   31. Product Detail Page (PDP)
   --------------------------------------------------------------------------
   改版要点：
     - 主图右侧原本是「询价表单」，占掉首屏黄金位。现改为产品决策信息
       （卖点 / 规格速览 / CTA），表单下沉到页面底部独立区块。
     - 产品描述经过离线清洗（DescriptionCleaner），包含：
       .jw-desc-video 规范化的视频播放器、.jw-desc-img 响应式图片、
       .jw-spec-table 参数表格。样式需覆盖这些类。
   注意：描述内容来自采集数据，作者会用内联样式与 <table>，因此这里
         必须用足够具体的后代选择器 + !important 兜底。
   ========================================================================== */

/* ---------- 31.1 Page shell ---------- */
.jw-pdp { padding-bottom: 48px; }
.jw-pdp__hero { margin-bottom: 40px; }

/* ---------- 31.2 Gallery ---------- */
.jw-pdp__gallery { position: relative; }

.jw-pdp__stage {
  position: relative;
  background: var(--jw-bg-soft);
  border: 1px solid var(--jw-line);
  border-radius: var(--jw-r-lg);
  padding: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 320px;
  overflow: hidden;
}
.jw-pdp__stage-link { display: block; width: 100%; }
.jw-pdp__main-img {
  width: 100%;
  height: auto;
  max-height: 520px;
  object-fit: contain;
  margin: 0 auto;
  display: block;
}
/* 替换旧主题给主图加的死尺寸 */
.jw-pdp__stage img { max-width: 100%; height: auto; }

.jw-pdp__zoomhint {
  position: absolute;
  right: 14px;
  bottom: 14px;
  background: rgba(6, 21, 48, .72);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .02em;
  padding: 5px 10px;
  border-radius: var(--jw-r-pill);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  pointer-events: none;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity var(--jw-t), transform var(--jw-t);
}
.jw-pdp__stage:hover .jw-pdp__zoomhint { opacity: 1; transform: translateY(0); }

.jw-pdp__thumbs {
  margin: 14px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.jw-pdp__thumb { display: block; }
.jw-pdp__thumb .thumbnail {
  display: block;
  width: 80px;
  height: 80px;
  padding: 5px;
  margin: 0;
  border: 1px solid var(--jw-line);
  border-radius: var(--jw-r);
  background: #fff;
  transition: border-color var(--jw-t), box-shadow var(--jw-t);
  overflow: hidden;
}
.jw-pdp__thumb .thumbnail:hover,
.jw-pdp__thumb .thumbnail.active {
  border-color: var(--jw-gold-500);
  box-shadow: 0 0 0 2px rgba(198, 160, 82, .18);
}
.jw-pdp__thumb .thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  margin: 0;
}

/* ---------- 31.3 Info column (replaces the old inquiry form) ---------- */
.jw-pdp__info { padding-top: 4px; }

.jw-pdp__title {
  font-family: var(--jw-font-head);
  font-size: 26px;
  line-height: 1.32;
  font-weight: 700;
  color: var(--jw-ink);
  margin: 0 0 16px;
  letter-spacing: -.01em;
}

.jw-pdp__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  padding: 12px 0 16px;
  border-bottom: 1px solid var(--jw-line);
  margin-bottom: 18px;
}
.jw-pdp__meta-item {
  font-size: 13px;
  color: var(--jw-slate-700);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.jw-pdp__meta-k {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--jw-slate-400);
}
.jw-pdp__stock { color: #157A4B; font-weight: 600; }

/* Highlights (auto-extracted selling points) */
.jw-pdp__highlights {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
}
.jw-pdp__highlights > li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 10px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--jw-slate-700);
}
.jw-pdp__highlights > li > i {
  position: absolute;
  left: 0;
  top: 3px;
  color: var(--jw-gold-500);
  font-size: 14px;
}

/* Quick spec list */
.jw-pdp__quickspec {
  margin: 0 0 22px;
  padding: 14px 16px;
  background: var(--jw-bg-soft);
  border: 1px solid var(--jw-line);
  border-radius: var(--jw-r);
}
.jw-pdp__quickspec-row {
  display: flex;
  gap: 12px;
  padding: 6px 0;
  border-bottom: 1px dashed rgba(138, 151, 173, .3);
  font-size: 13px;
}
.jw-pdp__quickspec-row:last-child { border-bottom: 0; }
.jw-pdp__quickspec-row dt {
  flex: 0 0 42%;
  max-width: 42%;
  font-weight: 600;
  color: var(--jw-slate-500);
  margin: 0;
}
.jw-pdp__quickspec-row dd {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  color: var(--jw-ink);
  overflow-wrap: break-word;
  word-break: break-word;
}

/* CTA */
.jw-pdp__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 22px 0 12px;
}
.jw-pdp__cta-btn {
  flex: 1 1 160px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 48px;
  padding: 0 20px;
  border-radius: var(--jw-r);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .01em;
  border: 1.5px solid transparent;
  transition: all var(--jw-t);
  text-align: center;
}
.jw-pdp__cta-btn.btn-primary,
a.jw-pdp__cta-btn {
  background: var(--jw-navy-800);
  border-color: var(--jw-navy-800);
  color: #fff !important;
}
.jw-pdp__cta-btn.btn-primary:hover,
a.jw-pdp__cta-btn:hover {
  background: var(--jw-navy-700);
  border-color: var(--jw-navy-700);
  color: #fff !important;
  transform: translateY(-1px);
  box-shadow: var(--jw-sh-2);
}
.jw-pdp__cta-btn--ghost,
a.jw-pdp__cta-btn--ghost {
  background: #fff !important;
  border-color: var(--jw-line) !important;
  color: var(--jw-navy-800) !important;
}
.jw-pdp__cta-btn--ghost:hover,
a.jw-pdp__cta-btn--ghost:hover {
  border-color: var(--jw-gold-500) !important;
  color: var(--jw-navy-800) !important;
  background: #fff !important;
}
.jw-pdp__cta-note {
  font-size: 12px;
  color: var(--jw-slate-500);
  margin: 0 0 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
}
.jw-pdp__cta-note i { color: var(--jw-gold-500); margin-right: 3px; }

/* ---------- 31.4 Tabs ---------- */
.jw-pdp__detail { margin-top: 8px; }

.jw-pdp__tabs {
  border-bottom: 2px solid var(--jw-line);
  margin-bottom: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.jw-pdp__tabs > li { float: none; margin: 0; }
.jw-pdp__tabs > li > a {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--jw-slate-500) !important;
  font-size: 14px;
  font-weight: 600;
  padding: 14px 22px !important;
  margin: 0 !important;
  position: relative;
  transition: color var(--jw-t);
}
.jw-pdp__tabs > li > a::after {
  content: '';
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: -2px;
  height: 2px;
  background: transparent;
  transition: background var(--jw-t);
}
.jw-pdp__tabs > li.active > a,
.jw-pdp__tabs > li > a:hover {
  color: var(--jw-navy-800) !important;
  background: transparent !important;
}
.jw-pdp__tabs > li.active > a::after { background: var(--jw-gold-500); }

.jw-pdp__tabcontent {
  border: 1px solid var(--jw-line);
  border-top: 0;
  border-radius: 0 0 var(--jw-r-lg) var(--jw-r-lg);
  padding: 32px 34px;
  background: #fff;
}
.jw-pdp__tabcontent > .tab-pane { font-size: 14.5px; line-height: 1.75; color: var(--jw-slate-700); }

/* ---------- 31.5 Description typography (cleaned HTML) ---------- */
.jw-desc { max-width: 100%; overflow-wrap: break-word; word-break: break-word; }
.jw-desc > *:first-child { margin-top: 0; }
.jw-desc > *:last-child { margin-bottom: 0; }

.jw-desc p {
  margin: 0 0 16px;
  line-height: 1.78;
  color: var(--jw-slate-700);
}
.jw-desc strong, .jw-desc b { color: var(--jw-ink); font-weight: 700; }

/* 描述内的章节标题 */
.jw-desc .jw-desc-h,
.jw-desc h2,
.jw-desc h3,
.jw-desc h4 {
  font-family: var(--jw-font-head);
  color: var(--jw-ink);
  font-weight: 700;
  line-height: 1.35;
  margin: 32px 0 14px;
  padding-left: 14px;
  position: relative;
  font-size: 18px;
}
.jw-desc .jw-desc-h::before,
.jw-desc h2::before,
.jw-desc h3::before,
.jw-desc h4::before {
  content: '';
  position: absolute;
  left: 0;
  top: .18em;
  bottom: .18em;
  width: 4px;
  border-radius: 2px;
  background: var(--jw-gold-500);
}
.jw-desc > h2:first-child, .jw-desc > h3:first-child { margin-top: 0; }

.jw-desc ul, .jw-desc ol {
  margin: 0 0 18px;
  padding-left: 22px;
}
.jw-desc li { margin-bottom: 8px; line-height: 1.7; }

/* 描述内的图片：响应式 + 卡片化 */
.jw-desc .jw-desc-img,
.jw-desc img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 18px auto;
  border-radius: var(--jw-r);
  border: 1px solid var(--jw-line);
  background: var(--jw-bg-soft);
}
/* 描述里连续的图片排成网格，避免大量单图占据超长页面 */
@media (min-width: 768px) {
  .jw-desc > div:has(> .jw-desc-img) {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 14px;
    margin: 18px 0;
  }
  .jw-desc > div:has(> .jw-desc-img) > .jw-desc-img {
    margin: 0;
    width: 100%;
    height: 220px;
    object-fit: contain;
    background: #fff;
  }
}

/* ---------- 31.6 Description video player ---------- */
.jw-desc-video {
  margin: 0 0 26px;
  border-radius: var(--jw-r-lg);
  overflow: hidden;
  background: var(--jw-navy-900);
  box-shadow: var(--jw-sh-2);
  line-height: 0;
  /* 视频容器不得撑破父级 */
  max-width: 100%;
}
.jw-desc-video__el {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: 560px;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  background: #000;
  border: 0;
  outline: none;
  cursor: pointer;
}
/* 描述里若视频直接嵌在 <p> 内（历史数据），确保块级表现 */
.jw-desc p > .jw-desc-video { margin: 0 0 26px; }

/* ---------- 31.7 Spec tables (描述内 + 参数标签页共用) ---------- */
.jw-spec-table {
  width: 100% !important;
  max-width: 100%;
  border-collapse: collapse;
  margin: 20px 0 26px;
  font-size: 13.5px;
  table-layout: fixed;
  border: 1px solid var(--jw-line);
  border-radius: var(--jw-r);
  overflow: hidden;
}
.jw-spec-table th,
.jw-spec-table td {
  padding: 11px 16px;
  vertical-align: top;
  border: 1px solid var(--jw-line);
  line-height: 1.6;
  text-align: left;
  overflow-wrap: break-word;
  word-break: break-word;
  background: #fff;
  color: var(--jw-slate-700);
}
/* 首列（参数名）底色 + 固定宽，形成清晰的键值对照 */
.jw-spec-table > tbody > tr > th,
.jw-spec-table > tbody > tr > td:first-child {
  background: var(--jw-bg-soft);
  color: var(--jw-ink);
  font-weight: 600;
  width: 38%;
}
.jw-spec-table > tbody > tr:nth-child(even) > td { background: #FCFDFF; }

/* 分组标题行（参数标签页的 attribute_group.name） */
.jw-spec-table__group {
  background: var(--jw-navy-800) !important;
  color: #fff !important;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 12px 16px !important;
}

/* 描述内表格若为多列并排（型号对比表），首列同样加底色 */
.jw-desc .jw-spec-table { margin: 20px 0 26px; }

/* ---------- 31.8 Tags ---------- */
.jw-pdp__tags {
  margin: 32px 0 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}
.jw-pdp__tags-label { color: var(--jw-slate-400); font-weight: 600; }
.jw-pdp__tag {
  display: inline-block;
  padding: 5px 12px;
  border-radius: var(--jw-r-pill);
  background: var(--jw-bg-soft);
  border: 1px solid var(--jw-line);
  color: var(--jw-slate-700) !important;
  font-size: 12.5px;
  transition: all var(--jw-t);
}
.jw-pdp__tag:hover {
  background: var(--jw-navy-800);
  border-color: var(--jw-navy-800);
  color: #fff !important;
}

/* ---------- 31.9 Related products ---------- */
.jw-pdp__related { margin-top: 56px; }

/* ---------- 31.10 Inquiry section (moved from hero) ---------- */
.jw-inquiry {
  margin-top: 56px;
  border-radius: var(--jw-r-lg);
  overflow: hidden;
  background: var(--jw-navy-900);
  box-shadow: var(--jw-sh-3);
}
.jw-inquiry__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 0;
}

.jw-inquiry__aside {
  padding: 40px 36px;
  color: rgba(255, 255, 255, .78);
  background:
    radial-gradient(120% 120% at 0% 0%, rgba(198, 160, 82, .16), transparent 60%),
    var(--jw-navy-900);
}
.jw-inquiry__head {
  font-family: var(--jw-font-head);
  font-size: 24px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 14px;
  line-height: 1.3;
}
.jw-inquiry__desc {
  font-size: 14px;
  line-height: 1.75;
  margin: 0 0 20px;
  color: rgba(255, 255, 255, .72);
}
.jw-inquiry__points {
  list-style: none;
  margin: 0 0 22px;
  padding: 0;
}
.jw-inquiry__points > li {
  position: relative;
  padding-left: 24px;
  margin-bottom: 10px;
  font-size: 13.5px;
  color: rgba(255, 255, 255, .85);
}
.jw-inquiry__points > li > i {
  position: absolute;
  left: 0;
  top: 3px;
  color: var(--jw-gold-400);
}
.jw-inquiry__direct {
  margin: 0;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, .12);
  font-size: 14px;
  color: rgba(255, 255, 255, .8);
}
.jw-inquiry__direct i { color: var(--jw-gold-400); margin-right: 7px; }
.jw-inquiry__direct a {
  color: #fff !important;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.jw-inquiry__direct a:hover { color: var(--jw-gold-300) !important; }

.jw-inquiry__form {
  padding: 40px 36px;
  background: #fff;
}
.jw-inquiry__form .form-group { margin-bottom: 16px; }
.jw-inquiry__form .control-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--jw-slate-500);
  margin-bottom: 6px;
}
.jw-inquiry__form .form-control {
  height: 46px;
  border: 1px solid var(--jw-line);
  border-radius: var(--jw-r);
  box-shadow: none;
  font-size: 14px;
  color: var(--jw-ink);
  transition: border-color var(--jw-t), box-shadow var(--jw-t);
}
.jw-inquiry__form textarea.form-control { height: auto; min-height: 120px; padding-top: 12px; }
.jw-inquiry__form .form-control:focus {
  border-color: var(--jw-navy-600);
  box-shadow: 0 0 0 3px rgba(27, 63, 121, .1);
}
.jw-inquiry__captcha {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.jw-inquiry__captcha .form-control { flex: 1 1 auto; min-width: 0; }
.jw-inquiry__captcha img {
  flex: 0 0 auto;
  height: 46px;
  width: auto;
  border: 1px solid var(--jw-line);
  border-radius: var(--jw-r);
  cursor: pointer;
  background: #fff;
}
.jw-inquiry__form .btn-primary {
  height: 50px;
  border-radius: var(--jw-r);
  background: var(--jw-navy-800);
  border-color: var(--jw-navy-800);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .02em;
  transition: all var(--jw-t);
}
.jw-inquiry__form .btn-primary:hover {
  background: var(--jw-navy-700);
  border-color: var(--jw-navy-700);
  transform: translateY(-1px);
  box-shadow: var(--jw-sh-2);
}
/* 旧主题给表单加了 required 星号样式，这里统一成品牌色 */
.jw-inquiry__form .form-group.required > .control-label::after {
  content: ' *';
  color: var(--jw-price);
}

/* ---------- 31.11 Responsive ---------- */
@media (max-width: 1199px) {
  .jw-pdp__title { font-size: 23px; }
  .jw-pdp__tabcontent { padding: 26px 24px; }
  .jw-inquiry__inner { grid-template-columns: minmax(0, 1fr); }
  .jw-inquiry__aside, .jw-inquiry__form { padding: 32px 28px; }
}

@media (max-width: 991px) {
  .jw-pdp__stage { min-height: 260px; padding: 14px; }
  .jw-pdp__main-img { max-height: 400px; }
  .jw-pdp__thumbs { gap: 8px; }
  .jw-pdp__thumb .thumbnail { width: 66px; height: 66px; }
  .jw-pdp__detail { margin-top: 32px; }
  /* 平板下描述内的图片改为两列 */
  .jw-desc > div:has(> .jw-desc-img) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .jw-desc > div:has(> .jw-desc-img) > .jw-desc-img { height: 180px; }
  /* 宽表格允许横向滚动，避免撑破布局 */
  .jw-spec-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .jw-spec-table { table-layout: auto; }
  .jw-spec-table > tbody > tr > th,
  .jw-spec-table > tbody > tr > td:first-child { width: auto; min-width: 130px; }
}

@media (max-width: 767px) {
  .jw-pdp__title { font-size: 21px; }
  .jw-pdp__meta { gap: 6px 14px; padding: 10px 0 14px; }
  .jw-pdp__cta-btn { flex: 1 1 100%; }
  .jw-pdp__tabs > li > a { padding: 12px 16px !important; font-size: 13px; }
  .jw-pdp__tabcontent { padding: 20px 16px; border-radius: 0 0 var(--jw-r) var(--jw-r); }
  .jw-desc .jw-desc-h, .jw-desc h2, .jw-desc h3, .jw-desc h4 { font-size: 16px; margin: 26px 0 12px; }
  .jw-inquiry__aside, .jw-inquiry__form { padding: 26px 20px; }
  .jw-inquiry__head { font-size: 20px; }
  .jw-desc-video__el { max-height: 320px; }
  /* 窄屏下描述图片单列 */
  .jw-desc > div:has(> .jw-desc-img) { grid-template-columns: minmax(0, 1fr); }
  .jw-desc > div:has(> .jw-desc-img) > .jw-desc-img { height: auto; max-height: 300px; }
}

@media (max-width: 575px) {
  .jw-pdp__stage { padding: 10px; border-radius: var(--jw-r); }
  .jw-pdp__thumbs { gap: 6px; }
  .jw-pdp__thumb .thumbnail { width: 58px; height: 58px; padding: 3px; }
  .jw-inquiry__captcha { flex-wrap: wrap; }
  .jw-inquiry__captcha img { height: 40px; }
  .jw-pdp__quickspec-row { flex-wrap: wrap; gap: 2px; }
  .jw-pdp__quickspec-row dt { flex: 0 0 100%; max-width: 100%; }
}

/* ==========================================================================
   32. Information pages (About / Delivery / Privacy / Terms)
   --------------------------------------------------------------------------
   版式：页头 hero（眉标 + 大标题 + 金色分隔线 + lead 段）→ 富文本正文
   （复用 .jw-desc）→ 底部 CTA 面板（两个按钮）。
   正文段落里的图标用 <i class="fa fa-xxx"></i> 内联，配合 .jw-info-body 的
   中性色处理，保证图标跟随文字色而非继承蓝色链接色。
   ========================================================================== */

/* ---------- 32.1 页头 hero ---------- */
.jw-info-hero {
  padding: 12px 0 26px;
  border-bottom: 1px solid var(--jw-line);
  margin-bottom: 34px;
}
.jw-info-hero .jw-eyebrow { margin-bottom: 12px; }
.jw-info-hero .jw-title {
  font-size: 34px;
  line-height: 1.24;
  margin: 0 0 18px;
  max-width: 900px;
}
.jw-info-hero .jw-rule { margin: 0 0 20px; }
.jw-info-lead {
  font-size: 17px;
  line-height: 1.8;
  color: var(--jw-slate-500);
  max-width: 900px;
  margin: 0;
}

/* ---------- 32.2 正文容器 ---------- */
.jw-info-body {
  max-width: 900px;
  font-size: 15px;
  color: var(--jw-slate-700);
}
.jw-info-body > *:first-child { margin-top: 0; }

/* 正文里的图标：默认用品牌金，且不继承链接色 */
.jw-info-body i.fa,
.jw-info-body i.iconfont {
  color: var(--jw-gold-600);
  font-style: normal;
}

/* 段落首行的小图标（"图标 + 标题"式段落） */
.jw-info-body p > i.fa:first-child {
  display: inline-block;
  width: 22px;
  margin-right: 6px;
  text-align: center;
}

/* ---------- 32.3 图标要点网格（<ul class="jw-info-grid">） ---------- */
.jw-info-grid {
  list-style: none;
  margin: 22px 0 28px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 26px;
}
.jw-info-grid > li {
  position: relative;
  padding: 0 0 0 32px;
  margin: 0;
  font-size: 15px;
  line-height: 1.7;
  color: var(--jw-slate-700);
}
.jw-info-grid > li::before {
  content: '';
  position: absolute;
  left: 0; top: 0;
}
.jw-info-grid > li > i.fa {
  position: absolute;
  left: 0; top: 3px;
  width: 20px;
  text-align: center;
  font-size: 15px;
  color: var(--jw-gold-600);
}
.jw-info-grid > li > strong {
  color: var(--jw-ink);
  font-weight: 700;
}

/* ---------- 32.4 高亮卡片（<div class="jw-info-card">） ---------- */
.jw-info-card {
  background: var(--jw-bg-soft);
  border: 1px solid var(--jw-line);
  border-left: 4px solid var(--jw-gold-500);
  border-radius: var(--jw-r);
  padding: 22px 26px;
  margin: 24px 0 30px;
}
.jw-info-card p:last-child { margin-bottom: 0; }
.jw-info-card strong { color: var(--jw-ink); }

/* ---------- 32.5 深色强调块（<div class="jw-info-dark">） ---------- */
.jw-info-dark {
  background: var(--jw-navy-900);
  color: #C9D4E6;
  border-radius: var(--jw-r-lg);
  padding: 30px 34px;
  margin: 26px 0 32px;
}
.jw-info-dark h3,
.jw-info-dark h4 {
  color: #fff !important;
  padding-left: 0 !important;
  margin-top: 0 !important;
}
.jw-info-dark h3::before,
.jw-info-dark h4::before { display: none !important; }
.jw-info-dark p { color: #C9D4E6; }
.jw-info-dark strong { color: var(--jw-gold-400); }
.jw-info-dark a { color: var(--jw-gold-400); }
.jw-info-dark i.fa { color: var(--jw-gold-400) !important; }

/* ---------- 32.6 编号步骤（<ol class="jw-info-steps">） ---------- */
.jw-info-steps {
  list-style: none;
  counter-reset: jwstep;
  margin: 22px 0 28px;
  padding: 0;
}
.jw-info-steps > li {
  position: relative;
  counter-increment: jwstep;
  padding: 0 0 0 46px;
  margin: 0 0 16px;
  font-size: 15px;
  line-height: 1.7;
}
.jw-info-steps > li::before {
  content: counter(jwstep);
  position: absolute;
  left: 0; top: 0;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--jw-navy-800);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.jw-info-steps > li > strong { color: var(--jw-ink); }

/* ---------- 32.7 底部 CTA ---------- */
.jw-info-cta {
  margin-top: 46px;
  padding: 30px 34px;
  border-radius: var(--jw-r-lg);
  background: linear-gradient(120deg, var(--jw-navy-900) 0%, var(--jw-navy-700) 100%);
  color: #C9D4E6;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 26px;
  flex-wrap: wrap;
  box-shadow: var(--jw-sh-3);
}
.jw-info-cta__text { max-width: 560px; }
.jw-info-cta__text h3 {
  color: #fff;
  font-size: 21px;
  font-weight: 700;
  margin: 0 0 8px;
  padding: 0;
}
.jw-info-cta__text h3::before { display: none; }
.jw-info-cta__text p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.7;
  color: #C9D4E6;
}
.jw-info-cta__actions { display: flex; gap: 12px; flex-wrap: wrap; }
.jw-info-cta .jw-btn--outline {
  color: #fff !important;
  border-color: rgba(255,255,255,.45);
}
.jw-info-cta .jw-btn--outline:hover {
  background: #fff;
  border-color: #fff;
  color: var(--jw-navy-900) !important;
}

/* ---------- 32.8 Responsive ---------- */
@media (max-width: 991px) {
  .jw-info-hero .jw-title { font-size: 28px; }
  .jw-info-hero { padding: 4px 0 22px; margin-bottom: 26px; }
  .jw-info-grid { grid-template-columns: minmax(0, 1fr); }
  .jw-info-cta { padding: 26px 24px; }
}
@media (max-width: 767px) {
  .jw-info-hero .jw-title { font-size: 24px; }
  .jw-info-lead { font-size: 15.5px; }
  .jw-info-body { font-size: 14.5px; }
  .jw-info-card { padding: 18px 20px; }
  .jw-info-dark { padding: 22px 20px; }
  .jw-info-cta { flex-direction: column; align-items: flex-start; }
  .jw-info-cta__actions { width: 100%; }
  .jw-info-cta__actions .jw-btn { flex: 1 1 100%; justify-content: center; }
}

/* ---------- §33 分类页产品网格的无障碍 H2 ----------
   产品网格前必须有一个 h2，避免 h1 → h3 的标题层级跳级（SEO/无障碍均会判错）。
   视觉上不展示（页头已有同样的 H1 标题），仅提供给搜索引擎与屏幕阅读器。 */
.jw-grid-heading {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}