/* ============================================================
   Xingyao Toys - Foreign Trade B2B Station
   Theme System: all visual decisions live in :root variables.
   To re-skin after a reference site is confirmed, only edit
   the block below.
   ============================================================ */

:root {
  /* ---- Brand palette ----
     Aligned with reference site bestfunanimaltoys.com:
     primary blue #1263aa, orange accent #f08200,
     signature gradient #06479b -> #0599c8            */
  --xy-primary:        #1263aa;
  --xy-primary-dark:   #06479b;
  --xy-primary-soft:   #eaf2fb;
  --xy-secondary:      #0d3b66;
  --xy-accent:         #f08200;
  --xy-accent-soft:    #fff4e6;

  /* ---- Signature gradients (from reference) ---- */
  --xy-grad-x:         linear-gradient(#06479b, #0599c8);
  --xy-grad-y:         linear-gradient(90deg, #064983, #1263aa);
  --xy-grad-accent:    linear-gradient(90deg, #f08200, #ff9f2e);

  /* ---- Surfaces ---- */
  --xy-bg:             #FFFFFF;
  --xy-bg-alt:         #fcfcfc;
  --xy-bg-dark:        #0d3b66;
  --xy-surface:        #FFFFFF;

  /* ---- Text ---- */
  --xy-text:           #1F2937;
  --xy-text-muted:     #6B7280;
  --xy-text-invert:    #FFFFFF;
  --xy-text-invert-2:  #CBD5E1;

  /* ---- Lines ---- */
  --xy-border:         #E5E7EB;
  --xy-border-strong:  #CBD5E1;

  /* ---- Typography ---- */
  --xy-font: 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto,
             'Helvetica Neue', Arial, 'PingFang SC', 'Hiragino Sans',
             'Microsoft YaHei', 'Yu Gothic', 'Noto Sans SC', 'Noto Sans JP', sans-serif;
  --xy-font-cjk: 'PingFang SC', 'Hiragino Sans', 'Microsoft YaHei', 'Yu Gothic',
                 'Noto Sans SC', 'Noto Sans JP', 'Source Han Sans SC', sans-serif;
  --xy-fs-xs:   0.78rem;
  --xy-fs-sm:   0.875rem;
  --xy-fs-base: 1rem;
  --xy-fs-md:   1.125rem;
  --xy-fs-lg:   1.375rem;
  --xy-fs-xl:   1.75rem;
  --xy-fs-2xl:  2.25rem;
  --xy-fs-3xl:  2.875rem;

  /* ---- Spacing ---- */
  --xy-space-1: 0.5rem;
  --xy-space-2: 1rem;
  --xy-space-3: 1.5rem;
  --xy-space-4: 2rem;
  --xy-space-5: 3rem;
  --xy-space-6: 4.5rem;

  /* ---- Layout ---- */
  --xy-maxw:      1200px;
  --xy-radius:    10px;
  --xy-radius-lg: 16px;
  --xy-header-h:  76px;

  /* ---- Effects ---- */
  --xy-shadow-sm: 0 1px 3px rgba(15, 32, 51, .07);
  --xy-shadow:    0 4px 16px rgba(15, 32, 51, .09);
  --xy-shadow-lg: 0 14px 40px rgba(15, 32, 51, .14);
  --xy-transition: .22s cubic-bezier(.4, 0, .2, 1);
}

/* ============================================================
   Reset & Base
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--xy-font);
  font-size: var(--xy-fs-base);
  line-height: 1.65;
  color: var(--xy-text);
  background: var(--xy-bg);
}

img, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }

h1, h2, h3, h4 {
  margin: 0 0 var(--xy-space-2);
  line-height: 1.25;
  color: var(--xy-secondary);
  font-weight: 700;
}

p { margin: 0 0 var(--xy-space-2); }

:focus-visible {
  outline: 2px solid var(--xy-primary);
  outline-offset: 3px;
}

/* ============================================================
   Layout
   ============================================================ */

.container {
  width: 100%;
  max-width: var(--xy-maxw);
  margin-inline: auto;
  padding-inline: var(--xy-space-3);
}

.section { padding-block: clamp(2.25rem, 4.5vw, 3.25rem); }
.section--alt { background: var(--xy-bg-alt); }
.section--dark { background: var(--xy-bg-dark); color: var(--xy-text-invert); }
.section--dark h2, .section--dark h3 { color: var(--xy-text-invert); }

.section-head {
  max-width: 680px;
  margin: 0 auto var(--xy-space-4);
  text-align: center;
}

.section-head h2 { font-size: var(--xy-fs-2xl); }

.section-head p {
  margin: 0;
  color: var(--xy-text-muted);
  font-size: var(--xy-fs-md);
}

.eyebrow {
  display: inline-block;
  margin-bottom: var(--xy-space-1);
  color: var(--xy-primary);
  font-size: var(--xy-fs-sm);
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.grid { display: grid; gap: var(--xy-space-3); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

/* ============================================================
   Buttons
   ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--xy-space-1);
  padding: .8rem 1.6rem;
  border: 1px solid transparent;
  border-radius: var(--xy-radius);
  font-family: inherit;
  font-size: var(--xy-fs-sm);
  font-weight: 600;
  cursor: pointer;
  transition: all var(--xy-transition);
}

.btn--primary {
  background: var(--xy-grad-y);
  color: #fff;
  border-color: transparent;
}

.btn--primary:hover {
  background: var(--xy-grad-x);
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(18, 99, 170, .32);
}

.btn--outline {
  border-color: var(--xy-border-strong);
  color: var(--xy-secondary);
  background: transparent;
}

.btn--outline:hover {
  border-color: var(--xy-primary);
  color: var(--xy-primary);
}

.btn--lg { padding: 1rem 2.1rem; font-size: var(--xy-fs-base); }

.btn--wa { background: #25D366; color: #fff; }
.btn--wa:hover { background: #1DA851; transform: translateY(-2px); }

/* ============================================================
   Header
   ============================================================ */

.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--xy-border);
}

.header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--xy-space-3);
  min-height: var(--xy-header-h);
}

.logo { display: flex; align-items: center; gap: var(--xy-space-2); }

.logo__mark {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 9px;
  background: var(--xy-grad-y);
  color: #fff;
  font-weight: 800;
  font-size: var(--xy-fs-md);
  flex-shrink: 0;
}

.logo__text h1 {
  margin: 0;
  font-size: var(--xy-fs-lg);
  letter-spacing: -.01em;
}

.logo__text p {
  margin: 0;
  color: var(--xy-text-muted);
  font-size: var(--xy-fs-xs);
  letter-spacing: .02em;
}

.nav { display: flex; align-items: center; gap: var(--xy-space-3); }

.nav__link {
  position: relative;
  padding: .35rem 0;
  color: var(--xy-text);
  font-size: var(--xy-fs-sm);
  font-weight: 500;
  transition: color var(--xy-transition);
}

.nav__link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 2px;
  background: var(--xy-primary);
  transition: width var(--xy-transition);
}

