/* ═══════════════════════════════════════════════════════════════
   Mobile Responsive Styles — Precision Hardware v2
   Target: 0 ~ 767px (phones)
   Tablet: 768px ~ 1023px
   Philosophy: Industrial-grade mobile UX, clean & spacious
   ═══════════════════════════════════════════════════════════════ */


/* ───────────────────────────────────────────
   §1  BASE RESET
   ─────────────────────────────────────────── */
@media screen and (max-width: 767px) {
  html {
    font-size: 15px !important;
    -webkit-text-size-adjust: 100% !important;
  }
  body {
    -webkit-overflow-scrolling: touch !important;
    overflow-x: hidden !important;
    padding-bottom: 72px !important; /* room for bottom CTA bar */
  }
  main {
    overflow-x: hidden !important;
    padding-top: 56px !important; /* fixed header offset */
  }
}


/* ───────────────────────────────────────────
   §2  TOP UTILITY BAR — hidden on mobile
   ─────────────────────────────────────────── */
@media screen and (max-width: 767px) {
  .top-bar,
  div[class*="top-bar"],
  header ~ div.hidden {
    display: none !important;
  }
}


/* ───────────────────────────────────────────
   §3  HEADER / NAVIGATION
   ─────────────────────────────────────────── */
@media screen and (max-width: 767px) {
  #site-header {
    position: fixed !important;
    top: 0 !important; left: 0 !important; right: 0 !important;
    z-index: 1000 !important;
    background: rgba(255,255,255,0.96) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border-bottom: 1px solid rgba(226,232,240,0.8) !important;
    box-shadow: 0 1px 12px rgba(0,0,0,0.04) !important;
  }
  #site-header .max-w-\[1400px\] {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    min-height: 56px !important;
  }
  #site-header .h-\[68px\] {
    height: 56px !important;
  }

  /* Logo: compact */
  #site-header a[href*="index"] .w-11,
  #site-header a[href*="index"] .h-11 {
    width: 2rem !important; height: 2rem !important;
    border-radius: 0.5rem !important;
  }
  #site-header a[href*="index"] .w-11 i,
  #site-header a[href*="index"] div[class*="w-11"] i {
    font-size: 0.75rem !important;
  }
  #site-header a[href*="index"] .leading-none > div:first-child {
    font-size: 0.875rem !important;
    letter-spacing: -0.01em !important;
    font-weight: 700 !important;
  }
  #site-header a[href*="index"] .leading-none > div:last-child {
    display: none !important;
  }

  /* Hide desktop nav + CTA */
  #site-header nav.lg\:flex { display: none !important; }
  #site-header .lg\:flex.items-center.gap-3 > a[href*="contact"] { display: none !important; }
  #site-header .hidden.lg\:flex { display: none !important; }

  /* Hamburger: large tap target */
  #site-header button[onclick*="toggleMobile"],
  #site-header button[aria-label="Menu"] {
    display: flex !important;
    width: 2.5rem !important; height: 2.5rem !important;
    border-radius: 0.625rem !important;
    border: 1px solid #e2e8f0 !important;
    background: #f8fafc !important;
    align-items: center !important; justify-content: center !important;
    margin-left: 0.5rem !important;
    min-height: 44px !important; min-width: 44px !important;
  }
  #site-header button[onclick*="toggleMobile"] i,
  #site-header button[aria-label="Menu"] i {
    font-size: 1rem !important; color: #334155 !important;
  }

  /* ── Mobile menu panel: hidden by default, animated open ── */
  #m-menu {
    display: block !important;
    max-height: 0 !important;
    overflow: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: max-height 0.38s cubic-bezier(0.16,1,0.3,1), opacity 0.28s ease !important;
    visibility: hidden !important;
  }

  /* ── Mobile menu panel: full-screen overlay when open ── */
  #m-menu.open {
    position: fixed !important;
    top: 56px !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
    background: rgba(255,255,255,0.98) !important;
    backdrop-filter: blur(24px) !important;
    -webkit-backdrop-filter: blur(24px) !important;
    border-top: 1px solid #e2e8f0 !important;
    z-index: 999 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 0 !important;
    max-height: calc(100vh - 56px) !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    visibility: visible !important;
  }

  /* ── Nav link base: icon + text layout ── */
  #m-menu .mobile-nav-link {
    display: flex !important;
    align-items: center !important;
    gap: 0.875rem !important;
    padding: 0.875rem 1.25rem !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    color: #1e293b !important;
    border-radius: 0.75rem !important;
    margin: 0.125rem 0.5rem !important;
    transition: background 0.15s, color 0.15s, transform 0.15s !important;
    text-decoration: none !important;
    position: relative !important;
    border-bottom: none !important;
  }
  #m-menu .mobile-nav-link:active {
    background: #f1f5f9 !important;
    transform: scale(0.98) !important;
  }
  #m-menu .mobile-nav-link.active {
    background: #0f172a !important;
    color: #ffffff !important;
    border-radius: 0.75rem !important;
  }
  #m-menu .mobile-nav-link.active .m-nav-icon {
    background: rgba(255,255,255,0.15) !important;
    color: #ffffff !important;
  }

  /* ── Icon badge ── */
  .m-nav-icon {
    width: 2.25rem !important;
    height: 2.25rem !important;
    border-radius: 0.625rem !important;
    background: #f1f5f9 !important;
    color: #475569 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0.875rem !important;
    flex-shrink: 0 !important;
    transition: background 0.15s, color 0.15s !important;
  }
  .m-nav-icon-sm {
    width: 1.75rem !important;
    height: 1.75rem !important;
    border-radius: 0.5rem !important;
    font-size: 0.6875rem !important;
  }

  /* ── Accordion trigger ── */
  .mobile-accordion-trigger {
    cursor: pointer !important;
    background: none !important;
    border: none !important;
    text-align: left !important;
    width: 100% !important;
  }
  .m-accordion-arrow {
    margin-left: auto !important;
    font-size: 0.625rem !important;
    color: #94a3b8 !important;
    transition: transform 0.3s cubic-bezier(0.16,1,0.3,1) !important;
    display: flex !important;
    align-items: center !important;
    padding: 0.375rem !important;
  }

  /* ── Accordion body (collapsed by default) ── */
  .mobile-accordion-body {
    max-height: 0 !important;
    overflow: hidden !important;
    transition: max-height 0.35s cubic-bezier(0.16,1,0.3,1) !important;
    padding-left: 0.25rem !important;
  }

  /* ── Sub-category links ── */
  .mobile-sub-link {
    padding: 0.625rem 1rem !important;
    font-size: 0.9375rem !important;
    font-weight: 500 !important;
    color: #64748b !important;
    gap: 0.75rem !important;
    margin: 0.0625rem 0.5rem 0.0625rem 1.75rem !important;
    border-radius: 0.625rem !important;
  }
  .mobile-sub-link:active {
    background: #f8fafc !important;
  }

  /* ── Sub-category count badge ── */
  .m-sub-count {
    margin-left: auto !important;
    font-size: 0.6875rem !important;
    font-weight: 600 !important;
    color: #94a3b8 !important;
    background: #f1f5f9 !important;
    padding: 0.125rem 0.5rem !important;
    border-radius: 9999px !important;
    min-width: 1.5rem !important;
    text-align: center !important;
  }

  /* ── Bottom section: language + CTA ── */
  .m-menu-bottom {
    margin: 1rem 0.5rem 0.5rem !important;
    padding-top: 1rem !important;
    border-top: 1px solid #f1f5f9 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.75rem !important;
  }
  .m-lang-row {
    display: flex !important;
    gap: 0.5rem !important;
  }
  .m-lang-btn {
    flex: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.375rem !important;
    padding: 0.625rem 0.75rem !important;
    border-radius: 0.625rem !important;
    font-size: 0.8125rem !important;
    font-weight: 600 !important;
    color: #475569 !important;
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    text-decoration: none !important;
    transition: all 0.15s !important;
  }
  .m-lang-btn:active {
    transform: scale(0.97) !important;
  }
  .m-lang-active {
    background: #2563eb !important;
    color: #ffffff !important;
    border-color: #2563eb !important;
  }
  .m-menu-cta {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem !important;
    padding: 0.875rem 1.5rem !important;
    border-radius: 0.875rem !important;
    background: linear-gradient(135deg, #f97316, #ea580c) !important;
    color: #ffffff !important;
    font-size: 0.9375rem !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    box-shadow: 0 4px 16px -2px rgba(249,115,22,0.35) !important;
    transition: transform 0.15s, box-shadow 0.15s !important;
    min-height: 48px !important;
  }
  .m-menu-cta:active {
    transform: scale(0.97) !important;
  }

  /* ── Section dividers inside menu ── */
  .mobile-accordion + .mobile-nav-link {
    margin-top: 0.125rem !important;
  }
}


