/* ============================================================
   KOMODO ORGANIC — Responsive Styles v2.0
   ============================================================ */

/* ── TABLET: ≤1200px ─────────────────────────────────────── */
@media (max-width: 1200px) {
  .categories-grid   { grid-template-columns: repeat(3, 1fr); }
  .industries-grid   { grid-template-columns: repeat(2, 1fr); }
  .origins-grid      { grid-template-columns: repeat(3, 1fr); }
  .footer-grid       { grid-template-columns: 1fr 1fr; gap: var(--space-10); }

  .hero-visual { width: 44%; right: -4%; }

  .dropdown-grid { grid-template-columns: repeat(2, 180px) 160px; min-width: 560px; }
  .dropdown-cta-col { display: none; }

  .quality-layout { gap: var(--space-10); }
}

/* ── TABLET: ≤1024px ─────────────────────────────────────── */
@media (max-width: 1024px) {
  :root { --header-h: 64px; }

  /* Nav → hamburger mode */
  .main-nav {
    position: fixed;
    top: var(--header-h);
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(6, 15, 9, 0.97);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    overflow-y: auto;
    padding: var(--space-6);
    transform: translateX(-100%);
    transition: transform var(--t-slow);
    z-index: calc(var(--z-header) - 1);
  }

  .main-nav.open { transform: translateX(0); }

  .nav-list {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-1);
  }

  .nav-link {
    width: 100%;
    padding: var(--space-4);
    font-size: var(--text-base);
    justify-content: space-between;
    border-radius: var(--radius-lg);
  }

  .dropdown {
    position: static;
    transform: none;
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    visibility: visible;
    padding: 0;
    border: none;
    background: rgba(255,255,255,0.04);
    border-radius: var(--radius-lg);
    box-shadow: none;
    transition: max-height var(--t-slow), opacity var(--t-slow), padding var(--t-slow);
    margin-top: var(--space-1);
  }

  .dropdown.open {
    opacity: 1;
    max-height: 600px;
    padding: var(--space-4);
  }

  .dropdown-grid {
    grid-template-columns: 1fr;
    min-width: 0;
    gap: var(--space-5);
  }

  .dropdown--slim { padding: var(--space-4); }

  .hamburger { display: flex; }
  .header-actions .btn { display: none; }

  /* Hero */
  .hero-visual { opacity: 0.2; width: 100%; right: 0; }
  .hero-content { max-width: 100%; }
  .product-detail-card { display: none; }

  /* Process */
  .process-track {
    flex-direction: column;
    gap: var(--space-8);
    overflow-x: visible;
  }
  .process-connector {
    width: 2px;
    height: 32px;
    margin: 0 auto;
    background: linear-gradient(to bottom, var(--green-300), var(--green-200));
  }
  .process-step { padding: var(--space-4); }

  /* Quality */
  .quality-layout {
    grid-template-columns: 1fr;
    gap: var(--space-10);
  }

  /* Private label */
  .plb-inner {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
  }
  .private-label-banner .btn {
    grid-column: 1;
    grid-row: 3;
    width: fit-content;
  }

  /* Footer */
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
  .footer-legal { text-align: left; }
}

/* ── MOBILE: ≤768px ──────────────────────────────────────── */
@media (max-width: 768px) {
  .section { padding-block: var(--space-16); }
  .section--lg { padding-block: var(--space-20); }

  /* Hero */
  .hero-title { font-size: clamp(2.5rem, 10vw, 4rem); }
  .hero-ctas { flex-direction: column; align-items: flex-start; }
  .hero-ctas .btn { width: 100%; justify-content: center; }
  .hero-stats { gap: var(--space-4); flex-wrap: wrap; }
  .stat-divider { display: none; }

  /* Dock */
  .product-dock { width: 100%; padding-inline: var(--space-4); bottom: var(--space-4); }
  .dock-inner {
    overflow-x: auto;
    border-radius: var(--radius-xl);
    -ms-overflow-style: none;
    scrollbar-width: none;
    width: 100%;
    justify-content: flex-start;
  }
  .dock-inner::-webkit-scrollbar { display: none; }
  .dock-btn span { display: none; }
  .dock-btn { padding: 0.5rem 0.65rem; font-size: 1.1rem; }

  /* Products */
  .categories-grid { grid-template-columns: repeat(2, 1fr); }
  .cat-card-body p { display: none; }

  /* Industries */
  .industries-grid { grid-template-columns: 1fr; gap: var(--space-3); }
  .industry-card { flex-direction: row; padding: var(--space-4); }
  .ic-icon { flex-shrink: 0; }
  .ic-body { flex: 1; }
  .ic-body p { display: none; }
  .ic-arrow { align-self: center; }

  /* Origins */
  .origins-grid { grid-template-columns: repeat(2, 1fr); }

  /* Quality badges */
  .qb-grid { grid-template-columns: repeat(2, 1fr); }

  /* Private label features */
  .plb-inner { gap: var(--space-6); }
  .plb-features { gap: var(--space-2); }

  /* Footer */
  .footer-grid { grid-template-columns: 1fr; gap: var(--space-8); }
  .footer-brand > p { max-width: 100%; }

  /* Drawer */
  .inquiry-drawer { width: 100%; right: -100%; }
  .inquiry-fab { bottom: var(--space-4); right: var(--space-4); padding: 0.7rem 1rem; }

  /* Trust bar */
  .trust-inner { justify-content: flex-start; gap: var(--space-4); }
  .trust-dot { display: none; }

  /* Section CTAs */
  .section-cta { flex-direction: column; }
  .section-cta .btn { width: 100%; }

  /* FCS */
  .fcs-actions { flex-direction: column; }
  .fcs-actions .btn { width: 100%; }
}

