/* ==========================================================================
   LYBAM GLOBAL — Design System
   Positioning: China Sourcing + Product Development + Manufacturing
   Coordination + International B2B Supply Platform.
   Not a toy shop. Not an Alibaba clone. Not a SaaS template.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {
  /* ---- Ground ---- */
  --ink:            #0B1220;   /* deep blue-black - primary dark ground */
  --ink-elevated:   #111A2E;   /* panels/cards on dark ground */
  --ink-border:     #1F2C44;
  --paper:          #F6F5F1;   /* warm-neutral off-white, industrial "spec sheet" tone, not cream/terracotta */
  --paper-elevated: #FFFFFF;
  --paper-border:   #E4E1D8;

  /* ---- Text ---- */
  --text-on-paper:      #14181F;
  --text-on-paper-soft: #4B5563;
  --text-on-ink:        #F2F4F8;
  --text-on-ink-soft:   #9CA8BC;

  /* ---- Signal accent: industrial amber ---- */
  --signal:       #E8720C;
  --signal-deep:  #C25A00;
  --signal-tint:  #FDE9D6;

  /* ---- Steel neutrals ---- */
  --steel:        #5B6472;
  --steel-light:  #DDE1E6;
  --steel-lighter:#EFF1F3;

  /* ---- Semantic ---- */
  --verified:     #2F7D4F;
  --verified-tint:#E3F1E8;
  --pending:      #9A6B00;
  --pending-tint: #FBF0D9;

  /* ---- Type ---- */
  --font-body: 'IBM Plex Sans', -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', 'SF Mono', Consolas, monospace;

  /* ---- Scale ---- */
  --step--1: clamp(0.8rem, 0.78rem + 0.1vw, 0.875rem);
  --step-0:  clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
  --step-1:  clamp(1.2rem, 1.15rem + 0.25vw, 1.35rem);
  --step-2:  clamp(1.5rem, 1.4rem + 0.5vw, 1.85rem);
  --step-3:  clamp(1.9rem, 1.7rem + 1vw, 2.5rem);
  --step-4:  clamp(2.4rem, 2rem + 2vw, 3.4rem);
  --step-5:  clamp(3rem, 2.4rem + 3vw, 4.4rem);

  /* ---- Space ---- */
  --sp-1: 0.5rem;
  --sp-2: 0.75rem;
  --sp-3: 1rem;
  --sp-4: 1.5rem;
  --sp-5: 2rem;
  --sp-6: 3rem;
  --sp-7: 4.5rem;
  --sp-8: 6.5rem;

  /* ---- Radius: sharper, industrial precision, not soft SaaS-rounded ---- */
  --radius-sm: 3px;
  --radius-md: 5px;
  --radius-lg: 8px;

  --shadow-card: 0 1px 2px rgba(11,18,32,.06), 0 8px 24px rgba(11,18,32,.06);
  --shadow-card-hover: 0 4px 10px rgba(11,18,32,.08), 0 16px 36px rgba(11,18,32,.1);

  --max-width: 1360px;
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--paper);
  color: var(--text-on-paper);
  font-size: var(--step-0);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
button { font-family: inherit; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ---- Skip link ---- */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 10000;
  background: var(--ink); color: var(--text-on-ink); padding: 12px 20px; font-weight: 600;
}
.skip-link:focus { left: var(--sp-3); top: var(--sp-3); }

a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--signal); outline-offset: 2px; border-radius: var(--radius-sm);
}

/* ==========================================================================
   Typography
   ========================================================================== */
h1, h2, h3, h4 { font-family: var(--font-body); font-weight: 700; line-height: 1.12; letter-spacing: -0.01em; margin: 0; text-wrap: balance; }
h1 { font-size: var(--step-5); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); font-weight: 600; }
p { margin: 0; text-wrap: pretty; }
.lede { font-size: var(--step-1); color: var(--text-on-paper-soft); line-height: 1.55; max-width: 62ch; }

.eyebrow {
  font-family: var(--font-mono); font-size: var(--step--1); font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--signal-deep);
  display: flex; align-items: center; gap: 8px; margin-bottom: var(--sp-2);
}
.eyebrow::before { content: ''; width: 20px; height: 2px; background: var(--signal); flex-shrink: 0; }