/* ───────────────────────────────────────────
   §4  HERO SECTION (Home + Inner Pages)
   ─────────────────────────────────────────── */
@media screen and (max-width: 767px) {
  .hero-bg {
    padding-top: 2.5rem !important; padding-bottom: 3rem !important;
    min-height: auto !important;
  }
  .hero-bg .max-w-\[1400px\] {
    padding-left: 1.25rem !important; padding-right: 1.25rem !important;
  }
  .hero-bg h1,
  .hero-bg .section-title,
  .hero-bg [class*="text-5xl"],
  .hero-bg [class*="text-4xl"] {
    font-size: 1.75rem !important;
    line-height: 1.2 !important;
    letter-spacing: -0.02em !important;
    font-weight: 800 !important;
  }
  .hero-bg .text-xl,
  .hero-bg .text-2xl,
  .hero-bg .text-lg {
    font-size: 0.9375rem !important;
    line-height: 1.7 !important;
    color: #64748b !important;
  }
  .hero-bg .flex.flex-wrap.gap-4 {
    flex-direction: column !important; gap: 0.75rem !important;
  }
  .hero-bg .flex.flex-wrap.gap-4 > * { width: 100% !important; }
  .hero-bg .btn-primary,
  .hero-bg .btn-ghost,
  .hero-bg .btn-orange {
    padding: 0.875rem 1.5rem !important;
    font-size: 0.9375rem !important;
    width: 100% !important; justify-content: center !important;
    border-radius: 0.875rem !important; min-height: 48px !important;
  }
  .hero-blob-1, .hero-blob-2 {
    width: 160px !important; height: 160px !important;
    filter: blur(45px) !important;
  }
  .scroll-indicator { display: none !important; }

  /* Hero visual card: keep visible but compact */
  .hero-bg .lg\:col-span-5 {
    display: block !important;
  }
  .hero-bg .lg\:col-span-5 .rounded-3xl,
  .hero-bg .lg\:col-span-5 [class*="border-line"] {
    max-width: min(100%, 360px) !important;
    margin: 0 auto !important;
    border-radius: 1.25rem !important;
    overflow: hidden !important;
  }
  .hero-bg .lg\:col-span-5 .bg-gradient-to-r {
    padding: 0.875rem 1.125rem !important;
  }
  .hero-bg .lg\:col-span-5 .bg-gradient-to-r .text-lg {
    font-size: 0.9375rem !important;
  }
  .hero-bg .lg\:col-span-5 .p-6 {
    padding: 1rem !important;
  }
  .hero-bg .lg\:col-span-5 .px-6.pb-6 {
    padding: 0 1rem 1rem !important;
  }
  .hero-bg .lg\:col-span-5 .py-3 {
    padding-top: 0.75rem !important;
    padding-bottom: 0.75rem !important;
  }
  /* Hero spec rows: tighter */
  .hero-bg .lg\:col-span-5 .flex.items-center.justify-between.py-3 {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
  }

  /* Hero trust badges row: horizontal scroll */
  .hero-bg .flex.flex-wrap.gap-3,
  .hero-bg .flex.flex-wrap.items-center.gap-4 {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    padding-bottom: 0.25rem !important;
    gap: 0.75rem !important;
  }
  .hero-bg .flex.flex-wrap.gap-3::-webkit-scrollbar { display: none !important; }
  .hero-bg .badge { flex-shrink: 0 !important; }
  /* Trust check items: smaller gap on mobile */
  .hero-bg .flex.flex-wrap.items-center.gap-4 .w-px {
    display: none !important;
  }
  .hero-bg .flex.flex-wrap.items-center.gap-4 {
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
  }
  .hero-bg .flex.flex-wrap.items-center.gap-4 > div {
    font-size: 0.75rem !important;
  }

  /* Inner page hero: reduce padding */
  section.pt-20.pb-28,
  section.lg\:pt-28.lg\:pb-36 {
    padding-top: 4.5rem !important;
    padding-bottom: 3rem !important;
  }
  section.pt-20.pb-28 nav,
  section.lg\:pt-28.lg\:pb-36 nav {
    margin-bottom: 1.5rem !important;
  }
}


/* ───────────────────────────────────────────
   §5  SECTION TYPOGRAPHY
   ─────────────────────────────────────────── */
@media screen and (max-width: 767px) {
  .section-title,
  h2[class*="section-title"] {
    font-size: 1.5rem !important;
    line-height: 1.25 !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
  }
  .section-eyebrow {
    font-size: 0.6875rem !important;
    letter-spacing: 0.08em !important;
  }
  .section-subtitle,
  p[class*="section-subtitle"] {
    font-size: 0.9375rem !important;
    line-height: 1.7 !important;
    color: #64748b !important;
  }
  /* Section header: better alignment */
  .flex.flex-col.lg\:flex-row.lg\:items-end.lg\:justify-between {
    gap: 1rem !important;
    margin-bottom: 1.5rem !important;
  }
  .flex.flex-col.lg\:flex-row .btn-ghost {
    align-self: flex-start !important;
  }
}


/* ───────────────────────────────────────────
   §6  GRIDS — responsive column overrides
   ─────────────────────────────────────────── */
