/* ==========================================================================
   Sidebar product filters
   --------------------------------------------------------------------------
   Layout: a 288px filter rail beside the product grid on desktop; below
   1024px the rail becomes a slide-in panel opened from a "Filters" button
   that sits in the results bar.

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

.rmp-listing{display:grid;grid-template-columns:288px minmax(0,1fr);
	gap:var(--rmp-s4) var(--rmp-s5);align-items:start}

/* Results bar: count on the left, mobile filter button on the right. */
.rmp-listing__bar{grid-column:2;display:flex;align-items:center;justify-content:space-between;
	gap:var(--rmp-s3);padding-bottom:var(--rmp-s3);border-bottom:1px solid var(--rmp-line)}
.rmp-listing__count{margin:0;font-size:.9375rem;font-weight:500;color:var(--rmp-muted)}
.rmp-listing__main{grid-column:2}
/* With the red "Filter by" bar above the listing the count is already stated
   there, so this row is left holding the mobile Filters button alone -- no
   rule, no reserved space, and nothing at all on desktop. */
.rmp-listing__bar--compact{border-bottom:0;padding-bottom:0;justify-content:flex-end}
@media (min-width:1024px){
	.rmp-listing__bar--compact{display:none}
}

/* The red bar's grid is a hard repeat(3,1fr) in pages.css; these keep it
   honest when a listing shows two or four selects instead of three. */
.rmp-filter__row--1{grid-template-columns:minmax(0,1fr) auto}
.rmp-filter__row--2{grid-template-columns:repeat(2,minmax(0,1fr)) auto}
.rmp-filter__row--4{grid-template-columns:repeat(4,minmax(0,1fr)) auto}
/* Mobile: stack every bar one field per row, like All Products (pages.css
   does this for the 3-select bar at the same breakpoint; the counted
   variants above were overriding it on Dog Food and Cat Food). */
@media (max-width:900px){
	.rmp-filter__row--1,.rmp-filter__row--2,.rmp-filter__row--4{grid-template-columns:1fr}
}
/* "n selected", shown when the rail has more than one option on in a group. */
.rmp-filter select option[data-rmp-multi]{font-style:italic}

/* --------------------------------------------------------------------------
   The rail
   -------------------------------------------------------------------------- */
.rmp-pfilter{grid-column:1;grid-row:1/span 2;position:sticky;top:24px}
.rmp-pfilter__panel{background:#fff;border:1px solid var(--rmp-line);border-radius:var(--rmp-radius);
	padding:var(--rmp-s3) var(--rmp-s3) var(--rmp-s2)}
.rmp-pfilter__head{display:flex;align-items:center;gap:var(--rmp-s2);
	padding-bottom:var(--rmp-s3);border-bottom:2px solid var(--rmp-ink)}
.rmp-pfilter__title{margin:0;font-size:1rem;font-weight:700;letter-spacing:.12em;
	text-transform:uppercase;color:var(--rmp-ink);line-height:1.2}
.rmp-pfilter__clear{margin-left:auto;background:none;border:0;padding:0;cursor:pointer;
	font:500 .875rem/1.2 var(--rmp-font);color:var(--rmp-red);text-decoration:underline;
	text-underline-offset:3px}
.rmp-pfilter__clear:hover{color:var(--rmp-red-dark)}
/* Close (mobile panel only) and the sticky "Show n products" footer. */
.rmp-pfilter__close{display:none;margin-left:auto;width:40px;height:40px;padding:0;
	background:none;border:0;border-radius:50%;color:var(--rmp-ink);cursor:pointer}
.rmp-pfilter__close svg{width:22px;height:22px;display:block;margin:0 auto}
.rmp-pfilter__close:hover{background:var(--rmp-soft)}
.rmp-pfilter__foot{display:none}

/* Chips: what is currently on, each one removable. */
.rmp-pfilter__chips{list-style:none;margin:var(--rmp-s3) 0 0;padding:0;
	display:flex;flex-wrap:wrap;gap:8px}
