/* ==========================================================================
   Store locator - map beside a scrolling list of Irish stockists
   --------------------------------------------------------------------------
   Markup comes from [rmp_stockists] (inc/stockists.php); the map is built by
   assets/js/stockists.js on Leaflet (assets/vendor/leaflet/).

   The shape deliberately matches the horse site's
   /where-to-buy/view-stores-near-you/: pill row of Where to Buy pages, a
   filter bar, then a wide map on the left with a narrow, independently
   scrolling store list on the right. Below 980px the two stack, map first,
   because on a phone the map is the orienting thing and the list is what you
   then scroll through.

   It degrades honestly. With JavaScript off there is no map, but the filter
   form is a plain GET form, every card is in the HTML, and each card still
   carries an address, a phone number and a directions link - so the page is
   a usable directory either way.

   Tokens (--rmp-red, --rmp-ink, --rmp-line, spacing steps) come from
   pages.css, which this file is enqueued after.
   ========================================================================== */

.rmp-stk{padding:var(--rmp-s5) 0 var(--rmp-s7)}
.rmp-stk__heading{margin:0 0 var(--rmp-s3)}

/* --------------------------------------------------------------------------
   Where to Buy pill row
   The horse site's tab strip. Built from the real child pages, so it cannot
   point at a page that has been unpublished.
   -------------------------------------------------------------------------- */
.rmp-stk__tabs{margin:0 0 var(--rmp-s3)}
.rmp-stk__tabs ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.rmp-stk__tab{display:inline-flex;align-items:center;min-height:44px;padding:8px 20px;
	border:1px solid var(--rmp-line);border-radius:999px;background:#fff;
	font:700 .8125rem/1.2 var(--rmp-font);letter-spacing:.06em;text-transform:uppercase;
	color:var(--rmp-ink);text-decoration:none;transition:background .18s ease,border-color .18s ease,color .18s ease}