@media screen and (max-width: 767px) {
  /* Force single column by default */
  .grid.grid-cols-2,
  .grid.grid-cols-3,
  .grid.grid-cols-4,
  .grid.grid-cols-5,
  .grid.grid-cols-6,
  .grid.md\:grid-cols-2,
  .grid.md\:grid-cols-3,
  .grid.md\:grid-cols-4,
  .grid.lg\:grid-cols-2,
  .grid.lg\:grid-cols-3,
  .grid.lg\:grid-cols-4,
  .grid.lg\:grid-cols-12 {
    grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
  }

  /* Category section: 2 columns on mobile with better gap */
  section .grid.grid-cols-2,
  section .grid.grid-cols-3,
  section .grid.grid-cols-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.75rem !important;
  }

  /* Featured products: 2 columns on mobile */
  .grid.grid-cols-1.sm\:grid-cols-2.lg\:grid-cols-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.75rem !important;
  }
  /* Featured product card: compact and clean */
  .grid.grid-cols-1.sm\:grid-cols-2.lg\:grid-cols-3 .product-card {
    border-radius: 0.875rem !important;
  }
  .grid.grid-cols-1.sm\:grid-cols-2.lg\:grid-cols-3 .p-6 {
    padding: 0.75rem !important;
  }
  .grid.grid-cols-1.sm\:grid-cols-2.lg\:grid-cols-3 .product-img-wrap {
    padding: 0.5rem !important;
  }
  .grid.grid-cols-1.sm\:grid-cols-2.lg\:grid-cols-3 .text-\[11px\].font-mono {
    font-size: 0.5625rem !important;
    padding: 0.0625rem 0.375rem !important;
  }
  .grid.grid-cols-1.sm\:grid-cols-2.lg\:grid-cols-3 .text-\[1\.0625rem\] {
    font-size: 0.8125rem !important;
    line-height: 1.35 !important;
  }
  .grid.grid-cols-1.sm\:grid-cols-2.lg\:grid-cols-3 .text-\[11px\] {
    font-size: 0.5625rem !important;
  }
  .grid.grid-cols-1.sm\:grid-cols-2.lg\:grid-cols-3 .text-sm {
    font-size: 0.6875rem !important;
  }

  /* Home hero: force single column, stack image below text */
  .grid.grid-cols-1.lg\:grid-cols-12 {
    grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
    gap: 2rem !important;
  }
  .grid.grid-cols-1.lg\:grid-cols-12 .lg\:col-span-5,
  .grid.grid-cols-1.lg\:grid-cols-12 .lg\:col-span-7 {
    grid-column: span 1 !important;
  }

  /* Stats grid: keep 2 columns with better spacing */
  .grid.grid-cols-2.md\:grid-cols-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 1rem !important;
  }

  /* Certifications grid: 2 columns */
  .grid.grid-cols-2.sm\:grid-cols-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.75rem !important;
  }

  /* Feature cards: 1 column for better readability */
  .grid.grid-cols-1.sm\:grid-cols-2.gap-5 {
    grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
    gap: 0.75rem !important;
  }
}


/* ───────────────────────────────────────────
   §7  CATEGORY CARDS
   ─────────────────────────────────────────── */
@media screen and (max-width: 767px) {
  .cat-card {
    padding: 1rem !important;
    border-radius: 1rem !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
  }
  .cat-card .w-14, .cat-card .h-14 {
    width: 2.25rem !important; height: 2.25rem !important;
    border-radius: 0.625rem !important;
    margin-bottom: 0.625rem !important;
  }
  .cat-card .w-14 i, .cat-card .h-14 i {
    font-size: 1rem !important;
  }
  .cat-card .text-xl { font-size: 0.8125rem !important; line-height: 1.3 !important; }
  .cat-card .text-sm { font-size: 0.6875rem !important; margin-bottom: 0.375rem !important; }
  .cat-card-arrow {
    width: 1.75rem !important; height: 1.75rem !important;
    top: 0.625rem !important; right: 0.625rem !important;
  }
  .cat-card-arrow i { font-size: 0.625rem !important; }
  /* Sub-tags: smaller */
  .cat-card .text-\[11px\] {
    font-size: 0.5625rem !important;
    padding: 0.125rem 0.375rem !important;
  }
}


/* ───────────────────────────────────────────
   §8  PRODUCTS PAGE
   ─────────────────────────────────────────── */
@media screen and (max-width: 767px) {

  /* ── Page hero (blue bg) ── */
  section[style*="linear-gradient(135deg"] {
    padding: 1.5rem 0 !important;
  }
  section[style*="linear-gradient(135deg"] .max-w-\[1400px\] {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  section[style*="linear-gradient(135deg"] h1 {
    font-size: 1.5rem !important;
  }

  /* ── Category L1 buttons: horizontal scroll with visual hints ── */
  .cat-l1-scroll {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: 4px !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    gap: 0.5rem !important;
    position: relative !important;
    scroll-snap-type: x proximity !important;
  }
  .cat-l1-scroll::-webkit-scrollbar { display: none !important; }
  .cat-l1-scroll .cat-l1-btn {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    padding: 0.5rem 0.875rem !important;
    font-size: 0.8125rem !important;
    border-radius: 0.625rem !important;
    scroll-snap-align: start !important;
  }

  /* Visual scroll hint: fade edges */
  .cat-l1-scroll::after {
    content: '' !important;
    position: sticky !important;
    right: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 3rem !important;
    min-width: 3rem !important;
    flex-shrink: 0 !important;
    background: linear-gradient(to right, transparent, white) !important;
    pointer-events: none !important;
  }

  /* Category section wrapper: add scroll hint arrow */
  section .bg-white.rounded-2xl.border.border-line.p-5:has(.cat-l1-scroll) {
    position: relative !important;
    padding-right: 1rem !important;
  }

  /* Show "swipe" hint text on first visit */
  .cat-l1-scroll-wrapper {
    position: relative !important;
  }
  .cat-l1-scroll-wrapper .scroll-hint {
    position: absolute !important;
    right: 0.75rem !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    background: #2563eb !important;
    color: white !important;
    font-size: 0.625rem !important;
    font-weight: 600 !important;
    padding: 0.25rem 0.5rem !important;
    border-radius: 0.375rem !important;
    white-space: nowrap !important;
    z-index: 5 !important;
    animation: pulseHint 2s ease-in-out 3 !important;
    pointer-events: none !important;
  }
  @keyframes pulseHint {
    0%, 100% { opacity: 0.7; }
    50% { opacity: 1; }
  }

  /* ── Search form: stacked on mobile ── */
  #search-form {
    flex-direction: column !important;
    gap: 0 !important;
    width: 100% !important;
  }
  #search-form > div { width: 100% !important; }
  #search-form input[type="text"] {
    font-size: 1rem !important;
    padding: 0.875rem 1rem 0.875rem 2.75rem !important;
    border-radius: 0.875rem 0.875rem 0 0 !important;
    height: 48px !important;
    border-right: 1px solid #e2e8f0 !important;
    border-left: 1px solid #e2e8f0 !important;
    border-top: 1px solid #e2e8f0 !important;
    border-bottom: none !important;
  }
  #search-form button[type="submit"] {
    width: 100% !important;
    border-radius: 0 0 0.875rem 0.875rem !important;
    justify-content: center !important;
    padding: 0.875rem 1.5rem !important;
    min-height: 48px !important;
    font-size: 0.9375rem !important;
  }

  /* Hide promo banner on mobile */
  .lg\:flex.items-center.gap-3 { display: none !important; }

  /* Hide view toggle on mobile (grid is forced) */
  #btn-grid, #btn-list,
  .flex.items-center.bg-surface.border.border-line.rounded-xl {
    display: none !important;
  }

  /* ── Left sidebar: collapsible on mobile ── */
  aside.w-full.lg\:w-64 {
    order: -1 !important;
  }
  aside.w-full.lg\:w-64 > div {
    position: static !important;
    border-radius: 1rem !important;
    max-height: none !important;
  }
  aside.w-full.lg\:w-64 h3 {
    cursor: pointer !important;
    position: relative !important;
    padding-right: 2rem !important;
  }
  aside.w-full.lg\:w-64 h3::after {
    content: '\f078' !important;
    font-family: 'Font Awesome 6 Free' !important;
    font-weight: 900 !important;
    position: absolute !important;
    right: 0.5rem !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-size: 0.625rem !important;
    color: #94a3b8 !important;
    transition: transform 0.2s ease !important;
  }

  /* ── Product list section: stacked layout ── */
  section.max-w-\[1400px\].mx-auto.px-6.flex.flex-col.lg\:flex-row {
    flex-direction: column !important;
    gap: 1rem !important;
  }

  /* Search section: compact */
  section.max-w-\[1400px\].mx-auto.px-6.mb-6 .bg-white.rounded-2xl {
    padding: 1rem !important;
  }
  section.max-w-\[1400px\].mx-auto.px-6.mb-6 .flex.flex-wrap.items-center {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  /* Category L1 section: compact padding */
  section.max-w-\[1400px\].mx-auto.px-6.mb-8 .bg-white.rounded-2xl {
    padding: 0.75rem 1rem !important;
  }

  /* ── Product cards: 2-column grid, polished ── */
  #products-grid {
    gap: 0.75rem !important;
  }
  #products-grid.grid.grid-cols-1.sm\:grid-cols-2.xl\:grid-cols-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.625rem !important;
  }
  #products-grid .product-card {
    border-radius: 0.875rem !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04) !important;
    overflow: hidden !important;
    transition: transform 0.15s, box-shadow 0.15s !important;
  }
  #products-grid .product-card:active {
    transform: scale(0.98) !important;
  }
  .product-img-wrap {
    aspect-ratio: 4/3 !important;
    padding: 0.625rem !important;
    background: #f8fafc !important;
    border-radius: 0 !important;
    border-bottom: 1px solid #f1f5f9 !important;
  }
  .product-card .p-5,
  .product-card .p-6 {
    padding: 0.625rem !important;
  }
  .product-card .p-5 h3,
  .product-card .p-6 h3,
  .product-card .text-\[1\.0625rem\] {
    font-size: 0.8125rem !important;
    line-height: 1.35 !important;
    font-weight: 600 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    margin-bottom: 0.25rem !important;
  }
  .product-card .text-sm { font-size: 0.6875rem !important; line-height: 1.4 !important; }
  .product-card .font-mono,
  .product-card .text-\[11px\].font-mono {
    font-size: 0.5625rem !important;
    padding: 0.0625rem 0.375rem !important;
    background: #eff6ff !important;
    border-radius: 0.25rem !important;
    color: #2563eb !important;
  }
  /* Card footer: compact */
  .product-card .mt-5.pt-4 {
    margin-top: 0.375rem !important;
    padding-top: 0.5rem !important;
  }
  .product-card .mt-5 .text-xs {
    font-size: 0.5625rem !important;
  }
  .product-card .mt-5 .text-sm {
    font-size: 0.6875rem !important;
  }

  /* List-view → card layout */
  #products-grid.list-view .product-card {
    display: block !important;
    flex-direction: column !important;
  }
  #products-grid.list-view .product-img-wrap {
    width: 100% !important; border-radius: 0 !important;
  }
}


