/* ============================================================
   RefurbVerify — mobile responsive layer
   Additive only. Nothing here applies above 900px.
   Remove the <link> tag to revert entirely.
   ============================================================ */

/* ---------- 1. NAVIGATION ---------- */
.nav-toggle{
  display:none;background:rgba(255,255,255,.14);border:none;color:#fff;
  width:44px;height:44px;border-radius:8px;font-size:20px;line-height:1;
  cursor:pointer;align-items:center;justify-content:center;padding:0;
}
.nav-toggle:active{background:rgba(255,255,255,.24)}

@media(max-width:900px){
  .nav-inner{position:relative;flex-wrap:wrap;height:auto;min-height:56px;padding:0 14px}
  .nav-toggle{display:flex}

  /* Override the old rule that hid navigation outright */
  .nav-links{
    display:none !important;
    flex-basis:100%;flex-direction:column;gap:0;
    padding:6px 0 12px;border-top:1px solid rgba(255,255,255,.14);
  }
  .nav-links.open{display:flex !important}
  .nav-links a{
    font-size:15px;padding:13px 6px;border-radius:8px;
    min-height:44px;display:flex;align-items:center;white-space:normal;
  }
  .nav-logo{height:38px}
  .nav-tagline{display:none}
}

/* ---------- 2. HERO / SECTION RHYTHM ---------- */
@media(max-width:700px){
  .page-hero{padding:32px 16px 28px}
  .hero{padding:34px 16px 30px}
  .hero h1{font-size:1.55rem;line-height:1.28}
  .hero p{font-size:.97rem}
  .section{padding:32px 16px}
  .section-title{font-size:1.28rem}
  .btn{display:block;text-align:center;padding:13px 20px;font-size:15px;min-height:44px}
  .btn + .btn{margin-top:10px}
}

/* ---------- 3. STAT + SUSTAINABILITY GRIDS ---------- */
@media(max-width:700px){
  .stats-inner{grid-template-columns:1fr 1fr;gap:10px}
  .stat-featured{grid-column:span 2}
  .stat-value{font-size:1.55rem}
  .sus-grid{grid-template-columns:1fr 1fr;gap:10px}
  .sus-count{font-size:1.6rem}
  .sus-header h2{font-size:1.3rem}
}
@media(max-width:400px){
  .stats-inner{grid-template-columns:1fr}
  .stat-featured{grid-column:span 1}
}

