/**
 * Products page.
 */

.products-page .wp-block-post-content {
	padding: 0;
}

.products-page .wp-block-post-content > * {
	margin-block: 0;
}

.products-hero {
	align-items: center;
	background:
		linear-gradient(180deg, rgba(9, 9, 9, 0.68) 0%, rgba(9, 9, 9, 0.64) 48%, rgba(11, 11, 11, 0.9) 82%, var(--wp--preset--color--surface-page) 100%),
		var(--duplatech-page-hero-products, var(--products-hero-image, var(--duplatech-hero-products, url(../images/figma/products-hero.png)))) center 64% / cover no-repeat,
		var(--wp--preset--color--surface-page);
	display: flex;
	min-height: clamp(17rem, 25vw, 20rem);
	padding: clamp(3.5rem, 7vw, 5rem) clamp(1rem, 4vw, 2rem);
	text-align: center;
}

.products-hero__content {
	margin-inline: auto;
	max-width: 45rem;
}

.products-hero h1 {
	font-size: clamp(2.5rem, 4.5vw, 3.25rem);
	margin-block: 0.65rem 1rem;
}

.products-hero p:last-child {
	font-size: clamp(0.9rem, 1.4vw, 1rem);
	line-height: 1.6;
	margin-inline: auto;
	max-width: 35rem;
}

.products-eyebrow,
.product-card__type,
.product-card__specs h4,
.product-card__benefits h4 {
	font-size: 0.7rem;
	font-weight: 800;
	letter-spacing: 0.11em;
	text-transform: uppercase;
}

.products-eyebrow {
	color: var(--wp--preset--color--brand-primary);
}

.products-catalog {
	background: var(--wp--preset--color--surface-page);
	padding: clamp(3rem, 6vw, 5rem) clamp(1rem, 4vw, 2rem) clamp(5rem, 9vw, 8rem);
}

.products-section-header {
	margin-bottom: clamp(2rem, 4vw, 3.5rem);
}

.products-section-header h2 {
	font-size: clamp(2rem, 3.5vw, 2.75rem);
	margin: 0.6rem 0 0;
}

.products-budget-link a {
	color: var(--wp--preset--color--text-secondary);
	text-decoration: none;
}

.products-grid {
	display: grid;
	gap: clamp(1.5rem, 3vw, 2.5rem);
	grid-template-columns: minmax(0, 1fr);
}

.product-card {
	align-self: start;
	background: var(--wp--preset--color--surface-raised);
	border: 1px solid var(--wp--preset--color--border-subtle);
	border-radius: 0.9rem;
	overflow: hidden;
}

.product-card__media {
	aspect-ratio: 16 / 11;
	border-bottom: 2px solid var(--wp--preset--color--brand-primary);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	padding: 1rem;
	position: relative;
}

.product-card__image {
	height: 100%;
	inset: 0;
	object-fit: cover;
	position: absolute;
	width: 100%;
}

.product-card__badge {
	background: var(--wp--preset--color--brand-primary);
	border-radius: 999px;
	color: var(--wp--preset--color--brand-on-primary);
	display: inline-block;
	font-size: 0.65rem;
	font-weight: 800;
	margin: 0;
	padding: 0.45rem 0.8rem;
	text-transform: uppercase;
	position: relative;
	z-index: 1;
}

.product-card__body {
	padding: 1rem;
	position: relative;
}

.product-card__type,
.product-card__specs h4,
.product-card__benefits h4 {
	color: var(--wp--preset--color--text-secondary);
}

.product-card h3 {
	font-size: 1.5rem;
	margin-block: 0.35rem 0.85rem;
}

.product-card dl,
.product-card dd {
	margin: 0;
}

.product-card__summary > div,
.product-card__specs dl > div {
	border-bottom: 1px solid var(--wp--preset--color--border-subtle);
	display: grid;
	gap: 1rem;
	grid-template-columns: minmax(0, 1fr) auto;
	padding-block: 0.55rem;
}

.product-card dt {
	color: var(--wp--preset--color--text-secondary);
}

.product-card dd {
	text-align: right;
}

.product-card__details {
	margin-top: 0.75rem;
}

.product-card__details:not([open]) {
	padding-right: 8.5rem;
}

.product-card__details[open] {
	padding-bottom: 3rem;
}

.product-card__details summary {
	color: var(--wp--preset--color--brand-primary);
	cursor: pointer;
	font-weight: 750;
	list-style: none;
}

.product-card__details summary::-webkit-details-marker {
	display: none;
}

.product-card__details summary::after {
	border-right: 1px solid currentcolor;
	border-top: 1px solid currentcolor;
	content: "";
	display: inline-block;
	height: 0.4rem;
	margin-left: 0.5rem;
	transform: rotate(45deg);
	transition: transform 180ms ease;
	width: 0.4rem;
}

.product-card__details[open] summary::after {
	transform: rotate(-135deg);
}

.product-card__details[open] summary {
	bottom: 0.85rem;
	left: 1rem;
	position: absolute;
}

.product-card__label--open,
.product-card__details[open] .product-card__label--closed {
	display: none;
}

.product-card__details[open] .product-card__label--open {
	display: inline;
}

.product-card__details .has-text-secondary-color {
	line-height: 1.65;
}

.product-card__specs {
	background: var(--wp--preset--color--surface-soft);
	border: 1px solid var(--wp--preset--color--border-subtle);
	border-radius: 0.75rem;
	margin-block: 1.25rem;
	padding: 1rem;
}

.product-card__specs h4,
.product-card__benefits h4 {
	margin-top: 0;
}

.product-card__benefits ul {
	color: var(--wp--preset--color--text-secondary);
	list-style: none;
	padding: 0;
}

.product-card__benefits li {
	margin-block: 0.55rem;
	padding-left: 1.5rem;
	position: relative;
}

.product-card__benefits li::before {
	color: var(--wp--preset--color--brand-primary);
	content: "✓";
	font-weight: 800;
	left: 0;
	position: absolute;
}

.product-card__actions {
	justify-content: flex-end;
	margin-top: 1.25rem;
}

.product-card__body .product-card__actions {
	bottom: 0.7rem;
	margin: 0;
	position: absolute;
	right: 1rem;
}

.product-card__actions .wp-block-button__link {
	background: rgba(245, 184, 0, 0.14);
	border: 1px solid rgba(245, 184, 0, 0.28);
	border-radius: 0.625rem;
	color: var(--wp--preset--color--brand-primary);
	font-size: 0.7rem;
	padding: 0.55rem 0.75rem;
}

@media (max-width: 47.99rem) {

	.products-catalog {
		padding-inline: 0;
	}

	.products-section-header,
	.products-grid {
		padding-inline: var(--wp--preset--spacing--60);
		width: 100%;
	}

	.product-card__details summary {
		align-items: center;
		display: inline-flex;
		min-height: 2.75rem;
	}

	.product-card__details:not([open]) {
		padding-right: 7.75rem;
	}

	.product-card__actions .wp-block-button__link {
		min-height: 2.75rem;
		padding-inline: 0.65rem;
	}
}

@media (min-width: 48rem) {

	.products-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 64rem) {

	.products-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}