/* ═══════════════════════════════════════════════
   MARKETS SECTION — Redesigned
   ─────────────────────────────────────────────
   Larger cards, bigger population numbers,
   smaller flag emoji, stronger grid.
   ═══════════════════════════════════════════════ */
#markets {
  background: var(--green);
  padding: 5.5rem;
  position: relative; overflow: hidden;
}

/* Africa watermark */
#markets::before {
  content: '';
  position: absolute; right: -8%; top: 50%;
  transform: translateY(-50%);
  width: 50%; height: 110%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 500'%3E%3Cpath d='M200 20 C240 15 290 30 320 60 C350 90 360 130 355 170 C380 185 390 210 385 240 C375 270 350 280 340 300 C360 325 365 360 350 390 C330 420 300 440 270 455 C240 470 200 480 175 470 C150 460 130 440 115 415 C95 385 90 350 100 320 C85 300 65 275 60 245 C55 215 65 185 85 165 C75 140 70 110 85 85 C105 55 155 25 200 20Z' fill='none' stroke='%23C4A84A' stroke-width='1' opacity='0.18'/%3E%3C/svg%3E") no-repeat center / contain;
  pointer-events: none;
}

#markets .section-title { color: var(--white); }
#markets .section-eyebrow { color: var(--gold); }

.markets-header {
  display: flex; justify-content: space-between; align-items: flex-end;
  margin-bottom: 3.5rem;
}
.markets-desc {
  font-size: 0.95rem; font-weight: 300;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.8; max-width: 360px;
}

.markets-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1.5px;
  background: rgba(255, 255, 255, 0.08);
  position: relative; z-index: 1;
}

.market-card {
  background: rgba(255, 255, 255, 0.03);
  padding: 2.8rem 2.2rem;
  min-height: 240px;              /* was missing — cards now taller */
  transition: background 0.4s;
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; justify-content: space-between;
}
.market-card::before {
  content: '';
  position: absolute; top: 0; left: 0;
  width: 2px; height: 0;
  background: var(--gold);
  transition: height 0.5s var(--ease);
}
.market-card:hover::before { height: 100%; }
.market-card:hover { background: rgba(255, 255, 255, 0.08); }

.market-flag {
  font-size: 1.4rem;              /* reduced from 1.8rem */
  margin-bottom: 1rem; display: block;
}
.market-name {
  font-family: var(--font-display); font-size: 1.4rem; font-weight: 600;
  color: var(--white); margin-bottom: 0.25rem;
  letter-spacing: 0.02em;
}
.market-city {
  font-size: 0.68rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 1.4rem;
}
.market-pop {
  font-family: var(--font-display); font-size: 2.6rem; font-weight: 300; /* larger */
  color: rgba(255, 255, 255, 0.92); line-height: 1; margin-bottom: 0.25rem;
}
.market-pop-label {
  font-size: 0.6rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(255,255,255,0.3); margin-bottom: 0.8rem; display: block;
}
.market-tag {
  font-size: 0.78rem; font-weight: 300;
  color: rgba(255, 255, 255, 0.4); line-height: 1.5;
}


/* ═══════════════════════════════════════════════
   PRODUCTS SECTION
   ═══════════════════════════════════════════════ */
#products { background: var(--cream); padding: 5.5rem; }

.products-list {
  margin-top: 4rem;
  display: flex; flex-direction: column;
  border-top: 1px solid var(--gray3);
}

.product-row {
  display: grid;
  grid-template-columns: 2.5rem 1fr 1fr auto auto;
  gap: 3rem; align-items: center;
  padding: 2.5rem 0;
  border-bottom: 1px solid var(--gray3);
  transition: padding 0.3s, background 0.3s;
  cursor: default;
}
.product-row:hover { padding-left: 1.5rem; padding-right: 1.5rem; background: rgba(196,168,74,0.04); }
.product-row:hover .product-name  { color: var(--green); }
.product-row:hover .product-arrow { opacity: 1; transform: translateX(0); }

.product-num  { font-family: var(--font-display); font-size: 0.75rem; color: var(--gray3); font-weight: 300; }
.product-name {
  font-family: var(--font-display); font-size: 1.35rem; font-weight: 400;
  color: var(--black); transition: color 0.3s;
  display: flex; align-items: center; gap: 1rem;
}
.product-detail { font-size: 0.82rem; font-weight: 300; color: var(--gray2); line-height: 1.55; }
.product-tag {
  font-size: 0.72rem; letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--gold); border: 1px solid rgba(196, 168, 74, 0.4);
  padding: 0.4rem 1rem; white-space: nowrap;
  background: rgba(196,168,74,0.06);
}
.product-arrow {
  font-size: 0.9rem; color: var(--gold);
  opacity: 0; transform: translateX(-8px);
  transition: opacity 0.3s, transform 0.3s var(--ease);
}

/* ═══════════════════════════════════════════════
   PRODUCT MODAL (POPUP)
   ═══════════════════════════════════════════════ */
.modal-overlay {
  position: fixed;
  top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(12, 18, 14, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden;
  transition: opacity 0.3s var(--ease), visibility 0.3s;
}
.modal-overlay[aria-hidden="false"] { opacity: 1; visibility: visible; }
.modal-content {
  background: var(--green-dk);
  border: 1px solid rgba(196, 168, 74, 0.2);
  padding: 3rem; max-width: 520px; width: 90%; border-radius: 4px;
  position: relative; transform: translateY(20px);
  transition: transform 0.4s var(--ease);
  box-shadow: 0 20px 60px rgba(0,0,0,0.6);
}
.modal-overlay[aria-hidden="false"] .modal-content { transform: translateY(0); }
.modal-close {
  position: absolute; top: 1rem; right: 1.5rem;
  background: none; border: none; color: var(--gold);
  font-size: 2.5rem; cursor: pointer; line-height: 1; opacity: 0.7;
  transition: opacity 0.2s; padding: 0;
}
.modal-close:hover { opacity: 1; }
#modal-title {
  color: var(--gold); font-family: var(--font-display);
  font-size: 1.8rem; margin-bottom: 1rem; margin-top: 0; font-weight: 500;
}
#modal-desc {
  color: rgba(255, 255, 255, 0.75); line-height: 1.7; font-size: 1rem; margin: 0;
}