/* ───────────────────────────────────────────
   §9  PRODUCT DETAIL PAGE
   ─────────────────────────────────────────── */
@media screen and (max-width: 767px) {
  /* Hero section: reduce padding */
  section.bg-white.py-10,
  section.bg-white.py-14 {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
  }
  section.bg-white .max-w-\[1400px\].px-6 {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  /* Main layout: stack image above info */
  .grid.grid-cols-1.lg\:grid-cols-12.gap-10,
  .grid.grid-cols-1.lg\:grid-cols-12.gap-16 {
    gap: 1.5rem !important;
  }

  /* Main image container */
  .lg\:col-span-6 .bg-paper.rounded-3xl,
  .lg\:sticky .bg-paper.rounded-3xl {
    border-radius: 1rem !important;
    padding: 1.5rem !important;
    aspect-ratio: 1/1 !important;
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
  }
  .lg\:sticky .bg-paper.rounded-3xl img {
    max-height: 60vw !important;
  }

  /* Remove sticky on mobile */
  .lg\:sticky { position: static !important; }

  /* Thumbnails: smaller, horizontal scroll */
  .lg\:sticky > .flex.flex-wrap.gap-2\.5,
  .lg\:sticky > div:last-child:not(.bg-paper) {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 0.5rem !important;
    padding-bottom: 0.25rem !important;
    scrollbar-width: none !important;
  }
  .lg\:sticky > .flex.flex-wrap.gap-2\.5::-webkit-scrollbar,
  .lg\:sticky > div:last-child:not(.bg-paper)::-webkit-scrollbar {
    display: none !important;
  }

  .thumb-btn {
    width: 3.5rem !important; height: 3.5rem !important;
    border-radius: 0.5rem !important;
    padding: 0.125rem !important;
    border-width: 1.5px !important;
    flex-shrink: 0 !important;
  }
  .thumb-btn.sm\:w-24,
  .thumb-btn.sm\:h-24 {
    width: 3.5rem !important; height: 3.5rem !important;
  }

  /* Product info titles */
  .lg\:col-span-6 .text-3xl,
  .lg\:col-span-6 h1.text-3xl { font-size: 1.375rem !important; font-weight: 700 !important; line-height: 1.25 !important; }
  .lg\:col-span-6 .text-2xl { font-size: 1.125rem !important; }
  .lg\:col-span-6 .text-lg { font-size: 0.9375rem !important; }

  /* Tags row: allow wrapping */
  .lg\:col-span-6 .flex.items-center.gap-2.mb-4 {
    flex-wrap: wrap !important;
    gap: 0.375rem !important;
  }

  /* Quick specs: 2 columns */
  .grid.grid-cols-2.gap-4.mb-8 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.625rem !important;
  }
  .grid.grid-cols-2.gap-4.mb-8 .card-hover.p-5 {
    padding: 0.75rem !important;
  }
  .grid.grid-cols-2.gap-4.mb-8 .card-hover.p-5 .text-\[10px\] {
    font-size: 0.5625rem !important;
  }

  /* CTA buttons: full width stack */
  .flex.flex-col.sm\:flex-row.gap-3.mb-6 {
    flex-direction: column !important;
    gap: 0.625rem !important;
  }
  .flex.flex-col.sm\:flex-row.gap-3.mb-6 > * {
    width: 100% !important;
  }

  /* Compare button: full width */
  #compare-section .btn-ghost-b {
    width: 100% !important;
    justify-content: center !important;
  }

  /* Downloads: 2 columns compact */
  .grid.grid-cols-2.gap-3 .card-hover.\!p-4 {
    padding: 0.625rem !important;
  }
  .grid.grid-cols-2.gap-3 .card-hover.\!p-4 .w-10,
  .grid.grid-cols-2.gap-3 .card-hover.\!p-4 .h-10 {
    width: 2.25rem !important;
    height: 2.25rem !important;
  }
  .grid.grid-cols-2.gap-3 .card-hover.\!p-4 .w-10 i {
    font-size: 0.875rem !important;
  }
  .grid.grid-cols-2.gap-3 .card-hover.\!p-4 .text-sm {
    font-size: 0.75rem !important;
  }

  /* Spec table: scrollable wrapper */
  .bg-white.border.border-line.rounded-3xl.overflow-hidden {
    border-radius: 0.875rem !important;
  }
  .spec-table {
    font-size: 0.6875rem !important;
    min-width: 540px !important;
  }
  .spec-table thead th {
    padding: 0.5rem 0.5rem !important;
    font-size: 0.5625rem !important;
    background: #f8fafc !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
  }
  .spec-table tbody td {
    padding: 0.5rem 0.5rem !important;
    white-space: nowrap !important;
    border-bottom: 1px solid #f1f5f9 !important;
    font-size: 0.6875rem !important;
  }

  /* Description/Features/Apps: single column stack */
  .grid.grid-cols-1.lg\:grid-cols-3.gap-6 {
    grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
    gap: 0.875rem !important;
  }
  .grid.grid-cols-1.lg\:grid-cols-3.gap-6 .card-hover.p-8 {
    padding: 1rem !important;
  }

  /* Related products: 2 columns */
  .grid.grid-cols-2.lg\:grid-cols-4.gap-5 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.625rem !important;
  }
  .grid.grid-cols-2.lg\:grid-cols-4.gap-5 .p-5 {
    padding: 0.5rem !important;
  }
  .grid.grid-cols-2.lg\:grid-cols-4.gap-5 .text-\[10px\] {
    font-size: 0.5625rem !important;
  }
  .grid.grid-cols-2.lg\:grid-cols-4.gap-5 h4 {
    font-size: 0.75rem !important;
  }

  /* Lightbox: full-screen on mobile */
  #lightbox > div:last-child > div,
  #lightbox .max-w-\[90vw\] {
    max-width: calc(100vw - 1.5rem) !important;
    width: 100% !important;
    margin: 0 0.75rem !important;
    border-radius: 1rem !important;
  }
  #lightbox img { max-height: calc(100vh - 8rem) !important; }

  /* Breadcrumb: compact */
  section.bg-paper .max-w-\[1400px\] {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    padding-top: 0.75rem !important;
    padding-bottom: 0.75rem !important;
  }

  /* Spec table legend: stack */
  .grid.grid-cols-2.md\:grid-cols-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.375rem !important;
  }
}


