/* ============================================================
   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: var(--bg);
    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.
   ============================================================ */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-color: #ffffff;
    /* Engineering blueprint grid: fine minor lines + stronger major lines (5×).
       A soft radial mask fades the grid toward the edges so it reads as a
       deliberate "drawing sheet" rather than a flat uniform checkerboard. */
    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,
.why-factory, .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 */
}

/* ============================================================
   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: oklch(97.5% 0.012 30);  /* warm pink matching the illustration edges */
    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/splash-bg.webp') 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: oklch(100% 0 0 / 0.92);
    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;
}

.nav-link {
    text-decoration: none;
    color: var(--text);
    font-weight: 500;
    font-size: 15px;
    position: relative;
    padding: 8px 0;
    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%; }

/* 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); }

/* ============================================================
GLOBE STAGE — Tech Style Background Globe
Centered, larger globe positioned BEHIND content.
Transparent background, subtle tech aesthetic.
z-index: 1  → behind all content
============================================================ */
.globe-stage {
position: fixed !important;
top: 0 !important;
left: 0 !important;
width: 100vw !important;
height: 100vh !important;
z-index: 1 !important;
pointer-events: none !important;
overflow: hidden !important;
}

.globe-stage canvas {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    pointer-events: auto !important;   /* enable mouse drag-to-rotate the globe */
    cursor: grab;
}
.globe-stage.dragging canvas { cursor: grabbing; }

/* ===== INTRO SPLASH — big globe + left/right copy; scroll shrinks globe to bg ===== */
.intro {
    position: relative;
    height: 100vh;
    z-index: 2;
    pointer-events: none;           /* drags pass through to the globe canvas */
    overflow: hidden;
}
.intro-left, .intro-right {
    position: absolute;
    top: 52%;
    transform: translateY(-50%);
    width: min(30vw, 340px);
    pointer-events: auto;           /* panels themselves are selectable */
    will-change: opacity, transform;
}
.intro-left  { left: 7vw;  text-align: left;  }
.intro-right { right: 7vw; text-align: right; }
.intro-eyebrow {
    display: inline-block;
    font-size: 12px; font-weight: 600; letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #e84954;
    margin-bottom: 14px;
}
.intro-title {
    font-family: 'Space Grotesk', 'Outfit', sans-serif;
    font-size: clamp(28px, 3.2vw, 46px);
    line-height: 1.08; font-weight: 700;
    color: #1d2530;
    margin: 0 0 16px;
}
.intro-text {
    font-size: 15px; line-height: 1.7;
    color: #5b6573;
    margin: 0;
}

.intro-card {
    margin-top: 28px;
    padding: 18px;
    background: rgba(255,255,255,0.86);
    border: 1px solid rgba(232,73,84,0.12);
    border-radius: 16px;
    box-shadow: 0 12px 34px rgba(29,37,48,0.10);
    text-align: left;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.intro-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}
.intro-card-header span {
    font-size: 13px;
    font-weight: 600;
    color: #1d2530;
}
.intro-card-live {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 600;
    color: #1d2530;
}
.intro-card-live::before {
    content: '';
    width: 7px; height: 7px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 0 3px 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); }
}

.intro-card-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 14px;
}
.intro-stat strong {
    display: block;
    font-family: 'Space Grotesk', 'Outfit', sans-serif;
    font-size: 26px;
    font-weight: 700;
    color: #1d2530;
    line-height: 1;
}
.intro-stat span {
    font-size: 12px;
    color: #5b6573;
}

.intro-card-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: #e84954;
    text-decoration: none;
    transition: gap 0.25s var(--ease-out-quart);
}
.intro-card-link:hover { gap: 10px; }
.intro-hint {
    position: absolute;
    left: 50%; bottom: 36px; transform: translateX(-50%);
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase;
    color: #8a93a3;
    pointer-events: none;
    animation: introBob 1.8s ease-in-out infinite;
}
@keyframes introBob {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50%      { transform: translateX(-50%) translateY(6px); }
}

/* Globe fallback */
.globe-fallback {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
opacity: 0.6;
}