/* ── SMALL MOBILE: ≤480px ────────────────────────────────── */
@media (max-width: 480px) {
  :root { --container-pad: 1rem; }

  .hero-title { font-size: clamp(2rem, 12vw, 3rem); }
  .hero-stats { gap: var(--space-3); }
  .categories-grid { grid-template-columns: 1fr; }
  .qb-grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-2); }
  .qb-card { padding: var(--space-3) var(--space-2); }
  .qb-icon { font-size: 1.25rem; }

  .origins-grid { grid-template-columns: 1fr; }

  .fcs-inner h2 { font-size: clamp(2rem, 10vw, 3rem); }
}

/* ── REDUCED MOTION ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .product-emoji-large { animation: none; }
  .product-glow        { animation: none; }
  .scroll-line-anim::after { animation: none; }
  [data-animate] { opacity: 1; transform: none; }
}

/* ── PRINT ───────────────────────────────────────────────── */
@media print {
  .site-header, .product-dock, .inquiry-fab, .inquiry-drawer,
  .drawer-overlay, .hero-scroll-hint { display: none; }
  .hero-spatial { min-height: auto; }
  body { background: white; color: black; }
}


/* ============================================================
   v2.1 — SPATIAL SHOWCASE POLISH + INTERIOR PAGE RESPONSIVE
   ============================================================ */

/* Badge repositioning so nothing clips at the viewport edge (base) */
.badge-pos-tl { top: 14%;  left: -2%; }
.badge-pos-tr { top: 8%;   right: 0; }
.badge-pos-bl { bottom: 22%; left: -2%; }
.badge-pos-br { bottom: 16%; right: 0; }

/* ── ≤1200px ── */
@media (max-width: 1200px) {
  .hero-spatial-showcase { right: 2%; width: min(440px, 42vw); }
  .badge-pos-tl, .badge-pos-bl { left: 0; }
  .product-list-grid { grid-template-columns: repeat(3, 1fr); }
  .page-hero-visual { width: min(280px, 26vw); }
  .two-col, .two-col--wide, .two-col--wide-r,
  .contact-layout { gap: var(--space-10); }
}

/* ── ≤1024px ── */
@media (max-width: 1024px) {
  /* Spatial hero → recede to background, drop badges */
  .hero-spatial-showcase { opacity: 0.16; width: 90%; right: -8%; }
  .spatial-badge { display: none; }

  /* Interior page hero → single column, hide orbital visual */
  .page-hero-inner { grid-template-columns: 1fr; }
  .page-hero-visual { display: none; }
  .page-hero { min-height: 440px; }

  /* Two-column & split layouts stack */
  .two-col, .two-col--wide, .two-col--wide-r,
  .contact-layout { grid-template-columns: 1fr; gap: var(--space-10); }

  /* Grids reduce columns */
  .product-list-grid { grid-template-columns: repeat(2, 1fr); }
  .who-row           { grid-template-columns: repeat(2, 1fr); }
  .supply-steps      { grid-template-columns: repeat(2, 1fr); }
  .stat-card-grid    { grid-template-columns: repeat(2, 1fr); }
  .values-grid       { grid-template-columns: repeat(2, 1fr); }
  .pain-grid         { grid-template-columns: 1fr; }
  .form-row          { grid-template-columns: 1fr; }

  /* Highlight strip stacks */
  .highlight-strip { flex-direction: column; align-items: flex-start; }
}

