/* ═══════════════════════════════════════════════════════════════════
   MOBILE.CSS  —  phone-only vertical compression
   ─────────────────────────────────────────────────────────────────
   Loaded with  media="screen and (max-width:640px)"  in index.html,
   so NOTHING in this file can affect tablet or desktop. It only
   tightens spacing to make the page much shorter on phones.
   Loaded LAST, so equal-specificity rules here win over styles.css.
═══════════════════════════════════════════════════════════════════ */

/* ── HERO: stop it eating a full screen before any content shows ── */
.hero            { min-height:auto !important; }
.hero-content    { padding:4.5rem .9rem 1.8rem !important; }
.hero-sub        { margin-top:.6rem !important; line-height:1.55 !important; }
.hero-btns       { margin-top:1rem !important; }
.hero-stats      { margin-top:1.1rem !important; gap:.5rem .9rem !important; }

/* ── SECTIONS: cut the large top/bottom padding roughly in half ── */
.sec,
.chain-sec,
.banner,
.deals-sec       { padding:1.7rem .9rem !important; }
.trading-sec     { padding:1.5rem .9rem !important; }
.sec-hdr         { margin-bottom:1.1rem !important; }
.sec-sub         { margin-top:.4rem !important; }

/* ── COMMODITY CARDS: shorter images + clamp descriptions to 2 lines.
      Repeated across many products, so this is the biggest win. ── */
.cc-img          { height:84px !important; }
.cc-img .ci-emoji{ font-size:1.7rem !important; }
.cc-body         { padding:.55rem .6rem !important; }
.cc-name         { font-size:.78rem !important; margin-bottom:.25rem !important; }
.cc-desc         {
  font-size:.64rem !important;
  line-height:1.4 !important;
  margin-bottom:.45rem !important;
  display:-webkit-box;
  -webkit-line-clamp:2;        /* trim long blurbs to 2 lines */
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.add-cart-btn    { padding:6px 8px !important; }

/* ── TRADING / CHART: shrink the tall chart block ── */
#coffeeChart     { height:190px !important; }
.trading-grid    { gap:1rem !important; }
.mkt-rows        { max-height:none !important; }

/* ── BLOCKCHAIN / TRUST / STEPS: tighten padding ── */
.bc-trust        { padding:1rem !important; }
.bcf             { padding:.8rem !important; }
.qr-demo         { padding:.9rem !important; }
.step            { padding:.9rem !important; }
.chain-flow      { padding:.6rem !important; }

/* ── FAQ: compact rows ── */
.faq-g           { gap:.5rem !important; }
.fq              { padding:.7rem .8rem !important; }

/* ── ABOUT / CONTACT: trim the big stacked gaps ── */
.about-g         { gap:1.4rem !important; }
.contact-g       { gap:1.4rem !important; }
.form-card       { padding:1rem !important; }
.fg              { margin-bottom:.6rem !important; }

/* ── FOOTER ── */
footer           { padding:1.6rem .9rem .9rem !important; }
.foot-g          { gap:1.1rem !important; }

/* ── Generic: drop oversized vertical rhythm a touch ── */
.kicker          { margin-bottom:.5rem !important; }

/* ═══════════════════════════════════════════════════════════════════
   HORIZONTAL CARD CAROUSELS (phone only)
   Commodity cards (.cg) and deal cards (.deals-grid) slide sideways
   instead of stacking down the page. A peek of the next card hints
   that the row is swipeable. Snap makes each swipe land cleanly.
═══════════════════════════════════════════════════════════════════ */
.cg,
.deals-grid {
  display:flex !important;
  grid-template-columns:none !important;   /* cancel the grid layout */
  flex-wrap:nowrap !important;
  overflow-x:auto !important;
  overflow-y:visible !important;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  gap:11px !important;
  padding:2px 2px 12px !important;          /* room for card shadow + scroll */
  scroll-padding-left:2px;
}
/* hide the scrollbar but keep scrolling */
.cg::-webkit-scrollbar,
.deals-grid::-webkit-scrollbar { display:none; }
.cg, .deals-grid { scrollbar-width:none; }

/* each card: fixed width, snaps to start, doesn't shrink */
.cg > .cc {
  flex:0 0 62% !important;
  scroll-snap-align:start;
}
.deals-grid > .deal-card {
  flex:0 0 82% !important;
  scroll-snap-align:start;
}

/* small phones: show a touch more of the next card */
@media (max-width:380px){
  .cg > .cc        { flex-basis:70% !important; }
  .deals-grid > .deal-card { flex-basis:86% !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   COUNTRY TABS + CATEGORY TABS — horizontal scroll on mobile
   Prevents overflow on Kenya/Tanzania/Rwanda/DRC tabs
═══════════════════════════════════════════════════════════════════ */

/* Country row — wraps so all 6 countries are always visible & tappable */
.country-row {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  padding-bottom: 6px !important;
  margin-bottom: 8px !important;
}
.cn-tab {
  flex: 0 0 auto !important;
  font-size: .74rem !important;
  padding: 9px 13px !important;
  min-height: 38px !important;
}

/* Category tabs — scrollable strip */
.cat-tabs {
  display: flex !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  gap: 5px !important;
  padding-bottom: 6px !important;
  scrollbar-width: none !important;
}
.cat-tabs::-webkit-scrollbar { display: none !important; }
.ct {
  flex-shrink: 0 !important;
  font-size: .7rem !important;
  padding: 5px 11px !important;
  white-space: nowrap !important;
}

/* Card grid — 2 compact columns on mid-size phones, 1 on tiny */
.cg {
  grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)) !important;
  gap: 8px !important;
  padding: 1px !important;
}

/* Shrink card images more aggressively */
.cc-img  { height: 78px !important; }
.cc-name { font-size: .74rem !important; }
.cc-body { padding: .5rem .55rem !important; }

/* Commodity section padding */
#commodities .sec-inner,
.comm-wrap { padding-left: .75rem !important; padding-right: .75rem !important; }