.rmp-stk__tab:hover{border-color:var(--rmp-red);background:var(--rmp-red-tint);color:var(--rmp-red-dark)}
.rmp-stk__tab:focus-visible{outline:2px solid var(--rmp-ink);outline-offset:2px}
.rmp-stk__tab.is-current{background:var(--rmp-red);border-color:var(--rmp-red);color:#fff}
.rmp-stk__tab.is-current:hover{background:var(--rmp-red-dark);border-color:var(--rmp-red-dark);color:#fff}

/* --------------------------------------------------------------------------
   Filter bar
   Search + country + county + range, stacked on mobile. Three things set
   the column widths: "Republic of Ireland (544)" needs ~234px, the longest
   county "Dumfries and Galloway" ~252px, and the search field wants enough
   room for its own label not to wrap (~273px). Add those up with the Search
   button and everything fits on ONE line from 1250px up, which is most
   desktops - see the min-width rule below. Between 1121px and 1249px the
   four fields share the row and the button drops beneath them; under
   1120px it goes two-up, and under 640px it stacks.
   -------------------------------------------------------------------------- */
.rmp-stk__filters{display:grid;
	grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1.1fr) minmax(0,.7fr);
	gap:var(--rmp-s2) var(--rmp-s3);align-items:end;
	background:var(--rmp-soft);border-radius:var(--rmp-radius);padding:var(--rmp-s3)}
/* Wide enough for the button to come up onto the same line. The three
   selects are fixed at the width their longest option needs, so they can
   never truncate, and the search box takes whatever slack is left. */
@media (min-width:1250px){
	.rmp-stk__filters{grid-template-columns:minmax(0,1fr) 234px 252px 164px auto}
}
.rmp-stk__field{display:flex;flex-direction:column;gap:6px;min-width:0}
.rmp-stk__field label{font:700 .75rem/1.2 var(--rmp-font);letter-spacing:.1em;
	text-transform:uppercase;color:var(--rmp-ink)}
.rmp-stk__field input,
.rmp-stk__field select{width:100%;min-height:48px;padding:10px 14px;background:#fff;
	border:1px solid var(--rmp-line);border-radius:4px;
	font:400 1rem/1.3 var(--rmp-font);color:var(--rmp-body)}
/* Native arrow removed so the select matches the rest of the site's fields. */
.rmp-stk__field select{appearance:none;padding-right:40px;cursor:pointer;
	background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 7.5l5 5 5-5' fill='none' stroke='%234D4B4B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat:no-repeat;background-position:right 14px center;background-size:16px}
.rmp-stk__field input:focus-visible,
.rmp-stk__field select:focus-visible{outline:2px solid var(--rmp-ink);outline-offset:2px;
	border-color:var(--rmp-ink)}
.rmp-stk__actions{display:flex;align-items:center;flex-wrap:wrap;gap:var(--rmp-s2)}
.rmp-stk__actions .rmp-cta{min-height:48px}
.rmp-stk__clear{font:600 .875rem/1.2 var(--rmp-font);color:var(--rmp-red);
	text-decoration:underline;text-underline-offset:3px}
.rmp-stk__clear:hover{color:var(--rmp-red-dark)}

/* --------------------------------------------------------------------------
   The two columns
   3fr/1fr is the horse site's col-lg-9 + col-lg-3. The map is sticky so it
   stays put while the list scrolls past it on a long page.
   -------------------------------------------------------------------------- */
.rmp-stk__layout{margin-top:var(--rmp-s3);display:grid;
	grid-template-columns:minmax(0,3fr) minmax(0,1fr);gap:var(--rmp-s3);align-items:start}

.rmp-stk__mapcol{position:sticky;top:110px}
.rmp-stk__map{height:640px;border:1px solid var(--rmp-line);border-radius:var(--rmp-radius);
	background:var(--rmp-soft);overflow:hidden}
.rmp-stk__noscript{margin:0;padding:var(--rmp-s3);font-size:.9375rem;color:var(--rmp-body)}
.rmp-stk__note{margin:10px 0 0;font-size:.8125rem;line-height:1.5;color:var(--rmp-grey)}

/* Leaflet's own chrome, nudged onto the site's type and colours. */
.rmp-stk__map .leaflet-container{font-family:var(--rmp-font)}
.rmp-stk__map .leaflet-bar a{color:var(--rmp-ink)}
.rmp-stk__map .leaflet-bar a:hover{color:var(--rmp-red)}
.rmp-stk__map .leaflet-control-attribution{font-size:11px}

/* The pin. A CSS teardrop rather than an image file, so there is nothing to
   ship, nothing to cache-bust and it recolours with the brand. */
.rmp-stk-pin{background:none;border:0}
.rmp-stk-pin i{display:block;width:22px;height:22px;border:3px solid #fff;border-radius:50% 50% 50% 0;
	background:var(--rmp-red);transform:rotate(-45deg);box-shadow:0 2px 6px rgba(0,0,0,.35)}
.rmp-stk-pin.is-active i{background:var(--rmp-ink);width:28px;height:28px}

/* Cluster bubbles, in RED MILLS red instead of Leaflet's default green/yellow. */
.rmp-stk-cluster{background:rgba(225,0,43,.25);border-radius:50%}
.rmp-stk-cluster div{width:34px;height:34px;margin:3px;border-radius:50%;
	background:var(--rmp-red);color:#fff;text-align:center;
	font:700 .8125rem/34px var(--rmp-font)}

/* Map popup: the card's essentials, not a second copy of it. */
.rmp-stk-pop{min-width:200px}
.rmp-stk-pop h4{margin:0 0 4px;font-size:.9375rem;font-weight:700;line-height:1.3;color:var(--rmp-ink)}
.rmp-stk-pop p{margin:0 0 4px;font-size:.8125rem;line-height:1.5;color:var(--rmp-body)}
.rmp-stk-pop a{font:600 .8125rem/1.3 var(--rmp-font);color:var(--rmp-red);
	text-decoration:underline;text-underline-offset:3px}

/* --------------------------------------------------------------------------
   The list column
   Its own scrollbar, matching the horse site's ul.Stores-Near-You, so the
   page itself does not become 600 cards long.
   -------------------------------------------------------------------------- */
.rmp-stk__panel{min-width:0}
.rmp-stk__count{margin:0 0 10px;font-size:.9375rem;font-weight:600;color:var(--rmp-muted)}
.rmp-stk__empty{margin:0 0 var(--rmp-s2);color:var(--rmp-body)}
.rmp-stk__empty a{color:var(--rmp-red);text-decoration:underline;text-underline-offset:3px}
.rmp-stk__list{list-style:none;margin:0;padding:0 8px 0 0;display:flex;flex-direction:column;
	gap:10px;max-height:640px;overflow-y:auto;overscroll-behavior:contain}
/* A thin scrollbar rather than none: this list is meant to look scrollable. */
.rmp-stk__list{scrollbar-width:thin;scrollbar-color:var(--rmp-line) transparent}
.rmp-stk__list::-webkit-scrollbar{width:8px}
.rmp-stk__list::-webkit-scrollbar-thumb{background:var(--rmp-line);border-radius:999px}

/* --------------------------------------------------------------------------
   One store
   -------------------------------------------------------------------------- */
.rmp-stkcard{display:flex;flex-direction:column;gap:6px;
	background:#fff;border:1px solid var(--rmp-line);border-radius:var(--rmp-radius);
	padding:var(--rmp-s2);scroll-margin-top:8px;
	transition:border-color .18s ease,box-shadow .18s ease}
.rmp-stkcard:hover{border-color:var(--rmp-grey);box-shadow:0 6px 20px rgba(0,0,0,.06)}
/* Set when its pin is opened, so the map and the list agree about which
   store you are looking at. */
.rmp-stkcard.is-active{border-color:var(--rmp-red);box-shadow:0 0 0 2px var(--rmp-red-tint)}
.rmp-stkcard__name{margin:0;font-size:1rem;font-weight:700;line-height:1.3;color:var(--rmp-ink)}
.rmp-stkcard__place{margin:0;font-size:.8125rem;font-weight:600;color:var(--rmp-grey)}

/* Address and phone, each with a small inline icon in the left gutter -
   the horse site's map-pin and handset rows. */
.rmp-stkcard__meta{margin:0;padding-left:22px;font-size:.8125rem;line-height:1.5;
	color:var(--rmp-body);background-repeat:no-repeat;background-position:left 2px;background-size:14px}
.rmp-stkcard__meta--addr{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E1002B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E")}
.rmp-stkcard__meta--tel{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E1002B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .4 1.9.7 2.8a2 2 0 0 1-.5 2.1L8.1 9.9a16 16 0 0 0 6 6l1.3-1.2a2 2 0 0 1 2.1-.5c.9.3 1.8.6 2.8.7a2 2 0 0 1 1.7 2z'/%3E%3C/svg%3E")}
.rmp-stkcard__meta--tel a{color:var(--rmp-body);text-decoration:none}
.rmp-stkcard__meta--tel a:hover{color:var(--rmp-red);text-decoration:underline}

/* Ranges stocked. Small, quiet chips - they are a detail, not the headline. */
.rmp-stkcard__ranges{list-style:none;margin:2px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:4px}
.rmp-stkcard__ranges li{padding:2px 8px;border-radius:999px;background:var(--rmp-soft);
	font:600 .625rem/1.4 var(--rmp-font);letter-spacing:.04em;text-transform:uppercase;
	color:var(--rmp-ink)}
/* Range chips take the range colour (white text; Winner cat's orange takes the dark ink). */
.rmp-stkcard__ranges li.rmp-rng{color:#fff}
.rmp-stkcard__ranges li.rmp-rng--gnd,.rmp-stkcard__ranges li.rmp-rng--gnc{background:var(--rmp-gonative,#333F48)}
.rmp-stkcard__ranges li.rmp-rng--ld{background:var(--rmp-leader,#036355)}
.rmp-stkcard__ranges li.rmp-rng--ed{background:var(--rmp-engage,#0E004D)}
.rmp-stkcard__ranges li.rmp-rng--wd{background:var(--rmp-winner,#092D4E)}
.rmp-stkcard__ranges li.rmp-rng--wc{background:var(--rmp-winner-cat,#f79040)}

/* Actions row: directions first (it is what the page is for), then the
   quieter links. */
.rmp-stkcard__links{margin:6px 0 0;padding-top:8px;border-top:1px solid var(--rmp-line);
	display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px}
.rmp-stkcard__dir.rmp-cta{min-height:0;padding:8px 14px;font-size:.6875rem}
.rmp-stkcard__show{padding:0;border:0;background:none;cursor:pointer;
	font:600 .8125rem/1.3 var(--rmp-font);color:var(--rmp-ink);
	text-decoration:underline;text-underline-offset:3px}
.rmp-stkcard__show:hover{color:var(--rmp-red)}
.rmp-stkcard__show:focus-visible{outline:2px solid var(--rmp-ink);outline-offset:2px}
.rmp-stkcard__show[hidden]{display:none}
.rmp-stkcard__link{font:600 .8125rem/1.3 var(--rmp-font);color:var(--rmp-ink);
	text-decoration:underline;text-underline-offset:3px}
.rmp-stkcard__link:hover{color:var(--rmp-red)}
.rmp-stkcard__link:focus-visible{outline:2px solid var(--rmp-ink);outline-offset:2px}

/* --------------------------------------------------------------------------
   Narrow screens
   -------------------------------------------------------------------------- */
@media (max-width:1100px){
	.rmp-stk__layout{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}
}
@media (max-width:980px){
	/* Stacked: map first at a workable height, then the list, which gets its
	   own scroll back so the page does not run to thousands of pixels. */
	.rmp-stk__layout{grid-template-columns:1fr}
	.rmp-stk__mapcol{position:static}
	.rmp-stk__map{height:420px}
	.rmp-stk__list{max-height:560px}
}
/* The filter bar runs out of room before the map/list layout does: any
   narrower and the selects start clipping their longest option, so it
   goes two-up with the search box and the button spanning the full width. */
@media (max-width:1120px){
	.rmp-stk__filters{grid-template-columns:1fr 1fr}
	.rmp-stk__field--q{grid-column:1 / -1}
	.rmp-stk__actions{grid-column:1 / -1}
}
@media (max-width:640px){
	.rmp-stk{padding:var(--rmp-s4) 0 var(--rmp-s6)}
	.rmp-stk__filters{grid-template-columns:1fr}
	.rmp-stk__map{height:340px}
	.rmp-stk__actions .rmp-cta{flex:1 1 auto;justify-content:center;text-align:center}
}

/* --------------------------------------------------------------------------
   Filter dropdowns that always open downwards
   A native select picks its own direction, so the long County list (80+
   options) flipped upwards whenever the bar sat low in the window. With
   customisable selects (Chrome / Edge) the list is styled here and pinned
   below the field, with its own scroll. Other browsers keep the native
   select above. stockists.js scrolls the bar up first if there is not
   enough room below.
   -------------------------------------------------------------------------- */
@supports (appearance:base-select){
	.rmp-stk__field select,
	.rmp-stk__field select::picker(select){appearance:base-select}
	.rmp-stk__field select{background-image:none;padding-right:14px;
		display:flex;align-items:center;justify-content:space-between;gap:10px}
	.rmp-stk__field select::picker-icon{content:"";flex:none;width:16px;height:16px;
		background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 7.5l5 5 5-5' fill='none' stroke='%234D4B4B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat;
		transition:transform .15s}
	.rmp-stk__field select:open::picker-icon{transform:rotate(180deg)}
	.rmp-stk__field select::picker(select){
		position-area:block-end span-inline-end;position-try-fallbacks:none;
		inline-size:anchor-size(width);min-inline-size:anchor-size(width);
		block-size:auto;max-block-size:min(340px,45vh);overflow-y:auto;
		margin:4px 0 0;padding:4px;box-sizing:border-box;
		background:#fff;border:1px solid var(--rmp-line);border-radius:4px;
		box-shadow:0 8px 24px rgba(0,0,0,.14)}
	.rmp-stk__field select option{padding:9px 10px;border-radius:3px;
		font:400 1rem/1.3 var(--rmp-font);color:var(--rmp-body);
		text-transform:none;letter-spacing:normal}
	.rmp-stk__field select::picker(select){overflow-x:hidden}
	.rmp-stk__field select option::checkmark{display:none}
	.rmp-stk__field select option:hover,
	.rmp-stk__field select option:focus-visible{background:var(--rmp-soft)}
	.rmp-stk__field select option:checked{font-weight:700;color:var(--rmp-ink)}
	.rmp-stk__field select option:disabled{display:none}
	.rmp-stk__field select optgroup{font:700 .75rem/1.2 var(--rmp-font);letter-spacing:.1em;
		text-transform:uppercase;color:var(--rmp-ink)}
}