/* ==========================================================================
   Guangzhou Hangxin Optoelectronics — Compact mobile layer + view-mode toggle
   Loaded AFTER style.css and cart.css on every page. All rules below are
   either wrapped in a mobile media query, gated on html.is-handheld, or are
   the desktop (>=769px) equivalents of inline styles extracted into classes by
   other agents. The CSS above the media queries is desktop-only and
   reproduces the pixel-for-pixel values previously set as inline styles.
   ========================================================================== */


/* ==========================================================================
   0. Desktop-only equivalents of extracted inline styles (>= 769px)
   These reproduce the exact pixel values that other agents are pulling out of
   the HTML. Do not modify desktop styles below 769px — this block exists
   solely to capture those values into classes for mobile overrides.
   ========================================================================== */

/* ---------- company.html: profile / philosophy / certs ---------- */
.profile-title {
  font-size: clamp(28px, 3.4vw, 38px);
}
.certs-row {
  margin-top: 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.cert-pill {
  padding: 8px 14px;
  background: var(--brand-soft);
  color: var(--brand);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
}
.philosophy-card {
  margin-top: 32px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 32px;
}
.philosophy-title {
  font-size: 18px;
  margin-bottom: 10px;
}
.philosophy-body { color: var(--muted); }

/* Timeline list (history events) — `li` has inline styles that we move to a class */
/* ---------- product.html: category sections ---------- */
.cat-section {
  padding: 40px 0 48px;
  border-bottom: 1px solid var(--line);
}
.cat-section-head {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.cat-section-thumb {
  width: 88px;
  height: 88px;
  border-radius: 14px;
  overflow: hidden;
  flex: none;
}
.cat-section-thumb img { width: 100%; height: 100%; object-fit: cover; }
.cat-section-title { font-size: 28px; }
.cat-section-desc { color: var(--muted); max-width: 640px; }
.cat-section-body { min-width: 0; }

/* ---------- market.html: industry sections ---------- */
.market-section { padding-top: 64px; padding-bottom: 64px; }
.market-title { font-size: clamp(26px, 3vw, 36px); }
.market-sub { margin-top: 14px; }
.market-cta { margin-top: 24px; }

/* ---------- service.html: copy + bullet list inside a .pillar ---------- */
/* `.pillar-lead` is the intro <p> inside a .pillar (was inline margin-top:10px)
   and `.pillar-list` is that pillar's bullet <ul> (was inline
   margin-top:14px; color:var(--muted); font-size:15px), whose <li>s were
   inline padding:4px 0. It is NOT a grid of pillars. */
.pillar-lead { margin-top: 10px; }
.pillar-list {
  margin-top: 14px;
  color: var(--muted);
  font-size: 15px;
}
.pillar-list li { padding: 4px 0; }

/* `.section-sub--tight` was used to replace THREE different inline
   `margin-top` values. Reproduce each in its own context so desktop is
   unchanged (the `.section-sub` default in style.css is already 16px):
     service.html contact intro  -> 16px (the default)
     company.html profile        -> 18px                                    */
.section-sub--tight { margin-top: 16px; }

/* Inline-text icon variant — used for icons that should sit beside text rather
   than occupy a square. */
.icon--text {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
}

/* Article variant of `.product-card` on blog.html — same layout, but the cart
   actions are not rendered for articles. The tag pill treatment is applied in
   the mobile block only, so desktop card metrics stay byte-identical. */
.product-card--article .product-card-actions { display: none; }

/* ---------- product.html: "All Products" grouped view ----------
   The catalog is now lazily rendered: each category gets a `.cat-section`
   stub, and the All tab renders one `.cat-section-group` per category inside a
   single `.cat-section--all`. These rules reproduce the spacing the original
   markup got from eight separate inline-styled `.cat-section`s. */
.cat-section--all { padding: 0; border-bottom: 0; }
.cat-section-group {
  padding: 40px 0 48px;
  border-bottom: 1px solid var(--line);
}
.cat-section-group:last-child { border-bottom: 0; }
.cat-section-grid { margin-top: 28px; }
.cat-section-empty { color: var(--muted); margin-top: 16px; }
.cat-section-more { margin-top: 24px; }
.cat-section-more-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 15px;
  font-weight: 600;
  color: var(--brand);
}
.cat-section-more-btn:hover { text-decoration: underline; }


/* ==========================================================================
   1. Compact mobile layer (iPhone-class devices)
   Everything below is gated on @media (max-width: 768px) / 480px or on the
   html classes set by mobile.js so desktop rendering is untouched.
   ========================================================================== */

* { -webkit-tap-highlight-color: rgba(245, 166, 35, 0.18); }

html.is-handheld { scroll-padding-top: 66px; }


/* ---------- 2. Layout primitives ---------- */
@media (max-width: 768px) {
  :root {
    --section-pad: 28px;
    --gutter: 14px;
  }

  .section { padding: var(--section-pad) 0; }
  .section--tight { padding: 28px 0; }
  .section-head { margin-bottom: 16px; }
  .section-title { font-size: 20px; }
  .section-sub { font-size: 12.5px; margin-top: 8px; }
  .eyebrow { font-size: 10.5px; margin-bottom: 8px; }
  /* Must match the specificity of the contextual desktop rule above, or the
     compact margin would never apply. */
  .section-sub--tight { margin-top: 6px; }

  /* Keep 2-up grids down to 320px — cards are small enough to fit two-up. */
  .grid { gap: 10px; }
  .grid--2,
  .grid--3,
  .grid--4 {
    grid-template-columns: repeat(2, 1fr);
  }

  .container {
    padding-left: var(--gutter);
    padding-right: var(--gutter);
  }
}

@media (max-width: 480px) {
  :root { --section-pad: 22px; }
}


/* ---------- 3. Header / nav / drawer ---------- */
@media (max-width: 768px) {
  .header-inner { height: 56px; }
  .site-header.is-scrolled .header-inner { height: 50px; }
  .logo img { height: 36px; }

  .nav-toggle { width: 44px; height: 44px; } /* keep tap target */

  .mobile-menu {
    padding-top: calc(72px + env(safe-area-inset-top));
  }
  .mobile-menu nav a { font-size: 15px; padding: 11px 4px; }
  .mobile-menu .sub a { font-size: 13px; }
  .mobile-menu .cta { margin-top: 18px; }
}


/* ---------- 4. Hero (two stacked heroes on index: 1665px -> ~750px) ---------- */
@media (max-width: 768px) {
  .hero-video {
    min-height: auto;
    padding: calc(72px + env(safe-area-inset-top)) 0 22px;
  }
  .blog-tabs {
    display: flex;
    width: 100%;
    gap: 2px;
    padding: 4px;
    margin-bottom: 20px;
  }
  .blog-tab {
    flex: 1 1 0;
    min-width: 0;
    min-height: 36px;
    padding: 8px 4px;
    font-size: 12px;
    white-space: nowrap;
  }
  .hero-video-title {
    font-size: 26px;
    margin-bottom: 14px;
    line-height: 1.05;
  }
  .hero-video-eyebrow { font-size: 10px; margin-bottom: 10px; }
  .hero-video-divider { width: 52px; height: 3px; margin-bottom: 14px; }
  .hero-video-sub { font-size: 12.5px; line-height: 1.55; }
  /* Beat style.css line 442 which forces single column at <=480px */
  .hero-video-features {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 16px;
  }
  .hv-ico { width: 28px; height: 28px; border-radius: 8px; }
  .hv-ico svg { width: 15px; height: 15px; }
  .hv-text strong { font-size: 11px; }
  .hv-text small { font-size: 10px; }
  .hv-feature { gap: 9px; }

  .hero {
    min-height: auto;
    padding: 26px 0 26px;
  }
  .hero-grid { gap: 16px; }
  .hero-media img { max-height: 150px; }
  .hero-title { font-size: 26px; margin-bottom: 12px; line-height: 1.08; }
  .hero-eyebrow { font-size: 10px; margin-bottom: 10px; }
  .hero-sub { font-size: 12.5px; margin-bottom: 16px; line-height: 1.55; }
  .hero-actions { gap: 8px; }
  .hero-actions .btn--lg { padding: 11px 18px; font-size: 13px; min-height: 44px; }
  .hero-stats { gap: 18px; margin-top: 26px; }
  .hero-stat .num { font-size: 22px; }
  .hero-stat .label { font-size: 11px; }

  /* The typewriter currently has min-width:15ch + nowrap and was a measured
     overflow source — drop the floor on mobile. */
  .typewriter { min-width: 0; white-space: normal; }
}


/* ---------- 5. Page heroes (sub-pages, 314-422px -> ~150px) ---------- */
@media (max-width: 768px) {
  .page-hero {
    padding: calc(78px + env(safe-area-inset-top)) 0 22px;
  }
  .page-hero h1 { font-size: 24px; margin-bottom: 8px; }
  .page-hero p { font-size: 12.5px; }
  .breadcrumbs { font-size: 10.5px; margin-bottom: 10px; gap: 6px; }

  /* Beat style.css line 906-916 query so the market/blog/service variants
     also collapse to a single compact hero on phones. */
  .page-hero--market,
  .page-hero--blog,
  .page-hero--service {
    padding: calc(78px + env(safe-area-inset-top)) 0 22px;
  }
  .page-hero--market + .section,
  .page-hero--blog + .section,
  .page-hero--service + .section { padding-top: 22px; }
}


/* ---------- 6. Cards ---------- */
@media (max-width: 768px) {
  /* `.product-card` (592px -> ~230px) — used by product.html AND blog.html */
  .product-card { border-radius: 12px; }
  .product-card .thumb { aspect-ratio: 1 / 1; }
  .product-card .body { padding: 9px 10px; }
  .product-card .tag {
    font-size: 10px;
    margin-bottom: 4px;
  }
  .product-card h3 {
    font-size: 12.5px;
    line-height: 1.25;
    margin-bottom: 4px;
  }
  .product-card .model { font-size: 10px; margin-bottom: 5px; }
  .product-card p {
    font-size: 11px;
    line-height: 15px;
    height: 30px;
    margin-bottom: 6px;
  }

  /* Beat cart.css line 161 which forces flex-direction:column at <=768px.
     We want a single row of two compact buttons. */
  .product-card-actions {
    margin-top: 8px;
    padding-top: 8px;
    gap: 6px;
    flex-direction: row;
  }
  /* Compact, but keep a >=40px tap target (measured 27-30px before this). */
  .product-card-actions .btn {
    padding: 8px 6px;
    font-size: 10.5px;
    min-height: 40px;
  }
  .knowledge-product-card .product-card-actions > .cart-ctrl { flex: 1.4 1 0; }
  .knowledge-product-card .product-card-actions > .btn { flex: .9 1 0; }
  .knowledge-product-card .cart-stepper {
    flex-direction: row;
    align-items: center;
    gap: 4px;
  }
  .knowledge-product-card .cart-stepper-qty { flex: 0 1 auto; }
  .knowledge-product-card .cart-remove {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 34px;
    padding: 5px 6px;
    font-size: 11px;
  }
  .cart-step { width: 34px; height: 34px; font-size: 15px; }
  /* Stack qty + Remove so both fit inside the narrow ~100px cart-ctrl cell
     on a ~210px mobile card body. Remove becomes a clear bordered button. */
  .cart-stepper {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 6px;
  }
  .cart-stepper-qty {
    justify-content: center;
    padding: 2px;
    gap: 2px;
  }
  .cart-remove {
    font-size: 11px;
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 5px 8px;
    border: 1px solid #d33;
    border-radius: 6px;
    background: rgba(221, 51, 51, 0.06);
  }
  .cart-qty { font-size: 12px; }

  /* `.category-card` (target ~200px) */
  .category-card { border-radius: 12px; }
  .category-card .body { padding: 9px 10px; }
  .category-card h3 { font-size: 12.5px; margin-bottom: 4px; }
  .category-card p {
    font-size: 11px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
  }
  .category-card .go { font-size: 10.5px; margin-top: 7px; }
  .category-card .go svg { width: 12px; height: 12px; }

  /* `.app-card` (target ~200px) */
  .app-card {
    padding: 12px 12px 0;
    border-radius: 12px;
  }
  .app-card .icon {
    width: 32px;
    height: 32px;
    border-radius: 9px;
  }
  .app-card .icon svg { width: 17px; height: 17px; }
  .app-card-heading { gap: 8px; }
  .app-card h3 { font-size: 12.5px; }
  .app-card p {
    font-size: 10.5px;
    line-height: 1.4;
    max-width: none;
    margin-top: 3px;
  }
  .app-card .link {
    font-size: 10.5px;
    padding-bottom: 5px;
  }
  .app-card-media {
    aspect-ratio: 16 / 9;
    margin: 0 -12px -1px;
  }

  /* `.pillar` (target ~150px) — 5 on index #why, 5 on service, 5 on company */
  .pillar { padding: 13px; border-radius: 12px; }
  .pillar .idx { font-size: 10.5px; }
  .pillar h3 { font-size: 13px; margin: 8px 0 6px; }
  .pillar p { font-size: 11px; line-height: 1.45; }

  /* `.news-card` (target ~210px) */
  .news-card { border-radius: 12px; }
  .news-card .thumb { aspect-ratio: 16 / 10; }
  .news-card .body { padding: 9px 10px; }
  .news-card .meta { font-size: 10px; gap: 6px; margin-bottom: 5px; }
  .news-card h3 { font-size: 12.5px; line-height: 1.3; margin-bottom: 6px; }
  .news-card p {
    font-size: 10.5px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
  }
  .news-card .link { font-size: 10.5px; margin-top: 6px; }
  .news-card .link svg { width: 12px; height: 12px; }

  /* `.section--news` already 40px; ensure cards stack nicely */
  .section--news { padding: 28px 0; }
}


/* ---------- 8. Buttons / links (shared) ---------- */
@media (max-width: 768px) {
  .btn { white-space: nowrap; } /* also covered by style.css — keep compact */
  /* Compact, but every button keeps a >=44px tap target (WCAG 2.5.5 / iOS HIG). */
  .btn { padding: 10px 18px; font-size: 13.5px; min-height: 44px; }
  .btn--lg { padding: 11px 18px; font-size: 13px; min-height: 46px; }
  .link-arrow { font-size: 13px; }
}


/* ---------- 9. Contact / forms ---------- */
@media (max-width: 768px) {
  .contact-grid { gap: 18px; }
  /* Beat style.css line 1003 — keep name/email side by side */
  .form-row {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  /* Grid/flex items default to `min-width:auto`, and a bare <input> has an
     intrinsic min-content width of ~20 characters. Without these the two-up
     row cannot shrink below ~400px, which pushed the layout viewport out to
     496px and produced horizontal scrolling on index/service. */
  .form-row .field { min-width: 0; }
  .field input,
  .field textarea,
  .field select {
    min-width: 0;
    width: 100%;
  }
  .qd-row { min-width: 0; }
  .qd-row input,
  .qd-form input,
  .qd-form textarea {
    min-width: 0;
    width: 100%;
  }
  .field label { font-size: 11px; }
  /* Constraint #2 — 16px is mandatory on form controls to prevent iOS auto-zoom */
  .field input,
  .field textarea,
  .field select {
    padding: 9px 10px;
    font-size: 16px;
    border-radius: 8px;
  }
  .field textarea { min-height: 68px; }
  .contact-list { gap: 9px; margin-top: 14px; }
  .contact-item { gap: 10px; }
  .contact-item .ico {
    width: 32px;
    height: 32px;
    border-radius: 9px;
  }
  .contact-item .ico svg { width: 17px; height: 17px; }
  .contact-item .k { font-size: 10px; }
  .contact-item .v { font-size: 12.5px; }
  .contact-intro { margin-top: 8px; }
}


/* ---------- 11. Process flow (service, 913px) ---------- */
@media (max-width: 768px) {
  /* Beat style.css line 1004-1020 which sets min-height:82px / 58px-node
     connector offsets; we shrink the node to 40px and recompute the line. */
  .process-flow { gap: 12px; }
  /* style.css centres the node (`align-items:center`) for the horizontal desktop
     flow, but the stacked mobile flow draws its connector line at left:20px, so
     the node has to be left-aligned or the line/arrow float off on their own
     (this was already visibly broken before the mobile layer existed). */
  .process-step { min-height: 58px; padding: 0; align-items: flex-start; }
  .process-step:not(:last-child)::after {
    top: 40px;
    left: 20px;
    right: auto;
    width: 2px;
    height: calc(100% - 30px);
    background: linear-gradient(180deg, var(--brand) 0 0, var(--line-strong) 0);
    background-size: 100% 0%;
  }
  .process-step:not(:last-child)::before {
    top: auto;
    bottom: -2px;
    left: 14px;
    right: auto;
    border-top: 8px solid var(--line-strong);
    border-right: 6px solid transparent;
    border-bottom: 0;
    border-left: 6px solid transparent;
  }
  .process-step.is-visible:not(:last-child)::before {
    border-top-color: var(--brand);
    border-left-color: transparent;
  }
  .process-step.is-visible:not(:last-child)::after { background-size: 100% 100%; }
  .process-node {
    width: 40px;
    height: 40px;
    font-size: 13px;
    box-shadow: 0 0 0 5px var(--brand-soft);
  }
  .process-copy {
    padding: 8px 0 0 54px;
    text-align: left;
  }
  .process-copy h3 {
    font-size: 13px;
    margin-bottom: 4px;
  }
  .process-copy p {
    font-size: 11px;
    max-width: none;
    line-height: 1.45;
  }
}


/* ---------- 12. Honors / partners ---------- */
@media (max-width: 768px) {
  /* Honors: fully visible 2-up grid — no horizontal scrolling needed */
  .honors-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    overflow: visible;
  }
  .honor-card {
    min-height: 0;
    padding: 12px 11px 11px;
  }
  .honor-icon {
    width: 26px;
    height: 26px;
    margin-bottom: 8px;
    padding: 5px;
    border-radius: 8px;
  }
  .honor-card h3 { font-size: 11px; line-height: 1.3; }
  /* Odd card count: let the last card span the full row */
  .honors-grid .honor-card:last-child:nth-child(odd) { grid-column: 1 / -1; }

  /* Honor certificate photo gallery: 2-up grid on small screens */
  .honors-carousel {
    margin-top: 16px;
  }
  .honors-control { width: 40px; height: 40px; }

  .partners-band { padding: 16px 0 20px; }
  .partner-card { gap: 16px; padding: 22px 20px; }
  .partner-intro-title { font-size: 20px; }
  .partner-intro p { font-size: 13.5px; line-height: 1.7; margin-bottom: 14px; }
  .partner-more { font-size: 13.5px; }
  /* 移动端：3 列网格全部展示，不滚播 */
  .partner-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px 10px;
    align-items: center;
    padding-top: 14px;
  }
  .partner-logo {
    min-height: 46px;
    padding: 4px 6px;
  }
  .partner-logo img {
    width: 100%;
    max-width: 100%;
    height: 30px;
    object-fit: contain;
  }
  .partner-logo:nth-child(n + 4) { border-top: 1px solid var(--line); padding-top: 8px; }
}


