/* Category page text (1.16.0): the introduction under the page heading and the list of product lines
   under the products, printed by VM_Category_Page into the Elementor "Categories" template. Colours and
   fonts come from the site's Elementor kit; the values after the comma are its current ones. */

.vm-category-intro {
	max-width: 52rem;
	margin: 1rem 0 2.5rem;
	color: var(--e-global-color-text, #333);
	font-size: 1.0625rem;
	line-height: 1.65;
}

.vm-category-intro p {
	margin: 0 0 1rem;
}

.vm-category-intro p:last-child {
	margin-bottom: 0;
}

.vm-category-range {
	margin: 2.5rem 0 1rem;
	color: var(--e-global-color-text, #333);
	line-height: 1.6;
}

.vm-category-range h2,
.vm-category-range-title {
	margin: 0 0 1.5rem;
}

/* 1.17.0: the parts placed on their own */
.vm-category-range-block .vm-category-range {
	margin-top: 0;
}

.vm-category-figure {
	margin: 0;
}

.vm-category-image {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 1.5rem;
	object-fit: cover;
}

.vm-category-item-text {
	display: block;
}

.vm-category-range ul {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
	gap: 1.25rem 2rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.vm-category-range li {
	margin: 0;
	padding: 1rem 0 0;
	border-top: 2px solid var(--e-global-color-cc3238e, #d8e0e5);
}

.vm-category-range li strong {
	display: block;
	margin-bottom: 0.375rem;
	color: var(--e-global-color-a9a992d, #181628);
	font-size: 1.0625rem;
}

.vm-category-range li a {
	color: inherit;
	text-decoration: none;
}

.vm-category-range li a:hover,
.vm-category-range li a:focus-visible {
	color: var(--e-global-color-accent, #ff7101);
	text-decoration: underline;
}

.vm-category-range li:has(a) {
	border-top-color: var(--e-global-color-dae2d7b, #00c9da);
}

@media (max-width: 40rem) {
	.vm-category-intro {
		font-size: 1rem;
	}

	.vm-category-range ul {
		grid-template-columns: 1fr;
	}
}

/* 1.18.0: the list as Elementor cards (templates "Category range item — category / — product"). The cards'
   own design is edited in Elementor; only the grid they sit in is set here. */
.vm-category-cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
	gap: 1.25rem 2rem;
}

.vm-category-card {
	min-width: 0;
}

@media (max-width: 40rem) {
	.vm-category-cards {
		grid-template-columns: 1fr;
	}
}