/* ============================================================
   ToyDirect — Wholesale Toy Manufacturer
   Impeccable-grade redesign: OKLCH palette, tinted neutrals,
   exponential easing only, no bounce/elastic, reduced-motion safe.
   ============================================================ */

:root {
    /* Brand red — perceptually tuned (not a raw hex) */
    --primary: oklch(63% 0.17 22);
    --primary-dark: oklch(52% 0.16 22);
    --primary-light: oklch(72% 0.15 22);

    /* Accent amber */
    --accent: oklch(80% 0.13 82);
    --accent-dark: oklch(68% 0.13 82);

    /* Tinted neutrals (warm — never dead gray) */
    --bg: oklch(98% 0.004 60);
    --bg-warm: oklch(97% 0.012 70);
    --surface: oklch(100% 0 0);
    --text: oklch(28% 0.02 60);
    --text-light: oklch(52% 0.015 60);
    --border: oklch(91% 0.008 60);
    --secondary: oklch(27% 0.02 60);

    /* Soft, colored shadows */
    --shadow-sm: 0 1px 2px oklch(28% 0.02 60 / 0.06);
    --shadow: 0 4px 12px -2px oklch(28% 0.02 60 / 0.10);
    --shadow-lg: 0 14px 28px -8px oklch(28% 0.02 60 / 0.14);
    --shadow-xl: 0 28px 48px -12px oklch(28% 0.02 60 / 0.18);

    --radius: 14px;
    --radius-lg: 24px;

    /* Irregular / asymmetric corner system — playful, intentional, anti-slop */
    --r-a: 28px 10px 28px 10px;
    --r-b: 10px 28px 10px 28px;
    --r-scene: 44px 14px 44px 14px;

    /* ===== Motion tokens (impeccable) ===== */
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
    --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html {
    scroll-behavior: smooth;
    scroll-padding-top: 0;
}

/* Full-page snap ONLY applies to the homepage (the page with full-screen
   [data-snap-section] panels). Other pages (products / about / contact / etc.)
   must stay freely scrollable — otherwise `mandatory` snap locks the single
   footer target and the page gets stuck at the bottom (can't scroll back up). */
html.home,
html:has([data-snap-section]) {
    scroll-snap-type: y mandatory;
}

body {
    font-family: 'Outfit', system-ui, -apple-system, sans-serif;
    background: #ffffff;
    color: var(--text);
    line-height: 1.6;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    position: relative;
}

/* ============================================================
   LAYOUT PRIMITIVES — shared across all pages
   ============================================================ */
.container {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 28px;
}
.page-header {
    padding: 140px 0 64px; /* 140px = navbar + breathing room */
    text-align: center;
}
.page-header h1 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(32px, 4.5vw, 52px);
    font-weight: 700;
    color: var(--text);
    margin-bottom: 16px;
    line-height: 1.15;
}
.page-header p {
    font-size: 17px;
    color: var(--text-light);
    max-width: 620px;
    margin: 0 auto;
    line-height: 1.65;
}

/* Shared section header pattern (used by about & other sub-pages) */
.section-header {
    text-align: center;
    margin-bottom: 48px;
}
.section-tag {
    display: inline-block;
    padding: 6px 16px;
    background: rgba(232, 73, 84, 0.08);
    color: var(--primary);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-radius: 100px;
    margin-bottom: 16px;
}
.section-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(26px, 3.5vw, 40px);
    font-weight: 700;
    color: var(--text);
    line-height: 1.2;
    margin-bottom: 12px;
}
.section-title .highlight { color: var(--primary); }
.section-desc {
    font-size: 15px;
    color: var(--text-light);
    max-width: 560px;
    margin: 0 auto;
    line-height: 1.65;
}

/* ============================================================
   GLOBAL BLUEPRINT GRID — full-page engineering grid overlay
   Every section shares the same white grid aesthetic.
   The grid is subtle enough to not interfere with content readability.
   ============================================================ */
/* co: 首页/全站背景方格由用户要求注释掉，避免视觉干扰；保留代码便于后续恢复 */
/*
body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-color: #ffffff;
    background-image:
        linear-gradient(oklch(72% 0.012 60 / 0.12) 1px, transparent 1px),
        linear-gradient(90deg, oklch(72% 0.012 60 / 0.12) 1px, transparent 1px),
        linear-gradient(oklch(66% 0.018 60 / 0.22) 1px, transparent 1px),
        linear-gradient(90deg, oklch(66% 0.018 60 / 0.22) 1px, transparent 1px);
    background-size:
        32px 32px,
        32px 32px,
        160px 160px,
        160px 160px;
    background-position: center center;
    -webkit-mask-image: radial-gradient(ellipse 115% 95% at 50% 38%, #000 58%, transparent 100%);
    mask-image: radial-gradient(ellipse 115% 95% at 50% 38%, #000 58%, transparent 100%);
}
*/

/* ============================================================
   CUBE STAGE — fixed background layer, must NOT occupy layout space.
   Without this, the full-viewport WebGL canvas pushes all content
   ~900px down on sub-pages (about, products, factory, etc.).
   ============================================================ */
.cube-stage {
    position: fixed;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}
.cube-stage canvas {
    display: block;
    width: 100% !important;
    height: 100% !important;
}

/* 页面内容层 — semi-transparent backgrounds so global grid shows through */
.hero, .categories, .products, .advantages,
.cta-section, .footer,
.page-header, .about-story, .supply-chain, .operational-base,
.mission-values, .timeline,
.faq-hero, .faq-body, .faq-features {
    position: relative;
    z-index: 2;
    background: oklch(98% 0.004 60 / 0.85); /* semi-transparent — grid visible beneath */
}

/* 首页第4屏（Why Choose & Our Factory） */
#factory.why-factory {
    background: #ffffff;
}

/* ============================================================
   OPENING LOADER — splash screen with floating toys background
   100% reference image: warm-pink canvas, centered red ring+cross
   mark, ToyDirect wordmark, tagline, red progress bar.
   ============================================================ */
.loader {
    position: fixed;
    inset: 0;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    overflow: hidden;
    will-change: transform;
}

.loader-bg {
    position: absolute;
    inset: 0;
    background: url('../images/33a6415b-c911-4b3b-8e08-a8a036a50467-remove-bg-io.png') no-repeat center / contain;
    z-index: 0;
    pointer-events: none;
    animation: loaderBgFloat 7s ease-in-out infinite;
}

.loader.hidden { display: none; }

.loader-inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0 24px;
}

/* ---- Brand mark: actual logo.png (cube) ---- */
.loader-mark-img {
    width: 96px;
    height: 96px;
    margin-bottom: 24px;
    opacity: 0;
    transform: scale(0.6) translateY(20px);
    animation: lmMarkIn 0.8s var(--ease-out-expo) 0.05s forwards,
               lmMarkPulse 3.5s ease-in-out 1.1s infinite;
}

@keyframes lmMarkIn {
    to { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes lmMarkPulse {
    0%, 100% { transform: scale(1) translateY(0); }
    50%      { transform: scale(1.04) translateY(-2px); }
}

/* ---- Wordmark ---- */
.loader-wordmark {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 38px;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: var(--text);
    opacity: 0;
    transform: translateY(10px);
    animation: lmFadeUp 0.7s var(--ease-out-expo) 0.45s forwards;
}
.loader-wordmark .hl { color: var(--primary); }

/* ---- Tagline ---- */
.loader-tagline {
    font-size: 15px;
    font-weight: 400;
    color: var(--text-light);
    margin-top: 10px;
    opacity: 0;
    transform: translateY(10px);
    animation: lmFadeUp 0.7s var(--ease-out-expo) 0.55s forwards;
}

@keyframes lmFadeUp { to { opacity: 1; transform: translateY(0); } }

/* ---- Progress bar ---- */
.loader-track {
    width: 260px;
    height: 5px;
    margin-top: 32px;
    background: oklch(85% 0.02 30);
    border-radius: 100px;
    overflow: hidden;
    opacity: 0;
    animation: lmFadeUp 0.6s var(--ease-out-expo) 0.65s forwards;
}

.loader-fill {
    display: block;
    height: 100%;
    width: 0%;
    background: var(--primary);
    border-radius: 100px;
}

@keyframes loaderBgFloat {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-12px) scale(1.015); }
}

/* ============================================================
   NAVIGATION
   ============================================================ */
.navbar {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 100;
    padding: 16px 0;
    background: #ffffff;
    transition: transform 0.4s var(--ease-in-out), background 0.3s var(--ease-in-out), box-shadow 0.3s var(--ease-in-out);
}

.navbar.scrolled {
    background: #ffffff;
    box-shadow: var(--shadow);
    padding: 12px 0;
}

/* Hide on scroll-down, reveal on scroll-up — CSS transition owns smoothness */
.navbar.nav-hidden { transform: translateY(-100%); }

.nav-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.logo {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
}

.logo-mark { height: 36px; width: auto; display: block; flex-shrink: 0; }
.logo-img { height: 40px; width: auto; display: block; }
.logo-icon { width: 40px; height: 40px; }
.logo-icon svg { width: 100%; height: 100%; }

.logo-text {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.4px;
    line-height: 1;
    color: var(--text);
    white-space: nowrap;
}

.logo-text .highlight { color: var(--primary); }

.nav-menu {
    display: flex;
    list-style: none;
    gap: 32px;
    /* 桌面拉窄时给导航菜单一个最大宽度，放不下的项直接隐藏（不挤压 logo/按钮） */
    max-width: min(62vw, 640px);
    overflow: hidden;
    white-space: nowrap;
}

/* Drawer-only nodes: cart.js appends the CTA <li> and nav-mega.js appends the
   Categories accordion <ul> to the same .nav-menu that the desktop bar uses,
   so they stay hidden until the <=1024px rules switch them on. */
.nav-drawer-cta,
.nav-acc { display: none; }

.nav-link {
    text-decoration: none;
    color: var(--text);
    font-weight: 500;
    font-size: 15px;
    position: relative;
    padding: 8px 0;
    /* Unified display so the Categories caret link renders on the same
       baseline as plain text links. inline-flex + center makes the box
       behave identically whether the only child is text or text+SVG. */
    display: inline-flex;
    align-items: center;
    line-height: 1.4;
    transition: color 0.25s var(--ease-out-quart);
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0;
    width: 0; height: 2px;
    background: var(--primary);
    transition: width 0.3s var(--ease-out-quart);
}

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

.nav-link.active { color: var(--primary); }
.nav-link.active::after { width: 100%; }

/* Mobile drawer icon chips — injected by cart.js, hidden on desktop */
.nav-link-icon { display: none; }

/* Nav action icons — cart.js injects these globally, so styles must live in style.css */
.nav-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.nav-cart,
.nav-account,
.nav-search-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    color: var(--text);
    background: oklch(97% 0.012 70);
    border: 1px solid var(--border);
    cursor: pointer;
    transition: transform .25s var(--ease-out-quart), background .25s, color .25s, box-shadow .25s;
}

.nav-account {
    margin-right: 4px;
}

.nav-cart svg,
.nav-account svg,
.nav-search-btn svg {
    width: 20px;
    height: 20px;
}

.nav-cart:hover,
.nav-account:hover,
.nav-search-btn:hover {
    color: var(--primary);
    background: #fff;
    transform: translateY(-2px);
    box-shadow: var(--shadow);
}

.nav-cart-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    display: none;
    align-items: center;
    justify-content: center;
    background: var(--primary);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    border-radius: 100px;
    border: 2px solid #fff;
    line-height: 1;
    transform-origin: center;
}

/* bump when an item lands in the cart */
.nav-cart-badge.bump {
    animation: badgeBump .5s var(--ease-out-quart);
}
@keyframes badgeBump {
    0%   { transform: scale(1); }
    30%  { transform: scale(1.55); }
    55%  { transform: scale(0.88); }
    100% { transform: scale(1); }
}

/* Floating clone that arcs from a product card into the cart icon */
.fly-to-cart {
    position: fixed;
    z-index: 3000;
    border-radius: 14px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 14px 34px oklch(28% 0.03 60 / 0.30);
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
    will-change: transform, opacity;
}
.fly-to-cart img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 14px;
}

.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    border-radius: 100px;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    transition: transform 0.25s var(--ease-out-quart), background 0.25s var(--ease-out-quart), box-shadow 0.25s var(--ease-out-quart), color 0.25s var(--ease-out-quart);
    border: none;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

/* Press feedback (delight, not bounce) */
.btn:active { transform: translateY(1px) scale(0.98); }

/* success pop when an add-to-cart button confirms */
.btn.is-added { animation: addPopBtn .42s var(--ease-out-quart); }
@keyframes addPopBtn {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.06); }
    100% { transform: scale(1); }
}

.btn-primary {
    background: var(--primary);
    color: white;
    box-shadow: 0 6px 18px oklch(63% 0.17 22 / 0.32);
}

.btn-primary:hover {
    background: var(--primary-dark);
    transform: translateY(-2px);
    box-shadow: 0 10px 26px oklch(63% 0.17 22 / 0.42);
}

.btn-outline {
    background: transparent;
    color: var(--text);
    border: 2px solid var(--border);
}

.btn-outline:hover {
    border-color: var(--primary);
    color: var(--primary);
    transform: translateY(-2px);
}

.btn-lg { padding: 16px 32px; font-size: 16px; }
.btn-xl { padding: 20px 40px; font-size: 18px; }

.nav-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 5px; }
.nav-toggle span { width: 24px; height: 2px; background: var(--text); transition: all 0.3s var(--ease-in-out); }

/* Mobile drawer motion (used by the <=1024px nav block further down). */
@keyframes navDrawerIn {
    from { opacity: 0; transform: translateY(-10px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes navAccIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   HERO — GLOBAL SUPPLY CHAIN
   Left: copy + 3 features + 2 CTAs.
   Right: flat 2D world map (Guangdong-centered) with arcing
          particle paths, 8 country mascots, ship/plane, and a
          floating "Real-time Shipments" card.
   Subtle white-tech gradient with red brand glow.
   ============================================================ */
.hero-supply {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: flex-start;
    padding: 48px 0 70px;
    overflow: hidden;
    isolation: isolate;
    background: linear-gradient(90deg, #fbfbfc 0%, #fafbfc 100%);
}

.hero-supply::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(circle at 88% 22%, rgba(232,73,84,0.10), transparent 38%),
        radial-gradient(circle at 14% 78%, rgba(80,150,255,0.08), transparent 40%),
        radial-gradient(circle at 92% 86%, rgba(255,182,193,0.18), transparent 42%);
}

.hero-supply .hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}
.hero-supply .hero-bg-glow {
    position: absolute;
    top: 50%;
    right: 18%;
    width: 50%;
    height: 50%;
    transform: translate(0,-50%);
    background: radial-gradient(circle, rgba(232,73,84,0.06), transparent 70%);
    filter: blur(28px);
}

/* 3:7 split — left 3 (text) / right 7 (map).
   Text spans both rows; right column = map (row 1) + shipments card (row 2). */
.hero-supply .hero-container {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 28px;
    display: grid;
    grid-template-columns: 3fr 7fr;
    grid-template-rows: auto auto;
    gap: 32px 48px;
    align-items: start;
}
.hero-supply .hero-content { grid-row: 1 / span 2; }

/* ---------- LEFT: text content ---------- */
.hero-supply .hero-content { max-width: 540px; }

.hero-supply .hero-eyebrow {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--primary);
    margin-bottom: 22px;
}

.hero-supply .hero-title {
    font-family: 'Outfit', 'Space Grotesk', sans-serif;
    font-size: clamp(2.6rem, 5.4vw, 4.4rem);
    font-weight: 800;
    line-height: 1.04;
    letter-spacing: -0.025em;
    color: #0f1620;
    margin: 0 0 22px;
}
.hero-supply .hero-title .line { display: block; }
.hero-supply .hero-title .accent {
    color: var(--primary);
    font-style: normal;
}

.hero-supply .hero-desc {
    font-size: 16px;
    line-height: 1.7;
    color: #5b6573;
    max-width: 460px;
    margin: 0 0 32px;
}


/* ---------- 3 feature row ---------- */
.hero-supply .hero-features {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin: 0 0 32px;
}
.hero-supply .hero-feature {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}
.hero-supply .hero-feature-icon {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(232,73,84,0.10);
    color: var(--primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.hero-supply .hero-feature-icon svg { width: 20px; height: 20px; }
.hero-supply .hero-feature-body { display: flex; flex-direction: column; gap: 2px; }
.hero-supply .hero-feature-body strong {
    font-size: 14px;
    font-weight: 700;
    color: #1d2530;
    line-height: 1.25;
}
.hero-supply .hero-feature-body span {
    font-size: 12px;
    color: #5b6573;
    line-height: 1.3;
}

/* ---------- 2 CTAs ---------- */
.hero-supply .hero-actions {
    display: flex;
    align-items: center;
    gap: 22px;
    flex-wrap: wrap;
}
.hero-supply .btn-quote {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 15px 30px;
    background: var(--primary);
    color: #fff;
    border-radius: 100px;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 12px 28px rgba(232,73,84,0.28);
    transition: transform 0.25s var(--ease-out-quart), box-shadow 0.25s;
}
.hero-supply .btn-quote:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 36px rgba(232,73,84,0.34);
}
.hero-supply .btn-quote svg { width: 16px; height: 16px; }
.hero-supply .btn-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--primary);
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    transition: gap 0.25s var(--ease-out-quart);
}
.hero-supply .btn-link:hover { gap: 10px; }

/* ---------- RIGHT: map area ---------- */
.hero-supply .hero-map-area {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    min-height: 540px;            /* 加大画布高度：ac 460px → 540px，看到更多大陆 */
    overflow: hidden;             /* 父容器作为唯一裁切边界 */
}

.hero-supply .flat-globe-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
    /* canvas = 父容器，等距投影把完整世界地图塞进画布，4 边由父容器 overflow:hidden 自然截切 */
}

/* Pink + blue soft glow under the map (target screenshot ambience) */
.hero-supply .hero-map-glow {
    position: absolute;
    z-index: 0;
    pointer-events: none;
    border-radius: 50%;
    filter: blur(36px);
}
.hero-supply .hero-map-glow-pink {
    top: 30%;
    right: -8%;
    width: 56%;
    height: 70%;
    background: radial-gradient(circle, rgba(255,170,190,0.42) 0%, rgba(255,170,190,0) 70%);
}
.hero-supply .hero-map-glow-blue {
    bottom: -10%;
    left: 4%;
    width: 38%;
    height: 50%;
    background: radial-gradient(circle, rgba(170,200,255,0.28) 0%, rgba(170,200,255,0) 70%);
}

