/**
 * Pharmacy Finder
 *
 * ---------------------------------------------------------------------
 * TYPE AND CONTROL SCALE
 * ---------------------------------------------------------------------
 * Every size in this file comes from a token at the top rather than being
 * chosen where it is used. That is the whole point: sizes picked one rule at
 * a time drift, and the drift is what makes a page hard to read. The earlier
 * version had the results count and the pharmacy name both at 1.3rem, so the
 * label above the list shouted as loudly as the pharmacies in it, and it
 * mixed em, rem and px against a 17px base so no two "small" texts were the
 * same small.
 *
 * The hierarchy in the results, largest to smallest:
 *
 *   search heading   the one big thing on the page
 *   pharmacy name    the thing you are scanning for
 *   count            a label ABOVE the list, so smaller than the names in it
 *   address, meta    supporting detail
 *   controls, pills  interface, quieter than any content
 *
 * Everything is in rem so it is predictable against the root, and the
 * element does not set its own base font-size — a 17px base with rem sizes
 * on top is the inconsistency that started this.
 *
 * ---------------------------------------------------------------------
 * TWO DEFENSIVE HABITS, BOTH BECAUSE OF SALIENT
 * ---------------------------------------------------------------------
 * 1. Buttons carry doubled selectors (.cl-pf .cl-pf__btn) and !important on
 *    colour, background, font-size, padding and radius. Salient's own button
 *    rules use compound chained-class selectors that beat a simpler plugin
 *    selector on specificity alone, with no !important of their own.
 *
 * 2. Paragraphs get their padding reset, not just their margin. Salient puts
 *    padding-bottom on p, which opens a gap under every line of card meta if
 *    it is left alone.
 */

.cl-pf {
	/* Colour */
	--cl-pf-search-bg: #0e2422;
	--cl-pf-search-text: #ffffff;
	--cl-pf-text: #0e2422;
	--cl-pf-rule: #dcdfdc;
	--cl-pf-card-bg: #ffffff;
	--cl-pf-card-hover: #f4f5f3;
	--cl-pf-accent: #cf232b;
	--cl-pf-accent-text: #ffffff;
	--cl-pf-pill: #eef0ed;

	/**
	 * Field styling, taken from the Formulary feed's filter bar
	 * (formulary-sync's .fs-filter-toggle / .products-feed-search) rather
	 * than chosen fresh, so the two feel like one design system: the same
	 * radius, border, shadow and type on every text input, select and
	 * dropdown across the site rather than two slightly different ideas of
	 * what a form field looks like.
	 */
	--cl-pf-field-font: 'Biennale', sans-serif;
	--cl-pf-field-border: rgba(6, 30, 33, 0.16);
	--cl-pf-field-shadow: 0 1px 2px rgba(22, 35, 43, 0.04);
	--cl-pf-field-radius: 6px;
	/**
	 * Font-size, line-height and colour, matched to Formulary's literal
	 * values (16px / 22px / #16232b) rather than to this element's own
	 * rem-based type scale. That distinction matters here specifically:
	 * --cl-pf-fs-body is 1rem, and on this site's root that resolves to
	 * 17px, not 16px — so reusing it would have looked like a match while
	 * actually being a pixel off. Formulary's own CSS hardcodes these three
	 * for the same reason, rather than trusting rem.
	 */
	--cl-pf-field-fs: 16px;
	--cl-pf-field-lh: 22px;
	--cl-pf-field-color: #16232b;

	/**
	 * Pharmacy name, matched to Formulary's .product-card-title literally
	 * (18px / 600 / 1.3 / #16232b) for the same reason as the field tokens
	 * above — this element's own --cl-pf-fs-name (1.125rem, which is
	 * ~19px against this site's actual 17px root) is close but not the
	 * same number, and "close" was exactly the earlier complaint.
	 */
	--cl-pf-title-font: 'Biennale', sans-serif;
	--cl-pf-title-fs: 18px;
	--cl-pf-title-fw: 600;
	--cl-pf-title-lh: 1.3;
	--cl-pf-title-color: #16232b;

	/**
	 * Card text and card button, fixed in px like the name above (Jordan,
	 * 21 Sep 2026: listed text 14px, button 15px). They were rem sizes
	 * (0.9375rem and 0.875rem), written when this site's root was 17px.
	 * Salient's fluid root is now 14px on desktop, 13px on tablet and 11px
	 * on phones, which took the address lines down to 10.3px and the
	 * button to 9.6px on a phone.
	 */
	--cl-pf-meta-fs: 14px;
	--cl-pf-card-btn-fs: 15px;

	/* Shape */
	--cl-pf-radius: 10px;
	--cl-pf-radius-sm: 6px;
	--cl-pf-map-w: 210px;
	--cl-pf-map-h: 150px;
	--cl-pf-grid-min: 330px;
	--cl-pf-gap: 20px;
	/* Overridden per instance from the Columns setting; these only apply if
	   that inline style is ever missing. */
	--cl-pf-cols: 3;
	--cl-pf-cols-gaps: 2;

	/* Type scale */
	--cl-pf-fs-heading: clamp(2rem, 3.6vw, 2.75rem);
	--cl-pf-fs-sub: 1.375rem;
	--cl-pf-fs-lead: 1.0625rem;
	--cl-pf-fs-name: 1.125rem;
	--cl-pf-fs-body: 1rem;
	--cl-pf-fs-count: 1rem;
	--cl-pf-fs-meta: 0.9375rem;
	--cl-pf-fs-sm: 0.875rem;
	--cl-pf-fs-xs: 0.8125rem;

	/**
	 * Icon sizes for the shared 24-box icon set. The search and sort-chevron
	 * icons no longer draw from this list — see cl_pfind_icon_search_exact()
	 * and cl_pfind_icon_chevron_exact(), which carry their own literal
	 * dimensions to match Formulary exactly rather than being stretched
	 * into this scale.
	 */
	--cl-pf-i: 20px;
	--cl-pf-i-sm: 16px;
	--cl-pf-i-xs: 14px;
	--cl-pf-i-lg: 44px;

	--cl-pf-lh-heading: 1.12;
	--cl-pf-lh-tight: 1.25;
	--cl-pf-lh-body: 1.6;

	/**
	 * Control height for anything beside the results — the sort toggle,
	 * pager-replacement Load more button, and so on. The search row's own
	 * field, select and button size themselves from Formulary's padding
	 * values directly (see .cl-pf__row rules below) rather than a fixed
	 * height, so there is only one height token left here, not two.
	 */
	--cl-pf-h-control: 42px;

	/* Width and gutters are the row's job, not this element's. */
	color: var(--cl-pf-text);
	line-height: var(--cl-pf-lh-body);
}

