/* ---------------------------------------------------------------------------
 * RMS Commerce Core — category overview, category nav and category archive
 * hero. Rendered by RMS_Taxonomy.
 *
 * Depends on rms-base.css for .rms-btn, .rms-pill, .rms-chip, focus states and
 * the reduced-motion block; nothing here redefines any of them.
 *
 * REPLACES: three copies of a ~600-line inline <style> block, one per site,
 * printed on every page view of the overview page and carrying its own
 * hardcoded brand colour, its own --radius and its own sticky-header offset
 * that had to be hand-tuned per theme. All of that is tokens here.
 * ------------------------------------------------------------------------- */

.rms-cats {
	max-width: var(--rms-maxw, 1280px);
	margin: 0 auto;
	padding: 0 var(--rms-gutter, 16px);
	color: var(--rms-text, #12181d);
}

/* ---------------------------------------------------------------------------
 * PAGE HEADER
 * ------------------------------------------------------------------------- */

.rms-cats__head {
	/* The standard information band — CONTAINED (v1.4): the viewport-bleed
	   variant overflowed inside padded theme containers. */
	margin: 8px 0 0;
	padding: 32px clamp(20px, 4vw, 40px) 26px;
	background-image:
		linear-gradient(rgba(246, 248, 250, 0.93), rgba(246, 248, 250, 0.96)),
		var(--rms-band-img, none);
	background-size: cover;
	background-position: center;
	background-color: var(--rms-muted, #f6f8fa);
	border: 1px solid var(--rms-border, #dfe6ec);
	border-left: 4px solid var(--rms-primary, #0098db);
	border-radius: 14px;
}

.rms-cats__bar {
	position: sticky;
	top: 0;
	z-index: 30;
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 14px 0 0;
	padding: 10px 12px;
	background: color-mix(in srgb, var(--rms-surface, #fff) 93%, transparent);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border: 1px solid var(--rms-border, #dfe6ec);
	border-radius: 12px;
	box-shadow: 0 8px 20px rgba(9, 14, 22, 0.05);
}

@supports not (background: color-mix(in srgb, red 20%, transparent)) {
	.rms-cats__bar { background: var(--rms-surface, #fff); }
}

@media (min-width: 900px) {
	.rms-cats__bar {
		position: sticky;
		/* Overridable per theme from the token block or a child stylesheet;
		   the legacy files hardcoded 110px and 112px and 144px in three
		   different places on three sites. */
		top: var(--rms-sticky-top, 0px);
		z-index: 30;
	}

	body.admin-bar .rms-cats__bar {
		top: calc(var(--rms-sticky-top, 0px) + 32px);
	}
}

@media (max-width: 899px) {
	.rms-cats__bar {
		flex-wrap: wrap;
	}

	.rms-cats__filterwrap {
		flex: 1 1 100%;
	}

	.rms-cats__views {
		display: none;
	}
}

.rms-cats__filterwrap {
	position: relative;
	display: flex;
	align-items: center;
	gap: 8px;
}

.rms-cats__input {
	width: 100%;
	min-height: 40px;
	padding: 8px 12px;
	padding-right: 34px;
	background: var(--rms-surface, #fff);
	border: 1px solid var(--rms-border, #dfe6ec);
	border-radius: var(--rms-radius-sm, 6px);
	font-family: inherit;
	font-size: 14px;
	color: var(--rms-text, #12181d);
	appearance: none;
}

.rms-cats__input:focus {
	border-color: var(--rms-primary, #0098db);
	outline: none;
}

.rms-cats__input:focus-visible {
	outline: 3px solid var(--rms-text, #12181d);
	outline-offset: 2px;
}

.rms-cats__input::placeholder {
	color: var(--rms-text-mut, #5b6b78);
	opacity: 1;
}

/* The "/" hint. Hidden once the field has focus, because at that point the
   shortcut has already done its job. */
.rms-cats__kbd {
	position: absolute;
	right: 10px;
	padding: 1px 6px;
	border: 1px solid var(--rms-border, #dfe6ec);
	border-radius: 4px;
	font-family: inherit;
	font-size: 11px;
	font-weight: 700;
	line-height: 1.5;
	color: var(--rms-text-mut, #5b6b78);
	pointer-events: none;
}

.rms-cats__filterwrap:focus-within .rms-cats__kbd {
	display: none;
}

.rms-cats__clear {
	flex: 0 0 auto;
	padding: 6px 10px;
	background: transparent;
	border: 1px solid var(--rms-border, #dfe6ec);
	border-radius: var(--rms-radius-sm, 6px);
	font-family: inherit;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--rms-text-mut, #5b6b78);
	cursor: pointer;
}

.rms-cats__clear:hover {
	color: var(--rms-text, #12181d);
	border-color: var(--rms-text-mut, #5b6b78);
}

.rms-cats__clear:focus-visible {
	outline: 3px solid var(--rms-text, #12181d);
	outline-offset: 2px;
}

/* Jump nav -------------------------------------------------------------- */

.rms-cats__jump {
	min-width: 0;
}

.rms-cats__jumplist {
	display: flex;
	gap: 6px;
	margin: 0;
	padding: 2px 0;
	list-style: none;
	overflow-x: auto;
	scrollbar-width: thin;
	-webkit-overflow-scrolling: touch;
}

.rms-cats__jumplink {
	/* .rms-chip supplies the shell; only the size differs here. */
	padding: 6px 10px;
	font-size: 12.5px;
}

/* Layout toggle --------------------------------------------------------- */

.rms-cats__views {
	display: inline-flex;
	border: 1px solid var(--rms-border, #dfe6ec);
	border-radius: var(--rms-radius-sm, 6px);
	overflow: hidden;
}

.rms-cats__view {
	padding: 7px 12px;
	background: var(--rms-surface, #fff);
	border: 0;
	font-family: inherit;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--rms-text-mut, #5b6b78);
	cursor: pointer;
}

.rms-cats__view + .rms-cats__view {
	border-left: 1px solid var(--rms-border, #dfe6ec);
}

.rms-cats__view[aria-pressed='true'] {
	background: var(--rms-text, #12181d);
	color: #fff;
}

.rms-cats__view:focus-visible {
	outline: 3px solid var(--rms-text, #12181d);
	outline-offset: -3px;
}

/* ---------------------------------------------------------------------------
 * SECTIONS
 * ------------------------------------------------------------------------- */

.rms-cats__sec {
	padding: 44px 0;
	border-bottom: 1px solid var(--rms-border, #dfe6ec);
	scroll-margin-top: 130px;
}

/* Alternating grounds — as contained tinted panels (v1.4): the full-bleed
   variant overflowed inside padded theme containers. */
.rms-cats__sec:nth-child(even) {
	padding: 40px clamp(18px, 3vw, 32px);
	background: color-mix(in srgb, var(--rms-muted, #f6f8fa) 55%, var(--rms-surface, #fff));
	border: 1px solid var(--rms-border, #dfe6ec);
	border-radius: 16px;
	margin-block: 8px;
}

@supports not (background: color-mix(in srgb, red 20%, transparent)) {
	.rms-cats__sec:nth-child(even) { background: var(--rms-muted, #f6f8fa); }
}

.rms-cats__sec:last-child {
	border-bottom: 0;
}

.rms-cats__sechead {
	display: grid;
	grid-template-columns: 96px minmax(0, 1fr) auto;
	align-items: start;
	gap: 20px;
	margin-bottom: 22px;
}

@media (max-width: 720px) {
	.rms-cats__sechead {
		grid-template-columns: 64px minmax(0, 1fr);
	}

	.rms-cats__secact {
		grid-column: 1 / -1;
	}
}

.rms-cats__secname {
	margin: 0 0 6px;
	font-size: 22px;
	line-height: 1.2;
	font-weight: 700;
	letter-spacing: -0.01em;
}

.rms-cats__secmeta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin: 0 0 8px;
	font-size: 13px;
	font-weight: 600;
	color: var(--rms-text-mut, #5b6b78);
}

.rms-cats__dot {
	color: var(--rms-border, #dfe6ec);
}

.rms-cats__secdesc {
	max-width: 72ch;
	font-size: 14.5px;
	line-height: 1.65;
	color: var(--rms-text-mut, #5b6b78);
}

.rms-cats__secdesc p {
	margin: 0 0 8px;
}

.rms-cats__secdesc p:last-child {
	margin-bottom: 0;
}

.rms-cats__secact {
	align-self: center;
}

/* ---------------------------------------------------------------------------
 * MEDIA AND MONOGRAM
 *
 * A category with no image gets a monogram tile, not a stock photograph of
 * something else. The hue comes from the slug via crc32 in PHP, so it is
 * stable between renders and different between neighbours; saturation and
 * lightness are fixed here so the tile can never come out loud, and can never
 * accidentally imitate the brand colour.
 * ------------------------------------------------------------------------- */

.rms-cat-media {
	display: block;
	position: relative;
	width: 100%;
	aspect-ratio: 4 / 3;
	/*
	 * v1.20 — NO FRAME.
	 *
	 * This used to be a bordered, tinted box with the photograph floating
	 * inside it, so every card showed a picture of a picture: two rounded
	 * rectangles, the outer one the card and the inner one an empty tray.
	 * The card is the frame. The photograph sits directly on it.
	 */
	background: transparent;
	border: 0;
	border-radius: var(--rms-radius-sm, 6px);
	overflow: hidden;
}

.rms-cat-media__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	/* contain, not cover: these are product photographs on white. Cropping a
	   circuit breaker to fill a box is how you lose the terminal detail that
	   tells an engineer which device it is. */
	background: transparent;
	/*
	 * Manufacturer photography ships with 10-20% of empty white margin baked
	 * into the file, so `contain` inside a 4:3 field left the device looking
	 * like a stamp on an envelope. Scaling past the field trims that margin —
	 * `overflow: hidden` on the frame clips only the whitespace, never the
	 * device — and the result is the product filling the space it was given.
	 * 1.16 is the largest factor that is still safe for the tightest-cropped
	 * supplier images in the catalogue.
	 */
	transform: scale(1.16);
	transition: transform var(--rms-dur, .3s) cubic-bezier(.2, .7, .3, 1);
}

/* A card that is being pointed at gives its picture a little more room. */
.rms-cat-card:hover .rms-cat-media__img,
.rms-cats__sec:hover .rms-cat-media__img,
a:hover > .rms-cat-media .rms-cat-media__img {
	transform: scale(1.22);
}

@media (prefers-reduced-motion: reduce) {
	.rms-cat-media__img,
	.rms-cat-card:hover .rms-cat-media__img,
	.rms-cats__sec:hover .rms-cat-media__img,
	a:hover > .rms-cat-media .rms-cat-media__img {
		transform: scale(1.16);
		transition: none;
	}
}

/*
 * FAILSAFE: a term whose thumbnail row survives but whose file does not.
 * The image element then paints the browser's broken-image glyph, which is
 * the one thing worse than no picture. rms-categories.js marks it and the
 * monogram tile behind it shows through instead.
 */
.rms-cat-media__img[data-rms-broken] {
	display: none;
}

/*
 * The monogram tile.
 *
 * It was reading as a broken image: two underlined capitals on a grey
 * rectangle is exactly what a browser paints when a file is missing, and the
 * underline came from the anchor it sits inside. It is a deliberate tile now
 * — a soft two-stop wash, generous initials, no underline — so a category
 * with no photograph looks considered rather than broken.
 */
.rms-cat-media--mono {
	display: flex;
	align-items: center;
	justify-content: center;
	background:
		radial-gradient(120% 100% at 30% 0%, hsl(var(--rms-mono-h, 210) 30% 97%) 0%, hsl(var(--rms-mono-h, 210) 26% 91%) 100%);
	border: 0;
	text-decoration: none;
}

.rms-cat-media--mono::after {
	content: '';
	position: absolute;
	inset: auto 0 0 0;
	height: var(--rms-rule-h, 3px);
	background: hsl(var(--rms-mono-h, 210) 34% 70%);
	border-radius: var(--rms-rule-cap, 0) var(--rms-rule-cap, 0) 0 0;
	opacity: .7;
}

.rms-cat-media__mono {
	font-size: clamp(22px, 4vw, 34px);
	font-weight: 700;
	letter-spacing: 0.04em;
	line-height: 1;
	color: hsl(var(--rms-mono-h, 210) 34% 34%);
	text-decoration: none !important;
}

.rms-cats__secmedia .rms-cat-media {
	aspect-ratio: 1 / 1;
}

/* ---------------------------------------------------------------------------
 * SUB-CATEGORY GRID
 * ------------------------------------------------------------------------- */

.rms-cats__grid {
	display: grid;
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.rms-cats__grid[data-cols='2'] {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.rms-cats__grid[data-cols='4'] {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 1080px) {
	.rms-cats__grid,
	.rms-cats__grid[data-cols='4'] {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 640px) {
	.rms-cats__grid,
	.rms-cats__grid[data-cols='2'],
	.rms-cats__grid[data-cols='4'] {
		grid-template-columns: 1fr;
	}
}

.rms-cat-card {
	display: flex;
	flex-direction: column;
	padding: 16px;
	background: var(--rms-surface, #fff);
	border: 1px solid var(--rms-border, #dfe6ec);
	border-radius: 12px;
	transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.rms-cat-card:hover {
	border-color: var(--rms-primary, #0098db);
	box-shadow: 0 10px 26px rgba(2, 6, 23, 0.07);
	transform: translateY(-2px);
}

/* Head row: 52px thumbnail beside the name and count — the EM card. */
.rms-cat-card__headrow {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 10px;
}

.rms-cat-card__media {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 52px;
	width: 52px;
	height: 52px;
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: var(--rms-radius-sm, 6px);
	overflow: hidden;
}

.rms-cat-card__media img,
.rms-cat-card__media .rms-cat-media {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

.rms-cat-card__id {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.rms-cat-card__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
}

.rms-cat-card__title {
	margin: 0;
	font-size: var(--rms-t-dense);
	line-height: 1.3;
	font-weight: 650;
	letter-spacing: -0.005em;
}

.rms-cat-card__link {
	color: var(--rms-text, #12181d);
	text-decoration: none;
}

.rms-cat-card__link:hover,
.rms-cat-card__link:focus {
	color: var(--rms-primary-d, #0078ad);
}

.rms-cat-card__meta {
	margin: 0;
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--rms-text-mut, #5b6b78);
}

.rms-cat-card__desc {
	margin: 0 0 12px;
	font-size: 13px;
	line-height: 1.6;
	color: var(--rms-text-mut, #5b6b78);
}

/* Product types are pushed to the bottom of the card so that cards of
   different description lengths still line their pill rows up. */
.rms-cat-card__types {
	margin-top: auto;
	padding-top: 4px;
}

.rms-cat-card__typelabel {
	display: block;
	margin: 0 0 6px;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--rms-text-mut, #5b6b78);
}

.rms-cat-card__go {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-top: auto;
	padding-top: 12px;
	border-top: 1px solid var(--rms-border, #dfe6ec);
	font-size: 13px;
	font-weight: 650;
	text-decoration: none;
	color: var(--rms-primary-d, #0078ad);
}

.rms-cat-card__arrow {
	transition: transform 0.15s ease;
}

.rms-cat-card:hover .rms-cat-card__arrow {
	transform: translateX(3px);
}

/* ---------------------------------------------------------------------------
 * LIST LAYOUT
 *
 * The second of the two views the toggle switches between. Same markup, same
 * data, denser: one row per sub-category, image and description dropped. On a
 * catalogue with ninety sub-categories this is the view that lets somebody
 * scan the whole thing.
 * ------------------------------------------------------------------------- */

/*
 * v1.12 — the single-quote list block that used to live here has been
 * removed, not overridden.
 *
 * It set flex-direction: row on the card and then gave the title
 * `flex: 1 1 220px`. The title's own parent is a COLUMN, so that basis was
 * read as a height and every row's heading became a 220px-tall box with one
 * line of text at the top of it. Two competing list implementations in one
 * stylesheet is also how the fault survived a search: this block used
 * 'list' in single quotes and the replacement uses double, so neither
 * showed up when looking for the other.
 *
 * The working list layout is defined once, near the end of this file, under
 * "THE LIST VIEW ACTUALLY HAS A LAYOUT".
 */

/* ---------------------------------------------------------------------------
 * FILTER STATE
 * ------------------------------------------------------------------------- */

.rms-cats__none {
	margin: 32px 0;
	padding: 20px;
	background: var(--rms-muted, #f6f8fa);
	border: 1px solid var(--rms-border, #dfe6ec);
	border-radius: var(--rms-radius, 10px);
	font-size: 14px;
	color: var(--rms-text-mut, #5b6b78);
	text-align: center;
}

/* ---------------------------------------------------------------------------
 * COMPACT NAV  [rms_category_nav]
 * ------------------------------------------------------------------------- */

.rms-catnav__title {
	margin: 0 0 10px;
	font-size: var(--rms-t-micro);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--rms-text-mut, #5b6b78);
}

.rms-catnav__list {
	display: grid;
	gap: 2px 24px;
	margin: 0;
	padding: 0;
	list-style: none;
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.rms-catnav__list[data-cols='1'] {
	grid-template-columns: 1fr;
}

.rms-catnav__list[data-cols='2'] {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.rms-catnav__list[data-cols='4'] {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 780px) {
	.rms-catnav__list,
	.rms-catnav__list[data-cols='3'],
	.rms-catnav__list[data-cols='4'] {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 480px) {
	.rms-catnav__list,
	.rms-catnav__list[data-cols='2'],
	.rms-catnav__list[data-cols='3'],
	.rms-catnav__list[data-cols='4'] {
		grid-template-columns: 1fr;
	}
}

.rms-catnav__link {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	padding: 6px 0;
	font-size: 14px;
	line-height: 1.4;
	text-decoration: none;
	color: var(--rms-text-mut, #5b6b78);
}

.rms-catnav__link:hover,
.rms-catnav__link:focus {
	color: var(--rms-primary-d, #0078ad);
}

.rms-catnav__link:focus-visible {
	outline: 3px solid var(--rms-text, #12181d);
	outline-offset: 2px;
}

.rms-catnav__count {
	font-size: 12px;
	font-weight: 700;
	color: var(--rms-border, #dfe6ec);
}

/* ---------------------------------------------------------------------------
 * CATEGORY ARCHIVE HERO
 * ------------------------------------------------------------------------- */

.rms-cathero {
	max-width: var(--rms-maxw, 1280px);
	margin: 0 auto 28px;
	padding: 20px var(--rms-gutter, 16px) 24px;
	border-bottom: 1px solid var(--rms-border, #dfe6ec);
}

/* When this hero owns the archive, the theme's own category header band and
   any leftover default title/description stand down — some themes print them
   without consulting woocommerce_show_page_title, which is exactly how the
   category name ended up on the page twice. */
body.rms-has-cathero .woocommerce-products-header {
	display: none;
}

body.rms-has-cathero .page-header .archive-description {
	display: none;
}

.rms-cathero__crumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px;
	margin: 0 0 14px;
	padding: 0;
	list-style: none;
	font-size: 12.5px;
	color: var(--rms-text-mut, #5b6b78);
}

.rms-cathero__crumb + .rms-cathero__crumb::before {
	content: '/';
	margin: 0 8px 0 4px;
	color: var(--rms-border, #dfe6ec);
}

.rms-cathero__crumb a {
	color: var(--rms-text-mut, #5b6b78);
	text-decoration: none;
}

.rms-cathero__crumb a:hover,
.rms-cathero__crumb a:focus {
	color: var(--rms-primary-d, #0078ad);
	text-decoration: underline;
}

.rms-cathero__crumb--current {
	font-weight: 600;
	color: var(--rms-text, #12181d);
}

.rms-cathero__main {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 220px;
	align-items: start;
	gap: 28px;
}

@media (max-width: 780px) {
	.rms-cathero__main {
		grid-template-columns: 1fr;
	}

	.rms-cathero__media {
		display: none;
	}
}

.rms-cathero__title {
	margin: 0 0 6px;
	font-size: var(--rms-t-band);
	line-height: 1.12;
	font-weight: 700;
	letter-spacing: -0.02em;
}

/*
 * THE ARCHIVE KICKER (v1.21).
 *
 * A category archive names itself twice already — once in the trail, once in
 * the title — so it gets no kicker. The shop page, a tag archive and a pa_*
 * attribute archive have no trail above the title, and without a kicker the
 * band opens on a bare heading with nothing to place it. Same rung as the
 * count line below the title, so the two read as a pair around it.
 */
.rms-cathero__kicker {
	margin: 0 0 8px;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--rms-primary-d, #12181d);
}

/*
 * THE PROVIDER MOUNT (v1.21).
 *
 * Searchanise renders its grid into these three containers, and it does so
 * AFTER first paint — the markup arrives empty. Without a reserved height
 * the footer sits directly under the band for a beat and then gets thrown
 * down the page when the grid lands, which is a large layout shift on the
 * single most-visited page type on the site. The min-height reserves roughly
 * one screen of grid so the shift is small and the CLS score survives.
 *
 * The margin/padding resets exist because the provider's own stylesheet
 * opens each container with its own top spacing, which stacks on the band's
 * bottom padding and leaves a visible gutter between the two.
 */
.rms-archive-mount {
	width: 100%;
	margin: 0;
	padding: 0;
}

.rms-archive-mount > div {
	width: 100%;
}

.rms-archive-mount #snize_results,
.rms-archive-mount #searchanise_results,
.rms-archive-mount #snize_results_container {
	min-height: 420px;
}

.rms-archive-mount .snize,
.rms-archive-mount .snize-results-block,
.rms-archive-mount .searchanise-results,
.rms-archive-mount .snize-results-container {
	margin-top: 0;
	padding-top: 0;
}

/*
 * When the provider is driving the listing, WooCommerce's own furniture is
 * unhooked in PHP — but a THEME can print its own sidebar and result count
 * from its template rather than from the Woo hooks, and no remove_action
 * reaches those. The body class is only present when a provider was actually
 * detected, so this never fires on a site rendering its own grid.
 */
body.rms-archive-taken-over .woocommerce-result-count,
body.rms-archive-taken-over .woocommerce-ordering,
body.rms-archive-taken-over nav.woocommerce-pagination,
body.rms-archive-taken-over ul.products {
	display: none;
}

body.rms-archive-taken-over #secondary,
body.rms-archive-taken-over .widget-area,
body.rms-archive-taken-over .shop-sidebar {
	display: none;
}

/*
 * ...and the content column has to reclaim the width the sidebar was using,
 * or the grid renders into a two-thirds column with a void beside it. This
 * is the "huge blank gap" from the snippet's own header, and it is a width
 * problem rather than a height one.
 */
body.rms-archive-taken-over #primary,
body.rms-archive-taken-over .content-area,
body.rms-archive-taken-over .site-main {
	width: 100%;
	max-width: 100%;
	float: none;
}

.rms-cathero__count {
	margin: 0 0 12px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: var(--rms-text-mut, #5b6b78);
}

.rms-cathero__desc {
	max-width: 72ch;
	font-size: 14.5px;
	line-height: 1.65;
	color: var(--rms-text-mut, #5b6b78);
}

.rms-cathero__desc p {
	margin: 0 0 10px;
}

.rms-cathero__desc p:last-child {
	margin-bottom: 0;
}

.rms-cathero__subs {
	margin-top: 20px;
}

.rms-cathero__subtitle {
	margin: 0 0 8px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--rms-text-mut, #5b6b78);
}

.rms-cathero__chips .rms-pill {
	padding: 7px 12px;
	font-size: 13px;
}

/* v1.1 — live-site feedback: "the category section takes up a bit of space
   with the text for each". Descriptions clamp; the full text still lives on
   the category page itself, one click away. */
.rms-cat-card__desc {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.rms-cats__secdesc {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* ===========================================================================
 * v1.8 — CATEGORY HERO: full width, styled copy
 *
 * The banner was legible but cramped: the description sat in a 72ch column
 * against a 220px image rail, so on a wide screen two thirds of the band was
 * empty. The text now uses the full width of the panel, with the image
 * becoming a wider inset on large screens, and the copy gets real typographic
 * treatment rather than muted body text.
 * ======================================================================== */

/* v1.10 — THE MOBILE REGRESSION. These two-column widths were written
   WITHOUT a media query, and they sit later in this file than the
   `@media (max-width: 780px) { grid-template-columns: 1fr }` rule above.
   Same specificity, later in source order — so on a phone the later rule won
   and the hero kept a fixed 300px image rail beside the copy. On a 390px
   viewport that leaves the text column about 50px wide, which is the
   one-word-per-line column the live site showed. Both widths are now
   explicitly scoped above the breakpoint, and the phone layout is restated
   after them so source order can never decide this again. */
@media (min-width: 781px) {
	.rms-cathero__main {
		grid-template-columns: minmax(0, 1fr) 300px;
		gap: 36px;
	}
}

@media (min-width: 1200px) {
	.rms-cathero__main {
		grid-template-columns: minmax(0, 1fr) 360px;
	}
}

@media (max-width: 780px) {
	.rms-cathero {
		padding: 14px var(--rms-gutter, 16px) 16px;
		margin-bottom: 18px;
	}

	.rms-cathero__main {
		display: block;
	}

	.rms-cathero__media {
		display: none;
	}

	.rms-cathero__title {
		font-size: clamp(22px, 6.4vw, 28px);
		margin-bottom: 8px;
	}

	.rms-cathero__crumbs {
		margin-bottom: 10px;
		font-size: 12px;
		flex-wrap: nowrap;
		overflow-x: auto;
		white-space: nowrap;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

	.rms-cathero__crumbs::-webkit-scrollbar {
		display: none;
	}

	/* The intro is worth reading, not worth half a phone screen: two lines
	   by default with a real control to open the rest. The checkbox is the
	   whole mechanism, so it works with no JavaScript at all. */
	.rms-cathero__desc {
		position: relative;
		font-size: 15px;
		line-height: 1.6;
		max-height: 4.8em;
		overflow: hidden;
	}

	.rms-cathero__desc::after {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		height: 2.2em;
		background: linear-gradient(180deg, rgba(255, 255, 255, 0), var(--rms-surface, #fff) 88%);
		pointer-events: none;
	}

	.rms-cathero__more:checked ~ .rms-cathero__desc {
		max-height: none;
	}

	.rms-cathero__more:checked ~ .rms-cathero__desc::after {
		display: none;
	}

	.rms-cathero__morelbl {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		margin-top: 8px;
		padding: 6px 12px;
		border: 1px solid var(--rms-border, #dfe6ec);
		border-radius: 999px;
		background: var(--rms-surface, #fff);
		font-size: 13px;
		font-weight: 700;
		color: var(--rms-primary-d, #085a83);
		cursor: pointer;
	}

	.rms-cathero__morelbl::after {
		content: "";
		width: 7px;
		height: 7px;
		margin-top: -3px;
		border-right: 2px solid currentColor;
		border-bottom: 2px solid currentColor;
		transform: rotate(45deg);
		transition: transform .2s ease;
	}

	.rms-cathero__more:checked ~ .rms-cathero__morelbl::after {
		transform: rotate(-135deg);
		margin-top: 2px;
	}

	.rms-cathero__more:checked ~ .rms-cathero__morelbl .rms-cathero__moretxt--less {
		display: inline;
	}

	.rms-cathero__more:checked ~ .rms-cathero__morelbl .rms-cathero__moretxt--more {
		display: none;
	}
}

/* The toggle is a phone affordance only: above the breakpoint the copy is
   never clamped, so the control has nothing to do. */
.rms-cathero__text {
	position: relative;
}

.rms-cathero__more {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	opacity: 0;
	pointer-events: none;
}

.rms-cathero__moretxt--less {
	display: none;
}

@media (min-width: 781px) {
	.rms-cathero__morelbl {
		display: none;
	}
}

.rms-cathero__title {
	font-size: var(--rms-t-band);
	letter-spacing: -0.025em;
}

.rms-cathero__count {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 3px 12px;
	margin-bottom: 14px;
	border-radius: 999px;
	/* v1.21 — a WHITE pill, not a tinted one.
	 *
	 * This sat on 10% of the brand colour, over a band field that is itself
	 * tinted, so the brand ink on top measured 4.23:1 on EM — the brand
	 * whose primary-d has the least headroom (4.90:1 on white against ABB's
	 * 6.26). Any tint under it spends headroom there is none of. On the
	 * band's own surface the ink gets its full ratio back on all three, and
	 * the pill reads more clearly against the field for it. */
	background: var(--rms-surface, #fff);
	border: 1px solid var(--rms-border, #dfe6ec);
	color: var(--rms-primary-d, #085a83);
	font-size: 12px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

@supports not (background: color-mix(in srgb, red 10%, transparent)) {
	.rms-cathero__count {
		background: var(--rms-muted, #f6f8fa);
	}
}

/* The description reads as an intro paragraph, not fine print: larger, in
   ink rather than grey, with the first line given emphasis. Width is capped
   for readability but far wider than the old 72ch at large sizes. */
.rms-cathero__desc {
	max-width: 92ch;
	font-size: 15.5px;
	line-height: 1.7;
	color: var(--rms-text, #12181d);
}

.rms-cathero__desc p:first-child {
	font-size: 16.5px;
	line-height: 1.65;
	color: var(--rms-text, #12181d);
}

.rms-cathero__desc p + p {
	color: var(--rms-text-mut, #5b6b78);
}

/* Media rail: bigger, framed, and it keeps its aspect instead of floating. */
.rms-cathero__media {
	padding: 14px;
	background: var(--rms-surface, #fff);
	border: 1px solid var(--rms-border, #dfe6ec);
	border-radius: var(--rms-radius, 10px);
}

.rms-cathero__media img {
	width: 100%;
	height: auto;
	display: block;
}

/* =========================================================================
 * v1.10.6 — THE CATEGORY BANNER IS THE SAME BANNER
 *
 * It was a contained grey card while the brand banner was a full-bleed
 * gradient band, so the two pages did not look like the same site. Same
 * band now: full-bleed field behind, content on the page measure, one type
 * scale. The bleed uses --rms-vw (the real viewport width, published by
 * rms-chrome.js) rather than 100vw, so it never adds a scrollbar.
 * ====================================================================== */

.rms-cathero {
	position: relative;
	z-index: 0;
	border-bottom: 0;
	padding-top: var(--rms-band-pad-y, 34px);
	padding-bottom: var(--rms-band-pad-y, 34px);
	min-height: var(--rms-band-min-h, 168px);
	margin-bottom: var(--rms-s6, 32px);
}

.rms-cathero::before {
	content: "";
	position: absolute;
	z-index: -1;
	top: 0;
	bottom: 0;
	left: calc(50% - (var(--rms-vw, 100%) / 2));
	width: var(--rms-vw, 100%);
	background:
		radial-gradient(760px 320px at 88% -20%, color-mix(in srgb, var(--rms-primary, #0a6ea0) 16%, transparent), transparent 66%),
		linear-gradient(180deg, var(--rms-muted, #f6f8fa) 0%, #fff 92%);
	border-bottom: 1px solid var(--rms-line, #e3e7ee);
}

@supports not (background: color-mix(in srgb, red 10%, transparent)) {
	.rms-cathero::before {
		background: linear-gradient(180deg, var(--rms-muted, #f6f8fa) 0%, #fff 92%);
	}
}

.rms-cathero__title {
	font-size: var(--rms-band-title, clamp(24px, 3.2vw, 38px));
	line-height: 1.12;
	letter-spacing: -0.022em;
}

.rms-cathero__desc,
.rms-cathero__desc p:first-child {
	font-size: var(--rms-band-lede, 16px);
	line-height: 1.6;
}

/* =========================================================================
 * v1.11.0 — THE OVERVIEW BAR STOPS CRUSHING ITS OWN CONTROLS
 *
 * The bar is a flex row of three things: a filter box, a jump nav that
 * grows with the number of categories, and a two-button layout switch.
 * Nothing said which of them was allowed to give way, so on a catalogue
 * with seven top-level categories the jump nav took the row and the switch
 * was compressed until "Grid" and "List" wrapped mid-word.
 *
 * The jump nav is the elastic one — it already scrolls — and the two
 * fixed-size controls hold their width.
 * ====================================================================== */

.rms-cats__bar > .rms-cats__filterwrap {
	flex: 0 0 auto;
}

.rms-cats__bar > .rms-cats__jump {
	flex: 1 1 auto;
	min-width: 0;
	overflow-x: auto;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.rms-cats__bar > .rms-cats__jump::-webkit-scrollbar {
	display: none;
}

.rms-cats__jumplist {
	flex-wrap: nowrap;
}

.rms-cats__jumplink {
	white-space: nowrap;
}

.rms-cats__bar > .rms-cats__views {
	flex: 0 0 auto;
}

.rms-cats__view {
	white-space: nowrap;
	transition: background var(--rms-dur, .3s) ease, color var(--rms-dur, .3s) ease;
}

/* The overview head is a band now, so the section rows below it start on the
   page measure rather than tucked under a card edge. */
.rms-cats__head + .rms-cats__bar {
	margin-top: 0;
}

/* =========================================================================
 * v1.11.0 — THE CATALOGUE GRID
 *
 * "the shop page is trash, please relook at origional setup"
 *
 * It is: the product listing on every category archive is rendered by
 * Searchanise, not by this plugin, and Searchanise ships a float layout at
 * document width with no card, no measure and no hover state. The result
 * was a facet list flush against the left edge of the browser, a five-up
 * grid of borderless tiles running off the right edge, titles clipped
 * mid-word, and an Add-to-cart button inside a zero-height container —
 * present in the DOM, invisible on the page, which is a dead control.
 *
 * This block does not replace the Searchanise markup. It re-homes it:
 * the whole results region moves onto the page measure, the float pair
 * becomes a grid, and the tiles get the same card, the same radius, the
 * same lift and the same contained image as every other product card on
 * the site. Nothing here depends on Searchanise's own stylesheet, which is
 * served cross-origin and cannot be read or relied on.
 * ====================================================================== */

/* ---- 0. SEARCH-RESULTS MODE (v1.20) ----------------------------------
 *
 * Everything below this block was scoped to `.snize-collection-mode` — the
 * shape Searchanise renders when it takes over a CATEGORY archive. The
 * /search-results/ page is a different mode with a different root
 * (`div#snize_results.snize.snize-search-results`) and a different child
 * order, so not one of those layout rules ever applied there. Read from the
 * live page, the result was:
 *
 *     band       left 309, width 1280   (the page measure)
 *     results    left   0, width 1897   (the whole viewport)
 *     the grid   width 1935 inside a 1897 parent — 38px of overflow, which
 *                is the column of cards running off the right-hand edge
 *     sidebar    float:left, hard against the viewport edge
 *
 * The card styling was fine, because those selectors are mode-independent.
 * It was only ever the layout. This block gives the search page the same
 * measure, the same gutter and the same two-column shape as everything else,
 * and replaces Searchanise's fixed-pixel track list with a fluid one that
 * cannot overflow its parent.
 *
 * DOM order is controls, header, sidebar, content, pagination — which is not
 * the reading order — so the areas are named rather than relying on source
 * order.
 * ------------------------------------------------------------------- */

#snize_results.snize-search-results {
	box-sizing: border-box;
	width: 100%;
	max-width: var(--rms-maxw, 1280px);
	margin-inline: auto;
	padding-inline: var(--rms-gutter, 16px);
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	grid-template-areas:
		"controls"
		"header"
		"sidebar"
		"content"
		"pager";
	align-items: start;
	column-gap: 28px;
	row-gap: 0;
}

@media (min-width: 900px) {
	#snize_results.snize-search-results {
		grid-template-columns: minmax(210px, 250px) minmax(0, 1fr);
		grid-template-areas:
			"controls controls"
			"header   header"
			"sidebar  content"
			"sidebar  pager";
	}
}

#snize_results.snize-search-results > .snize-main-panel {
	grid-area: controls;
	display: block !important;
	width: auto !important;
	min-width: 0;
	float: none !important;
}

#snize_results.snize-search-results > .snize-header {
	grid-area: header;
	width: auto !important;
	min-width: 0;
}

#snize_results.snize-search-results > .snize-filters-sidebar {
	grid-area: sidebar;
	float: none !important;
	width: auto !important;
	margin: 0 !important;
	min-width: 0;
}

#snize_results.snize-search-results > .snize-search-results-main-content {
	grid-area: content;
	width: auto !important;
	min-width: 0;
	float: none !important;
}

#snize_results.snize-search-results > .snize-pagination {
	grid-area: pager;
	float: none !important;
	width: auto !important;
	min-width: 0;
	margin-top: var(--rms-s5, 24px);
}

/*
 * Searchanise sizes its track list in fixed pixels from a column count it
 * chose against the viewport, and sets box-sizing: content-box, so the list
 * is reliably wider than whatever contains it. A fluid track list sized in
 * fractions cannot be.
 */
#snize_results .snize-five-columns,
#snize_results .snize-four-columns,
#snize_results .snize-three-columns,
#snize_results #snize-search-results-grid-mode,
#snize_results #snize-search-results-list-mode {
	width: auto !important;
	max-width: 100% !important;
	min-width: 0;
	float: none !important;
	box-sizing: border-box;
}

#snize_results ul.snize-search-results-content {
	box-sizing: border-box !important;
	width: auto !important;
	max-width: 100% !important;
	display: grid !important;
	grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)) !important;
	gap: 18px !important;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none;
}

#snize_results ul.snize-search-results-content > li {
	width: auto !important;
	max-width: none !important;
	margin: 0 !important;
	float: none !important;
	min-width: 0;
	box-sizing: border-box;
}

/* ---- 1. The region joins the page ------------------------------------ */

.snize-collection-mode,
.snize.snize-collection-mode {
	box-sizing: border-box;
	width: 100%;
	max-width: var(--rms-maxw, 1280px);
	margin-inline: auto;
	padding-inline: var(--rms-gutter, 16px);
}

@media (min-width: 900px) {
	.snize-collection-mode {
		display: grid;
		grid-template-columns: minmax(220px, 260px) minmax(0, 1fr);
		align-items: start;
		gap: 28px;
	}

	.snize-collection-mode > .snize-filters-sidebar {
		grid-column: 1;
		float: none !important;
		width: auto !important;
		margin: 0 !important;
		position: sticky;
		top: var(--rms-sticky-top, 12px);
		max-height: calc(100vh - 32px);
		overflow-y: auto;
		scrollbar-width: thin;
	}

	.snize-collection-mode > .snize-main-panel {
		grid-column: 2;
		display: block !important;
		width: auto !important;
		min-width: 0;
	}
}

.snize-main-panel,
#snize-search-results-grid-mode,
#snize-search-results-list-mode {
	float: none !important;
	width: auto !important;
	max-width: none !important;
}

/* ---- 2. The facet rail is a card, not a bare list --------------------- */

.snize-filters-sidebar {
	box-sizing: border-box;
	padding: 6px 16px 16px;
	background: var(--rms-surface, #fff);
	border: 1px solid var(--rms-line, #e3e7ee);
	border-radius: var(--rms-radius, 10px);
}

.snize-product-filters-block {
	padding: 14px 0;
	border-bottom: 1px solid var(--rms-line, #e3e7ee);
}

.snize-product-filters-block:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

.snize-filters-sidebar .snize-filter-title,
.snize-product-filters-block > .snize-filters-title,
.snize-product-filters-block > h3,
.snize-product-filters-block > div:first-child {
	font-family: inherit;
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--rms-text, #12181d);
}

.snize-filters-sidebar label,
.snize-filter-checkbox {
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--rms-text-mut, #5b6b78);
	cursor: pointer;
}

.snize-filters-sidebar label:hover {
	color: var(--rms-text, #12181d);
}

.snize-filter-variant-count {
	color: var(--rms-text-mut, #5b6b78);
	font-size: 12px;
}

.snize-filters-show-more {
	display: inline-block;
	margin-top: 6px;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--rms-primary-d, #0078ad);
	cursor: pointer;
}

/* ---- 3. The results grid ---------------------------------------------
 * The tiles do not live in #snize-search-results-grid-mode directly: that
 * element wraps ul.snize-search-results-content, and the ul is the list.
 * Putting the grid on the wrapper collapses the ul into a single column,
 * so the grid goes on the list itself. */

#snize-search-results-grid-mode,
#snize-search-results-list-mode {
	display: block !important;
}

ul.snize-search-results-content {
	display: grid !important;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 18px;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none;
}

/* Searchanise sizes its columns with a class on the list rather than with
   the grid. With a real grid in charge those widths would fight it. */
ul.snize-search-results-content > li,
.snize-five-columns > li,
.snize-four-columns > li,
.snize-three-columns > li {
	display: block !important;
	width: auto !important;
	max-width: none !important;
	min-height: 0 !important;
	height: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	float: none !important;
	list-style: none;
}

/* The tile is wrapped in the link, so the link has to carry the height for
   a row of unequal cards to line up at the bottom. */
ul.snize-search-results-content > li > a.snize-view-link {
	display: flex !important;
	flex-direction: column;
	height: 100%;
	text-decoration: none;
}

/* Every child of the results region shares the content column; only the
   facet rail sits in the first one. */
@media (min-width: 900px) {
	.snize-collection-mode > *:not(.snize-filters-sidebar) {
		grid-column: 2;
		min-width: 0;
	}
}

.snize-item {
	box-sizing: border-box;
	display: flex !important;
	flex-direction: column;
	flex: 1 1 auto;
	height: 100%;
	padding: 16px;
	background: var(--rms-surface, #fff);
	border: 1px solid var(--rms-line, #e3e7ee);
	border-radius: var(--rms-radius, 10px);
	transition:
		transform var(--rms-dur, .3s) ease,
		box-shadow var(--rms-dur, .3s) ease,
		border-color var(--rms-dur, .3s) ease;
}

.snize-item:hover {
	transform: translateY(var(--rms-lift, -2px));
	border-color: color-mix(in srgb, var(--rms-primary, #0098db) 45%, var(--rms-line, #e3e7ee));
	box-shadow: 0 12px 28px rgba(11, 18, 32, .10);
}

@supports not (border-color: color-mix(in srgb, red 10%, blue)) {
	.snize-item:hover { border-color: var(--rms-primary, #0098db); }
}

/* The tile decides the picture's box, so a tall part and a wide busbar sit
   on the same baseline down the row. */
.snize-thumbnail-wrapper {
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 100% !important;
	height: 150px !important;
	margin-bottom: 12px;
	background: #fff;
	border-radius: var(--rms-radius-sm, 6px);
	overflow: hidden;
}

.snize-thumbnail {
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 100% !important;
	height: 100% !important;
}

.snize-item-image {
	width: 100% !important;
	height: 100% !important;
	max-width: 100% !important;
	max-height: 100% !important;
	object-fit: contain !important;
	transition: transform var(--rms-dur, .3s) ease;
}

.snize-item:hover .snize-item-image {
	transform: scale(1.04);
}

.snize-title {
	display: -webkit-box !important;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
	margin: 0 0 6px !important;
	font-family: inherit !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	line-height: 1.35 !important;
	color: var(--rms-text, #12181d) !important;
}

.snize-sku {
	display: block !important;
	margin-bottom: 8px !important;
	font-family: var(--rms-mono, ui-monospace, SFMono-Regular, Menlo, monospace) !important;
	font-size: 11px !important;
	letter-spacing: .02em;
	color: var(--rms-text-mut, #5b6b78) !important;
}

/*
 * Both copy lines stay. v1.11 hid the description and kept only the spec
 * attribute; that was a judgement this plugin had no business making — the
 * Searchanise field set is configured in Searchanise, and if a field is
 * switched on there it belongs on the tile. Both are set legibly and each
 * is clamped so a long one cannot push the price out of line with the rest
 * of the row. Nothing is suppressed.
 */
.snize-item .snize-attribute,
.snize-item .snize-description {
	display: -webkit-box !important;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
	font-size: 12.5px !important;
	line-height: 1.5 !important;
	color: var(--rms-text-mut, #5b6b78) !important;
}

.snize-item .snize-attribute {
	margin: 0 0 4px !important;
	color: var(--rms-text, #12181d) !important;
}

.snize-item .snize-description {
	margin: 0 0 10px !important;
}

.snize-price-list {
	margin-top: auto;
	padding-top: 4px;
}

.snize-price {
	font-family: inherit !important;
	font-size: 17px !important;
	font-weight: 800 !important;
	color: var(--rms-text, #12181d) !important;
}

.snize-discounted-price,
.snize-compare-price {
	font-size: 13px !important;
	color: var(--rms-text-mut, #5b6b78) !important;
	text-decoration: line-through;
}

/* ---- 4. The View product control ------------------------------------
 * Searchanise ships this absolutely positioned at opacity 0 inside a
 * zero-height wrapper, with nothing that ever raises it — so it was a
 * control present in the DOM and invisible on the page. The whole tile is
 * already a link to the product, so it is not promoted into the flow as a
 * second competing CTA; it becomes the hover and keyboard-focus state of
 * the image, which is what it was designed to be. Focus-within is included
 * so it appears for a keyboard user too, not only under a mouse. */

.snize-buttons,
.snize-buttons-bottom {
	position: static !important;
	height: 0 !important;
	overflow: visible !important;
	margin: 0 !important;
}

.snize-button,
.snize-action-button {
	position: absolute !important;
	left: 50% !important;
	top: 88px !important;
	transform: translate(-50%, 6px);
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: auto !important;
	min-width: 132px;
	min-height: 36px;
	padding: 8px 18px !important;
	background: var(--rms-primary-d, #0098db) !important;
	border: 0 !important;
	border-radius: var(--rms-radius-sm, 6px) !important;
	font-family: inherit !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	color: #fff !important;
	white-space: nowrap;
	cursor: pointer;
	opacity: 0;
	pointer-events: none;
	transition:
		opacity var(--rms-dur, .3s) ease,
		transform var(--rms-dur, .3s) ease,
		background var(--rms-dur, .3s) ease;
}

.snize-item:hover .snize-action-button,
.snize-item:focus-within .snize-action-button,
.snize-view-link:hover .snize-action-button,
.snize-view-link:focus-visible .snize-action-button {
	opacity: 1 !important;
	transform: translate(-50%, 0);
	pointer-events: auto;
}

.snize-action-button:hover {
	background: var(--rms-primary-d, #0078ad) !important;
}

/* The button is positioned against the tile, so the tile has to be the
   containing block. */
.snize-item {
	position: relative;
}

/* ---- 5. The controls row --------------------------------------------- */

.snize-main-panel-controls {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin: 0 0 18px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--rms-line, #e3e7ee);
	font-size: 13.5px;
	color: var(--rms-text-mut, #5b6b78);
}

.snize-main-panel-dropdown-button {
	padding: 8px 12px;
	background: var(--rms-surface, #fff);
	border: 1px solid var(--rms-line, #e3e7ee);
	border-radius: var(--rms-radius-sm, 6px);
	font-size: 13px;
	cursor: pointer;
}

/* ---- 6. Phones ------------------------------------------------------- */

@media (max-width: 899px) {
	.snize-filters-sidebar {
		float: none !important;
		width: 100% !important;
		margin: 0 0 20px !important;
	}

	#snize-search-results-grid-mode {
		grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
		gap: 12px;
	}

	.snize-item {
		padding: 12px;
	}

	.snize-thumbnail-wrapper {
		height: 120px !important;
	}
}

/* The text stack grows, so the price and the action button sit on the same
   line across a row whatever the title length. */
.snize-item > .snize-overhidden {
	display: flex !important;
	flex-direction: column;
	flex: 1 1 auto;
	min-width: 0;
}

/* Searchanise's list carries .clearfix, whose ::before is a table cell. In a
   float layout that is invisible; in a grid it is a grid item, and it took
   the first cell of every results page — one empty tile, top left, on every
   category on the site. */
ul.snize-search-results-content::before,
ul.snize-search-results-content::after,
.snize-collection-mode::before,
.snize-collection-mode::after {
	content: none !important;
	display: none !important;
}

/* =========================================================================
 * v1.12.0 — THE LIST VIEW ACTUALLY HAS A LAYOUT
 *
 * "categories breakdown page lit display is broken."
 *
 * It was. The toggle writes data-rms-layout="list" onto the overview body
 * and there was no rule in this stylesheet that read it — not one. The
 * cards kept their grid-tile internals inside a single full-width column,
 * so the head block stayed a narrow 172px column and wrapped the category
 * title to twenty lines, the description collapsed to zero height, and the
 * count and the Browse link scattered to opposite ends of an empty band.
 *
 * A list row is a different object from a tile, so it is described here as
 * one: a fixed thumbnail, an identity block that is allowed to be wide, the
 * sub-category pills on their own line, and the action pinned right.
 * ====================================================================== */

.rms-cats__body[data-rms-layout="list"] .rms-cats__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 10px;
}

.rms-cats__body[data-rms-layout="list"] .rms-cat-card {
	display: grid;
	grid-template-columns: 64px minmax(0, 1fr) auto;
	grid-template-areas:
		"media identity action"
		"media body     body";
	align-items: start;
	column-gap: 18px;
	row-gap: 10px;
	padding: 16px 18px;
	border: 1px solid var(--rms-line, #e3e7ee);
	border-radius: var(--rms-radius, 10px);
	background: var(--rms-surface, #fff);
	transition:
		border-color var(--rms-dur, .3s) ease,
		box-shadow var(--rms-dur, .3s) ease,
		transform var(--rms-dur, .3s) ease;
}

.rms-cats__body[data-rms-layout="list"] .rms-cat-card:hover {
	transform: translateY(var(--rms-lift, -2px));
	border-color: var(--rms-primary, #0098db);
	box-shadow: 0 10px 24px rgba(11, 18, 32, .08);
}

/* The head row stops being a row and hands its two children to the grid. */
.rms-cats__body[data-rms-layout="list"] .rms-cat-card__headrow {
	display: contents;
}

.rms-cats__body[data-rms-layout="list"] .rms-cat-card__media {
	grid-area: media;
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: var(--rms-radius-sm, 6px);
	box-sizing: border-box;
	overflow: hidden;
}

.rms-cats__body[data-rms-layout="list"] .rms-cat-card__media img,
.rms-cats__body[data-rms-layout="list"] .rms-cat-media {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* The identity block gets the width it needs — this is what was missing.
   At 172px the title wrapped a word per line. */
.rms-cats__body[data-rms-layout="list"] .rms-cat-card__id {
	grid-area: identity;
	min-width: 0;
	width: auto;
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.rms-cats__body[data-rms-layout="list"] .rms-cat-card__title {
	/* flex: 0 0 auto is stated, not assumed. The removed block set a
	   220px flex-basis here, and in a column that is a height. Anything
	   else that ever tries the same is neutralised at the source. */
	flex: 0 0 auto;
	height: auto;
	min-height: 0;
	margin: 0;
	font-size: var(--rms-t-card);
	font-weight: 700;
	line-height: 1.3;
}

.rms-cats__body[data-rms-layout="list"] .rms-cat-card__meta {
	margin: 0;
	font-size: 12.5px;
	color: var(--rms-text-mut, #5b6b78);
}

.rms-cats__body[data-rms-layout="list"] .rms-cat-card__body {
	grid-area: body;
	min-width: 0;
}

.rms-cats__body[data-rms-layout="list"] .rms-cat-card__desc {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
	margin: 0 0 10px;
	max-width: 90ch;
	font-size: 13.5px;
	line-height: 1.55;
	color: var(--rms-text-mut, #5b6b78);
}

.rms-cats__body[data-rms-layout="list"] .rms-cat-card__go {
	grid-area: action;
	align-self: center;
	justify-self: end;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 14px;
	border: 1px solid var(--rms-line, #e3e7ee);
	border-radius: var(--rms-radius-sm, 6px);
	font-size: 13px;
	font-weight: 600;
	white-space: nowrap;
	color: var(--rms-text, #12181d);
	text-decoration: none;
	transition:
		background var(--rms-dur, .3s) ease,
		border-color var(--rms-dur, .3s) ease;
}

.rms-cats__body[data-rms-layout="list"] .rms-cat-card__go:hover {
	background: var(--rms-primary-d, #0098db);
	border-color: var(--rms-primary, #0098db);
	color: #fff;
}

.rms-cats__body[data-rms-layout="list"] .rms-cat-card__arrow {
	transition: transform var(--rms-dur, .3s) ease;
}

.rms-cats__body[data-rms-layout="list"] .rms-cat-card:hover .rms-cat-card__arrow {
	transform: translateX(3px);
}

@media (max-width: 700px) {
	.rms-cats__body[data-rms-layout="list"] .rms-cat-card {
		grid-template-columns: 48px minmax(0, 1fr);
		grid-template-areas:
			"media identity"
			"body  body"
			"action action";
	}

	.rms-cats__body[data-rms-layout="list"] .rms-cat-card__media {
		width: 48px;
		height: 48px;
	}

	.rms-cats__body[data-rms-layout="list"] .rms-cat-card__go {
		justify-self: start;
	}
}

/* =========================================================================
 * v1.19 — SUB-CATEGORY CHIPS, BELOW THE BAND
 *
 * They used to live inside the opening band, which is why the category
 * banner measured 421px against the brand banner's 294px on the same page:
 * identical padding, title and measure, different content inside. A page
 * opener carries the kicker, the title, the lede and at most one action.
 * Navigation sits under it.
 * ====================================================================== */

.rms-catsubs {
	box-sizing: border-box;
	width: 100%;
	max-width: var(--rms-maxw, 1280px);
	margin: 0 auto var(--rms-s6, 32px);
	padding-inline: var(--rms-gutter, 16px);
}

.rms-catsubs__title {
	margin: 0 0 12px;
	font-size: var(--rms-t-micro);
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--rms-text-mut, #5b6b78);
}

.rms-catsubs__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Keep the old class working for anything that still emits it. */
.rms-cathero__subs {
	margin-top: 18px;
}

/* ---------------------------------------------------------------------------
 * v1.20 — THE MONOGRAM UNDERLAY
 *
 * Painted beneath every category photograph so a missing file degrades to the
 * same tile a category with no picture gets, instead of the browser's
 * broken-image glyph. Invisible whenever the photograph loads, because the
 * photograph covers it.
 * ------------------------------------------------------------------------- */

.rms-cat-media__under {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background:
		radial-gradient(120% 100% at 30% 0%, hsl(var(--rms-mono-h, 210) 30% 97%) 0%, hsl(var(--rms-mono-h, 210) 26% 91%) 100%);
	text-decoration: none;
	z-index: 0;
}

.rms-cat-media--has-img .rms-cat-media__img {
	position: relative;
	z-index: 1;
}