/* ───────────────────────────────────────────
   §10  COMPARE PAGE
   ─────────────────────────────────────────── */
@media screen and (max-width: 767px) {
  /* Compare hero */
  section.pt-20.pb-28 .section-title {
    font-size: 1.5rem !important;
  }

  /* Compare table: force horizontal scroll */
  .overflow-x-auto.rounded-2xl {
    border-radius: 0.75rem !important;
    -webkit-overflow-scrolling: touch !important;
  }
  table.w-full.min-w-\[600px\] {
    font-size: 0.75rem !important;
    min-width: 500px !important;
  }
  table.w-full.min-w-\[600px\] th,
  table.w-full.min-w-\[600px\] td {
    padding: 0.5rem 0.625rem !important;
  }

  /* Compare product cards: stack */
  .grid.grid-cols-1.md\:grid-cols-2,
  .grid.grid-cols-1.md\:grid-cols-3 {
    grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
  }
  .bg-gray-50.rounded-2xl.p-4 {
    padding: 1rem !important;
    border-radius: 0.875rem !important;
  }
  .h-28 { height: 5rem !important; }
}


/* ───────────────────────────────────────────
   §11  ABOUT PAGE
   ─────────────────────────────────────────── */
@media screen and (max-width: 767px) {
  /* Stats */
  .stat-num.text-5xl { font-size: 2rem !important; }
  .stat-num.text-6xl { font-size: 2.25rem !important; }

  /* Timeline cards */
  .card-hover.overflow-hidden .flex.flex-col.sm\:flex-row {
    flex-direction: column !important;
    gap: 0.5rem !important;
    padding: 1rem !important;
  }
  .card-hover.overflow-hidden .w-12.h-12 {
    width: 2.5rem !important; height: 2.5rem !important;
  }

  /* Mission section: stack */
  .grid.grid-cols-1.lg\:grid-cols-12.gap-16 {
    gap: 2rem !important;
  }

  /* Certifications */
  .card-hover.p-6 {
    padding: 0.875rem !important;
  }
  .stat-num.text-2xl { font-size: 1.25rem !important; }
}


/* ───────────────────────────────────────────
   §12  FACTORY PAGE
   ─────────────────────────────────────────── */
@media screen and (max-width: 767px) {
  /* Hero image */
  .aspect-\[16\/7\] {
    aspect-ratio: 16/9 !important;
    border-radius: 1rem !important;
  }
  .aspect-\[16\/7\] .absolute.bottom-8 {
    bottom: 1rem !important; left: 1rem !important;
  }
  .aspect-\[16\/7\] .section-title {
    font-size: 1.125rem !important;
  }

  /* Capabilities grid: 1 column */
  .grid.grid-cols-1.md\:grid-cols-2.lg\:grid-cols-3 {
    grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
  }

  /* Quality steps: stack */
  .grid.grid-cols-1.lg\:grid-cols-12.gap-10.lg\:gap-16 {
    gap: 2rem !important;
  }

  /* Quality promise bar: horizontal scroll */
  .flex.flex-wrap.items-center.justify-center.gap-6.mb-14 {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    justify-content: flex-start !important;
    padding-bottom: 0.5rem !important;
    scrollbar-width: none !important;
    gap: 0.5rem !important;
  }
  .flex.flex-wrap.items-center.justify-center.gap-6.mb-14::-webkit-scrollbar {
    display: none !important;
  }
  .flex.flex-wrap.items-center.justify-center.gap-6.mb-14 > * {
    flex-shrink: 0 !important;
  }

  /* QC image */
  .lg\:col-span-7 .aspect-\[4\/3\],
  .lg\:col-span-7 .aspect-\[16\/10\] {
    aspect-ratio: 4/3 !important;
    border-radius: 1rem !important;
  }
}


/* ───────────────────────────────────────────
   §13  INDUSTRIES PAGE
   ─────────────────────────────────────────── */
@media screen and (max-width: 767px) {
  /* Industry cards */
  .grid.grid-cols-1.md\:grid-cols-2.lg\:grid-cols-3.gap-6 {
    grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
    gap: 0.875rem !important;
  }
  .card-hover.overflow-hidden.group .aspect-\[5\/3\] {
    aspect-ratio: 16/9 !important;
  }
  .card-hover.overflow-hidden.group .p-7 {
    padding: 1rem !important;
  }
  .card-hover.overflow-hidden.group .text-xl {
    font-size: 1rem !important;
  }
}


/* ───────────────────────────────────────────
   §14  CONTACT PAGE
   ─────────────────────────────────────────── */
@media screen and (max-width: 767px) {
  /* Contact info: stack */
  .grid.grid-cols-1.lg\:grid-cols-12.gap-10 {
    grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
  }
  .lg\:col-span-4.space-y-4 {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.625rem !important;
  }
  .lg\:col-span-4.space-y-4 > * {
    margin-top: 0 !important;
  }
  .lg\:col-span-4.space-y-4 > :last-child {
    grid-column: span 2 !important;
  }

  /* Contact card: compact */
  .lg\:col-span-4 .p-6 {
    padding: 0.875rem !important;
    border-radius: 0.75rem !important;
  }
  .lg\:col-span-4 .w-13 {
    width: 2.5rem !important; height: 2.5rem !important;
  }

  /* Form */
  .card-hover.p-8.lg\:p-12 {
    padding: 1.25rem !important;
  }
  .grid.grid-cols-1.sm\:grid-cols-2.gap-5 {
    grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
    gap: 0.875rem !important;
  }
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  textarea {
    padding: 0.875rem 1rem !important;
    font-size: 1rem !important;
    border-radius: 0.75rem !important;
    border: 1px solid #e2e8f0 !important;
    background: #f8fafc !important;
    min-height: 48px !important;
  }
  button[type="submit"],
  input[type="submit"] {
    padding: 0.875rem 2rem !important;
    font-size: 0.9375rem !important;
    border-radius: 0.875rem !important;
    width: 100% !important;
    min-height: 48px !important;
    font-weight: 600 !important;
  }

  /* Map */
  .rounded-3xl[style*="height:400px"] {
    height: 280px !important;
    border-radius: 1rem !important;
  }
}


