:root{
    /* Froots-ish palette (tune as needed) */
    --fr-bg: #FCF8EF;
    --fr-ink: #2B2B2B;
    --fr-card: #ffffff;
    --fr-line: rgba(0,0,0,0.08);

    --fr-ackee-red: #B34100;
    --fr-ackee-leaf: #ABB93D;

    /* Dynamic measurements set by JS */
    --nav-h: 64px;
    --map-panel-h: 280px;

    /* Layout sizing */
    --wrap-max: 1400px;
    --gap: 24px;
  }

  *{ box-sizing: border-box; }

  /* HARD GUARD: prevent ANY horizontal page scroll */
  html, body{
    max-width: 100%;
    <!--overflow-x: hidden;-->
  }

  body{
    margin: 0;
    font-family: "News Cycle", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    color: var(--fr-ink);
    background: var(--fr-bg);
  }

  /* =========================
     BLOCK #1: LOGO / MASTHEAD
     ========================= */
  header.masthead{
    background: #fff;
    border-bottom: 1px solid var(--fr-line);
  }
  .masthead-inner{
    max-width: var(--wrap-max);
    margin: 0 auto;
    padding: 10px 16px;
    display: flex;
    align-items: center;
    gap: 16px;
  }
  .logo-ackee{
    height: 95px;
    width: auto;
    display: block;
  }

  /* =========================
     BLOCK #2: NAVBAR (Froots)
     ========================= */
  #my-sticky-navbar{
    position: sticky;
    top: 0;
    z-index: 5000;
    background: #fff;
    border-bottom: 2px solid var(--fr-ackee-leaf);
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
  }

  /* =========================
     PAGE WRAPPER
     ========================= */
  .page-wrap{
    max-width: var(--wrap-max);
    margin: 0 auto;
    padding: 18px 16px 30px;
  }

  /* =========================
     INTRO / CARDS
     ========================= */
  .intro-card,
  .table-card,
  .map-card,
  .below-card{
    background: var(--fr-card);
    border: 1px solid var(--fr-line);
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.06);
  }

  .intro-card{
    padding: 18px 18px 14px;
    margin-bottom: 18px;
  }
  .intro-card h1{
    margin: 0 0 8px 0;
    font-size: 28px;
    line-height: 1.2;
  }
  .intro-card p{
    margin: 8px 0;
    line-height: 1.7;
    font-size: 17px;
  }
  .intro-links{
    margin: 10px 0 6px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px 12px;
    align-items: center;
  }
  .intro-links a{
    text-decoration: none;
    color: var(--fr-ackee-red);
    font-weight: 700;
  }
  .promo-strip{
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--fr-line);
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .ad-slot{
    background: #fff;
    border: 1px dashed rgba(0,0,0,0.15);
    border-radius: 10px;
    padding: 14px;
    text-align: center;
    color: rgba(0,0,0,0.55);
    font-size: 14px;
  }

  /* =========================
     FILTER (INSIDE TABLE HEAD)
     ========================= */
  .table-filter{
    min-width: 240px;
    flex: 0 1 420px;
  }
  #mountainSearch.form-control{
    width: 100%;
    max-width: 420px;
    border-radius: 999px;
    padding: 12px 16px;
    font-size: 17px;
    border: 1px solid rgba(0,0,0,0.22);
  }

  /* =========================
     TABLE + MAP LAYOUT
     ========================= */
  .interactive-wrap{
    display: grid;
    gap: var(--gap);
    align-items: start;
  }

  /* CRITICAL: prevent grid child overflow from widening the viewport */
  .table-side,
  .map-sidebar{
    min-width: 0;
  }

  @media (min-width: 992px){
    .interactive-wrap{
      grid-template-columns: minmax(0, 1fr) 420px;
    }
    .map-sidebar{
      position: sticky;
      top: calc(var(--nav-h) + 14px);
    }
  }

  /* =========================
     TABLE: CARD + HEADER
     ========================= */
  .table-card{ overflow: hidden; }

  .table-card-head{
    padding: 12px 14px;
    border-bottom: 1px solid var(--fr-line);
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    align-items: center;
    justify-content: space-between;
    background: #fff;
  }

  .table-tip{
    font-size: 13px;
    color: rgba(0,0,0,0.62);
    margin: 0;
  }

  /* =========================
     TABLE: RESPONSIVE SCROLL
     ========================= */

  /* The WRAPPER scrolls (not the page) */
  .table-responsive{
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
  }

  /* Allow the table to be its natural width INSIDE the scroller */
  .table-responsive > table{
    width: max-content;
    min-width: 100%;
  }

  /* Kill any legacy "min-width" rules that force page overflow */
  .table,
  .mountain-table{
    max-width: 100%;
    margin: 0;
  }

  /* =========================
     MOUNTAIN TABLE (SCOPED LOOK)
     ========================= */
  table.mountain-table{
    border-collapse: collapse;
  }

  table.mountain-table thead th{
    background: #2B2B2B;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    font-size: 13px;
    cursor: pointer;
    user-select: none;
    border-bottom: 0;
    white-space: nowrap;
  }
  table.mountain-table thead th:hover{
    background: var(--fr-ackee-red);
  }

  table.mountain-table td{
    white-space: nowrap; /* keeps columns tight; scroller handles overflow */
  }

  table.mountain-table.table-hover tbody tr:hover td{
    background: #F4F6E4;
  }

  /* =========================
     MAP CARD
     ========================= */
  .map-card{ overflow: hidden; }

  .map-card-head{
    padding: 12px 14px;
    border-bottom: 1px solid var(--fr-line);
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: space-between;
    background: #fff;
  }

  .map-title{
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--fr-ackee-red);
    display: flex;
    align-items: center;
    gap: 8px;
  }

  #target-title{ font-weight: 700; }

  .map-body{ padding: 12px; }

  #map{
    width: 100%;
    height: 450px;
    border-radius: 8px;
    background: #e5e3df;
  }

  /* =========================
     MOBILE FIXED MAP PANEL
     ========================= */
  @media (max-width: 991px){
    .interactive-wrap{ grid-template-columns: 1fr; }

    .page-wrap{
      padding-bottom: calc(var(--map-panel-h) + 18px);
    }

    .map-sidebar{
      position: fixed;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 6000;
      padding: 10px 10px 12px;
      background: rgba(255,255,255,0.96);
      backdrop-filter: blur(6px);
      box-shadow: 0 -8px 18px rgba(0,0,0,0.18);
    }

    .map-card{
      max-width: var(--wrap-max);
      margin: 0 auto;
    }

    #map{ height: 230px; }
  }

  /* =========================
     BELOW + FOOTER (kept minimal)
     ========================= */
  .below-card{
    margin-top: 18px;
    padding: 16px;
  }
  .below-card h2{
    margin: 0 0 8px;
    font-size: 20px;
  }
  .below-card p{
    margin: 8px 0;
    line-height: 1.7;
    font-size: 16px;
  }

  #footer-wrapper{
    background: #fff;
    border-top: 1px solid var(--fr-line);
    margin-top: 26px;
    padding: 14px 16px;
    text-align: center;
  }
  #footer-wrapper h5{
    margin: 6px 0 0;
    font-weight: 700;
    color: rgba(0,0,0,0.75);
  }
  .footer-ackee{
    width: 40px;
    height: auto;
    vertical-align: middle;
  }
  /* ===== Mobile map: reduce side padding so the map uses more width ===== */
