@import url('https://fonts.googleapis.com/css2?family=Rethink+Sans:wght@400;500;700;800&display=swap');

/* Let the map page sit flush (no wrapper margin) so it can fill a single screen.
   The `body` + `.elementor` qualifiers out-rank Elementor's per-page rule
   (.elementor-<id>, specificity 0,2,0) which otherwise sets a top margin. */
body [data-elementor-type="wp-page"].elementor { margin: 0 !important; }

/* Map fills the whole screen: drop the Elementor column/widget padding around it. */
.elementor-widget-wrap.elementor-element-populated:has(.vendon-map),
.elementor-widget:has(.vendon-map) > .elementor-widget-container { padding: 0 !important; margin: 0 !important; }

.vendon-map {
    --vm-bg: #dadeeb;
    --vm-green: #007042;
    --vm-blue: #016bd7;
    --vm-navy: #082273;
    --vm-ink: #0b1f2a;
    --vm-muted: #617479;
    --vm-border: #e1e5ee;
    --vm-panel-bg: #ffffff;

    /* Proportional large-screen scale. 1 at/below the 1920x1080 design baseline
       (so normal screens are untouched); JS (updateScale) raises it up to ~1.8 on
       4K. Every fixed size below is multiplied by it, and every clamp() ceiling is
       multiplied by it, so the whole UI grows together on big displays. */
    --vm-scale: 1;

    --vm-radius: calc(20px * var(--vm-scale));
    --vm-min-height: 100vh;
    /* Gap between the map column and the zone menu (reused by .vm-main + .vm-map). */
    --vm-gap: clamp(20px, 2.5vw, calc(40px * var(--vm-scale)));
    /* Fluid so the two-column layout scales down on tablet landscape (~1024–1366px),
       and (via the scaled ceiling) up on 4K. */
    --vm-sidebar-w: clamp(300px, 28vw, calc(432px * var(--vm-scale)));

    --vm-inset-x: clamp(20px, 3vw, calc(48px * var(--vm-scale)));
    --vm-inset-y: clamp(20px, 3vh, calc(40px * var(--vm-scale)));

    font-family: 'Rethink Sans', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    color: var(--vm-ink);
    background: var(--vm-bg);
    box-sizing: border-box;
    position: relative;
    /* Force full-viewport height from CSS (literal vh, NOT the --vm-min-height var the
       Elementor "Min Height" control writes), so the map is full-screen on every
       environment regardless of the per-page DB setting. The control becomes cosmetic.
       100dvh tracks mobile browser chrome where supported. The ≤860px query relaxes this. */
    height: 100vh;
    height: 100dvh;
    min-height: 100vh;
    min-height: 100dvh;
    max-height: 100vh;
    max-height: 100dvh;
    overflow: hidden;
}

.vendon-map *,
.vendon-map *::before,
.vendon-map *::after { box-sizing: border-box; }

/* Neutralise theme/Elementor global <button> styling that would otherwise
   bleed into the pills and back button (background, shadow, transforms). */
.vendon-map button {
    margin: 0;
    text-transform: none;
    box-shadow: none;
    -webkit-appearance: none;
    appearance: none;
}

.vendon-map .vm-loading,
.vendon-map .vm-error {
    margin: auto;
    color: var(--vm-muted);
    font-size: calc(18px * var(--vm-scale));
}

/* ---------------- Overlay column (title / dashboard / logo over the map) ---------------- */
.vm-main {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    /* leave room for the zone menu on the right */
    padding: var(--vm-inset-y) calc(var(--vm-sidebar-w) + var(--vm-inset-x) + var(--vm-gap)) var(--vm-inset-y) var(--vm-inset-x);
    padding-top: 4px;
    pointer-events: none; /* let the map behind receive clicks in empty areas */
}
.vm-main > * { pointer-events: auto; }

/* Vendon logo, bottom-left, in front of the map */
.vm-brand {
    align-self: flex-start;
    margin-top: auto;
    height: calc(32px * var(--vm-scale));
    width: auto;
    object-fit: contain;
}

.vm-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: calc(24px * var(--vm-scale));
    margin-bottom: calc(8px * var(--vm-scale));
    pointer-events: none; /* title is non-interactive; back button re-enables below */
}
.vm-header .vm-back { pointer-events: auto; }

/* Title selectors are scoped under .vendon-map AND qualified with the h2/span tag so
   they out-specify theme heading rules (e.g. `.elementor-widget-container h2`) that
   would otherwise tint the title — this is why the title showed green on production. */