/* ---------- 13. Cat-tabs (product.html) — sticky horizontal strip ---------- */
@media (max-width: 768px) {
  .cat-tabs {
    position: sticky;
    top: 50px;
    z-index: 20;
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 6px;
    margin: 0 calc(var(--gutter) * -1) 12px;
    padding: 8px var(--gutter);
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--line);
    border-top: 0;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
  }
  .cat-tabs::-webkit-scrollbar { display: none; }
  .cat-tab {
    padding: 7px 12px;
    font-size: 11.5px;
    flex: 0 0 auto;
    scroll-snap-align: start;
    /* inline-flex so min-height still centres the label vertically */
    display: inline-flex;
    align-items: center;
    min-height: 40px;
  }

  /* Cat section head — vertically stack thumb + text */
  .cat-section { padding: 22px 0 24px; }
  .cat-section-head { gap: 12px; }
  .cat-section-thumb { width: 56px; height: 56px; border-radius: 10px; }
  .cat-section-title { font-size: 16px; }
  .cat-section-desc { font-size: 11px; line-height: 1.45; }

  /* "All Products" grouped view (mobile caps each group to 4 cards) */
  .cat-section-group { padding: 18px 0 20px; }
  .cat-section-grid { margin-top: 12px; }
  .cat-section-empty { font-size: 11.5px; margin-top: 10px; }
  .cat-section-more { margin-top: 12px; }
  .cat-section-more-btn { font-size: 12px; min-height: 40px; }

  /* Article tag pill — mobile-only so desktop card metrics are untouched */
  .product-card--article .tag {
    color: var(--brand);
    background: var(--brand-soft);
    border-radius: 999px;
    padding: 1px 7px;
    display: inline-block;
  }
}