/* ───────────────────────────────────────────
   §15  TESTIMONIALS
   ─────────────────────────────────────────── */
@media screen and (max-width: 767px) {
  .testimonial-card,
  [class*="testimonial"] blockquote,
  [class*="testimonial"] p {
    word-break: normal !important;
    overflow-wrap: break-word !important;
    hyphens: none !important;
    font-size: 0.9375rem !important;
    line-height: 1.7 !important;
    color: #475569 !important;
  }
  .testimonial-card {
    padding: 1.5rem !important;
    border-radius: 1rem !important;
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
  }
  .testimonial-prev,
  .testimonial-next,
  button[class*="testimonial"] {
    width: 2rem !important; height: 2rem !important;
    border-radius: 50% !important;
    background: white !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important;
  }
}


/* ───────────────────────────────────────────
   §16  FOOTER
   ─────────────────────────────────────────── */
@media screen and (max-width: 767px) {
  .footer-bg .grid.grid-cols-12,
  footer .grid.grid-cols-12,
  .footer-bg .grid,
  footer .grid {
    grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
    gap: 1.5rem !important;
  }
  .footer-bg .md\:col-span-4,
  .footer-bg .md\:col-span-2,
  footer .md\:col-span-4,
  footer .md\:col-span-2 {
    grid-column: span 1 / span 1 !important;
  }
  .footer-bg { padding: 2.5rem 1.25rem 1.5rem !important; }
  .footer-bg h4 {
    font-size: 0.875rem !important;
    font-weight: 700 !important;
    margin-bottom: 0.75rem !important;
    color: #1e293b !important;
  }
  .footer-bg a { font-size: 0.875rem !important; padding: 0.375rem 0 !important; }

  /* Footer bottom row: stack vertically */
  .footer-bg .flex.items-center.justify-between,
  footer .flex.items-center.justify-between {
    flex-direction: column !important;
    gap: 0.75rem !important;
    align-items: flex-start !important;
    padding-top: 1.5rem !important;
    border-top: 1px solid #e2e8f0 !important;
    margin-top: 1.5rem !important;
  }
}


/* ───────────────────────────────────────────
   §17  BOTTOM CTA BAR (mobile only)
   ─────────────────────────────────────────── */
@media screen and (max-width: 767px) {
  #mobile-cta-bar {
    display: flex !important;
    position: fixed !important;
    bottom: 0 !important; left: 0 !important; right: 0 !important;
    z-index: 9999 !important;
    background: rgba(255,255,255,0.97) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border-top: 1px solid #e2e8f0 !important;
    padding: 0.5rem 0.75rem calc(0.5rem + env(safe-area-inset-bottom, 0px)) !important;
    gap: 0.5rem !important;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.06) !important;
  }
  #mobile-cta-bar a,
  #mobile-cta-bar button {
    flex: 1 1 0 !important;
    justify-content: center !important;
    padding: 0.625rem 0.5rem !important;
    border-radius: 0.625rem !important;
    font-size: 0.8125rem !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.375rem !important;
    min-height: 44px !important;
  }
  #mobile-cta-bar a:first-child {
    background: linear-gradient(135deg, #f97316, #ea580c) !important;
    color: white !important;
    box-shadow: 0 2px 8px rgba(249,115,22,0.3) !important;
  }
  /* 对比按钮（现在是 button 元素）*/
  #mobile-cta-bar button {
    background: #f8fafc !important;
    color: #334155 !important;
    border: 1.5px solid #e2e8f0 !important;
    cursor: pointer !important;
  }
  /* 兼容旧版 a:last-child 写法 */
  #mobile-cta-bar a:last-child {
    background: #f8fafc !important;
    color: #334155 !important;
    border: 1.5px solid #e2e8f0 !important;
  }

  /* Compare FAB: move up to avoid CTA bar */
  #compare-fab {
    bottom: 4.5rem !important;
  }
}


/* ───────────────────────────────────────────
   §18  CTA BANNER
   ─────────────────────────────────────────── */
@media screen and (max-width: 767px) {
  .cta-banner {
    border-radius: 1rem !important;
    padding: 2rem 1.25rem !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .cta-banner h2,
  .cta-banner .section-title {
    font-size: 1.375rem !important;
  }
  .cta-banner p {
    font-size: 0.9375rem !important;
  }
  .cta-banner .btn-orange {
    width: 100% !important;
    justify-content: center !important;
  }
}


/* ───────────────────────────────────────────
   §19  PAGINATION
   ─────────────────────────────────────────── */
@media screen and (max-width: 767px) {
  nav.flex.items-center.justify-center.gap-2,
  .flex.items-center.gap-2 {
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 0.375rem !important;
  }
  nav.flex.items-center.justify-center.gap-2 a,
  nav.flex.items-center.justify-center.gap-2 span,
  .flex.items-center.gap-2 a,
  .flex.items-center.gap-2 span {
    min-width: 2.25rem !important;
    height: 2.25rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 0.5rem !important;
    font-size: 0.8125rem !important;
    border: 1px solid #e2e8f0 !important;
  }
}


/* ───────────────────────────────────────────
   §20  BREADCRUMB
   ─────────────────────────────────────────── */
@media screen and (max-width: 767px) {
  .breadcrumb,
  nav[class*="breadcrumb"],
  .flex.items-center.gap-2.text-sm {
    font-size: 0.75rem !important;
    gap: 0.25rem !important;
    flex-wrap: wrap !important;
    color: #94a3b8 !important;
  }
}


/* ───────────────────────────────────────────
   §21  TOUCH & TAP TARGETS
   ─────────────────────────────────────────── */
@media screen and (max-width: 767px) {
  .btn-primary,
  .btn-orange,
  .btn-ghost,
  .btn-ghost-b,
  .btn-text,
  button,
  a[role="button"],
  input[type="submit"] {
    min-height: 44px !important;
    min-width: 44px !important;
    touch-action: manipulation !important;
  }
  a, button {
    -webkit-tap-highlight-color: transparent !important;
  }
}


/* ───────────────────────────────────────────
   §22  MODALS
   ─────────────────────────────────────────── */
@media screen and (max-width: 767px) {
  #confirm-modal > div:last-child,
  #confirm-modal-content,
  #contact-modal-content {
    max-width: calc(100vw - 1.5rem) !important;
    width: 100% !important;
    margin: 0 auto !important;
    border-radius: 1rem !important;
    padding: 1.5rem !important;
  }

  /* Compare modal: full-screen on mobile */
  #compare-modal-content {
    max-width: 100% !important;
    max-height: 100vh !important;
    border-radius: 0 !important;
  }
}


/* ───────────────────────────────────────────
   §23  ANIMATION SPEED-UP
   ─────────────────────────────────────────── */
@media screen and (max-width: 767px) {
  .reveal,
  .reveal-left,
  .reveal-right,
  .reveal-scale {
    transition-duration: 0.4s !important;
  }
}


/* ───────────────────────────────────────────
   §24  SPACING ADJUSTMENTS
   ─────────────────────────────────────────── */