.cl-pf *,
.cl-pf *::before,
.cl-pf *::after {
	box-sizing: border-box;
}

.cl-pf p {
	padding: 0;
	margin: 0;
}

.cl-pf__i {
	width: var(--cl-pf-i);
	height: var(--cl-pf-i);
	flex: none;
	stroke: currentColor;
	fill: none;
	stroke-width: 1.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.cl-pf__i--lg {
	width: var(--cl-pf-i-lg);
	height: var(--cl-pf-i-lg);
}

/* ----------------------------------------------------------------
   Search block
   ---------------------------------------------------------------- */

.cl-pf__search {
	position: relative;
	overflow: hidden;
	background: var(--cl-pf-search-bg);
	color: var(--cl-pf-search-text);
	border-radius: var(--cl-pf-radius);
	padding: 56px 48px;
}

/* The uploaded pattern's own ::after rule is written per instance, since the
   image URL and its fit are settings. This only reserves the layer. */
.cl-pf__search--image {
	position: relative;
}

.cl-pf__search--pattern::after {
	content: "";
	position: absolute;
	inset: 0;
	opacity: 0.5;
	pointer-events: none;
	background-image: repeating-radial-gradient(circle at 84% 12%, transparent 0 32px, rgba(255, 255, 255, 0.06) 32px 33px);
}

.cl-pf__search-in {
	position: relative;
	z-index: 1;
	max-width: 780px;
}

.cl-pf .cl-pf__heading {
	margin: 0 0 12px !important;
	padding: 0;
	color: inherit;
	font-size: var(--cl-pf-fs-heading) !important;
	font-weight: 400;
	letter-spacing: -0.02em;
	line-height: var(--cl-pf-lh-heading) !important;
	text-transform: none !important;
}

.cl-pf__intro {
	margin: 0 0 28px;
	max-width: 52ch;
	font-size: var(--cl-pf-fs-lead);
	opacity: 0.78;
}

.cl-pf__row {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	align-items: stretch;
}

.cl-pf__input {
	position: relative;
	display: flex;
	align-items: center;
	flex: 1;
	min-width: 260px;
}

.cl-pf__input .cl-pf__search-icon-exact {
	position: absolute;
	left: 16px;
	color: var(--cl-pf-field-color);
	opacity: 0.4;
	pointer-events: none;
}

.cl-pf .cl-pf__field,
.cl-pf .cl-pf__select {
	font-family: var(--cl-pf-field-font);
	font-weight: 400;
	font-size: var(--cl-pf-field-fs);
	line-height: var(--cl-pf-field-lh);
	color: var(--cl-pf-field-color);
	background: #fff;
	border: 1px solid var(--cl-pf-field-border);
	border-radius: var(--cl-pf-field-radius);
	box-shadow: var(--cl-pf-field-shadow);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.cl-pf .cl-pf__row .cl-pf__field,
.cl-pf .cl-pf__row .cl-pf__select {
	/**
	 * Formulary's own toggle sizes itself from padding and line-height
	 * (8px 16px, 22px line-height, 1px border → 40px total) rather than a
	 * fixed height, so this does the same instead of forcing --cl-pf-h-field
	 * — that fixed height was the actual mismatch, not just a colour or
	 * border difference.
	 */
	padding: 8px 16px;
}

.cl-pf .cl-pf__field {
	width: 100%;
}

.cl-pf .cl-pf__row .cl-pf__field {
	padding-left: 42px;
}

.cl-pf .cl-pf__field:focus,
.cl-pf .cl-pf__select:focus {
	outline: none;
	border-color: var(--cl-pf-text);
	box-shadow: 0 0 0 3px rgba(22, 35, 43, 0.08);
}

.cl-pf .cl-pf__field:hover,
.cl-pf .cl-pf__select:hover {
	border-color: var(--cl-pf-text);
}

.cl-pf .cl-pf__select {
	cursor: pointer;
	padding-right: 40px;
	-webkit-appearance: none;
	appearance: none;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2316232b' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 13px center;
}

.cl-pf__aux {
	display: flex;
	gap: 16px 24px;
	flex-wrap: wrap;
	align-items: center;
	margin-top: 18px;
}

.cl-pf .cl-pf__link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: inherit;
	font-size: var(--cl-pf-fs-sm);
	line-height: var(--cl-pf-lh-tight);
	color: inherit;
	opacity: 0.75;
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
	text-transform: none;
	letter-spacing: 0;
}

.cl-pf .cl-pf__link .cl-pf__i {
	width: var(--cl-pf-i-sm);
	height: var(--cl-pf-i-sm);
}

.cl-pf .cl-pf__link:hover,
.cl-pf .cl-pf__link:focus-visible {
	opacity: 1;
}

.cl-pf__status {
	font-size: var(--cl-pf-fs-xs);
	opacity: 0.6;
}

/* ----------------------------------------------------------------
   Buttons
   ---------------------------------------------------------------- */

.cl-pf .cl-pf__btn {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-family: inherit;
	font-size: var(--cl-pf-fs-sm) !important;
	font-weight: 500;
	line-height: 1 !important;
	letter-spacing: 0;
	text-transform: none;
	text-decoration: none !important;
	cursor: pointer;
	border: 0;
	padding: 0 26px !important;
	height: var(--cl-pf-h-control);
	border-radius: var(--cl-pf-radius-sm) !important;
	transition: background-color 0.16s ease, color 0.16s ease;
}

/* In the search row the buttons match the fields beside them, not the
   smaller controls further down the page. */
.cl-pf .cl-pf__row .cl-pf__btn {
	padding: 8px 22px !important;
	font-size: var(--cl-pf-field-fs) !important;
	line-height: var(--cl-pf-field-lh) !important;
}

/**
 * Icons inside a button are sized in em, so they track the label rather than
 * sitting at the 20px every other icon uses. At a fixed size the chevron
 * ends up taller than the cap height of the text beside it, which reads as
 * an arrow with a caption rather than a button with an affordance.
 */
.cl-pf .cl-pf__btn .cl-pf__i {
	width: 1.05em;
	height: 1.05em;
	stroke-width: 1.7;
}

.cl-pf .cl-pf__btn--accent {
	background: var(--cl-pf-accent) !important;
	color: var(--cl-pf-accent-text) !important;
}

.cl-pf .cl-pf__btn--accent:hover,
.cl-pf .cl-pf__btn--accent:focus-visible {
	filter: brightness(0.9);
}

.cl-pf .cl-pf__btn--dark {
	background: var(--cl-pf-text) !important;
	color: #fff !important;
}

.cl-pf .cl-pf__btn--ghost {
	background: transparent !important;
	color: var(--cl-pf-text) !important;
	border: 1px solid var(--cl-pf-rule) !important;
}

.cl-pf .cl-pf__btn--ghost:hover {
	background: var(--cl-pf-card-hover) !important;
}

/**
 * "Refer with this pharmacy" — deliberately not tied to the Accent colour
 * setting above. It shares that colour's class name (cl-pf__btn--accent)
 * used to, back when it was a solid red fill; it's since been split off so
 * that changing the Search button's colour can never silently change this
 * one too. Fixed to the same field tokens used everywhere else on the page
 * — a transparent fill, a 16%-black border, black text — rather than the
 * usual solid brand fill a primary action would normally get.
 */
.cl-pf .cl-pf__btn--refer {
	background: transparent !important;
	color: var(--cl-pf-field-color) !important;
	border: 1px solid var(--cl-pf-field-border) !important;
}

.cl-pf .cl-pf__btn--refer:hover,
.cl-pf .cl-pf__btn--refer:focus-visible {
	background: var(--cl-pf-card-hover) !important;
	border-color: var(--cl-pf-field-color) !important;
}

.cl-pf .cl-pf__btn:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

/* ----------------------------------------------------------------
   Results head
   ---------------------------------------------------------------- */

.cl-pf__results-head {
	display: flex;
	align-items: center;
	gap: 16px 20px;
	flex-wrap: wrap;
	padding: 36px 0 18px;
}

/**
 * A label for the list, not a heading competing with it. Deliberately
 * smaller than a pharmacy name: it is read once, the names are scanned.
 */
.cl-pf .cl-pf__count {
	margin: 0 0 0 auto !important;
	padding: 0;
	font-size: var(--cl-pf-fs-count) !important;
	font-weight: 500;
	line-height: var(--cl-pf-lh-tight) !important;
	letter-spacing: 0;
	text-transform: none !important;
}

/* ----------------------------------------------------------------
   Sort control
   ---------------------------------------------------------------- */

/* Visually hidden but read aloud. */
.cl-pf .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* ----------------------------------------------------------------
   Sort — a small custom dropdown, not a native select
   ----------------------------------------------------------------
   Built to match Formulary's own sort control exactly: the toggle always
   reads "Sort" (a native select can't do that — it always shows whichever
   option is chosen), and the active choice is shown by a filled dot in the
   panel instead. Colours, radius, radio-dot sizing and the panel's shadow
   are all taken from products-feed.css rather than approximated.
   ---------------------------------------------------------------- */

.cl-pf__sort {
	position: relative;
	flex: none;
}

.cl-pf .cl-pf__sort-toggle {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--cl-pf-field-font);
	font-weight: 400;
	font-size: var(--cl-pf-field-fs);
	line-height: var(--cl-pf-field-lh);
	color: var(--cl-pf-field-color);
	background: #fff;
	border: 1px solid var(--cl-pf-field-border);
	border-radius: var(--cl-pf-field-radius);
	box-shadow: var(--cl-pf-field-shadow);
	padding: 8px 16px;
	cursor: pointer;
	white-space: nowrap;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.cl-pf .cl-pf__sort-toggle:hover {
	border-color: var(--cl-pf-field-color);
}

.cl-pf .cl-pf__sort-toggle:focus-visible {
	outline: none;
	border-color: var(--cl-pf-field-color);
	box-shadow: 0 0 0 3px rgba(22, 35, 43, 0.08);
}

.cl-pf .cl-pf__sort[data-open="true"] .cl-pf__sort-toggle {
	border-color: var(--cl-pf-field-color);
}

.cl-pf .cl-pf__sort-chevron {
	width: 12px;
	height: 8px;
	color: var(--cl-pf-field-color);
	transition: transform 0.15s ease;
	flex: none;
}

.cl-pf .cl-pf__sort[data-open="true"] .cl-pf__sort-chevron {
	transform: rotate(180deg);
}

.cl-pf .cl-pf__sort-panel {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	z-index: 20;
	min-width: 200px;
	background: #fefdfd;
	border: 1px solid #d6d9da;
	border-radius: 10px;
	box-shadow: 0 12px 32px rgba(22, 35, 43, 0.12);
	padding: 8px;
}

.cl-pf .cl-pf__sort-panel[hidden] {
	display: none;
}

.cl-pf .cl-pf__sort-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 8px;
	border-radius: 6px;
	cursor: pointer;
	margin: 0;
}