/* ---------- 14. Market grid (market.html, 5376px) ---------- */
@media (max-width: 768px) {
  .market-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .market-intro { padding: 14px; }

  .market-section { padding-top: 22px; padding-bottom: 22px; }
  .market-title { font-size: 18px; }
  .market-sub { font-size: 11.5px; margin-top: 6px; }
  .market-cta { margin-top: 14px; }
  .market-cta.btn { padding: 10px 16px; font-size: 12.5px; min-height: 44px; }

  /* solution-tabs 移动端：胶囊样式 + 紧凑尺寸（跟桌面端视觉统一） */
  .solution-tabs {
    gap: 4px;
    margin-bottom: 18px;
    padding: 4px;
    border-radius: 999px;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    position: sticky;
    top: 56px;
    z-index: 5;
    background: #fff;
    border: 1px solid var(--line);
    box-shadow: 0 4px 12px -8px rgba(16, 42, 67, .12);
  }
  .solution-tabs::-webkit-scrollbar { display: none; }
  .solution-tab {
    flex: 0 0 auto;
    padding: 5px 12px;
    border-radius: 999px;
    color: var(--muted);
    font-size: 11.5px;
    font-weight: 600;
    white-space: nowrap;
    text-align: center;
    transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
  }
  .solution-tab:hover,
  .solution-tab.is-active {
    color: #fff;
    background: var(--brand);
  }
  .solution-group { margin-bottom: 40px; }
  .solution-group.is-hidden { display: none; }
  .solution-card { margin-bottom: 12px; }
  .solution-card.section--soft { padding: 12px 0; }
  .solution-empty { padding: 20px 12px; font-size: 13px; }
}