@media screen and (max-width: 767px) {
  /* Section spacing: generous but not wasteful */
  section { padding-top: 2.75rem !important; padding-bottom: 2.75rem !important; }
  .py-20 { padding-top: 2.75rem !important; padding-bottom: 2.75rem !important; }
  .py-16 { padding-top: 2.25rem !important; padding-bottom: 2.25rem !important; }
  .py-12 { padding-top: 1.75rem !important; padding-bottom: 1.75rem !important; }
  .px-8 { padding-left: 1.25rem !important; padding-right: 1.25rem !important; }
  .gap-8 { gap: 1.5rem !important; }
  .gap-6 { gap: 1.25rem !important; }
  .gap-4 { gap: 1rem !important; }

  /* Override max-w container padding */
  .max-w-\[1400px\].mx-auto.px-8 {
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
  }
  .max-w-\[1400px\].mx-auto.px-6 {
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
  }

  /* Card content: breathing room */
  .card-hover.p-7 {
    padding: 1.125rem !important;
  }
  .card-hover.p-6 {
    padding: 1rem !important;
  }

  /* Why Choose Us section: better spacing */
  .grid.grid-cols-1.lg\:grid-cols-12.gap-16 {
    gap: 2rem !important;
  }
  /* Quality commitment card: compact */
  .bg-gradient-to-br.rounded-3xl.p-8 {
    padding: 1.25rem !important;
    border-radius: 1.25rem !important;
  }
  .bg-gradient-to-br.rounded-3xl .w-12 {
    width: 2.5rem !important;
    height: 2.5rem !important;
  }
  .bg-gradient-to-br.rounded-3xl .w-12 i {
    font-size: 0.875rem !important;
  }

  /* Feature cards: compact and readable */
  .card-hover .w-12.h-12 {
    width: 2.5rem !important;
    height: 2.5rem !important;
  }
  .card-hover .text-lg {
    font-size: 0.9375rem !important;
  }
  .card-hover .text-2xl.stat-num {
    font-size: 1.25rem !important;
  }

  /* Marquee: slower + bigger text on mobile */
  .marquee-track {
    animation-duration: 40s !important;
  }
  .marquee-track .text-2xl {
    font-size: 1.25rem !important;
  }
  .marquee-track .text-sm {
    font-size: 0.75rem !important;
  }
  .marquee-track .px-10 {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
  }
}


/* ═══════════════════════════════════════════════════════════════
   TABLET (768px ~ 1023px) — 完整平板端适配
   ═══════════════════════════════════════════════════════════════ */
