/**
 * Zamseed Dealer Locator Widget Styles
 *
 * Interactive dealer locator with search, map, and results list.
 * Uses theme CSS variables from style.css.
 *
 * @package Zamseed
 * @since 1.0.0
 */

/* Widget Root */
.zs-dealer-locator {
    width: 100%;
    max-width: 100%;
}

.zs-dealer-locator-section__heading {
    max-width: 1120px;
    margin: 0 auto 58px;
    font-family: var(--zs-font-serif, 'Cormorant Garamond', serif);
    font-size: clamp(2rem, 3.4vw, 3rem);
    font-weight: 700;
    line-height: 1.19;
    text-align: center;
    color: var(--zs-primary, #2d5a27);
}

.zs-dealer-locator,
.zs-dealer-locator * {
    box-sizing: border-box;
}

/* Layout Variants */
.zs-dealer-locator--sidebar .zs-dealer-locator__body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 400px);
    gap: 24px;
}

.zs-dealer-locator--stacked .zs-dealer-locator__body {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.zs-dealer-locator--figma-card {
    max-width: 1120px;
    margin-right: auto;
    margin-left: auto;
    /* One inset, read by the panel padding and by the header band's negative
       margin. They have to be the same number at every width or the band stops
       reaching the panel edges — which is exactly what happened when the panel
       used this clamp and the preset below hard-coded 41px. */
    --zs-dl-inset: clamp(24px, 3vw, 41px);
    /* The header band spans the panel edge to edge, so the panel itself carries
       no top padding — the band supplies its own. */
    padding: 0 var(--zs-dl-inset) var(--zs-dl-inset);
    border: 1px solid rgba(28, 28, 28, 0.08);
    /* Figma node 11121:38432 — 22px, not the 20px previously carried here. */
    border-radius: 22px;
    /* Warm, not white. The panel has to separate from a white page, and the
       design tints it: this sits between --zs-warm (#fdfcf9, too close to the
       page to read as a panel) and --zs-warm-deep (#f1ede5, heavy enough to
       look like a different section). */
    background: #f9f7f1;
    box-shadow: 0 18px 45px rgba(28, 28, 28, 0.08);
    overflow: hidden;
}

/* Header band — the section heading lives inside the panel in this layout,
   over a full-bleed rule. The negative inline margin cancels the panel's own
   side padding so the rule reaches both edges. */
.zs-dealer-locator--figma-card .zs-dealer-locator__header {
    margin: 0 calc(var(--zs-dl-inset) * -1) var(--zs-dl-inset);
    padding: clamp(24px, 3vw, 36px) var(--zs-dl-inset);
    border-bottom: 1px solid rgba(28, 28, 28, 0.08);
}

.zs-dealer-locator--figma-card .zs-dealer-locator__header .zs-dealer-locator-section__heading {
    margin: 0;
    /* Smaller than the standalone section title: inside the panel it is a card
       header, not a page-level heading. */
    font-size: clamp(1.5rem, 2.6vw, 2.25rem);
}

.zs-dealer-locator--figma-card .zs-dealer-locator__body {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

/* --------------------------------------------------------------------------
   Selected-area notice.

   States the active filter above the results and offers the way out. Sits in
   the results column rather than the filter row so it reads as a description
   of what is below it, which is what stops a filter feeling like a page the
   reader was taken to.
   -------------------------------------------------------------------------- */

.zs-dealer-locator__area-notice {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
    padding: 10px 16px;
    border: 1px solid rgba(45, 90, 39, 0.16);
    border-radius: 8px;
    background: rgba(45, 90, 39, 0.05);
}

/* `hidden` has to win over the flex display above, or the notice is visible
   before anything is filtered. */
.zs-dealer-locator__area-notice[hidden] {
    display: none;
}

.zs-dealer-locator__area-notice-text {
    font-family: var(--zs-font-sans, 'Inter', sans-serif);
    font-size: 0.875rem;
    color: var(--zs-text, #1c1c1c);
}

.zs-dealer-locator__area-reset {
    padding: 6px 14px;
    min-height: 32px;
    border: 1px solid rgba(45, 90, 39, 0.28);
    border-radius: 999px;
    background: #ffffff;
    font-family: var(--zs-font-sans, 'Inter', sans-serif);
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--zs-primary, #2d5a27);
    cursor: pointer;
}

.zs-dealer-locator__area-reset:hover {
    background: rgba(45, 90, 39, 0.08);
}

.zs-dealer-locator__area-reset:focus-visible {
    outline: 2px solid var(--zs-primary, #2d5a27);
    outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Figma card typography.

   The base rules set the panel's labels in Cormorant at display sizes — 40px
   for "Find Agro Dealer", 32px for "Search results", 20px green for each
   dealer name. The approved design sets all three in Inter at UI sizes, and
   reserves the serif for the one heading in the band above. Without this the
   panel reads as five competing headlines instead of a search tool.
   -------------------------------------------------------------------------- */

/* Locator chrome. The card name used to be in this group, which made the
   layout the thing that decided how a card looked — so the same card dropped
   back to the base serif the moment it appeared in any other layout. Card
   typography now belongs to the card variant, below. */
.zs-dealer-locator--figma-card .zs-dealer-locator__form-title,
.zs-dealer-locator--figma-card .zs-dealer-locator__results-title {
    font-family: var(--zs-font-sans, 'Inter', sans-serif);
    font-weight: 700;
    line-height: 1.3;
    color: var(--zs-text, #1c1c1c);
}

.zs-dealer-locator--figma-card .zs-dealer-locator__form-title {
    font-size: 0.9375rem;
    margin-bottom: 6px;
}

/* One line at container width, as drawn. Raising the paragraph's own cap is
   not enough — the 620px cap that wrapped it to two lines is on the header
   that contains it, so both have to move. */
.zs-dealer-locator--figma-card .zs-dealer-locator__form-header {
    max-width: 780px;
}

.zs-dealer-locator--figma-card .zs-dealer-locator__form-description {
    max-width: 780px;
    font-size: 0.875rem;
    line-height: 1.5;
}

.zs-dealer-locator--figma-card .zs-dealer-locator__results-title {
    font-size: 0.9375rem;
}

.zs-dealer-card--figma .zs-dealer-card__label,
/* Control row. The design draws these at ~42px; 44px is the touch-target
   floor and the nearest value that does not put a primary action below it. */
/* Vertical padding off, so min-height alone decides the control height. The
   base rules pad the input 14px and the button 14px on top of a 50px
   min-height, which left the two controls 48px and 50px — a row that never
   lines up however the min-height is set. */
.zs-dealer-locator--figma-card .zs-dealer-locator__search-input,
.zs-dealer-locator--figma-card .zs-dealer-locator__search-button {
    padding-block: 0;
    font-size: 0.875rem;
}

/* Chip type only. The design draws these a little shorter than the pinned
   36px min-height, but that is already the smallest of the three control
   heights in the panel and shrinking a tap target to gain 4px is the wrong
   trade — the size difference reads as type weight, which this does fix. */
.zs-dealer-locator--figma-card .zs-dealer-locator__popular-chip {
    font-size: 0.75rem;
    font-weight: 700;
}

/* Controls / Search Bar */
.zs-dealer-locator__controls {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 16px;
    margin-bottom: 24px;
}

.zs-dealer-locator__form {
    margin: 0 0 32px;
}

.zs-dealer-locator__form-header {
    max-width: 620px;
    margin-bottom: 20px;
}

.zs-dealer-locator__form-title {
    margin: 0 0 8px;
    font-family: var(--zs-font-serif, 'Cormorant Garamond', serif);
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    line-height: 1.1;
    color: var(--zs-primary, #2d5a27);
}

.zs-dealer-locator__form-description {
    margin: 0;
    font-family: var(--zs-font-sans, 'Inter', sans-serif);
    font-size: 1rem;
    line-height: 1.6;
    color: var(--zs-muted, #555555);
}

.zs-dealer-locator__search {
    position: relative;
    flex: 1;
    min-width: 280px;
}

.zs-dealer-locator__search-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Popular Search Chips */
.zs-dealer-locator__popular {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    width: 100%;
}

.zs-dealer-locator__popular-label {
    font-family: var(--zs-font-sans, 'Inter', sans-serif);
    font-size: 0.8125rem;
    color: var(--zs-muted, #555555);
}

.zs-dealer-locator__popular-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* Figma node 11121:38450 — min-height rather than symmetric padding, so a
   chip keeps its 36px height whether or not its label wraps. */
.zs-dealer-locator__popular-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 0 15px;
    font-family: var(--zs-font-sans, 'Inter', sans-serif);
    font-size: 0.8125rem;
    font-weight: 800;
    line-height: 1.6;
    color: var(--zs-primary, #2d5a27);
    background-color: #eef4df;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 999px;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.zs-dealer-locator__popular-chip:hover {
    border-color: var(--zs-primary, #2d5a27);
}

.zs-dealer-locator__popular-chip.is-active {
    background-color: var(--zs-primary, #2d5a27);
    border-color: var(--zs-primary, #2d5a27);
    color: #ffffff;
}

.zs-dealer-locator__popular-chip:focus-visible {
    outline: 2px solid var(--zs-primary, #2d5a27);
    outline-offset: 2px;
}

.zs-dealer-locator__search-icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--zs-muted, #555555);
    pointer-events: none;
}

.zs-dealer-locator__search-input {
    width: 100%;
    padding: 14px 16px 14px 48px;
    border: 2px solid rgba(45, 90, 39, 0.2);
    border-radius: 12px;
    background-color: #ffffff;
    font-size: 16px;
    font-family: var(--zs-font-sans, 'Inter', sans-serif);
    color: var(--zs-text, #1c1c1c);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.zs-dealer-locator__search-input::placeholder {
    color: var(--zs-muted, #555555);
}

.zs-dealer-locator__search-input:focus {
    outline: none;
    border-color: var(--zs-primary, #2d5a27);
    box-shadow: 0 0 0 3px rgba(45, 90, 39, 0.1);
}

.zs-dealer-locator__search-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex: 0 0 auto;
    min-height: 50px;
    padding: 14px 28px;
    border: 2px solid transparent;
    border-radius: 999px;
    background: var(--zs-accent, #c48c33);
    color: #ffffff;
    font-family: var(--zs-font-sans, 'Inter', sans-serif);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.zs-dealer-locator__search-button:hover {
    background: #ad7a2c;
}

.zs-dealer-locator__search-button:focus-visible {
    outline: 2px solid var(--zs-primary, #2d5a27);
    outline-offset: 2px;
}

.zs-dealer-locator__search-button svg {
    flex: 0 0 auto;
}

/* Control row height, set once and as a min-height. A `height` declaration
   here was dead: this rule sets min-height on the same selector group, and
   min-height wins, so the row stayed 50px however the height was written.
   The design draws ~42px; 44px is the touch-target floor and the nearest
   value that does not put a primary action below it. */
.zs-dealer-locator--figma-card .zs-dealer-locator__search-input,
.zs-dealer-locator--figma-card .zs-dealer-locator__search-button {
    min-height: 44px;
}

.zs-dealer-locator__filter {
    flex-shrink: 0;
}

.zs-dealer-locator__region-select,
.zs-dealer-locator__district-select {
    padding: 14px 40px 14px 16px;
    border: 2px solid rgba(45, 90, 39, 0.2);
    border-radius: 12px;
    background-color: #ffffff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23555555' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    font-size: 16px;
    font-family: var(--zs-font-sans, 'Inter', sans-serif);
    color: var(--zs-text, #1c1c1c);
    cursor: pointer;
    appearance: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.zs-dealer-locator__region-select:focus,
.zs-dealer-locator__district-select:focus {
    outline: none;
    border-color: var(--zs-primary, #2d5a27);
    box-shadow: 0 0 0 3px rgba(45, 90, 39, 0.1);
}

/* Map */
.zs-dealer-locator__map-wrapper {
    flex: 1;
    min-width: 0;
    max-width: 100%;
}

.zs-dealer-locator__map {
    position: relative;
    width: 100%;
    max-width: 100%;
    height: 500px;
    border-radius: 16px;
    background-color: #f5f5f5;
    overflow: hidden;
}

.zs-dealer-locator--figma-card .zs-dealer-locator__map {
    height: 462px;
    /* 8px, set once. This rule used to re-declare 16px below the 8px above it
       and silently won on source order. */
    border-radius: 8px;
}

.zs-dealer-locator__map-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--zs-muted, #555555);
    font-style: italic;
}

/* ==========================================================================
   Dealer card — Figma node 11459:2011
   Three-up grid inside a 1038px container: 20px column gap, 16px row gap,
   so each card is 332.67px. Card is white on a 1px rgba(0,0,0,0.12) border,
   8px radius, 21px padding, 12px between the name and the row group.
   ========================================================================== */

.zs-dealer-locator__list {
    display: grid;
    /* auto-fit + minmax(min(100%, 280px), 1fr): columns are as wide as they
       need to be and never narrower than 280px, so a fixed three-up never
       squeezes a dealer name and its district into a column that cannot hold
       them. min(100%, …) keeps it honest below 280px, where one column is the
       only option. */
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
    column-gap: 20px;
    row-gap: 16px;
    align-items: start;
}

/* Label bold, value regular — one text flow, so a long value wraps under
   the label rather than forming a second column. */
/* Label above value, not beside it.
   Inline label + value shared one line, so "Kasama, Kasama, Northern" had to
   fit whatever was left after "Location:" in a 280px column — and did not.
   Stacking gives the value the full card width and lets it wrap instead of
   pushing out of the card. */
.zs-dealer-card__label {
    display: block;
    font-weight: 700;
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--zs-muted, #555555);
}

.zs-dealer-card__value {
    display: block;
    font-weight: 400;
    /* Long single-token values — a run-together address, a pasted URL — must
       break rather than set the card's width. */
    overflow-wrap: anywhere;
}

@media (max-width: 1024px) {

}

@media (max-width: 640px) {
    .zs-dealer-locator__list {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   Editor preview
   Leaflet is not initialised inside Elementor, so the preview stands in for
   the map with a representative surface and markers at the same dimensions
   the frontend uses. Editors see the real proportions of the map/results
   split instead of a grey box. None of this reaches the public page.
   ========================================================================== */

.zs-dealer-locator__map--preview {
    position: relative;
    background-color: #eaf0e2;
    background-image:
        linear-gradient(rgba(45, 90, 39, 0.07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(45, 90, 39, 0.07) 1px, transparent 1px),
        radial-gradient(circle at 62% 30%, rgba(120, 170, 210, 0.35) 0 18%, transparent 19%),
        radial-gradient(circle at 28% 68%, rgba(154, 186, 128, 0.35) 0 14%, transparent 15%);
    background-size: 48px 48px, 48px 48px, 100% 100%, 100% 100%;
}

.zs-dealer-locator__map-pin {
    position: absolute;
    width: 26px;
    height: 26px;
    margin: -26px 0 0 -13px;
    background-color: var(--zs-primary, #2d5a27);
    border: 2px solid #ffffff;
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18);
}

.zs-dealer-locator__map-note {
    position: absolute;
    right: 12px;
    bottom: 12px;
    padding: 6px 12px;
    background-color: rgba(255, 255, 255, 0.9);
    border-radius: 999px;
    font-family: var(--zs-font-sans, 'Inter', sans-serif);
    font-size: 0.75rem;
    color: var(--zs-muted, #555555);
}

/* Sidebar / Results List */
.zs-dealer-locator__sidebar {
    width: 400px;
    max-width: 100%;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    max-height: 500px;
    border-radius: 16px;
    background-color: var(--zs-warm, #faf9f6);
    overflow: hidden;
}

.zs-dealer-locator--stacked .zs-dealer-locator__sidebar {
    width: 100%;
    max-height: none;
}

.zs-dealer-locator--figma-card .zs-dealer-locator__sidebar {
    width: 100%;
    max-height: none;
    border-radius: 0;
    background: transparent;
    overflow: visible;
}

.zs-dealer-locator__results-header {
    padding: 16px 20px;
    border-bottom: 1px solid rgba(45, 90, 39, 0.1);
    background-color: #ffffff;
}

.zs-dealer-locator--figma-card .zs-dealer-locator__results-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 0 0 18px;
    border-bottom: 0;
    background: transparent;
}

.zs-dealer-locator__results-title {
    margin: 0;
    font-family: var(--zs-font-serif, 'Cormorant Garamond', serif);
    font-size: clamp(1.5rem, 2.4vw, 2rem);
    line-height: 1.15;
    color: var(--zs-primary, #2d5a27);
}

.zs-dealer-locator__results-count {
    font-size: 14px;
    font-weight: 600;
    color: var(--zs-muted, #555555);
}

.zs-dealer-locator__list {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
}

.zs-dealer-locator--figma-card .zs-dealer-locator__list {
    display: grid;
    /* auto-fit + minmax(min(100%, 280px), 1fr): columns are as wide as they
       need to be and never narrower than 280px, so a fixed three-up never
       squeezes a dealer name and its district into a column that cannot hold
       them. min(100%, …) keeps it honest below 280px, where one column is the
       only option. */
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
    gap: 20px;
    overflow: visible;
    padding: 0;
}

/* ==========================================================================
   Compact Mode: search panel (homepage "Find an Agro Dealer")
   ========================================================================== */

.zs-dealer-locator--compact {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 50px;
    padding: 56px;
    border-radius: 20px;
    /* The card carries its own measure, like the --figma-card variant above.
       1120 is the frame's card (Figma 11186:58552, x=160 w=1120) — narrower
       than the 1200 the wider sections use, so this section does not inherit
       a parent's boxed width. */
    width: min(1120px, calc(100% - var(--zs-container-padding, 20px) * 2));
    margin-inline: auto;
    background-image:
        radial-gradient(circle at 12% 15%, rgba(196, 140, 51, 0.22), rgba(196, 140, 51, 0) 45%),
        linear-gradient(134deg, #244f22 0%, #2b6d22 54%, #1d3e1b 100%);
    background-size: cover;
    background-position: center;
    box-shadow: 0 24px 30px rgba(45, 90, 39, 0.18);
    overflow: hidden;
}

.zs-dealer-locator--compact-custom-bg {
    background-image: none;
    background-color: #1d3e1b;
}

.zs-dealer-locator__compact-header {
    display: flex;
    flex-direction: column;
    align-items: var(--zs-header-items, center);
    gap: 20px;
    max-width: 612px;
    margin-left: var(--zs-header-margin-left, auto);
    margin-right: var(--zs-header-margin-right, auto);
    text-align: var(--zs-header-text-align, center);
}

.zs-dealer-locator__compact-eyebrow {
    font-family: var(--zs-font-sans, 'Inter', sans-serif);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.76);
}

.zs-dealer-locator__compact-heading {
    margin: 0 var(--zs-header-margin-right, auto) 0 var(--zs-header-margin-left, auto);
    font-family: var(--zs-font-serif, 'Cormorant Garamond', serif);
    font-size: clamp(1.75rem, 3.2vw, 2.75rem);
    font-weight: 700;
    color: #ffffff;
}

.zs-dealer-locator__compact-description {
    margin: 0 var(--zs-header-margin-right, auto) 0 var(--zs-header-margin-left, auto);
    font-family: var(--zs-font-sans, 'Inter', sans-serif);
    font-size: 1rem;
    line-height: 1.5;
    color: #ffffff;
}

.zs-dealer-locator__compact-panel {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 37px;
    border-radius: 22px;
    background-color: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.14);
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
}

.zs-dealer-locator__compact-note {
    margin: 0;
    font-family: var(--zs-font-sans, 'Inter', sans-serif);
    font-size: 0.9375rem;
    line-height: 1.4;
    color: #ffffff;
}

.zs-dealer-locator__compact-input-row {
    display: flex;
    align-items: center;
    gap: 14px;
}

.zs-dealer-locator__compact-input {
    flex: 1;
    min-height: 50px;
    padding: 15px 22px;
    font-family: var(--zs-font-sans, 'Inter', sans-serif);
    font-size: 1rem;
    color: var(--zs-text, #1c1c1c);
    background-color: #ffffff;
    border: none;
    border-radius: 999px;
}

.zs-dealer-locator__compact-input::placeholder {
    color: #757575;
}

.zs-dealer-locator__compact-input:focus {
    outline: 2px solid #ffffff;
    outline-offset: 2px;
}

.zs-dealer-locator__compact-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-shrink: 0;
    min-height: 50px;
    padding: 16px 30px;
    font-family: var(--zs-font-sans, 'Inter', sans-serif);
    font-size: 1rem;
    font-weight: 700;
    color: #ffffff;
    background-color: var(--zs-accent, #c48c33);
    border: 2px solid transparent;
    border-radius: 999px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.zs-dealer-locator__compact-button:hover {
    background-color: #ad7a2c;
}

.zs-dealer-locator__compact-popular {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.zs-dealer-locator__compact-popular-chip {
    padding: 8px 15px;
    font-family: var(--zs-font-sans, 'Inter', sans-serif);
    font-size: 0.875rem;
    font-weight: 600;
    color: #ffffff;
    background-color: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 999px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.zs-dealer-locator__compact-popular-chip:hover {
    background-color: rgba(255, 255, 255, 0.22);
}

/* Dealer Card */
.zs-dealer-card {
    display: flex;
    flex-direction: column;
    padding: 20px;
    margin-bottom: 12px;
    border-radius: 12px;
    background-color: #ffffff;
    border: 1px solid rgba(45, 90, 39, 0.08);
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
    cursor: pointer;
}

/* --------------------------------------------------------------------------
   Card variants.

   After the base, always. These rules and the base are both single-class
   selectors, so source order is the only thing separating them — with the
   variants above, the base silently won and a Figma card rendered as a
   detailed one. Adding a variant means adding a block here, not raising
   specificity somewhere else.
   -------------------------------------------------------------------------- */

.zs-dealer-card--figma .zs-dealer-card__value {
    font-size: 0.8125rem;
    line-height: 1.5;
}

/* The Figma card style. Both classes on purpose: the detailed style defines
   .zs-dealer-card further down the file, and a lone
   .zs-dealer-card--figma is the same (0,1,0) specificity, so
   source order would still hand it the win. (0,2,0) settles it wherever the
   two blocks sit relative to each other. */
.zs-dealer-card--figma {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 21px;
    background-color: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 8px;
}

/* Figma card name — owned by the variant, so the card reads the same wherever
   a layout places it. This used to be split between here and a
   .zs-dealer-locator--figma-card descendant rule, which is how the layout
   ended up deciding the card's typography. */
.zs-dealer-card--figma .zs-dealer-card__name {
    margin: 0 0 10px;
    font-family: var(--zs-font-sans, 'Inter', sans-serif);
    font-size: 0.875rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--zs-text, #1c1c1c);
}

.zs-dealer-card--figma .zs-dealer-card__details {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.zs-dealer-card--figma .zs-dealer-card__row {
    margin: 0;
    font-family: var(--zs-font-sans, 'Inter', sans-serif);
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--zs-text, #1c1c1c);
}


/* Grid-item behaviour, which is arrangement rather than appearance, so it is
   keyed off the results grid and applies to whatever variant sits in it. */
.zs-dealer-locator__list > .zs-dealer-card {
    height: 100%;
    /* Grid items default to min-width:auto, which is min-content — the reason
       a long unbroken dealer name could widen its column and push the row. */
    min-width: 0;
    margin-bottom: 0;
}

.zs-dealer-card:last-child {
    margin-bottom: 0;
}

.zs-dealer-card:hover {
    border-color: rgba(45, 90, 39, 0.2);
    box-shadow: 0 4px 12px rgba(45, 90, 39, 0.1);
}

.zs-dealer-card:focus-visible {
    outline: 2px solid var(--zs-primary, #2d5a27);
    outline-offset: 3px;
}

.zs-dealer-card.is-active {
    border-color: var(--zs-primary, #2d5a27);
    box-shadow: 0 4px 16px rgba(45, 90, 39, 0.15);
}

.zs-dealer-card__eyebrow {
    display: inline-block;
    margin-bottom: 8px;
    padding: 4px 10px;
    border-radius: 999px;
    background-color: rgba(45, 90, 39, 0.1);
    color: var(--zs-primary, #2d5a27);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.zs-dealer-card__name {
    margin: 0 0 12px;
    color: var(--zs-primary, #2d5a27);
    font-family: var(--zs-font-serif, 'Cormorant Garamond', serif);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.2;
}

.zs-dealer-card__details {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.zs-dealer-card__row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: var(--zs-muted, #555555);
    font-size: 14px;
    line-height: 1.4;
    /* A flex row will not shrink its text below min-content unless told to,
       which is what let long values overhang the card edge. */
    min-width: 0;
}

/* Label-led variants stack the pair; there is no icon to sit beside. */
.zs-dealer-card--figma .zs-dealer-card__row,
.zs-dealer-card--compact .zs-dealer-card__row,
.zs-dealer-card--map-popup .zs-dealer-card__row {
    display: block;
}

.zs-dealer-card__row svg {
    flex-shrink: 0;
    margin-top: 2px;
    color: var(--zs-primary, #2d5a27);
    opacity: 0.7;
}

.zs-dealer-card__link {
    color: var(--zs-text, #1c1c1c);
    text-decoration: none;
    transition: color 0.2s ease;
}

.zs-dealer-card__link:hover {
    color: var(--zs-primary, #2d5a27);
}

.zs-dealer-card__action--directions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
    padding: 10px 16px;
    border-radius: 8px;
    background-color: var(--zs-primary, #2d5a27);
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: background-color 0.2s ease;
}

.zs-dealer-card__action--map {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: flex-start;
    min-height: 40px;
    margin-top: 10px;
    padding: 9px 14px;
    border: 1px solid rgba(45, 90, 39, 0.22);
    border-radius: 8px;
    background: #ffffff;
    color: var(--zs-primary, #2d5a27);
    font-family: var(--zs-font-sans, 'Inter', sans-serif);
    font-size: 0.875rem;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.zs-dealer-card__action--map:hover,
.zs-dealer-card__action--map:focus-visible {
    border-color: var(--zs-primary, #2d5a27);
    background: var(--zs-primary, #2d5a27);
    color: #ffffff;
}

.zs-dealer-card__action--directions:hover {
    background-color: var(--zs-primary-dark, #1e3d1a);
    color: #ffffff;
}

.zs-dealer-card__action--directions svg {
    flex-shrink: 0;
}

/* Empty State */
.zs-dealer-locator__empty {
    padding: 60px 40px;
    border: 2px dashed rgba(45, 90, 39, 0.2);
    border-radius: 16px;
    text-align: center;
    color: var(--zs-muted, #555555);
    font-style: italic;
}

.zs-dealer-locator__no-results {
    padding: 40px 20px;
    text-align: center;
    color: var(--zs-muted, #555555);
}

.zs-dealer-locator__results-actions {
    display: flex;
    justify-content: center;
    margin-top: 24px;
}

.zs-dealer-locator__show-more {
    min-height: 44px;
    padding: 12px 22px;
    border: 1px solid rgba(45, 90, 39, 0.24);
    border-radius: 999px;
    background: #ffffff;
    color: var(--zs-primary, #2d5a27);
    font-family: var(--zs-font-sans, 'Inter', sans-serif);
    font-size: 0.9375rem;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.zs-dealer-locator__show-more:hover,
.zs-dealer-locator__show-more:focus-visible {
    background: var(--zs-primary, #2d5a27);
    color: #ffffff;
}

.zs-dealer-locator__show-more[hidden] {
    display: none;
}

/* Leaflet Map Overrides */
.zs-dealer-locator__map .leaflet-popup-content-wrapper {
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.zs-dealer-locator__map .leaflet-container,
.zs-dealer-locator__map .leaflet-pane,
.zs-dealer-locator__map .leaflet-map-pane {
    max-width: 100%;
}

.zs-dealer-locator__map .leaflet-popup-content {
    margin: 16px;
    font-family: var(--zs-font-sans, 'Inter', sans-serif);
}

.zs-dealer-locator__map .leaflet-popup-tip {
    box-shadow: none;
}

.zs-dealer-locator__popup {
    min-width: 200px;
}

.zs-dealer-locator__popup-name {
    margin: 0 0 8px;
    color: var(--zs-primary, #2d5a27);
    font-family: var(--zs-font-serif, 'Cormorant Garamond', serif);
    font-size: 18px;
    font-weight: 700;
}

.zs-dealer-locator__popup-region {
    display: inline-block;
    margin-bottom: 8px;
    padding: 2px 8px;
    border-radius: 999px;
    background-color: rgba(45, 90, 39, 0.1);
    color: var(--zs-primary, #2d5a27);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
}

.zs-dealer-locator__popup-info {
    font-size: 13px;
    color: var(--zs-muted, #555555);
    line-height: 1.5;
}

/* Custom Marker */
.zs-dealer-locator__marker {
    width: 32px;
    height: 40px;
}

/* Responsive: Tablet */
@media (max-width: 1080px) {
    .zs-dealer-locator--sidebar .zs-dealer-locator__body {
        grid-template-columns: minmax(0, 1fr) 320px;
    }

    .zs-dealer-locator__sidebar {
        width: 320px;
    }

    .zs-dealer-locator__map {
        height: 450px;
    }

    .zs-dealer-locator--sidebar .zs-dealer-locator__sidebar {
        max-height: 450px;
    }
}

/* Responsive: Mobile */
@media (max-width: 760px) {
    .zs-dealer-locator--sidebar .zs-dealer-locator__body,
    .zs-dealer-locator--stacked .zs-dealer-locator__body {
        display: flex;
        flex-direction: column;
    }

    .zs-dealer-locator--compact {
        gap: 32px;
        padding: 32px 24px;
    }

    .zs-dealer-locator__compact-panel {
        padding: 24px;
    }

    .zs-dealer-locator__compact-input-row {
        flex-direction: column;
        align-items: stretch;
    }

    .zs-dealer-locator__compact-button {
        width: 100%;
    }

    .zs-dealer-locator__controls {
        flex-direction: column;
    }

    .zs-dealer-locator__search {
        min-width: 100%;
    }

    .zs-dealer-locator__filter {
        width: 100%;
    }

    .zs-dealer-locator__region-select {
        width: 100%;
    }

    .zs-dealer-locator__district-select,
    .zs-dealer-locator__search-button {
        width: 100%;
    }

    .zs-dealer-locator__map {
        height: 300px;
        border-radius: 12px;
    }

    .zs-dealer-locator__sidebar {
        width: 100%;
        max-height: none;
        border-radius: 12px;
    }

    .zs-dealer-card {
        padding: 16px;
    }

    .zs-dealer-card__name {
        font-size: 18px;
    }

    .zs-dealer-card__row {
        font-size: 13px;
    }

    .zs-dealer-card__action--directions {
        width: 100%;
        justify-content: center;
    }

    .zs-dealer-card__action--map {
        width: 100%;
    }
}

/* Focus States */
.zs-dealer-card:focus-within {
    outline: 2px solid var(--zs-primary, #2d5a27);
    outline-offset: 2px;
}

.zs-dealer-card__link:focus,
.zs-dealer-card__action--directions:focus,
.zs-dealer-card__action--map:focus {
    outline: 2px solid var(--zs-primary, #2d5a27);
    outline-offset: 2px;
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    .zs-dealer-locator__search-input,
    .zs-dealer-locator__region-select,
    .zs-dealer-card,
    .zs-dealer-card__link,
    .zs-dealer-card__action--directions,
    .zs-dealer-card__action--map,
    .zs-dealer-locator__search-button,
    .zs-dealer-locator__show-more,
    .zs-dealer-locator__compact-button,
    .zs-dealer-locator__compact-popular-chip {
        transition: none;
    }
}

/* Hide cards that don't match filter (JS will toggle this) */
.zs-dealer-card[hidden] {
    display: none;
}

/* ==========================================================================
   District filter, clear control and accuracy notices
   ========================================================================== */

.zs-dealer-locator__clear {
    align-self: center;
    padding: 10px 18px;
    border: 1px solid var(--zs-border, rgba(45, 90, 39, 0.18));
    border-radius: 999px;
    background: transparent;
    color: var(--zs-primary, #2d5a27);
    font-family: var(--zs-font-sans, 'Inter', sans-serif);
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.zs-dealer-locator__clear:hover,
.zs-dealer-locator__clear:focus-visible {
    background: var(--zs-primary, #2d5a27);
    color: #ffffff;
}

.zs-dealer-locator__clear[hidden] {
    display: none;
}

/*
 * Accuracy notice. The dataset is district centroids, so the design must not
 * imply a marker is the shop door. Subtle, but never hidden.
 */
.zs-dealer-card__notice,
.zs-dealer-locator__popup-accuracy {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 10px 0 0;
    font-family: var(--zs-font-sans, 'Inter', sans-serif);
    font-size: 0.75rem;
    line-height: 1.4;
    color: var(--zs-muted, #555555);
}

.zs-dealer-card__notice::before,
.zs-dealer-locator__popup-accuracy::before {
    content: '';
    flex: 0 0 auto;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
}

.zs-dealer-card__notice--estimated {
    color: #8a6d1f;
}

.zs-dealer-card__notice--unresolved {
    color: #8a4b1f;
}

/* ==========================================================================
   Empty, no-result and map-unavailable states
   ========================================================================== */

.zs-dealer-locator__no-results,
.zs-dealer-locator__map-unavailable {
    margin: 0;
    padding: 32px 24px;
    border: 1px dashed var(--zs-border, rgba(45, 90, 39, 0.2));
    border-radius: 12px;
    text-align: center;
    font-family: var(--zs-font-sans, 'Inter', sans-serif);
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--zs-muted, #555555);
}

.zs-dealer-locator__no-results[hidden] {
    display: none;
}

.zs-dealer-locator__map-unavailable {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 220px;
}

.zs-dealer-locator__map-tile-error {
    position: absolute;
    right: 16px;
    bottom: 16px;
    z-index: 500;
    max-width: min(320px, calc(100% - 32px));
    margin: 0;
    padding: 10px 12px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.94);
    color: var(--zs-muted, #555555);
    font-family: var(--zs-font-sans, 'Inter', sans-serif);
    font-size: 0.8125rem;
    line-height: 1.4;
    box-shadow: 0 8px 20px rgba(28, 28, 28, 0.12);
}

.zs-dealer-locator--empty .zs-dealer-locator__empty {
    margin: 0;
    padding: 48px 24px;
    border: 1px dashed var(--zs-border, rgba(45, 90, 39, 0.2));
    border-radius: 12px;
    text-align: center;
    font-family: var(--zs-font-sans, 'Inter', sans-serif);
    color: var(--zs-muted, #555555);
}

/* Cluster bubbles, matched to the Zamseed green rather than Leaflet's blue. */
.zs-dealer-locator .marker-cluster-small div,
.zs-dealer-locator .marker-cluster-medium div,
.zs-dealer-locator .marker-cluster-large div {
    background-color: var(--zs-primary, #2d5a27);
    color: #ffffff;
    font-family: var(--zs-font-sans, 'Inter', sans-serif);
    font-weight: 700;
}

.zs-dealer-locator .marker-cluster-small,
.zs-dealer-locator .marker-cluster-medium,
.zs-dealer-locator .marker-cluster-large {
    background-color: rgba(45, 90, 39, 0.25);
}

/* ==========================================================================
   Responsive — filters stack, map above list, readable at 320px
   ========================================================================== */

@media (max-width: 900px) {
    .zs-dealer-locator--figma-card .zs-dealer-locator__map {
        height: 380px;
    }

    .zs-dealer-locator__controls {
        flex-direction: column;
        align-items: stretch;
    }

    .zs-dealer-locator__clear {
        align-self: stretch;
    }

    /* Map above the results list once the columns collapse. */
    .zs-dealer-locator__body {
        display: flex;
        flex-direction: column;
    }

    .zs-dealer-locator__map-wrapper {
        order: 1;
    }

    .zs-dealer-locator__sidebar {
        order: 2;
    }
}

@media (max-width: 480px) {
    .zs-dealer-locator-section__heading {
        margin-bottom: 32px;
    }

    .zs-dealer-locator,
    .zs-dealer-locator__body,
    .zs-dealer-locator__controls,
    .zs-dealer-card {
        max-width: 100%;
        min-width: 0;
    }

    /* Touch targets stay at least 44px tall on small screens. */
    .zs-dealer-locator__search-input,
    .zs-dealer-locator__region-select,
    .zs-dealer-locator__district-select,
    .zs-dealer-locator__clear {
        min-height: 44px;
    }

    .zs-dealer-card {
        padding: 16px;
    }

    .zs-dealer-card__name {
        overflow-wrap: anywhere;
    }

    .zs-dealer-locator--figma-card {
        padding: 20px;
        border-radius: 16px;
    }

    .zs-dealer-locator--figma-card .zs-dealer-locator__map {
        height: 300px;
    }

    .zs-dealer-locator--figma-card .zs-dealer-locator__results-header {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ==========================================================================
   Compact panel — inline dealer results
   Styled as an expansion of the existing green panel: the same 22px radius
   family, the translucent-white card treatment already used by the panel
   itself, and the gold accent for primary actions.
   ========================================================================== */

.zs-dealer-locator__inline {
    margin-top: 28px;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.22);
}

.zs-dealer-locator__inline[hidden] {
    display: none;
}

.zs-dealer-locator__inline-status {
    margin: 0 0 18px;
    font-family: var(--zs-font-sans, 'Inter', sans-serif);
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.92);
}

.zs-dealer-locator__inline-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.zs-dealer-locator__inline-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    padding: 20px;
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 16px;
    background-color: rgba(255, 255, 255, 0.93);
}

.zs-dealer-locator__inline-card--new {
    animation: zs-dealer-result-in 340ms var(--zs-ease-standard, cubic-bezier(0.22, 1, 0.36, 1)) both;
    animation-delay: var(--zs-inline-result-delay, 0ms);
}

@keyframes zs-dealer-result-in {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.zs-dealer-locator__inline-name {
    margin: 0;
    font-family: var(--zs-font-serif, 'Cormorant Garamond', serif);
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--zs-primary, #2d5a27);
    overflow-wrap: anywhere;
}

.zs-dealer-locator__inline-location {
    margin: 0;
    font-family: var(--zs-font-sans, 'Inter', sans-serif);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--zs-accent, #c48c33);
}

.zs-dealer-locator__inline-meta {
    margin: 0;
    font-family: var(--zs-font-sans, 'Inter', sans-serif);
    font-size: 0.875rem;
    line-height: 1.5;
    color: #444444;
    overflow-wrap: anywhere;
}

.zs-dealer-locator__inline-label {
    font-weight: 600;
    color: var(--zs-primary, #2d5a27);
}

.zs-dealer-locator__inline-accuracy {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 2px 0 0;
    font-family: var(--zs-font-sans, 'Inter', sans-serif);
    font-size: 0.6875rem;
    line-height: 1.4;
    color: #8a6d1f;
}

.zs-dealer-locator__inline-accuracy::before {
    content: '';
    flex: 0 0 auto;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

.zs-dealer-locator__inline-accuracy--unresolved {
    color: #8a4b1f;
}

.zs-dealer-locator__inline-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.zs-dealer-locator__inline-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 0 16px;
    border-radius: 999px;
    font-family: var(--zs-font-sans, 'Inter', sans-serif);
    font-size: 0.8125rem;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.zs-dealer-locator__inline-btn--call {
    background-color: var(--zs-accent, #c48c33);
    color: #ffffff;
}

.zs-dealer-locator__inline-btn--call:hover,
.zs-dealer-locator__inline-btn--call:focus-visible {
    background-color: #ad7a2c;
    color: #ffffff;
}

.zs-dealer-locator__inline-btn--dir {
    border: 1.5px solid var(--zs-primary, #2d5a27);
    color: var(--zs-primary, #2d5a27);
}

.zs-dealer-locator__inline-btn--dir:hover,
.zs-dealer-locator__inline-btn--dir:focus-visible {
    background-color: var(--zs-primary, #2d5a27);
    color: #ffffff;
}

.zs-dealer-locator__inline-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    margin-top: 22px;
}

.zs-dealer-locator__inline-actions[hidden] {
    display: none;
}

.zs-dealer-locator__inline-all {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 24px;
    border: 1.5px solid rgba(255, 255, 255, 0.5);
    border-radius: 999px;
    font-family: var(--zs-font-sans, 'Inter', sans-serif);
    font-size: 0.9375rem;
    font-weight: 700;
    color: #ffffff;
    text-decoration: none;
    transition: background-color var(--zs-motion-fast, 220ms) var(--zs-ease-hover, ease), color var(--zs-motion-fast, 220ms) var(--zs-ease-hover, ease);
}

@media (prefers-reduced-motion: reduce) {
    .zs-dealer-locator__inline-card--new {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

.zs-dealer-locator__inline-all:hover,
.zs-dealer-locator__inline-all:focus-visible {
    background-color: #ffffff;
    color: var(--zs-primary, #2d5a27);
}

.zs-dealer-locator__inline-all[hidden] {
    display: none;
}

.zs-dealer-locator__inline-clear {
    padding: 0;
    border: 0;
    background: none;
    font-family: var(--zs-font-sans, 'Inter', sans-serif);
    font-size: 0.875rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.86);
    text-decoration: underline;
    cursor: pointer;
}

.zs-dealer-locator__inline-clear:hover,
.zs-dealer-locator__inline-clear:focus-visible {
    color: #ffffff;
}

.zs-dealer-locator__compact-button[disabled] {
    opacity: 0.65;
    cursor: progress;
}

@media (max-width: 1024px) {
    .zs-dealer-locator__inline-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 620px) {
    .zs-dealer-locator__inline-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .zs-dealer-locator__inline {
        margin-top: 22px;
    }

    .zs-dealer-locator__inline-btn,
    .zs-dealer-locator__inline-all {
        min-height: 44px;
    }

    .zs-dealer-locator__inline-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .zs-dealer-locator__inline-all {
        justify-content: center;
    }
}

/* ==========================================================================
   Agro Dealers preset — applied by the widget's Design Preset control.
   Holds the section-level geometry the panel classes do not cover, so
   selecting the preset is a rendering change rather than a label.
   ========================================================================== */

.zs-dealer-locator--preset-agro-dealers {
    padding-top: 92px;
    padding-bottom: 92px;
}

/* The panel keeps its own 41px inset, so the section padding above is applied
   to the outer element and the inner padding is left untouched. No top inset:
   the header band runs to the panel's top edge and supplies its own padding,
   and this rule outranks the layout's, so leaving 41px here re-indented the
   band and left it floating below the corner radius. */
.zs-dealer-locator--preset-agro-dealers.zs-dealer-locator--figma-card {
    --zs-dl-inset: 41px;
    padding: 0 41px 41px;
}

@media (max-width: 768px) {
    .zs-dealer-locator--preset-agro-dealers {
        padding-top: 56px;
        padding-bottom: 56px;
    }

    .zs-dealer-locator--preset-agro-dealers.zs-dealer-locator--figma-card {
        --zs-dl-inset: 24px;
        padding: 0 24px 24px;
    }
}