.nav__link:hover { color: var(--xy-primary); }
.nav__link:hover::after { width: 100%; }

.nav__link.is-active { color: var(--xy-primary); }
.nav__link.is-active::after { width: 100%; }

/* ---- Dropdown menus (About Us / Products / Service) ---- */

.nav__item { position: relative; }

.nav__link--drop { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }

.nav__link--drop::after { display: none; }

.nav__caret {
  width: 8px;
  height: 8px;
  border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform var(--xy-transition);
}

.nav__item.is-open .nav__caret { transform: translateY(1px) rotate(-135deg); }

.nav__dropdown {
  position: absolute;
  top: calc(100% + 14px);
  left: 0;
  z-index: 120;
  min-width: 268px;
  padding: 8px;
  background: #fff;
  border: 1px solid var(--xy-border);
  border-radius: var(--xy-radius);
  box-shadow: var(--xy-shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: all var(--xy-transition);
}

.nav__item:hover .nav__dropdown,
.nav__item.is-open .nav__dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* bridge so the pointer can travel from link to menu without closing */
.nav__dropdown::before {
  content: '';
  position: absolute;
  top: -14px;
  left: 0;
  width: 100%;
  height: 14px;
}

.nav__dropdown a {
  display: block;
  padding: 9px 12px;
  border-radius: 7px;
  color: var(--xy-text);
  font-size: var(--xy-fs-sm);
  transition: all var(--xy-transition);
}

.nav__dropdown a:hover {
  background: var(--xy-primary-soft);
  color: var(--xy-primary-dark);
  transform: translateX(3px);
}

/* ---- Language switcher ---- */

.lang {
  position: relative;
  flex-shrink: 0;
}

.lang__btn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .45rem .75rem;
  border: 1px solid var(--xy-border);
  border-radius: var(--xy-radius);
  background: var(--xy-bg);
  color: var(--xy-text);
  font-family: inherit;
  font-size: var(--xy-fs-sm);
  font-weight: 500;
  cursor: pointer;
  transition: border-color var(--xy-transition);
}

.lang__btn:hover { border-color: var(--xy-primary); }

.lang__menu {
  position: absolute;
  top: calc(100% + .4rem);
  right: 0;
  min-width: 158px;
  padding: .35rem;
  border: 1px solid var(--xy-border);
  border-radius: var(--xy-radius);
  background: var(--xy-surface);
  box-shadow: var(--xy-shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: all var(--xy-transition);
}

.lang.is-open .lang__menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.lang__item {
  display: flex;
  align-items: center;
  gap: .55rem;
  width: 100%;
  padding: .5rem .65rem;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--xy-text);
  font-family: inherit;
  font-size: var(--xy-fs-sm);
  text-align: left;
  cursor: pointer;
  transition: background var(--xy-transition);
}

.lang__item:hover { background: var(--xy-bg-alt); }

.lang__item.is-active {
  background: var(--xy-primary-soft);
  color: var(--xy-primary-dark);
  font-weight: 600;
}

.lang__flag { font-size: var(--xy-fs-md); }

/* ---- Mobile nav toggle ---- */

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 4px;
  padding: .55rem;
  border: 1px solid var(--xy-border);
  border-radius: 8px;
  background: var(--xy-bg);
  cursor: pointer;
}

.nav-toggle span {
  display: block;
  width: 19px;
  height: 2px;
  background: var(--xy-secondary);
  transition: all var(--xy-transition);
}

/* ============================================================
   Hero
   ============================================================ */

.hero {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 560px;
  padding-block: var(--xy-space-6);
  background:
    linear-gradient(135deg, rgba(6, 71, 155, .94), rgba(5, 153, 200, .80)),
    var(--xy-hero-bg, #0d3b66) center / cover no-repeat;
  color: var(--xy-text-invert);
  text-align: center;
}

.hero__inner { max-width: 820px; }

.hero h2 {
  margin-bottom: var(--xy-space-2);
  color: var(--xy-text-invert);
  font-size: var(--xy-fs-3xl);
  letter-spacing: -.02em;
}

.hero__sub {
  margin-bottom: var(--xy-space-4);
  color: var(--xy-text-invert-2);
  font-size: var(--xy-fs-md);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--xy-space-2);
  justify-content: center;
}

.hero__stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--xy-space-5);
  justify-content: center;
  margin-top: var(--xy-space-5);
  padding-top: var(--xy-space-4);
  border-top: 1px solid rgba(255, 255, 255, .18);
}

