/*
 * ATA Stockists finder. Colours and type follow the Elementor kit (post 40) through its global
 * variables, which Elementor prints on every page, with the brand values as fallbacks:
 *   A_Orange #E24B25 (buttons, as the Send button on the Stockists page), A_Yellow #EC8723 (hover),
 *   Dark #222222 (text, clusters), Pastel Yellow #FFE5C1 (soft panels), Line #DCDCDE.
 *   Poppins for controls and store names, Courier Prime for body text and buttons.
 * Override any of them on the page, for example in the Shortcode widget's Advanced > Custom CSS:
 *   .ata-stockists { --ata-stockists-accent: #E95482; }
 * Layout mirrors Stockist.co's "list left" desktop layout and "map in the middle" on mobile.
 */
.ata-stockists {
	--ata-stockists-height: 640px;
	--ata-stockists-panel: 400px;
	--ata-stockists-accent: var(--e-global-color-2ca130c, #E24B25);
	--ata-stockists-accent-hover: var(--e-global-color-ae226ec, #EC8723);
	--ata-stockists-accent-ink: #fff;
	--ata-stockists-ink: var(--e-global-color-044b931, #222222);
	--ata-stockists-muted: #5c5650;
	--ata-stockists-line: var(--e-global-color-4d462f5, #DCDCDE);
	--ata-stockists-soft: var(--e-global-color-964c6f8, #FFE5C1);
	--ata-stockists-bg: #fff;
	--ata-stockists-radius: 0;
	--ata-stockists-font-ui: var(--e-global-typography-accent-font-family, "Poppins"), sans-serif;
	--ata-stockists-font-text: var(--e-global-typography-text-font-family, "Courier Prime"), monospace;
	display: grid;
	grid-template-columns: var(--ata-stockists-panel) minmax(0, 1fr); /* minmax(0, ...) stops a track growing to its content's intrinsic width */
	height: var(--ata-stockists-height);
	border: 1px solid var(--ata-stockists-line);
	border-radius: var(--ata-stockists-radius);
	overflow: hidden;
	background: var(--ata-stockists-bg);
	color: var(--ata-stockists-ink);
	font-family: var(--ata-stockists-font-ui);
	font-size: 15px;
	line-height: 1.4;
}
.ata-stockists__panel {
	display: flex;
	flex-direction: column;
	min-height: 0;
	min-width: 0; /* grid items default to min-width auto, which lets the search row push the panel wider than the column */
	border-right: 1px solid var(--ata-stockists-line);
}
.ata-stockists__map {
	min-height: 320px;
	z-index: 0;
}
.ata-stockists__search {
	padding: 16px;
	border-bottom: 1px solid var(--ata-stockists-line);
}
.ata-stockists__search-row {
	display: flex;
	gap: 8px;
}
.ata-stockists__input {
	flex: 1 1 0;
	width: 100%;
	min-width: 0;
	height: 44px;
	padding: 0 12px;
	border: 1px solid var(--ata-stockists-line);
	border-radius: var(--ata-stockists-radius);
	font: inherit;
	color: inherit;
	background: #fff;
}
.ata-stockists__input:focus {
	outline: 2px solid var(--ata-stockists-accent);
	outline-offset: 1px;
}
.ata-stockists__locate,
.ata-stockists__submit {
	height: 44px;
	border: 1px solid var(--ata-stockists-line);
	border-radius: var(--ata-stockists-radius);
	background: #fff;
	color: inherit;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
	padding: 0 14px;
}
.ata-stockists__locate {
	width: 44px;
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.ata-stockists__submit {
	flex: 0 0 auto;
	white-space: nowrap;
	font-family: var(--ata-stockists-font-text);
	font-size: 17px;
	font-weight: 700;
	background: var(--ata-stockists-accent);
	border-color: var(--ata-stockists-accent);
	color: var(--ata-stockists-accent-ink);
	transition: background-color 0.2s, border-color 0.2s;
}
.ata-stockists__submit:hover,
.ata-stockists__submit:focus-visible {
	background: var(--ata-stockists-accent-hover);
	border-color: var(--ata-stockists-accent-hover);
}
.ata-stockists__filters {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 12px;
	margin-top: 12px;
	align-items: center;
}
.ata-stockists__filter {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 14px;
	color: var(--ata-stockists-muted);
}
.ata-stockists__filter select {
	font: inherit;
	color: var(--ata-stockists-ink);
	border: 1px solid var(--ata-stockists-line);
	border-radius: 6px;
	padding: 4px 8px;
	background: #fff;
}
.ata-stockists__retailers {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	width: 100%;
}
.ata-stockists__chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 10px;
	border: 1px solid var(--ata-stockists-line);
	border-radius: 999px;
	font-size: 14px;
	cursor: pointer;
	user-select: none;
}
.ata-stockists__chip:has(input:checked) {
	border-color: var(--ata-stockists-accent);
	background: var(--ata-stockists-accent);
	color: var(--ata-stockists-accent-ink);
}
.ata-stockists__chip input {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}
.ata-stockists__chip:focus-within {
	outline: 2px solid var(--ata-stockists-accent);
	outline-offset: 1px;
}
.ata-stockists__chip img {
	border-radius: 50%;
}
.ata-stockists__chip-dot {
	display: inline-block;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	box-shadow: inset 0 0 0 2px #fff;
}
.ata-stockists__note {
	margin: 0;
	padding: 10px 16px;
	font-family: var(--ata-stockists-font-text);
	font-size: 13px;
	color: var(--ata-stockists-ink);
	background: var(--ata-stockists-soft);
	border-bottom: 1px solid var(--ata-stockists-line);
}
.ata-stockists__status {
	margin: 0;
	padding: 12px 16px;
	font-weight: 600;
}
.ata-stockists__results {
	list-style: none;
	margin: 0;
	padding: 0;
	overflow-y: auto;
	flex: 1;
	min-height: 0;
}
.ata-stockists__result {
	display: flex;
	gap: 12px;
	padding: 12px 16px;
	border-top: 1px solid var(--ata-stockists-line);
	cursor: pointer;
}
.ata-stockists__result:hover {
	background: var(--ata-stockists-soft);
}
.ata-stockists__badge {
	flex: 0 0 40px;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--ata-stockists-line);
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	overflow: hidden;
}
.ata-stockists__badge img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}
.ata-stockists__result-body h3 {
	margin: 0 0 2px;
	font-family: var(--ata-stockists-font-ui);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--ata-stockists-ink);
	text-transform: none;
	letter-spacing: 0;
}
.ata-stockists__result-body p {
	margin: 0;
	font-family: var(--ata-stockists-font-text);
	font-size: 14px;
}
.ata-stockists__meta,
.ata-stockists__muted {
	color: var(--ata-stockists-muted);
	font-size: 13px;
}
.ata-stockists__links {
	margin-top: 4px !important;
	font-size: 14px;
}
.ata-stockists__links a {
	color: var(--ata-stockists-accent);
	font-weight: 700;
	text-decoration: underline;
	margin-right: 12px;
}
.ata-stockists__reset {
	padding: 12px 16px;
	border-top: 1px solid var(--ata-stockists-line);
}
.ata-stockists__reset button {
	font: inherit;
	background: none;
	border: 0;
	padding: 0;
	text-decoration: underline;
	cursor: pointer;
	color: inherit;
}

/* Map pins and clusters */
.ata-stockists .leaflet-marker-pane .ata-stockists__pin--logo img {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: 2px solid #fff;
	background: #fff;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
	object-fit: contain;
}
/* Aunty pin: one SVG (core.auntyPinSvg) with the whole portrait inside the teardrop, retailer badge on the faded bottom of the drop. */
/* Leaflet positions the icon itself; the selectors below carry .leaflet-marker-pane to outrank Leaflet's own
   ".leaflet-marker-pane img { width: auto }". */
.ata-stockists__pin--aunty {
	filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.35));
}
.ata-stockists__pin--aunty .ata-stockists__pin-drop {
	display: block;
	width: 100%;
	height: 100%;
	overflow: visible;
}
.ata-stockists .leaflet-marker-pane .ata-stockists__pin-badge {
	/* Sits on the faded bottom of the teardrop, below the Aunty's face, clear of the tip. */
	position: absolute;
	left: 50%;
	top: 58%;
	transform: translateX(-50%);
	width: 18px;
	height: 18px;
	border-radius: 50%;
	border: 2px solid #fff;
	background: #fff;
	object-fit: contain;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}