.cl-pf .cl-pf__sort-row:hover {
	background: var(--cl-pf-card-hover);
}

.cl-pf .cl-pf__sort-row-label {
	font-family: var(--cl-pf-field-font);
	font-weight: 400;
	font-size: var(--cl-pf-field-fs);
	line-height: var(--cl-pf-field-lh);
	color: var(--cl-pf-field-color);
}

/* Visually hidden but still a real, keyboard-operable radio input — the
   dot beside it is what's actually seen and clicked. */
.cl-pf .cl-pf__sort-radio {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}

.cl-pf .cl-pf__sort-dot {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	border: 1.5px solid #d6d9da;
	background: #fff;
	flex: none;
}

.cl-pf .cl-pf__sort-dot::after {
	content: "";
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--cl-pf-field-color);
	opacity: 0;
	transition: opacity 0.1s ease;
}

.cl-pf .cl-pf__sort-radio:checked + .cl-pf__sort-dot {
	border-color: var(--cl-pf-field-color);
}

.cl-pf .cl-pf__sort-radio:checked + .cl-pf__sort-dot::after {
	opacity: 1;
}

.cl-pf .cl-pf__sort-radio:focus-visible + .cl-pf__sort-dot {
	box-shadow: 0 0 0 3px rgba(22, 35, 43, 0.15);
}