/* ---------- 15. Footer ---------- */
@media (max-width: 768px) {
  .site-footer { padding: 26px 0 0; }
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    padding-bottom: 18px;
  }
  .footer-brand {
    grid-column: 1 / -1;
  }
  .footer-brand img {
    height: 30px;
    margin-bottom: 8px;
  }
  .footer-brand p {
    font-size: 10.5px;
    max-width: none;
  }
  .footer-col h4 {
    font-size: 11.5px;
    margin-bottom: 7px;
  }
  .footer-col a {
    font-size: 11px;
    padding: 3px 0;
  }
  /* Products 单列一级分类在窄屏仍跨整行，保证 9 个标签有足够宽度 */
  .footer-col:has(.footer-products) { grid-column: 1 / -1; }
  .footer-products-parent { font-size: 11.5px; padding: 3px 0; }
  /* Contact 列（包含 Follow Us 子分组）移动端并排放在 Company 列右边，不再跨满整行 */
  .footer-col-sub { margin-top: 12px; padding-top: 10px; }
  .footer-col-sub .footer-col-sub-h { font-size: 10.5px; margin-bottom: 6px; }
  .footer-col-sub .footer-social { padding: 4px 0; font-size: 11px; gap: 7px; }
  .footer-col-sub .footer-social .social-ic { width: 15px; height: 15px; }
  .footer-bottom {
    font-size: 10px;
    padding: 11px 0;
    gap: 8px;
  }
  .footer-bottom .links { gap: 10px; }
}