.data-mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* ==========================================================================
   Layout primitives
   ========================================================================== */
.wrap { max-width: var(--max-width); margin: 0 auto; padding: 0 var(--sp-4); }
@media (max-width: 640px) { .wrap { padding: 0 var(--sp-3); } }

.section { padding: var(--sp-8) 0; }
@media (max-width: 780px) { .section { padding: var(--sp-6) 0; } }
.section--ink { background: var(--ink); color: var(--text-on-ink); }
.section--ink h2, .section--ink h3 { color: var(--text-on-ink); }
.section--ink .lede { color: var(--text-on-ink-soft); }
.section--paper-elevated { background: var(--paper-elevated); border-top: 1px solid var(--paper-border); border-bottom: 1px solid var(--paper-border); }

.section-head {
  display: flex; justify-content: space-between; align-items: flex-end; gap: var(--sp-4);
  margin-bottom: var(--sp-5); flex-wrap: wrap;
}

.grid { display: grid; gap: var(--sp-4); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 980px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }
/* Real mobile overflow bug found via independent review (Cordless Hair Styling Tools
   gallery expanding to ~650px on a 390px viewport): CSS Grid items default to
   `min-width: auto`, which for a cell containing an <img> resolves to the image's
   intrinsic width, not 0 — so a large source photo can force its track (and the whole
   grid) wider than the viewport even though `img { max-width: 100% }` is already set.
   This is the standard root-cause fix, applied once here rather than per-page. */
.grid > * { min-width: 0; }

/* ==========================================================================
   Header / Navigation
   ========================================================================== */
.site-header {
  position: sticky; top: 0; z-index: 500; background: rgba(246,245,241,.92);
  backdrop-filter: blur(10px); border-bottom: 1px solid var(--paper-border);
}
.header-row { display: flex; align-items: center; justify-content: space-between; height: 76px; gap: var(--sp-5); }
.brand { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.brand img { height: 30px; width: auto; }
.brand-name { font-weight: 700; font-size: 1.05rem; letter-spacing: -0.01em; }

.primary-nav { display: flex; align-items: center; gap: var(--sp-5); flex: 1; justify-content: center; }
.primary-nav a {
  font-size: var(--step--1); font-weight: 600; color: var(--text-on-paper-soft);
  padding: 8px 2px; border-bottom: 2px solid transparent; transition: color .15s, border-color .15s;
}
.primary-nav a:hover { color: var(--ink); border-color: var(--signal); }

.header-actions { display: flex; align-items: center; gap: var(--sp-3); flex-shrink: 0; }
.header-actions .btn-ghost { display: none; }
@media (min-width: 1400px) { .header-actions .btn-ghost { display: inline-flex; } }
/* The primary CTA text doesn't fit next to the hamburger toggle on phones — the same
   action is already the hero's first button on every page, so hide the header duplicate
   rather than let it overflow past the toggle (real bug found via mobile QA). */
@media (max-width: 640px) { .header-actions .btn-primary { display: none; } }

.nav-toggle {
  display: none; flex-direction: column; gap: 5px; background: none; border: none; padding: 8px; cursor: pointer;
}
.nav-toggle span { width: 22px; height: 2px; background: var(--ink); border-radius: 2px; }
/* Breakpoint raised from 900px to 1180px to 1400px across two review rounds. Round 2 fixed
   a ~123px overflow at 1024px. A later independent review (different browser/font metrics)
   found the desktop nav still overflowed at exactly 1280px by a handful of pixels — the
   margin at 1180px was razor-thin and font-rendering-dependent, not a real fix. Raised to
   1400px so there is real margin (~150px) at both required breakpoints (1280 uses the
   hamburger; 1440 uses the desktop nav with headroom to spare), instead of barely fitting
   at the edge of one specific environment's font metrics. */
@media (max-width: 1399px) {
  .primary-nav { display: none; }
  .nav-toggle { display: flex; }
  .primary-nav.open {
    display: flex; flex-direction: column; position: absolute; top: 76px; left: 0; right: 0;
    background: var(--paper-elevated); padding: var(--sp-4); border-bottom: 1px solid var(--paper-border);
    align-items: flex-start; gap: var(--sp-2);
  }
}

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-body); font-weight: 600; font-size: var(--step--1);
  padding: 13px 24px; border-radius: var(--radius-md); border: 1.5px solid transparent;
  cursor: pointer; transition: transform .12s ease, background .15s, border-color .15s, color .15s;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--signal); color: #fff; border-color: var(--signal); }