.cl-pf .cl-pf__select--sm {
	height: var(--cl-pf-h-control);
	padding: 0 36px 0 14px;
	background-position: right 11px center;
}

/* ----------------------------------------------------------------
   Result cards
   ---------------------------------------------------------------- */

.cl-pf__results {
	display: grid;
	gap: var(--cl-pf-gap);
	/**
	 * Every card on the page is as tall as the tallest one. Contact details
	 * are optional per pharmacy, so left to themselves the cards step up and
	 * down the page. Only the cards loaded so far are in the list (the rest
	 * are not in the page at all), so the height settles per slice rather
	 * than being dictated by the single longest address in the network.
	 */
	grid-auto-rows: 1fr;
}

.cl-pf__card {
	display: flex;
	gap: 24px;
	align-items: flex-start;
	flex-wrap: wrap;
	height: 100%;
	border: 1px solid var(--cl-pf-rule);
	border-radius: var(--cl-pf-radius);
	padding: 22px 24px;
	background: var(--cl-pf-card-bg);
}

.cl-pf__card[hidden] {
	display: none;
}

.cl-pf__map {
	flex: 0 0 var(--cl-pf-map-w);
	width: var(--cl-pf-map-w);
	height: var(--cl-pf-map-h);
	border-radius: var(--cl-pf-radius-sm);
	overflow: hidden;
	background: var(--cl-pf-pill);
	/* Leaflet stacks its panes high; without a stacking context here a
	   thumbnail will happily paint over a sticky header. */
	position: relative;
	z-index: 0;
	isolation: isolate;
}