.vendon-map h2.vm-title {
    margin: 0;
    font-weight: 700;
    line-height: 1.02;
    font-size: calc(50px * var(--vm-scale));
    color: #000;
}
/* #9-12: region name (abbreviation) + value at one uniform font size. */
.vendon-map .vm-title__label,
.vendon-map .vm-title__value {
    display: block;
    font-weight: 700;
    font-size: clamp(22px, 2.6vw, calc(34px * var(--vm-scale)));
    color: #000;
}
/* Country header: name on top, descriptive line below */
.vendon-map .vm-title__name {
    display: block;
    font-weight: 700;
    font-size: clamp(28px, 4vw, calc(56px * var(--vm-scale)));
    line-height: 1.05;
    color: #000;
}
.vendon-map .vm-title__sub {
    display: block;
    margin-top: calc(6px * var(--vm-scale));
    font-weight: 500;
    font-size: clamp(16px, 1.6vw, calc(20px * var(--vm-scale)));
    color: var(--vm-muted);
}

/* ---------------- Zone / Global KPI overlay card (comments 3-7) ---------------- */
.vm-kpis {
    position: relative;
    margin-top: 0;                    /* the "i" button sits top-left, under the title */
    align-self: flex-start;
    margin-bottom: calc(12px * var(--vm-scale));
}
/* "i" info button — always visible; toggles the KPI bubble. */
.vm-kpi-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(40px * var(--vm-scale));
    height: calc(40px * var(--vm-scale));
    padding: 0;
    border-radius: 50%;
    border: 2px solid var(--vm-green) !important;
    background: #fff !important;
    color: var(--vm-green) !important;
    font: 700 calc(20px * var(--vm-scale))/1 Georgia, 'Times New Roman', serif;
    text-align: center;
    cursor: pointer;
    box-shadow: 0 calc(4px * var(--vm-scale)) calc(14px * var(--vm-scale)) rgba(11, 31, 42, 0.18) !important;
}
.vm-kpi-toggle:hover { background: var(--vm-green) !important; border-color: var(--vm-green) !important; color: #fff !important; }
/* KPI card — hidden by default; pops up above the button when open. */
/* KPI card — hidden by default; opens below the "i" button as a grey modal. */
.vm-kpi {
    display: none;
    position: absolute;
    left: 0;
    top: calc(100% + 10px * var(--vm-scale));
    width: max-content;
    max-width: min(86vw, calc(760px * var(--vm-scale)));
    flex-direction: column;
    gap: calc(16px * var(--vm-scale));
    background: #f1f1f4;
    border: 1px solid var(--vm-border);
    border-radius: var(--vm-radius);
    padding: calc(22px * var(--vm-scale)) calc(24px * var(--vm-scale));
    box-shadow: 0 calc(8px * var(--vm-scale)) calc(28px * var(--vm-scale)) rgba(11, 31, 42, 0.10);
    color: #0b1f2a;
}
.vm-kpis--open .vm-kpi { display: flex; }

/* Total — full-width centred header (number bold). */
.vm-kpi__total { text-align: center; line-height: 1.15; }
.vm-kpi__total-num,
.vm-kpi__total-label {
    font-size: clamp(22px, 2.2vw, calc(28px * var(--vm-scale)));
    color: #000;
}
.vm-kpi__total-num { font-weight: 700; }
.vm-kpi__total-label { font-weight: 400; }

/* Middle — three nested cards. */
.vm-kpi__cols {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: calc(12px * var(--vm-scale));
}
.vm-kpi__card {
    flex: 1 1 calc(160px * var(--vm-scale));
    min-width: calc(150px * var(--vm-scale));
    display: flex;
    flex-direction: column;
    background: #e7e7ed;
    border-radius: calc(16px * var(--vm-scale));
    padding: calc(16px * var(--vm-scale)) calc(18px * var(--vm-scale));
}

/* Averages — label + big number. */
.vendon-map p.vm-kpi__avg-label {
    margin: 0;
    font-size: calc(14px * var(--vm-scale));
    font-weight: 500;
    line-height: 1.25;
    color: #0b1f2a;
}
.vendon-map p.vm-kpi__avg-num {
    margin: calc(2px * var(--vm-scale)) 0 calc(12px * var(--vm-scale));
    font-size: calc(22px * var(--vm-scale));
    font-weight: 700;
    line-height: 1;
    color: #000;
}
.vendon-map p.vm-kpi__avg-num:last-child { margin-bottom: 0; }

/* Channels / Beverages cards. */
.vendon-map h4.vm-kpi__group-title {
    margin: 0 0 calc(8px * var(--vm-scale));
    font-size: calc(15px * var(--vm-scale));
    line-height: 1.1;
    font-weight: 700;
    color: #000;
}
.vm-kpi__list { margin: 0; padding: 0; list-style: none; }
.vm-kpi__item {
    font-size: calc(15px * var(--vm-scale));
    line-height: 1.7;
    color: #0b1f2a;
}
.vm-kpi__item b { font-weight: 700; }

/* Machines — full-width centred footer (number bold). */
.vendon-map p.vm-kpi__machines {
    margin: 0;
    text-align: center;
    font-size: calc(15px * var(--vm-scale));
    font-weight: 500;
    line-height: 1.4;
}
.vendon-map p.vm-kpi__machines b { font-weight: 700; }

@media (max-width: 860px) {
    .vm-kpi { max-width: 92vw; }
}
/* 861–1600px: shrink the KPI modal so it covers less of the (narrower) map. */
@media (min-width: 861px) and (max-width: 1600px) {
    .vm-kpi {
        max-width: calc(610px * var(--vm-scale));
        padding: calc(16px * var(--vm-scale)) calc(18px * var(--vm-scale));
        gap: calc(12px * var(--vm-scale));
    }
    .vm-kpi__card { min-width: calc(130px * var(--vm-scale)); padding: calc(12px * var(--vm-scale)) calc(14px * var(--vm-scale)); }
    .vm-kpi__total-num,
    .vm-kpi__total-label { font-size: calc(22px * var(--vm-scale)); }
    .vendon-map p.vm-kpi__avg-num { font-size: calc(19px * var(--vm-scale)); }
    .vendon-map p.vm-kpi__avg-label,
    .vendon-map p.vm-kpi__machines,
    .vm-kpi__item { font-size: calc(13px * var(--vm-scale)); }
    .vendon-map h4.vm-kpi__group-title { font-size: calc(13px * var(--vm-scale)); }
}

.vendon-map .vm-back {
    flex: 0 0 auto;
    border: 2px solid var(--vm-ink) !important;
    background: #fff !important;
    color: var(--vm-ink) !important;
    font: inherit;
    font-weight: 500;
    font-size: calc(16px * var(--vm-scale));
    padding: calc(10px * var(--vm-scale)) calc(22px * var(--vm-scale));
    border-radius: 999px;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}
.vendon-map .vm-back:hover { background: var(--vm-ink) !important; color: #fff !important; }

/* ---------------- Map (full-screen background) ---------------- */
.vm-map {
    position: absolute;
    z-index: 0;
    top: 0;
    left: 0;
    /* Size with width/height (NOT right/bottom): jsVectorMap adds a `.jvm-container`
       class that forces width:100%/height:100%, which would over-constrain absolute
       insets and make `right`/`bottom` get dropped — the map would then fill the full
       width and slip under the zone menu. Explicit width/height override .jvm-container
       (same specificity, later in the cascade) so the whole world stays clear of the
       menu. The width reserves the menu column on the right. */
    width: calc(100% - (var(--vm-sidebar-w) + var(--vm-inset-x) + var(--vm-gap)));
    height: calc(100% - clamp(24px, 6vh, calc(72px * var(--vm-scale))));
}
.vm-map svg { width: 100%; height: 100%; }
.vm-map[hidden] { display: none; }

/* Tooltip card on markers — strip the jsVectorMap wrapper chrome so only .vm-tip shows. */
.jvm-tooltip {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
}
/* NOTE: jsVectorMap appends .jvm-tooltip to <body>, OUTSIDE .vendon-map, so the
   --vm-scale custom property isn't inherited here — every calc() below uses the
   `, 1` fallback or it would be invalid (dropped), collapsing the card. */
.vm-tip {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: calc(8px * var(--vm-scale, 1));
    background: #fff;
    border: 0;
    border-radius: calc(8px * var(--vm-scale, 1));
    padding: calc(8px * var(--vm-scale, 1)) calc(12px * var(--vm-scale, 1));
    line-height: 1;
    box-shadow: 0 19px 19px rgba(0,0,0,.09), 0 5px 11px rgba(0,0,0,.1);
    white-space: nowrap;
}
.vm-tip__label { display: block; font-size: calc(18px * var(--vm-scale, 1)); font-weight: 500; color: #000; }
.vm-tip__value { display: block; font-size: calc(18px * var(--vm-scale, 1)); font-weight: 700; color: #000; }

/* Zone markers (the 4 ellipses) are clickable. */
.vm-map .jvm-element circle { cursor: pointer; }

/* Eased zoom: jsVectorMap sets the zoom as a `transform` on #jvm-regions-group in one
   shot (focusRegion uses animate:false), and this transition smoothly eases it. */
.vm-map #jvm-regions-group { transition: transform .6s ease; }

/* ---------------- Dashboard ---------------- */
.vm-dashboard {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: calc(20px * var(--vm-scale));
    padding-right: 4px;
}

.vm-panel {
    background: var(--vm-panel-bg);
    border-radius: var(--vm-radius);
    padding: clamp(18px, 2vw, calc(24px * var(--vm-scale))) clamp(20px, 2.2vw, calc(28px * var(--vm-scale)));
    box-shadow: 0 8px 24px rgba(11,31,42,.05);
}
.vendon-map h3.vm-section-title { margin: 4px 0 -4px; font-size: clamp(20px, 2vw, calc(24px * var(--vm-scale))); font-weight: 700; color: var(--vm-ink); }
.vendon-map h3.vm-panel__headline { margin: 0; font-size: clamp(20px, 2vw, calc(24px * var(--vm-scale))); font-weight: 700; color: var(--vm-ink); }
.vendon-map p.vm-panel__subtitle { margin: 4px 0 0; font-size: calc(16px * var(--vm-scale)); color: var(--vm-muted); }
.vm-chart { position: relative; height: clamp(160px, 20vw, calc(220px * var(--vm-scale))); margin-top: calc(16px * var(--vm-scale)); }

/* Throughput colour strip — red→green scale under the chart, one segment per bucket.
   margin-left/width are set inline by map.js so segments line up with the chart columns. */
.vm-throughput-scale {
    display: flex;
    margin-top: calc(10px * var(--vm-scale));
    border-radius: 999px;
    overflow: hidden;
}
.vm-throughput-scale__seg {
    flex: 1 1 0;
    min-width: 0;
    min-height: calc(16px * var(--vm-scale));
}

/* Custom legend under the colour strip — small dots, labels vertically centred. */
.vm-chart-legend {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: calc(20px * var(--vm-scale));
    margin-top: calc(12px * var(--vm-scale));
}
.vm-chart-legend__item {
    display: inline-flex;
    align-items: center;
    gap: calc(6px * var(--vm-scale));
    line-height: 1;
}
.vm-chart-legend__dot {
    flex: none;
    width: calc(8px * var(--vm-scale));
    height: calc(8px * var(--vm-scale));
    border-radius: 50%;
}
.vm-chart-legend__label {
    font-size: calc(12px * var(--vm-scale));
    color: var(--vm-ink);
}

/* Channels — Figma 46:13217: white card, header, 3 columns */
.vm-channels {
    background: var(--vm-panel-bg);
    border-radius: var(--vm-radius);
    padding: clamp(24px, 2.6vw, calc(40px * var(--vm-scale)));
    box-shadow: 0 8px 24px rgba(11,31,42,.05);
    display: flex;
    flex-direction: column;
    gap: clamp(20px, 2.4vw, calc(40px * var(--vm-scale)));
}
.vm-channels__head { display: flex; flex-direction: column; gap: calc(12px * var(--vm-scale)); }
.vm-channels__title { margin: 0; font-size: clamp(22px, 2.4vw, calc(32px * var(--vm-scale))); font-weight: 700; color: #000; line-height: 1.05; }
.vendon-map p.vm-channels__subtitle { margin: 0; font-size: clamp(16px, 1.6vw, calc(20px * var(--vm-scale))); font-weight: 500; color: var(--vm-muted); }
.vm-channels__list { display: flex; gap: clamp(20px, 2.5vw, calc(32px * var(--vm-scale))); }
.vm-channel { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: calc(12px * var(--vm-scale)); }
.vendon-map h4.vm-channel__name { margin: 0; font-size: clamp(20px, 2vw, calc(28px * var(--vm-scale))); font-weight: 700; color: #000; line-height: 1.05; }
.vendon-map p.vm-channel__line { margin: 0; font-size: clamp(16px, 1.6vw, calc(20px * var(--vm-scale))); font-weight: 500; color: var(--vm-ink); line-height: 1.2; }

/* Top beverages — Figma 103:360: white card, header, 3 ranked rows */
.vm-products {
    background: var(--vm-panel-bg);
    border-radius: var(--vm-radius);
    padding: clamp(24px, 2.6vw, calc(40px * var(--vm-scale)));
    box-shadow: 0 8px 24px rgba(11,31,42,.05);
    display: flex;
    flex-direction: column;
    gap: clamp(20px, 2.4vw, calc(40px * var(--vm-scale)));
}
.vm-products__head { display: flex; flex-direction: column; gap: calc(12px * var(--vm-scale)); }
.vm-products__title { margin: 0; font-size: clamp(22px, 2.4vw, calc(32px * var(--vm-scale))); font-weight: 700; color: #000; line-height: 1.05; }
.vendon-map p.vm-products__subtitle { margin: 0; font-size: clamp(16px, 1.6vw, calc(20px * var(--vm-scale))); font-weight: 500; color: var(--vm-muted); }
.vm-products__list { display: flex; gap: clamp(20px, 2.5vw, calc(32px * var(--vm-scale))); }
.vm-product {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: calc(24px * var(--vm-scale));
}
.vm-product__rank {
    flex: 0 0 auto;
    width: calc(72px * var(--vm-scale)); height: calc(72px * var(--vm-scale));
    display: grid; place-items: center;
    border-radius: 999px;
    background: linear-gradient(257deg, #082273 0%, #007042 100%);
    color: #fff;
    font-weight: 700;
    font-size: calc(32px * var(--vm-scale));
}
.vm-product__body { display: flex; flex-direction: column; gap: calc(8px * var(--vm-scale)); min-width: 0; }
.vm-product__name { font-size: clamp(20px, 2vw, calc(28px * var(--vm-scale))); font-weight: 700; color: #000; line-height: 1.05; }
.vm-product__cups { font-size: clamp(16px, 1.6vw, calc(20px * var(--vm-scale))); font-weight: 500; color: var(--vm-ink); line-height: 1.2; }

/* ---------------- Sidebar ---------------- */
.vm-sidebar {
    position: absolute;
    z-index: 2;
    top: var(--vm-inset-y);
    right: var(--vm-inset-x);
    bottom: var(--vm-inset-y);
    width: var(--vm-sidebar-w);
    max-width: var(--vm-sidebar-w);
    background: #fff;
    border-radius: var(--vm-radius);
    padding: clamp(24px, 2.6vw, calc(40px * var(--vm-scale))) clamp(20px, 2.6vw, calc(40px * var(--vm-scale))) calc(24px * var(--vm-scale));
    display: flex;
    flex-direction: column;
    gap: clamp(16px, 2vw, calc(24px * var(--vm-scale)));
}
.vendon-map h3.vm-sidebar__title { margin: 0; text-align: center; font-size: clamp(22px, 2.2vw, calc(32px * var(--vm-scale))); font-weight: 700; color: var(--vm-ink); }

.vm-pills { display: flex; flex-direction: column; gap: calc(10px * var(--vm-scale)); min-height: 0; overflow-y: auto; }
.vm-pill-group { display: flex; flex-direction: column; gap: calc(10px * var(--vm-scale)); }

.vendon-map .vm-pill {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: calc(12px * var(--vm-scale));
    border: 1px solid var(--vm-border) !important;
    background: #fff !important;
    color: var(--vm-ink) !important;
    font: inherit;
    font-weight: 500;
    font-size: calc(16px * var(--vm-scale));
    line-height: 1.2;
    padding: calc(13px * var(--vm-scale)) calc(24px * var(--vm-scale));
    border-radius: 999px;
    cursor: pointer;
    text-align: left;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.vendon-map .vm-pill:hover { border-color: var(--vm-green) !important; }
.vendon-map .vm-pill.is-active {
    background: var(--vm-green) !important;
    border-color: var(--vm-green) !important;
    color: #fff !important;
}
.vm-pill__toggle { font-size: calc(20px * var(--vm-scale)); line-height: 1; color: var(--vm-muted); }
.vendon-map .vm-pill.is-active .vm-pill__toggle { color: #fff; }

.vm-subpills { display: flex; flex-direction: column; gap: calc(10px * var(--vm-scale)); padding-left: 0; }
.vendon-map .vm-subpills[hidden] { display: none; }
.vendon-map .vm-pill--country {
    border: 1px solid transparent !important;
    background: #f1f1f1 !important;
    color: var(--vm-ink) !important;
    font-size: calc(16px * var(--vm-scale));
    padding: calc(13px * var(--vm-scale)) calc(24px * var(--vm-scale));
}
.vendon-map .vm-pill--country:hover { background: #e6e9f0 !important; }
.vendon-map .vm-pill--country.is-active { background: var(--vm-green) !important; color: #fff !important; }

/* Partners */
.vm-partners {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(8px * var(--vm-scale));
}
.vm-partners__title { font-size: calc(18px * var(--vm-scale)); color: var(--vm-muted); }
/* Scoped + tag-qualified + !important to beat Elementor/theme `img` rules
   (e.g. `.elementor-widget-container img { height:auto }`) that override the logo size. */
.vendon-map img.vm-partners__mainlogo { height: calc(60px * var(--vm-scale)) !important; width: auto; max-width: 100%; object-fit: contain; } /* Nestlé Professional on top */
.vm-partners__logos { display: flex; align-items: center; justify-content: center; gap: calc(32px * var(--vm-scale)); flex-wrap: wrap; }
.vendon-map img.vm-partners__logo { height: calc(28px * var(--vm-scale)) !important; width: auto; object-fit: contain; }
/* Per-brand sub-logo heights (override the shared rule above). */
.vendon-map img.vm-partners__logo--starbucks { height: calc(32px * var(--vm-scale)) !important; }
.vendon-map img.vm-partners__logo--nescafe   { height: calc(24px * var(--vm-scale)) !important; }

/* ---------------- Responsive ----------------
   Two-column map+sidebar is kept (and scales fluidly via the clamp()s above) down
   to tablet landscape. Only below 860px (phones / portrait tablets) do we stack. */
@media (max-width: 860px) {
    /* Drop the full-screen overlay; stack everything in normal flow. */
    .vendon-map { height: auto; min-height: 0; max-height: none; overflow: visible; }
    .vm-map { position: relative; inset: auto; width: auto; height: 55vh; }
    .vm-map svg { transform: none; }
    .vm-main { position: static; padding: 24px; pointer-events: auto; }
    .vm-brand { margin-top: 16px; }
    .vm-sidebar {
        position: static;
        inset: auto;
        width: auto;
        max-width: none;
        margin: 0 24px 24px;
    }
}

/* Below 1000px the Top Channels / Top Beverages cards get too narrow for 3 columns,
   so stack their items full-width with a 24px row gap. */
@media (max-width: 1000px) {
    .vm-channels__list, .vm-products__list { flex-direction: column; gap: 24px; }
}

/* ---------------- Password gate (protected map block) ----------------
   Rendered inside .vendon-map, so it inherits the brand font + full-screen bg. */
.vendon-map--gate { display: block; }
.vm-gate {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 60vh;
    padding: 40px 20px;
}
.vm-gate__card {
    width: 100%;
    max-width: 420px;
    background: var(--vm-panel-bg);
    border: 1px solid var(--vm-border);
    border-radius: var(--vm-radius);
    padding: clamp(28px, 3vw, 40px) clamp(24px, 2.6vw, 36px);
    box-shadow: 0 8px 24px rgba(11, 31, 42, .08);
    text-align: center;
}
.vm-gate__title { margin: 0 0 8px; font-size: clamp(20px, 2vw, 24px); font-weight: 700; color: #000; }
.vm-gate__intro { margin: 0 0 24px; font-size: 15px; color: var(--vm-muted); }
.vm-gate__form { display: block; text-align: left; }
.vm-gate__label { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 700; color: var(--vm-ink); }
.vm-gate__row { display: flex; gap: 10px; }
.vm-gate__input {
    flex: 1 1 auto;
    min-width: 0;
    height: 46px;
    padding: 0 14px;
    font-size: 15px;
    color: var(--vm-ink);
    background: #fff;
    border: 1px solid #d5dbe6;
    border-radius: 10px;
    outline: none;
}
.vm-gate__input:focus { border-color: var(--vm-green); box-shadow: 0 0 0 3px rgba(0, 112, 66, .15); }
.vm-gate__submit {
    flex: none;
    height: 46px;
    padding: 0 22px;
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    background: var(--vm-green);
    border: 0;
    border-radius: 10px;
    cursor: pointer;
}
.vm-gate__submit:hover { background: #02713b; }
.vm-gate__submit:disabled { opacity: .6; cursor: default; }
.vm-gate__error { min-height: 20px; margin: 10px 0 0; font-size: 13px; color: #e2231a; }