@media screen and (min-width: 768px) and (max-width: 1023px) {

  /* ── §T1 全局基础 ── */
  html { font-size: 15px; }
  body { padding-bottom: 0 !important; overflow-x: hidden; }
  main { overflow-x: hidden; }

  /* ── §T2 顶部工具栏 ── */
  .top-bar,
  div.hidden.md\:block {
    display: block !important;
  }

  /* ── §T3 Header：平板端用紧凑水平布局 ── */
  #site-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 50 !important;
  }
  #site-header .max-w-\[1400px\] {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
  }
  #site-header .h-\[68px\] {
    height: 60px !important;
  }

  /* 平板端：Logo 保留完整但略缩 */
  #site-header a[href*="index"] .leading-none > div:first-child {
    font-size: 1rem !important;
  }

  /* 平板端：桌面导航隐藏，显示汉堡菜单 */
  #site-header nav.lg\:flex { display: none !important; }
  #site-header .hidden.lg\:flex { display: none !important; }

  /* 平板端汉堡按钮：显示 */
  #site-header button[onclick*="toggleMobile"],
  #site-header button[aria-label="Menu"] {
    display: flex !important;
    width: 2.5rem !important;
    height: 2.5rem !important;
    min-width: 44px !important;
    min-height: 44px !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 0.625rem !important;
    border: 1px solid #e2e8f0 !important;
    background: #f8fafc !important;
  }

  /* 平板端菜单：默认隐藏 */
  #m-menu {
    display: block !important;
    max-height: 0 !important;
    overflow: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: max-height 0.38s cubic-bezier(0.16,1,0.3,1), opacity 0.28s ease !important;
    visibility: hidden !important;
  }
  #m-menu.open {
    position: fixed !important;
    top: 60px !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: rgba(255,255,255,0.98) !important;
    backdrop-filter: blur(24px) !important;
    -webkit-backdrop-filter: blur(24px) !important;
    border-top: 1px solid #e2e8f0 !important;
    z-index: 999 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 0.5rem 0 2rem 0 !important;
    max-height: calc(100vh - 60px) !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    visibility: visible !important;
  }
  /* 平板端菜单链接更大一些，使用新版图标样式 */
  #m-menu .mobile-nav-link {
    padding: 1rem 1.5rem !important;
    font-size: 1.0625rem !important;
  }
  .m-nav-icon {
    width: 2.5rem !important;
    height: 2.5rem !important;
    font-size: 1rem !important;
  }
  .mobile-sub-link {
    padding: 0.75rem 1.5rem 0.75rem 2.5rem !important;
    font-size: 0.9375rem !important;
  }
  .m-menu-bottom {
    margin: 1rem 1rem 1.5rem !important;
  }
  .m-menu-cta {
    font-size: 1rem !important;
    padding: 1rem 1.5rem !important;
  }

  /* ── §T4 Hero 区域 ── */
  .hero-bg {
    padding-top: 3rem !important;
    padding-bottom: 3.5rem !important;
  }
  .hero-bg .max-w-\[1400px\] {
    padding-left: 2rem !important;
    padding-right: 2rem !important;
  }
  .hero-bg h1,
  .hero-bg .section-title,
  .hero-bg [class*="text-5xl"],
  .hero-bg [class*="text-4xl"] {
    font-size: 2.5rem !important;
    line-height: 1.2 !important;
    letter-spacing: -0.02em !important;
  }
  .hero-bg .text-xl,
  .hero-bg .text-2xl {
    font-size: 1.0625rem !important;
    line-height: 1.65 !important;
  }

  /* Hero CTA 按钮：平板端横向排列 */
  .hero-bg .flex.flex-wrap.gap-4 {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 0.75rem !important;
  }
  .hero-bg .flex.flex-wrap.gap-4 > * {
    width: auto !important;
  }

  /* Hero 图片区域：平板端保留（不隐藏），但控制尺寸 */
  .hero-bg .lg\:col-span-5 {
    display: block !important;
  }
  .hero-bg .lg\:col-span-5 img,
  .hero-bg .lg\:col-span-5 [class*="aspect"] {
    max-width: 100% !important;
    border-radius: 1.25rem !important;
  }

  /* Hero 网格：平板端 2 列 */
  .hero-bg .grid.grid-cols-1.lg\:grid-cols-12 {
    grid-template-columns: 1fr 1fr !important;
    gap: 2rem !important;
    align-items: center !important;
  }
  .hero-bg .lg\:col-span-7 {
    grid-column: span 1 !important;
  }
  .hero-bg .lg\:col-span-5 {
    grid-column: span 1 !important;
  }

  /* Stats row：平板端 4 列 */
  .grid.grid-cols-2.md\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 1rem !important;
  }

  /* ── §T5 字体 ── */
  .section-title {
    font-size: 2rem !important;
    line-height: 1.2 !important;
  }
  .section-eyebrow { font-size: 0.75rem !important; }
  .section-subtitle { font-size: 1rem !important; }

  /* ── §T6 网格布局 ── */
  /* 2列转2列：保持不变 */
  .grid.grid-cols-1.md\:grid-cols-2,
  .grid.grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  /* 3列转2列（平板适配） */
  .grid.grid-cols-3,
  .grid.grid-cols-1.sm\:grid-cols-2.lg\:grid-cols-3,
  .grid.grid-cols-1.md\:grid-cols-2.lg\:grid-cols-3,
  .grid.grid-cols-1.md\:grid-cols-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 1.25rem !important;
  }

  /* 4列转2列 */
  .grid.grid-cols-4,
  .grid.grid-cols-1.md\:grid-cols-4,
  .grid.grid-cols-2.lg\:grid-cols-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 1rem !important;
  }

  /* 12列网格：平板端通用 */
  .grid.grid-cols-1.lg\:grid-cols-12 {
    grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
    gap: 2rem !important;
  }
  .lg\:col-span-4,
  .lg\:col-span-5,
  .lg\:col-span-6,
  .lg\:col-span-7,
  .lg\:col-span-8,
  .lg\:col-span-9 {
    grid-column: span 1 !important;
  }

  /* ── §T7 内容区域 padding ── */
  .max-w-\[1400px\].mx-auto.px-8 {
    padding-left: 2rem !important;
    padding-right: 2rem !important;
  }
  .max-w-\[1400px\].mx-auto.px-6 {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
  }
  section {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }
  .py-20 { padding-top: 3rem !important; padding-bottom: 3rem !important; }
  .py-16 { padding-top: 2.5rem !important; padding-bottom: 2.5rem !important; }

  /* ── §T8 分类卡片 ── */
  .cat-card {
    padding: 1.5rem !important;
    border-radius: 1.25rem !important;
  }
  .cat-card .w-14, .cat-card .h-14 {
    width: 3rem !important;
    height: 3rem !important;
  }

  /* ── §T9 产品列表页 ── */
  /* 分类按钮：横向可滚动 */
  .cat-l1-scroll {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
  }
  .cat-l1-scroll::-webkit-scrollbar { display: none !important; }
  .cat-l1-scroll .cat-l1-btn {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
  }

  /* 产品网格：平板端 3 列 */
  #products-grid.grid.grid-cols-1.sm\:grid-cols-2.xl\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 1rem !important;
  }

  /* 侧边栏：平板端显示，但稍窄 */
  aside.w-full.lg\:w-64 {
    width: 220px !important;
    min-width: 220px !important;
    flex-shrink: 0 !important;
  }

  /* 搜索框：保持水平布局 */
  #search-form {
    flex-direction: row !important;
  }

  /* ── §T10 产品详情页 ── */
  /* 两列布局：平板端改为上下堆叠 */
  .grid.grid-cols-1.lg\:grid-cols-12.gap-10,
  .grid.grid-cols-1.lg\:grid-cols-12.gap-16 {
    grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
    gap: 2rem !important;
  }

  /* 图片区：平板端横向排列 */
  .lg\:col-span-6 .bg-paper.rounded-3xl,
  .lg\:sticky .bg-paper.rounded-3xl {
    max-width: 420px !important;
    margin: 0 auto !important;
  }

  /* 规格表：平板端字号适中 */
  .spec-table { font-size: 0.8125rem !important; }
  .spec-table thead th { font-size: 0.75rem !important; padding: 0.75rem 1rem !important; }
  .spec-table tbody td { font-size: 0.8125rem !important; padding: 0.75rem 1rem !important; }

  /* 相关产品：平板端 3 列 */
  .grid.grid-cols-2.lg\:grid-cols-4.gap-5 {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 1rem !important;
  }

  /* 特性/应用：平板端 2 列 */
  .grid.grid-cols-1.lg\:grid-cols-3.gap-6 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 1.25rem !important;
  }

  /* ── §T11 联系页表单 ── */
  .card-hover.p-8.lg\:p-12 {
    padding: 2rem !important;
  }
  .grid.grid-cols-1.sm\:grid-cols-2.gap-5 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 1rem !important;
  }

  /* ── §T12 Footer ── */
  .footer-bg .grid.grid-cols-12,
  footer .grid.grid-cols-12 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 2rem !important;
  }
  .footer-bg .md\:col-span-4 { grid-column: span 2 !important; }
  .footer-bg .md\:col-span-2 { grid-column: span 1 !important; }
  .footer-bg { padding: 3rem 2rem 1.5rem !important; }

  /* ── §T13 底部 CTA bar：平板端隐藏 ── */
  #mobile-cta-bar { display: none !important; }

  /* ── §T14 Testimonials ── */
  .grid.grid-cols-1.md\:grid-cols-2.lg\:grid-cols-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  /* ── §T15 Industries ── */
  .grid.grid-cols-1.md\:grid-cols-2.lg\:grid-cols-3.gap-6 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 1.5rem !important;
  }

  /* ── §T16 Compare 页 ── */
  table.w-full.min-w-\[600px\] {
    font-size: 0.8125rem !important;
  }
  table.w-full.min-w-\[600px\] th,
  table.w-full.min-w-\[600px\] td {
    padding: 0.625rem 0.875rem !important;
  }

  /* ── §T17 标准间距调整 ── */
  .gap-8 { gap: 1.5rem !important; }
  .gap-6 { gap: 1.25rem !important; }

  /* ── §T18 Mega menu：平板端禁用 hover 展开 ── */
  .mega-panel {
    display: none !important;
  }
}


/* ═══════════════════════════════════════════════════════════════
   DESKTOP (>=1024px): hide mobile CTA
   ═══════════════════════════════════════════════════════════════ */
@media screen and (min-width: 1024px) {
  #mobile-cta-bar { display: none !important; }
}


/* ═══════════════════════════════════════════════════════════════
   iPHONE SAFE-AREA
   ═══════════════════════════════════════════════════════════════ */
@supports (padding: env(safe-area-inset-bottom)) {
  @media screen and (max-width: 767px) {
    #mobile-cta-bar {
      padding-bottom: calc(0.5rem + env(safe-area-inset-bottom)) !important;
    }
    main {
      padding-bottom: env(safe-area-inset-bottom) !important;
    }
  }
}


/* ═══════════════════════════════════════════════════════════════
   LANDSCAPE PHONES
   ═══════════════════════════════════════════════════════════════ */
@media screen and (max-width: 767px) and (orientation: landscape) {
  .hero-bg {
    padding-top: 1.5rem !important;
    padding-bottom: 2rem !important;
  }
  .hero-bg h1 { font-size: 1.375rem !important; }
  #m-menu.open { max-height: calc(100vh - 52px) !important; }
}


/* ═══════════════════════════════════════════════════════════════
   WECHAT BROWSER: extra bottom padding
   ═══════════════════════════════════════════════════════════════ */
@media screen and (max-width: 767px) {
  body { padding-bottom: 72px !important; }
}
@media screen and (min-width: 768px) {
  body { padding-bottom: 0 !important; }
}


/* ═══════════════════════════════════════════════════════════════
   PRINT
   ═══════════════════════════════════════════════════════════════ */
@media print {
  #mobile-cta-bar,
  #m-menu,
  .scroll-indicator {
    display: none !important;
  }
}


/* ═══════════════════════════════════════════════════════════════
   BACK TO TOP — adjust for CTA bar
   ═══════════════════════════════════════════════════════════════ */
@media screen and (max-width: 767px) {
  #backToTop {
    bottom: 5rem !important;
    right: 1rem !important;
    width: 2.5rem !important;
    height: 2.5rem !important;
  }
}