.cl-pf__map--none {
	background-image: repeating-linear-gradient(135deg, rgba(14, 36, 34, 0.05) 0 6px, transparent 6px 12px);
}

.cl-pf .cl-pf__map .leaflet-container {
	width: 100%;
	height: 100%;
	background: var(--cl-pf-pill);
	font-family: inherit;
	/* The thumbnails are inert, so nothing should suggest otherwise. */
	cursor: default;
}

.cl-pf__pin {
	display: block;
	width: var(--cl-pf-i-xs);
	height: var(--cl-pf-i-xs);
	border-radius: 50%;
	background: var(--cl-pf-accent);
	border: 3px solid #fff;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}

.cl-pf__card-main {
	flex: 1;
	min-width: 240px;
}

.cl-pf__card-top {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	margin-bottom: 10px;
}

.cl-pf .cl-pf__card-name {
	margin: 0 !important;
	padding: 0;
	font-family: var(--cl-pf-title-font);
	font-size: var(--cl-pf-title-fs) !important;
	font-weight: var(--cl-pf-title-fw) !important;
	line-height: var(--cl-pf-title-lh) !important;
	color: var(--cl-pf-title-color);
	text-transform: none !important;
}

/* The name takes focus (by script only) when more results load from the
   keyboard. A mouse click on Load more moves focus there too, and a ring
   round a heading nobody tabbed to looks like a bug, so the ring only shows
   when the browser judges it useful. */
.cl-pf .cl-pf__card-name:focus:not(:focus-visible) {
	outline: none;
}

.cl-pf__dist {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: var(--cl-pf-fs-xs);
	background: var(--cl-pf-pill);
	padding: 4px 10px;
	border-radius: 999px;
	line-height: 1;
	opacity: 0.85;
}

.cl-pf__dist[hidden] {
	display: none;
}

.cl-pf__dist .cl-pf__i {
	width: var(--cl-pf-i-xs);
	height: var(--cl-pf-i-xs);
}

.cl-pf__meta {
	display: grid;
	gap: 6px;
	font-size: var(--cl-pf-meta-fs);
	line-height: 1.45;
}

.cl-pf__meta-row {
	display: flex;
	align-items: flex-start;
	gap: 10px;
}

.cl-pf__meta-row .cl-pf__i {
	width: var(--cl-pf-i-sm);
	height: var(--cl-pf-i-sm);
	opacity: 0.4;
	margin-top: 2px;
}

.cl-pf__meta-row a {
	color: inherit;
	text-decoration: none;
}

.cl-pf__meta-row a:hover {
	color: var(--cl-pf-accent);
}

/* A line that only says the pharmacy has not given us the detail. Dimmed so
   it reads as an absence while still holding the row's place, which is what
   keeps every card the same shape. */
.cl-pf__meta-row--none {
	opacity: 0.45;
}

.cl-pf__card-actions {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.cl-pf .cl-pf__card-actions .cl-pf__btn {
	white-space: nowrap;
	padding: 0 18px !important;
	/* Beats .cl-pf .cl-pf__btn's rem size: one more class, both !important. */
	font-size: var(--cl-pf-card-btn-fs) !important;
}

.cl-pf .cl-pf__notice {
	margin: 0 0 16px !important;
	padding: 12px 16px;
	background: #fcf9e8;
	border-left: 4px solid #dba617;
	border-radius: 4px;
	font-size: var(--cl-pf-fs-sm);
	color: #3c3c3c;
}

/* ----------------------------------------------------------------
   Grid layout
   ----------------------------------------------------------------
   Same cards, stacked instead of strung out: the map goes full width
   across the top, the details underneath, and the buttons sit at the
   foot of the card so they line up across a row however much address
   each pharmacy has. grid-auto-rows: 1fr on the list is what makes
   that last part work.
   ---------------------------------------------------------------- */

/**
 * As many columns as fit, but never more than the "Columns" setting.
 *
 * auto-fill on its own keeps adding columns on a wide screen until the cards
 * are postage stamps. Flooring the track at 1/--cl-pf-cols of the row (less
 * the gaps between that many cards, --cl-pf-cols-gaps) means one more column
 * than the setting allows can never fit, while the narrowest-card setting
 * still governs everything below that.
 *
 * Both custom properties are written per instance from the Columns dropdown
 * (pharmacy-finder.php), so this rule never hardcodes a number itself —
 * the previous version divided by a literal 4 here regardless of what the
 * setting said, which is why changing it to 3 had no visible effect.
 */
.cl-pf[data-layout="grid"] .cl-pf__results {
	grid-template-columns: repeat(
		auto-fill,
		minmax(max(var(--cl-pf-grid-min), (100% - var(--cl-pf-cols-gaps) * var(--cl-pf-gap)) / var(--cl-pf-cols)), 1fr)
	);
}

.cl-pf[data-layout="grid"] .cl-pf__card {
	flex-direction: column;
	flex-wrap: nowrap;
	gap: 16px;
	align-items: stretch;
}

.cl-pf[data-layout="grid"] .cl-pf__map {
	flex: 0 0 auto;
	width: 100%;
}

.cl-pf[data-layout="grid"] .cl-pf__card-main {
	flex: 1 1 auto;
	min-width: 0;
}

.cl-pf[data-layout="grid"] .cl-pf__card-actions {
	flex-direction: row;
	flex-wrap: wrap;
	margin-top: auto;
}

.cl-pf[data-layout="grid"] .cl-pf__card-actions .cl-pf__btn {
	flex: 1 1 auto;
}

/* ----------------------------------------------------------------
   Empty state
   ---------------------------------------------------------------- */

.cl-pf__empty {
	text-align: center;
	max-width: 52ch;
	margin: 0 auto;
	padding: 64px 0 76px;
}

.cl-pf__empty[hidden] {
	display: none;
}

.cl-pf__empty .cl-pf__i--lg {
	opacity: 0.35;
	margin: 0 auto 20px;
	display: block;
}

.cl-pf .cl-pf__empty h3 {
	margin: 0 0 10px !important;
	padding: 0;
	font-size: var(--cl-pf-fs-sub) !important;
	font-weight: 500;
	line-height: var(--cl-pf-lh-tight) !important;
	text-transform: none !important;
}

.cl-pf__empty p {
	margin: 0 0 24px;
	font-size: var(--cl-pf-fs-meta);
	opacity: 0.75;
}

.cl-pf__empty-actions {
	display: flex;
	gap: 10px;
	justify-content: center;
	flex-wrap: wrap;
}

.cl-pf__empty-actions [hidden] {
	display: none;
}

/* ----------------------------------------------------------------
   Infinite scroll
   ---------------------------------------------------------------- */

/**
 * Zero-height and unclickable — this exists purely so an
 * IntersectionObserver has something to watch just above the fold, letting
 * script.js load the next slice slightly before the visitor actually
 * reaches the bottom rather than after, which is what rootMargin does in
 * script.js. Hidden once nothing remains to load, alongside the button.
 */
.cl-pf__sentinel {
	height: 1px;
}

.cl-pf__sentinel[hidden] {
	display: none;
}

.cl-pf__load-wrap {
	display: flex;
	justify-content: center;
	padding: 28px 0 0;
}

.cl-pf .cl-pf__load-wrap .cl-pf__btn {
	min-width: 220px;
}

.cl-pf .cl-pf__load-wrap .cl-pf__btn[hidden] {
	display: none;
}

/* ----------------------------------------------------------------
   Salient overrides
   ----------------------------------------------------------------
   Salient styles bare form controls globally — inputs, selects and
   buttons all get width: 100%, their own height, line-height, margin
   and border, from selectors specific enough to beat a single class.
   Left alone, the search row stops being a row: the field, the radius
   select and the Search button each take a full line.

   These are scoped to .cl-pf so nothing else on the site changes.
   ---------------------------------------------------------------- */

.cl-pf .cl-pf__row .cl-pf__input {
	flex: 1 1 260px !important;
	width: auto !important;
	margin: 0 !important;
}

.cl-pf .cl-pf__row .cl-pf__field {
	width: 100% !important;
	min-height: 0 !important;
	margin: 0 !important;
	box-shadow: none !important;
}

.cl-pf .cl-pf__row .cl-pf__select,
.cl-pf .cl-pf__row .cl-pf__btn {
	flex: 0 0 auto !important;
	width: auto !important;
	min-height: 0 !important;
	margin: 0 !important;
	box-shadow: none !important;
}

.cl-pf .cl-pf__select {
	-webkit-appearance: none !important;
	appearance: none !important;
	background-color: #fff !important;
	text-indent: 0 !important;
}

.cl-pf select.cl-pf__select {
	opacity: 1 !important;
	position: static !important;
}

.cl-pf .cl-pf__field:focus,
.cl-pf .cl-pf__select:focus {
	box-shadow: none !important;
}

.cl-pf h2,
.cl-pf h3 {
	text-transform: none !important;
}

/* ----------------------------------------------------------------
   Small screens
   ---------------------------------------------------------------- */

@media (max-width: 900px) {

	.cl-pf__search {
		padding: 32px 22px;
	}

	.cl-pf .cl-pf__row .cl-pf__input,
	.cl-pf .cl-pf__row .cl-pf__select,
	.cl-pf .cl-pf__row .cl-pf__btn {
		flex: 1 1 100% !important;
		width: 100% !important;
	}

	.cl-pf__results-head {
		padding-top: 28px;
	}

	.cl-pf__card {
		padding: 18px 20px;
		gap: 16px;
	}

	.cl-pf__map {
		flex: 1 1 100%;
		width: 100%;
	}

	.cl-pf__card-actions {
		width: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {

	.cl-pf * {
		transition-duration: 0.01ms !important;
	}
}