.hero__stat strong {
  display: block;
  font-size: var(--xy-fs-xl);
  color: #ffb15c;
}

.hero__stat span {
  color: var(--xy-text-invert-2);
  font-size: var(--xy-fs-sm);
}

/* ============================================================
   Media placeholder (images/videos pending manual upload)
   ============================================================ */

.ph {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--xy-bg-alt);
  border: 1px dashed var(--xy-border-strong);
  border-radius: var(--xy-radius);
}

.ph::before {
  content: attr(data-ph);
  position: absolute;
  padding: .3rem .6rem;
  border-radius: 5px;
  background: rgba(20, 33, 61, .72);
  color: #fff;
  font-size: var(--xy-fs-xs);
  font-weight: 600;
  letter-spacing: .03em;
  text-align: center;
  white-space: pre-line;
  line-height: 1.35;
}

.ph--hero  { aspect-ratio: 16 / 7; }
.ph--card  { aspect-ratio: 1 / 1; }
.ph--wide  { aspect-ratio: 4 / 3; }
.ph--video { aspect-ratio: 16 / 9; }
.ph--logo  { aspect-ratio: 5 / 2; }
.ph--cert  { aspect-ratio: 4 / 3; }

/* real images fill the slot; logos & certs fit inside without cropping */
.ph img { width: 100%; height: 100%; object-fit: cover; }
.ph--logo img, .ph--cert img { object-fit: contain; padding: 8%; }

/* hide the placeholder hint once a real image is present */
.ph:has(img)::before { display: none; }

.ph--video::after {
  content: '';
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .9);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .22);
}

/* Once the real asset is uploaded, drop the dashed hint */
.ph.is-filled { border-style: solid; }
.ph.is-filled::before,
.ph.is-filled::after { display: none; }

/* ============================================================
   Categories
   ============================================================ */

.cat-card {
  overflow: hidden;
  border: 1px solid var(--xy-border);
  border-radius: var(--xy-radius-lg);
  background: var(--xy-surface);
  transition: all var(--xy-transition);
}

.cat-card:hover {
  transform: translateY(-5px);
  border-color: var(--xy-primary);
  box-shadow: var(--xy-shadow-lg);
}

.cat-card__body { padding: var(--xy-space-2); text-align: center; }

.cat-card h3 { margin: 0 0 .2rem; font-size: var(--xy-fs-md); }

.cat-card p {
  margin: 0;
  color: var(--xy-text-muted);
  font-size: var(--xy-fs-sm);
}

/* ============================================================
   Products
   ============================================================ */

.product-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--xy-border);
  border-radius: var(--xy-radius-lg);
  background: var(--xy-surface);
  transition: all var(--xy-transition);
}

.product-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--xy-shadow-lg);
  border-color: var(--xy-primary);
}

.product-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: .45rem;
  padding: var(--xy-space-2);
}

.product-card h3 { margin: 0; font-size: var(--xy-fs-md); }

.product-card__model {
  color: var(--xy-primary);
  font-size: var(--xy-fs-sm);
  font-weight: 700;
}

.product-card__desc {
  flex: 1;
  margin: 0;
  color: var(--xy-text-muted);
  font-size: var(--xy-fs-sm);
}

.spec-list {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  margin: 0;
}

.spec-list li {
  padding: .16rem .55rem;
  border-radius: 20px;
  background: var(--xy-bg-alt);
  color: var(--xy-text-muted);
  font-size: var(--xy-fs-xs);
}

.product-card__actions {
  display: flex;
  gap: var(--xy-space-1);
  margin-top: var(--xy-space-1);
}

.product-card__actions .btn {
  flex: 1;
  justify-content: center;
  padding: .6rem .9rem;
}

/* ---- Filter bar ---- */

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--xy-space-1);
  justify-content: center;
  margin-bottom: var(--xy-space-4);
}

.filter-btn {
  padding: .55rem 1.15rem;
  border: 1px solid var(--xy-border);
  border-radius: 30px;
  background: var(--xy-surface);
  color: var(--xy-text);
  font-family: inherit;
  font-size: var(--xy-fs-sm);
  font-weight: 500;
  cursor: pointer;
  transition: all var(--xy-transition);
}

.filter-btn:hover { border-color: var(--xy-primary); color: var(--xy-primary); }

.filter-btn.is-active {
  border-color: var(--xy-primary);
  background: var(--xy-primary);
  color: #fff;
}

/* ============================================================
   Features / Why us
   ============================================================ */

.feature {
  padding: var(--xy-space-3);
  border: 1px solid var(--xy-border);
  border-radius: var(--xy-radius-lg);
  background: var(--xy-surface);
  transition: all var(--xy-transition);
}

.feature:hover {
  transform: translateY(-4px);
  box-shadow: var(--xy-shadow);
  border-color: var(--xy-primary);
}

.feature__icon {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  margin-bottom: var(--xy-space-2);
  border-radius: 13px;
  background: var(--xy-primary-soft);
  font-size: var(--xy-fs-lg);
}

.feature h3 { margin-bottom: .35rem; font-size: var(--xy-fs-md); }

.feature p {
  margin: 0;
  color: var(--xy-text-muted);
  font-size: var(--xy-fs-sm);
}

/* ============================================================
   Services (OEM / ODM)
   ============================================================ */

.service {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: var(--xy-space-2);
  align-items: start;
  padding: var(--xy-space-3);
  border: 1px solid var(--xy-border);
  border-radius: var(--xy-radius-lg);
  background: var(--xy-surface);
}

.service__num {
  display: grid;
  place-items: center;
  width: 92px;
  height: 92px;
  border-radius: 13px;
  background: var(--xy-primary);
  color: #fff;
  font-size: var(--xy-fs-xl);
  font-weight: 800;
}

