/* ==========================================================================
   Online Stockists - retailer cards, grouped by country
   --------------------------------------------------------------------------
   Markup comes from [rmp_online_stockists] (inc/online-stockists.php). The
   pill row and filter bar are the store locator's (stockists.css, loaded
   first); only what is different is here: the filter bar has three fields,
   and the results are a grid of cards under a heading per country.
   ========================================================================== */

/* Search, Country, Range, then the button: one row from 900px up. */
.rmp-onl__filters{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr) auto}
@media (min-width:1250px){
	.rmp-onl__filters{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr) auto}
}
@media (max-width:900px){
	.rmp-onl__filters{grid-template-columns:1fr 1fr}
	.rmp-onl__filters .rmp-stk__field--q,
	.rmp-onl__filters .rmp-stk__actions{grid-column:1 / -1}
}
@media (max-width:640px){
	.rmp-onl__filters{grid-template-columns:1fr}
}

.rmp-onl .rmp-stk__count{margin:var(--rmp-s3) 0 0}

/* One block per country */
.rmp-onl__group{margin-top:var(--rmp-s4)}
.rmp-onl__country{margin:0 0 var(--rmp-s2);padding-bottom:10px;border-bottom:2px solid var(--rmp-line);
	display:flex;align-items:center;gap:10px;
	font:700 1.25rem/1.2 var(--rmp-font);color:var(--rmp-ink)}
.rmp-onl__country span{display:inline-flex;align-items:center;justify-content:center;min-width:28px;height:24px;padding:0 8px;
	border-radius:999px;background:var(--rmp-soft);font:700 .75rem/1 var(--rmp-font);color:var(--rmp-ink)}

/* Cards: three across on desktop, two on tablet, one on a phone. */
.rmp-onl__grid{list-style:none;margin:0;padding:0;display:grid;
	grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--rmp-s2)}
.rmp-onl__card{display:flex;flex-direction:column;gap:6px;min-width:0;
	background:#fff;border:1px solid var(--rmp-line);border-radius:var(--rmp-radius);padding:var(--rmp-s3);
	transition:border-color .18s ease,box-shadow .18s ease}
.rmp-onl__card:hover{border-color:var(--rmp-grey);box-shadow:0 6px 20px rgba(0,0,0,.06)}
.rmp-onl__name{margin:0;font-size:1.0625rem;font-weight:700;line-height:1.3;color:var(--rmp-ink);overflow-wrap:anywhere}
.rmp-onl__host{margin:0;font-size:.8125rem;line-height:1.4;color:var(--rmp-grey);overflow-wrap:anywhere}
.rmp-onl__ranges{margin-top:6px}
/* The button sits at the foot of every card, so a row of cards lines up. */
.rmp-onl .rmp-onl__card .rmp-onl__go{margin:auto 0 0;padding-top:var(--rmp-s2)}
.rmp-onl__go .rmp-cta{width:100%;justify-content:center;text-align:center}

/* Layout row (preview switcher) */
.rmp-onl__views{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin:0 0 var(--rmp-s2)}
.rmp-onl__views>span{font-size:.875rem;font-weight:700;color:var(--rmp-grey)}
.rmp-onl__views ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.rmp-onl__view{display:inline-block;padding:8px 16px;border:1px solid var(--rmp-line);border-radius:999px;background:#fff;
	font-size:.875rem;font-weight:700;color:var(--rmp-ink);text-decoration:none}
.rmp-onl__view:hover{border-color:var(--rmp-ink)}
.rmp-onl__view.is-current{background:var(--rmp-ink);border-color:var(--rmp-ink);color:#fff}

/* Featured tiles: four across on desktop */
.rmp-onl__tiles{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--rmp-s2)}
.rmp-onl__tile{display:flex;flex-direction:column;gap:6px;min-width:0;text-align:center;
	background:#fff;border:1px solid var(--rmp-line);border-radius:var(--rmp-radius);padding:var(--rmp-s3);
	transition:border-color .18s ease,box-shadow .18s ease}