/* Ambient color dots — small static decorations, like the reference image */
.hero-supply .hero-amb-dot {
    position: absolute;
    z-index: 1;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(0.5px);
    animation: ambDotFloat 6s ease-in-out infinite;
}
.hero-supply .hero-amb-dot-1 { top: 8%;  left: 6%;  width: 10px; height: 10px; background: #ffb6c1; animation-delay: 0.0s; }
.hero-supply .hero-amb-dot-2 { top: 18%; left: 88%; width: 8px;  height: 8px;  background: #a4c8ff; animation-delay: 0.8s; }
.hero-supply .hero-amb-dot-3 { top: 40%; left: 4%;  width: 12px; height: 12px; background: #ffd28a; animation-delay: 1.6s; }
.hero-supply .hero-amb-dot-4 { top: 70%; left: 90%; width: 9px;  height: 9px;  background: #ffa6b3; animation-delay: 2.4s; }
.hero-supply .hero-amb-dot-5 { top: 88%; left: 12%; width: 7px;  height: 7px;  background: #b6e2c2; animation-delay: 3.2s; }
.hero-supply .hero-amb-dot-6 { top: 5%;  left: 60%; width: 6px;  height: 6px;  background: #d6b6ff; animation-delay: 4.0s; }
@keyframes ambDotFloat {
    0%, 100% { transform: translateY(0) scale(1);   opacity: 0.85; }
    50%      { transform: translateY(-6px) scale(1.15); opacity: 1; }
}

.hero-supply .hero-arcs {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    pointer-events: none;
}
.hero-supply .hero-arcs .arc {
    /* arcs are flowing dashed rails — the dashoffset keyframe below
       animates the dash position so the eye reads "stuff is moving out
       of Guangdong" without needing JS particle dots. */
    stroke-opacity: 0.85;
    stroke-dasharray: 4.5 3.2;
    animation: arcFlow 1.8s linear infinite;
    filter: drop-shadow(0 0 1.5px rgba(232,73,84,0.22));
}
@keyframes arcFlow {
    to { stroke-dashoffset: -7.7; }
}
@media (prefers-reduced-motion: reduce) {
    .hero-supply .hero-arcs .arc { animation: none; }
}

/* ---------- Guangdong center pin ---------- */
.hero-supply .hero-pin {
    position: absolute;
    z-index: 6;
    transform: translate(-50%, -50%);
}
.hero-supply .pin-guangdong {
    top: 37.2%;
    left: 71.9%;
}
.hero-supply .pin-dot {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--primary);
    box-shadow: 0 0 0 4px rgba(232,73,84,0.18), 0 0 0 8px rgba(232,73,84,0.08);
    transform: translate(-50%, -50%);
}
.hero-supply .pin-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid var(--primary);
    transform: translate(-50%, -50%);
    animation: heroPin 2.4s ease-out infinite;
    opacity: 0;
}
.hero-supply .pin-ring-2 { animation-delay: 1.2s; }
@keyframes heroPin {
    0%   { opacity: 0.7; transform: translate(-50%, -50%) scale(0.6); }
    100% { opacity: 0;   transform: translate(-50%, -50%) scale(6);   }
}
.hero-supply .pin-label {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translate(-50%, 8px);
    font-size: 12px;
    font-weight: 700;
    color: var(--primary);
    text-align: center;
    line-height: 1.25;
    white-space: nowrap;
    text-shadow: 0 1px 2px rgba(255,255,255,0.85);
}
.hero-supply .pin-label em { font-style: normal; }

/* ---------- 8 country mascots ---------- */
.hero-supply .hero-mascot {
    position: absolute;
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

/* Soft colored aura behind the mascot disc (target screenshot) */
.hero-supply .hero-mascot .mascot-aura {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    transform: translate(-50%, calc(-50% - 10px));
    background: radial-gradient(circle, rgba(255,170,190,0.30) 0%, rgba(255,170,190,0) 70%);
    filter: blur(6px);
    z-index: -1;
    animation: auraPulse 3.4s ease-in-out infinite;
}
@keyframes auraPulse {
    0%, 100% { transform: translate(-50%, calc(-50% - 10px)) scale(1);    opacity: 0.7; }
    50%      { transform: translate(-50%, calc(-50% - 10px)) scale(1.18); opacity: 1; }
}

.hero-supply .hero-mascot .mascot-glyph {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #fff;
    box-shadow:
        0 6px 16px rgba(29,37,48,0.10),
        0 0 0 3px rgba(255,255,255,0.7),
        0 0 0 4px rgba(232,73,84,0.10);
    overflow: hidden;
    transition: transform 0.3s var(--ease-out-quart), box-shadow 0.3s;
    animation: mascotFloat 4.8s ease-in-out infinite;
}
.hero-supply .hero-mascot .mascot-glyph .mascot-img {
    width: 86%;
    height: 86%;
    object-fit: contain;
    display: none; /* shown only when src loaded */
}
.hero-supply .hero-mascot .mascot-glyph .mascot-img.is-loaded { display: block; }
.hero-supply .hero-mascot .mascot-glyph .mascot-img.is-loaded + .mascot-emoji { display: none; }
.hero-supply .hero-mascot .mascot-glyph .mascot-emoji {
    font-size: 26px;
    line-height: 1;
    display: inline-block;
    transform: translateY(-1px);
}
.hero-supply .hero-mascot:hover .mascot-glyph {
    transform: scale(1.10);
    box-shadow: 0 8px 22px rgba(232,73,84,0.30), 0 0 0 4px rgba(232,73,84,0.18);
}
.hero-supply .hero-mascot .mascot-label {
    font-size: 10.5px;
    font-weight: 600;
    color: #5b6573;
    font-style: normal;
    text-shadow: 0 1px 2px rgba(255,255,255,0.9);
    letter-spacing: 0.02em;
    margin-top: 6px;
}
@keyframes mascotFloat {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-5px); }
}

/* Mascot positions (relative to .hero-map-area) — true lat/lon of the
   country translated to the cropped SVG viewBox "418 0 3542 2435" then
   rendered to a 100x70 viewBox arc-layer.  We map the lat-lon back to
   container percentages, which is what hero-map-area is sized in.
   Container 16:11 (1.45) and arc viewBox 100:70 (1.43) are an exact match
   under preserveAspectRatio="none", so:
       left% = x / 100
       top%  = y / 70  (because y is in 0..70 units that span the full height)
   Guangdong (113.3°E, 23.1°N) → x=71.9, y=26.1 → top 37.2%, left 71.9%. */
.hero-supply .mascot-usa     { top: 40.6%; left: 19.1%; animation-delay: 0.0s; }  /* New York 40.7N 74W  → y=28.4 */
.hero-supply .mascot-germany { top: 29.9%; left: 44.1%; animation-delay: 0.6s; }  /* Berlin 52.5N 13.4E → y=20.9 */
.hero-supply .mascot-russia  { top: 27.3%; left: 50.9%; animation-delay: 1.2s; }  /* Moscow 55.8N 37.6E → y=19.1 */
.hero-supply .mascot-japan   { top: 43.1%; left: 79.1%; animation-delay: 1.8s; }  /* Tokyo 35.7N 139.7E → y=30.2 */
.hero-supply .mascot-brazil  { top: 85.7%; left: 27.5%; animation-delay: 0.3s; }  /* São Paulo 23.5S 46.6W → y=60 (clamped) */
.hero-supply .mascot-sa      { top: 92.9%; left: 45.5%; animation-delay: 0.9s; }  /* Johannesburg 26.2S 28E → y=65 (clamped) */
.hero-supply .mascot-aus     { top: 92.9%; left: 70.0%; animation-delay: 1.5s; }  /* Sydney 33.9S 151.2E → y=65 (clamped), shifted left to clear Live card */
.hero-supply .mascot-sea     { top: 76.3%; left: 70.0%; animation-delay: 2.1s; }  /* Bangkok 13.8N 100.5E → y=53.4 */

/* Ship + plane */
.hero-supply .hero-ship {
    position: absolute;
    z-index: 3;
    top: 78%;
    left: 22%;
    width: 22%;
    pointer-events: none;
    animation: shipBob 5s ease-in-out infinite;
}
.hero-supply .hero-ship svg { width: 100%; height: auto; display: block; }
@keyframes shipBob {
    0%, 100% { transform: translate(0, 0) rotate(-1deg); }
    50%      { transform: translate(2%, -3px) rotate(1deg); }
}
.hero-supply .hero-plane {
    position: absolute;
    z-index: 4;
    top: 72%;
    left: 62%;
    width: 18%;
    pointer-events: none;
    animation: planeFly 6s ease-in-out infinite;
}
.hero-supply .hero-plane svg { width: 100%; height: auto; display: block; }
@keyframes planeFly {
    0%, 100% { transform: translate(0, 0) rotate(-2deg); }
    50%      { transform: translate(4%, -6px) rotate(2deg); }
}

/* ---------- "Real-time Shipments" card — sits in the right column,
              below the map (grid row 2), not floating over it. ---------- */
.hero-supply .hero-shipments-card {
    grid-column: 2;
    grid-row: 2;
    justify-self: end;
    align-self: start;
    width: 280px;
    padding: 14px 18px 12px;
    background: rgba(255,255,255,0.94);
    border: 1px solid rgba(232,73,84,0.14);
    border-radius: 14px;
    box-shadow: 0 16px 40px rgba(29,37,48,0.10);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.hero-supply .shipments-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}
.hero-supply .shipments-head strong {
    font-size: 12px;
    font-weight: 700;
    color: #1d2530;
}
.hero-supply .shipments-live {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 10.5px;
    font-weight: 700;
    color: #1d2530;
}
.hero-supply .shipments-live .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 0 2.5px rgba(34,197,94,0.22);
    animation: livePulse 1.6s ease-in-out infinite;
}
@keyframes livePulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.6; transform: scale(0.85); }
}
.hero-supply .shipments-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 10px;
}
.hero-supply .shipments-stat strong {
    display: block;
    font-family: 'Outfit', 'Space Grotesk', sans-serif;
    font-size: 20px;
    font-weight: 800;
    color: #1d2530;
    line-height: 1;
    margin-bottom: 2px;
}
.hero-supply .shipments-stat span {
    font-size: 10.5px;
    color: #5b6573;
}
.hero-supply .shipments-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--primary);
    text-decoration: none;
    transition: gap 0.25s var(--ease-out-quart);
}
.hero-supply .shipments-link:hover { gap: 10px; }

/* ---------- particle dots spawned by JS along each arc ----------
   The CSS stroke-dash flow already gives a "moving" impression on the
   arcs themselves, so these dots are the discrete HIGHLIGHTS — bigger,
   brighter comet heads with strong glow so they pop as the focal
   accents rather than fighting the dashed rail for attention. */
.hero-supply .arc-particles circle {
    filter: drop-shadow(0 0 10px rgba(232,73,84,1)) drop-shadow(0 0 2px rgba(255,80,100,0.9));
}

/* ---------- responsive ---------- */
@media (max-width: 980px) {
    .hero-supply { min-height: auto; padding: 100px 0 56px; }
    .hero-supply .hero-container { grid-template-columns: 1fr; gap: 36px; }
    .hero-supply .hero-content { max-width: 100%; grid-row: auto; }
    .hero-supply .hero-features { grid-template-columns: 1fr 1fr; }
    .hero-supply .hero-map-area { min-height: 440px; }
    .hero-supply .hero-shipments-card { grid-column: 1; justify-self: stretch; width: 100%; max-width: 360px; margin-left: auto; padding: 12px 16px 10px; }
}
@media (max-width: 640px) {
    .hero-supply .hero-features { grid-template-columns: 1fr; }
    .hero-supply .hero-shipments-card { max-width: 100%; }
    .hero-supply .mascot-glyph { width: 36px; height: 36px; font-size: 18px; }
    .hero-supply .mascot-label { font-size: 9.5px; }
}

/* ============================================================
   TRUST BAR — 4 stat cards
   ============================================================ */
.trust-bar {
    padding: 80px 0;
    background: oklch(98% 0.004 60);
}

.trust-grid {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.trust-card {
    background: var(--surface);
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 4px 20px oklch(28% 0.02 60 / 0.06);
    display: flex;
    align-items: center;
    gap: 16px;
    transition: transform 0.35s var(--ease-out-quart), box-shadow 0.35s var(--ease-out-quart);
}

.trust-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 28px oklch(28% 0.02 60 / 0.1);
}

.trust-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.trust-icon svg {
    width: 26px;
    height: 26px;
}

.ti-red { background: #fee2e2; color: #e84954; }
.ti-blue { background: #dbeafe; color: #2563eb; }
.ti-green { background: #dcfce7; color: #16a34a; }
.ti-amber { background: #fef3c7; color: #d97706; }

.trust-body { display: flex; flex-direction: column; gap: 2px; }

.trust-num {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 26px;
    font-weight: 700;
    color: var(--text);
    line-height: 1;
}

.trust-body strong {
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
}

.trust-body span {
    font-size: 13px;
    color: var(--text-light);
}

/* ============================================================
   SECTION HEADERS
   ============================================================ */
.section-header {
    text-align: center;
    max-width: 640px;
    margin: 0 auto 60px;
}

.section-tag {
    display: inline-block;
    padding: 6px 16px;
    background: oklch(63% 0.17 22 / 0.1);
    color: var(--primary-dark);
    font-size: 13px;
    font-weight: 600;
    border-radius: 14px 5px 14px 5px;
    margin-bottom: 16px;
}

.section-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(1.9rem, 3.5vw, 2.6rem);
    font-weight: 700;
    letter-spacing: -0.01em;
    margin-bottom: 16px;
}

.section-title .highlight { color: var(--primary); }

.section-desc { color: var(--text-light); font-size: 16px; }

/* ============================================================
   PRODUCT CATEGORIES — Shop by Category
   ============================================================ */
.product-categories { 
    position: relative;
    padding: 80px 0 60px; 
    background: #ffffff; 
    overflow: hidden;
}

/* Header with background decorations behind text */
.categories-header {
    position: relative;
    max-width: 900px;
    margin: 0 auto 56px;
    padding: 0 24px;
    min-height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.categories-header-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

.categories-bg-star {
    position: absolute;
    left: -20px;
    top: 50%;
    transform: translateY(-50%);
    width: 90px;
    height: 90px;
    opacity: 0.85;
    filter: drop-shadow(0 8px 16px rgba(232, 76, 76, 0.18));
}

.categories-bg-mascot {
    position: absolute;
    right: -290px;
    top: 65%;
    transform: translateY(-50%);
    width: 975px;
    height: auto;
    object-fit: contain;
    opacity: 0.95;
}

.categories-header-content {
    position: relative;
    z-index: 1;
    text-align: center;
    max-width: 560px;
}

.categories-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 18px;
    border-radius: 100px;
    background: oklch(63% 0.17 22 / 0.1);
    color: var(--primary);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 18px;
}

.badge-diamond {
    width: 12px;
    height: 12px;
}

.categories-header .section-title { margin-bottom: 14px; }

.categories-desc {
    max-width: 520px;
    margin: 0 auto;
    font-size: 16px;
    color: var(--text-light);
    line-height: 1.6;
}

/* Category cards — horizontal scroll strip */
.categories-scroll {
    position: relative;
    max-width: 1280px;
    margin: 0 auto 56px;
    padding: 0 24px;
}
.categories-grid {
    display: flex;
    gap: 18px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding: 4px 0 14px;
    -webkit-overflow-scrolling: touch;
}
/* No visible scrollbar — auto-play carousel handles motion */
.categories-grid { scrollbar-width: none; -ms-overflow-style: none; }
.categories-grid::-webkit-scrollbar { display: none; width: 0; height: 0; }
.category-card { flex: 0 0 230px; scroll-snap-align: start; }
.cat-scroll-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 2px solid var(--primary);
    background: #ffffff;
    color: var(--primary);
    box-shadow: 0 8px 22px rgba(232,73,84,.22);
    cursor: pointer;
    z-index: 6;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform .2s var(--ease-out-quart), opacity .2s, box-shadow .2s;
}
.cat-scroll-btn svg { width: 20px; height: 20px; }
.cat-scroll-btn:hover { transform: translateY(-50%) scale(1.08); box-shadow: 0 10px 26px rgba(232,73,84,.30); }
.cat-scroll-btn:active { transform: translateY(-50%) scale(.94); }
.cat-scroll-btn.cat-prev { left: 2px; }
.cat-scroll-btn.cat-next { right: 2px; }
.cat-scroll-btn[disabled] { opacity: .35; cursor: default; pointer-events: none; }

/* Left/right edge fades: the strip reads as scrollable, and the round
   buttons now sit on a tinted backdrop instead of directly over white cards
   (which made them nearly invisible on mobile). */
.categories-scroll::before,
.categories-scroll::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 56px;
    z-index: 5;
    pointer-events: none;
}
.categories-scroll::before {
    left: 0;
    background: linear-gradient(to right, #ffffff 0%, rgba(255,255,255,0) 100%);
}
.categories-scroll::after {
    right: 0;
    background: linear-gradient(to left, #ffffff 0%, rgba(255,255,255,0) 100%);
}

.category-card {
    position: relative;
    background: #ffffff;
    border-radius: 22px;
    padding: 20px 18px 18px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.06);
    border: 1px solid #f2f2f2;
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    transition: transform 0.35s var(--ease-out-quart), box-shadow 0.35s var(--ease-out-quart);
}

.category-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.1);
}