/* ── ≤768px ── */
@media (max-width: 768px) {
  .page-hero { min-height: auto; padding-bottom: var(--space-12); }
  .page-hero-title { font-size: clamp(2.25rem, 9vw, 3.25rem); }
  .page-hero-stats { gap: var(--space-4); }
  .phs-div { display: none; }
  .page-hero-actions { flex-direction: column; align-items: stretch; }
  .page-hero-actions .btn { width: 100%; justify-content: center; }

  .feature-grid,
  .product-list-grid,
  .who-row,
  .supply-steps,
  .stat-card-grid,
  .values-grid,
  .sku-grid,
  .checkbox-grid { grid-template-columns: 1fr; }

  .pain-card { flex-direction: column; }

  /* Filter bar scrolls horizontally */
  .filter-bar {
    flex-wrap: nowrap;
    overflow-x: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .filter-bar::-webkit-scrollbar { display: none; }
  .filter-btn { flex-shrink: 0; }

  /* Spec table → comfortable stacked reading */
  .spec-table th { width: auto; }
  .spec-table th, .spec-table td { padding: var(--space-3) var(--space-4); }

  /* Forms */
  .rfq-form { padding: var(--space-6); }
  .cert-row { justify-content: center; }

  /* Highlight strip button full width */
  .highlight-strip .btn { width: 100%; justify-content: center; }
}

/* ── ≤480px ── */
@media (max-width: 480px) {
  .product-list-grid,
  .feature-grid,
  .values-grid,
  .supply-steps,
  .stat-card-grid { grid-template-columns: 1fr; }
  .page-hero-stats { flex-wrap: wrap; gap: var(--space-3); }
  .rfq-form { padding: var(--space-5); }
}

/* Reduced-motion: freeze orbital spin */
@media (prefers-reduced-motion: reduce) {
  .orbit, .ph-orbit, .orbit-dot { animation: none !important; }
}


/* ============================================================
   v2.2 — FIX: image-fallback [data-img-wrap]{position:relative}
   was overriding the absolutely-positioned hero image frames,
   causing product images to stack/drift downward. Restore
   absolute positioning with higher specificity.
   ============================================================ */
.orbit-core .product-frame { position: absolute; inset: 0; }
.page-hero-visual .ph-core { position: absolute; }


/* v2.3 — freeze product cutout float under reduced motion */
@media (prefers-reduced-motion: reduce) {
  .product-frame.is-cutout img { animation: none !important; }
}


/* v2.4 — FIX: hero/page-hero .container collapsed to content width because
   `margin:0 auto` cancels flex cross-axis stretch, creating a large empty
   left gap. Force full width so content aligns to the container's edge. */
.hero-spatial > .container,
.page-hero > .container { width: 100%; }


/* ============================================================
   v3 — HERO EDITORIAL SPLIT responsive
   ============================================================ */
@media (max-width: 1024px) {
  .hero-ed { min-height: auto; padding-top: calc(var(--header-h) + var(--space-10)); padding-bottom: var(--space-16); }
  .hero-ed-grid { grid-template-columns: 1fr; gap: var(--space-12); }
  .hero-ed-copy { max-width: 640px; }
  .hero-ed-sub { max-width: 560px; }
  .hero-ed-stage { margin-inline: auto; }
}
@media (max-width: 768px) {
  .hero-ed-title { font-size: clamp(2.4rem, 9vw, 3.2rem); }
  .hero-ed-ctas { flex-direction: column; align-items: stretch; }
  .hero-ed-ctas .btn { width: 100%; justify-content: center; }
  .hero-ed-stats { gap: var(--space-4); }
  .stage-inner { width: min(300px, 76vw); }
  .stage-specs { width: min(330px, 90vw); }
  .stage-dock { max-width: 94vw; }
}

@media (prefers-reduced-motion: reduce) { .stage-ring { animation: none !important; } }

/* v3 — process flow responsive */
@media (max-width: 1024px){ .proc-flow{ grid-template-columns: repeat(2,1fr); gap: var(--space-8);} .proc-line{ display:none; } }
@media (max-width: 560px){ .proc-flow{ grid-template-columns: 1fr; } }

/* v3 — product category cards responsive */
@media (max-width: 1100px){ .pcards-grid{ grid-template-columns: repeat(3,1fr);} }
@media (max-width: 760px){ .pcards-grid{ grid-template-columns: repeat(2,1fr);} }
@media (max-width: 460px){ .pcards-grid{ grid-template-columns: 1fr;} }

/* v3.1 — hero badges + moon: reduced motion + mobile fit */
@media (prefers-reduced-motion: reduce){ .ring-moon, .hbadge { animation: none !important; } }
@media (max-width: 1024px){
  .hbadge--tl, .hbadge--bl { left: 0; }
  .hbadge--tr, .hbadge--br { right: 0; }
}
@media (max-width: 620px){
  .stage-inner--lg { width: min(320px, 82vw); }
  .hbadge { min-width: 0; padding: 0.4rem 0.6rem; }
  .hbadge .hb-v { font-size: 0.72rem; }
  .hbadge--tl { top: 2%; left: -4%; } .hbadge--tr { top: -2%; right: -4%; }
  .hbadge--bl { bottom: 14%; left: -4%; } .hbadge--br { bottom: 6%; right: -4%; }
  .hb-k { font-size: 0.52rem; }
}

/* v3.2 — disable desktop dropdown bridge/position on mobile (static menu) */
@media (max-width: 1024px){
  .dropdown, .dropdown:not(.dropdown--slim) { left: 0; right: auto; max-width: none; }
  .dropdown::before { display: none; }
}