.service h3 { margin-bottom: .3rem; font-size: var(--xy-fs-md); }

.service p {
  margin: 0;
  color: var(--xy-text-muted);
  font-size: var(--xy-fs-sm);
}

/* ============================================================
   About / Factory
   ============================================================ */

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--xy-space-5);
  align-items: center;
}

.split__media { border-radius: var(--xy-radius-lg); overflow: hidden; }

.check-list { display: grid; gap: var(--xy-space-1); margin-top: var(--xy-space-2); }

.check-list li {
  display: flex;
  gap: .6rem;
  align-items: flex-start;
  font-size: var(--xy-fs-sm);
}

.check-list li::before {
  content: '✓';
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 19px;
  height: 19px;
  margin-top: .2rem;
  border-radius: 50%;
  background: var(--xy-accent-soft);
  color: var(--xy-accent);
  font-size: .7rem;
  font-weight: 800;
}

/* ============================================================
   Contact
   ============================================================ */

.contact-card {
  display: flex;
  gap: var(--xy-space-2);
  align-items: flex-start;
  padding: var(--xy-space-3);
  border: 1px solid var(--xy-border);
  border-radius: var(--xy-radius-lg);
  background: var(--xy-surface);
}

.contact-card__icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  border-radius: 11px;
  background: var(--xy-primary-soft);
  font-size: var(--xy-fs-md);
}

.contact-card h3 { margin: 0 0 .2rem; font-size: var(--xy-fs-base); }

.contact-card p { margin: 0; color: var(--xy-text-muted); font-size: var(--xy-fs-sm); }

.contact-card a { color: var(--xy-primary); font-weight: 600; }
.contact-card a:hover { text-decoration: underline; }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--xy-space-2); }
.field { display: grid; gap: .35rem; }
.field--full { grid-column: 1 / -1; }

.field label {
  color: var(--xy-secondary);
  font-size: var(--xy-fs-sm);
  font-weight: 600;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: .72rem .9rem;
  border: 1px solid var(--xy-border-strong);
  border-radius: var(--xy-radius);
  background: var(--xy-surface);
  color: var(--xy-text);
  font-family: inherit;
  font-size: var(--xy-fs-sm);
  transition: border-color var(--xy-transition);
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--xy-primary);
  outline: none;
}

.field textarea { min-height: 128px; resize: vertical; }

/* ---- Form feedback ---- */
.form-status {
  grid-column: 1 / -1;
  margin: 0;
  padding: .8rem 1rem;
  border-radius: var(--xy-radius);
  font-size: var(--xy-fs-sm);
  font-weight: 500;
}

.form-status:empty { display: none; }

.form-status--ok {
  background: var(--xy-accent-soft);
  color: #1B6E63;
  border: 1px solid rgba(42, 157, 143, .3);
}

.form-status--error {
  background: #FEF2F2;
  color: #B42318;
  border: 1px solid #FECACA;
}

/* ============================================================
   Partner logos
   ============================================================ */

.partners {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--xy-space-3);
  align-items: center;
}

.partner {
  display: grid;
  place-items: center;
  height: 92px;
  padding: 10px;
  background: #fff;
  border: 1px solid var(--xy-border);
  border-radius: var(--xy-radius);
  transition: all var(--xy-transition);
  filter: grayscale(1);
  opacity: .66;
}

.partner:hover {
  filter: grayscale(0);
  opacity: 1;
  transform: translateY(-3px);
  box-shadow: var(--xy-shadow);
}

/* ============================================================
   Factory qualification (certificates)
   ============================================================ */

.certs {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--xy-space-3);
}

.cert {
  padding: 8px;
  background: #fff;
  border: 1px solid var(--xy-border);
  border-radius: var(--xy-radius);
  text-align: center;
  transition: all var(--xy-transition);
}

.cert:hover {
  transform: translateY(-4px);
  box-shadow: var(--xy-shadow);
  border-color: var(--xy-primary);
}

.cert__name {
  padding-top: 8px;
  color: var(--xy-text-muted);
  font-size: var(--xy-fs-xs);
  font-weight: 600;
  letter-spacing: .03em;
}

/* ============================================================
   Production process (6 steps)
   ============================================================ */

.process {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--xy-space-3);
  counter-reset: step;
}

.step { position: relative; }

.step__media {
  position: relative;
  border-radius: var(--xy-radius);
  overflow: hidden;
  border: 1px solid var(--xy-border);
}

.step__num {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--xy-grad-y);
  color: #fff;
  font-size: var(--xy-fs-sm);
  font-weight: 700;
}

.step h3 {
  margin-top: .8rem;
  font-size: var(--xy-fs-base);
}

.step p {
  margin: .3rem 0 0;
  color: var(--xy-text-muted);
  font-size: var(--xy-fs-sm);
}

/* ============================================================
   Long-form copy & callout blocks
   ============================================================ */

.prose { max-width: 860px; margin-inline: auto; }

.prose p {
  margin-bottom: var(--xy-space-2);
  color: var(--xy-text-muted);
  font-size: var(--xy-fs-md);
  line-height: 1.85;
}

.prose p:last-child { margin-bottom: 0; }

.note-block {
  max-width: 860px;
  margin: var(--xy-space-6) auto 0;
  padding: var(--xy-space-4);
  background: var(--xy-bg-alt);
  border: 1px solid var(--xy-border);
  border-left: 4px solid var(--xy-primary);
  border-radius: var(--xy-radius);
  text-align: center;
}

.note-block h3 { margin-bottom: .6rem; }

.note-block p {
  margin: 0;
  color: var(--xy-text-muted);
  line-height: 1.8;
}

/* ============================================================
   CTA band
   ============================================================ */

.cta-band {
  background: var(--xy-grad-x);
  color: var(--xy-text-invert);
  text-align: center;
}