.ata-stockists__pin--plain span {
	display: block;
	width: 20px;
	height: 20px;
	border-radius: 50% 50% 50% 0;
	transform: rotate(-45deg);
	background: var(--ata-stockists-accent, #E24B25);
	border: 2px solid #fff;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}
.ata-stockists__cluster {
	background: var(--ata-stockists-ink, #222222);
	color: #fff;
	border-radius: 50%;
	border: 2px solid #fff;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 13px;
	cursor: pointer;
}
.ata-stockists .leaflet-popup-content {
	font-size: 14px;
	line-height: 1.4;
	margin: 12px 16px;
}

/* Mobile: map on top, then search and list */
@media (max-width: 800px) {
	.ata-stockists {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: 320px auto;
		height: auto;
	}
	.ata-stockists__map {
		order: -1;
		min-height: 320px;
	}
	.ata-stockists__panel {
		border-right: 0;
		border-top: 1px solid var(--ata-stockists-line);
	}
	.ata-stockists__results {
		max-height: 450px;
	}
}

/*
 * Where to buy design (Riya, 4 Nov 2026): Ivory panel in a 3px Plum frame, Plum controls, Courier Prime
 * throughout (buttons included), retailer toggles in each retailer's colour, List and Map tabs on phones.
 */
.ata-stockists {
	--ata-stockists-height: 640px;
	--ata-stockists-panel: 440px;
	--ata-stockists-accent: #370617;
	--ata-stockists-accent-hover: #AE2818;
	--ata-stockists-accent-ink: #FEF8E4;
	--ata-stockists-ink: #16060D;
	--ata-stockists-muted: #5E4C51;
	--ata-stockists-line: #D9C9B8;
	--ata-stockists-soft: #FDE7C3;
	--ata-stockists-bg: #FEF8E4;
	--ata-stockists-font-ui: "Courier Prime", "Courier New", monospace;
	--ata-stockists-font-text: "Courier Prime", "Courier New", monospace;
	border: 3px solid #370617;
	font-size: 15px;
}
.ata-stockists__tabs { display: none; }
.ata-stockists__panel { border-right: 3px solid #370617; }
.ata-stockists__search { padding: 24px 24px 12px; border-bottom: 0; }
.ata-stockists__input { height: 46px; border: 2px solid #370617; font-size: 16px; padding: 0 14px; }
.ata-stockists__locate, .ata-stockists__submit { height: 46px; border: 2px solid #370617; }
.ata-stockists__locate { width: 46px; background: #FEF8E4; color: #370617; }
.ata-stockists__submit { padding: 0 16px; font-size: 16px; }
.ata-stockists__filters { margin-top: 16px; gap: 12px; }
.ata-stockists__filter { font-size: 14px; color: var(--ata-stockists-ink); }
.ata-stockists__filter select { height: 36px; border: 2px solid #370617; border-radius: 0; padding: 0 6px; font-family: inherit; font-size: 14px; }
.ata-stockists__retailers { order: -1; gap: 8px; }
.ata-stockists__chip { --chip: #370617; border: 2px solid var(--chip); border-radius: 0; padding: 5px 10px; font-size: 14px; font-weight: 700; color: var(--chip); background: transparent; }
.ata-stockists__chip[data-retailer^="tesco"] { --chip: #00539F; }
.ata-stockists__chip[data-retailer^="sainsbury"] { --chip: #370617; }
.ata-stockists__chip[data-retailer^="independent"] { --chip: #CA3560; }
.ata-stockists__chip:has(input:checked) { background: var(--chip); border-color: var(--chip); color: #FEF8E4; }
.ata-stockists__chip:has(input:checked)::before { content: "\2713"; margin-right: 2px; }
.ata-stockists__chip:focus-within { outline: 3px solid #370617; outline-offset: 2px; }
.ata-stockists__note { padding: 0 24px 12px; background: none; border: 0; font-size: 14px; line-height: 20px; color: var(--ata-stockists-muted); }
.ata-stockists__status { padding: 12px 24px; font-weight: 700; border-top: 2px solid #370617; }
.ata-stockists__results { padding: 0 24px; }
.ata-stockists__result { padding: 14px 0; border-top: 1px solid var(--ata-stockists-line); gap: 0; }
.ata-stockists__result:hover { background: transparent; }
.ata-stockists__result:hover h3 { text-decoration: underline; }
.ata-stockists__badge { display: none; }
.ata-stockists__result-body { flex: 1; min-width: 0; }
.ata-stockists__result-body h3 { font-family: var(--ata-stockists-font-ui) !important; font-size: 16px !important; font-weight: 700 !important; color: var(--ata-stockists-ink) !important; }
.ata-stockists__result-body p { font-size: 14px; color: var(--ata-stockists-muted); }
.ata-stockists__meta { font-weight: 700; color: var(--ata-stockists-ink) !important; }
.ata-stockists__links a { color: #370617; }
.ata-stockists__reset { padding: 14px 0; }
.ata-stockists__reset button { font-family: inherit; font-weight: 700; color: #370617; }
.ata-stockists__map { background: #CFE2E6; }
@media (max-width: 800px) {
	.ata-stockists { grid-template-rows: auto; }
	/* 0.3.5: the tabs sit inside the panel, under the search, filters and note, right above the map or list. */
	.ata-stockists__tabs { display: flex; border-top: 3px solid #370617; border-bottom: 3px solid #370617; }
	.ata-stockists__tab { flex: 1; height: 48px; border: 0; border-radius: 0; background: #FEF8E4; color: #370617; font-family: var(--ata-stockists-font-ui); font-size: 16px; font-weight: 700; cursor: pointer; }
	.ata-stockists__tab + .ata-stockists__tab { border-left: 3px solid #370617; }
	.ata-stockists__tab[aria-selected="true"] { background: #370617; color: #FEF8E4; }
	.ata-stockists__panel { border-top: 0; }
	.ata-stockists__search { padding: 16px 16px 8px; }
	.ata-stockists__note { padding: 0 16px 10px; }
	.ata-stockists__status { padding: 10px 16px; }
	.ata-stockists__results { padding: 0 16px; max-height: none; }
	.ata-stockists__map { order: 0; min-height: 420px; }
	.ata-stockists[data-view="list"] .ata-stockists__map { display: none; }
	.ata-stockists[data-view="map"] .ata-stockists__results,
	.ata-stockists[data-view="map"] .ata-stockists__status { display: none; }
	.ata-stockists[data-view="map"] .ata-stockists__panel { border-bottom: 0; }
}

/* The kit's form styles (rounded yellow buttons, grey inputs, Poppins) outrank the rules above on the site,
   so the finder's own controls restate theirs with !important. */
.ata-stockists input.ata-stockists__input { height: 46px !important; padding: 0 14px !important; border: 2px solid #370617 !important; border-radius: 0 !important; background: #fff !important; color: #16060D !important; font-family: "Courier Prime", "Courier New", monospace !important; font-size: 16px !important; box-shadow: none !important; }
.ata-stockists button.ata-stockists__submit { height: 46px !important; padding: 0 16px !important; border: 2px solid #370617 !important; border-radius: 0 !important; background: #370617 !important; color: #FEF8E4 !important; font-family: "Courier Prime", "Courier New", monospace !important; font-size: 16px !important; font-weight: 700 !important; box-shadow: none !important; }
.ata-stockists button.ata-stockists__submit:hover, .ata-stockists button.ata-stockists__submit:focus-visible { background: #AE2818 !important; border-color: #AE2818 !important; }
.ata-stockists button.ata-stockists__locate { width: 46px !important; height: 46px !important; padding: 0 !important; border: 2px solid #370617 !important; border-radius: 0 !important; background: #FEF8E4 !important; color: #370617 !important; box-shadow: none !important; }
.ata-stockists .ata-stockists__filter select { height: 36px !important; padding: 0 6px !important; border: 2px solid #370617 !important; border-radius: 0 !important; background-color: #fff !important; color: #16060D !important; font-family: "Courier Prime", "Courier New", monospace !important; font-size: 14px !important; }
.ata-stockists .ata-stockists__chip { font-family: "Courier Prime", "Courier New", monospace !important; border-radius: 0 !important; }
.ata-stockists button.ata-stockists__tab { border-radius: 0 !important; font-family: "Courier Prime", "Courier New", monospace !important; box-shadow: none !important; }
.ata-stockists .ata-stockists__reset button { background: none !important; border: 0 !important; padding: 0 !important; color: #370617 !important; font-family: "Courier Prime", "Courier New", monospace !important; font-weight: 700 !important; text-decoration: underline !important; }
@media (max-width: 800px) {
	.ata-stockists button.ata-stockists__tab { background: #FEF8E4 !important; color: #370617 !important; border: 0 !important; }
	.ata-stockists button.ata-stockists__tab[aria-selected="true"] { background: #370617 !important; color: #FEF8E4 !important; }
	.ata-stockists button.ata-stockists__tab + .ata-stockists__tab { border-left: 3px solid #370617 !important; }
}
.ata-stockists .ata-stockists__filter, .ata-stockists .ata-stockists__filter span, .ata-stockists .ata-stockists__status { font-family: "Courier Prime", "Courier New", monospace !important; }
@media (max-width: 800px) {
	.ata-stockists__search-row { flex-wrap: wrap; }
	.ata-stockists input.ata-stockists__input { flex: 1 1 100% !important; }
	.ata-stockists button.ata-stockists__submit { flex: 1 1 auto !important; }
}

/* "My location" button on the map, under the zoom buttons (0.3.4). */
.ata-stockists .ata-stockists__map-locate a {
	display: flex;
	align-items: center;
	justify-content: center;
	color: #370617;
}
.ata-stockists .ata-stockists__map-locate a:hover,
.ata-stockists .ata-stockists__map-locate a:focus-visible { color: #E24B25; }
