/**
 * Visitor-facing store-locator styles: the `.cliq-sl-*` chrome for the locator
 * widgets, gallery, map and store-detail page. The shared `.cliq-widget-*` design
 * framework is imported from cliq-ui (not duplicated) so rendered list_item /
 * infobox designs look identical to the builder preview.
 *
 * COLOURS: every colour is a CSS variable (palette below) so a theme can re-skin
 * the locator without overriding rules. The builder owns the look of rendered
 * DESIGN elements (.cliq-widget-*); these styles only cover interactive chrome
 * the builder doesn't render (inputs, chips, map popups, directions panel).
 *
 * ── STYLESHEET CONTRACT ─────────────────────────────────────────────────────
 * The builder is the single source of a design's layout and look. This file may
 * ONLY contain:
 *   (a) resets — stripping browser/theme chrome (see the Reset section);
 *   (b) structural/chrome rules whose every value is `var(--…, fallback)` —
 *       fed by builder/widget settings (--cliq-results-*, --cliq-col-gap, …)
 *       or by the --cliq-sl-* theme tokens.
 * Any fixed layout/look literal outside a var() fallback is a BUG — put a
 * builder control or token behind it instead. Widget wrappers follow ONE
 * hierarchy: cell → .cliq-sl-w.cliq-sl-w--<type> (zero CSS) → content.
 * Explicitly allowed literals: focus-ring geometry (a11y affordance),
 * @keyframes motion values, and restyles of THIRD-PARTY injected markup the
 * builder can never render (Google/Leaflet map chrome, .adp directions
 * tables, Swiper) — annotated at each section.
 * ────────────────────────────────────────────────────────────────────────────
 */

/* ===== Shared design framework =====
   The `.cliq-widget-*` rendered-design primitives are the SINGLE SOURCE in cliq-ui
   (resources/shared/design.scss), imported here so the live site matches the
   builder preview byte-for-byte. No duplication. */
@use '@cliqui/design-runtime/design';

/* WordPress themes (notably Twenty Twenty-Five) inject a global focus outline
   into every descendant of the site blocks. Keep that theme chrome outside our
   app roots; individual locator controls provide their own scoped focus states. */
.cliq-sl-root :focus,
.cliq-sl-form-root :focus,
.cliq-sl-store-detail :focus { outline: none !important; }

/* ===== Design tokens (override these vars in a theme to re-skin) =====
   Every visual value used anywhere below — colour, radius, spacing, type —
   is a variable here, never a literal repeated at the point of use. This is
   also why BuilderControls::itemDefaults() (PHP) writes fallback-guarded
   var(--cliq-sl-*, <literal>) instead of a bare literal: the SAME token
   drives the live frontend (where these are defined) and the admin builder
   preview (a different stylesheet scope, where the fallback applies). */
:root {
	--cliq-sl-primary: #3858e9;
	--cliq-sl-primary-strong: #1d4ed8;
	--cliq-sl-on-primary: #fff;
	--cliq-sl-canvas: #fff;
	--cliq-sl-on-canvas: #0f172a;
	--cliq-sl-surface: #fff;
	--cliq-sl-text: #1e293b;
	--cliq-sl-heading: #0f172a;
	--cliq-sl-text-soft: #334155;
	--cliq-sl-label: #475569;
	--cliq-sl-muted: #64748b;
	--cliq-sl-faint: #94a3b8;
	--cliq-sl-border: #d5d8dc;
	--cliq-sl-border-soft: #e2e8f0;
	--cliq-sl-divider: #f1f5f9;
	--cliq-sl-danger: #b91c1c;
	--cliq-sl-danger-bg: #fef2f2;
	--cliq-sl-overlay: rgba(15, 23, 42, 0.4);
	--cliq-sl-shadow: rgba(15, 23, 42, 0.16);
	/* Shape/spacing/type scale — structural defaults, not colour. Corner
	   rounding defaults to 0 EVERYWHERE: rounded corners are a design opinion
	   that belongs to the theme (override these tokens) or the admin's own
	   per-item Border controls — never baked into the base. Every radius in
	   this stylesheet and in itemDefaults() resolves through these tokens. */
	--cliq-sl-radius: 0;
	--cliq-sl-radius-sm: 0;
	--cliq-sl-radius-pill: 999px; /* chips/close buttons: pill SHAPE, not rounding */
	/* Framework-layer alias: cliq-ui's design.scss (gallery etc.) consumes the
	   generic --cliq-radius so it stays consumer-agnostic; map it to ours. */
	--cliq-radius: var(--cliq-sl-radius);
	--cliq-sl-gap: 8px;
	--cliq-sl-gap-sm: 5px;
	--cliq-sl-font-family: inherit;
	--cliq-sl-font-size: 14px;
	--cliq-sl-control-height: 46px;
	/* Base motion (design.scss's .cliq-widget transition consumes these). */
	--cliq-transition-duration: 0.4s;
	--cliq-transition-easing: ease-in-out;
	/* Further override points (defaults live inline as var() fallbacks — set any
	   of these here or in a theme to retune the chrome, no rebuild needed):
	   --cliq-sl-row-gap, --cliq-sl-label-size/-weight/-gap,
	   --cliq-sl-textarea-min-h, --cliq-btn-icon-gap,
	   --cliq-sl-choice-size, --cliq-sl-toggle-track-w/-track-h/-thumb,
	   --cliq-sl-rangeval-weight/-min-w, --cliq-sl-chip-pad/-font-size/-weight,
	   --cliq-sl-count-gap/-print-weight, --cliq-sl-empty-pad/-radius,
	   --cliq-sl-loadmore-pad, --cliq-sl-back-weight/-pad,
	   --cliq-sl-acc-open-shadow, --cliq-sl-acc-chev-inset/-top/-size,
	   --cliq-sl-popup-min-w, --cliq-sl-directions-w/-inset/-shadow/-head-pad/
	   -head-font/-close-font/-font/-font-sm, --cliq-col-gap,
	   --cliq-scroll-gutter, --cliq-gallery-* (see cliq-ui design.scss). */
}

/* ===== Reset — normalise browser defaults BEFORE any theming, so the SAME
   declared background/border/radius below renders identically regardless of
   browser default form-control chrome. ===== */
/* Every selector goes through :where() so the whole reset weighs (0,1,0) —
   ANY themed rule (the builder's generated .scope .cliq-widget-n-<id> rules,
   the base rules below) beats it. Without this, the :not([type=…]) chain
   alone inflates to (0,4,1) and silently overpowers the generated styling. */