.cta-band h2 { color: var(--xy-text-invert); font-size: var(--xy-fs-xl); }
.cta-band p { color: var(--xy-text-invert-2); }

.cta-band__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--xy-space-2);
  justify-content: center;
  margin-top: var(--xy-space-3);
}

/* ============================================================
   Footer
   ============================================================ */

.footer {
  padding-top: var(--xy-space-5);
  background: var(--xy-bg-dark);
  color: var(--xy-text-invert-2);
  font-size: var(--xy-fs-sm);
}

.footer__grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.35fr;
  gap: var(--xy-space-4);
  padding-bottom: var(--xy-space-4);
}

.footer h3 {
  margin-bottom: var(--xy-space-2);
  color: var(--xy-text-invert);
  font-size: var(--xy-fs-base);
}

.footer p { margin-bottom: .5rem; color: var(--xy-text-invert-2); }

.footer li { margin-bottom: .55rem; }

.footer a {
  color: var(--xy-text-invert-2);
  transition: color var(--xy-transition);
}

.footer a:hover { color: var(--xy-accent); }

.footer__contact a { color: var(--xy-text-invert); font-weight: 600; }
.footer__contact a:hover { color: var(--xy-accent); }

.footer__bottom {
  padding-block: var(--xy-space-2);
  border-top: 1px solid rgba(255, 255, 255, .12);
  text-align: center;
  font-size: var(--xy-fs-xs);
}

.footer__icp { margin-top: 6px; opacity: .75; }
.footer__icp a { color: inherit; text-decoration: none; }
.footer__icp a:hover { color: var(--xy-primary); }

.footer__logo {
  display: flex;
  align-items: center;
  gap: var(--xy-space-1);
  margin-bottom: var(--xy-space-2);
  color: var(--xy-text-invert);
  font-size: var(--xy-fs-lg);
  font-weight: 700;
}

/* ============================================================
   Floating contact dock (WhatsApp + chat widget slot)
   ============================================================ */

.dock {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 900;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-end;
}

.dock__btn {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border: 0;
  border-radius: 50%;
  background: #25D366;
  color: #fff;
  font-size: 1.5rem;
  cursor: pointer;
  box-shadow: var(--xy-shadow-lg);
  transition: transform var(--xy-transition);
}

.dock__btn:hover { transform: scale(1.09); }
.dock__btn--chat { background: var(--xy-primary); }
.dock__btn--wa { background: #25D366; }
.dock__btn { position: relative; }

.dock__label {
  position: absolute;
  right: calc(100% + 10px);
  padding: .3rem .6rem;
  border-radius: 5px;
  background: var(--xy-secondary);
  color: #fff;
  font-size: var(--xy-fs-xs);
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--xy-transition);
}

.dock__btn:hover .dock__label { opacity: 1; }

/* Placeholder container for a third-party live-chat script */
#chat-widget-slot:empty { display: none; }

/* ============================================================
   Page hero (inner pages)
   ============================================================ */

.page-hero {
  display: grid;
  place-items: center;
  min-height: 300px;
  padding-block: var(--xy-space-5);
  background:
    linear-gradient(135deg, rgba(20, 33, 61, .93), rgba(20, 33, 61, .78)),
    var(--xy-hero-bg, #24395C) center / cover no-repeat;
  color: var(--xy-text-invert);
  text-align: center;
}

.page-hero h2 {
  margin-bottom: .5rem;
  color: var(--xy-text-invert);
  font-size: var(--xy-fs-2xl);
}

.page-hero p {
  max-width: 640px;
  margin: 0 auto;
  color: var(--xy-text-invert-2);
  font-size: var(--xy-fs-md);
}

/* ============================================================
   Spec table
   ============================================================ */

.table-wrap {
  max-width: 820px;
  margin-inline: auto;
  overflow-x: auto;
  border: 1px solid var(--xy-border);
  border-radius: var(--xy-radius-lg);
  background: var(--xy-surface);
}

.spec-table { width: 100%; border-collapse: collapse; }

.spec-table th,
.spec-table td {
  padding: .9rem 1.15rem;
  border-bottom: 1px solid var(--xy-border);
  text-align: left;
  font-size: var(--xy-fs-sm);
}

.spec-table tr:last-child th,
.spec-table tr:last-child td { border-bottom: 0; }

.spec-table th {
  width: 38%;
  color: var(--xy-secondary);
  font-weight: 600;
  background: var(--xy-bg-alt);
}

.spec-table td { color: var(--xy-text-muted); }

/* ============================================================
   FAQ
   ============================================================ */

.faq {
  display: grid;
  gap: var(--xy-space-2);
  max-width: 800px;
  margin-inline: auto;
}

.faq__item {
  border: 1px solid var(--xy-border);
  border-radius: var(--xy-radius);
  background: var(--xy-surface);
  overflow: hidden;
}

.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--xy-space-2);
  padding: 1rem 1.25rem;
  color: var(--xy-secondary);
  font-size: var(--xy-fs-base);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

.faq__q::-webkit-details-marker { display: none; }

.faq__q::after {
  content: '+';
  color: var(--xy-primary);
  font-size: 1.45rem;
  font-weight: 400;
  line-height: 1;
}

.faq__item[open] .faq__q::after { content: '\2212'; }

.faq__a {
  padding: 0 1.25rem 1.15rem;
  color: var(--xy-text-muted);
  font-size: var(--xy-fs-sm);
}

.faq__a p:last-child { margin-bottom: 0; }

/* ============================================================
   Stats row
   ============================================================ */

.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--xy-space-3);
  text-align: center;
}

.stats__item {
  padding: var(--xy-space-3) var(--xy-space-2);
  border: 1px solid var(--xy-border);
  border-radius: var(--xy-radius-lg);
  background: var(--xy-surface);
}