@media (max-width: 991px){

  /* The fixed bottom tray */
  .map-sidebar{
    padding: 6px;                 /* was 10px 10px 12px */
  }

  /* Let the card truly fill the tray */
  .map-card{
    width: 100%;
    max-width: none;              /* overrides max-width: var(--wrap-max) */
    margin: 0;
  }

  /* Reduce inner padding that shrinks the map */
  .map-body{
    padding: 6px;                 /* was 12px */
  }

  /* Optional: tighten header padding slightly */
  .map-card-head{
    padding: 10px 10px;           /* was 12px 14px */
  }

  /* Optional: if you want a slightly larger map without changing layout */
  /* #map{ height: 240px; } */
}

@media (max-width: 991px){

  .map-sidebar{
    padding: 0 !important;
  }

  /* Froots .card often has padding — kill it for the map panel */
  .map-card.card{
    padding: 0 !important;
    width: 100%;
    max-width: none !important;
    margin: 0 !important;
  }

  /* Put padding only where you actually want it (the header) */
  .map-card-head{
    padding: 10px 12px !important;  /* use real padding instead of 0 */
  }

  .map-body{
    padding: 0 !important;
  }

  /* Optional: if you want the map to “touch” the card edges */
  #map{
    border-radius: 0;               /* or keep 8px if you like the rounding */
  }
}