@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');

/*
 * faithful-en.css — Latin-text adjustments for the ported live (CJK-tuned) hima.auto UI.
 * Linked AFTER the live CSS on every faithful page.
 *   1. EN type ~12–18% smaller than the CN px values (visual balance).
 *   2. HIMA beveled buttons preserved but content-fitting (clip-path / scalable SVG outline).
 *   3. Experience tiles (category-s1) laid out like the live page (banner + 3-tile row).
 */

/* ── 1. English type scale ───────────────────────────────────────────────────── */
.category-s2 .txt-64-48-32 { font-size: 52px; }
.category-s2 .txt-48-40-24 { font-size: 40px; }
.category-s2 .txt-28-24-16 { font-size: 22px; }
.category-s2 .txt-32-20 { font-size: 27px; }
.category-s2 .txt-20-12 { font-size: 16px; }
.category-s2 .txt-20-16 { font-size: 17px; }
.x2-category .category-kv .kv-title1 { font-size: 42px; }
.x2-category .category-kv .kv-title2 { font-size: 22px; }
.x2-category .category-kv .kv-title3 { font-size: 14px; }
.category-s1 .txt-48-40-24 { font-size: 40px; }
.category-s1 .txt-32-24-14 { font-size: 26px; }

.hima-home-banner .headline { font-size: 42px; }
.hima-home-banner .intro { font-size: 18px; }
.hima-home-member .member-header .intro { font-size: 16px; }
.hima-home-solution .headline { font-size: 42px; }
.hima-home-solution .card-headline { font-size: 24px; }
.hima-home-solution .card-intro { font-size: 17px; }
.hima-support-card .headline { font-size: 40px; }
.hima-support-card .intro { font-size: 16px; }
.hima-home-app .headline { font-size: 40px; }
.avoid-collision-card-top-title p { font-size: 60px; }
.avoid-collision-card-mid-title { font-size: 30px; }

@media screen and (max-width: 1199px) {
  .category-s2 .txt-64-48-32 { font-size: 40px; }
  .hima-home-banner .headline,
  .hima-home-solution .headline,
  .hima-support-card .headline,
  .hima-home-app .headline { font-size: 34px; }
}

/* ── 2. HIMA beveled buttons, content-fitting ────────────────────────────────── */
/* The live hima-btn uses fixed-width SVG masks tuned for short CJK labels. We drop the
   masks and recreate the same hexagon bevel with clip-path (solid) / a non-scaling SVG
   stroke (outline) so the shape is preserved AND the button grows to fit English text. */
.category-s2-txt-wrap .category-s2-txt-btn-wrap,
.x2-category .category-kv .kv-btn {
  width: fit-content !important;
  display: flex;
  justify-content: flex-start !important;
  gap: 10px;
  flex-wrap: wrap;
}
.hima-btn.btn-solid-white,
.hima-btn.btn-outline-white {
  width: auto;
  min-width: 0;
  height: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 32px;
  font-size: 13px;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease, background-image 0.3s ease;
}
.hima-btn.btn-solid-white::before,
.hima-btn.btn-solid-white::after,
.hima-btn.btn-outline-white::before,
.hima-btn.btn-outline-white::after { display: none !important; }
/* Solid: filled hexagon via clip-path (shape) */
.hima-btn.btn-solid-white {
  background: #fff !important;
  color: #000 !important;
  clip-path: polygon(14px 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 14px 100%, 0 50%);
}
.hima-btn.btn-solid-white:hover {
  background: rgba(255, 255, 255, 0.82) !important;
}
/* Outline: full hexagon stroke via SVG bg (NO clip-path, so all edges show). Hover swaps to a filled SVG. */
.hima-btn.btn-outline-white {
  background-color: transparent !important;
  color: #fff !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 44' preserveAspectRatio='none'%3E%3Cpolygon points='14,1 186,1 199,22 186,43 14,43 1,22' fill='none' stroke='%23ffffff' stroke-opacity='0.6' stroke-width='1' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") !important;
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
}
.hima-btn.btn-outline-white:hover {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 44' preserveAspectRatio='none'%3E%3Cpolygon points='14,1 186,1 199,22 186,43 14,43 1,22' fill='%23ffffff' fill-opacity='0.16' stroke='%23ffffff' stroke-opacity='0.85' stroke-width='1' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") !important;
}