/* ---- All content sections above globe ----
The globe at z-index:1 stays behind all content.
All sections need z-index > 1 to appear above globe. */
.hero, .trust-bar, .product-categories, .products,
.why-factory, .cta-section, .footer {
    position: relative;
    z-index: 2 !important;
}

/* ============================================================
   HERO SECTION — Factory Direct + World Map
   Left copy, right product image with subtle map network.
   ============================================================ */
.hero {
    min-height: 100vh;
    position: relative;
    display: flex;
    align-items: center;
    padding: 104px 0 76px;
    overflow: hidden;
}

.hero-bg { position: absolute; inset: 0; z-index: 0; }

/* White blueprint grid — Hero area uses the global body::before grid. */
.blueprint-grid {
    position: absolute;
    inset: 0;
    background: #ffffff;
}

.hero-container {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
    position: relative;
    z-index: 4;
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    grid-template-rows: auto auto;
    grid-template-areas:
        "content visual"
        "highlights highlights";
    gap: 40px 48px;
    align-items: center;
}

.hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: oklch(63% 0.17 22 / 0.1);
    border-radius: 100px;
    font-size: 13px;
    font-weight: 600;
    color: var(--primary);
    margin-bottom: 24px;
}

.hero-eyebrow-icon {
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
}

.hero-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(2.6rem, 5.2vw, 4.2rem);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: #1d2530;
    margin-bottom: 20px;
}

.hero-title .line { display: block; }
.hero-title .accent {
    color: var(--primary);
    font-style: normal;
}

.hero-desc {
    font-size: 17px;
    color: oklch(52% 0.015 60);
    max-width: 460px;
    line-height: 1.6;
    margin-bottom: 28px;
}

.hero-content { grid-area: content; }

.hero-actions {
    display: flex;
    gap: 16px;
    margin-bottom: 36px;
    flex-wrap: wrap;
}

.hero-actions .btn-primary {
    padding: 16px 28px;
    font-size: 15px;
}

.hero-actions .btn-primary svg {
    width: 18px;
    height: 18px;
}

.btn-play {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 14px 26px;
    border-radius: 100px;
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border);
    font-weight: 600;
    font-size: 15px;
    text-decoration: none;
    box-shadow: var(--shadow-sm);
    transition: transform 0.25s var(--ease-out-quart), background 0.25s, box-shadow 0.25s;
}

.btn-play:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow);
}

.btn-play:active { transform: translateY(1px) scale(0.98); }

.play-icon {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #fff;
    border: 1.5px solid var(--primary);
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.play-icon svg {
    width: 14px;
    height: 14px;
    margin-left: 2px;
}

/* Hero stat cards — 4 cards under the copy */
.hero-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}

.hero-stat {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 16px 14px;
    box-shadow: 0 4px 18px oklch(28% 0.02 60 / 0.05);
    display: flex;
    align-items: center;
    gap: 12px;
    transition: transform 0.3s var(--ease-out-quart), box-shadow 0.3s var(--ease-out-quart);
}

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

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

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

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

.hero-stat-body { display: flex; flex-direction: column; gap: 1px; }

.hero-stat-num {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: var(--text);
    line-height: 1.1;
}

.hero-stat-body strong {
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
    line-height: 1.2;
}

.hero-stat-body span {
    font-size: 11px;
    color: var(--text-light);
    line-height: 1.3;
}

/* Hero highlights — 4 service chips at the bottom spanning full width */
.hero-highlights {
    grid-area: highlights;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-top: 8px;
}

.hero-highlight {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 14px 16px;
    box-shadow: 0 4px 18px oklch(28% 0.02 60 / 0.05);
    transition: transform 0.3s var(--ease-out-quart), box-shadow 0.3s var(--ease-out-quart);
}

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

.hero-hl-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: oklch(63% 0.17 22 / 0.1);
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.hero-hl-icon svg { width: 20px; height: 20px; }

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

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

.hero-visual {
    grid-area: visual;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 460px;
}

.hero-map {
    position: absolute;
    inset: -20px;
    z-index: 1;
    opacity: 0.28;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-map-bg {
    width: 100%;
    height: 100%;
    max-width: 720px;
}

.map-pin {
    position: absolute;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--primary);
    box-shadow: 0 0 0 6px oklch(63% 0.17 22 / 0.18);
    animation: pinPulse 2.4s var(--ease-in-out) infinite;
}