/* ---------- 16. Mobile bar / floating dock / modal / drawer ---------- */
@media (max-width: 768px) {
  /* Mobile bar shrinks slightly so it doesn't crowd small viewports. */
  .mobile-bar a,
  .mobile-bar button {
    height: 52px;
    font-size: 10.5px;
  }
  .mobile-bar svg { width: 18px; height: 18px; }
  /* Match the new bar height (was 58px) */
  body { padding-bottom: calc(52px + env(safe-area-inset-bottom)); }

  /* Floating contact dock — right column, above the bar */
  .contact-dock { right: 16px; bottom: calc(70px + env(safe-area-inset-bottom)); }
  .dock-btn { width: 44px; height: 44px; }
  .dock-btn svg { width: 20px; height: 20px; }
  .dock-menu { width: 208px; }
  .dock-item {
    padding: 10px 13px;
    font-size: 12.5px;
  }
  .dock-item small { font-size: 11px; }

  /* Toast — pushed above the dock + bar */
  #hxgd-toast {
    bottom: calc(150px + env(safe-area-inset-bottom));
    font-size: 12.5px;
    padding: 9px 16px;
  }

  /* Product modal — full-bleed feel */
  .pmodal { padding: 8px; }
  .pm-panel {
    max-height: 92vh;
    border-radius: 14px;
  }
  .pm-head { padding: 14px 16px 12px; height: 92px; overflow: hidden; }
  .pm-head h3 { font-size: 15px; line-height: 1.25; margin-top: 4px; }
    .pm-tabs { padding: 8px 6px; min-height: 68px; gap: 1px; }
    .pm-tab { padding: 10px 4px; font-size: 8px; line-height: 1.3; white-space: normal; overflow: visible; text-overflow: clip; letter-spacing: 0; font-weight: 600; }
  .pm-body { padding: 14px 16px; }
  .pm-desc { font-size: 12.5px; line-height: 1.6; }
  .pm-list { margin-top: 10px; gap: 6px; }
  /* Product modal footer — tidy 2-column action grid on mobile. The old
     flex-wrap layout produced uneven rows with labels spilling out of
     their buttons ("Live Chat"). Grid gives every action an equal cell:
     knowledge link full width, direct contacts + chat/cart in two rows
     of two, primary CTA full width at the bottom. */
  .pm-foot {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    min-height: 0;
  }
  .pm-foot .pm-foot-knowledge {
    grid-column: 1 / -1;
    margin-right: 0;
    max-width: none;
    justify-content: center;
  }
  .pm-foot > .btn {
    width: 100%;
    justify-content: center;
    padding: 10px 8px;
    font-size: 12.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .pm-foot > .btn--primary {
    grid-column: 1 / -1;
    padding: 12px 8px;
    font-size: 14px;
  }
  .pm-list li {
    padding: 8px 12px;
    font-size: 11.5px;
  }
  /* On mobile, drop the 3-col grid. Lay out icon + key + value as a flex
     block: icon hugs the key label, value wraps below on its own row. */
  .pm-spec {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 8px;
    padding: 9px 12px;
    font-size: 11.5px;
  }
  .pm-spec-icon { width: 24px; height: 24px; border-radius: 6px; }
  .pm-spec-icon svg { width: 14px; height: 14px; }
  .pm-spec-k { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; }
  /* Reset grid template on mobile so the flex layout above wins */
  .pm-spec:not(:has(.pm-spec-icon)) { grid-template-columns: 1fr 1.6fr; }
  .pm-spec-k + .pm-spec-v { flex: 1 1 100%; }
  .pm-gallery { gap: 8px; }
  .pm-foot {
    padding: 11px 14px;
    gap: 8px;
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .pm-foot-note:not(.pm-foot-knowledge) { display: none; }
    /* Keep the contact actions in two deliberate rows on small screens. */
    .pm-foot-knowledge { grid-column: span 2; min-width: 0; max-width: none; margin-right: 0; width: 100%; justify-content: center; padding: 7px 6px; font-size: 12.5px; color: #000; gap: 4px; white-space: normal; }
  .pm-foot-knowledge span { max-width: 68px; white-space: normal; line-height: 1.2; text-align: center; }
  .pm-foot-knowledge-label,
  .pm-foot-knowledge-title { display: none; }
  .pm-foot-knowledge svg:last-of-type { display: none; }
  .pm-foot-knowledge svg:first-of-type { width: 12px; height: 12px; flex: none; }
  /* Every action gets one equal cell — WhatsApp|Email, Live Chat|Add to
     Quote — so no label can spill out of its button (the old 6-col grid
     left the Live Chat button a single 48px column). */
  .pm-foot > .btn {
    justify-content: center;
    padding: 9px 6px;
    font-size: 12px;
    min-width: 0;
    gap: 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .pm-foot > .btn--primary { grid-column: span 2; padding: 11px 8px; font-size: 13.5px; }

  /* Quote drawer */
  .qd-panel { max-width: 100%; }
  .qd-head { padding: 14px 16px; }
  .qd-head h3 { font-size: 16px; }
  .qd-sub { font-size: 12px; }
  .qd-body { padding: 14px 16px; }
  .qd-empty { padding: 30px 12px; font-size: 13px; }
  .qd-item {
    padding: 9px;
    gap: 9px;
    border-radius: 10px;
  }
  .qd-item img { width: 42px; height: 42px; }
  .qd-name { font-size: 12.5px; }
  .qd-model { font-size: 11px; }
  .qd-qty button { width: 24px; height: 24px; }
  .qd-qty span { font-size: 12px; }
  .qd-form { margin-top: 14px; padding-top: 14px; }
  /* 16px is mandatory on quote form inputs (iOS auto-zoom prevention) */
  .qd-form input,
  .qd-form textarea {
    padding: 9px 10px;
    font-size: 16px;
    border-radius: 8px;
  }
}


/* ---------- 17. Company-page specific ---------- */
@media (max-width: 768px) {
  .profile-title { font-size: 18px; }
  .profile-sub { margin-top: 8px; font-size: 12px; }
  .certs-row { margin-top: 12px; gap: 8px; }
  .cert-pill { padding: 6px 11px; font-size: 11px; }

  .philosophy-card {
    margin-top: 18px;
    padding: 14px;
    border-radius: 12px;
  }
  .philosophy-title { font-size: 13px; margin-bottom: 6px; }
  .philosophy-body { font-size: 11.5px; line-height: 1.55; }
}


/* ---------- 18. Index-page specific ---------- */
@media (max-width: 768px) {
  .pillar-lead { margin-top: 7px; font-size: 11.5px; }
  .pillar-list { margin-top: 8px; font-size: 11px; line-height: 1.45; }
  .pillar-list li { padding: 2px 0; }
  .section--news .grid--3 { grid-template-columns: repeat(2, 1fr); }
}


/* ---------- 19. Misc component tweaks ---------- */
@media (max-width: 768px) {
  .testimonial blockquote {
    font-size: 14px;
    line-height: 1.45;
  }
  .testimonial .who { margin-top: 16px; gap: 10px; }
  .testimonial .avatar { width: 38px; height: 38px; font-size: 14px; }
  .testimonial .name { font-size: 13px; }
  .testimonial .role { font-size: 11px; }
}


/* ==========================================================================
   20. View-mode toggle (`#view-toggle`)
   Injected by mobile.js. Sized two different ways:
   - view-mobile:  ~34px tall, bottom-left, sits ABOVE .mobile-bar and
     LEFT of .contact-dock (which is right:16px).
   - view-full:    the page is served at a 1200px viewport (~0.32x visual
     zoom), so multiply sizes ~3x so it lands near 56x30 device px and
     stays readable/tappable.
   Both variants are draggable via GYPDrag (mobile.js) — same behaviour
   as the Contact Us dock.
   Only rendered on html.is-handheld.
   ========================================================================== */

/* Hide on desktop browsers entirely — no is-handheld means no toggle. */
#view-toggle { display: none; }

html.is-handheld #view-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  position: fixed;
  z-index: 95;
  cursor: pointer;
  border: 1px solid var(--brand);
  background: var(--brand);
  color: #fff;
  font-weight: 600;
  box-shadow: 0 6px 18px var(--brand-ring);
  transition: transform var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  /* Draggable (GYPDrag) — same touch contract as .contact-dock. */
  touch-action: none;
}
html.is-handheld #view-toggle:active { transform: translateY(1px); }
html.is-handheld #view-toggle svg {
  width: 12px;
  height: 12px;
  flex: none;
}

/* Mobile-view placement: compact pill, bottom-left, sits above .mobile-bar. */
html.is-handheld html.view-mobile #view-toggle,
html.view-mobile #view-toggle {
  left: 16px;
  bottom: calc(70px + env(safe-area-inset-bottom));
  padding: 8px 12px;
  font-size: 11px;
  border-radius: 999px;
  min-height: 34px;
}