/* ── 3. Experience tiles (category-s1): banner on top + 3-tile row ───────────── */
.x2-category .category-s1 {
  width: calc(77.78vw + 107px);
  max-width: 1600px;
  margin: 80px auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.x2-category .category-s1 .s1-con {
  position: relative;
  overflow: hidden;
  border-radius: 4px;
}
.x2-category .category-s1 .s1-img { width: 100%; height: 100%; }
.x2-category .category-s1 .s1-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.x2-category .category-s1 .s1-con1 .s1-img { aspect-ratio: 2 / 1; }
/* Experience banner title is centred */
.x2-category .category-s1 .s1-con1 .s1-title {
  position: absolute;
  top: 56px;
  left: 0;
  right: 0;
  transform: none !important;
  text-align: center;
  color: #fff;
  z-index: 2;
}
.x2-category .category-s1 .flex-none { display: flex; gap: 16px; }
.x2-category .category-s1 .flex-none .s1-con { flex: 1; }
.x2-category .category-s1 .flex-none .s1-con .s1-img { aspect-ratio: 1 / 1; }
.x2-category .category-s1 .flex-none .s1-title {
  position: absolute;
  top: 32px;
  left: 32px;
  transform: none !important;
  color: #fff;
  z-index: 2;
}
.x2-category .category-s1 .s1-title .txt-16-14,
.x2-category .category-s1 .s1-title .txt-20-14 { margin-top: 10px; }
.x2-category .category-s1 .s1-title .flex-cen { display: inline-flex; align-items: center; gap: 6px; color: #fff; font-size: 14px; }
.x2-category .category-s1 .s1-arrow { font-size: 1.3em; line-height: 1; }
@media screen and (max-width: 767.9px) {
  .x2-category .category-s1 { width: calc(100vw - 32px); }
  .x2-category .category-s1 .flex-none { flex-direction: column; }
}

/* ── 4. Flagship scroll-wipe neutralizer ─────────────────────────────────────────
 * Model pages (m5/m7/m8/s800/s9…) use .img-scroll-bg-left/right overlay panels that
 * index.js scrubs open/closed during a GSAP ScrollTrigger pin. In our static port the
 * pin throws ("target null not found") and the panels initialize stuck at width:40vw,
 * covering the section content with white/black blocks for every visitor. Their CSS
 * rest state is width:0; force it so the real imagery underneath shows through. We lose
 * only the (already-broken) wipe transition. Inline width is set by JS → needs !important. */
.img-scroll-bg-left,
.img-scroll-bg-right { width: 0 !important; }

/* ── 5. Hide the mobile-menu toggle checkbox (checkbox-hack) ──────────────────────
 * Model pages carry <input id="menu-slide-switch"> for the live header's slide-out menu.
 * Its hiding rule lives in the unavailable common.css, so the raw 13px checkbox renders
 * at the top-left. Take it out of flow (off-screen) — the <label> hamburger still toggles
 * it and CSS :checked sibling selectors still fire, so the menu hack stays functional. */
#menu-slide-switch { position: absolute !important; left: -9999px !important; top: auto !important; width: 0 !important; height: 0 !important; opacity: 0 !important; pointer-events: none; }

/* UAE: remove China-only ported footer (WeChat/Weibo/app QR + Huawei copyright)
   and the CN "HIMA official website" cookie banner. Replace with an Allied
   Motors UAE footer later. */
.hima-global-footer,
.hima-global-cookie { display: none !important; }