.rmp-onl__tile:hover{border-color:var(--rmp-grey);box-shadow:0 6px 20px rgba(0,0,0,.06)}
.rmp-onl__logo{display:flex;align-items:center;justify-content:center;min-height:96px;margin-bottom:6px;
	background:var(--rmp-soft);border-radius:calc(var(--rmp-radius) - 2px);padding:12px}
.rmp-onl__logo img{width:auto;height:auto;max-width:80%;max-height:72px;object-fit:contain}
.rmp-onl__logo--text .rmp-onl__name{font-size:1.375rem;line-height:1.2}
.rmp-onl__tile .rmp-onl__name{overflow-wrap:anywhere}
.rmp-onl .rmp-onl__tile .rmp-onl__go{margin:auto 0 0;padding-top:var(--rmp-s2)}

/* RED MILLS Store: one wide tile, logo left and button right */
.rmp-onl__store .rmp-onl__tiles{grid-template-columns:minmax(0,1fr)}
.rmp-onl__store .rmp-onl__tile{flex-direction:row;align-items:center;gap:var(--rmp-s3)}
.rmp-onl__store .rmp-onl__logo{flex:1 1 auto;margin:0}
.rmp-onl .rmp-onl__store .rmp-onl__go{margin:0;padding:0;flex:none}
.rmp-onl__store .rmp-onl__go .rmp-cta{width:auto}
.rmp-onl .rmp-onl__storecopy{font-size:calc(var(--rmp-copy,.9375rem) + 4px)}
.rmp-onl .rmp-onl__storecopy a{color:var(--rmp-red,#E1002B);text-decoration:underline}
.rmp-onl__logolink{display:flex;align-items:center;justify-content:center;width:100%;min-height:inherit;color:inherit;text-decoration:none}
.rmp-onl__listanchor{scroll-margin-top:110px}
@media (max-width:640px){
	.rmp-onl__store .rmp-onl__tile{flex-direction:column;align-items:stretch}
	.rmp-onl__store .rmp-onl__go .rmp-cta{width:100%}
}

/* Compact list: letter buttons, then a table */
.rmp-onl__letters{margin:var(--rmp-s3) 0 var(--rmp-s2)}
.rmp-onl__letters ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.rmp-onl__letters a,.rmp-onl__letters span{display:inline-flex;align-items:center;justify-content:center;min-width:26px;height:26px;padding:0 6px;
	border-radius:4px;background:var(--rmp-soft);font-size:.8125rem;font-weight:700;color:var(--rmp-ink);text-decoration:none}
.rmp-onl__letters a:hover{background:#e2e2e2}
.rmp-onl__letters a.is-current{background:var(--rmp-red,#E4002B);color:#fff}
.rmp-onl__letters span.is-empty{background:transparent;color:#bdbdbd}
.rmp-onl__table{width:100%;border-collapse:collapse;text-align:left}
.rmp-onl__table thead th{padding:10px 10px;font-size:.75rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--rmp-grey);border-bottom:1px solid var(--rmp-line)}
.rmp-onl__table td,.rmp-onl__table tbody th{padding:12px 10px;border-bottom:1px solid var(--rmp-line);vertical-align:middle;text-align:left;font-weight:400}
.rmp-onl__table tbody th .rmp-onl__name,.rmp-onl__table tbody th .rmp-onl__host{display:block}
.rmp-onl__table .rmp-onl__ranges{margin:0}
.rmp-onl__table td:nth-child(2){white-space:nowrap}
.rmp-onl__cell-go{text-align:right!important;white-space:nowrap}
.rmp-onl__visit{font-size:.8125rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--rmp-red,#E4002B);text-decoration:none}
.rmp-onl__visit:hover{text-decoration:underline}
@media (max-width:760px){
	.rmp-onl__table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
	.rmp-onl__table,.rmp-onl__table tbody,.rmp-onl__table tr,.rmp-onl__table td,.rmp-onl__table tbody th{display:block}
	.rmp-onl__table tr{padding:12px 0;border-bottom:1px solid var(--rmp-line)}
	.rmp-onl__table td,.rmp-onl__table tbody th{padding:3px 0;border:0}
	.rmp-onl__cell-go{text-align:left!important}
}

/* Pager under the table */
.rmp-onl__pager{margin:var(--rmp-s3) 0 0;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 20px}
.rmp-onl__pager-count{margin:0;font-size:.875rem;color:var(--rmp-grey)}
.rmp-onl__pager ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.rmp-onl__pg{display:inline-flex;align-items:center;justify-content:center;min-width:36px;height:36px;padding:0 10px;border:1px solid var(--rmp-line);
	border-radius:6px;background:#fff;font-size:.875rem;font-weight:700;color:var(--rmp-ink);text-decoration:none}
.rmp-onl__pg:hover{border-color:var(--rmp-ink)}
.rmp-onl__pg.is-current{background:var(--rmp-red,#E4002B);border-color:var(--rmp-red,#E4002B);color:#fff}

/* A-Z list */
.rmp-onl__az-nav ul{list-style:none;margin:0 0 var(--rmp-s2);padding:0;display:flex;flex-wrap:wrap;gap:6px}
.rmp-onl__az-nav a{display:inline-flex;align-items:center;justify-content:center;min-width:34px;height:34px;padding:0 6px;
	border:1px solid var(--rmp-line);border-radius:8px;font-size:.875rem;font-weight:700;color:var(--rmp-ink);text-decoration:none;background:#fff}
.rmp-onl__az-nav a:hover{border-color:var(--rmp-ink)}
.rmp-onl__az{column-count:3;column-gap:var(--rmp-s4)}
.rmp-onl__az-group{break-inside:avoid;margin:0 0 var(--rmp-s3);scroll-margin-top:100px}
.rmp-onl__az-group h4{margin:0 0 6px;padding-bottom:4px;border-bottom:1px solid var(--rmp-line);font-size:1.125rem;font-weight:700;color:var(--rmp-red,var(--rmp-ink))}
.rmp-onl__az-group ul{list-style:none;margin:0;padding:0}
.rmp-onl__az-group li{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:5px 0;border-bottom:1px solid var(--rmp-soft)}
.rmp-onl__az-group li a{color:var(--rmp-ink);text-decoration:none;font-weight:600;overflow-wrap:anywhere}
.rmp-onl__az-group li a:hover{text-decoration:underline}
.rmp-onl__tag{flex:none;font-size:.6875rem;font-weight:700;letter-spacing:.04em;color:var(--rmp-grey)}

/* Grouped by type: a count tile per type, linking to its block */
.rmp-onl__types{list-style:none;margin:var(--rmp-s3) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--rmp-s2)}
.rmp-onl__types a{display:flex;align-items:center;gap:14px;height:100%;padding:var(--rmp-s2) var(--rmp-s3);
	border:1px solid var(--rmp-line);border-radius:var(--rmp-radius);background:var(--rmp-soft);color:var(--rmp-ink);text-decoration:none}
.rmp-onl__types a:hover{border-color:var(--rmp-ink)}
.rmp-onl__types strong{font-size:1.75rem;line-height:1;font-weight:700}
.rmp-onl__types span{font-size:.9375rem;font-weight:700;line-height:1.3}
.rmp-onl__group{scroll-margin-top:100px}

@media (max-width:1100px){
	.rmp-onl__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
	.rmp-onl__tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
	.rmp-onl__az{column-count:2}
}
@media (max-width:640px){
	.rmp-onl__grid{grid-template-columns:1fr}
	.rmp-onl__tiles{grid-template-columns:1fr}
	.rmp-onl__az{column-count:1}
	.rmp-onl__types{grid-template-columns:1fr}
}