/* Full-view placement: scaled up ~3x so it survives the ~0.32x page zoom.
   Sized down from the original 26/40/40 block — the pill was visually
   dominant next to the other floating widgets. */
html.is-handheld html.view-full #view-toggle,
html.view-full #view-toggle {
  left: 28px;
  bottom: 28px;
  padding: 18px 28px;
  font-size: 28px;
  border-radius: 999px;
  background: var(--brand);
  color: #fff;
  border-width: 2px;
  box-shadow: 0 8px 24px var(--brand-ring);
}
html.view-full #view-toggle svg { width: 30px; height: 30px; }

/* ==========================================================================
   11. Article page (article.html)
   ========================================================================== */
@media (max-width: 768px) {
  .article-hero { padding: calc(96px + env(safe-area-inset-top)) 0 24px; }
  .article-hero .breadcrumbs { margin-bottom: 24px; }
  .article-head { margin-bottom: 26px; }
  .article-kicker { font-size: 11.5px; margin-bottom: 10px; }
  .article-title { font-size: 26px; }
  .article-deck { font-size: 16.5px; margin-bottom: 18px; }
  .article-byline { font-size: 12.5px; gap: 8px; padding-top: 14px; }
  .article-cover { border-radius: 10px; }
  .article-section { padding: 32px 0 16px; }
  .article-body { font-size: 16px; line-height: 1.75; }
  .article-body > p:first-child { font-size: 17px; line-height: 1.65; }
  .article-body h2 { font-size: 21px; margin-top: 1.8em; }
  .article-body h3 { font-size: 17.5px; }
  .article-body blockquote { padding-left: 18px; font-size: 15.5px; }
  .article-back { padding-top: 16px; padding-bottom: 40px; }
}
@media (max-width: 480px) {
  .article-hero { padding: calc(86px + env(safe-area-inset-top)) 0 18px; }
  .article-title { font-size: 24px; }
}