.rmp-chip{display:inline-flex;align-items:center;gap:8px;cursor:pointer;
	background:var(--rmp-red-tint);border:1px solid var(--rmp-red);border-radius:999px;
	padding:6px 10px 6px 12px;font:600 .8125rem/1.2 var(--rmp-font);color:var(--rmp-red-dark)}
.rmp-chip:hover{background:var(--rmp-red);color:#fff}
.rmp-chip svg{width:13px;height:13px;flex:0 0 auto}

/* --------------------------------------------------------------------------
   Accordion groups
   -------------------------------------------------------------------------- */
.rmp-pfgroup{border-bottom:1px solid var(--rmp-line)}
.rmp-pfgroup[hidden]{display:none}
/* Group offered in the red bar only (shortcode skip=""). Its checkboxes stay
   in the form -- the script filters from them -- but nothing shows here. */
.rmp-pfgroup--off{display:none}
.rmp-pfgroup__head{display:flex;align-items:center;gap:10px;cursor:pointer;list-style:none;
	padding:var(--rmp-s3) 0;user-select:none}
.rmp-pfgroup__head::-webkit-details-marker{display:none}
.rmp-pfgroup__title{font-size:.8125rem;font-weight:700;letter-spacing:.1em;
	text-transform:uppercase;color:var(--rmp-ink)}
/* Count of what is selected in a collapsed group. */
.rmp-pfgroup__tally{min-width:20px;height:20px;padding:0 6px;border-radius:999px;
	background:var(--rmp-red);color:#fff;font:700 .6875rem/20px var(--rmp-font);text-align:center}
.rmp-pfgroup__tally[hidden]{display:none}
/* Chevron, drawn in CSS so no icon font is needed. */
.rmp-pfgroup__head:after{content:"";margin-left:auto;width:9px;height:9px;flex:0 0 auto;
	border-right:2px solid var(--rmp-ink);border-bottom:2px solid var(--rmp-ink);
	transform:rotate(45deg) translateY(-2px);transition:transform .18s ease}
.rmp-pfgroup[open] .rmp-pfgroup__head:after{transform:rotate(225deg) translateY(-2px)}
.rmp-pfgroup__head:hover .rmp-pfgroup__title{color:var(--rmp-red)}
.rmp-pfgroup__body{padding-bottom:var(--rmp-s3)}

.rmp-pfopts{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.rmp-pfopt[hidden]{display:none}
/* Options past the sixth stay behind "Show all" until the group is expanded. */
.rmp-pfgroup:not(.is-expanded) .rmp-pfopt--extra{display:none}
.rmp-pfgroup__more{margin-top:10px;background:none;border:0;padding:0;cursor:pointer;
	font:600 .8125rem/1.2 var(--rmp-font);color:var(--rmp-red);text-decoration:underline;
	text-underline-offset:3px}
.rmp-pfgroup__more:hover{color:var(--rmp-red-dark)}

/* Checkbox: the native box is kept (focus, keyboard, forms) and restyled. */
.rmp-pfopt{display:flex;align-items:flex-start;gap:10px}
.rmp-pfopt__box{appearance:none;flex:0 0 auto;width:20px;height:20px;margin:6px 0 0;
	border:2px solid var(--rmp-grey);border-radius:3px;background:#fff;cursor:pointer;
	transition:background-color .15s ease,border-color .15s ease}
.rmp-pfopt__box:hover{border-color:var(--rmp-red)}
.rmp-pfopt__box:checked{background:var(--rmp-red) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3.2 3.2L15 7' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat;
	border-color:var(--rmp-red)}
.rmp-pfopt__box:focus-visible{outline:2px solid var(--rmp-ink);outline-offset:2px}
.rmp-pfopt__label{display:flex;align-items:baseline;gap:8px;flex:1 1 auto;cursor:pointer;
	padding:6px 0;font-size:.9375rem;line-height:1.35;color:var(--rmp-body)}
.rmp-pfopt__label:hover .rmp-pfopt__text{color:var(--rmp-red)}
.rmp-pfopt__count{margin-left:auto;font-size:.8125rem;font-weight:500;color:var(--rmp-grey)}
/* Nothing behind it (yet) -- greyed rather than removed, so the shape of the
   filter set stays visible while Marketing tags the catalogue. */
.rmp-pfopt.is-empty .rmp-pfopt__label{color:var(--rmp-grey);cursor:default}
.rmp-pfopt.is-empty .rmp-pfopt__box{border-color:var(--rmp-line);background:var(--rmp-soft);cursor:default}
.rmp-pfopt.is-empty .rmp-pfopt__label:hover .rmp-pfopt__text{color:var(--rmp-grey)}

/* --------------------------------------------------------------------------
   Mobile: rail becomes a panel
   -------------------------------------------------------------------------- */
.rmp-listing__filterbtn{display:none;align-items:center;gap:10px;cursor:pointer;
	background:#fff;border:2px solid var(--rmp-ink);border-radius:999px;padding:10px 18px;
	font:700 .875rem/1.2 var(--rmp-font);color:var(--rmp-ink)}
.rmp-listing__filterbtn:hover{background:var(--rmp-ink);color:#fff}
.rmp-listing__filterbtn svg{width:18px;height:18px}
.rmp-listing__filterbtn span[data-rmp-openercount]{min-width:20px;height:20px;padding:0 6px;
	border-radius:999px;background:var(--rmp-red);color:#fff;
	font:700 .6875rem/20px var(--rmp-font);text-align:center}
.rmp-listing__filterbtn span[data-rmp-openercount][hidden]{display:none}
.rmp-pfilter__backdrop{position:fixed;inset:0;z-index:1200;background:rgba(0,0,0,.45)}
.rmp-pfilter__backdrop[hidden]{display:none}

@media (max-width:1023px){
	.rmp-listing{grid-template-columns:1fr}
	.rmp-listing__bar,.rmp-listing__main{grid-column:1}
	.rmp-listing__filterbtn{display:inline-flex}
	/* Mobile: Filters button on the left (count moves to the right). */
	.rmp-listing__filterbtn{order:-1}
	.rmp-listing__bar--compact{justify-content:flex-start}

	.rmp-pfilter{position:fixed;inset:0 auto 0 0;z-index:1201;width:min(360px,88vw);
		transform:translateX(-100%);transition:transform .24s ease;pointer-events:none}
	.rmp-pfilter.is-open{transform:none;pointer-events:auto}
	.rmp-pfilter__panel{height:100%;overflow-y:auto;border:0;border-radius:0;
		padding:var(--rmp-s3) var(--rmp-s3) 96px;box-shadow:0 0 40px rgba(0,0,0,.2)}
	.rmp-pfilter__head{position:sticky;top:0;z-index:1;background:#fff;padding-top:4px}
	.rmp-pfilter__clear{margin-left:0}
	.rmp-pfilter__close{display:block}
	.rmp-pfilter__foot{display:block;position:absolute;left:0;right:0;bottom:0;
		padding:var(--rmp-s2) var(--rmp-s3);background:#fff;border-top:1px solid var(--rmp-line)}
	.rmp-pfilter__apply{width:100%;justify-content:center}
	body.rmp-pfilter-open{overflow:hidden}
}

/* The grid loses ~300px to the rail, so let the cards run a touch narrower
   before the columns step down. */
@media (min-width:1024px){
	.rmp-listing .rmp-products{grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
}

/* --------------------------------------------------------------------------
   Desktop: the rail scrolls on its own
   With nine groups the rail is ~1570px tall (2400px with everything open)
   against a ~900px viewport, so reading the filters meant scrolling the
   product list past. Instead the rail is capped to the height of the screen
   (less the 89px sticky site header) and given its own scrollbar, with the
   "Filters / Clear all" head pinned at the top of it. overscroll-behavior
   stops the page from taking over the scroll when the rail reaches its end.
   -------------------------------------------------------------------------- */
@media (min-width:1024px){
	.rmp-pfilter{top:105px;max-height:calc(100vh - 129px)}
	.rmp-pfilter__panel{max-height:calc(100vh - 129px);overflow-y:auto;
		overscroll-behavior:contain;scrollbar-width:thin;
		scrollbar-color:var(--rmp-line) transparent}
	.rmp-pfilter__panel::-webkit-scrollbar{width:8px}
	.rmp-pfilter__panel::-webkit-scrollbar-track{background:transparent}
	.rmp-pfilter__panel::-webkit-scrollbar-thumb{background:var(--rmp-line);border-radius:999px}
	.rmp-pfilter__panel::-webkit-scrollbar-thumb:hover{background:var(--rmp-grey)}
	/* Head stays put while the groups scroll under it. */
	.rmp-pfilter__head{position:sticky;top:0;z-index:2;background:#fff;padding-top:4px}
}

/* --------------------------------------------------------------------------
   Wide monitors (>=1600px)
   The site shell is 1320px, which is right for a laptop but leaves this page
   looking pinched on a big screen: the rail eats ~300px of it, the cards drop
   to ~210px and 600px+ of desktop sits empty either side. Above 1600px the
   filter bar and the listing (and only those -- other pages and the header
   keep the 1320px shell) share a wider shell, the rail gets a little more
   room, and the cards go back to a comfortable size. Nothing here applies
   below 1600px, so laptop and mobile are untouched.

   The red "Filter by" bar above is deliberately NOT widened -- it keeps the
   standard 1320px shell at every width, as it always has.
   -------------------------------------------------------------------------- */
@media (min-width:1600px){
	.rmp-wrap:has(> .rmp-listing){max-width:min(1720px,92vw)}

	.rmp-listing{grid-template-columns:320px minmax(0,1fr);gap:var(--rmp-s4) var(--rmp-s6)}
	.rmp-listing .rmp-products{grid-template-columns:repeat(auto-fill,minmax(248px,1fr))}
}

/* --------------------------------------------------------------------------
   Laptop (1024px - 1799px): trim the red bar
   The bar is the same 214px-tall band at every width, which sits well on a
   monitor but takes a quarter of the fold on a laptop. Up to 1799px it is
   scaled back -- shallower band, shorter selects, smaller labels -- so it
   reads at the same weight a monitor gives it. The ceiling is 1799 rather
   than 1599 because laptops report up to 1792 CSS pixels (a 16" MacBook is
   1728 wide), while desk monitors start at 1920. Only this page's bar
   ([data-rmp-topbar]) is affected; the Dog Food and Cat Food bars, the
   1920px+ view and the mobile stack are all untouched.
   -------------------------------------------------------------------------- */
@media (min-width:1024px) and (max-width:1799px){
	.rmp-filter[data-rmp-topbar]{padding:18px 0}
	[data-rmp-topbar] .rmp-filter__title{font-size:.875rem;margin-bottom:12px}
	[data-rmp-topbar] .rmp-filter__row{gap:14px}
	[data-rmp-topbar] .rmp-field{gap:6px}
	[data-rmp-topbar] .rmp-field>label{font-size:.75rem}
	[data-rmp-topbar] .rmp-select{min-height:44px;padding:8px 40px 8px 14px;
		font-size:.9375rem;background-position:right 14px center}
	[data-rmp-topbar] .rmp-filter__reset{min-height:44px;padding:0 24px;font-size:.8125rem}
	[data-rmp-topbar] .rmp-filter__count{margin-top:var(--rmp-s2);font-size:.875rem}
}