.hero-mascot {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 580px;
    height: auto;
    object-fit: contain;
}

@keyframes pinPulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.25); opacity: 0.75; }
}

/* WebGL fallback mascot */
.mascot-fallback {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

@keyframes mascotFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-14px); }
}

.hero-scroll {
    position: absolute;
    bottom: 40px; left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    color: var(--text-light);
    font-size: 13px;
}

.mouse {
    width: 24px; height: 40px;
    border: 2px solid var(--border);
    border-radius: 12px;
    display: flex;
    justify-content: center;
    padding-top: 8px;
}

.wheel {
    width: 4px; height: 8px;
    background: var(--primary);
    border-radius: 2px;
    animation: scrollWheel 2s var(--ease-in-out) infinite;
}

@keyframes scrollWheel {
    0% { transform: translateY(0); opacity: 1; }
    100% { transform: translateY(12px); opacity: 0; }
}

/* ============================================================
   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;
}

.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/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: var(--surface);
}

.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: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 100px 0 140px;
    background-image:
        linear-gradient(180deg, oklch(98% 0.01 20 / 0.95) 0%, oklch(96% 0.02 18 / 0.55) 45%, oklch(96% 0.02 18 / 0) 100%),
        url('../images/cta-toys-bg.png');
    background-position: center bottom, center bottom;
    background-size: cover, cover;
    background-repeat: no-repeat, no-repeat;
    background-blend-mode: normal;
    text-align: center;
    overflow: hidden;
}

.cta-section::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 90px;
    background: var(--footer-bg, #1e1e2f);
    border-radius: 50% 50% 0 0 / 100% 100% 0 0;
    z-index: 1;
}

.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; }

/* ============================================================
   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;
}

/* 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;
    transition: background 0.25s var(--ease-out-quart), transform 0.25s var(--ease-out-quart), border-color 0.25s var(--ease-out-quart);
}
.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; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
    /* 平板/中等屏：收起横向导航（超出的项不再挤压成一团），改用汉堡菜单 */
    .nav-menu, .nav-actions .btn { display: none; }
    .nav-toggle { display: flex; }
    /* 汉堡点击展开后的下拉导航（覆盖上面的 display:none） */
    .nav-menu.open {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: #ffffff;
        box-shadow: var(--shadow);
        padding: 8px 0;
        max-width: none;
        overflow: visible;
        white-space: normal;
    }
    .nav-menu.open li { width: 100%; }
    .nav-menu.open .nav-link {
        display: block;
        padding: 14px 24px;
        font-size: 15px;
    }
    .nav-menu.open .nav-link::after { display: none; }

    .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; }
    .category-features { grid-template-columns: 1fr; gap: 14px; }
    .category-feature { padding: 14px 16px; }
    .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-features { grid-template-columns: 1fr; gap: 12px; }
    .products-feature { padding: 14px 16px; }
    .trust-grid { gap: 24px; }
}

@media (max-width: 480px) {
    .footer { padding: 42px 0 0; }
    .footer-container { padding: 0 16px; }
    .footer-main { gap: 28px; padding-bottom: 34px; }
    .footer-links { grid-template-columns: repeat(2, 1fr); gap: 14px; text-align: left; }
    .footer-col h4 { font-size: 12.5px; margin-bottom: 10px; }
    .footer-col a { justify-content: flex-start; padding: 4px 0; font-size: 12px; }
    .footer-mascot { display: none; }
    .footer-info { gap: 10px; }
    .footer-office { padding: 12px; font-size: 12.5px; }
    .footer-map { display: none; }
    .footer-office-address { display: none; }
    .footer-bottom { gap: 14px; padding: 18px 0; font-size: 12px; }
    .footer-certs { flex-wrap: wrap; justify-content: center; }
    .fp-thumb { width: 50px; height: 50px; }
    .fp-main-img { height: 170px; }
    .fp-main { min-height: 190px; }
    .fp-specs { grid-template-columns: 1fr; }
    /* 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; }
}

/* ============================================================
   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; }
}