.btn-primary:hover { background: var(--signal-deep); border-color: var(--signal-deep); }
.btn-ink { background: var(--ink); color: var(--text-on-ink); border-color: var(--ink); }
.btn-ink:hover { background: #1a253d; }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--steel-light); }
.btn-ghost:hover { border-color: var(--ink); }
.btn-ghost-on-ink { background: transparent; color: var(--text-on-ink); border-color: var(--ink-border); }
.btn-ghost-on-ink:hover { border-color: var(--text-on-ink-soft); }
.btn-block { width: 100%; }
.btn-row { display: flex; gap: var(--sp-3); flex-wrap: wrap; }

/* ==========================================================================
   Cards
   ========================================================================== */
.card {
  background: var(--paper-elevated); border: 1px solid var(--paper-border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card); transition: box-shadow .2s, transform .2s;
}
.card:hover { box-shadow: var(--shadow-card-hover); }

/* Category gateway card - large, photo-forward, per Part XI */
.category-card {
  position: relative; display: block; border-radius: var(--radius-lg); overflow: hidden;
  aspect-ratio: 4/3; background: var(--ink-elevated);
}
.category-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.category-card:hover img { transform: scale(1.04); }
.category-card::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(11,18,32,0) 40%, rgba(11,18,32,.88) 100%);
}
.category-card-body {
  position: absolute; left: 0; right: 0; bottom: 0; padding: var(--sp-4); z-index: 2; color: #fff;
}
.category-card-count {
  font-family: var(--font-mono); font-size: var(--step--1); color: var(--text-on-ink-soft); margin-bottom: 4px;
}
.category-card-title { font-size: var(--step-2); font-weight: 700; color: #fff; }
.category-card-cta {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font-size: var(--step--1);
  font-weight: 600; color: var(--signal);
}

/* Product card */
.product-card { display: flex; flex-direction: column; overflow: hidden; }
.product-card-media {
  aspect-ratio: 1/1; background: var(--paper); position: relative; overflow: hidden;
  border-bottom: 1px solid var(--paper-border);
}
.product-card-media img { width: 100%; height: 100%; object-fit: contain; padding: var(--sp-3); }
.product-card-body { padding: var(--sp-4); display: flex; flex-direction: column; gap: 8px; flex: 1; }
.product-card-cat { font-family: var(--font-mono); font-size: 11px; color: var(--steel); text-transform: uppercase; letter-spacing: .05em; }
.product-card-title { font-size: var(--step-0); font-weight: 700; line-height: 1.3; }
.product-card-desc { font-size: var(--step--1); color: var(--text-on-paper-soft); flex: 1; }
.product-card-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; padding-top: var(--sp-3); border-top: 1px solid var(--paper-border); }
.product-card-variants { font-size: var(--step--1); color: var(--text-on-paper-soft); font-family: var(--font-mono); }

/* ==========================================================================
   Trust badges / verification chips
   ========================================================================== */
.badge {
  display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono);
  font-size: 11px; font-weight: 500; letter-spacing: .03em; padding: 5px 10px; border-radius: 999px;
  text-transform: uppercase;
}
.badge-verified { background: var(--verified-tint); color: var(--verified); }
.badge-pending { background: var(--pending-tint); color: var(--pending); }
.badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

.trust-row { display: flex; gap: var(--sp-5); flex-wrap: wrap; }
.trust-stat { display: flex; flex-direction: column; gap: 2px; }
.trust-stat-value { font-family: var(--font-mono); font-size: var(--step-2); font-weight: 600; color: var(--ink); }
.section--ink .trust-stat-value { color: #fff; }
.trust-stat-label { font-size: var(--step--1); color: var(--text-on-paper-soft); }
.section--ink .trust-stat-label { color: var(--text-on-ink-soft); }

/* ==========================================================================
   Spec table - reinforces "product intelligence" positioning
   ========================================================================== */
.spec-table { width: 100%; border-collapse: collapse; font-size: var(--step--1); }
.spec-table tr { border-bottom: 1px solid var(--paper-border); }
.spec-table tr:last-child { border-bottom: none; }
.spec-table th, .spec-table td { text-align: left; padding: 12px 4px; vertical-align: top; }
.spec-table th { font-weight: 500; color: var(--steel); width: 42%; }
.spec-table td { font-family: var(--font-mono); color: var(--ink); }
.spec-table td.unverified { color: var(--steel); font-style: italic; font-family: var(--font-body); }

/* ==========================================================================
   Breadcrumbs
   ========================================================================== */
.breadcrumb { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--steel); flex-wrap: wrap; }
.breadcrumb a { color: var(--steel); }
.breadcrumb a:hover { color: var(--signal-deep); }
.breadcrumb .sep { color: var(--steel-light); }
.breadcrumb .current { color: var(--ink); font-weight: 600; }