.stats__item strong {
  display: block;
  color: var(--xy-primary);
  font-size: var(--xy-fs-2xl);
  line-height: 1.1;
}

.stats__item span {
  color: var(--xy-text-muted);
  font-size: var(--xy-fs-sm);
}

@media (max-width: 992px) {
  .stats { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
  .stats { grid-template-columns: 1fr; }
}

/* ============================================================
   Timeline
   ============================================================ */

.timeline {
  display: grid;
  gap: var(--xy-space-2);
  max-width: 800px;
  margin-inline: auto;
}

.timeline__item {
  display: grid;
  grid-template-columns: 108px 1fr;
  gap: var(--xy-space-2);
  align-items: start;
  padding-bottom: var(--xy-space-2);
  border-bottom: 1px dashed var(--xy-border);
}

.timeline__item:last-child { border-bottom: 0; }

.timeline__year {
  color: var(--xy-primary);
  font-size: var(--xy-fs-md);
  font-weight: 800;
}

.timeline__body h3 { margin-bottom: .2rem; font-size: var(--xy-fs-base); }
.timeline__body p { margin: 0; color: var(--xy-text-muted); font-size: var(--xy-fs-sm); }

/* ============================================================
   Reveal on scroll
   ============================================================ */

.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .6s ease, transform .6s ease;
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ============================================================
   Responsive
   ============================================================ */

@media (max-width: 992px) {
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .split { grid-template-columns: 1fr; }

  .partners { grid-template-columns: repeat(3, 1fr); }
  .certs    { grid-template-columns: repeat(3, 1fr); }
  .process  { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 768px) {
  :root {
    --xy-fs-3xl: 2rem;
    --xy-fs-2xl: 1.6rem;
    --xy-fs-xl: 1.35rem;
    --xy-space-6: 3rem;
  }

  .nav-toggle { display: flex; }

  .nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--xy-space-1);
    background: var(--xy-surface);
    border-bottom: 1px solid var(--xy-border);
    box-shadow: var(--xy-shadow);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: all var(--xy-transition);
  }

  .nav.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  .nav__link {
    padding: .8rem var(--xy-space-2);
    border-radius: 7px;
  }

  .nav__link:hover { background: var(--xy-bg-alt); }

  .grid--2,
  .grid--3,
  .grid--4 { grid-template-columns: 1fr; }

  .form-grid { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; }
  .hero { min-height: 460px; }
  .service { grid-template-columns: 1fr; }
  .service__num { width: 64px; height: 64px; font-size: var(--xy-fs-lg); }

  .partners { grid-template-columns: repeat(2, 1fr); }
  .certs    { grid-template-columns: repeat(2, 1fr); }
  .process  { grid-template-columns: repeat(2, 1fr); }

  /* dropdowns collapse into the mobile panel instead of floating */
  .nav__dropdown {
    position: static;
    min-width: 0;
    margin: 2px 0 6px 10px;
    padding: 4px;
    border: 0;
    border-left: 2px solid var(--xy-primary-soft);
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  .nav__item.is-open .nav__dropdown { display: block; }
}

/* ============================================================
   Mobile polish — 移动端体验优化
   1) 防横向溢出   2) iOS 聚焦不再自动放大
   3) 触控热区 >=44px   4) 避开 iPhone 底部安全区
   ============================================================ */

html { -webkit-text-size-adjust: 100%; }
body { overflow-x: hidden; }
img, svg, video { max-width: 100%; }
a, button { -webkit-tap-highlight-color: rgba(18, 99, 170, .12); }

@media (max-width: 768px) {
  /* ---- iOS 输入框聚焦时页面自动放大，字号须 >=16px ---- */
  .field input,
  .field select,
  .field textarea { font-size: 16px; }

  /* ---- 触控热区 ---- */
  .btn {
    min-height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .nav__link { min-height: 46px; display: flex; align-items: center; }
  .nav__dropdown a { min-height: 42px; display: flex; align-items: center; }
  .filter-btn {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .lang__btn { min-height: 44px; }

  /* 页脚链接加内边距，避免误触相邻项；长邮箱自动折行 */
  .footer a { display: inline-block; padding-block: 3px; word-break: break-word; }

  /* ---- Hero：统计改两列，高度不再撑满屏 ---- */
  .hero { min-height: 0; padding-block: 2.8rem; }
  .hero__stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.1rem 1rem;
    margin-top: var(--xy-space-4);
    padding-top: var(--xy-space-3);
  }

  /* ---- 语言菜单：不超出屏幕，超出可滚动 ---- */
  .lang__menu {
    max-width: calc(100vw - 32px);
    max-height: 58vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* ---- 悬浮按钮避开 iPhone 底部横条 ---- */
  .dock {
    right: 14px;
    bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  }
  .dock__btn { width: 50px; height: 50px; font-size: 1.3rem; }

  /* ---- 页脚留出空间，避免被悬浮按钮遮挡 ---- */
  .footer { padding-bottom: calc(74px + env(safe-area-inset-bottom, 0px)); }

  /* ---- 头部紧凑，给内容让出空间 ---- */
  .logo__text h1 { font-size: 1.05rem; }
  .logo__text p { font-size: .6rem; }
  .header__bar { min-height: 64px; }
}

@media (max-width: 560px) {
  /* 极窄屏隐藏公司法定名副标题，只留品牌名 */
  .logo__text p { display: none; }

  .hero__stats { gap: .9rem .8rem; }

  /* 产品卡操作按钮铺满宽度，方便单手点击 */
  .product-card__actions { display: grid; gap: .55rem; }
  .product-card__actions .btn { width: 100%; }

  /* 筛选栏横向滑动，避免挤成多行 */
  .filters {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    padding-bottom: 6px;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
  }
  .filter-btn { flex: 0 0 auto; scroll-snap-align: start; }

  /* 规格表格允许横向滑动查看 */
  .table-wrap { -webkit-overflow-scrolling: touch; }
}

/* ---- 邮件悬浮按钮 ---- */
.dock__btn--mail { background: var(--xy-primary); }
.dock__btn--mail:hover { background: var(--xy-primary-dark); }

/* 手机端没有 hover，隐藏悬浮按钮的文字气泡避免遮挡 */
@media (max-width: 768px) {
  .dock__label { display: none; }
}


/* ============================================================
   Hero carousel: brand slide + official banners
   ============================================================ */

.heroSlider {
  position: relative;
  background: #0b2a4a;
  padding-bottom: 14px;
}

.heroSlider__track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}

.heroSlider__track::-webkit-scrollbar { display: none; }

.heroSlider__slide {
  position: relative;
  flex: 0 0 100%;
  min-height: clamp(380px, 44vw, 620px);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

/* brand slide reuses .hero gradient/typography; stretch to row height */
.heroSlider__slide--brand {
  min-height: 0;
  align-self: stretch;
  width: 100%;
  padding-block: var(--xy-space-5);
}

.heroSlider__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Native image dragging swallows touchmove on mobile and kills swipe-to-scroll */
  -webkit-user-drag: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

.heroSlider__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, .35);
  color: #fff;
  font-size: 19px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--xy-transition);
}

