/* ═══════════════════════════════════════════════════════════════
   EMBED MODE — locator-embed.html only.
   The widget fills the iframe: the controls bar and the bottom
   credit stay put, the list scrolls inside its own column, and the
   map holds the remaining height. Nothing here touches the main
   site, which never carries body.loc-embed.
   ═══════════════════════════════════════════════════════════════ */
html, body.loc-embed { height: 100%; }

body.loc-embed {
    margin: 0;
    overflow: hidden;                  /* the list scrolls, not the iframe */
    background: var(--cream);
    -webkit-text-size-adjust: 100%;
}

body.loc-embed .locator {
    display: flex; flex-direction: column;
    height: 100%;
    --nav-h: 0px;
}

/* No fixed nav above it in an iframe, so the bar is simply the top row. */
body.loc-embed .loc-controls {
    position: static; flex: 0 0 auto;
    padding: 14px 18px;
    backdrop-filter: none; background: var(--white);
}

body.loc-embed .loc-body {
    flex: 1 1 auto; min-height: 0;     /* min-height:0 lets the grid shrink */
    /* The site version centres itself with margin:0 auto; as a flex item that
       auto margin wins over stretch and collapses the map column to zero. */
    margin: 0; width: 100%; max-width: none;
    align-items: stretch;
    border-left: none; border-right: none;
    grid-template-columns: 400px 1fr;
}

body.loc-embed .loc-list {
    height: 100%; overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;      /* stops scroll chaining to the host page */
}

body.loc-embed .loc-map-wrap {
    position: static; top: auto;
    height: 100%; min-height: 0;
}

/* Bottom credit strip */
body.loc-embed .loc-embed-bar {
    flex: 0 0 auto;
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 10px 18px;
    background: var(--white);
    border-top: 1px solid var(--cream-dark);
}
body.loc-embed .leb-note {
    font-size: 0.64rem; font-weight: 300; line-height: 1.6; color: var(--text-gray);
}
body.loc-embed .leb-link {
    flex: 0 0 auto;
    font-size: 0.6rem; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase;
    color: var(--text-dark); text-decoration: none;
    border-bottom: 1.5px solid var(--red); padding-bottom: 2px;
    transition: color 0.2s;
}
body.loc-embed .leb-link:hover { color: var(--red); }

@media (max-width: 1100px) {
    body.loc-embed .loc-body { grid-template-columns: 340px 1fr; }
}

/* Under 900px the site CSS switches to the List / Map tabs; both panes
   then take the full remaining height rather than a viewport fraction. */
@media (max-width: 900px) {
    body.loc-embed .loc-body { grid-template-columns: 1fr; }
    body.loc-embed .loc-map-wrap { height: 100%; min-height: 0; order: 0; }
    body.loc-embed .loc-controls { padding: 12px 14px; }
    /* Vertical room is scarce in an iframe: the state filter and Near Me
       share one row instead of taking a full row each. */
    body.loc-embed .loc-select-wrap,
    body.loc-embed .loc-near { flex: 1 1 calc(50% - 5px); min-width: 0; }
    body.loc-embed .loc-select-wrap select,
    body.loc-embed .loc-near { padding: 13px 14px; }
    body.loc-embed .loc-select-wrap select { padding-right: 34px; letter-spacing: 1px; }
    body.loc-embed .loc-near { letter-spacing: 1.4px; gap: 7px; }
    body.loc-embed .loc-count { margin-top: 2px; }
    body.loc-embed .loc-tabs button { padding: 10px 0; }
    body.loc-embed .loc-embed-bar { padding: 9px 14px; }
    body.loc-embed .leb-note { display: none; }
    body.loc-embed .leb-link { font-size: 0.58rem; }
}

/* ── Right Grotesk for the store list and map popup ──────────────
   Right Grotesk has only one regular-width cut (Medium), so it covers every
   weight (the range stops the browser faux-bolding it). */
@font-face {
    font-family: 'Right Grotesk';
    src: url('/fonts/RightGrotesk-Medium.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}
body.loc-embed .loc-list,
body.loc-embed .leaflet-popup {
    --font-sans: 'Right Grotesk', 'Helvetica Neue', Arial, sans-serif;
    --font-serif: var(--font-sans);
    font-family: var(--font-sans);
}