/* ---------- Solution detail page（解决方案与指南详情） ---------- */
@media (max-width: 1024px) {
  .solution-layout--toc { grid-template-columns: minmax(0, 700px); }
  .solution-toc { display: none; }
}
@media (max-width: 900px) {
  .solution-cover { aspect-ratio: 16 / 9; max-height: 320px; border-radius: 14px; }
}
@media (max-width: 768px) {
  .blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 20px; }
  .blog-card-body { padding: 10px 10px 8px; gap: 4px; }
  .blog-card-tag { font-size: 9.5px; padding: 2px 7px; }
  .blog-card-title { font-size: 12.5px; line-height: 1.25; }
  .blog-card-summary { font-size: 10.5px; line-height: 1.35; -webkit-line-clamp: 1; }
  .blog-card-meta { font-size: 10px; gap: 6px; padding-top: 6px; }
  .blog-card-thumb { aspect-ratio: 16 / 9; }
}


/* ==========================================================================
   21. Auto-retract floating widgets (handheld + mobile view)
   Driven by mobile.js: after 10s without interaction the three floating
   widgets (contact dock / AI fab / view toggle) slide off-screen toward
   their nearest edge and a small handle appears on the right edge.
   Tapping the handle (or touching any widget) slides them back and
   restarts the countdown. State lives on <html>.widgets-docked so
   late-injected widgets dock automatically.
   ========================================================================== */