.heroSlider__nav:hover { background: rgba(0, 0, 0, .55); }
.heroSlider__nav--prev { left: 14px; }
.heroSlider__nav--next { right: 14px; }

.heroSlider__dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 12px;
}

.heroSlider__dots button {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, .35);
  cursor: pointer;
  padding: 0;
  transition: background var(--xy-transition), transform var(--xy-transition);
}

.heroSlider__dots button.on {
  background: #f08200;
  transform: scale(1.25);
}

@media (max-width: 768px) {
  .heroSlider { padding-bottom: 12px; }
  .heroSlider__nav { display: none; }

  /* Each slide sizes to its own content so the banner frame == the image height */
  .heroSlider__track { align-items: flex-start; }

  /* Show the full banner image on small screens (no cover-cropping) */
  .heroSlider__slide:not(.hero) { min-height: 0; }
  .heroSlider__slide:not(.hero) .heroSlider__img {
    position: static;
    display: block;
    width: 100%;
    height: auto;
  }

  /* On phones the brand slide is moved out of the carousel (inline script) and
     rendered as a normal block below it, so it no longer forces the banner row
     to 480px and leaves navy bands above/below the image. */
  .heroBrandM { background: #0b2a4a; }
  .heroBrandM .heroSlider__slide--brand {
    flex: none;
    width: 100%;
    min-height: 0;
    align-self: auto;
    padding-block: var(--xy-space-5);
  }
}

/* ============================================================
   Partner logos: paged carousel (reference-site style)
   ============================================================ */
.plogo-clip {
  position: relative;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 46px;
}

.plogo-viewport { overflow: hidden; }

.plogo-track {
  display: flex;
  gap: 14px;
  transition: transform .55s cubic-bezier(.4, 0, .2, 1);
  will-change: transform;
}

.plogo-item {
  flex: 0 0 calc((100% - 4 * 14px) / 5);
  aspect-ratio: 8 / 5;
  background: #fff;
  border: 1px solid var(--xy-border);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  box-shadow: 0 2px 10px rgba(13, 59, 102, .05);
}

.plogo-item img {
  max-width: 94%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

.plogo-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: #e7e9ee;
  color: #5a6472;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--xy-transition), color var(--xy-transition);
}

.plogo-arrow:hover { background: var(--xy-primary); color: #fff; }
.plogo-arrow--prev { left: 0; }
.plogo-arrow--next { right: 0; }

@media (max-width: 900px) {
  .plogo-item { flex-basis: calc((100% - 3 * 14px) / 4); }
}

@media (max-width: 640px) {
  .plogo-clip { padding: 0 38px; }
  .plogo-item { flex-basis: calc((100% - 2 * 14px) / 3); padding: 8px; }
  .plogo-arrow { width: 34px; height: 34px; }
}

/* ============================================================
   Product detail page (product.html)
   ============================================================ */
.pd__crumbs {
  font-size: var(--xy-fs-sm);
  color: var(--xy-sub);
  margin-bottom: var(--xy-space-4);
}
.pd__crumbs a { color: var(--xy-sub); }
.pd__crumbs a:hover { color: var(--xy-primary); }

.pd__layout {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: var(--xy-space-6);
  align-items: start;
}

.pd__main-img {
  aspect-ratio: 1 / 1;
  border-radius: var(--xy-radius);
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--xy-border);
}
.pd__main-img img { width: 100%; height: 100%; object-fit: contain; background: #fff; }

.pd__thumbs { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .8rem; }
.pd__thumbs button {
  width: 72px; height: 72px; padding: 0;
  border-radius: 10px; overflow: hidden;
  border: 2px solid var(--xy-border);
  background: #fff; cursor: pointer;
  transition: border-color var(--xy-transition);
}
.pd__thumbs button.on { border-color: var(--xy-primary); }
.pd__thumbs img { width: 100%; height: 100%; object-fit: cover; display: block; }

.pd__cat { color: var(--xy-primary); font-weight: 700; font-size: var(--xy-fs-sm); text-transform: uppercase; letter-spacing: .06em; }
.pd__name { font-size: var(--xy-fs-2xl); margin: .35rem 0 .2rem; letter-spacing: -.02em; }
.pd__model { color: var(--xy-sub); font-size: var(--xy-fs-md); margin-bottom: var(--xy-space-3); }
.pd__desc { color: var(--xy-text); line-height: 1.65; margin-bottom: var(--xy-space-4); }

.pd__tags { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: var(--xy-space-4); }
.pd__tags span {
  padding: .28rem .7rem; border-radius: 999px;
  background: rgba(18, 99, 170, .08); color: var(--xy-primary);
  font-size: var(--xy-fs-sm); font-weight: 600;
}

.pd__table { width: 100%; border-collapse: collapse; margin-bottom: var(--xy-space-4); }
.pd__table td { padding: .55rem .4rem; border-bottom: 1px solid var(--xy-border); font-size: var(--xy-fs-sm); vertical-align: top; }
.pd__table td:first-child { color: var(--xy-sub); width: 42%; font-weight: 600; }

.pd__usps { display: grid; gap: .45rem; margin-bottom: var(--xy-space-5); }
.pd__usps li { display: flex; gap: .5rem; align-items: baseline; font-size: var(--xy-fs-sm); color: var(--xy-text); }
.pd__usps li::before { content: '\2713'; color: #1a9e55; font-weight: 800; }

.pd__actions { display: flex; flex-wrap: wrap; gap: .8rem; }

.pd__related { margin-top: var(--xy-space-7); }
.pd__rel-title { font-size: var(--xy-fs-xl); margin-bottom: var(--xy-space-4); }

.pd__rel-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--xy-space-3); }
.rel-card { display: block; border: 1px solid var(--xy-border); border-radius: var(--xy-radius); overflow: hidden; background: #fff; transition: transform var(--xy-transition), box-shadow var(--xy-transition); }
.rel-card:hover { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(13, 59, 102, .12); }
.rel-card img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; }
.rel-card__body { padding: .7rem .85rem .9rem; }
.rel-card__name { font-size: var(--xy-fs-sm); font-weight: 700; line-height: 1.35; color: var(--xy-text); }
.rel-card__model { font-size: var(--xy-fs-xs); color: var(--xy-sub); margin-top: .15rem; }

@media (max-width: 860px) {
  .pd__layout { grid-template-columns: 1fr; gap: var(--xy-space-4); }
  .pd__rel-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   Video gallery + modal (v2)
   ============================================================ */
.pd__video { margin-top: 22px; }
.pd__video video { width: 100%; border-radius: 12px; background: #000; }

.vgrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.vcard {
  margin: 0;
  background: #fff;
  border: 1px solid var(--xy-border);
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(13,59,102,.05);
  transition: transform .2s ease, box-shadow .2s ease;
}
.vcard:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(13,59,102,.12); }
.vcard__thumb { position: relative; aspect-ratio: 16/9; background: #0d3b66; }
.vcard__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vcard__play {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(13,59,102,.18); transition: background .2s ease;
}
.vcard__play::after {
  content: ""; width: 54px; height: 54px; border-radius: 50%;
  background: rgba(255,255,255,.92) center/46% no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%230d3b66'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E");
  box-shadow: 0 4px 14px rgba(0,0,0,.25);
}
.vcard:hover .vcard__play { background: rgba(13,59,102,.05); }
.vcard figcaption { padding: 12px 14px; font-size: 14px; font-weight: 600; color: var(--xy-primary); }

.vmodal { position: fixed; inset: 0; z-index: 999; background: rgba(8,20,35,.82); display: flex; align-items: center; justify-content: center; padding: 20px; }
.vmodal__box { width: min(960px, 100%); }
.vmodal__box video { width: 100%; max-height: 76vh; border-radius: 12px; background: #000; display: block; }
#vModalClose { margin: 14px auto 0; display: block; padding: 9px 26px; border: 0; border-radius: 999px; background: #fff; color: #0d3b66; font-size: 14px; font-weight: 600; cursor: pointer; }

@media (max-width: 900px) { .vgrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .vgrid { grid-template-columns: 1fr; } }

/* [hidden] 必须压过 .vmodal 的 display:flex，否则弹窗一加载就显示且关不掉 */
.vmodal[hidden] { display: none !important; }

/* card image & title clickable -> detail page */
a.ph { display: block; color: inherit; }
a.ph:hover img { transform: scale(1.05); }
.ph img { transition: transform .35s ease; }
.product-card h3 { margin: 0; }
.product-card h3 a { color: inherit; text-decoration: none; }
.product-card h3 a:hover { color: #e8590c; }

/* ============================================================
   Chinese / Japanese typography (2026-10-30)
   CJK glyphs come from the system stack; Latin UI fonts stay first
   so model numbers and brand names keep their original look.
   ============================================================ */
html[lang="zh"] body,
html[lang="ja"] body {
  font-family: var(--xy-font);
  letter-spacing: .01em;
}

html[lang="zh"] p,
html[lang="ja"] p,
html[lang="zh"] li,
html[lang="ja"] li {
  line-height: 1.9;
}

/* CJK headlines read tight with the Latin tracking of the default styles */
html[lang="zh"] h1, html[lang="ja"] h1,
html[lang="zh"] h2, html[lang="ja"] h2,
html[lang="zh"] h3, html[lang="ja"] h3 {
  letter-spacing: 0;
  line-height: 1.35;
  word-break: keep-all;
  /* keep-all 下无空格的中文长标题不会换行，窄屏会溢出；允许紧急断行 */
  overflow-wrap: anywhere;
}

html[lang="zh"] .eyebrow,
html[lang="ja"] .eyebrow {
  letter-spacing: .06em;
}

/* longer CJK labels need a touch more room inside pills and buttons */
html[lang="zh"] .btn,
html[lang="ja"] .btn {
  line-height: 1.5;
}

/* nine languages now — keep the dropdown inside the viewport */
.lang__menu {
  max-height: min(70vh, 420px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.lang__item { white-space: nowrap; }