/* ---------- 4. LEADERBOARD → CARDS ---------- */
@media(max-width:700px){
  .table-wrap{overflow:visible;border:none;box-shadow:none;background:transparent;border-radius:0}
  table{display:block;font-size:14px}
  thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  tbody{display:block}

  tbody tr,
  tbody tr:nth-child(even){
    display:flex;flex-wrap:wrap;align-items:center;gap:7px 10px;
    background:#fff;border:1px solid var(--border);border-radius:12px;
    padding:13px 14px;margin-bottom:10px;
    box-shadow:0 1px 3px rgba(0,0,0,.05);
  }
  tbody tr:active{background:#EEF2FF}
  tbody td{display:block;padding:0;border:none;white-space:normal}

  /* order: rank · name · score  /  sentiment · TP · PR · volume */
  tbody td:nth-child(1){order:1;flex:0 0 auto;min-width:26px}
  tbody td:nth-child(2){order:2;flex:1 1 40%;min-width:0}
  tbody td:nth-child(6){order:3;flex:0 0 auto;margin-left:auto;text-align:right}
  tbody td:nth-child(7){order:4}
  tbody td:nth-child(3){order:5}
  tbody td:nth-child(4){order:6}
  tbody td:nth-child(5){order:7}

  /* labels for the metadata row */
  tbody td:nth-child(3)::before{content:"Trustpilot ";color:var(--text-muted);font-size:11px}
  tbody td:nth-child(4)::before{content:"ProductReview ";color:var(--text-muted);font-size:11px}
  tbody td:nth-child(5)::before{content:"Reviews ";color:var(--text-muted);font-size:11px}

  tbody td:nth-child(3),
  tbody td:nth-child(4),
  tbody td:nth-child(5){
    font-size:12px;background:var(--surface);border-radius:6px;padding:3px 9px;
  }

  .vendor-name{font-size:15px;display:block}
  .vendor-url{font-size:11px;display:block;color:var(--text-muted)}
  .vendor-arrow{display:none}
  .rank-cell{font-size:13px}

  .ts-cell{display:flex;align-items:baseline;gap:3px;justify-content:flex-end}
  .ts-val{font-size:20px}
  .ts-bar{display:none}
  .chip{font-size:11px}
  .not-listed{font-size:11px}
}

/* ---------- 5. CONTROLS / SEARCH / FILTERS ---------- */
@media(max-width:700px){
  .controls{flex-wrap:wrap;gap:8px}
  #search{flex:1 1 100%;min-height:44px;font-size:16px} /* 16px stops iOS zoom-on-focus */
  .filter-btn{flex:1 1 auto;min-height:40px;font-size:13px;padding:8px 12px}
  #show-more-btn{width:100%;justify-content:center;min-height:46px}
}

/* ---------- 6. CALCULATOR ---------- */
@media(max-width:700px){
  .calc-controls{grid-template-columns:1fr;gap:14px}
  .calc-result-grid{grid-template-columns:1fr 1fr;gap:10px}
  .calc-header h2{font-size:1.3rem}
  .calc-metric-val{font-size:1.3rem}
  .calc-group select,.calc-group input{min-height:44px;font-size:16px}
}

/* ---------- 7. CARDS / COMPOSITION ---------- */
@media(max-width:700px){
  .vendor-cards,.cards{grid-template-columns:1fr}
  .composition{padding:18px 16px}
  .policy-grid{grid-template-columns:1fr}
}

/* ---------- 8. ARTICLES & GUIDES ---------- */
@media(max-width:700px){
  .article-card h2{font-size:1.1rem}
  .article-header,.article-body{padding-left:18px;padding-right:18px}
  .article-divider{margin-left:18px;margin-right:18px}
  .article-footer{padding-left:18px;padding-right:18px;flex-direction:column;align-items:flex-start;gap:4px}
  .article-body p{font-size:16px;line-height:1.75}
}

/* ---------- 9. WIDE TABLES INSIDE PROSE (specs, comparisons) ---------- */
@media(max-width:700px){
  .spec-table-wrap,.compare-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;position:relative}
  .spec-table-wrap table,.compare-wrap table{display:table;min-width:520px;font-size:13px}
  .spec-table-wrap thead,.compare-wrap thead{position:static;width:auto;height:auto;clip:auto}
  .spec-table-wrap tbody tr,.compare-wrap tbody tr{display:table-row;background:none;border:none;border-radius:0;padding:0;margin:0;box-shadow:none}
  .spec-table-wrap tbody td,.compare-wrap tbody td{display:table-cell;padding:9px 11px;border-bottom:1px solid var(--border)}
  .spec-table-wrap tbody td::before,.compare-wrap tbody td::before{content:none}
}

/* ---------- 10. DEAL TABLES (Best Buys) ---------- */
@media(max-width:680px){
  .deal-tbl th:nth-child(4),.deal-tbl td:nth-child(4){display:revert}
  .deal-tbl{display:block}
  .deal-tbl thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .deal-tbl tbody,.deal-tbl tr,.deal-tbl td{display:block}
  .deal-tbl tbody tr{
    background:#fff;border:1px solid var(--border);border-radius:12px;
    padding:14px;margin-bottom:12px;
  }
  .deal-tbl td{padding:2px 0;border:none}
  .deal-tbl td a.deal-btn,.deal-tbl td .deal-btn{
    display:block;text-align:center;width:100%;margin-top:10px;
    min-height:44px;line-height:44px;padding:0;font-size:15px;
  }
}

/* ---------- 11. FOOTER ---------- */
@media(max-width:700px){
  footer{padding:28px 16px 18px}
  .footer-links{gap:10px 18px;font-size:14px}
  .footer-links a{min-height:34px;display:inline-flex;align-items:center}
  .footer-legal{font-size:11px}
}

/* ---------- 12. TOUCH TARGETS + OVERFLOW SAFETY ---------- */
@media(max-width:900px){
  html,body{overflow-x:hidden}
  img,svg,video,iframe{max-width:100%;height:auto}
  a,button{touch-action:manipulation}
  .float-cta-btn{min-height:44px}
}

/* ---------- 13. COUNTRY SUB-PAGE NAVS (inline-styled, few links) ---------- */
@media(max-width:700px){
  nav[style]{height:auto !important;min-height:48px;flex-wrap:wrap;padding:8px 14px !important;gap:6px}
  nav[style] > div{flex-wrap:wrap;gap:10px !important}
  nav[style] a{padding:4px 0;min-height:28px;display:inline-flex;align-items:center}
}