/* =============================================================================
   AMINO ERA — RESPONSIVE LAYER
   The page stylesheets were authored desktop-only (no media queries). This file
   loads AFTER them site-wide and collapses every multi-column layout for tablet
   and mobile, fixes horizontal overflow, scales typography, and powers the
   mobile nav menu. !important is used deliberately so these overrides beat the
   (often more specific) desktop rules regardless of source order.
   ========================================================================== */

/* ── Global overflow / media safety ─────────────────────────────────────── */
@media (max-width: 1024px) {
  html, body { overflow-x: hidden; max-width: 100%; }
  img, svg, video, iframe, table, pre { max-width: 100%; height: auto; }
}

/* ── Tablet (≤ 980px): collapse sidebars + dense card grids ──────────────── */
@media (max-width: 980px) {
  .account-page, .catalog-layout, .library-layout, .cat-layout, .faq-section-wrap,
  .search-layout, .page-layout, .contact-layout, .page-cols, .checkout-cols,
  .signin-grid, .def-row, .combined-inner, .order-exp-header, .page-hero-inner,
  .overview-grid, .hero-inner, .ae-checkout form.checkout {
    grid-template-columns: 1fr !important;
  }
  .products-grid, .products-row, .related-grid, .cat-cards-row, .steps-grid,
  .process-steps, .process-timeline, .bundles-grid, .crypto-grid, .feature-grid,
  .shipping-grid, .shipping-methods, .standards-grid, .testimonials-grid,
  .cat-grid, .cat-grid-full, .transparency-inner {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  /* Sticky sidebars become normal flow once stacked. */
  .sidebar, .search-sidebar, .faq-sidebar, .specs-sidebar { position: static !important; width: auto !important; }
  .signin-grid { max-width: 480px; margin-left: auto; margin-right: auto; }
}

/* ── Small tablet / large phone (≤ 768px): 2-col content → 1-col ─────────── */
@media (max-width: 768px) {
  .why-grid, .mission-grid, .values-grid, .policy-grid, .rights-grid, .choose-grid,
  .commission-layout, .contact-cta-inner, .featured-grid, .modal-grid, .faq-grid,
  .coa-grid, .cert-meta-grid, .detail-grid, .addresses-grid, .details-form-grid,
  .form-grid-2, .form-row, .overview-bottom, .transparency-grid, .research-grid,
  .form-grid.cols-2, .form-grid.cols-3 {
    grid-template-columns: 1fr !important;
  }
  .product-quick-specs, .coa-meta-row, .coa-grid.list-view .coa-meta-row {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  /* Hero / section type scaling. */
  .hero-title, .hero-h1, .confirm-h1, .product-name { font-size: clamp(28px, 7vw, 40px) !important; }
  .section-heading { font-size: 24px !important; }
  /* Roomy desktop gaps tighten up. */
  .product-grid, .hero-inner, .why-grid { gap: 28px !important; }
}

/* ── Phone (≤ 600px): everything to a single column ─────────────────────── */
@media (max-width: 600px) {
  .products-grid, .products-row, .related-grid, .cat-cards-row, .steps-grid,
  .process-steps, .process-timeline, .bundles-grid, .crypto-grid, .feature-grid,
  .shipping-grid, .shipping-methods, .standards-grid, .testimonials-grid,
  .cat-grid, .cat-grid-full, .transparency-inner, .product-quick-specs,
  .coa-meta-row, .coa-grid.list-view .coa-meta-row, .footer-top, .product-grid {
    grid-template-columns: 1fr !important;
  }
  /* Table-like rows stack. */
  .cart-row, .cart-table-head, .items-table-head, .order-item-row {
    grid-template-columns: 1fr !important; gap: 6px !important;
  }
  .items-table-head, .cart-table-head { display: none !important; }   /* header row redundant once stacked */

  .container, .nav-inner, .hero-inner, .stats-inner, .breadcrumb-inner,
  .checkout-container, .page-body, .search-header-inner { padding-left: 20px !important; padding-right: 20px !important; }

  /* Section padding compresses. */
  section, .hero, .page-hero, .why-section, .products-section, .categories-section,
  .process-section, .testimonials-section, .section { padding-top: 48px !important; padding-bottom: 48px !important; }

  /* Stats / trust strips wrap. */
  .stats-inner, .trust-band-inner, .hero-trust, .status-strip-inner, .hero-stat-strip { flex-wrap: wrap !important; }
  .stat-divider { display: none !important; }
  .stats-inner .stat-item { flex: 1 0 40% !important; }

  /* Buttons go full width so they're tappable. */
  .hero-ctas, .cta-buttons { flex-direction: column !important; }
  .hero-ctas .btn-primary, .hero-ctas .btn-outline, .cta-buttons .btn-white, .cta-buttons .btn-ghost { width: 100% !important; justify-content: center !important; }

  /* Forms/inputs full width. */
  .form-input, .hero-search, .sidebar-search, .search-bar-input { width: 100% !important; }

  /* Floating hero badges can overflow — tuck them in. */
  .hero-badge, .hero-badge-1, .hero-badge-2 { position: static !important; display: inline-flex !important; margin: 8px 8px 0 0 !important; }
  .hero-visual, .hero-hex-container { max-width: 100% !important; }
}

/* ── Horizontal-scroll bars (quick-jump, tabs) keep their scroll on mobile ── */
@media (max-width: 768px) {
  .quickjump-inner, .tabs-nav, .filter-tabs, .order-filter-tabs { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
}

/* ── MOBILE NAVIGATION ──────────────────────────────────────────────────── */
.nav-toggle { display: none; }

@media (max-width: 860px) {
  .nav-inner { position: relative; }
  .nav-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border: 1px solid var(--gray-border);
    border-radius: var(--radius-sm); background: var(--white); color: var(--near-black);
    cursor: pointer; transition: border-color var(--transition), background var(--transition);
  }
  .nav-toggle:hover { border-color: var(--blue); color: var(--blue); }

  .nav-links {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--white); border-top: 1px solid var(--gray-border);
    border-bottom: 1px solid var(--gray-border);
    box-shadow: 0 12px 28px rgba(26,27,30,0.10); padding: 6px 0; z-index: 200;
  }
  .nav-links.open { display: flex; }
  .nav-links li { width: 100%; }
  .nav-links a { display: block; padding: 14px 32px; font-size: 13px; }
  .nav-links a:hover, .nav-links a.active { background: var(--off-white); }
}

/* On very small screens give the account button room. */
@media (max-width: 420px) {
  .nav-account { padding: 9px 14px !important; font-size: 11px !important; }
  .nav-inner { gap: 12px !important; }
}