/* ==========================================================================
   Forms
   ========================================================================== */
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: var(--step--1); font-weight: 600; color: var(--ink); }
.field .req { color: var(--signal-deep); }
.field input, .field select, .field textarea {
  font-family: var(--font-body); font-size: var(--step-0); padding: 12px 14px;
  border: 1.5px solid var(--steel-light); border-radius: var(--radius-md); background: var(--paper-elevated);
  color: var(--ink); transition: border-color .15s, box-shadow .15s;
}
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--signal); box-shadow: 0 0 0 3px var(--signal-tint); outline: none;
}
.field textarea { resize: vertical; min-height: 110px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } }
.form-grid .field-full { grid-column: 1 / -1; }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer { background: var(--ink); color: var(--text-on-ink-soft); padding: var(--sp-7) 0 var(--sp-5); }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: var(--sp-5); padding-bottom: var(--sp-6); border-bottom: 1px solid var(--ink-border); }
@media (max-width: 780px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-col-heading { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--text-on-ink-soft); margin-bottom: var(--sp-3); font-weight: 500; }
.footer-col a, .footer-col p { display: block; font-size: var(--step--1); color: #C7CEDA; margin-bottom: 10px; }
.footer-col a:hover { color: #fff; }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; padding-top: var(--sp-4); flex-wrap: wrap; gap: var(--sp-2); font-size: 12px; color: var(--text-on-ink-soft); }

/* ==========================================================================
   Hero (asymmetric, left-aligned - not the centered-gradient AI default)
   ========================================================================== */
.hero { background: var(--ink); color: #fff; padding: var(--sp-8) 0 var(--sp-7); position: relative; overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--sp-6); align-items: center; position: relative; z-index: 2; }
.hero-grid > * { min-width: 0; }
@media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; } }
.hero h1 { color: #fff; margin-bottom: var(--sp-3); }
.hero .lede { color: var(--text-on-ink-soft); margin-bottom: var(--sp-5); }
.hero-visual { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--ink-border); }
.hero-visual img { width: 100%; height: 100%; object-fit: cover; }

/* Manufacturer teaser strip */
.mfg-strip {
  background: var(--paper-elevated); border: 1.5px solid var(--paper-border); border-radius: var(--radius-lg);
  padding: var(--sp-5); display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap;
}

/* Journey steps */
.journey { display: flex; gap: 0; overflow-x: auto; padding-bottom: 4px; }
.journey-step { flex: 1; min-width: 150px; padding: var(--sp-4) var(--sp-3); border-right: 1px dashed var(--paper-border); }
.journey-step:last-child { border-right: none; }
.journey-step-num { font-family: var(--font-mono); font-size: var(--step--1); color: var(--signal-deep); font-weight: 600; }
.journey-step h3 { margin: 8px 0 4px; font-size: var(--step-1); }
.journey-step p { font-size: var(--step--1); color: var(--text-on-paper-soft); }

/* Consent banner */
.cookie-banner {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 9000;
  background: var(--ink); border-top: 1px solid var(--ink-border);
  padding: 18px 24px; display: flex; align-items: center; justify-content: space-between;
  gap: 24px; flex-wrap: wrap; box-shadow: 0 -4px 24px rgba(0,0,0,.3);
}
.cookie-banner-text { font-size: 13px; color: var(--text-on-ink-soft); line-height: 1.6; max-width: 720px; flex: 1 1 320px; }
.cookie-banner-text a { color: var(--signal); }
.cookie-banner-actions { display: flex; gap: 12px; flex-wrap: wrap; }