.cliq-sl, .cliq-sl *, .cliq-sl *::before, .cliq-sl *::after { box-sizing: border-box; }
.cliq-sl :where(button, input, select, textarea) {
	margin: 0;
	font-family: inherit;
	font-size: 100%;
	line-height: inherit;
	color: inherit;
}
.cliq-sl :where(button, [type="button"], [type="submit"]) { -webkit-appearance: none; appearance: none; background: none; }
/* range is EXCLUDED — the vendored slider control (SliderControl/cui-slider)
   hides it itself once mounted, and pre-hydration it relies on native
   rendering for its track+thumb, which appearance:none would strip with no
   fallback. checkbox/radio are NOT excluded — cliq-sl-choice__input/
   cliq-sl-toggle__input are visually hidden entirely (see .cliq-sl-choice /
   .cliq-sl-toggle below) in favour of a custom box/switch sibling, so their
   own appearance never shows regardless. */
.cliq-sl :where(input:not([type="range"]), select, textarea) { -webkit-appearance: none; appearance: none; background: none; border: 0; }
.cliq-sl :where(ul, ol) { margin: 0; padding: 0; list-style: none; }

/* Theme-resistance for controls owned by the locator. Do not target every
   descendant button: Google Maps and Leaflet inject their own controls inside
   `.cliq-sl-map` and must retain provider styling. Plugin controls consistently
   carry a `cliq-sl-*` class; the repeated root deliberately outranks common
   theme rules such as `button:hover` and `[type=button]:hover` without !important.
   Individual component rules below still own background, padding and radius. */
/* `margin` is excluded for controls that own their own spacing: this reset
   outranks their component rule, and silently flattened Load more against the
   last card. Add a control here only if its margin really is theme noise. */
.cliq-sl.cliq-sl button[class*="cliq-sl-"] {
	-webkit-appearance: none;
	appearance: none;
	font-family: inherit;
	text-decoration: none;
	text-transform: none;
	letter-spacing: normal;
}
.cliq-sl.cliq-sl button[class*="cliq-sl-"]:not(.cliq-sl-loadmore) { margin: 0; }
.cliq-sl.cliq-sl button.cliq-sl-result {
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: inherit;
	font: inherit;
	text-align: inherit;
}
.cliq-sl.cliq-sl button.cliq-sl-result:is(:hover, :focus, :active) {
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: inherit;
}

/* ===== Locator chrome ===== */
.cliq-sl, .cliq-sl-form-root, .cliq-sl-store-detail { font-family: var(--cliq-sl-font-family, inherit); }
.cliq-sl { width: 100%; background: var(--cliq-sl-canvas); font-size: var(--cliq-sl-font-size); color: var(--cliq-sl-text); }
.cliq-sl-row { margin-bottom: var(--cliq-sl-row-gap, 16px); }
.cliq-sl-cell { min-width: 0; }
.cliq-sl-loading, .cliq-sl-error { padding: var(--cliq-sl-loading-pad, 40px); text-align: center; color: var(--cliq-sl-muted); }
.cliq-sl-search-error { margin: 0 0 var(--cliq-sl-gap-lg, 12px); padding: var(--cliq-sl-alert-pad, 10px 14px); border-radius: var(--cliq-sl-radius-sm); background: var(--cliq-sl-danger-bg); color: var(--cliq-sl-danger); font-size: var(--cliq-sl-font-size); }

/* Location confirmation shown before invoking the browser permission prompt.
   It belongs to the map widget, not the viewport: a compact on-map card keeps
   the visitor's context and never blocks unrelated page content. */
.cliq-sl-location-prompt {
	position: absolute;
	inset: 0;
	z-index: 900;
	display: grid;
	place-items: center;
	padding: var(--cliq-sl-location-modal-gutter, 16px);
	background: var(--cliq-sl-overlay);
}
.cliq-sl-location-prompt__dialog {
	position: relative;
	width: min(100%, var(--cliq-sl-location-modal-width, 380px));
	padding: var(--cliq-sl-location-modal-pad, 24px);
	border-radius: var(--cliq-sl-location-modal-radius, 12px);
	background: var(--cliq-sl-surface);
	box-shadow: 0 18px 44px var(--cliq-sl-shadow);
	text-align: center;
}
.cliq-sl .cliq-sl-location-prompt__close {
	position: absolute;
	top: var(--cliq-sl-location-close-inset, 10px);
	right: var(--cliq-sl-location-close-inset, 10px);
	width: 30px;
	height: 30px;
	border: 0;
	color: var(--cliq-sl-heading);
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
}
.cliq-sl-location-prompt__icon {
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	margin: 0 auto 14px;
	border-radius: var(--cliq-sl-radius-pill);
	background: color-mix(in srgb, var(--cliq-sl-primary) 14%, var(--cliq-sl-surface));
	color: var(--cliq-sl-primary);
}
.cliq-sl-location-prompt__icon svg { width: 27px; height: 27px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.cliq-sl-location-prompt__dialog h2 { margin: 0; color: var(--cliq-sl-heading); font-size: var(--cliq-sl-location-title-size, 20px); line-height: 1.25; }
.cliq-sl-location-prompt__dialog p { margin: 9px 0 18px; color: var(--cliq-sl-muted); font-size: var(--cliq-sl-location-message-size, 14px); line-height: 1.45; }
.cliq-sl .cliq-sl-location-prompt__confirm {
	width: 100%;
	min-height: 42px;
	padding: 9px 16px;
	border: 0;
	border-radius: var(--cliq-sl-location-button-radius, var(--cliq-sl-radius));
	background: var(--cliq-sl-primary);
	color: var(--cliq-sl-on-primary);
	font-weight: 700;
	cursor: pointer;
}
.cliq-sl .cliq-sl-location-prompt__confirm:disabled,
.cliq-sl .cliq-sl-location-prompt__close:disabled { opacity: .65; cursor: wait; }
.cliq-sl .cliq-sl-location-prompt__close:is(:hover, :focus, :active) { padding: 0; border: 0; background: none; color: var(--cliq-sl-heading); }
.cliq-sl .cliq-sl-location-prompt__confirm:is(:hover, :focus, :active) { padding: 9px 16px; border: 0; border-radius: var(--cliq-sl-location-button-radius, var(--cliq-sl-radius)); background: var(--cliq-sl-primary); color: var(--cliq-sl-on-primary); }

/* Directions origin picker reuses the on-map location modal but adds a real
   address path for visitors who deny browser geolocation. Google Places owns
   the suggestions when configured; the text field remains usable as a geocode
   fallback when Places is unavailable. */
.cliq-sl-directions-origin-prompt__dialog { width: min(100%, var(--cliq-sl-directions-origin-width, 440px)); text-align: start; }
.cliq-sl-directions-origin-prompt__dialog .cliq-sl-location-prompt__icon { margin-inline: auto; }
.cliq-sl-directions-origin-prompt__dialog h2,
.cliq-sl-directions-origin-prompt__dialog > p { text-align: center; }
.cliq-sl-directions-origin-form { display: flex; flex-direction: column; gap: 12px; }
.cliq-sl-directions-origin-form__field { display: flex; flex-direction: column; gap: 6px; color: var(--cliq-sl-label); font-size: 12px; font-weight: 700; }
.cliq-sl-directions-origin-form__input {
	width: 100%;
	height: 46px;
	margin: 0;
	padding: 10px 12px !important;
	border: 1px solid var(--cliq-sl-border) !important;
	border-radius: var(--cliq-sl-radius-sm) !important;
	outline: 0;
	background: var(--cliq-sl-surface) !important;
	box-shadow: none !important;
	color: var(--cliq-sl-text) !important;
	font: inherit;
}
.cliq-sl-directions-origin-form__input:focus { border-color: var(--cliq-sl-primary) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--cliq-sl-primary) 16%, transparent) !important; }
.cliq-sl-directions-origin-form__error { padding: 9px 11px; border-radius: var(--cliq-sl-radius-sm); background: var(--cliq-sl-danger-bg); color: var(--cliq-sl-danger); font-size: 12px; line-height: 1.4; }
.cliq-sl-directions-origin-form__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cliq-sl .cliq-sl-directions-origin-form__locate {
	min-height: 42px;
	padding: 9px 14px;
	border: 1px solid var(--cliq-sl-border);
	border-radius: var(--cliq-sl-location-button-radius, var(--cliq-sl-radius));
	background: var(--cliq-sl-surface);
	color: var(--cliq-sl-primary);
	font-weight: 700;
	cursor: pointer;
}
.cliq-sl .cliq-sl-directions-origin-form__locate:is(:hover, :focus, :active) { padding: 9px 14px; border: 1px solid var(--cliq-sl-primary); border-radius: var(--cliq-sl-location-button-radius, var(--cliq-sl-radius)); background: color-mix(in srgb, var(--cliq-sl-primary) 7%, var(--cliq-sl-surface)); color: var(--cliq-sl-primary); }
.cliq-sl .cliq-sl-directions-origin-form__locate:disabled { opacity: .65; cursor: wait; }
.pac-container { z-index: 10000 !important; }

