/*!
 * Verdant — product archive filters and product detail layout.
 * Loaded only on product archives, category archives, single products and the
 * Products page template.
 */

/* ==========================================================================
   Archive toolbar & filters
   ========================================================================== */

.vrd-products-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-md);
	margin-bottom: var(--space-xl);
	padding-bottom: var(--space-sm);
	border-bottom: 1px solid var(--color-rule);
}

.vrd-products-count {
	margin: 0;
	font-family: var(--font-sans);
	font-size: var(--fs-2xs);
	font-weight: 600;
	letter-spacing: var(--ls-label);
	text-transform: uppercase;
	color: var(--color-text-soft);
}

/*
 * The product grid and the filter pills live in main.css: both are also used
 * on the homepage, the 404 page and the support section, which do not load
 * this file.
 */

/* ==========================================================================
   Single product
   ========================================================================== */

.vrd-product {
	padding-block: var(--space-xl) var(--space-section);
}

.vrd-product__top {
	display: grid;
	gap: clamp(var(--space-xl), 4vw, 3.5rem);
	align-items: start;
}

@media (min-width: 900px) {
	.vrd-product__top {
		grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
	}
}

.vrd-product__summary {
	min-width: 0;
}

@media (min-width: 900px) {
	/* The buying decision stays in view while the gallery is scrolled. */
	.vrd-product__summary {
		position: sticky;
		top: calc(var(--header-h) + var(--space-lg));
	}
}

.vrd-product__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-xs);
	margin-bottom: var(--space-md);
}

.vrd-product__title {
	margin: 0 0 var(--space-md);
	font-size: var(--fs-h1);
	line-height: var(--lh-tight);
}

.vrd-product__short {
	margin: 0 0 var(--space-xl);
	max-width: 42ch;
	font-size: var(--fs-lg);
	line-height: 1.6;
	color: var(--color-text-muted);
	text-wrap: pretty;
}

/* Highlights are a ruled list, not a tinted panel. */
.vrd-product__highlights {
	display: grid;
	gap: 0;
	margin: 0 0 var(--space-xl);
	padding: 0;
	list-style: none;
	background: none;
	border: 0;
	border-top: 1px solid var(--color-rule);
	border-radius: 0;
}

.vrd-product__highlights li {
	display: flex;
	align-items: flex-start;
	gap: 0.7em;
	padding-block: var(--space-sm);
	border-bottom: 1px solid var(--color-rule);
	font-size: var(--fs-sm);
	line-height: 1.5;
}

.vrd-product__highlights svg {
	margin-top: 0.2em;
	color: var(--color-primary);
}

.vrd-product__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-sm);
	margin-bottom: var(--space-md);
}

.vrd-product__contact-note {
	margin: 0;
	font-size: var(--fs-sm);
	color: var(--color-text-muted);
}

.vrd-product__contact-note a {
	display: inline-flex;
	align-items: center;
	gap: 0.45em;
	font-weight: 600;
	text-decoration: none;
	border-bottom: 1px solid var(--color-primary-border);
	padding-bottom: 1px;
	transition: border-color var(--transition);
}

.vrd-product__contact-note a:hover {
	border-bottom-color: currentColor;
}

/* Content blocks */
.vrd-product__section {
	margin-top: clamp(var(--space-2xl), 5vw, 4rem);
	scroll-margin-top: calc(var(--header-h) + 1.5rem);
}

/*
 * Section titles are opened by a full-width rule, the way a chapter break is
 * set in print, rather than closed by a coloured underline.
 */
.vrd-product__section-title {
	margin: 0 0 var(--space-lg);
	padding-top: var(--space-md);
	padding-bottom: 0;
	font-size: var(--fs-h3);
	border-bottom: 0;
	border-top: 1px solid var(--color-text);
}

/* Specification table */
.vrd-specs {
	width: 100%;
	max-width: var(--measure-wide);
	border: 0;
	border-radius: 0;
	overflow: visible;
	font-size: var(--fs-sm);
}

.vrd-specs th,
.vrd-specs td {
	padding: 0.85rem 0;
	text-align: left;
	vertical-align: top;
	border-bottom: 1px solid var(--color-rule);
}

.vrd-specs tr:last-child th,
.vrd-specs tr:last-child td {
	border-bottom: 1px solid var(--color-rule);
}

.vrd-specs th {
	width: 42%;
	padding-right: var(--space-md);
	background: none;
	font-family: var(--font-sans);
	font-size: var(--fs-2xs);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-text-soft);
	vertical-align: middle;
}

.vrd-specs tr:nth-child(even) td {
	background: none;
}

/* Features list */
.vrd-features {
	display: grid;
	gap: var(--space-lg) clamp(var(--space-lg), 3vw, 2.5rem);
	margin: 0;
	padding: 0;
	list-style: none;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}

.vrd-features__item {
	display: flex;
	gap: var(--space-sm);
	padding: var(--space-md) 0 0;
	border: 0;
	border-top: 1px solid var(--color-rule);
	border-radius: 0;
	background: none;
}

.vrd-features__icon {
	flex: none;
	color: var(--color-primary);
	margin-top: 0.15rem;
}

.vrd-features__title {
	margin: 0;
	font-family: var(--font-heading);
	font-size: var(--fs-base);
	font-weight: 400;
	letter-spacing: var(--ls-heading);
}

.vrd-features__text {
	margin: 0.25rem 0 0;
	font-size: var(--fs-sm);
	line-height: 1.6;
	color: var(--color-text-muted);
}

/* Applications */
.vrd-applications {
	display: grid;
	gap: var(--space-lg) clamp(var(--space-lg), 3vw, 2.5rem);
	margin: 0;
	padding: 0;
	list-style: none;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
}

/* Downloads */
/*
 * Inquiry block. A calm band the width of the page rather than a tinted card:
 * it is the end of the product story, so it gets its own ground.
 */
.vrd-inquiry {
	margin-top: clamp(var(--space-2xl), 6vw, 4.5rem);
	padding: clamp(var(--space-xl), 4vw, 3rem);
	background: var(--color-canvas);
	border: 1px solid var(--color-rule);
	border-radius: var(--radius-xs);
	scroll-margin-top: calc(var(--header-h) + 1.5rem);
}

.vrd-inquiry__grid {
	display: grid;
	gap: clamp(var(--space-lg), 3vw, 2.5rem);
}

@media (min-width: 900px) {
	.vrd-inquiry__grid {
		grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
		align-items: start;
	}
}

.vrd-inquiry__title {
	margin: 0 0 var(--space-sm);
	font-size: var(--fs-h3);
}

.vrd-inquiry__text {
	margin: 0 0 var(--space-md);
	max-width: 36ch;
	color: var(--color-text-muted);
	line-height: 1.65;
}

.vrd-inquiry .vrd-form-wrap {
	padding: clamp(var(--space-lg), 2.5vw, 2rem);
	background: var(--color-background);
	border-radius: var(--radius-xs);
	border: 1px solid var(--color-border);
}

/* Related products */
.vrd-related {
	padding-block: var(--space-section);
	background: var(--color-canvas);
	border-top: 1px solid var(--color-rule);
}