.category-icon {
    position: absolute;
    top: 16px;
    left: 16px;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

.category-icon svg { width: 17px; height: 17px; }

.ci-red { background: #fee2e2; color: #e84954; }
.ci-blue { background: #dbeafe; color: #2563eb; }
.ci-amber { background: #fef3c7; color: #d97706; }
.ci-green { background: #dcfce7; color: #16a34a; }
.ci-purple { background: #f3e8ff; color: #9333ea; }
.ci-orange { background: #ffedd5; color: #ea580c; }
.ci-pink { background: #fce7f3; color: #db2777; }
.ci-rose { background: #ffe4e6; color: #e11d48; }
.ci-teal { background: #ccfbf1; color: #0d9488; }
.ci-indigo { background: #e0e7ff; color: #4f46e5; }

.category-image-wrap {
    position: relative;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}

/* 分类圆图：彩色背景已移除，产品图本身改为圆形裁剪（见 .category-image） */

/* 分类主题背景色（备用 / 待用户确认，当前首页未使用；如需恢复背景请给 .category-image-bg 加 bg-*） */
.bg-red { background: #fee2e2; }
.bg-blue { background: #dbeafe; }
.bg-amber { background: #fef3c7; }
.bg-green { background: #dcfce7; }
.bg-purple { background: #f3e8ff; }
.bg-orange { background: #ffedd5; }
.bg-pink { background: #fce7f3; }
.bg-rose { background: #ffe4e6; }
.bg-teal { background: #ccfbf1; }
.bg-indigo { background: #e0e7ff; }

.category-image {
    position: relative;
    z-index: 1;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.10);
    transition: transform 0.35s var(--ease-out-quart);
}

.category-card:hover .category-image { transform: scale(1.05); }

.category-body {
    margin-bottom: 12px;
}

.category-card h4 {
    font-size: 15px;
    font-weight: 700;
    color: #1a1a1a;
    line-height: 1.25;
    margin-bottom: 8px;
}

.category-count {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--primary);
}

.category-arrow {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.25s var(--ease-out-quart);
    margin-top: auto;
    align-self: flex-start;
}

.category-arrow svg {
    width: 14px;
    height: 14px;
}

.arrow-red { background: #fee2e2; color: #e84954; }
.arrow-blue { background: #dbeafe; color: #2563eb; }
.arrow-amber { background: #fef3c7; color: #d97706; }
.arrow-green { background: #dcfce7; color: #16a34a; }
.arrow-purple { background: #f3e8ff; color: #9333ea; }
.arrow-orange { background: #ffedd5; color: #ea580c; }
.arrow-pink { background: #fce7f3; color: #db2777; }
.arrow-rose { background: #ffe4e6; color: #e11d48; }
.arrow-teal { background: #ccfbf1; color: #0d9488; }
.arrow-indigo { background: #e0e7ff; color: #4f46e5; }

.category-card:hover .category-arrow { transform: translateX(4px); }

/* Category feature chips */
.category-features {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.category-feature {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
    background: #fff5f5;
    border-radius: 16px;
    transition: transform 0.25s var(--ease-out-quart), box-shadow 0.25s var(--ease-out-quart);
}

.category-feature:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px oklch(28% 0.02 60 / 0.08);
}

.cf-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #fff;
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 2px 8px oklch(28% 0.02 60 / 0.06);
}

.cf-icon svg { width: 22px; height: 22px; }

.cf-text strong {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
    line-height: 1.2;
}

.cf-text span {
    display: block;
    font-size: 12px;
    color: var(--text-light);
    line-height: 1.3;
}

/* ============================================================
   PRODUCTS — Featured Product (reference layout)
   ============================================================ */
.products {
    position: relative;
    padding: 80px 0 60px;
    background: #ffffff;
    overflow: hidden;
}

.products-header {
    position: relative;
    z-index: 2;
    text-align: center;
    max-width: 720px;
    margin: 0 auto 48px;
    padding: 0 24px;
}

.products-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 18px;
    background: #fff0f0;
    color: #e84954;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: 100px;
    margin-bottom: 16px;
}

.pe-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #e84954;
}

.products-title {
    font-size: clamp(2rem, 4vw, 2.8rem);
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 14px;
    line-height: 1.15;
}

.products-title .highlight { color: #e84954; }

.products-desc {
    font-size: 16px;
    color: #6b7280;
    line-height: 1.6;
}

.products-decoration {
    position: absolute;
    top: 25px;
    z-index: 1;
    pointer-events: none;
}

.products-decoration-left { left: max(10%, calc(43% - 520px)); }
.products-decoration-right { right: max(10%, calc(43% - 520px)); }

.products-decoration img {
    width: 300px;
    height: auto;
    object-fit: contain;
}

/* Featured Product Card */
.featured-product-card {
    position: relative;
    z-index: 2;
    max-width: 1140px;
    margin: 0 auto 32px;
    padding: 40px 48px;
    min-height: 500px;
    background: #ffffff;
    border-radius: 28px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.06);
    border: 1px solid #f2f2f2;
    transition: box-shadow 0.4s var(--ease-out-quart), border-color 0.4s var(--ease-out-quart);
    display: grid;
    grid-template-columns: 72px 1.35fr 1fr;
    gap: 36px;
    align-items: center;
}

.featured-product-card:hover {
    box-shadow: 0 32px 80px rgba(232, 73, 84, 0.10);
    border-color: #ffe1e4;
}

.fp-thumbs {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.fp-thumb {
    width: 60px;
    height: 60px;
    border-radius: 12px;
    border: 2px solid #f2f2f2;
    background: #fff;
    padding: 4px;
    cursor: pointer;
    transition: border-color 0.25s, transform 0.25s var(--ease-out-quart);
}

.fp-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 8px;
}

.fp-thumb:hover { transform: translateY(-3px) scale(1.08); box-shadow: 0 8px 20px rgba(0,0,0,0.12); }
.fp-thumb.active {
    border-color: #e84954;
    box-shadow: 0 6px 18px rgba(232, 73, 84, 0.22);
    transform: translateY(-2px) scale(1.06);
}

.fp-main {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    background: linear-gradient(135deg, #fff5f5 0%, #fff 100%);
    border-radius: 20px;
    padding: 40px;
    overflow: hidden;
}

.fp-main::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 20px;
    background: radial-gradient(circle at 50% 42%, rgba(232,73,84,0.06), transparent 62%);
    pointer-events: none;
}

.fp-main-img {
    display: block;
    width: 100%;
    height: 360px;
    object-fit: cover;
    border-radius: 16px;
    will-change: transform, opacity;
    backface-visibility: hidden;
}

/* ======================================================
   FEATURED PRODUCT — Skeleton placeholders
   The HTML is shipped with empty placeholder elements
   marked [data-fp-skeleton]. While the real product
   data is loading, these elements show a shimmer bar.
   JS removes the attribute and the cards reveal real text.
   ====================================================== */
@keyframes fp-shimmer {
    0%   { background-position: -480px 0; }
    100% { background-position: 480px 0; }
}
[data-fp-skeleton] {
    position: relative;
    display: block;
    background: #eef0f3;
    color: transparent !important;
    border-radius: 8px;
    overflow: hidden;
    /* Make the element look empty (no visible text). */
    min-height: 14px;
}
[data-fp-skeleton]::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        rgba(238, 240, 243, 0)   0%,
        rgba(255, 255, 255, 0.85) 50%,
        rgba(238, 240, 243, 0)   100%
    );
    background-size: 480px 100%;
    background-repeat: no-repeat;
    animation: fp-shimmer 1.4s linear infinite;
}
/* Skeleton disappears once the card is "ready" */
.featured-product-card[data-fp-state="ready"] [data-fp-skeleton] {
    display: none;
}

/* Per-element sizing for skeleton bars */
.featured-product-card .fp-badge[data-fp-skeleton] { width: 110px; height: 26px; border-radius: 100px; }
.featured-product-card .fp-tag[data-fp-skeleton]   { width: 130px; height: 18px; margin-bottom: 10px; }
.featured-product-card .fp-name[data-fp-skeleton]  { width: 70%;  height: 28px; margin: 6px 0 12px; }
.featured-product-card .fp-desc[data-fp-skeleton]  { width: 100%; height: 18px; margin: 4px 0; }
.featured-product-card .fp-desc[data-fp-skeleton]::after { animation-delay: 0.1s; }
.featured-product-card .fp-spec .fp-spec-text span[data-fp-skeleton] {
    display: inline-block;
    width: 80px;
    height: 14px;
    margin-top: 2px;
}
.featured-product-card .fp-price[data-fp-skeleton]   { width: 180px; height: 28px; border-radius: 6px; }
.featured-product-card .fp-stars[data-fp-skeleton]   { width: 90px;  height: 16px; border-radius: 4px; }
.featured-product-card .fp-rating-text[data-fp-skeleton] { width: 120px; height: 14px; border-radius: 4px; }
.featured-product-card .fp-counter .fp-current,
.featured-product-card .fp-counter .fp-total { color: #c4c8cf; }

/* Main image skeleton (replaces the .fp-main-img while loading) */
.fp-main-skeleton {
    position: absolute;
    inset: 0;
    background: #eef0f3;
    border-radius: 16px;
    overflow: hidden;
}
.fp-main-skeleton::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        rgba(238, 240, 243, 0)   0%,
        rgba(255, 255, 255, 0.85) 50%,
        rgba(238, 240, 243, 0)   100%
    );
    background-size: 480px 100%;
    background-repeat: no-repeat;
    animation: fp-shimmer 1.4s linear infinite;
}
.featured-product-card[data-fp-state="ready"] .fp-main-skeleton { display: none; }

/* Loading state — disable arrow + button interactions */
.featured-product-card[data-fp-state="loading"] .fp-nav,
.featured-product-card[data-fp-state="loading"] #fpQuoteBtn { pointer-events: none; opacity: 0.4; }
.featured-product-card[data-fp-state="ready"] .fp-nav { pointer-events: auto; opacity: 1; }

/* Empty state */
.fp-empty {
    text-align: center;
    color: #6b7280;
    font-size: 15px;
    margin: 24px auto 0;
    max-width: 480px;
}
.fp-empty a { color: #e84954; text-decoration: underline; }

@media (prefers-reduced-motion: reduce) {
    [data-fp-skeleton]::after,
    .fp-main-skeleton::after { animation: none; }
}

.fp-badge {
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    background: #e84954;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: 100px;
    box-shadow: 0 4px 12px rgba(232, 73, 84, 0.28);
}

.fp-badge::before {
    content: '★';
    font-size: 10px;
}

.fp-counter {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 3;
    font-size: 13px;
    font-weight: 600;
    color: #6b7280;
    background: #fff;
    padding: 6px 12px;
    border-radius: 100px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.fp-current { color: #1a1a1a; }

.fp-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.fp-tag {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    color: #9333ea;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 10px;
}

.fp-name {
    font-size: clamp(1.5rem, 2.5vw, 2rem);
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 14px;
    line-height: 1.2;
    /* 真实 WC 商品名可能很长：最多 2 行，超出显示 … */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fp-desc {
    font-size: 14px;
    color: #6b7280;
    line-height: 1.65;
    margin-bottom: 24px;
    /* 真实 WC 描述可能是整段文案：最多 3 行，超出显示 … */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fp-specs {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

.fp-spec {
    display: flex;
    align-items: center;
    gap: 12px;
}

.fp-spec-icon {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #fff5f5;
    color: #e84954;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.fp-spec-icon svg { width: 18px; height: 18px; }

.fp-spec-text strong {
    display: block;
    font-size: 11px;
    font-weight: 700;
    color: #1a1a1a;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-bottom: 2px;
}

.fp-spec-text span {
    font-size: 13px;
    color: #6b7280;
}

.fp-price-row {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.fp-price {
    font-size: 1.6rem;
    font-weight: 700;
    color: #e84954;
}

.fp-rating {
    display: flex;
    align-items: center;
    gap: 8px;
}

.fp-stars {
    color: #fbbf24;
    font-size: 15px;
    letter-spacing: -1px;
}

.fp-star-half {
    position: relative;
    display: inline-block;
    color: #fbbf24;
}

.fp-star-half::after {
    content: '★';
    position: absolute;
    left: 0;
    top: 0;
    width: 50%;
    overflow: hidden;
    color: #d1d5db;
}

.fp-rating-text {
    font-size: 13px;
    color: #6b7280;
}

.fp-actions {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.fp-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 26px;
    background: #e84954;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    border-radius: 100px;
    transition: transform 0.25s var(--ease-out-quart), box-shadow 0.25s var(--ease-out-quart), background 0.25s;
}

.fp-btn-primary svg { width: 16px; height: 16px; }

.fp-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(232, 73, 84, 0.3);
    background: #d63d48;
}

.fp-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: #1a1a1a;
    text-decoration: none;
    transition: color 0.25s;
}

.fp-link svg { width: 16px; height: 16px; color: #6b7280; }

.fp-link:hover { color: #e84954; }

.fp-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid #f2f2f2;
    color: #1a1a1a;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
    z-index: 210;
    transition: background 0.25s, color 0.25s, transform 0.25s;
}

.fp-nav svg { width: 18px; height: 18px; }

.fp-nav:hover {
    background: #e84954;
    color: #fff;
    transform: translateY(-50%) scale(1.05);
}

.fp-nav-prev { left: -22px; }
.fp-nav-next { right: -22px; }

.fp-dots {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 48px;
}

.fp-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: none;
    background: #e5e7eb;
    cursor: pointer;
    transition: background 0.25s, transform 0.25s;
}

.fp-dot:hover { transform: scale(1.3); background: #f3a1a6; }
.fp-dot.active {
    background: #e84954;
    transform: scale(1.2);
}

/* Bottom feature chips */
.products-features {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 24px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.products-feature {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
    background: #fff5f5;
    border-radius: 16px;
    transition: transform 0.25s var(--ease-out-quart), box-shadow 0.25s var(--ease-out-quart);
}

.products-feature:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.06);
}

.pf-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #fff;
    color: #e84954;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.pf-icon svg { width: 22px; height: 22px; }

.pf-text strong {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: #1a1a1a;
    line-height: 1.2;
}

.pf-text span {
    display: block;
    font-size: 12px;
    color: #6b7280;
    line-height: 1.3;
}

/* ============================================================
   FORKLIFT SECTION
   ============================================================ */
/* ============================================================
   WHY CHOOSE TOYDIRECT
   ============================================================ */
.why-choose-part {
    position: relative;
    padding: 28px 0 40px;
}

.why-choose-part::after {
    content: '';
    position: absolute;
    left: 50%;
    top: -60px;
    transform: translateX(-50%);
    width: min(1500px, 100%);
    height: 628px;
    background: url('../images/259b77f5-8732-4796-ad53-11e36e873f29-remove-bg-io.png') no-repeat center / 100% 100%;
    /*background: url('../images/why-choose-bg.webp') no-repeat center / 100% 100%;*/
    z-index: 0;
    pointer-events: none;
}

.why-choose-header,
.why-choose-grid {
    position: relative;
    z-index: 1;
}

.why-choose-header {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 24px;
    padding: 0 24px;
}

.why-choose-label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--primary);
    margin-bottom: 14px;
}

.why-choose-label::before,
.why-choose-label::after {
    content: '';
    width: 24px;
    height: 1px;
    background: var(--primary);
    opacity: 0.6;
}

.why-choose-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 34px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--text);
    margin-bottom: 12px;
    letter-spacing: -0.02em;
}

.why-choose-title .highlight {
    color: var(--primary);
}

.why-choose-subtitle {
    font-size: 15px;
    line-height: 1.6;
    color: var(--text-light);
    max-width: 520px;
    margin: 0 auto;
}

.why-choose-grid {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 18px;
}

.why-choose-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 24px 18px;
    background: #ffffff;
    border-radius: 18px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.05);
    border: 1px solid #f2f2f2;
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.5s var(--ease-out-quart), transform 0.5s var(--ease-out-quart), box-shadow 0.3s;
}

.why-choose-card.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.why-choose-card.is-visible:nth-child(1) { transition-delay: 0ms; }
.why-choose-card.is-visible:nth-child(2) { transition-delay: 80ms; }
.why-choose-card.is-visible:nth-child(3) { transition-delay: 160ms; }
.why-choose-card.is-visible:nth-child(4) { transition-delay: 240ms; }
.why-choose-card.is-visible:nth-child(5) { transition-delay: 320ms; }

.why-choose-card:hover {
    box-shadow: 0 14px 36px rgba(232, 73, 84, 0.10);
}

.why-choose-icon {
    position: relative;
    width: 60px;
    height: 60px;
    flex-shrink: 0;
    border-radius: 50%;
    background: oklch(94% 0.05 22 / 0.45);
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
    transition: transform 0.3s var(--ease-out-quart), background 0.3s var(--ease-out-quart);
}

.why-choose-card:hover .why-choose-icon {
    transform: scale(1.08);
    background: oklch(92% 0.07 22 / 0.55);
}

.why-choose-icon .why-choose-svg {
    width: 24px;
    height: 24px;
    position: relative;
    z-index: 1;
}

.why-choose-icon .why-choose-ring {
    position: absolute;
    inset: -2px;
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    transform: rotate(-70deg);
}

.why-choose-card h4 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 8px;
    line-height: 1.25;
}

.why-choose-divider {
    width: 26px;
    height: 3px;
    background: var(--primary);
    border-radius: 2px;
    margin-bottom: 10px;
}

.why-choose-card p {
    font-size: 13px;
    color: var(--text-light);
    line-height: 1.5;
    margin: 0;
}

/* ============================================================
   FACTORY SHOWCASE — Our Factory grid
   ============================================================ */
/* ============================================================
   OUR FACTORY
   ============================================================ */
.factory-part {
    position: relative;
    padding: 64px 0 72px;
    background: transparent;
}

.factory-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 48px;
    align-items: center;
}

.factory-intro {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.5s var(--ease-out-quart), transform 0.5s var(--ease-out-quart);
}

.why-factory.is-visible .factory-intro {
    opacity: 1;
    transform: translateY(0);
}

.factory-label {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--primary);
}

.factory-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 36px;
    font-weight: 700;
    line-height: 1.15;
    color: var(--text);
    letter-spacing: -0.02em;
}

.factory-title .highlight {
    color: var(--primary);
}

.factory-divider {
    width: 48px;
    height: 3px;
    background: var(--primary);
    border-radius: 2px;
    margin-top: 2px;
}

.factory-desc {
    font-size: 14px;
    line-height: 1.7;
    color: var(--text-light);
    max-width: 260px;
}

.factory-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
    padding: 14px 28px;
    border-radius: 50px;
    background: var(--primary);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    transition: transform 0.3s var(--ease-out-quart), box-shadow 0.3s var(--ease-out-quart);
    box-shadow: 0 8px 20px rgba(232, 73, 84, 0.30);
}

.factory-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(232, 73, 84, 0.38);
}

.factory-btn-arrow {
    font-size: 16px;
    line-height: 1;
}

.factory-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

.factory-card {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    background: #ffffff;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.5s var(--ease-out-quart), transform 0.5s var(--ease-out-quart), box-shadow 0.3s;
}

.factory-card.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.factory-card.is-visible:nth-child(1) { transition-delay: 0ms; }
.factory-card.is-visible:nth-child(2) { transition-delay: 80ms; }
.factory-card.is-visible:nth-child(3) { transition-delay: 160ms; }
.factory-card.is-visible:nth-child(4) { transition-delay: 240ms; }

.factory-card:hover {
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.10);
}

.factory-card-image {
    position: relative;
    height: 360px;
    overflow: hidden;
    border-radius: 20px;
}

.factory-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s var(--ease-out-quart);
}

.factory-card:hover .factory-card-image img {
    transform: scale(1.05);
}

.factory-card-info {
    margin: -58px 14px 16px;
    position: relative;
    z-index: 2;
    background: #ffffff;
    border-radius: 16px;
    padding: 18px 14px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
    text-align: center;
}

.factory-card-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 12px;
}

.factory-card-icon svg {
    width: 22px;
    height: 22px;
}

.factory-card-text h4 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 8px;
}

.factory-card-line {
    width: 32px;
    height: 2px;
    background: var(--primary);
    border-radius: 2px;
    margin: 0 auto 8px;
}

.factory-card-text p {
    font-size: 13px;
    color: var(--text-light);
}

/* ============================================================
   CTA SECTION — Ready to Start Your Order
   ============================================================ */
.cta-section {
    position: relative;
    min-height: 85vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 0 0;
    /* Background swapped to a transparent PNG toy decoration on pure white.
       The original pink-tinted gradient + opaque toys-bg image is replaced
       so the section matches the reference: white background with the toy
       figures sitting cleanly at the bottom edges. */
    background-color: #ffffff;
    background-image: url('../images/cta-toys-decor.png');
    background-position: center bottom;
    background-size: cover;
    background-repeat: no-repeat;
    text-align: center;
    overflow: hidden;
}

.cta-wrapper {
    position: relative;
    z-index: 2;
    max-width: 820px;
    margin: 0 auto;
    padding: 0 24px;
}

.cta-top-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--primary);
    margin-bottom: 18px;
}

.cta-label-line {
    display: block;
    width: 28px;
    height: 2px;
    background: var(--primary);
    border-radius: 2px;
}

.cta-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(2.2rem, 4.5vw, 3.4rem);
    font-weight: 700;
    line-height: 1.15;
    color: var(--text);
    margin-bottom: 14px;
}

.cta-title .highlight { color: var(--primary); }

.cta-desc {
    font-size: 18px;
    color: var(--text-light);
    margin-bottom: 32px;
}

.cta-features {
    display: inline-flex;
    justify-content: center;
    gap: 36px;
    margin-bottom: 38px;
    flex-wrap: wrap;
}

.cta-feature {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 500;
    color: var(--text);
}

.cta-feature-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid oklch(28% 0.02 60 / 0.12);
    background: oklch(100% 0 0 / 0.65);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
}

.cta-feature-icon svg { width: 18px; height: 18px; }

.cta-buttons {
    display: inline-flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    justify-content: center;
}

.cta-btn-primary,
.cta-btn-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 15px 32px;
    border-radius: 50px;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    transition: transform 0.25s var(--ease-out-quart), box-shadow 0.25s var(--ease-out-quart), background 0.25s;
}

.cta-btn-primary {
    background: var(--primary);
    color: #fff;
    box-shadow: 0 8px 24px oklch(63% 0.17 22 / 0.35);
}

.cta-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 30px oklch(63% 0.17 22 / 0.45);
    background: var(--primary-dark);
}

.cta-arrow { transition: transform 0.25s var(--ease-out-quart); }
.cta-btn-primary:hover .cta-arrow { transform: translateX(4px); }

.cta-btn-outline {
    background: oklch(100% 0 0 / 0.85);
    color: var(--text);
    border: 1px solid oklch(28% 0.02 60 / 0.12);
    box-shadow: 0 4px 14px oklch(28% 0.02 60 / 0.08);
}

.cta-btn-outline:hover {
    transform: translateY(-2px);
    border-color: var(--primary);
    color: var(--primary);
}

.cta-phone-icon { width: 18px; height: 18px; }

/* ============================================================
   CERTIFICATIONS PANEL — 参考图 100% 复刻：横向徽章卡片条
   ============================================================ */
.cta-certs-panel {
    position: relative;
    z-index: 2;
    width: 100%;
    margin-top: 70px;
    padding: 0 24px 110px;
    text-align: center;
}

.cta-certs-head {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-bottom: 28px;
    width: 100%;
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
}

.cta-certs-head h3 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 18px;
    font-weight: 600;
    color: #4a4f5e;
    letter-spacing: 0.02em;
    white-space: nowrap;
    flex-shrink: 0;
}

.cta-certs-line {
    display: block;
    flex: 1;
    max-width: 120px;
    height: 1px;
    min-width: 20px;
    background: linear-gradient(90deg, transparent, rgba(74,79,94,0.22), rgba(74,79,94,0.22), transparent);
}

.cta-certs-grid {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    max-width: 1000px;
    margin: 0 auto;
}

.cta-cert-card {
    position: relative;
    overflow: hidden;
    width: 156px;
    height: 96px;
    padding: 0 14px;
    background: #ffffff;
    border-radius: 14px;
    box-shadow:
        0 8px 24px -10px rgba(20,30,50,0.10),
        0 2px 6px -2px rgba(20,30,50,0.04);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

/* 炫新（shimmer）光泽扫过效果 */
.cta-cert-card::after {
    content: '';
    position: absolute;
    top: -80%;
    left: -50%;
    width: 32%;
    height: 260%;
    background: linear-gradient(110deg, transparent 38%, rgba(255,255,255,0.95) 50%, transparent 62%);
    transform: rotate(28deg) translateX(-140%);
    animation: cert-shimmer 4s ease-in-out infinite;
    pointer-events: none;
}

.cta-cert-card:nth-child(1)::after { animation-delay: 0s; }
.cta-cert-card:nth-child(3)::after { animation-delay: 0.45s; }
.cta-cert-card:nth-child(5)::after { animation-delay: 0.9s; }
.cta-cert-card:nth-child(7)::after { animation-delay: 1.35s; }
.cta-cert-card:nth-child(9)::after { animation-delay: 1.8s; }

@keyframes cert-shimmer {
    0%, 100% { transform: rotate(28deg) translateX(-140%); }
    55% { transform: rotate(28deg) translateX(420%); }
}

.cta-cert-mark {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 28px;
    font-weight: 800;
    color: #0a1a33;
    line-height: 1;
    letter-spacing: -0.02em;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cta-cert-mark span {
    font-size: 0.72em;
    font-weight: 700;
    margin-left: 2px;
}

.cta-cert-astm svg {
    width: 46px;
    height: 46px;
}

.cta-cert-name {
    font-size: 11px;
    font-weight: 500;
    color: #8b92a3;
    line-height: 1.35;
    letter-spacing: 0.01em;
}

.cta-cert-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #dd5559;
    flex-shrink: 0;
}

@media (max-width: 980px) {
    .cta-cert-card { width: 138px; height: 86px; border-radius: 12px; }
    .cta-cert-mark { font-size: 24px; }
    .cta-cert-astm svg { width: 40px; height: 40px; }
    .cta-cert-name { font-size: 10px; }
    .cta-certs-head { margin-bottom: 24px; }
}

@media (max-width: 720px) {
    .cta-certs-panel { margin-top: 50px; padding-bottom: 90px; }
    .cta-certs-grid { gap: 8px; }
    .cta-cert-dot { display: none; }
    .cta-cert-card { width: calc(33.333% - 8px); max-width: 140px; height: 80px; }
    .cta-cert-mark { font-size: 22px; }
    .cta-certs-head h3 { font-size: 16px; }
    .cta-certs-line { flex: 1; min-width: 12px; }
}

@media (max-width: 480px) {
    .cta-cert-card { width: calc(50% - 8px); max-width: 130px; height: 76px; border-radius: 12px; }
    .cta-cert-mark { font-size: 20px; }
    .cta-cert-name { font-size: 10px; }
    .cta-certs-head { gap: 10px; margin-bottom: 20px; }
    .cta-certs-head h3 { font-size: 15px; }
    .cta-certs-line { flex: 1; min-width: 10px; }
}

/* ============================================================
   RIGHT-SIDE SECTION DOTS — 全屏分屏导航（恢复）
   ============================================================ */
.snap-dots {
    position: fixed;
    right: 24px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 200;
    display: flex;
    flex-direction: column;
    gap: 12px;
    pointer-events: auto;
}
.snap-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: oklch(70% 0.02 60 / 0.45);
    border: 2px solid transparent;
    cursor: pointer;
    padding: 0;
    transition: background 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
}
.snap-dot.active {
    background: var(--primary);
    transform: scale(1.25);
    border-color: oklch(100% 0 0 / 0.6);
}
.snap-dot:hover { background: var(--primary-light); }

/* Hide dots on small screens / touch devices */
@media (max-width: 768px), (hover: none) and (pointer: coarse) {
    .snap-dots { display: none; }
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
    --footer-bg: #1e1e2f;
    background: var(--footer-bg);
    color: #fff;
    padding: 70px 0 0;
}

.footer-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
}

.footer-main {
    display: grid;
    grid-template-columns: 1.4fr 1.8fr 1.5fr;
    gap: 48px;
    padding-bottom: 50px;
    border-bottom: 1px solid oklch(100% 0 0 / 0.08);
}

.footer-brand { display: flex; flex-direction: column; gap: 18px; }

.footer-info {
    display: flex;
    flex-direction: column;
    gap: 14px;
    align-items: flex-start;
}

.footer-mascot {
    width: 76px;
    height: auto;
    align-self: flex-start;
    margin-top: 4px;
    filter: drop-shadow(0 8px 16px rgba(0,0,0,.35));
}
.footer-office {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13.5px;
    line-height: 1.6;
    color: oklch(100% 0 0 / 0.6);
    max-width: 300px;
}
.footer-office svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    margin-top: 3px;
    color: var(--primary);
}

.footer-logo {
    display: flex;
    align-items: center;
    gap: 10px;
}

.footer-logo-mark {
    height: 42px;
    width: auto;
    display: block;
    flex-shrink: 0;
    mix-blend-mode: multiply;  /* drop the white background on the dark footer */
}

.footer-logo-img { height: 50px; width: auto; display: block; }

.footer-logo-icon {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
}

.footer-logo-text {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.4px;
    line-height: 1;
    color: #fff;
    white-space: nowrap;
}

.footer-logo-text .highlight { color: var(--primary); }

.footer-tagline {
    font-size: 14px;
    line-height: 1.7;
    color: oklch(100% 0 0 / 0.55);
    max-width: 240px;
}

.footer-socials {
    display: flex;
    gap: 12px;
}

.footer-social {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: oklch(100% 0 0 / 0.08);
    color: oklch(100% 0 0 / 0.75);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.25s, color 0.25s, transform 0.25s;
}

.footer-social:hover {
    background: var(--primary);
    color: #fff;
    transform: translateY(-2px);
}

.footer-social svg { width: 16px; height: 16px; }

.footer-links {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}

.footer-col h4,
.footer-offices-title {
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    margin-bottom: 18px;
}

.footer-col a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: oklch(100% 0 0 / 0.55);
    text-decoration: none;
    font-size: 13px;
    padding: 8px 0;
    transition: color 0.25s;
}

.footer-col a:hover { color: var(--primary-light); }

.footer-link-arrow { color: oklch(100% 0 0 / 0.25); font-size: 12px; transition: color 0.25s; }
.footer-col a:hover .footer-link-arrow { color: var(--primary-light); }

.footer-offices {
    position: relative;
    background: oklch(100% 0 0 / 0.05);
    border: 1px solid oklch(100% 0 0 / 0.08);
    border-radius: 18px;
    padding: 22px;
    overflow: hidden;
}

.footer-offices-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    position: relative;
    z-index: 1;
}

.footer-offices-icon {
    width: 20px;
    height: 20px;
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
}

.footer-offices-icon svg { width: 18px; height: 18px; }

.footer-office-list { display: flex; flex-direction: column; gap: 14px; position: relative; z-index: 1; }

.footer-office {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px;
    background: oklch(100% 0 0 / 0.06);
    border-radius: 12px;
    border: 1px solid oklch(100% 0 0 / 0.06);
}

.footer-office-thumb {
    width: 58px;
    height: 58px;
    border-radius: 10px;
    overflow: hidden;
    flex-shrink: 0;
}

.footer-office-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.footer-office-info h5 {
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    margin-bottom: 2px;
}

.footer-office-info p {
    font-size: 12px;
    color: oklch(100% 0 0 / 0.55);
    line-height: 1.5;
}

.footer-office-address {
    font-size: 11px !important;
    color: oklch(100% 0 0 / 0.45) !important;
    margin-top: 2px;
}

.footer-map {
    position: absolute;
    right: -20px;
    bottom: -20px;
    width: 220px;
    height: 150px;
    opacity: 0.55;
    pointer-events: none;
    z-index: 0;
}

.footer-map svg { width: 100%; height: 100%; }

.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 0;
    font-size: 13px;
    color: oklch(100% 0 0 / 0.45);
}

.footer-bottom-left {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.footer-powered {
    margin: 0;
    font-size: 12.5px;
    color: oklch(100% 0 0 / 0.6);
}
.footer-powered a {
    color: #e84954;
    text-decoration: none;
    font-weight: 600;
}
.footer-powered a:hover { text-decoration: underline; }

.footer-certs { display: flex; align-items: center; gap: 12px; }

.footer-certs > span,
.footer-cert-iso {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 10px;
    background: oklch(100% 0 0 / 0.08);
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    color: oklch(100% 0 0 / 0.75);
}

.footer-cert-iso svg { width: 13px; height: 13px; }

/* ============================================================
   FULL-PAGE SNAP SCROLL — one screen per section
   First screen (intro globe) stays unchanged; later sections
   snap to the viewport on vertical scroll.
   ============================================================ */
[data-snap-section] {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    scroll-snap-align: start;
    scroll-snap-stop: always;
}

/* Footer is the final snap stop so mandatory snap never pulls it back to the CTA screen.
   Scoped to the homepage only. */
html.home .footer,
html:has([data-snap-section]) .footer { scroll-snap-align: start; }

/* Intro still centers its absolute panels via flex centering */
.intro[data-snap-section] { justify-content: center; }

/* Trust bar / categories centered vertically within full screen */
.trust-bar[data-snap-section],
.product-categories[data-snap-section] {
    padding: 72px 0;
}

/* Products section: compact full-page fit */
.products[data-snap-section] {
    padding: 40px 0;
}
.products[data-snap-section] .featured-product-card {
    padding: 24px 28px;
    gap: 24px;
    margin-bottom: 24px;
}
.products[data-snap-section] .fp-main { min-height: 260px; padding: 28px; }
.products[data-snap-section] .fp-name { font-size: clamp(1.3rem, 2.4vw, 1.7rem); margin-bottom: 10px; }
.products[data-snap-section] .fp-desc { font-size: 13px; margin-bottom: 16px; }
.products[data-snap-section] .fp-specs { gap: 12px; margin-bottom: 16px; }
.products[data-snap-section] .fp-spec-icon { width: 32px; height: 32px; }
.products[data-snap-section] .fp-spec-icon svg { width: 16px; height: 16px; }
.products[data-snap-section] .fp-spec-text strong { font-size: 10px; }
.products[data-snap-section] .fp-spec-text span { font-size: 12px; }
.products[data-snap-section] .fp-price { font-size: 1.35rem; }
.products[data-snap-section] .fp-actions { margin-top: 4px; }
.products[data-snap-section] .fp-dots { margin-bottom: 24px; }
.products[data-snap-section] .products-features { gap: 80px; }
.products[data-snap-section] .products-feature { padding: 14px 16px; }

/* Why Choose + Our Factory combined section: compact full-page fit */
.why-factory[data-snap-section] {
    padding: 24px 0;
}
.why-factory[data-snap-section] .why-choose-part {
    padding: 16px 0 32px;
}
.why-factory[data-snap-section] .why-choose-part::after {
    top: -40px;
    width: min(1200px, 100%);
    height: 490px;
}
.why-factory[data-snap-section] .why-choose-header {
    margin-bottom: 16px;
}
.why-factory[data-snap-section] .why-choose-title {
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    margin-bottom: 8px;
}
.why-factory[data-snap-section] .why-choose-subtitle {
    font-size: 14px;
}
.why-factory[data-snap-section] .why-choose-grid {
    gap: 14px;
}
.why-factory[data-snap-section] .why-choose-card {
    padding: 18px 14px;
}
.why-factory[data-snap-section] .why-choose-icon {
    width: 52px;
    height: 52px;
    margin-bottom: 10px;
}
.why-factory[data-snap-section] .factory-part {
    padding: 24px 0 32px;
}
.why-factory[data-snap-section] .factory-container {
    gap: 32px;
    grid-template-columns: 220px 1fr;
}
.why-factory[data-snap-section] .factory-title {
    font-size: clamp(1.6rem, 3vw, 2.2rem);
}
.why-factory[data-snap-section] .factory-desc {
    font-size: 13px;
}
.why-factory[data-snap-section] .factory-btn {
    padding: 12px 22px;
    font-size: 13px;
}
.why-factory[data-snap-section] .factory-cards {
    gap: 14px;
}
.why-factory[data-snap-section] .factory-card-image {
    height: 260px;
}
.why-factory[data-snap-section] .factory-card-info {
    margin: -42px 10px 12px;
    padding: 14px 10px;
}
.why-factory[data-snap-section] .factory-card-icon {
    width: 40px;
    height: 40px;
    margin-bottom: 8px;
}
.why-factory[data-snap-section] .factory-card-icon svg {
    width: 18px;
    height: 18px;
}
.why-factory[data-snap-section] .factory-card-text h4 {
    font-size: 13px;
    margin-bottom: 6px;
}
.why-factory[data-snap-section] .factory-card-text p {
    font-size: 12px;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
    /* ============================================================
       MOBILE / TABLET NAVIGATION  (<= 1024px)

       Bar     :  [logo] ................. [search] [hamburger]
       Drawer  :  a full-height white sheet that drops in flush under
                  the bar (NOT the old floating 40%-tall white strip),
                  56px tap rows, a Categories accordion built from the
                  live WC tree, and a Get Quote CTA + contact block
                  pinned at the end of the sheet.

       --nav-h is measured live by cart.js (the bar shrinks when
       .scrolled is on) so the sheet always starts exactly under it.
       ============================================================ */
    .navbar,
    .navbar.scrolled { padding: 11px 0; }
    .nav-container {
        padding: 0 16px;
        gap: 10px;
        justify-content: flex-start;
    }
    .logo { gap: 9px; }
    .logo-mark { height: 32px; }
    .logo-text { font-size: 19px; }

    /* Keep search + hamburger grouped on the right with exactly 10px between them */
    .nav-actions { gap: 8px; margin-left: auto; }
    .nav-actions .btn { display: none; }
    .nav-search-btn { width: 40px; height: 40px; }
    .nav-search-btn svg { width: 18px; height: 18px; }

    /* ---- hamburger: same 40px pill as the search icon, morphs to X ---- */
    .nav-toggle {
        display: block;
        position: relative;
        width: 40px;
        height: 40px;
        padding: 0;
        border-radius: 50%;
        border: 1px solid var(--border);
        background: oklch(97% 0.012 70);
        transition: background .25s var(--ease-out-quart), border-color .25s var(--ease-out-quart);
    }
    .nav-toggle span {
        position: absolute;
        left: 11px;
        width: 18px;
        height: 2px;
        border-radius: 2px;
        background: var(--text);
        transition: top .28s var(--ease-in-out), transform .28s var(--ease-in-out),
                    opacity .16s linear, background .25s var(--ease-in-out);
    }
    .nav-toggle span:nth-child(1) { top: 13px; }
    .nav-toggle span:nth-child(2) { top: 19px; }
    .nav-toggle span:nth-child(3) { top: 25px; }
    .nav-toggle.is-active { background: var(--primary); border-color: var(--primary); }
    .nav-toggle.is-active span { background: #ffffff; }
    .nav-toggle.is-active span:nth-child(1) { top: 19px; transform: rotate(45deg); }
    .nav-toggle.is-active span:nth-child(2) { opacity: 0; transform: scaleX(.3); }
    .nav-toggle.is-active span:nth-child(3) { top: 19px; transform: rotate(-45deg); }

    /* ---- the drawer itself ---- */
    .nav-menu { display: none; }
    .nav-menu.open {
        display: flex;
        flex-direction: column;
        gap: 0;
        position: fixed;
        top: var(--nav-h, 62px);
        left: 0;
        right: 0;
        margin: 0;
        max-height: calc(100vh - var(--nav-h, 62px));
        padding: 12px 0 calc(20px + env(safe-area-inset-bottom, 0px));
        max-width: none;
        white-space: normal;
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        background: #ffffff;
        border-top: 1px solid var(--border);
        box-shadow: 0 26px 50px -20px rgba(15, 23, 42, .28);
        animation: navDrawerIn .3s var(--ease-out-quart) both;
    }
    .nav-menu.open > li { width: 100%; }
    /* Each top-level row is a self-contained card with a tinted icon chip
       on the left and a chevron on the right (100% matches the target shot). */
    .nav-menu.open > li + li > .nav-link { border-top: 0; }
    .nav-menu.open .nav-link {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 10px;
        width: auto;
        margin: 1px 14px;
        padding: 11px 14px;
        font-size: 15.5px;
        font-weight: 600;
        letter-spacing: -0.01em;
        line-height: 1.25;
        color: var(--text);
        background: #ffffff;
        border: 1px solid rgba(15, 23, 42, .05);
        border-radius: 13px;
        box-shadow: 0 1px 5px rgba(15, 23, 42, .04);
    }
    .nav-menu.open .nav-link::after { display: none; }
    /* The colored icon chip injected by cart.js (light tint bg + bold icon color). */
    .nav-menu.open .nav-link-icon {
        flex: none;
        order: 0;
        width: 36px;
        height: 36px;
        border-radius: 10px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    .nav-menu.open .nav-link-icon svg { width: 19px; height: 19px; }
    /* trailing chevron on every plain row */
    .nav-menu.open .nav-link::before {
        content: '';
        order: 9;
        flex: none;
        width: 7px;
        height: 7px;
        margin-left: auto;
        margin-right: 2px;
        border-right: 2px solid oklch(78% 0.015 70);
        border-bottom: 2px solid oklch(78% 0.015 70);
        transform: rotate(-45deg);
    }
    .nav-menu.open .nav-link.active { color: var(--primary); }
    .nav-menu.open .nav-link:active { background: oklch(97% 0.012 70); }

    /* Categories row: keep its own caret, drop the generic chevron */
    .nav-menu.open .mega-trigger::before { display: none; }
    .nav-menu.open .mega-caret {
        order: 9;
        margin-left: auto;
        margin-right: 1px;
        color: oklch(70% 0.02 70);
        transition: transform .3s var(--ease-out-quart), color .3s var(--ease-out-quart);
    }
    .nav-menu.open .mega-caret svg { width: 16px; height: 16px; }
    .nav-menu.open .has-mega.is-open > .mega-trigger { color: var(--primary); }
    .nav-menu.open .has-mega.is-open .mega-caret { transform: rotate(180deg); color: var(--primary); }

    /* ---- Categories accordion (built by nav-mega.js from the live tree) ----
       Nested: each category row toggles its L2/L3 children. */
    .nav-acc {
        list-style: none;
        margin: 0;
        padding: 8px 0 12px;
        background: oklch(98.2% 0.005 70);
        border-top: 1px solid oklch(94% 0.006 70);
        display: none;
    }
    .nav-menu.open .has-mega.is-open .nav-acc {
        display: block;
        animation: navAccIn .26s var(--ease-out-quart) both;
    }
    .nav-acc li + li { margin-top: 6px; }
    .nav-acc a,
    .nav-acc button.nav-acc-row {
        display: flex;
        align-items: center;
        gap: 10px;
        width: calc(100% - 28px);
        margin: 0 14px;
        padding: 11px 14px;
        font-size: 14.5px;
        font-weight: 500;
        color: var(--text-light);
        text-decoration: none;
        text-align: left;
        background: #ffffff;
        border: 1px solid rgba(15, 23, 42, .06);
        border-radius: 12px;
        font-family: inherit;
        cursor: pointer;
    }
    .nav-acc a:active,
    .nav-acc button.nav-acc-row:active { background: oklch(97% 0.012 70); }
    .nav-acc-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: none;
        width: 26px;
        height: 26px;
        border-radius: 8px;
        background: #ffffff;
        border: 1px solid var(--border);
        color: var(--primary);
    }
    .nav-acc-icon svg { width: 15px; height: 15px; }
    .nav-acc-name { min-width: 0; }
    .nav-acc-count {
        margin-left: auto;
        flex: none;
        font-size: 11.5px;
        font-weight: 600;
        color: oklch(58% 0.02 70);
        background: #ffffff;
        border: 1px solid var(--border);
        border-radius: 999px;
        padding: 2px 9px;
    }
    .nav-acc-caret {
        display: inline-flex;
        flex: none;
        margin-left: 6px;
        color: oklch(70% 0.02 70);
        transition: transform .25s var(--ease-out-quart);
    }
    .nav-acc-caret svg { width: 12px; height: 12px; }
    .nav-acc-item.is-open > .nav-acc-row .nav-acc-caret { transform: rotate(90deg); color: var(--primary); }
    .nav-acc-item.is-open > .nav-acc-row--l1 { color: var(--primary); border-color: rgba(232, 73, 84, .18); }

    /* Nested sub-lists */
    .nav-acc-sub {
        list-style: none;
        margin: 4px 0 0;
        padding: 0 0 0 18px;
        display: none;
    }
    .nav-acc-item.is-open > .nav-acc-sub { display: block; animation: navAccIn .22s var(--ease-out-quart) both; }
    .nav-acc-sub li + li { margin-top: 4px; }
    .nav-acc-sub .nav-acc-row--l2,
    .nav-acc-sub .nav-acc-row--l3,
    .nav-acc-sub .nav-acc-sub-all a {
        padding: 9px 12px;
        font-size: 13.5px;
        width: calc(100% - 12px);
        margin: 0 0 0 12px;
        background: #ffffff;
    }
    .nav-acc-sub .nav-acc-row--l2 { font-weight: 600; color: var(--text); }
    .nav-acc-sub .nav-acc-row--l3,
    .nav-acc-sub .nav-acc-sub-all a { font-weight: 500; color: var(--text-light); }
    .nav-acc-sub .nav-acc-sub-all a { color: var(--primary); font-weight: 600; }
    .nav-acc-sub .nav-acc-count {
        font-size: 11px;
        padding: 1px 7px;
    }
    .nav-acc-sub .nav-acc-caret svg { width: 11px; height: 11px; }
    .nav-acc a.nav-acc-all { color: var(--primary); font-weight: 600; }

    /* ---- CTA + contact block at the end of the sheet ---- */
    .nav-menu.open .nav-drawer-cta {
        display: block;
        padding: 20px;
        margin-top: auto;
        border-top: 1px solid oklch(94% 0.006 70);
        background: oklch(98.2% 0.005 70);
    }
    .nav-menu.open .nav-drawer-cta .btn {
        display: flex;
        width: 100%;
        justify-content: center;
        gap: 8px;
        padding: 15px 20px;
        font-size: 16px;
        border-radius: 12px;
    }
    .nav-drawer-meta { margin-top: 14px; display: grid; gap: 2px; }
    .nav-drawer-meta a {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 7px 0;
        font-size: 13.5px;
        color: var(--text-light);
        text-decoration: none;
        word-break: break-all;
    }
    .nav-drawer-meta svg { width: 16px; height: 16px; flex: none; color: var(--primary); }

    /* lock the page behind the sheet (html is the scroller on the home page) */
    html.nav-open,
    body.nav-open { overflow: hidden; }

    .hero { padding: 120px 0 90px; }
    .hero-container {
        grid-template-columns: 1fr;
        grid-template-areas:
            "content"
            "visual"
            "highlights";
        text-align: center;
        gap: 36px;
    }
    .hero-title { font-size: 2.6rem; }
    .hero-desc { margin-left: auto; margin-right: auto; }
    .hero-actions { justify-content: center; }
    .hero-stats { max-width: 640px; margin: 0 auto; grid-template-columns: repeat(2, 1fr); }
    .hero-highlights { max-width: 640px; margin: 0 auto; grid-template-columns: repeat(2, 1fr); }
    .hero-highlight { text-align: left; }
    .hero-visual { min-height: 360px; }

    /* Full-page snap is a nice desktop effect, but on tablet/phone several
       sections (especially "Why Choose + Our Factory" and "Products") are
       taller than the viewport. With mandatory snap + scroll-snap-stop:always
       the browser traps the user at each section boundary and hides the
       middle of the content. Below 1024px we fall back to normal free
       scrolling so every block is fully reachable. The dots are hidden too. */
    html.home,
    html:has([data-snap-section]) { scroll-snap-type: none; }
    [data-snap-section] {
        min-height: auto;
        scroll-snap-align: none;
        scroll-snap-stop: normal;
        justify-content: flex-start;
    }
    .hero-map { inset: -20px; }
    .hero-mascot { max-width: 460px; }
    .categories-header { max-width: 720px; padding: 0 80px; }
    .categories-bg-star { width: 60px; height: 60px; left: 0; }
    .categories-bg-mascot { width: 130px; right: -20px; }
    .categories-grid { grid-template-columns: none; }
    .category-card { flex: 0 0 210px; }
    .category-features { grid-template-columns: repeat(2, 1fr); }
    .why-choose-grid { grid-template-columns: repeat(2, 1fr); }
    .why-choose-card:last-child { grid-column: 1 / -1; }
    .factory-container { grid-template-columns: 1fr; gap: 36px; }
    .factory-intro { text-align: center; align-items: center; }
    .factory-desc { max-width: 520px; }
    .factory-cards { grid-template-columns: repeat(2, 1fr); gap: 14px; }
    .factory-card-image { height: 200px; border-radius: 20px 20px 0 0; }
    .why-factory[data-snap-section] .factory-card-info {
        margin: 0;
        padding: 14px 12px 16px;
        border-radius: 0 0 20px 20px;
        box-shadow: none;
    }
    .factory-card-info { justify-content: center; }
    .footer-main { grid-template-columns: 1fr; gap: 40px; }

    /* Featured product card responsive */
    .featured-product-card {
        grid-template-columns: 1fr;
        padding: 24px;
        gap: 24px;
    }
    .fp-thumbs {
        flex-direction: row;
        justify-content: center;
        order: 2;
    }
    .fp-main {
        order: 1;
        min-height: 280px;
    }
    .fp-info { order: 3; }
    .fp-nav { display: none; }
    .fp-specs { grid-template-columns: repeat(2, 1fr); }
    .products-features { grid-template-columns: repeat(2, 1fr); }
    .products-decoration { display: none; }
}

@media (max-width: 768px) {
    /* Globe: dim it on small screens so hero copy stays readable, and hide the
       19 country labels (they crowd a small globe). Size itself is camera-driven
       in js/globe.js. */
    .globe-stage { opacity: 0.6; }
    .country-label { display: none; }
    .hero-title { font-size: 2.2rem; }
    .hero-stats { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .hero-stat-icon { width: 38px; height: 38px; }
    .hero-stat-icon svg { width: 18px; height: 18px; }
    .hero-stat-num { font-size: 17px; }
    .hero-highlights { grid-template-columns: 1fr; gap: 12px; }
    .hero-actions { flex-direction: column; align-items: center; }
    .hero-actions .btn-primary,
    .btn-play { width: 100%; max-width: 280px; justify-content: center; }
    .categories-header { padding: 0 24px; }
    .categories-header-bg { display: none; }
    .categories-grid { grid-template-columns: none; gap: 16px; }
    .category-card { flex: 0 0 200px; }
    .category-card { padding: 16px; }
    .category-image-wrap { height: 150px; }
    .category-image { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; }
    .product-categories,
    .product-categories[data-snap-section] { padding: 48px 0; }
    .categories-header { margin-bottom: 28px; }
    .category-features { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .category-feature { padding: 12px; }
    .products,
    .products[data-snap-section] { padding: 40px 0; }
    .why-choose-part { padding: 24px 0; }
    .why-choose-part::after { display: none; }
    .why-choose-header { margin-bottom: 18px; }
    .why-choose-title { font-size: 26px; }
    .why-choose-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
    .why-choose-card { padding: 18px; }
    .why-choose-icon { width: 48px; height: 48px; }
    .why-choose-icon .why-choose-svg { width: 22px; height: 22px; }
    .why-choose-card h4 { font-size: 14px; }
    .factory-part { padding: 24px 0; }
    .factory-title { font-size: 26px; }
    .factory-btn { width: 100%; max-width: 280px; justify-content: center; }
    /* Mobile: the global .why-factory[data-snap-section] uses 220px+1fr, which
       squishes the left text and the 2-column cards into narrow strips. Force
       the container to a single column here so the intro and cards are full-width. */
    .why-factory[data-snap-section] .factory-container {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    .why-factory[data-snap-section] .factory-cards {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
    .why-factory[data-snap-section] .factory-card-image { height: 150px; }
    .why-factory[data-snap-section] .factory-card-info {
        margin: 0;
        padding: 12px 10px 14px;
        border-radius: 0 0 20px 20px;
        box-shadow: none;
    }
    .why-factory[data-snap-section] .factory-card-text h4 {
        word-break: break-word;
    }
    .cta-section { background-size: 100% auto; }
    .cta-title { font-size: 2rem; }
    .cta-features { flex-direction: column; gap: 14px; }
    .cta-buttons { flex-direction: column; width: 100%; max-width: 280px; margin: 0 auto; }
    .cta-btn-primary,
    .cta-btn-outline { width: 100%; justify-content: center; }
    .footer-main { grid-template-columns: 1fr; gap: 36px; text-align: center; }
    .footer { padding: 50px 0 0; }
    .footer-brand { align-items: center; }
    .footer-mascot { align-self: center; width: 64px; }
    .footer-info { align-items: center; }
    .footer-tagline { margin: 0 auto; }
    .footer-links { grid-template-columns: repeat(3, 1fr); gap: 18px; text-align: center; }
    .footer-col h4 { margin-bottom: 14px; font-size: 13px; }
    .footer-col a { justify-content: center; padding: 5px 0; font-size: 12.5px; }
    .footer-link-arrow { display: none; }
    .footer-offices { text-align: left; }
    .footer-office { justify-content: flex-start; }
    .footer-map { width: 160px; height: 110px; right: -10px; bottom: -10px; opacity: 0.4; }
    .footer-bottom { flex-direction: column; gap: 16px; text-align: center; padding: 20px 0; }

    /* Mobile featured product */
    .featured-product-card { padding: 20px 16px; }
    .fp-main { min-height: 220px; padding: 20px; }
    .fp-main-img { height: 220px; }
    .fp-name { font-size: 1.35rem; -webkit-line-clamp: 2; }
    .fp-desc { font-size: 13px; -webkit-line-clamp: 2; }
    .fp-specs { grid-template-columns: 1fr 1fr; gap: 12px; }
    .fp-price-row { flex-direction: column; align-items: flex-start; gap: 10px; }
    .fp-actions { flex-direction: column; align-items: flex-start; gap: 14px; }
    .fp-btn-primary { width: 100%; max-width: 280px; justify-content: center; }
    .fp-dots { margin-bottom: 24px; }
    /* thumbnail strip scrolls horizontally instead of clipping on phones */
    .fp-thumbs {
        flex-wrap: nowrap;
        justify-content: flex-start;
        overflow-x: auto;
        max-width: 100%;
        padding: 2px 0 6px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .fp-thumbs::-webkit-scrollbar { display: none; }
    .fp-thumb { flex: 0 0 auto; }
    .products { padding: 48px 0 40px; }
    .products-header { margin-bottom: 28px; }
    .products-features { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .products[data-snap-section] .products-features { gap: 10px; }
    .products-feature { padding: 12px; }
    .trust-grid { gap: 24px; }
}

@media (max-width: 480px) {
    /* ===== Footer compact redesign for mobile ===== */
    .footer { padding: 28px 0 0; }
    .footer-container { padding: 0 16px; }
    .footer-main {
        grid-template-columns: 1fr;
        gap: 22px;
        padding-bottom: 22px;
        text-align: center;
    }
    .footer-brand {
        align-items: center;
        gap: 10px;
    }
    .footer-logo-mark { height: 36px; }
    .footer-logo-text { font-size: 20px; }
    .footer-brand > p {
        font-size: 13px;
        line-height: 1.55;
        color: oklch(100% 0 0 / 0.6);
        margin: 0 auto;
    }
    .footer-links {
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
        text-align: center;
    }
    .footer-col h4 {
        font-size: 12px;
        margin-bottom: 8px;
        color: #fff;
    }
    .footer-col a {
        justify-content: center;
        padding: 3px 0;
        font-size: 11.5px;
        color: oklch(100% 0 0 / 0.55);
    }
    .footer-link-arrow { display: none; }
    .footer-info {
        align-items: center;
        gap: 12px;
    }
    .footer-mascot { display: none; }
    .footer-office {
        background: transparent;
        border: none;
        padding: 0;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 6px;
        font-size: 12px;
        line-height: 1.5;
        color: oklch(100% 0 0 / 0.55);
        max-width: 100%;
    }
    .footer-office svg {
        width: 18px;
        height: 18px;
        margin: 0;
        color: var(--primary);
    }
    .footer-map { display: none; }
    .footer-office-address { display: none; }
    .footer-bottom {
        flex-direction: column;
        gap: 12px;
        text-align: center;
        padding: 16px 0;
        font-size: 11.5px;
        color: oklch(100% 0 0 / 0.4);
    }
    .footer-powered { font-size: 11.5px; color: oklch(100% 0 0 / 0.5); }
    .footer-certs {
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px;
    }
    .footer-certs > span,
    .footer-cert-iso {
        padding: 6px 12px;
        font-size: 11px;
        background: oklch(100% 0 0 / 0.1);
        border-radius: 6px;
    }
    .fp-thumb { width: 50px; height: 50px; }
    .fp-main-img { height: 170px; }
    .fp-main { min-height: 190px; }
    .fp-specs { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .fp-spec {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 6px;
    }
    .products[data-snap-section] .fp-spec-icon { width: 30px; height: 30px; }
    .products[data-snap-section] .fp-spec-icon svg { width: 15px; height: 15px; }
    .products[data-snap-section] .fp-spec-text strong { font-size: 9px; }
    .products[data-snap-section] .fp-spec-text span { font-size: 11px; }
    .fp-price-row { flex-direction: row; align-items: center; justify-content: space-between; gap: 10px; }
    /* Tighten the hero + sections so phones read cleanly */
    .hero { padding: 92px 0 56px; }
    .hero-container { gap: 28px; }
    .hero-title { font-size: 1.95rem; line-height: 1.1; }
    .hero-desc { font-size: 15px; margin-bottom: 22px; }
    .hero-eyebrow { font-size: 12px; padding: 7px 13px; }
    .hero-visual { min-height: 300px; }
    .hero-stats { gap: 10px; }
    .hero-highlight { padding: 12px 14px; }
    .categories-header { padding: 0 16px; }
    .category-card { flex: 0 0 158px; }
    .category-image { width: 100px; height: 100px; }
    .featured-product-card { padding: 16px 12px; }
    .why-choose-title { font-size: 22px; }
    .why-choose-grid { grid-template-columns: repeat(2, 1fr); }
    .why-choose-card:nth-child(5) { grid-column: 1 / -1; }
    /* Very small screens: factory cards become one readable column */
    .why-factory[data-snap-section] .factory-cards { grid-template-columns: 1fr; }
    .why-factory[data-snap-section] .factory-card-image { height: 180px; }
    /* 特性卡小屏垂直居中 2×2 —— 更紧凑 */
    .product-categories,
    .product-categories[data-snap-section] { padding: 32px 0; }
    .categories-header { margin-bottom: 22px; }
    .products,
    .products[data-snap-section] { padding: 28px 0; }
    .products-header { margin-bottom: 22px; }
    .category-features { gap: 8px; }
    .products[data-snap-section] .products-features { gap: 8px; }
    .category-feature,
    .products-feature {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 6px;
        padding: 10px 8px;
        border-radius: 12px;
    }
    .cf-icon,
    .pf-icon { width: 36px; height: 36px; }
    .cf-icon svg,
    .pf-icon svg { width: 18px; height: 18px; }
    .category-feature .cf-text strong,
    .products-feature .pf-text strong { font-size: 12px; }
    .category-feature .cf-text span,
    .products-feature .pf-text span { font-size: 10px; }
}

/* ============================================================
   REDUCED MOTION — accessibility (impeccable requirement)
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    .loader { display: none; }
}

/* ============================================================
   INTEGRATED SUPPLY-CHAIN GLOBE — labels + scale override
   (added when swapping the old sci-fi globe for the dot-matrix one)
   ============================================================ */

/* Globe canvas is centered via this transform only. Its on-screen SIZE is
   driven by the camera distance in js/globe.js (responsive per viewport
   width) — a CSS scale() would desync the HTML country/hub labels that
   project 1:1 from the 3D scene, so it is intentionally NOT used here. */
.globe-stage canvas {
    transform: translate(-50%, -50%) !important;
}

/* Globe HTML labels — sit ABOVE the globe layer (z-index:1) but BELOW page
   content (z-index:2+) so they never float over the nav or hero text. */
.hub-label {
    position: fixed; left: 0; top: 0;
    z-index: 1;
    pointer-events: none;
    font-size: 13px; color: #e84954; font-weight: 600;
    letter-spacing: 0.04em; white-space: nowrap;
    text-shadow: 0 0 14px rgba(255,255,255,.92), 0 0 28px rgba(255,255,255,.7);
    will-change: transform; opacity: 0; transition: opacity .25s ease;
}
.hub-label::after {
    content: ''; position: absolute; left: 50%; top: 100%;
    width: 1px; height: 13px; transform: translateX(-50%);
    background: linear-gradient(#e84954, rgba(232,73,84,0));
}
.country-label {
    position: fixed; left: 0; top: 0; z-index: 1;
    pointer-events: none;
    font-size: 11px; color: #6b788a; font-weight: 500;
    letter-spacing: 0.03em; white-space: nowrap;
    text-shadow: 0 0 10px rgba(255,255,255,.92), 0 0 20px rgba(255,255,255,.7);
    opacity: 0; transition: opacity .2s ease;
}

/* ============================================================
   GLOBAL SEARCH OVERLAY — injected by js/nav-search.js on every
   page. Click the nav search icon to open; type for live fuzzy
   suggestions; Enter / "See all" goes to search.html?q=...
   ============================================================ */
.nav-search-overlay {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: none;
    justify-content: center;
    align-items: flex-start;
    padding: 90px 20px 40px;
    background: oklch(20% 0.02 60 / 0.42);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    opacity: 0;
    transition: opacity .22s ease;
}
.nav-search-overlay.open { display: flex; opacity: 1; }

.nsx-panel {
    width: 100%;
    max-width: 640px;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 24px 70px oklch(20% 0.03 60 / 0.28);
    overflow: hidden;
    transform: translateY(-14px) scale(0.98);
    transition: transform .28s var(--ease-out-quart);
}
.nav-search-overlay.open .nsx-panel { transform: translateY(0) scale(1); }

.nsx-inputwrap {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 20px;
    border-bottom: 1px solid var(--border);
}
.nsx-inputwrap > svg {
    width: 22px; height: 22px;
    color: var(--primary);
    flex: 0 0 auto;
}
.nsx-input {
    flex: 1 1 auto;
    border: none;
    outline: none;
    font-size: 17px;
    font-family: inherit;
    color: var(--text);
    background: transparent;
}
.nsx-input::placeholder { color: oklch(65% 0.02 60); }
.nsx-close {
    flex: 0 0 auto;
    width: 30px; height: 30px;
    display: inline-flex; align-items: center; justify-content: center;
    border: none; background: oklch(96% 0.01 60);
    border-radius: 8px; cursor: pointer; color: var(--text-light);
    font-size: 12px; font-weight: 600;
    transition: background .2s, color .2s;
}
.nsx-close:hover { background: var(--primary); color: #fff; }

.nsx-results {
    max-height: 52vh;
    overflow-y: auto;
    padding: 8px;
}
.nsx-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 12px;
    border-radius: 12px;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    transition: background .16s;
}
.nsx-item:hover, .nsx-item.active { background: oklch(96% 0.02 20); }
.nsx-thumb {
    width: 52px; height: 52px;
    flex: 0 0 auto;
    border-radius: 10px;
    background: oklch(97% 0.01 70);
    object-fit: cover;
}
.nsx-meta { flex: 1 1 auto; min-width: 0; }
.nsx-name {
    font-size: 15px; font-weight: 600; color: var(--text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    margin: 0 0 2px;
}
.nsx-name mark { background: oklch(90% 0.09 85); color: inherit; padding: 0 1px; border-radius: 3px; }
.nsx-sub { font-size: 12.5px; color: var(--text-light); }
.nsx-price { flex: 0 0 auto; font-size: 14px; font-weight: 700; color: var(--primary); }

.nsx-empty {
    padding: 34px 20px;
    text-align: center;
    color: var(--text-light);
}
.nsx-empty strong { display: block; color: var(--text); font-size: 15px; margin-bottom: 4px; }

.nsx-foot {
    padding: 12px 16px;
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    color: var(--text-light);
}
.nsx-seeall {
    display: inline-flex; align-items: center; gap: 6px;
    border: none; background: var(--primary); color: #fff;
    padding: 9px 16px; border-radius: 100px;
    font-size: 13px; font-weight: 600; cursor: pointer;
    transition: filter .2s, transform .2s;
}
.nsx-seeall:hover { filter: brightness(1.06); transform: translateY(-1px); }
.nsx-seeall svg { width: 15px; height: 15px; }
.nsx-hint kbd {
    font-family: inherit; font-size: 11px;
    background: oklch(96% 0.01 60); border: 1px solid var(--border);
    border-radius: 5px; padding: 1px 6px; color: var(--text);
}

@media (max-width: 768px) {
    .nav-search-btn { display: inline-flex; }
    .nav-search-overlay { padding-top: 74px; }
}

/* ==================== Cookie / 本地存储 提示条 ==================== */
.cookie-notice {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 9999;
    background: #ffffff;
    border-top: 1px solid #eef2f7;
    box-shadow: 0 -10px 30px rgba(15, 23, 42, 0.12);
    transform: translateY(110%);
    transition: transform .42s cubic-bezier(.22,.61,.36,1);
    will-change: transform;
}
.cookie-notice.is-visible { transform: translateY(0); }
.cookie-notice.is-hidden  { transform: translateY(110%); }

.cookie-notice-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 16px 24px;
    display: flex;
    align-items: center;
    gap: 16px;
}
.cookie-notice-icon {
    flex: 0 0 auto;
    width: 34px; height: 34px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: #fff1f2;
    color: var(--primary, #e84954);
}
.cookie-notice-icon svg { width: 20px; height: 20px; }
.cookie-notice-text {
    flex: 1 1 auto;
    margin: 0;
    font-size: 13.5px;
    line-height: 1.55;
    color: #475569;
}
.cookie-notice-link {
    color: var(--primary, #e84954);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
    white-space: nowrap;
}
.cookie-notice-link:hover { opacity: .82; }
.cookie-notice-actions { flex: 0 0 auto; }
.cookie-notice-btn {
    border: none;
    cursor: pointer;
    padding: 10px 22px;
    border-radius: 999px;
    background: var(--primary, #e84954);
    color: #fff;
    font-size: 13.5px;
    font-weight: 600;
    white-space: nowrap;
    transition: filter .2s, transform .2s;
}
.cookie-notice-btn:hover { filter: brightness(1.06); transform: translateY(-1px); }

@media (max-width: 640px) {
    .cookie-notice-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        padding: 16px 18px;
    }
    .cookie-notice-text { font-size: 13px; }
    .cookie-notice-actions { width: 100%; }
    .cookie-notice-btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .cookie-notice { transition: none; }
}

/* ======================================================
   FEATURED PRODUCT — product image clickable hint
   ====================================================== */
.fp-main-img {
    cursor: pointer;
    transition: filter 0.3s ease, box-shadow 0.3s ease;
}
.fp-main-img:hover {
    filter: brightness(0.97) saturate(1.05);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12);
}
.fp-main-img:active { filter: brightness(0.94); }

/* ======================================================
   REQUEST QUOTE MODAL — B2B 询盘留资窗口
   BEM-ish: .qmodal (root) → .qmodal-overlay / .qmodal-box / .qmodal-*  (elements)
   ====================================================== */
html.qmodal-open, body.qmodal-open { overflow: hidden; }

.qmodal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    opacity: 0;
    transition: opacity 0.22s ease;
}
.qmodal[hidden] { display: none; }
.qmodal.is-open { opacity: 1; }

.qmodal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    cursor: pointer;
}

.qmodal-box {
    position: relative;
    width: 100%;
    max-width: 920px;
    max-height: calc(100vh - 48px);
    overflow: hidden;
    background: #ffffff;
    border-radius: 20px;
    box-shadow: 0 30px 80px rgba(15, 23, 42, 0.35);
    transform: scale(0.94) translateY(8px);
    transition: transform 0.28s cubic-bezier(0.34, 1.4, 0.64, 1);
    display: flex;
    flex-direction: column;
}
.qmodal.is-open .qmodal-box { transform: scale(1) translateY(0); }
.qmodal-box::-webkit-scrollbar { width: 6px; }
.qmodal-box::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 3px; }

.qmodal-close {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 10;
    width: 36px;
    height: 36px;
    border: none;
    background: rgba(255,255,255,0.9);
    border-radius: 50%;
    color: #6b7280;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, color 0.2s;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.qmodal-close:hover { background: #fff; color: #111827; }
.qmodal-close svg { width: 18px; height: 18px; }

/* Two-column layout: left = product hero card, right = form */
.qmodal-layout {
    display: grid;
    grid-template-columns: 320px 1fr;
    grid-template-rows: minmax(0, 1fr);
    width: 100%;
    flex: 1;
    min-height: 0;
}

/* Left column — clean white product hero card */
.qmodal-aside {
    position: relative;
    background: #f8f9fb;
    padding: 36px 32px 32px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 22px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #e5e7eb transparent;
}
.qmodal-aside::-webkit-scrollbar { width: 6px; }
.qmodal-aside::-webkit-scrollbar-thumb { background: #e5e7eb; border-radius: 3px; }

.qmodal-aside-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    align-self: flex-start;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.12em;
    color: #ffffff;
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    padding: 6px 12px;
    border-radius: 100px;
    box-shadow: 0 4px 10px rgba(220, 38, 38, 0.25);
}
.qmodal-aside-badge svg { width: 11px; height: 11px; }
.qmodal-label-pre,
.qmodal-label-about { display: inline; }

.qmodal-aside-imgwrap {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 16px;
    background: #ffffff;
    border: 1px solid #f1f3f5;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);
    padding: 12px;
    box-sizing: border-box;
}
.qmodal-aside-img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 8px;
    object-fit: contain;
    background: #ffffff;
}
.qmodal-aside-img.is-placeholder {
    padding: 26%;
    background: #f3f4f6;
    opacity: 0.65;
}

.qmodal-aside-info {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.qmodal-aside-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #e11d48;
}
.qmodal-aside-name {
    font-size: 18px;
    color: #111827;
    font-weight: 700;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-wrap: break-word;
    overflow-wrap: break-word;
}
.qmodal-aside-sku {
    font-size: 12px;
    color: #9ca3af;
    font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
    letter-spacing: 0.02em;
}
.qmodal-aside-price-row {
    display: flex;
    align-items: baseline;
    gap: 4px;
    margin-top: 2px;
}
.qmodal-aside-price {
    font-size: 26px;
    color: #e11d48;
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 1;
}
.qmodal-aside-price-unit {
    font-size: 13px;
    color: #9ca3af;
    font-weight: 500;
}

.qmodal-aside-divider {
    height: 1px;
    background: #e5e7eb;
    margin: 4px 0;
}

.qmodal-aside-features {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.qmodal-feature {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 13px;
    font-weight: 500;
    color: #374151;
}
.qmodal-feature svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    color: #e11d48;
}
.qmodal-feature span { line-height: 1.3; }

.qmodal-aside-name-line { display: none; }

.qmodal-head-mobile { display: none; }

.qmodal-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}
.qmodal-input-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #9ca3af;
    pointer-events: none;
    display: none;
    align-items: center;
    justify-content: center;
}
.qmodal-input-icon svg { width: 18px; height: 18px; }

/* Right column — form scrollable area */
.qmodal-main {
    padding: 36px 40px 32px;
    overflow-y: auto;
    min-height: 0;
    scrollbar-width: thin;
    scrollbar-color: #d1d5db transparent;
}
.qmodal-main::-webkit-scrollbar { width: 6px; }
.qmodal-main::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 3px; }

.qmodal-head { margin-bottom: 22px; }
.qmodal-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: #e11d48;
    margin-bottom: 12px;
}
.qmodal-eyebrow svg { width: 16px; height: 16px; }
.qmodal-title {
    font-size: 26px;
    line-height: 1.25;
    font-weight: 800;
    color: #111827;
    margin: 0 0 8px;
    letter-spacing: -0.02em;
}
.qmodal-sub {
    font-size: 14px;
    color: #6b7280;
    margin: 0;
    line-height: 1.5;
}

/* Form fields */
.qmodal-form { display: flex; flex-direction: column; gap: 18px; }
.qmodal-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.qmodal-field { display: flex; flex-direction: column; gap: 7px; }
.qmodal-field label {
    font-size: 13px;
    font-weight: 600;
    color: #374151;
}
.qmodal-field abbr { color: #e84954; text-decoration: none; margin-left: 2px; }
.qmodal-field input,
.qmodal-field select,
.qmodal-field textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    font: inherit;
    font-size: 14px;
    color: #111827;
    background: #ffffff;
    transition: border-color 0.18s, box-shadow 0.18s;
    box-sizing: border-box;
}
.qmodal-field input:hover,
.qmodal-field select:hover,
.qmodal-field textarea:hover { border-color: #d1d5db; }
.qmodal-field textarea { resize: vertical; min-height: 240px; display: block; }
.qmodal-textarea-wrap { position: relative; width: 100%; flex: 1 1 100%; }
.qmodal-textarea-counter {
    position: absolute;
    bottom: 10px;
    right: 14px;
    font-size: 11px;
    color: #9ca3af;
    background: rgba(255, 255, 255, 0.85);
    padding: 2px 6px;
    border-radius: 6px;
    pointer-events: none;
}
.qmodal-field input:focus,
.qmodal-field select:focus,
.qmodal-field textarea:focus {
    outline: none;
    border-color: #e84954;
    box-shadow: 0 0 0 4px rgba(232, 73, 84, 0.10);
}
.qmodal-field input::placeholder,
.qmodal-field textarea::placeholder { color: #9ca3af; }

.qmodal-submit-row {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    margin-top: 6px;
}
.qmodal-submit {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 13px 26px;
    font-size: 15px;
    font-weight: 700;
    color: #ffffff;
    background: linear-gradient(135deg, #ef4444 0%, #e11d48 100%);
    border: none;
    border-radius: 10px;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(225, 29, 72, 0.30);
    transition: transform 0.15s, box-shadow 0.15s, filter 0.15s;
}
.qmodal-submit:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 22px rgba(225, 29, 72, 0.36);
    filter: brightness(1.05);
}
.qmodal-submit svg { width: 16px; height: 16px; }
.qmodal-privacy {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-size: 12px;
    color: #6b7280;
}
.qmodal-privacy svg { width: 13px; height: 13px; color: #9ca3af; }

/* OR divider */
.qmodal-success-divider {
    display: flex;
    align-items: center;
    gap: 14px;
    color: #9ca3af;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    margin: 4px 0 0;
}
.qmodal-success-divider::before,
.qmodal-success-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #e5e7eb;
}
.qmodal-success-divider span { padding: 0 4px; }

/* Success state inside the modal */
.qmodal-success {
    text-align: center;
    padding: 8px 0 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}
.qmodal-success-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, #10b981, #34d399);
    color: #fff;
    font-size: 24px;
    line-height: 44px;
    box-shadow: 0 6px 16px rgba(16, 185, 129, 0.30);
}
.qmodal-success h4 { margin: 0; font-size: 18px; color: #111827; font-weight: 700; }
.qmodal-success p { margin: 0; font-size: 13px; color: #4b5563; line-height: 1.5; max-width: 420px; }
.qmodal-success a { color: #2563eb; }
.qmodal-prefill {
    width: 100%;
    height: 90px;
    padding: 10px 12px;
    border: 1px dashed #d1d5db;
    border-radius: 10px;
    font: inherit;
    font-size: 12px;
    color: #374151;
    background: #f9fafb;
    resize: vertical;
    margin-top: 4px;
}
.qmodal-success-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 4px; }
.qmodal-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 600;
    color: #374151;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.qmodal-action-btn:hover { border-color: #d1d5db; background: #fafafa; }
.qmodal-action-btn svg { width: 14px; height: 14px; }
.qmodal-action-ghost { border-color: transparent; background: transparent; }
.qmodal-action-ghost:hover { background: #f3f4f6; border-color: transparent; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .qmodal, .qmodal-box, .fp-main-img { transition: none !important; }
    .qmodal-box { transform: none !important; }
}

/* Responsive */
@media (max-width: 820px) {
    /* Reset the desktop single-row constraint so aside and main stack vertically. */
    .qmodal-layout { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
    .qmodal-close {
        top: 14px;
        right: 14px;
        width: 28px;
        height: 28px;
        background: transparent;
        box-shadow: none;
        color: #6b7280;
    }
    .qmodal-close svg { width: 20px; height: 20px; }
    .qmodal-aside {
        position: relative;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: flex-start;
        gap: 12px 0;
        padding: 20px 22px 16px;
        overflow-y: visible;
        background: #ffffff;
    }
    /* subtle pink dotted decoration on the right */
    .qmodal-aside::before {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        width: 42%;
        height: 100%;
        background-image: radial-gradient(#fecdd3 1.5px, transparent 1.5px);
        background-size: 14px 14px;
        opacity: 0.35;
        pointer-events: none;
    }
    .qmodal-aside-badge {
        margin-bottom: 2px;
        align-self: flex-start;
        position: relative;
        z-index: 1;
    }
    .qmodal-aside-meta {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        gap: 16px;
        width: 100%;
        position: relative;
        z-index: 1;
    }
    .qmodal-aside-imgwrap {
        width: 90px;
        height: 90px;
        margin: 0;
        flex-shrink: 0;
        padding: 10px;
        background: #f3f4f6;
        border: none;
        box-shadow: inset 0 0 0 1px #e5e7eb;
        border-radius: 12px;
    }
    .qmodal-aside-imgwrap::before { display: none; }
    .qmodal-aside-img {
        width: 100%;
        height: 100%;
        background: transparent;
    }
    .qmodal-aside-img.is-placeholder { padding: 18%; background: transparent; opacity: 0.55; }
    .qmodal-aside-info {
        flex: 1;
        min-width: 0;
        align-items: flex-start;
        text-align: left;
        gap: 4px;
    }
    .qmodal-aside-label {
        display: block;
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 0.12em;
        color: #e11d48;
    }
    .qmodal-aside-name {
        font-size: 17px;
        font-weight: 700;
        color: #111827;
        line-height: 1.3;
        padding-bottom: 0;
        margin-bottom: 0;
    }
    .qmodal-aside-name-line {
        display: block;
        width: 28px;
        height: 2px;
        background: #111827;
        margin: 5px 0 2px;
    }
    .qmodal-aside-sku { font-size: 12px; color: #9ca3af; }
    .qmodal-aside-price-row,
    .qmodal-aside-divider { display: none; }
    .qmodal-aside-features {
        flex-basis: 100%;
        flex-direction: row;
        justify-content: flex-start;
        gap: 16px;
        margin-top: 2px;
        position: relative;
        z-index: 1;
    }
    .qmodal-feature {
        flex-direction: column;
        align-items: center;
        gap: 5px;
        font-size: 11px;
        flex: 0 0 auto;
        color: #4b5563;
    }
    .qmodal-feature svg {
        width: 28px;
        height: 28px;
        padding: 5px;
        box-sizing: border-box;
        background: #fef2f2;
        border-radius: 50%;
        color: #e11d48;
    }
    .qmodal-main { padding: 18px 22px 22px; }
}
@media (max-width: 640px) {
    .qmodal { padding: 0; align-items: flex-end; }
    .qmodal-box {
        max-width: 100%;
        max-height: 92vh;
        border-radius: 18px 18px 0 0;
    }
    .qmodal-head { margin-bottom: 18px; }
    .qmodal-head-desktop { display: none; }
    .qmodal-head-mobile { display: block; }
    .qmodal-mobile-title {
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 20px;
        font-weight: 700;
        color: #111827;
        line-height: 1.3;
    }
    .qmodal-mobile-title svg { width: 24px; height: 24px; color: #e11d48; flex-shrink: 0; }
    .qmodal-mobile-sub {
        font-size: 13px;
        color: #6b7280;
        margin: 6px 0 0;
        line-height: 1.45;
    }
    .qmodal-row { grid-template-columns: 1fr; }
    .qmodal-form { gap: 14px; }
    .qmodal-field label {
        font-size: 13px;
        font-weight: 700;
        color: #111827;
    }
    .qmodal-input-icon { display: flex; }
    /* 16px font-size avoids iOS Safari auto-zoom on focus */
    .qmodal-field input,
    .qmodal-field select,
    .qmodal-field textarea {
        padding: 12px 12px 12px 42px;
        font-size: 16px;
        border-color: #e5e7eb;
    }
    /* Textarea: taller so the full prefill is visible; no icon, so it spans the
       same full width as the other fields. */
    .qmodal-field textarea { min-height: 340px; padding: 12px; }
    .qmodal-textarea-counter { font-size: 11px; }
    .qmodal-submit {
        width: 100%;
        justify-content: center;
        padding: 15px;
        font-size: 16px;
        border-radius: 12px;
    }
    .qmodal-submit-row {
        flex-direction: column;
        gap: 12px;
        margin-top: 4px;
    }
    .qmodal-privacy {
        justify-content: center;
        font-size: 12px;
        color: #6b7280;
        flex: 0 0 auto;
    }
}
@media (max-width: 480px) {
    .qmodal-aside { padding: 18px 16px 14px; gap: 10px 0; }
    .qmodal-aside-imgwrap { width: 80px; height: 80px; padding: 8px; }
    .qmodal-aside-meta { gap: 12px; }
    .qmodal-aside-name { font-size: 15px; }
    .qmodal-aside-name-line { width: 24px; margin: 4px 0 2px; }
    .qmodal-aside-features { gap: 12px; }
    .qmodal-feature { font-size: 10px; }
    .qmodal-feature svg { width: 26px; height: 26px; padding: 5px; }
    .qmodal-main { padding: 16px 16px 18px; }
    .qmodal-mobile-title { font-size: 18px; }
    .qmodal-mobile-sub { font-size: 12px; }
    .qmodal-field input,
    .qmodal-field select { padding: 11px 11px 11px 40px; font-size: 15px; }
    .qmodal-field textarea { min-height: 300px; padding: 11px; font-size: 15px; }
    .qmodal-input-icon { left: 12px; }
    .qmodal-input-icon svg { width: 16px; height: 16px; }
    .qmodal-field:has(.qmodal-input-icon) input,
    .qmodal-field:has(.qmodal-input-icon) select { padding-left: 38px; }
}


/* ============================================================
   MEGA MENU — category browser injected by nav-mega.js
   Panel is position:fixed + z-index:9999 so it escapes the navbar's
   stacking context and always sits above hero/intro/scroll-snap
   sections (e.g. index.html globe intro). JS sets panel.style.top to
   navbar.offsetHeight on init/resize so it tracks the bar height
   (including the .scrolled shrunk state).
   ============================================================ */
.has-mega { }
/* Caret-specific tweaks only — flex layout itself is now on every .nav-link
   so text-only links and the caret link share the same baseline. */
.mega-trigger {
    cursor: pointer;
}
.mega-caret {
    display: inline-flex;
    transition: transform .3s var(--ease-out-quart);
}
.navbar.mega-active .mega-caret { transform: rotate(180deg); }

.mega-panel {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: #ffffff;
    border-top: 1px solid #eef1f5;
    box-shadow: 0 22px 44px -14px rgba(15,23,42,.20);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity .34s var(--ease-out-quart),
                transform .34s var(--ease-out-quart),
                visibility .34s;
    z-index: 9999;
}
.navbar.mega-active .mega-panel {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
/* ============================================================
   MEGA PANEL — 3-column drop-down. Visual design (per column):
     [icon-bg] Top name  [count-pill]
     [featured image]   (only on non-Toy columns)
     [icon] L2 name  216 >
     [icon] L2 name   18 >  <- active: pink bg, red icon, red count
     ...
     [icon-bg] View all X categories
   - Panel itself does not scroll; each .mega-col owns its own scroll.
   - <html>+<body> overflow is locked on desktop open so wheel on the panel
     cannot scroll the page behind (also stopPropagation on wheel/touchmove).
   ============================================================ */
.mega-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 22px 26px 22px;
    max-height: 78vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    scrollbar-gutter: stable;
}
.mega-cols {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    flex: 1 1 auto;
    min-height: 0;
}
.mega-col {
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* ---- Column header: tinted icon box + name + red count pill ---- */
.mega-col-head {
    margin-bottom: 12px;
    flex: none;
    position: sticky;
    top: 0;
    background: #ffffff;
    z-index: 1;
    padding-bottom: 4px;
}
.mega-head {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    padding: 0;
    border: none;
}
.mega-head-icon {
    flex: none;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: #fcebeb;
    color: #dd5559;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .18s var(--ease-out-quart), color .18s var(--ease-out-quart);
}
.mega-head:hover .mega-head-icon {
    background: #fee2e2;
    color: #dd5559;
}
.mega-head-name {
    flex: 1 1 auto;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 15.5px;
    color: var(--text);
    letter-spacing: -0.01em;
    line-height: 1.1;
    transition: color .18s var(--ease-out-quart);
}
.mega-head:hover .mega-head-name { color: #dd5559; }
.mega-head-count {
    flex: none;
    font-size: 12px;
    font-weight: 700;
    color: #dd5559;
    background: #fef2f2;
    padding: 3px 10px;
    border-radius: 999px;
    white-space: nowrap;
    line-height: 1.2;
}

/* ---- Featured image removed in s round (2026-07-26): design deemed it noisy ---- */

/* ---- L2 list: 2-column horizontal grid (u round). Each L2 occupies one
   cell; L3 children span both columns via grid-column: 1 / -1 so they
   expand to the full column width when revealed. ---- */
.mega-list {
    list-style: none;
    margin: 0;
    padding: 0 6px 0 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 2px;
    row-gap: 1px;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}
.mega-list::-webkit-scrollbar { width: 6px; }
.mega-list::-webkit-scrollbar-track { background: transparent; }
.mega-list::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 999px;
}
.mega-list::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

.mega-list li { display: block; }
.mega-list li a {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: #334155;
    font-size: 13px;
    font-weight: 500;
    padding: 7px 9px;
    border-radius: 8px;
    transition: background .18s var(--ease-out-quart), color .18s var(--ease-out-quart);
}
.mega-row-icon {
    flex: none;
    width: 18px;
    height: 18px;
    color: #dd5559;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color .18s var(--ease-out-quart);
}
.mega-link-name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.2;
}
.mega-row-meta {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.mega-row-chevron {
    color: #cbd5e1;
    flex: none;
    transition: color .18s var(--ease-out-quart), transform .18s var(--ease-out-quart);
}
.mega-list li a:hover {
    background: #fcebeb;
    color: #dd5559;
}
.mega-list li a:hover .mega-row-icon { color: #dd5559; }
.mega-list li a:hover .mega-row-chevron { color: #dd5559; transform: translateX(2px); }
.mega-list li a:hover .mega-link-count { color: #dd5559; }

/* L3 (level-3) leaves: span the full 2-column track so they expand to
   the column width when revealed. Kept the hover-expand behavior on
   desktop (grid 0fr->1fr height-grow) so a rich L2 like Sports &
   Outdoor Play still surfaces its 23 L3 kids on hover. */
.mega-list li.mega-l3 {
    grid-column: 1 / -1;
}
.mega-list li.mega-l3 a {
    padding: 5px 10px 5px 36px;
    font-size: 13.5px;
    font-weight: 400;
    color: #64748b;
}
.mega-list li.mega-l3 a:hover {
    background: #fcebeb;
    color: #dd5559;
}
.mega-list li.mega-l3 .mega-link-count {
    font-size: 11.5px;
    color: #94a3b8;
}
.mega-l3-list {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transition: grid-template-rows .36s var(--ease-out-quart),
                opacity .28s var(--ease-out-quart);
}
.mega-l3-list > .mega-l3-wrap {
    overflow: hidden;
    min-height: 0;
    list-style: none;
    margin: 0;
    padding: 0;
    transform: translateY(-6px);
    transition: transform .36s var(--ease-out-quart);
}
.mega-l2:hover > .mega-l3-list,
.mega-l2.open > .mega-l3-list {
    grid-template-rows: 1fr;
    opacity: 1;
}
.mega-l2:hover > .mega-l3-list > .mega-l3-wrap,
.mega-l2.open > .mega-l3-list > .mega-l3-wrap { transform: translateY(0); }

.mega-link-count {
    font-size: 12px;
    font-weight: 500;
    color: #94a3b8;
    white-space: nowrap;
    transition: color .18s var(--ease-out-quart);
}

/* ---- Footer "View all" removed in s round (2026-07-26): deemed useless ---- */

/* ---- Alibaba-style master-detail category browser (v round) ---- */
.mega-inner {
    max-width: 1380px;
    min-height: 540px;
    max-height: calc(100vh - 70px);
    padding: 0;
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    overflow: hidden;
    background: #fff;
}
.mega-l1-rail {
    min-width: 0;
    padding: 18px 12px 14px;
    background: #fff;
    border-right: 1px solid #eef1f5;
    display: flex;
    flex-direction: column;
    gap: 14px;
    overflow: hidden;
}
.mega-rail-tabs {
    min-width: 0;
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
    overflow-x: hidden;
    overflow-y: auto;
}
.mega-rail-label {
    padding: 0 12px 8px;
    color: #94a3b8;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
}
.mega-l1-tab {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    min-height: 56px;
    padding: 10px 12px;
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr) auto 12px;
    align-items: center;
    gap: 10px;
    color: #334155;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 10px;
    cursor: pointer;
    text-align: left;
    font: inherit;
    transition: color .18s var(--ease-out-quart),
                background .18s var(--ease-out-quart),
                border-color .18s var(--ease-out-quart),
                transform .18s var(--ease-out-quart);
}
.mega-l1-tab:hover,
.mega-l1-tab:focus-visible {
    color: #dd5559;
    background: #fff;
    border-color: #f9d6d8;
    outline: none;
    transform: translateX(1px);
}
.mega-l1-tab.is-active {
    color: #b53e42;
    background: #fcebeb;
    border-color: #f3c8cb;
    box-shadow: 0 6px 14px -10px rgba(221,85,89,.45);
}
.mega-l1-icon {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #dd5559;
    background: #fff;
    border: 1px solid #f3e7e3;
    border-radius: 8px;
}
.mega-l1-tab.is-active .mega-l1-icon {
    color: #fff;
    background: #dd5559;
    border-color: #dd5559;
}
.mega-l1-name {
    min-width: 0;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
}
.mega-l1-count {
    color: #94a3b8;
    font-size: 11.5px;
    font-weight: 700;
}
.mega-l1-tab.is-active .mega-l1-count { color: #c44247; }
.mega-l1-tab .mega-row-chevron { color: #b5bfcc; }
.mega-l1-tab.is-active .mega-row-chevron { color: #dd5559; transform: translateX(2px); }

/* CTA card pinned to the bottom of the left rail */
.mega-cta-card {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    padding: 16px 14px 0;
    background: transparent;
    border: none;
    border-radius: 14px;
    text-decoration: none;
    color: #1e293b;
    margin: auto 4px 14px;
    overflow: hidden;
    transition: transform .2s var(--ease-out-quart);
}
.mega-cta-card:hover {
    transform: translateY(-2px);
}
.mega-cta-text h3 {
    margin: 0 0 4px;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 14.5px;
    font-weight: 700;
    line-height: 1.2;
    color: #1e293b;
}
.mega-cta-text p {
    margin: 0 0 10px;
    font-size: 11.5px;
    line-height: 1.45;
    color: #5b6471;
}
.mega-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: #dd5559;
    color: #fff;
    font-size: 11.5px;
    font-weight: 700;
    border-radius: 999px;
}
.mega-cta-card img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    margin-top: 10px;
    align-self: stretch;
    border-radius: 0 0 12px 12px;
}

.mega-content {
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.mega-l1-pane {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
    padding: 26px 32px 30px;
}
.mega-l1-pane[hidden] { display: none !important; }
.mega-l1-pane.is-active { animation: megaPaneIn .28s var(--ease-out-quart) both; }
@keyframes megaPaneIn {
    from { opacity: 0; transform: translateX(8px); }
    to { opacity: 1; transform: translateX(0); }
}
.mega-pane-head {
    flex: 0 0 auto;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 32px;
    padding-bottom: 22px;
    margin-bottom: 0;
    border-bottom: 1px solid #eef1f5;
}
.mega-pane-text { flex: 1 1 auto; min-width: 0; }
.mega-pane-kicker {
    display: block;
    margin-bottom: 6px;
    color: #dd5559;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
}
.mega-pane-head h2 {
    margin: 0 0 6px;
    color: #1e293b;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 26px;
    line-height: 1.1;
    letter-spacing: -.025em;
    font-weight: 700;
}
.mega-pane-accent { color: #dd5559; }
.mega-pane-sub {
    margin: 0 0 12px;
    color: #5b6471;
    font-size: 13px;
    line-height: 1.5;
}
.mega-pane-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.mega-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: #f4f6fb;
    color: #475569;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
}
.mega-chip-dot {
    width: 6px; height: 6px; border-radius: 50%;
    display: inline-block;
}
.mega-pane-side {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 14px;
    min-width: 380px;
}
.mega-search {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: 360px;
    padding: 10px 14px;
    background: #f5f7fa;
    border: 1px solid #e6eaf0;
    border-radius: 10px;
    color: #94a3b8;
}
.mega-search input {
    flex: 1 1 auto;
    border: 0;
    background: transparent;
    font: inherit;
    color: #1e293b;
    outline: none;
    min-width: 0;
}
.mega-search input::placeholder { color: #94a3b8; }
.mega-search kbd {
    font-family: inherit;
    font-size: 10.5px;
    color: #64748b;
    background: #fff;
    border: 1px solid #dfe4ec;
    padding: 2px 6px;
    border-radius: 6px;
}
.mega-pane-hero {
    width: 260px;
    height: 173px;
    border-radius: 14px;
    overflow: hidden;
    background: #fff;
}
.mega-pane-hero img { width: 100%; height: 100%; object-fit: cover; display: block; }

.mega-l2-cols {
    flex: 1 1 auto;
    min-height: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 26px 32px;
    align-items: start;
    margin-top: 20px;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 4px;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}
.mega-l2-cols::-webkit-scrollbar { width: 6px; }
.mega-l2-cols::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 999px; }
.mega-l2-cols::-webkit-scrollbar-track { background: transparent; }
.mega-l2-col { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mega-l2-row {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) auto 12px;
    align-items: center;
    gap: 10px;
    padding: 8px 8px;
    border-radius: 8px;
    text-decoration: none;
    color: #1e293b;
    transition: background .16s var(--ease-out-quart), color .16s var(--ease-out-quart);
}
.mega-l2-row:hover { background: #fcebeb; color: #b53e42; }
.mega-l2-row:hover .mega-row-chevron { color: #dd5559; transform: translateX(2px); }
.mega-l2-row:hover .mega-link-count { color: #dd5559; }
.mega-l2-emoji {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    line-height: 1;
}
.mega-l2-row .mega-link-name {
    flex: 1 1 auto;
    font-size: 13.5px;
    font-weight: 600;
}
.mega-l2-row .mega-link-count {
    color: #94a3b8;
    font-size: 11.5px;
    font-weight: 600;
    flex: none;
}
.mega-l2-row .mega-row-chevron { color: #cbd5e1; }

.mega-l3-grid {
    list-style: none;
    margin: 0 0 4px 46px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.mega-l3-grid a {
    min-height: 26px;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    color: #64748b;
    text-decoration: none;
    border-radius: 6px;
    font-size: 12px;
    line-height: 1.25;
    transition: color .14s var(--ease-out-quart), background .14s var(--ease-out-quart);
}
.mega-l3-grid a:hover { color: #dd5559; background: #fcebeb; }
.mega-l3-icon {
    flex: none;
    width: 16px;
    height: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    line-height: 1;
    opacity: .9;
}
.mega-l3-name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mega-l3-grid .mega-link-count { flex: none; font-size: 10.5px; color: #94a3b8; }
.mega-l3-more a { color: #94a3b8; font-weight: 600; }
.mega-l3-more a:hover { color: #dd5559; background: #fcebeb; }
.mega-l3-more .mega-row-chevron { margin-left: auto; }

.mega-l2-more {
    margin-top: 8px;
    padding: 6px 8px;
    color: #94a3b8;
    font-size: 11.5px;
    font-weight: 700;
    text-decoration: none;
    border-top: 1px dashed #e6eaf0;
    display: flex;
    align-items: center;
    gap: 4px;
}
.mega-l2-more:hover { color: #dd5559; }
.mega-l2-more .mega-row-chevron { margin-left: 4px; }

/* Mobile / tablet: the nav-menu becomes a full-height drawer at <=1024px and
   Categories is rendered there as a lightweight accordion (.nav-acc, built by
   nav-mega.js). The desktop mega panel is therefore fully suppressed below
   1025px — having both open at once was the old "two overlapping menus" bug. */
@media (max-width: 1024px) {
    .mega-panel,
    .navbar.mega-active .mega-panel {
        display: none !important;
    }
    .mega-inner {
        min-height: 0;
        max-height: none;
        padding: 6px 0 14px;
        display: block;
        overflow: visible;
    }
    .mega-l1-rail {
        display: flex;
        gap: 6px;
        padding: 8px 18px 10px;
        overflow-x: auto;
        border-right: 0;
        border-bottom: 1px solid #e8edf3;
        flex-direction: column;
    }
    .mega-rail-tabs {
        flex-direction: row;
        overflow-x: auto;
        flex: 0 0 auto;
    }
    .mega-rail-label { display: none; }
    .mega-l1-tab {
        flex: 0 0 auto;
        width: auto;
        min-height: 38px;
        grid-template-columns: 24px auto auto;
        padding: 6px 9px;
    }
    .mega-l1-tab + .mega-l1-tab { margin-top: 0; }
    .mega-l1-icon { width: 24px; height: 24px; }
    .mega-l1-tab .mega-row-chevron { display: none; }
    .mega-cta-card { display: none; }
    .mega-content { overflow: visible; display: block; }
    .mega-l1-pane { display: block; height: auto; min-height: 0; padding: 18px 20px 22px; }
    .mega-pane-head { align-items: flex-start; margin-bottom: 16px; padding-bottom: 14px; flex-direction: column; }
    .mega-pane-head h2 { font-size: 20px; }
    .mega-pane-side { display: none; }
    .mega-l2-cols { grid-template-columns: 1fr; gap: 22px; flex: none; min-height: 0; overflow: visible; margin-top: 16px; padding-right: 0; }
    .mega-l3-grid { margin-left: 42px; display: grid; grid-template-columns: 1fr 1fr; gap: 1px 8px; }
}

/* ============================================================
   SKELETON SCREENS (generic shimmer system)
   Shown in data containers BEFORE the real WooCommerce / WP REST
   payload arrives. Each section below embeds default skeleton markup
   in its HTML; the data-rendering JS overwrites innerHTML, so the
   skeleton is wiped automatically once content lands.
   ============================================================ */
.skel {
  position: relative;
  overflow: hidden;
  background: #e9ebf0;
  border-radius: 8px;
}
.skel::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.7), transparent);
  animation: skel-shimmer 1.3s ease-in-out infinite;
}
@keyframes skel-shimmer { 100% { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) {
  .skel::after { animation: none; }
}

/* ---------- Products grid skeleton (复用 .pd-card 布局：列数/尺寸与真实卡片完全一致) ---------- */
.pd-card.pd-skel { animation: none; pointer-events: none; }
.pd-card.pd-skel:hover { transform: none; box-shadow: 0 4px 16px rgba(20, 22, 40, 0.04); border-color: #f1f5f9; }
.pd-card.pd-skel .pd-img { padding: 16px 16px 0; }
.pd-card.pd-skel .pd-skel-img { width: 100%; height: 100%; min-height: 138px; border-radius: 8px; }
.pd-skel-line { height: 13px; margin: 9px 0; border-radius: 6px; }
.pd-skel-name { width: 82%; height: 16px; }
.pd-skel-sku  { width: 45%; height: 11px; }
.pd-skel-price { width: 42%; height: 20px; margin-top: 4px; }
.pd-skel-btn { width: 100%; height: 38px; margin-top: 10px; border-radius: 8px; }

/* ---------- Blog latest grid skeleton (复用 .blog-latest-card 布局) ---------- */
.blog-latest-card.blog-skel { animation: none; pointer-events: none; }
.blog-latest-card.blog-skel:hover { transform: none; box-shadow: 0 2px 0 rgba(198, 95, 60, 0.04), 0 8px 22px -16px rgba(115, 50, 30, 0.16); border-color: rgba(198, 95, 60, 0.12); }
.blog-skel-img { width: 100%; height: 100%; }
.blog-skel-cat { width: 40%; height: 10px; border-radius: 4px; }
.blog-skel-title { width: 88%; height: 16px; border-radius: 5px; }
.blog-skel-line { width: 55%; height: 12px; border-radius: 6px; }

/* ---------- Blog featured skeleton ---------- */
.blog-feat-skel {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 30px;
  align-items: center;
  border: 1px solid #ececf1;
  border-radius: 18px;
  padding: 20px;
  background: #fff;
}
.blog-feat-skel .skel-img { aspect-ratio: 16 / 10; border-radius: 14px; }
.blog-feat-skel .skel-line { height: 14px; margin: 11px 0; border-radius: 6px; }
.blog-feat-skel .skel-line.short { width: 38%; }
.blog-feat-skel .skel-line.tag { width: 120px; height: 22px; border-radius: 100px; }
.blog-feat-skel .skel-line.title { height: 26px; width: 80%; }

/* ---------- Blog stats skeleton ---------- */
.blog-stats-skel {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.blog-stats-skel .skel-stat { height: 62px; border-radius: 12px; }

/* ---------- Blog sidebar categories skeleton ---------- */
.blog-cats-skel li.skel {
  height: 30px;
  margin: 6px 0;
  border-radius: 8px;
  list-style: none;
}

/* ---------- Blog results count skeleton ---------- */
.blog-count-skel {
  display: inline-block;
  width: 220px;
  height: 16px;
  border-radius: 6px;
}

/* ---------- Product detail overlays / skeletons ---------- */
.pdp-main-img-wrap { position: relative; }
.pdp-main-skel {
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: 14px;
  display: block;
}
.pdp-gallery-thumbs-skel {
  display: flex;
  gap: 10px;
  margin-top: 12px;
}
.pdp-gallery-thumbs-skel .skel {
  width: 66px;
  height: 66px;
  border-radius: 11px;
  flex: 0 0 auto;
}
.pdp-info { position: relative; }
.pdp-info-skel {
  position: absolute;
  inset: 0;
  z-index: 6;
  background: #fff;
  border-radius: 14px;
  padding: 6px 4px;
  display: block;
}
.pdp-info-skel .skel-line { height: 16px; margin: 11px 0; border-radius: 6px; }
.pdp-info-skel .skel-line.tag { width: 34%; height: 20px; border-radius: 100px; }
.pdp-info-skel .skel-line.title { width: 72%; height: 28px; }
.pdp-info-skel .skel-line.price { width: 46%; height: 30px; }
.pdp-info-skel .skel-line.w40 { width: 40%; }
.pdp-info-skel .skel-line.w55 { width: 55%; }
.pdp-info-skel .skel-line.w70 { width: 70%; }
/* main image keeps its skeleton until the real image finishes downloading */
.pdp-main-img-wrap:not(.pdp-img-loaded) .pdp-main-skel { display: block; }
.pdp-main-img-wrap.pdp-img-loaded .pdp-main-skel { display: none; }
/* info-column skeleton overlay vanishes once renderPage populates content */
.pdp-grid.pdp-loaded .pdp-info-skel { display: none; }

/* detail: short specs / description / related default skeletons */
.pdp-short-skel { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.pdp-short-skel .skel { height: 46px; border-radius: 10px; }
.pdp-desc-skel .skel-line { height: 13px; margin: 10px 0; border-radius: 6px; max-width: 100%; }
.pdp-desc-skel .skel-line.w90 { width: 90%; }
.pdp-desc-skel .skel-line.w70 { width: 70%; }
.pdp-desc-skel .skel-line.w50 { width: 50%; }
/* ---------- Product detail related grid skeleton (复用 .pdp-rel-card 布局) ---------- */
.pdp-rel-card.pdp-skel { animation: none; pointer-events: none; }
.pdp-rel-card.pdp-skel:hover { transform: none; box-shadow: none; border-color: #eef2f6; }
.pdp-rel-card.pdp-skel .pdp-rel-img { padding: 22px; }
.pdp-rel-card.pdp-skel .pdp-skel-img { width: 100%; height: 100%; min-height: 136px; border-radius: 8px; }
.pdp-skel-cat { width: 40%; height: 11px; border-radius: 4px; }
.pdp-skel-title { width: 85%; height: 15px; border-radius: 5px; margin: 6px 0 10px; }
.pdp-skel-line { width: 55%; height: 13px; border-radius: 6px; }

/* ============================================================
   HERO-FLAT — 移植自 dev-globe.html 的定稿首屏（cj 轮）
   作用域锁定 .hero-flat，避免污染全站通用类（.btn / .hero-content / .eyebrow 等）
   ============================================================ */
.hero-flat {
    max-width: 1640px;
    margin: 0 auto;
    padding: 96px 40px 64px;   /* 顶部预留固定导航高度 */
    position: relative;
    background: #fff;
}
.hero-flat .eyebrow {
    display: inline-flex; align-items: center; gap: 10px;
    color: #dd5559; font-size: 14px; font-weight: 700;
    letter-spacing: .14em; text-transform: uppercase; margin-bottom: 26px;
}
.hero-flat .eyebrow .dashes { display: inline-block; width: 40px; height: 0; border-top: 2px dashed #dd5559; }
.hero-flat .hero-grid { position: relative; min-height: 774px; }
.hero-flat .hero-content { position: relative; z-index: 2; max-width: 600px; padding-top: 36px; }
.hero-flat .hero-content h1 {
    font-size: 64px; line-height: 1.02; font-weight: 800;
    letter-spacing: -.028em; color: #0a1a33; margin-bottom: 26px;
}
.hero-flat .hero-content h1 .accent { color: #dd5559; }
.hero-flat .hero-content p { font-size: 18px; line-height: 1.6; color: #4f5b71; max-width: 560px; margin-bottom: 36px; }
.hero-flat .hero-slogan {
    font-family: 'Space Grotesk', 'Outfit', sans-serif;
    font-size: 22px; font-weight: 700; letter-spacing: .2px;
    color: #0a1a33; margin: 16px 0 18px;
}
.hero-flat .hero-slogan .hl { color: #dd5559; }
.hero-flat .hero-slogan .dot { color: #dd5559; font-weight: 800; }
.hero-flat .features { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; max-width: 600px; margin-bottom: 40px; }
.hero-flat .feat { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.hero-flat .feat-ic {
    width: 48px; height: 48px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: rgba(221, 85, 89, .08); color: #dd5559; flex-shrink: 0;
}
.hero-flat .feat-ic svg { width: 22px; height: 22px; }
.hero-flat .feat h4 { font-size: 15px; font-weight: 700; color: #0a1a33; line-height: 1.2; white-space: nowrap; }
.hero-flat .feat p { font-size: 13.5px; font-weight: 500; color: #7d8699; line-height: 1.4; margin: 0; }
.hero-flat .hero-cta { display: flex; gap: 12px; flex-wrap: wrap; }
.hero-flat .btn {
    display: inline-flex; align-items: center; gap: 9px;
    padding: 16px 30px; border-radius: 999px;
    font-family: inherit; font-size: 17px; font-weight: 600;
    text-decoration: none; cursor: pointer; transition: all .2s ease; border: 0;
}
.hero-flat .btn-primary { background: #dd5559; color: #fff; box-shadow: 0 12px 28px -10px rgba(221,85,89,.55); }
.hero-flat .btn-primary:hover { background: #c4474b; transform: translateY(-1px); }
.hero-flat .btn-secondary { background: #fff; color: #0a1a33; border: 1.5px solid rgba(10,26,51,.12); }
.hero-flat .btn-secondary:hover { background: #f6f8fc; transform: translateY(-1px); }
.hero-flat .btn-secondary .pin-ic {
    width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center;
    background: rgba(221,85,89,.12); color: #dd5559; border-radius: 50%;
}
.hero-flat .btn svg { width: 14px; height: 14px; }
.hero-flat .map-stage { position: absolute; top: 0; right: 0; width: 80%; height: 774px; z-index: 1; }
.hero-flat #flatContinents { display: block; width: 100%; height: 100%; background: transparent; }
.hero-flat .map-caption { display: none; }
.hero-flat .stats-strip {
    position: relative; z-index: 3; margin-top: -100px; background: #fff;
    border-radius: 20px; padding: 26px 32px;
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
}
.hero-flat .stat { display: flex; align-items: center; gap: 16px; padding: 4px 8px; position: relative; }
.hero-flat .stat + .stat::before {
    content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
    width: 1px; height: 48px; background: rgba(10,26,51,.08);
}
.hero-flat .stat-ic {
    width: 56px; height: 56px; border-radius: 50%; background: rgba(221,85,89,.08);
    color: #dd5559; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.hero-flat .stat-ic svg { width: 26px; height: 26px; }
.hero-flat .stat-text { display: flex; flex-direction: column; gap: 4px; }
.hero-flat .stat-text strong { font-size: 32px; font-weight: 800; color: #0a1a33; letter-spacing: -.02em; line-height: 1.05; }
.hero-flat .stat-text span { font-size: 14px; font-weight: 500; color: #6b7385; line-height: 1.2; }
/* 响应式（移植自 dev-globe.html，作用域 .hero-flat） */
@media (max-width: 1024px) {
    .hero-flat .hero-content { max-width: 100%; }
    .hero-flat .map-stage { position: static; width: 100%; height: 520px; margin-top: 36px; }
    .hero-flat .hero-content h1 { font-size: 54px; }
    .hero-flat .hero-content p { font-size: 17px; }
    .hero-flat .features { grid-template-columns: repeat(4, 1fr); max-width: 100%; }
}
@media (max-width: 720px) {
    .hero-flat { padding: 84px 20px 40px; }
    .hero-flat .hero-content h1 { font-size: 44px; }
    .hero-flat .hero-content p { font-size: 16px; }
    .hero-flat .feat { align-items: center; text-align: center; }
    .hero-flat .feat h4, .hero-flat .feat p { text-align: center; }
    .categories-scroll { width: 100%; min-width: 0; }
    .categories-scroll::before, .categories-scroll::after { display: none; }
    .category-card { flex: 0 0 calc((100% - 18px) / 2); }
    .cat-scroll-btn { width: 34px; height: 34px; }
    .cat-scroll-btn svg { width: 15px; height: 15px; }
    .hero-flat .features {
        grid-template-columns: repeat(2, minmax(130px, 160px));
        justify-content: center;
        gap: 22px 18px;
        margin: 0 auto 40px;
    }
    .hero-flat .hero-cta { justify-content: center; }
    .hero-flat .map-stage {
        height: 340px;
        border-radius: 16px;
        background: transparent;
        overflow: hidden;
    }
    .hero-flat .map-caption {
        display: block;
        text-align: center;
        margin-top: 10px;
        font-size: 13px;
        font-weight: 500;
        color: #6b7385;
        letter-spacing: .02em;
    }
    .hero-flat .map-caption::before {
        content: '';
        display: inline-block;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #dd5559;
        margin-right: 6px;
        box-shadow: 0 0 0 3px rgba(221, 85, 89, .15);
    }
    .hero-flat .stats-strip { grid-template-columns: repeat(2, 1fr); gap: 18px 0; padding: 22px 18px; margin-top: 18px; }
    .hero-flat .stat + .stat::before { display: none; }
}
@media (max-width: 480px) {
    .hero-flat .features {
        grid-template-columns: repeat(2, minmax(120px, 1fr));
        justify-content: center;
        gap: 22px 14px;
        margin: 0 auto 40px;
    }
    .hero-flat .feat-ic { width: 44px; height: 44px; }
    .hero-flat .feat-ic svg { width: 20px; height: 20px; }
    .hero-flat .feat h4 { font-size: 14px; }
    .hero-flat .feat p { font-size: 12.5px; }
    .hero-flat .stats-strip {
        grid-template-columns: repeat(2, 1fr);
        gap: 18px 12px;
        padding: 22px 14px;
    }
    .hero-flat .stat {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 8px;
        padding: 0;
    }
    .hero-flat .stat-ic { width: 48px; height: 48px; }
    .hero-flat .stat-ic svg { width: 22px; height: 22px; }
    .hero-flat .stat-text strong { font-size: 26px; }
    .hero-flat .stat-text span { font-size: 13px; }
}