@media (max-width: 480px) {
	.cliq-sl-directions-origin-form__actions { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
	.cliq-sl-location-prompt__dialog { padding: 22px 18px 18px; }
}

.cliq-sl-w__label { display: block; font-size: var(--cliq-sl-label-size, 12px); font-weight: var(--cliq-sl-label-weight, 600); color: var(--cliq-sl-on-canvas); margin-bottom: var(--cliq-sl-label-gap, 6px); }

/* ===== Search form — STRUCTURAL ONLY below this line =====
   Every field (text/select/checkbox/radio/toggle/range) and button
   (submit/geocode) carries a nodeClass()-attached cliq-widget-n-<id> hook —
   the SAME per-item CSS system every other builder-placed item uses. Visual
   appearance (background/border/radius/padding/colour/font) comes ENTIRELY
   from that: the admin's own override if set, else the shared 'input' or
   'button' look in BuilderControls::itemDefaults() (single-sourced, also
   variable-based). Nothing visual belongs in this file for these elements —
   only the layout mechanics buildDesignCss() doesn't already cover. */
.cliq-sl-ff { display: flex; flex-direction: column; gap: var(--cliq-sl-label-gap, 6px); min-width: 0; }
/* Every builder field has the same two-part contract: one predictable label
   row and one control row. The control row gives compact controls (notably a
   toggle) the same vertical footprint as text/select/range controls, so grid
   alignment never moves one field's label down. Labels remain one line and
   truncate cleanly instead of changing the row height. */
.cliq-sl-ff > .cliq-sl-w__label {
	width: 100%;
	min-width: 0;
	min-height: 1.25em;
	margin: 0;
	overflow: var(--cliq-sl-label-overflow, hidden);
	color: var(--cliq-sl-label-color, var(--cliq-sl-on-canvas));
	font-family: var(--cliq-sl-label-font-family, inherit);
	font-size: var(--cliq-sl-label-size, 12px);
	font-weight: var(--cliq-sl-label-weight, 600);
	line-height: var(--cliq-sl-label-line-height, 1.25);
	text-overflow: var(--cliq-sl-label-text-overflow, ellipsis);
	white-space: var(--cliq-sl-label-white-space, nowrap);
}
.cliq-sl-ff__control {
	display: flex;
	align-items: center;
	width: 100%;
	height: auto;
	min-width: 0;
	min-height: var(--cliq-sl-field-height, var(--cliq-sl-control-height));
	margin: 0;
}
.cliq-sl-ff__control.is-fluid-control {
	min-height: var(--cliq-sl-field-height, var(--cliq-sl-control-height));
}
.cliq-sl-ff__control > :is(.cliq-sl-location-control, .cliq-sl-glidewrap, .cliq-sl-rangewrap, .cliq-sl-choices, .cliq-sl-textinput, .cliq-sl-location-input, .cliq-sl-textarea) {
	width: 100%;
	min-width: 0;
}
/* Single-line controls share a minimum height rather than a forced height.
   This preserves predictable alignment while allowing builder-owned padding
   and larger content to increase the rendered control naturally. */
.cliq-sl-textinput,
.cliq-sl-location-input,
.cliq-sl-glidewrap select {
	height: auto;
	min-height: var(--cliq-sl-field-height, var(--cliq-sl-control-height));
	box-sizing: border-box;
}
.cliq-sl-glide {
	--glide-control-min-height: var(--cliq-sl-field-height, var(--cliq-sl-control-height));
}
.cliq-sl-glide .glide-control {
	height: auto;
	min-height: var(--cliq-sl-field-height, var(--cliq-sl-control-height));
}
.cliq-sl-glide .glide-clear {
	width: max(14px, min(20px, calc(var(--cliq-sl-field-height, var(--cliq-sl-control-height)) - 4px)));
	height: max(14px, min(20px, calc(var(--cliq-sl-field-height, var(--cliq-sl-control-height)) - 4px)));
}
.cliq-sl-rangewrap,
.cliq-sl-search__btn,
.cliq-sl-search__geo {
	height: auto;
	min-height: var(--cliq-sl-field-height, var(--cliq-sl-control-height));
	box-sizing: border-box;
}
textarea.cliq-sl-textarea { height: auto; min-height: var(--cliq-sl-textarea-min-h, 96px); }

/* Interaction polish — additive, so the builder's colours/border still win. */
.cliq-sl-textinput,
.cliq-sl-location-input,
.cliq-sl-glide .glide-control {
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.cliq-sl-glide .glide-control {
	width: 100%;
	margin: 0;
	box-sizing: border-box;
}
/* Glide's searchable input sits inside the rendered control. Global theme
   input rules (Astra includes padding, borders and a minimum height) must not
   be allowed to change the select's measured height. */
.cliq-sl-glide input.glide-input {
	appearance: none;
	height: auto;
	min-height: 0;
	margin: 0;
	padding: 2px 0;
	border: 0;
	border-radius: 0;
	outline: 0;
	background: transparent;
	box-shadow: none;
	color: inherit;
	font: inherit;
}
.cliq-sl-glide input.glide-input--collapsed {
	flex: 0 0 0;
	width: 0;
	min-width: 0;
	padding: 0;
}
.cliq-sl-glide input.glide-input--visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
}
.cliq-sl-textinput:hover,
.cliq-sl-location-input:hover { border-color: var(--cliq-sl-faint, #94a3b8); }
.cliq-sl-textinput:focus,
.cliq-sl-location-input:focus {
	outline: none;
	border-color: var(--cliq-sl-primary, #3858e9);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--cliq-sl-primary, #3858e9) 20%, transparent);
}
.cliq-sl-location-control { position: relative; display: block; width: 100%; min-width: 0; height: 100%; }
.cliq-sl-location-control .cliq-sl-location-input { padding-inline-end: var(--cliq-sl-location-action-space, var(--cliq-sl-field-height, 48px)); }
.cliq-sl .cliq-sl-location-action {
	position: absolute;
	z-index: 2;
	top: 2px;
	inset-inline-end: 2px;
	display: grid;
	place-items: center;
	width: max(16px, calc(var(--cliq-sl-field-height, var(--cliq-sl-control-height)) - 4px));
	height: calc(100% - 4px);
	min-height: 0;
	padding: 0;
	border: 0;
	border-inline-start: 1px solid var(--cliq-sl-border-soft);
	border-radius: calc(var(--cliq-sl-radius) - 2px);
	background: var(--cliq-sl-divider);
	color: var(--cliq-sl-text);
	cursor: pointer;
}
.cliq-sl .cliq-sl-location-action:hover { padding: 0; border: 0; border-inline-start: 1px solid var(--cliq-sl-border-soft); border-radius: calc(var(--cliq-sl-radius) - 2px); background: var(--cliq-sl-border-soft); color: var(--cliq-sl-primary); }
.cliq-sl .cliq-sl-location-action:focus-visible { outline: 2px solid var(--cliq-sl-primary); outline-offset: 1px; }
.cliq-sl-location-action svg {
	width: max(12px, min(21px, calc(var(--cliq-sl-field-height, var(--cliq-sl-control-height)) - 8px)));
	height: max(12px, min(21px, calc(var(--cliq-sl-field-height, var(--cliq-sl-control-height)) - 8px)));
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}
/* :not(.glide-input) — a searchable GlideSelect's own internal search <input>
   also lives inside .cliq-sl-ff (nested under .cliq-sl-glidewrap); without
   this exclusion its normally-invisible "collapsed" state (width:0, per
   glide.css) gets overridden by this rule's width:100%, showing a stray white
   pill instead of the placeholder/value text. */
.cliq-sl-ff input:not(.glide-input) { width: 100%; }
/* Structural only — a search-form select's LOOK is painted by the builder's
   generated rule on Glide's own control element (the n-hook is added to it at
   init, see widgets.js GlideSelect), keeping the library's open-state
   geometry (panel fused to the control) intact. The SSR pre-swap native
   <select> carries the same hook, so it paints identically until Glide mounts. */
.cliq-sl-glidewrap { width: 100%; }
.cliq-sl-glidewrap select { width: 100%; margin: 0; }
/* Stacked form rows otherwise touch: the row's own `gap` is the gap BETWEEN its
   columns, and nothing spaces one row from the next — so a second row's labels
   sit flush against the controls above them. An authored row margin still wins
   (its generated rule is scoped and more specific). */
.cliq-sl-searchform > .cliq-widget-row + .cliq-widget-row { margin-top: var(--cliq-sl-form-row-gap, 14px); }

/* A placed submit/geocode button fills its cell; fallback buttons hug start. */
.cliq-widget-cell > .cliq-sl-search__btn, .cliq-widget-cell > .cliq-sl-search__geo { width: 100%; }
.cliq-sl-searchform > .cliq-sl-search__btn, .cliq-sl-searchform > .cliq-sl-search__geo { align-self: flex-start; margin-top: var(--cliq-sl-gap-lg, 12px); }
.cliq-sl-search__geo, .cliq-sl-search__btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--cliq-btn-icon-gap, 6px); cursor: pointer; white-space: nowrap; }

/* ---- Standalone lead / registration form ---------------------------------
   Fields reuse every shared control look above (cliq-sl-ff / cliq-sl-textinput
   / cliq-sl-choices / cliq-sl-toggle), painted by the form's own generated
   stylesheet. Only the auto-appended submit button, status messages and the
   required/invalid affordances are form-specific — kept token-based so they
   inherit the site theme like everything else. */
.cliq-sl-form { min-width: 0; }
:is(.cliq-sl.cliq-sl, .cliq-sl-form-root.cliq-sl-form-root) .cliq-sl-form__submit {
	align-self: flex-start;
	margin-top: 14px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 10px 22px;
	border: 0;
	border-radius: var(--cliq-sl-radius, 8px);
	background: var(--cliq-sl-primary);
	color: var(--cliq-sl-on-primary, #fff);
	font-weight: 600;
	cursor: pointer;
	transition: opacity .15s;
}
:is(.cliq-sl.cliq-sl, .cliq-sl-form-root.cliq-sl-form-root) .cliq-sl-form__submit:hover { opacity: .9; }
:is(.cliq-sl.cliq-sl, .cliq-sl-form-root.cliq-sl-form-root) .cliq-sl-form__submit:disabled { opacity: .6; cursor: default; }
:is(.cliq-sl.cliq-sl, .cliq-sl-form-root.cliq-sl-form-root) .cliq-sl-form__submit:is(:hover, :focus, :active) { padding: 10px 22px; border: 0; border-radius: var(--cliq-sl-radius, 8px); background: var(--cliq-sl-primary); color: var(--cliq-sl-on-primary, #fff); }
.cliq-sl-form__success,
.cliq-sl-form__error {
	margin-top: 12px;
	padding: 12px 14px;
	border-radius: var(--cliq-sl-radius, 8px);
	font-size: 14px;
	line-height: 1.4;
}
.cliq-sl-form__success { background: rgba(34, 160, 94, .12); color: #157347; }
.cliq-sl-form__error { background: rgba(220, 53, 69, .1); color: #b02a37; }
.cliq-sl-textarea { resize: vertical; min-height: var(--cliq-sl-textarea-min-h, 96px); }
.cliq-sl-ff__req { color: #b02a37; }
.cliq-sl-ff.is-invalid .cliq-sl-textinput,
.cliq-sl-ff.is-invalid .cliq-sl-choices,
.cliq-sl-ff.is-invalid .cliq-sl-glidewrap { box-shadow: 0 0 0 1px #dc3545; border-radius: var(--cliq-sl-radius, 8px); }
.cliq-sl-form-loading { min-height: 80px; }
.cliq-sl-ff--recaptcha { margin-top: 4px; }
.cliq-sl-recaptcha-note { font-size: 12px; color: var(--cliq-sl-muted, #6b7280); }
.cliq-sl-choices { display: flex; flex-wrap: wrap; gap: var(--cliq-sl-gap); padding: var(--cliq-sl-choices-pad, 6px 0); }
.cliq-sl-choice { position: relative; display: inline-flex; align-items: center; gap: var(--cliq-sl-gap-sm); cursor: pointer; }
/* Custom checkbox/radio: the real <input> stays in the DOM (keyboard/native
   form semantics) but is visually hidden — NOT display:none, which would drop
   it from the tab order — a sibling span is painted from its :checked state. */
.cliq-sl-choice__input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: -1px; }
.cliq-sl-choice__box { position: relative; flex: none; width: var(--cliq-sl-choice-size, 18px); height: var(--cliq-sl-choice-size, 18px); border: 1.5px solid var(--cliq-sl-border); background: var(--cliq-sl-surface); transition: background .15s, border-color .15s; }
.cliq-sl-choice__box--checkbox { border-radius: var(--cliq-sl-choice-radius, 5px); }
.cliq-sl-choice__box--radio { border-radius: 50%; }
.cliq-sl-choice__input:checked + .cliq-sl-choice__box { background: var(--cliq-sl-primary); border-color: var(--cliq-sl-primary); }
.cliq-sl-choice__input:checked + .cliq-sl-choice__box--checkbox::after { content: ''; position: absolute; left: calc(var(--cliq-sl-choice-size, 18px) * 5 / 18); top: calc(var(--cliq-sl-choice-size, 18px) * 1 / 18); width: calc(var(--cliq-sl-choice-size, 18px) * 5 / 18); height: calc(var(--cliq-sl-choice-size, 18px) * 10 / 18); border: solid var(--cliq-sl-on-primary); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.cliq-sl-choice__input:checked + .cliq-sl-choice__box--radio::after { content: ''; position: absolute; left: calc(var(--cliq-sl-choice-size, 18px) * 5 / 18); top: calc(var(--cliq-sl-choice-size, 18px) * 5 / 18); width: calc(var(--cliq-sl-choice-size, 18px) * 8 / 18); height: calc(var(--cliq-sl-choice-size, 18px) * 8 / 18); border-radius: 50%; background: var(--cliq-sl-on-primary); }
.cliq-sl-choice__input:focus-visible + .cliq-sl-choice__box { box-shadow: 0 0 0 2px var(--cliq-sl-primary); }

/* Custom toggle switch — same visually-hidden-input technique as the choice
   controls above. Shared by the toggle search-field and the Open-now widget. */
.cliq-sl-toggle { position: relative; display: inline-flex; align-items: center; gap: var(--cliq-sl-gap); font-weight: 600; cursor: pointer; }
.cliq-sl-toggle__input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: -1px; }
.cliq-sl-toggle__track {
	--cliq-sl-toggle-effective-track-h: min(var(--cliq-sl-toggle-track-h, 20px), var(--cliq-sl-field-height, var(--cliq-sl-toggle-track-h, 20px)));
	--cliq-sl-toggle-effective-thumb: min(var(--cliq-sl-toggle-thumb, 16px), calc(var(--cliq-sl-toggle-effective-track-h) - 4px));
	position: relative;
	flex: none;
	width: var(--cliq-sl-toggle-track-w, 34px);
	height: var(--cliq-sl-toggle-effective-track-h);
	border-radius: var(--cliq-sl-radius-pill);
	background: var(--cliq-sl-border);
	box-shadow: inset 0 0 0 1px var(--cliq-sl-toggle-border, transparent);
	transition: background .15s, box-shadow .15s;
}
.cliq-sl-toggle__thumb { position: relative; z-index: 2; display: block; width: var(--cliq-sl-toggle-effective-thumb); height: var(--cliq-sl-toggle-effective-thumb); margin: calc((var(--cliq-sl-toggle-effective-track-h) - var(--cliq-sl-toggle-effective-thumb)) / 2); border-radius: 50%; background: var(--cliq-sl-surface); box-shadow: 0 1px 2px var(--cliq-sl-shadow); transition: transform .15s; }
.cliq-sl-toggle__input:checked + .cliq-sl-toggle__track { background: var(--cliq-sl-primary); }
.cliq-sl-toggle__input:checked + .cliq-sl-toggle__track .cliq-sl-toggle__thumb { transform: translateX(calc(var(--cliq-sl-toggle-track-w, 34px) - var(--cliq-sl-toggle-effective-track-h))); }
.cliq-sl-toggle__input:focus-visible + .cliq-sl-toggle__track { box-shadow: 0 0 0 2px var(--cliq-sl-primary); }
.cliq-sl-toggle__inline { position: absolute; z-index: 1; top: 50%; max-width: calc(50% - 5px); overflow: hidden; color: var(--cliq-sl-toggle-inline-color, currentColor); font-size: var(--cliq-sl-toggle-inline-size, 13px); line-height: 1; text-overflow: ellipsis; white-space: nowrap; transform: translateY(-50%); transition: opacity .15s; }
.cliq-sl-toggle__inline--off { inset-inline-end: var(--cliq-sl-toggle-inline-inset, 10px); }
.cliq-sl-toggle__inline--on { inset-inline-start: var(--cliq-sl-toggle-inline-inset, 10px); opacity: 0; }
.cliq-sl-toggle__input:checked + .cliq-sl-toggle__track .cliq-sl-toggle__inline--off { opacity: 0; }
.cliq-sl-toggle__input:checked + .cliq-sl-toggle__track .cliq-sl-toggle__inline--on { opacity: 1; }
.cliq-sl-toggle.has-inline-label { --cliq-sl-toggle-track-w: 88px; --cliq-sl-toggle-track-h: 40px; --cliq-sl-toggle-thumb: 32px; }
.cliq-sl-toggle.is-size-small { --cliq-sl-toggle-track-w: 28px; --cliq-sl-toggle-track-h: 16px; --cliq-sl-toggle-thumb: 12px; }
.cliq-sl-toggle.is-size-medium { --cliq-sl-toggle-track-w: 34px; --cliq-sl-toggle-track-h: 20px; --cliq-sl-toggle-thumb: 16px; }
.cliq-sl-toggle.is-size-large { --cliq-sl-toggle-track-w: 44px; --cliq-sl-toggle-track-h: 26px; --cliq-sl-toggle-thumb: 22px; }
.cliq-sl-toggle.has-inline-label.is-size-small { --cliq-sl-toggle-track-w: 68px; --cliq-sl-toggle-track-h: 30px; --cliq-sl-toggle-thumb: 24px; --cliq-sl-toggle-inline-size: 11px; --cliq-sl-toggle-inline-inset: 8px; }
.cliq-sl-toggle.has-inline-label.is-size-medium { --cliq-sl-toggle-track-w: 88px; --cliq-sl-toggle-track-h: 40px; --cliq-sl-toggle-thumb: 32px; }
.cliq-sl-toggle.has-inline-label.is-size-large { --cliq-sl-toggle-track-w: 106px; --cliq-sl-toggle-track-h: 48px; --cliq-sl-toggle-thumb: 40px; --cliq-sl-toggle-inline-size: 15px; --cliq-sl-toggle-inline-inset: 12px; }
.cliq-sl-rangewrap { display: flex; align-items: center; gap: var(--cliq-sl-gap); }
.cliq-sl-rangewrap .cui-slider { flex: 1; }
/* Slider colours are BUILDER-OWNED (Track / Filled track / Handle controls →
   --cui-slider-* via DesignRenderer::sliderVars). Never re-declare those vars
   on .cui-slider here: the builder sets them on the item's ancestor hook, so a
   declaration on the control itself would win and silently break every
   authored slider. */
.cliq-sl-rangeval { font-weight: var(--cliq-sl-rangeval-weight, 700); min-width: var(--cliq-sl-rangeval-min-w, 28px); text-align: end; }

.cliq-sl-distance__slider { display: flex; align-items: center; gap: var(--cliq-sl-gap); }
.cliq-sl-distance__slider .cui-slider { flex: 1; }
/* Theme the vendored slider control to the site's own design tokens instead of
   its default palette (see @cliqthemes/cliq-slider-control's Theming docs —
   every visual value is a CSS variable on .cui-slider). */
.cliq-sl .cui-slider {
	--cui-slider-track-bg: var(--cliq-sl-border-soft);
	--cui-slider-selection-bg: var(--cliq-sl-primary);
	--cui-slider-highlight-bg: color-mix(in srgb, var(--cliq-sl-primary) 25%, transparent);
	--cui-slider-handle-bg: var(--cliq-sl-surface);
	--cui-slider-handle-border: var(--cliq-sl-primary);
	--cui-slider-handle-border-focus: var(--cliq-sl-primary-strong);
	--cui-slider-focus-ring: 0 0 0 4px color-mix(in srgb, var(--cliq-sl-primary) 18%, transparent);
	--cui-slider-tooltip-bg: var(--cliq-sl-heading);
	--cui-slider-tooltip-color: var(--cliq-sl-on-primary);
}
.cliq-sl .cui-slider-horizontal .cui-slider-selection { height: 100%; }

/* Site-token theme for every Glide instance we mount: .cliq-sl-glide is the
   root/control; .cliq-sl-glide-panel is the dropdown PANEL, which Glide
   portals to <body> — outside any scope — and tags via the dropdownClassName
   option (glide-dropdown ≥0.2.0). Both share one token block so control and
   panel can't drift; per-field overrides (the builder's Dropdown-panel
   controls) win via the generated .glide-dropdown.cliq-widget-panel-n-<id> rule.
   Scoped to our own classes so other Glide instances a host page might have
   are unaffected (the library's own scoping convention). */
.cliq-sl-glide { width: 100%; }
.cliq-sl-glide,
.cliq-sl-glide-panel {
	--glide-bg: var(--cliq-sl-surface);
	--glide-border: var(--cliq-sl-border);
	--glide-border-focus: var(--cliq-sl-primary);
	--glide-radius: var(--cliq-sl-radius);
	/* The panel is portalled to <body>, so currentColor would resolve against
	   the active WordPress theme instead of the locator palette. Explicit
	   Builder text colour still overrides this variable on the field/panel. */
	--glide-color: var(--cliq-sl-text);
	--glide-placeholder: var(--cliq-sl-faint);
	--glide-hover: var(--cliq-sl-divider);
	--glide-active: var(--cliq-sl-border-soft);
	--glide-active-color: var(--cliq-sl-text);
	--glide-chip-bg: var(--cliq-sl-surface);
	--glide-chip-border: var(--cliq-sl-border);
	--glide-chip-selected-bg: var(--cliq-sl-border-soft);
	--glide-chip-selected-border: var(--cliq-sl-primary);
	--glide-chip-selected-color: var(--cliq-sl-text);
	--glide-chip-radius: var(--cliq-sl-radius);
	--glide-popup-radius: var(--cliq-sl-radius);
	--glide-tag-bg: var(--cliq-sl-primary);
	--glide-tag-color: var(--cliq-sl-on-primary);
	--glide-highlight-bg: var(--cliq-sl-primary);
	--glide-highlight-color: var(--cliq-sl-on-primary);
	--glide-group-color: var(--cliq-sl-muted);
	--glide-scrollbar-thumb: var(--cliq-sl-faint);
	/* The Builder emits its global/per-field Control height through
	   --cliq-sl-field-height. Keep the older site token only as a fallback. */
	--glide-control-min-height: var(--cliq-sl-field-height, var(--cliq-sl-control-height));
	/* Glide's stock focus ring paints a second frame outside the builder-owned
	   field border. Keep the single border as the focus affordance instead. */
	--glide-focus-ring: none;
	--glide-font-size: var(--cliq-sl-font-size);
	font-family: var(--glide-font-family, inherit);
	font-weight: var(--glide-font-weight, inherit);
}

/* Theme-resistant Glide chrome. Themes such as Astra style every <button>
   with large padding, a solid background and their own colours. These are
   internal select controls, including controls in the body-portalled panel,
   so restore their complete geometry and interaction states within our two
   Glide ownership boundaries. Deliberately do not reset arbitrary buttons. */
:is(.cliq-sl-glide, .cliq-sl-glide-panel) button.glide-clear {
	appearance: none;
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	min-width: 20px;
	height: 20px;
	min-height: 20px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--glide-placeholder);
	box-shadow: none;
	font-family: inherit;
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: 1;
	text-decoration: none;
	text-transform: none;
	letter-spacing: normal;
	cursor: pointer;
}
:is(.cliq-sl-glide, .cliq-sl-glide-panel) button.glide-clear:is(:hover, :focus, :active) {
	width: 20px;
	min-width: 20px;
	height: 20px;
	min-height: 20px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--glide-hover);
	color: var(--glide-color);
	box-shadow: none;
	text-decoration: none;
}
:is(.cliq-sl-glide, .cliq-sl-glide-panel) button.glide-tag-remove {
	appearance: none;
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	min-width: 16px;
	height: 16px;
	min-height: 16px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: inherit;
	box-shadow: none;
	font-family: inherit;
	font-size: 12px;
	font-style: normal;
	font-weight: 400;
	line-height: 1;
	text-decoration: none;
	text-transform: none;
	letter-spacing: normal;
	opacity: .6;
	cursor: pointer;
}
:is(.cliq-sl-glide, .cliq-sl-glide-panel) button.glide-tag-remove:is(:hover, :focus, :active) {
	width: 16px;
	min-width: 16px;
	height: 16px;
	min-height: 16px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: color-mix(in srgb, currentColor 8%, transparent);
	color: inherit;
	box-shadow: none;
	text-decoration: none;
	opacity: 1;
}
:is(.cliq-sl-glide, .cliq-sl-glide-panel) button.glide-select-all {
	appearance: none;
	display: block;
	width: 100%;
	min-width: 0;
	height: auto;
	min-height: 0;
	margin: 0;
	padding: 8px 12px;
	border: 0;
	border-bottom: 1px solid var(--glide-border);
	border-radius: 0;
	background: transparent;
	color: var(--glide-active-color);
	box-shadow: none;
	font: inherit;
	font-weight: 600;
	line-height: inherit;
	text-align: start;
	text-decoration: none;
	text-transform: none;
	letter-spacing: normal;
	cursor: pointer;
}
:is(.cliq-sl-glide, .cliq-sl-glide-panel) button.glide-select-all:is(:hover, :focus, :active) {
	padding: 8px 12px;
	border: 0;
	border-bottom: 1px solid var(--glide-border);
	border-radius: 0;
	background: var(--glide-hover);
	color: var(--glide-active-color);
	box-shadow: none;
	text-decoration: none;
}
:is(.cliq-sl-glide, .cliq-sl-glide-panel) button.glide-group-select {
	appearance: none;
	flex: 0 0 auto;
	width: auto;
	min-width: 0;
	height: auto;
	min-height: 0;
	margin: 0 0 0 8px;
	padding: 2px 4px;
	border: 0;
	border-radius: 3px;
	background: transparent;
	color: var(--glide-active-color);
	box-shadow: none;
	font-family: inherit;
	font-size: .85em;
	font-style: normal;
	font-weight: 500;
	line-height: inherit;
	text-decoration: none;
	text-transform: none;
	letter-spacing: normal;
	cursor: pointer;
}
:is(.cliq-sl-glide, .cliq-sl-glide-panel) button.glide-group-select:is(:hover, :focus, :active) {
	margin: 0 0 0 8px;
	padding: 2px 4px;
	border: 0;
	border-radius: 3px;
	background: var(--glide-hover);
	color: var(--glide-active-color);
	box-shadow: none;
	text-decoration: none;
}
@media (hover: none) {
	:is(.cliq-sl-glide, .cliq-sl-glide-panel) button.glide-clear,
	:is(.cliq-sl-glide, .cliq-sl-glide-panel) button.glide-clear:is(:hover, :focus, :active) {
		width: 28px;
		min-width: 28px;
		height: 28px;
		min-height: 28px;
	}
	:is(.cliq-sl-glide, .cliq-sl-glide-panel) button.glide-tag-remove,
	:is(.cliq-sl-glide, .cliq-sl-glide-panel) button.glide-tag-remove:is(:hover, :focus, :active) {
		width: 22px;
		min-width: 22px;
		height: 22px;
		min-height: 22px;
	}
}
.cliq-sl-glide-panel .glide-option { text-align: var(--glide-text-align, inherit); }
/* Popup and persistent list panels do not inherit from the control. Their
   instance variables are applied directly by GlideSelect; these declarations
   make those variables the single visual source for the actual surfaces and
   option states, regardless of the library theme's selector order. */
/* Chips presentation: the options ARE the control, so they need to read as
   chips rather than a bare word list. Colours come from the same Glide tokens
   the rest of the control uses, so a design's palette still drives them. */
.cliq-sl-glide[data-presentation="chips"] .glide-option {
	display: inline-flex;
	align-items: center;
	padding: 6px 13px;
	border: 1px solid var(--glide-border, #d5d8dc);
	border-radius: var(--cliq-sl-radius-pill, 999px);
	background: var(--glide-bg, #fff);
	font-size: var(--glide-font-size, 13px);
	line-height: 1.4;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.cliq-sl-glide[data-presentation="chips"] .glide-option:hover {
	border-color: var(--glide-border-focus, var(--cliq-sl-primary));
	background: var(--glide-hover, var(--cliq-sl-divider));
}
.cliq-sl-glide[data-presentation="chips"] .glide-option.is-selected {
	border-color: var(--glide-chip-selected-border, var(--cliq-sl-primary));
	background: var(--glide-highlight-bg, var(--cliq-sl-primary));
	color: var(--glide-highlight-color, var(--cliq-sl-on-primary));
}
.cliq-sl-glide[data-presentation="chips"] .glide-options {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.cliq-sl-glide-panel:is([data-presentation="popup"], [data-presentation="always-open"]) {
	background: var(--glide-bg) !important;
	border-radius: var(--glide-popup-radius, var(--glide-radius)) !important;
}
.cliq-sl-glide-panel .glide-option.is-active:not(.is-selected) { background: var(--glide-hover) !important; }
.cliq-sl-glide-panel .glide-option.is-selected {
	background: var(--glide-active) !important;
	color: var(--glide-active-color) !important;
}
.cliq-sl-glide .glide-tag {
	flex: 0 1 auto;
	min-width: 0;
	max-width: 100%;
	background: var(--glide-tag-bg);
	color: var(--glide-tag-color);
	white-space: nowrap;
}
/* Multi-select tags wrap onto additional rows. The form setting is a minimum
   height, so the control can grow naturally instead of clipping selections. */
.cliq-sl-glide .glide-tags {
	min-width: 0;
	flex-wrap: wrap;
	overflow: visible;
}
.cliq-sl-glide .glide-tag:hover,
.cliq-sl-glide .glide-tag:focus-within {
	background: var(--glide-hover);
	color: var(--glide-color);
}

.cliq-sl-chips { display: flex; flex-wrap: wrap; gap: var(--cliq-sl-gap); }
.cliq-sl .cliq-sl-chip { border: 1px solid var(--cliq-chip-border, var(--cliq-sl-border-soft)); border-radius: var(--cliq-sl-radius-pill); padding: var(--cliq-sl-chip-pad, 7px 16px); background: var(--cliq-chip-bg, var(--cliq-sl-surface)); font-size: var(--cliq-sl-chip-font-size, 13px); font-weight: var(--cliq-sl-chip-weight, 600); color: var(--cliq-chip-color, var(--cliq-sl-label)); cursor: pointer; transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .18s ease; }
.cliq-sl .cliq-sl-chip:hover { padding: var(--cliq-sl-chip-pad, 7px 16px); border: 1px solid var(--cliq-chip-border, var(--cliq-sl-border-soft)); border-radius: var(--cliq-sl-radius-pill); background: var(--cliq-chip-hover-bg, var(--cliq-chip-bg, var(--cliq-sl-surface))); color: var(--cliq-chip-hover-color, var(--cliq-chip-color, var(--cliq-sl-label))); transform: translateY(-1px); }
.cliq-sl .cliq-sl-chip.is-active { background: var(--cliq-chip-active-bg, var(--cliq-sl-heading)); border-color: var(--cliq-chip-active-border, var(--cliq-chip-active-bg, var(--cliq-sl-heading))); color: var(--cliq-chip-active-color, var(--cliq-sl-on-primary)); }

.cliq-sl-w--results { position: relative; }
.cliq-sl-w--results .cliq-widget-results { transition: opacity .22s ease, transform .22s ease; }
.cliq-sl-w--results.is-updating .cliq-widget-results { opacity: .58; transform: translateY(2px); pointer-events: none; }
/* ===== Store detail page ===== */
.cliq-sl-store-detail { width: 100%; }
.cliq-sl-detail--loading, .cliq-sl-detail--error { padding: 32px; color: var(--cliq-sl-muted); }

/* Gallery (Swiper + PhotoSwipe) */
.cliq-sl-gallery { width: 100%; margin: 12px 0; }
.cliq-sl-gallery__item { display: block; }
.cliq-sl-gallery__item img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: var(--cliq-sl-radius); }

/* Thumbs grid */
/* Columns/gap arrive via the item's GENERATED rule (--cliq-gallery-* on the
   gallery root's n-hook — same variables design.scss's preview gallery uses). */
.cliq-sl-gallery--thumbs { display: grid; grid-template-columns: repeat(var(--cliq-gallery-cols, 4), 1fr); gap: var(--cliq-gallery-gap, 10px); }
.cliq-sl-gallery--thumbs .cliq-sl-gallery__thumb { aspect-ratio: 1 / 1; }

/* Sliders */
.cliq-sl-swiper--main { width: 100%; border-radius: var(--cliq-sl-radius); overflow: hidden; }
.cliq-sl-swiper--main .swiper-slide { aspect-ratio: 16 / 10; }
.cliq-sl-swiper--main .swiper-slide img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
.cliq-sl-swiper--thumbs { margin-top: 8px; }
.cliq-sl-swiper--thumbs .swiper-slide { width: 96px; height: 64px; opacity: .55; cursor: pointer; border-radius: var(--cliq-sl-radius-sm); overflow: hidden; transition: opacity .15s; }
.cliq-sl-swiper--thumbs .swiper-slide-thumb-active { opacity: 1; outline: 2px solid var(--cliq-sl-primary); }
.cliq-sl-swiper--thumbs .swiper-slide img { width: 100%; height: 100%; object-fit: cover; }
.cliq-sl-gallery .swiper-button-prev, .cliq-sl-gallery .swiper-button-next { color: var(--cliq-sl-on-primary); --swiper-navigation-size: 28px; }

/* Gallery height-chain fix: link must fill its slide so the image gets height. */
.cliq-sl-gallery__item { height: 100%; }
.cliq-sl-swiper--main .swiper-slide { display: flex; }
.cliq-sl-swiper--main .swiper-slide .cliq-sl-gallery__item { flex: 1; height: 100%; }
.cliq-sl-gallery--thumbs .cliq-sl-gallery__item { aspect-ratio: 1 / 1; }

/* ===== Opening Hours (schedule token) — day / hours rows ===== */
.cliq-hours { display: flex; flex-direction: column; gap: 3px; width: 100%; }
.cliq-hours__row { display: flex; justify-content: space-between; gap: 16px; line-height: 1.5; }
.cliq-hours__day { font-weight: 600; }
.cliq-hours__val { text-align: end; }

/* Hierarchical category drill-down. Both the "View all" tile and sub-category
   tiles are fully design-driven (the bound Category tile design) — no chevron,
   dashed box or other hardcoded look here; that all belongs to the design. */
.cliq-sl-catbrowse { display: flex; flex-direction: column; gap: var(--cliq-cat-gap, 14px); }