@media (max-width: 768px) {
  .contact-dock,
  .ai-chat-fab,
  #view-toggle {
    transition: transform 480ms var(--ease), opacity 480ms var(--ease);
    will-change: transform;
  }

  /* Docked: each widget slides fully off-screen (distance is computed in
     JS and passed as --retract-dx so dragged/custom positions still exit). */
  html.widgets-docked .contact-dock { transform: translateX(var(--retract-dx, calc(100% + 120px))); }
  html.widgets-docked .ai-chat-fab { transform: translateX(var(--retract-dx, calc(-100% - 120px))); }
  html.is-handheld.widgets-docked #view-toggle { transform: translateX(var(--retract-dx, calc(-100% - 120px))); }

  /* Edge handle — appears only while docked. Sits at the right edge,
     slightly below mid-height, clear of the mobile bar and dock area. */
  #widget-dock-handle {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    position: fixed;
    right: 0;
    top: 56%;
    transform: translateY(-50%);
    width: 26px;
    height: 78px;
    padding: 0;
    z-index: 96;
    border: 1px solid rgba(13, 36, 56, 0.14);
    border-right: none;
    border-radius: 10px 0 0 10px;
    background: rgba(255, 255, 255, 0.92);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    box-shadow: -4px 6px 18px rgba(13, 36, 56, 0.12);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity 350ms var(--ease), visibility 350ms var(--ease);
  }
  #widget-dock-handle.show {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
  }
  #widget-dock-handle span {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--brand);
    opacity: 0.85;
  }
  #widget-dock-handle:active span { opacity: 1; }
}

/* ==========================================================================
   Header swap — below 1100px the desktop nav (fixed ~1095px wide) no longer
   fits: hide it, show the hamburger and let the mobile drawer take over.
   ========================================================================== */
@media (max-width: 1100px) {
  .site-header .nav { display: none; }
  .site-header .header-actions .btn--primary { display: none; }
  .nav-toggle { display: flex; }
  .header-topbar { font-size: 11px; }
}

/* The off-canvas mobile drawer (translateX(100%)) extends the document
   scroll width on every page — clip horizontal overflow without turning
   the body into a scroll container (keeps position:sticky working). */
body { overflow-x: hidden; overflow-x: clip; }

/* The contact topbar (full email + WhatsApp addresses) is wider than a
   phone screen — hide it; both entries live in the contact dock menu. */
@media (max-width: 768px) {
  .header-topbar { display: none; }
}

/* ---------- Contact grid collapses to one column on phones ---------- */
@media (max-width: 900px) {
  .contact-grid { grid-template-columns: 1fr; }
  .contact-direct { padding: 24px 20px; }
  .contact-item .v, .contact-direction { overflow-wrap: anywhere; }
}

/* ---------- Company pillars grid collapses ---------- */
@media (max-width: 768px) {
  .pillars-grid { grid-template-columns: 1fr; gap: 14px; }
  .pillar-card p, .pillar p, .value-body p, .term-desc { overflow-wrap: anywhere; }
}

/* ---------- Delivery terms: 4-col → 2-col → 1-col ---------- */
@media (max-width: 900px) {
  .delivery-terms { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .delivery-terms { grid-template-columns: 1fr; }
}

/* ---------- Logo wordmark: drop the tagline on very narrow screens ---------- */
@media (max-width: 480px) {
  .logo-word-tag { display: none; }
}

/* ---------- Bento service cards collapse ---------- */
@media (max-width: 900px) {
  .bento-services { grid-template-columns: 1fr; gap: 16px; }
}

/* ---------- Products catalog: sidebar stacks above the grid ---------- */
@media (max-width: 768px) {
  .catalog-layout { grid-template-columns: 1fr; gap: 18px; }
  .filter-side { position: static; }
  .pgrid, .pgrid--3 { grid-template-columns: repeat(2, 1fr); }
}

/* Delivery contact strip stacks on tablets/phones */
@media (max-width: 900px) {
  .delivery-card { margin-left: 0; margin-right: 0; padding-left: 22px; padding-right: 22px; }
  .delivery-contact { flex-wrap: wrap; flex-direction: column; align-items: flex-start; gap: 12px; }
  .delivery-contact p { white-space: normal; }
}