/* The selectable result wrapper is the Store Card's containing block. Give it
   an explicit builder-controlled width so a card set to 100% cannot resolve
   against an intrinsic/shrink-to-fit wrapper. */
.cliq-widget-results > .cliq-sl-result {
	width: min(var(--cliq-results-card-w, 100%), 100%);
	min-width: 0;
	max-width: 100%;
	box-sizing: border-box;
}
.cliq-widget-results:not(.cliq-widget-results--row) > .cliq-sl-result { align-self: stretch; }
.cliq-widget-results--row > .cliq-sl-result { flex: 0 0 min(var(--cliq-results-card-w, 100%), 100%); }
.cliq-widget-results--grid > .cliq-sl-result {
	width: 100%;
	max-width: 100%;
}
.cliq-widget-results > .cliq-sl-result > .cliq-widget-design { width: 100%; max-width: 100%; }

/* Fixed-width Store List scrollbars. Chromium/WebKit's native `thin` overlay
   scrollbar expands on hover on some platforms, so let the WebKit pseudo
   elements own its geometry there. Firefox keeps its native thin scrollbar. */
.cliq-sl-w--results > :is(.cliq-sl-results, .cliq-sl-acc-list, .cliq-sl-group-list, .cliq-sl-catbrowse, .cliq-sl-filter-drawer) {
	scrollbar-gutter: auto;
}
@supports selector(::-webkit-scrollbar) {
	.cliq-sl-w--results > :is(.cliq-sl-results, .cliq-sl-acc-list, .cliq-sl-group-list, .cliq-sl-catbrowse, .cliq-sl-filter-drawer) {
		/* `auto` forced a permanently visible classic bar and defeated the
		   platform's overlay scrollbars. `thin` keeps the list quiet. */
		scrollbar-width: thin;
	}
}
.cliq-sl-w--results > :is(.cliq-sl-results, .cliq-sl-acc-list, .cliq-sl-group-list, .cliq-sl-catbrowse, .cliq-sl-filter-drawer)::-webkit-scrollbar {
	width: 7px !important;
	height: 7px !important;
}
.cliq-sl-w--results > :is(.cliq-sl-results, .cliq-sl-acc-list, .cliq-sl-group-list, .cliq-sl-catbrowse, .cliq-sl-filter-drawer)::-webkit-scrollbar-track {
	background: var(--cliq-results-scroll-track, transparent) !important;
}
.cliq-sl-w--results > :is(.cliq-sl-results, .cliq-sl-acc-list, .cliq-sl-group-list, .cliq-sl-catbrowse, .cliq-sl-filter-drawer)::-webkit-scrollbar-thumb {
	min-height: 50px;
	border: 0;
	border-radius: 50px;
	/* Idle lists show no bar; the gutter is still reserved, so revealing it
	   on hover/keyboard focus never shifts the cards. */
	background: transparent !important;
	transition: background-color .18s ease;
}
.cliq-sl-w--results > :is(.cliq-sl-results, .cliq-sl-acc-list, .cliq-sl-group-list, .cliq-sl-catbrowse, .cliq-sl-filter-drawer):hover::-webkit-scrollbar-thumb,
.cliq-sl-w--results > :is(.cliq-sl-results, .cliq-sl-acc-list, .cliq-sl-group-list, .cliq-sl-catbrowse, .cliq-sl-filter-drawer):focus-within::-webkit-scrollbar-thumb {
	background: var(--cliq-results-scroll-thumb, #94a3b8) !important;
}
.cliq-sl-w--results > :is(.cliq-sl-results, .cliq-sl-acc-list, .cliq-sl-group-list, .cliq-sl-catbrowse, .cliq-sl-filter-drawer)::-webkit-scrollbar-corner {
	background: transparent !important;
}
/* Standard scrollbar properties. Chrome now reports ::-webkit-scrollbar as
   unsupported and `scrollbar-color` overrides those pseudo-elements anyway, so
   these — not the WebKit rules above — decide what a modern browser paints.
   Idle lists stay clean; the bar appears once the visitor is actually in the
   list. The gutter is reserved either way, so nothing shifts. */
.cliq-sl-w--results > :is(.cliq-sl-results, .cliq-sl-acc-list, .cliq-sl-group-list, .cliq-sl-catbrowse, .cliq-sl-filter-drawer) {
	scrollbar-width: thin;
	scrollbar-color: transparent transparent;
	transition: scrollbar-color .18s ease;
}
.cliq-sl-w--results > :is(.cliq-sl-results, .cliq-sl-acc-list, .cliq-sl-group-list, .cliq-sl-catbrowse, .cliq-sl-filter-drawer):hover,
.cliq-sl-w--results > :is(.cliq-sl-results, .cliq-sl-acc-list, .cliq-sl-group-list, .cliq-sl-catbrowse, .cliq-sl-filter-drawer):focus-within {
	scrollbar-color: var(--cliq-results-scroll-thumb, #94a3b8) var(--cliq-results-scroll-track, transparent);
}
.cliq-sl-results-progress { position: absolute; z-index: 8; top: 14px; right: 14px; width: 22px; height: 22px; border: 2px solid color-mix(in srgb, var(--cliq-sl-primary) 22%, transparent); border-top-color: var(--cliq-sl-primary); border-radius: 50%; opacity: 0; animation: cliq-sl-results-spin .7s linear infinite, cliq-sl-results-progress-in 0s .12s forwards; }
@keyframes cliq-sl-results-spin { to { transform: rotate(360deg); } }
@keyframes cliq-sl-results-progress-in { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
	.cliq-sl-w--results .cliq-widget-results { transition: none; }
	.cliq-sl-results-progress { opacity: 1; animation: none; }
}

.cliq-sl-count { display: flex; align-items: center; justify-content: space-between; gap: var(--cliq-sl-count-gap, 12px); color: var(--cliq-sl-count-color, var(--cliq-sl-on-canvas)); }
.cliq-sl .cliq-sl-count__print { padding: 0; border: 0; border-radius: 0; background: none; color: inherit; font-weight: var(--cliq-sl-count-print-weight, 600); cursor: pointer; }
.cliq-sl .cliq-sl-count__print:is(:hover, :focus, :active) { padding: 0; border: 0; border-radius: 0; background: none; color: inherit; }
.cliq-sl-results-count { flex: 0 0 auto; margin-bottom: var(--cliq-sl-gap); }

.cliq-sl-results--empty { padding: var(--cliq-sl-empty-pad, 32px); text-align: center; color: var(--cliq-sl-faint); border: 2px dashed var(--cliq-sl-border-soft); border-radius: var(--cliq-sl-empty-radius, 12px); }
/* "Load more" pagination button below the results list (any display mode).
   Typography, colors and box appearance come from the Load More button style
   controls as custom properties on the widget's own hook (see
   loadMoreButtonVars()) — falls back to the previous fixed look untouched. */
.cliq-sl .cliq-sl-loadmore { display: flex; align-items: center; justify-content: center; gap: var(--cliq-btn-icon-gap, 6px); flex: 0 0 auto; margin: var(--cliq-sl-gap) auto; border: var(--cliq-loadmore-border-width, 1px) solid var(--cliq-loadmore-border-color, var(--cliq-sl-border-soft)); border-radius: var(--cliq-loadmore-border-radius, var(--cliq-sl-radius-pill)); padding: var(--cliq-loadmore-padding, var(--cliq-sl-loadmore-pad, 9px 22px)); background: var(--cliq-loadmore-background, var(--cliq-sl-surface)); font-family: var(--cliq-loadmore-font-family, inherit); font-size: var(--cliq-loadmore-font-size, 13px); font-weight: var(--cliq-loadmore-font-weight, 600); color: var(--cliq-loadmore-color, var(--cliq-sl-label)); cursor: pointer; transition: background-color .2s ease, border-color .2s ease, color .2s ease; }
.cliq-sl .cliq-sl-loadmore:hover { padding: var(--cliq-loadmore-padding, var(--cliq-sl-loadmore-pad, 9px 22px)); border: var(--cliq-loadmore-border-width, 1px) solid var(--cliq-loadmore-hover-border-color, var(--cliq-sl-primary)); border-radius: var(--cliq-loadmore-border-radius, var(--cliq-sl-radius-pill)); background: var(--cliq-loadmore-hover-background, var(--cliq-loadmore-background, var(--cliq-sl-surface))); color: var(--cliq-loadmore-hover-color, var(--cliq-loadmore-color, var(--cliq-sl-primary))); }
.cliq-sl .cliq-sl-loadmore:disabled { opacity: .6; cursor: default; }
/* Lazy-load sentinel: invisible, but given height so IntersectionObserver
   fires a little before the visitor actually reaches the very bottom. */
.cliq-sl-loadmore-sentinel { height: 1px; margin-top: var(--cliq-sl-gap); }
.cliq-sl-results-tools { display: flex; align-items: center; justify-content: space-between; gap: var(--cliq-sl-gap); margin-bottom: var(--cliq-sl-gap); }
.cliq-sl .cliq-sl-results-tools__button,
.cliq-sl .cliq-sl-filter-drawer__header button,
.cliq-sl .cliq-sl-map-only-toggle { border: 0; border-radius: 0; background: none; color: inherit; font-weight: 600; cursor: pointer; }
/* View switcher (list | split | map). The map-only collapse already existed as
   .is-map-only; .is-list-only is its mirror, hiding the map column so the list
   takes the full width. Both animate through the same transition. */
.cliq-sl.is-list-only .cliq-sl-col--map { display: none; }
.cliq-sl.is-list-only .cliq-sl-col:not(.cliq-sl-col--map) { flex: 1 1 100%; max-width: 100%; grid-column: 1 / -1; }
/* inline-flex alone does NOT keep this narrow: as a grid item it is stretched
   by the default justify-self, so the tinted plate ran the full column width.
   width:fit-content + justify-self keeps the track hugging its own tabs. */
.cliq-sl-view-switcher { display: inline-flex; width: fit-content; justify-self: start; align-self: start; gap: 2px; padding: 5px; margin-bottom: var(--cliq-sl-gap); border-radius: var(--cliq-filter-btn-radius, 999px); background: color-mix(in srgb, currentColor 8%, transparent); }
.cliq-sl .cliq-sl-view-switcher__option { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border: 0; border-radius: inherit; background: none; color: inherit; font-weight: 600; font-size: .9rem; cursor: pointer; transition: background-color .2s ease, color .2s ease; }
.cliq-sl .cliq-sl-view-switcher__option:is(:hover, :focus-visible) { background: color-mix(in srgb, currentColor 10%, transparent); }
.cliq-sl .cliq-sl-view-switcher__option.is-active { background: var(--cliq-map-toggle-bg, var(--cliq-sl-primary)); color: var(--cliq-map-toggle-color, var(--cliq-sl-on-primary)); }

/* The filter button takes its colours from the LAYOUT (see LocatorApp's
   toggleVars), falling back to the site palette when the layout sets none. */
.cliq-sl .cliq-sl-results-tools__button { display: inline-flex; align-items: center; gap: 6px; padding: var(--cliq-sl-results-tool-pad, 9px 14px); border: 1px solid var(--cliq-filter-btn-border, var(--cliq-sl-border-soft)); border-radius: var(--cliq-filter-btn-radius, 0); background: var(--cliq-filter-btn-bg, transparent); color: var(--cliq-filter-btn-color, inherit); transition: background-color .2s ease, color .2s ease, border-color .2s ease; }
.cliq-sl .cliq-sl-results-tools__button.is-active { border-color: var(--cliq-map-toggle-bg, var(--cliq-sl-primary)); color: var(--cliq-map-toggle-bg, var(--cliq-sl-primary)); }
.cliq-sl .cliq-sl-results-tools__button:is(:hover, :focus, :active) { padding: var(--cliq-sl-results-tool-pad, 9px 14px); border: 1px solid var(--cliq-map-toggle-bg, var(--cliq-sl-primary)); border-radius: var(--cliq-filter-btn-radius, 0); background: var(--cliq-filter-btn-bg, transparent); color: var(--cliq-map-toggle-bg, var(--cliq-sl-primary)); }
.cliq-sl .cliq-sl-results-tools__button.is-active:is(:hover, :focus, :active) { border-color: var(--cliq-map-toggle-bg, var(--cliq-sl-primary)); color: var(--cliq-map-toggle-bg, var(--cliq-sl-primary)); }
/* The distance slider ships with its own blue. It has no per-layout setting, but
   every other control in the layout already resolves --cliq-map-toggle-bg to the
   layout's accent, so point the slider at the same value: one accent per layout,
   no extra settings to keep in sync. */
.cliq-sl {
	--cui-slider-selection-bg: var(--cliq-map-toggle-bg, var(--cliq-sl-primary));
	--cui-slider-handle-border: var(--cliq-map-toggle-bg, var(--cliq-sl-primary));
	--cui-slider-handle-border-focus: var(--cliq-map-toggle-bg, var(--cliq-sl-primary));
	--cui-slider-tick-active-bg: var(--cliq-map-toggle-bg, var(--cliq-sl-primary));
	--cui-slider-tooltip-bg: var(--cliq-map-toggle-bg, var(--cliq-sl-primary));
	--cui-slider-tooltip-color: var(--cliq-map-toggle-color, var(--cliq-sl-on-primary));
	--cui-slider-focus-ring: color-mix(in srgb, var(--cliq-map-toggle-bg, var(--cliq-sl-primary)) 30%, transparent);
}
.cliq-sl .cliq-sl-map-view-toggle { background: var(--cliq-map-toggle-bg) !important; color: var(--cliq-map-toggle-color) !important; transition: color .2s ease, background-color .2s ease, transform .2s ease; }
.cliq-sl .cliq-sl-map-view-toggle:hover { transform: translateY(-1px); }
.cliq-sl-filter-drawer { display: grid; gap: var(--cliq-sl-filter-drawer-gap, 18px); padding: var(--cliq-sl-filter-drawer-pad, 18px); border: 1px solid var(--cliq-sl-border-soft); background: var(--cliq-sl-surface); }
.cliq-sl-filter-drawer__header { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--cliq-sl-gap); }
.cliq-sl-filter-drawer__header button:last-child { justify-self: end; font-size: 26px; line-height: 1; }
.cliq-sl-filter-drawer__header button:disabled { opacity: .45; cursor: default; }
.cliq-sl-selected-detail { display: grid; gap: var(--cliq-sl-gap-lg, 14px); }
.cliq-sl-selected-detail .cliq-sl-back { justify-self: start; }
.cliq-sl.is-map-only .cliq-sl-row:not(:has(.cliq-sl-col--map)) { display: none; }
.cliq-sl.has-map-transition .cliq-sl-col { transform-origin: center; }
.cliq-sl.has-map-transition:not(.is-map-only) .cliq-sl-col:not(.cliq-sl-col--map) { animation: none; }
.cliq-sl.has-map-transition:not(.is-map-only) .cliq-sl-col--map { animation: cliq-sl-map-contract .36s ease both; }
.cliq-sl.is-map-only .cliq-sl-col:not(.cliq-sl-col--map) { position: absolute; visibility: hidden; opacity: 0; pointer-events: none; animation: none; }
.cliq-sl.is-map-only .cliq-sl-col--map { grid-column: 1 / -1 !important; animation: cliq-sl-map-expand .36s ease both; }
.cliq-sl.is-map-only .cliq-sl-col--map > .cliq-sl-cell:not(.cliq-sl-cell--map) { display: none !important; }
.cliq-sl.is-map-only .cliq-sl-cell--map { grid-column: 1 / -1 !important; }
.cliq-sl .cliq-sl-map-only-toggle { position: absolute; z-index: 500; top: 0; left: 0; padding: var(--cliq-sl-map-toggle-pad, 12px 16px); background: var(--cliq-sl-primary); color: var(--cliq-sl-on-primary); }
.cliq-sl.is-map-only { position: relative; }
@keyframes cliq-sl-map-expand { from { opacity: .72; transform: translateX(8%) scaleX(.92); } to { opacity: 1; transform: translateX(0) scaleX(1); } }
@keyframes cliq-sl-map-contract { from { opacity: .72; transform: translateX(-4%) scaleX(1.06); } to { opacity: 1; transform: translateX(0) scaleX(1); } }
.cliq-sl-result { cursor: pointer; }
/* The card is a focusable role="button"; suppress the browser's default focus
   outline (the dark line that flashed on click) — keyboard users still get a
   subtle ring via :focus-visible only. The ring follows the design's own
   corner radius — no radius is imposed here. */
.cliq-sl-result:focus { outline: none; }
.cliq-sl-result:focus-visible { box-shadow: 0 0 0 2px var(--cliq-sl-primary); }
/* Server-rendered (pre-hydration) cards: same gap variable the hydrated list
   uses (resultsContainerVars), so first paint can't show a spacing seam. */
.cliq-sl-ssr { display: flex; flex-direction: column; gap: var(--cliq-results-gap, 14px); }

/* Accordion results — one card per store that expands in place. The card IS the
   bound design's own container; we only add the click affordance + chevron.
   Geometry/shadow are tokens so a theme can retune them without a rebuild. */
.cliq-sl-acc { position: relative; cursor: pointer; transition: box-shadow .2s ease; }
.cliq-sl-acc.is-open { box-shadow: var(--cliq-sl-acc-open-shadow, 0 10px 30px rgba(15, 23, 42, 0.10)); }
.cliq-sl-acc__chev { position: absolute; inset-inline-end: var(--cliq-sl-acc-chev-inset, 18px); top: var(--cliq-sl-acc-chev-top, 26px); color: var(--cliq-sl-faint); font-size: var(--cliq-sl-acc-chev-size, 22px); line-height: 1; pointer-events: none; transition: transform .22s ease; z-index: 2; }
.cliq-sl-acc.is-open .cliq-sl-acc__chev { transform: rotate(90deg); }
/* (the `.cliq-widget-reveal` mechanics live in the shared design framework) */

/* Grouped accordion: category/brand/city/state/country heading followed by the
   regular design-driven store cards. The 0fr → 1fr grid transition keeps the
   open/close movement smooth without measuring content in JavaScript. */
.cliq-sl-group { border: 1px solid var(--cliq-sl-border-soft); background: var(--cliq-group-closed-bg, var(--cliq-sl-surface)); transition: background-color .22s ease; }
.cliq-sl-group.is-open { background: var(--cliq-group-open-bg, var(--cliq-group-closed-bg, var(--cliq-sl-surface))); }
.cliq-sl .cliq-sl-group__toggle { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: var(--cliq-sl-gap-sm); width: 100%; padding: var(--cliq-sl-group-head-pad, 14px 16px); border: 0; border-radius: 0; background: transparent; color: var(--cliq-sl-heading); font: inherit; font-weight: 700; text-align: start; cursor: pointer; }
.cliq-sl .cliq-sl-group__toggle:is(:hover, :focus, :active) { padding: var(--cliq-sl-group-head-pad, 14px 16px); border: 0; border-radius: 0; background: transparent; color: var(--cliq-sl-heading); }
.cliq-sl-group__count { min-width: 24px; padding: 2px 7px; border-radius: var(--cliq-group-count-radius, var(--cliq-sl-radius-pill)); background: var(--cliq-group-count-bg, var(--cliq-sl-border-soft)); color: var(--cliq-group-count-color, var(--cliq-sl-muted)); font-family: var(--cliq-group-count-font-family, inherit); font-size: var(--cliq-group-count-font-size, 12px); font-weight: var(--cliq-group-count-font-weight, inherit); text-align: center; }
.cliq-sl-group__chev { display: inline-flex; align-items: center; justify-content: center; color: var(--cliq-sl-faint); line-height: 1; }
.cliq-sl-group__reveal { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .28s ease; }
.cliq-sl-group.is-open .cliq-sl-group__reveal { grid-template-rows: 1fr; }
.cliq-sl-group__body { display: flex; flex-direction: column; gap: var(--cliq-results-gap, 14px); min-height: 0; overflow: hidden; }
.cliq-sl-group.is-open .cliq-sl-group__body { padding: 0 var(--cliq-sl-group-body-pad, 16px) var(--cliq-sl-group-body-pad, 16px); }

/* Category browser. Every category tile is fully design-driven (the Category
   tile builder). Columns + gap come from the Results widget's own settings
   ("Category tiles" panel: Min tile width / Row fill / Gap) via generated custom properties — see
   resultsContainerVars; literals here are only pre-hydration fallbacks. */
/* Fallback mirrors the "Row fill" control's own default (auto-fill) — a design
   that wants a lone tile to stretch sets tileColMode: auto-fit. */
.cliq-sl-catgrid { display: grid; grid-template-columns: var(--cliq-cat-cols, repeat(auto-fill, minmax(160px, 1fr))); gap: var(--cliq-cat-gap, 14px); }
/* The tile button is layout-INVISIBLE (display:contents): its box vanishes, so
   the bound design's container is the direct grid item — the builder governs
   the tile's size/alignment with nothing in between (same contract as
   .cliq-sl-result). Clicks bubble to the button; --cliq-auto-color set on the
   button still inherits to the design. */
.cliq-sl-cat { display: contents; }
.cliq-sl-cat > .cliq-widget-design { cursor: pointer; min-width: 0; }
.cliq-sl-cat:focus { outline: none; }
.cliq-sl-cat:focus-visible > .cliq-widget-design { box-shadow: 0 0 0 2px var(--cliq-sl-primary); }
/* Selected state for the Category-filter tiles mode (the tile stays visible and
   marks the active filter). The ring follows the design's own corner radius. */
.cliq-sl-cat.is-active > .cliq-widget-design { box-shadow: 0 0 0 2px var(--cliq-sl-primary); }
/* Category-filter tiles wrapper: optional label above the tile grid. */
.cliq-sl-cattiles { display: flex; flex-direction: column; gap: var(--cliq-sl-gap-sm); }
.cliq-sl-catdrill { display: flex; flex-direction: column; gap: var(--cliq-results-gap, 14px); }
.cliq-sl .cliq-sl-back { align-self: flex-start; border: 0; border-radius: 0; background: none; color: var(--cliq-sl-primary); font-weight: var(--cliq-sl-back-weight, 700); cursor: pointer; padding: var(--cliq-sl-back-pad, 4px 0); }
.cliq-sl .cliq-sl-back:is(:hover, :focus, :active) { padding: var(--cliq-sl-back-pad, 4px 0); border: 0; border-radius: 0; background: none; color: var(--cliq-sl-primary); }

.cliq-sl-map { width: 100%; height: 100%; border-radius: var(--cliq-sl-radius); overflow: hidden; z-index: 0; }
.cliq-sl-popup-body { min-width: var(--cliq-sl-popup-min-w, 220px); }
.cliq-sl-popup .leaflet-popup-content { margin: 0; width: auto !important; }
/* The popup chrome is intentionally style-free: background, corner radius,
   shadow and padding ALL come from the bound infobox design's container (it
   renders its own styled root inside the bubble), so the card looks exactly like
   the builder preview. We only strip the map library's default white box +
   padding so the design fills the bubble — no look is hardcoded here. */
.cliq-sl-popup .leaflet-popup-content-wrapper {
	padding: 0;
	background: transparent;
	box-shadow: none;
	border-radius: 0;
	overflow: visible;
}
.cliq-sl-popup .leaflet-popup-content p { margin: 0; }
/* Leaflet's pointer tip points at the marker; match it to the design background. */
.cliq-sl-popup .leaflet-popup-tip { background: var(--cliq-iw-bg, var(--cliq-sl-surface)); box-shadow: none; }

/* Google Maps InfoWindow: strip the default chrome (white box, padding, forced
   scroll area, empty header strip) so the bound infobox design fills the bubble.
   As with Leaflet, no radius/shadow is set here — those belong to the design's
   container. Only the pointer tail keeps a fill (--cliq-iw-bg) to stay visible. */
.gm-style .gm-style-iw-c {
	padding: 0 !important;
	max-width: none !important;
	background: transparent !important;
	box-shadow: none !important;
	border-radius: 0 !important;
	overflow: visible !important;
}
.gm-style .gm-style-iw-d {
	overflow: visible !important;
	max-height: none !important;
	padding: 0 !important;
	background: transparent !important;
}
.gm-style .gm-style-iw-tc::after,
.gm-style .gm-style-iw-t::after {
	background: var(--cliq-iw-bg, var(--cliq-sl-surface)) !important;
}
/* A direction-step popup (Google's own generated text, tagged
   `.cliq-direction-step` by GoogleProvider — see watchDirectionSteps) has no
   bound design of its own to supply a background the way a store's infobox
   does, so .gm-style-iw-c above being transparent leaves it as illegible bare
   text over the map. Give ONLY that case an explicit bubble background/shape. */
.gm-style .gm-style-iw-c:has(.cliq-direction-step) {
	background: var(--cliq-iw-bg, var(--cliq-sl-surface)) !important;
	border-radius: var(--cliq-sl-radius) !important;
	box-shadow: 0 8px 24px rgba(15, 23, 42, 0.18) !important;
}
.gm-style .gm-style-iw-d:has(.cliq-direction-step) {
	background: var(--cliq-iw-bg, var(--cliq-sl-surface)) !important;
	border-radius: var(--cliq-sl-radius) !important;
}
/* Collapse the empty title strip and float a clean, half-size close button over
   the content (12px glyph in an 18px tinted circle). */
.gm-style .gm-style-iw-chr {
	position: absolute;
	top: 0;
	right: 0;
	z-index: 2;
	height: 0;
	min-height: 0;
}
.gm-style .gm-style-iw-chr .gm-ui-hover-effect {
	width: 18px !important;
	height: 18px !important;
	min-width: 0 !important;
	margin: 6px !important;
	background: var(--cliq-sl-overlay) !important;
	border-radius: var(--cliq-sl-radius-pill) !important;
	box-shadow: none !important;
	opacity: 1 !important;
}
.gm-style .gm-style-iw-chr .gm-ui-hover-effect > span {
	width: 12px !important;
	height: 12px !important;
	margin: 3px !important;
	-webkit-mask-size: contain !important;
	mask-size: contain !important;
	background-color: var(--cliq-sl-on-primary) !important;
}
.cliq-sl-map img { max-width: none; }
.cliq-sl-map .leaflet-marker-icon { background: transparent; border: 0; }
/* HTML markers (markerType: html): Leaflet applies default chrome (white box +
   border) to every divIcon unless overridden — strip it so the marker design's
   own container styling (background, radius, shadow) is the only thing shown. */
.cliq-sl-html-marker { background: transparent; border: 0; }
.cliq-sl-html-marker .cliq-sl-marker-body { pointer-events: auto; }
/* Leaflet sizes a divIcon from its declared iconSize, which makes a marker
   label wrap onto several lines and clip. A marker is a compact tag, not a
   paragraph: let it size to its own content. A design that genuinely wants a
   wrapped, fixed-width marker sets a width on its container, which wins. */
.cliq-sl-html-marker { width: max-content; max-width: none; }
.cliq-sl-html-marker .cliq-sl-marker-body { white-space: nowrap; }
/* Both providers position the marker's un-transformed top-left at the pin's
   lat/lng — anchor bottom-center instead, so the card sits above the point.
   The transform lives on the design ROOT (the marker body's child), not the
   body itself, because the anchor offset for a pointer-tail design
   (--cliq-tail-offset) is emitted into the design's own GENERATED stylesheet
   on that root (buildDesignCss's tail branch) and custom properties don't
   ascend to parents. Bonus: the click animations (transform keyframes on the
   body) no longer fight the anchor transform. */
.cliq-sl-marker-body > .cliq-widget-design { transform: translate(-50%, calc(-100% - var(--cliq-tail-offset, 0px))); }

/* ===== Marker click animations (Leaflet) =====
   The provider toggles `.cliq-marker-anim--<type>` on the marker's icon element.
   We animate `top` (not transform) so Leaflet's own positioning isn't disturbed. */
.cliq-marker-anim--bounce { animation: cliq-marker-bounce 0.7s ease; }
@keyframes cliq-marker-bounce {
	0%, 100% { top: 0; }
	30% { top: -15px; }
	55% { top: -6px; }
	75% { top: -10px; }
}
.cliq-marker-anim--pulse { border-radius: 50%; animation: cliq-marker-pulse 0.9s ease-out; }
@keyframes cliq-marker-pulse {
	0% { box-shadow: 0 0 0 0 rgba(56, 88, 233, 0.5); }
	100% { box-shadow: 0 0 0 18px rgba(56, 88, 233, 0); }
}
.cliq-marker-anim--drop { animation: cliq-marker-drop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes cliq-marker-drop {
	0% { top: -42px; opacity: 0; }
	100% { top: 0; opacity: 1; }
}

/* ===== In-house directions panel (route + turn-by-turn steps) ===== */
/* Height is the widget's setting, delivered as a variable (never an inline
   CSS property) — see MapWidget in widgets.js. */
.cliq-sl-map-wrap {
	position: relative;
	display: grid;
	grid-template-columns: 0 minmax(0, 1fr);
	height: var(--cliq-sl-map-height, 480px);
	overflow: hidden;
	isolation: isolate;
	transition: grid-template-columns .42s cubic-bezier(.22, 1, .36, 1);
}
.cliq-sl-map-wrap.is-directions-open { grid-template-columns: var(--cliq-sl-directions-w, clamp(280px, 36%, 400px)) minmax(0, 1fr); }
.cliq-sl-map-wrap:fullscreen,
.cliq-sl-map-wrap.is-fullscreen {
	width: 100vw;
	height: 100vh;
	max-width: none;
	background: var(--cliq-sl-surface);
}
.cliq-sl-map-wrap:fullscreen :is(.glide-dropdown, .pac-container),
.cliq-sl-map-wrap.is-fullscreen :is(.glide-dropdown, .pac-container) {
	z-index: 10000 !important;
}
.cliq-sl-map-wrap > .cliq-sl-map { grid-column: 2; grid-row: 1; min-width: 0; height: 100%; }
.cliq-sl .cliq-sl-map-fullscreen {
	position: absolute;
	z-index: 540;
	top: 12px;
	inset-inline-end: 12px;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: 3px;
	background: var(--cliq-sl-surface);
	color: var(--cliq-sl-text);
	box-shadow: 0 2px 8px rgba(15, 23, 42, .2);
	cursor: pointer;
}
.cliq-sl .cliq-sl-map-fullscreen:hover { padding: 0; border: 0; border-radius: 3px; background: var(--cliq-sl-surface); color: var(--cliq-sl-primary); }
.cliq-sl .cliq-sl-map-fullscreen:focus-visible { outline: 2px solid var(--cliq-sl-primary); outline-offset: 2px; }
.cliq-sl-map-fullscreen svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cliq-sl-map-search-overlay {
	position: absolute;
	z-index: 500;
	top: var(--cliq-map-search-top, 20px);
	width: min(calc(100% - 32px), var(--cliq-map-search-width, 640px));
	pointer-events: none;
}
.cliq-sl-map-search-overlay > * { pointer-events: auto; }
.cliq-sl-map-search-overlay.is-left { left: 16px; }
.cliq-sl-map-search-overlay.is-center { left: 50%; transform: translateX(-50%); }
.cliq-sl-map-search-overlay.is-right { right: 16px; }
.cliq-sl-marker-navs {
	position: relative;
	z-index: 520;
	grid-column: 2;
	grid-row: 1;
	min-width: 0;
	pointer-events: none;
}
.cliq-sl .cliq-sl-marker-nav {
	position: absolute;
	top: 50%;
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	padding: 0;
	border: 0;
	border-radius: var(--cliq-sl-radius-pill);
	background: var(--cliq-marker-nav-bg, var(--cliq-sl-surface));
	color: var(--cliq-marker-nav-color, var(--cliq-sl-primary));
	box-shadow: 0 8px 24px rgba(15, 23, 42, .18);
	transform: translateY(-50%);
	cursor: pointer;
	pointer-events: auto;
	transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;
}
.cliq-sl .cliq-sl-marker-nav:hover { padding: 0; border: 0; border-radius: var(--cliq-sl-radius-pill); background: var(--cliq-marker-nav-bg, var(--cliq-sl-surface)); color: var(--cliq-marker-nav-color, var(--cliq-sl-primary)); transform: translateY(-50%) scale(1.06); box-shadow: 0 10px 28px rgba(15, 23, 42, .24); }
.cliq-sl .cliq-sl-marker-nav:focus-visible { outline: 2px solid var(--cliq-sl-primary); outline-offset: 3px; }
.cliq-sl .cliq-sl-marker-nav:disabled { opacity: .42; cursor: default; }
.cliq-sl-marker-navs.is-sides .cliq-sl-marker-nav--prev { inset-inline-start: 14px; }
.cliq-sl-marker-navs.is-sides .cliq-sl-marker-nav--next { inset-inline-end: 14px; }
.cliq-sl-marker-navs:is(.is-top-start, .is-top-center, .is-top-end) {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	padding: 14px;
}
.cliq-sl-marker-navs.is-top-start { justify-content: flex-start; }
.cliq-sl-marker-navs.is-top-center { justify-content: center; }
.cliq-sl-marker-navs.is-top-end { justify-content: flex-end; }
.cliq-sl-marker-navs:is(.is-top-start, .is-top-center, .is-top-end) .cliq-sl-marker-nav {
	position: relative;
	top: auto;
	transform: none;
}
.cliq-sl .cliq-sl-marker-navs:is(.is-top-start, .is-top-center, .is-top-end) .cliq-sl-marker-nav:hover { transform: scale(1.06); }
.cliq-sl-marker-nav svg {
	display: block;
	width: 20px;
	height: 20px;
	color: inherit;
	fill: none;
	stroke: currentColor !important;
}
.cliq-sl-marker-nav svg * { stroke: currentColor !important; }
@media (max-width: 600px) {
	.cliq-sl-map-search-overlay { width: calc(100% - 20px); }
	.cliq-sl-map-search-overlay.is-left,
	.cliq-sl-map-search-overlay.is-center,
	.cliq-sl-map-search-overlay.is-right { right: auto; left: 10px; transform: none; }
	.cliq-sl-marker-nav { width: 36px; height: 36px; }
	.cliq-sl-marker-navs.is-sides .cliq-sl-marker-nav--prev { inset-inline-start: 8px; }
	.cliq-sl-marker-navs.is-sides .cliq-sl-marker-nav--next { inset-inline-end: 8px; }
}
.cliq-sl-directions {
	position: relative;
	grid-column: 1;
	grid-row: 1;
	z-index: 2;
	min-width: 0;
	height: 100%;
	display: flex;
	flex-direction: column;
	background: var(--cliq-sl-surface);
	border-inline-end: 1px solid var(--cliq-sl-border-soft);
	box-shadow: var(--cliq-sl-directions-shadow, 8px 0 28px rgba(15, 23, 42, 0.14));
	overflow: hidden;
	opacity: 0;
	visibility: hidden;
	transform: translateX(-18px);
	pointer-events: none;
	transition: opacity .24s ease, transform .42s cubic-bezier(.22, 1, .36, 1), visibility 0s linear .42s;
}
.cliq-sl-map-wrap.is-directions-open .cliq-sl-directions,
.cliq-sl-directions.is-open { opacity: 1; visibility: visible; transform: translate(0); pointer-events: auto; transition-delay: 0s; }
.cliq-sl-directions--results {
	position: absolute;
	inset: 0;
	z-index: 30;
	width: 100%;
	height: 100%;
	border: 1px solid var(--cliq-sl-border-soft);
	box-shadow: var(--cliq-sl-directions-results-shadow, 0 12px 32px rgba(15, 23, 42, 0.18));
	transform: translateY(14px);
}
.cliq-sl-directions-host { display: contents; }
/* Keep the covered list's dimensions, but remove its controls/cards from the
   focus and paint order while the portalled directions panel is open. */
.cliq-sl-w--results.is-directions-overlay-open > :not(.cliq-sl-directions-host) { visibility: hidden; }
.cliq-sl-directions__head { display: flex; align-items: center; justify-content: space-between; gap: var(--cliq-sl-gap); padding: var(--cliq-sl-directions-head-pad, 11px 14px); background: var(--cliq-sl-primary-strong); color: var(--cliq-sl-on-primary); }
.cliq-sl-directions__head strong { font-size: var(--cliq-sl-directions-head-font, 12px); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.cliq-sl .cliq-sl-directions__close { border: 0; border-radius: 0; background: none; color: var(--cliq-sl-on-primary); font-size: var(--cliq-sl-directions-close-font, 20px); line-height: 1; cursor: pointer; padding: 0 2px; }
.cliq-sl .cliq-sl-directions__close:is(:hover, :focus, :active) { padding: 0 2px; border: 0; border-radius: 0; background: none; color: var(--cliq-sl-on-primary); }
.cliq-sl-directions__status { padding: 12px 14px; color: var(--cliq-sl-text-soft); font-size: var(--cliq-sl-directions-font, 13px); border-bottom: 1px solid var(--cliq-sl-border-soft); }
.cliq-sl-directions__status.is-error { color: var(--cliq-sl-danger); background: var(--cliq-sl-danger-bg); }
.cliq-sl-directions__from { display: flex; gap: 8px; padding: 10px 14px; font-size: var(--cliq-sl-directions-font, 13px); color: var(--cliq-sl-text-soft); border-bottom: 1px solid var(--cliq-sl-border-soft); }
.cliq-sl-directions__summary { padding: 8px 14px; font-weight: 700; color: var(--cliq-sl-heading); font-size: var(--cliq-sl-directions-font, 13px); border-bottom: 1px solid var(--cliq-sl-border-soft); }
/* Steps region fills the remaining panel height (full-height panel) and scrolls. */
.cliq-sl-directions__steps { flex: 1 1 auto; width: 100%; max-width: 100%; min-width: 0; min-height: 0; overflow-x: hidden; overflow-y: auto; padding: 2px 5px 2px 0; scrollbar-width: thin; scrollbar-color: var(--cliq-sl-faint) transparent; }
.cliq-sl-directions__steps::-webkit-scrollbar { width: 3px; }
.cliq-sl-directions__steps::-webkit-scrollbar-track { background: transparent; }
.cliq-sl-directions__steps::-webkit-scrollbar-thumb { border-radius: 999px; background: var(--cliq-sl-faint); }
@media (max-width: 640px) {
	.cliq-sl-map-wrap.is-directions-open { grid-template-columns: var(--cliq-sl-directions-mobile-w, min(82%, 340px)) minmax(0, 1fr); }
}
/* The on-map step popup (Google's .gm-iw, tagged by GoogleProvider) — a stable
   hook so the directions-step bubble can be styled cleanly. */
/* Text colour is injected from the infobox design (--cliq-iw-color) so the step
   text is readable on the inherited background; falls back to the theme colours. */
/* !important on every colour: Google's generated step markup (b/div children)
   carries its own inline text colour, which normal specificity/inheritance
   can't override. */
.cliq-direction-step { padding: 8px 10px; font-size: var(--cliq-sl-directions-font, 13px); line-height: 1.4; color: var(--cliq-iw-color, var(--cliq-sl-heading)) !important; }
.cliq-direction-step b { font-weight: 600; color: var(--cliq-iw-color, var(--cliq-sl-heading)) !important; }
.cliq-direction-step div { color: var(--cliq-iw-color, var(--cliq-sl-muted)) !important; opacity: 0.8; }
/* Google DirectionsRenderer renders its default `.adp` table into the panel —
   restyle it into clean, evenly-spaced rows that match the panel chrome. */
.cliq-sl-directions__steps .adp { width: 100%; max-width: 100%; min-width: 0; padding: 0; color: var(--cliq-sl-text); box-sizing: border-box; }
/* Origin (A) / destination (B) address cards. */
.cliq-sl-directions__steps .adp-placemark {
	width: calc(100% - 28px) !important;
	max-width: calc(100% - 28px);
	table-layout: fixed;
	margin: 12px 14px;
	border: 0;
	border-radius: var(--cliq-sl-radius);
	background: var(--cliq-sl-divider);
	box-shadow: none;
}
.cliq-sl-directions__steps .adp-placemark td { padding: 10px 12px; font-size: var(--cliq-sl-directions-font-sm, 12.5px); line-height: 1.4; color: var(--cliq-sl-text-soft); border: 0; }
.cliq-sl-directions__steps .adp-placemark td:first-child { width: 42px; padding-inline-end: 0; }
.cliq-sl-directions__steps .adp-placemark td:last-child { min-width: 0; white-space: normal; overflow-wrap: anywhere; word-break: break-word; }
.cliq-sl-directions__steps .adp-placemark img { vertical-align: top; }
/* Distance / duration summary line ("1.2 km · About 7 mins"). */
.cliq-sl-directions__steps .adp-summary { padding: 10px 14px; font-weight: 700; font-size: var(--cliq-sl-directions-font, 13px); color: var(--cliq-sl-heading); border-bottom: 1px solid var(--cliq-sl-border-soft); }
/* Turn-by-turn step table. */
.cliq-sl-directions__steps .adp-directions { width: 100% !important; max-width: 100%; table-layout: fixed; border-collapse: collapse; font-size: var(--cliq-sl-directions-font-sm, 12.5px); }
.cliq-sl-directions__steps .adp-directions td { padding: 11px 12px; border: 0; border-top: 1px solid var(--cliq-sl-divider); vertical-align: top; line-height: 1.45; background: transparent; }
.cliq-sl-directions__steps .adp-directions td:first-child { width: 48px; }
.cliq-sl-directions__steps .adp-directions tr:first-child td { border-top: 0; }
.cliq-sl-directions__steps .adp-directions tr:hover td { background: var(--cliq-sl-divider); }
.cliq-sl-directions__steps .adp-substep { border: 0 !important; }
.cliq-sl-directions__steps .adp-stepicon { vertical-align: middle; }
.cliq-sl-directions__steps .adp-text { min-width: 0; color: var(--cliq-sl-text); white-space: normal; overflow-wrap: anywhere; word-break: break-word; }
.cliq-sl-directions__steps .adp-distance { width: 76px; color: var(--cliq-sl-muted); white-space: nowrap; text-align: end; font-variant-numeric: tabular-nums; }
.cliq-sl-directions__steps .adp-legal { padding: 8px 14px; font-size: 11px; color: var(--cliq-sl-faint); }
/* OSRM (Leaflet) custom step list. */
.cliq-sl-dir__sum { padding: 9px 14px; font-weight: 700; color: var(--cliq-sl-heading); font-size: var(--cliq-sl-directions-font, 13px); border-bottom: 1px solid var(--cliq-sl-border-soft); }
.cliq-sl-dir__steps { list-style: none; margin: 0; padding: 0; }
.cliq-sl-dir__steps li { display: flex; align-items: baseline; gap: 8px; padding: 8px 14px; border-bottom: 1px solid var(--cliq-sl-divider); font-size: var(--cliq-sl-directions-font-sm, 12.5px); }
.cliq-sl-dir__n { font-weight: 700; color: var(--cliq-sl-faint); min-width: 16px; }
.cliq-sl-dir__t { flex: 1; color: var(--cliq-sl-text-soft); text-transform: capitalize; }
.cliq-sl-dir__d { font-weight: 700; color: var(--cliq-sl-primary-strong); white-space: nowrap; }

/* ===== Store List print sheet =====
   The live Results widget is cloned directly under <body> before printing.
   That preserves authored card/design CSS but prevents the theme, map, search
   form, and surrounding page from becoming part of the print job. */
.cliq-sl-print-sheet { display: none; }

@media print {
	body.cliq-sl-is-printing > :not(.cliq-sl-print-sheet) { display: none !important; }
	body.cliq-sl-is-printing > .cliq-sl-print-sheet {
		display: block !important;
		width: 100% !important;
		max-width: none !important;
		margin: 0 !important;
		padding: 0 !important;
		background: #fff !important;
	}
	.cliq-sl-print-sheet,
	.cliq-sl-print-sheet * {
		-webkit-print-color-adjust: exact !important;
		print-color-adjust: exact !important;
	}
	.cliq-sl-print-sheet img {
		visibility: visible !important;
		opacity: 1 !important;
	}
	.cliq-sl-print-sheet .cliq-sl-print-content,
	.cliq-sl-print-sheet .cliq-widget-results,
	.cliq-sl-print-sheet .cliq-sl-results,
	.cliq-sl-print-sheet .cliq-sl-acc-list,
	.cliq-sl-print-sheet .cliq-sl-group-list,
	.cliq-sl-print-sheet .cliq-sl-catbrowse {
		height: auto !important;
		max-height: none !important;
		overflow: visible !important;
	}
	.cliq-sl-print-sheet .cliq-sl-result,
	.cliq-sl-print-sheet .cliq-sl-accordion__item,
	.cliq-sl-print-sheet .cliq-sl-group {
		break-inside: avoid;
		page-break-inside: avoid;
	}
	/* Paper cannot be expanded: every accordion detail row prints open. The
	   clone is force-opened in printStoreList.mjs; this defeats the collapsed
	   `grid-template-rows: 0fr` (and its transition) unconditionally, so a row
	   the visitor never opened still prints. */
	.cliq-sl-print-sheet .cliq-widget-reveal {
		display: block !important;
		grid-template-rows: 1fr !important;
		transition: none !important;
	}
	.cliq-sl-print-sheet .cliq-widget-reveal__inner {
		overflow: visible !important;
		min-height: 0 !important;
	}
	/* A wrapping flex row otherwise sizes each cloned wrapper from its card's
	   intrinsic content, producing different widths in the print compositor.
	   Grid gives every printed card a definite, repeatable track. */
	.cliq-sl-print-sheet .cliq-widget-results--row {
		display: grid !important;
		grid-template-columns: repeat(auto-fill, minmax(min(var(--cliq-results-card-w, 100%), 100%), 1fr));
		align-items: start;
	}
	.cliq-sl-print-sheet .cliq-widget-results > .cliq-sl-result {
		width: 100% !important;
		max-width: 100% !important;
	}
}
