/*
 * Reusable components (template-parts/components/).
 * Figma source: Home (2107:1569) unless noted.
 */

/* Buttons */

.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 20px;
	border: 0;
	border-radius: var(--radius-control);
	font-family: var(--font-body);
	font-size: var(--fs-button);
	font-weight: var(--fw-semibold);
	line-height: normal;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color var(--ease-hover), color var(--ease-hover), border-color var(--ease-hover);
}

.button--sm {
	padding: 12px 18px;
	font-size: var(--fs-body-sm);
}

.button--primary {
	background: var(--ink);
	color: var(--bg);
}

.button--primary:hover {
	background: var(--ink-2);
}

.button--light {
	background: var(--bg);
	color: var(--ink);
}

.button--light:hover {
	background: var(--cream-2);
}

.button--outline {
	border: 1px solid var(--border-strong);
	background: var(--bg);
	color: var(--ink);
}

.button--outline:hover {
	border-color: var(--ink);
}

.button--link {
	gap: 10px;
	padding: 0;
	border-radius: 0;
	background: none;
	color: var(--ink-2);
}

.button--link .button__icon {
	transition: transform var(--ease-hover);
}

.button--link:hover {
	color: var(--plum);
}

.button--link:hover .button__icon {
	transform: translate(2px, -2px);
}

/* Chips */

.chip {
	display: inline-flex;
	align-items: center;
	border: 1px solid transparent;
	border-radius: var(--radius-pill);
	font-family: var(--font-body);
	font-weight: var(--fw-semibold);
	line-height: normal;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color var(--ease-hover), border-color var(--ease-hover), color var(--ease-hover);
}

.chip--tab {
	padding: 8px 13px; /* Figma 9/14 with an inside stroke */
	border-color: var(--line-cool);
	background: var(--bg);
	color: var(--muted);
	font-size: var(--fs-small);
}

.chip--tab:hover {
	border-color: var(--ink);
	color: var(--ink);
}

.chip--tab.is-active {
	border-color: var(--ink);
	background: var(--ink);
	color: var(--bg);
}

.chip--tag {
	padding: 11px 17px; /* Figma 12/18 with an inside stroke */
	background: var(--bg);
	color: var(--ink);
	font-size: var(--fs-body-sm);
}

.chip--tag:hover {
	border-color: var(--plum);
	color: var(--plum);
}

.chip--format {
	padding: 7px 11px; /* Figma 8/12 with an inside stroke */
	border-radius: var(--radius-control);
	background: var(--ink);
	color: var(--bg);
	font-size: var(--fs-small-sm);
}

/* Section heading */

.section-heading {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.section-heading__title {
	font-size: var(--fs-section-xl);
	line-height: var(--lh-section);
	letter-spacing: var(--ls-section);
	text-wrap: balance;
}

.section-heading--lg .section-heading__title {
	font-size: var(--fs-section-lg);
}

.section-heading--md .section-heading__title {
	font-size: var(--fs-section-md);
	letter-spacing: var(--ls-section-md);
}

.section-heading__intro {
	max-width: 860px;
	margin: 0;
	color: var(--muted);
	font-size: var(--fs-intro);
	line-height: var(--lh-intro);
}

.section-heading--md .section-heading__intro {
	font-size: var(--fs-body-l);
	line-height: 25px;
}

.section-heading--center {
	align-items: center;
	text-align: center;
}

.section-heading--dark .section-heading__title {
	color: var(--bg);
}

.section-heading--dark .section-heading__intro {
	color: var(--muted-on-dark);
}

/* Category card (2107:472) */

.category-card {
	display: flex;
	flex-direction: column;
	gap: 12px;
	color: var(--ink);
	text-decoration: none;
}

.category-card__media {
	display: block;
	overflow: hidden;
	aspect-ratio: 305 / 336;
	border-radius: var(--radius-card);
	background: var(--cream-2);
}

.category-card__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s ease;
}

.category-card__title {
	font-size: var(--fs-lead);
	font-weight: var(--fw-semibold);
	line-height: 28px;
	transition: color var(--ease-hover);
}

.category-card:hover .category-card__image {
	transform: scale(1.03);
}

.category-card:hover .category-card__title {
	color: var(--plum);
}

/* Collection card (2107:93) */

.collection-card {
	display: flex;
	flex-direction: column;
	gap: 12px;
	color: var(--ink);
	text-decoration: none;
}

.collection-card__collage {
	display: grid;
	grid-template-rows: 1fr 1fr;
	grid-template-columns: 53% 1fr;
	gap: 3px;
	overflow: hidden;
	aspect-ratio: 308 / 326;
	border-radius: var(--radius-card);
	background: var(--cream);
}

.collection-card__image {
	width: 100%;
	height: 100%;
	min-height: 0;
	object-fit: cover;
	transition: opacity 0.2s ease;
}

.collection-card__image--main {
	grid-row: 1 / 3;
	grid-column: 1;
}

.collection-card__image--top {
	grid-row: 1;
	grid-column: 2;
}

.collection-card__image--bottom {
	grid-row: 2;
	grid-column: 2;
}

.collection-card__collage--main-right {
	grid-template-columns: 1fr 47%;
}

.collection-card__collage--main-right .collection-card__image--main {
	grid-column: 2;
}

.collection-card__collage--main-right .collection-card__image--top,
.collection-card__collage--main-right .collection-card__image--bottom {
	grid-column: 1;
}

.collection-card__title {
	font-size: var(--fs-intro);
	font-weight: var(--fw-semibold);
	line-height: 26px;
	transition: color var(--ease-hover);
}

.collection-card__meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 24px;
	color: var(--muted-2);
	font-size: var(--fs-small);
}

.collection-card__arrow {
	margin-left: auto;
	transition: transform var(--ease-hover);
}

.collection-card:hover .collection-card__image {
	opacity: 0.92;
}

.collection-card:hover .collection-card__title {
	color: var(--plum);
}

.collection-card:hover .collection-card__arrow {
	transform: translate(2px, -2px);
}

/* Asset card (2156:1253, hover 2156:1259). Image at its own ratio for the masonry grid. */

.asset-card {
	position: relative;
	overflow: hidden;
	border-radius: var(--radius-tile);
	background: var(--line-2);
	transition: box-shadow var(--ease-hover);
}

.asset-card__image {
	display: block;
	width: 100%;
	height: auto;
}

.asset-card::before {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--gradient-asset-hover);
	opacity: 0;
	transition: opacity var(--ease-hover);
	pointer-events: none;
}

.asset-card__type {
	position: absolute;
	top: 12px;
	left: 12px;
	padding: 5px 10px;
	border-radius: var(--radius-pill);
	background: var(--white-92);
	color: var(--ink);
	font-size: var(--fs-small-sm);
	font-weight: var(--fw-semibold);
	line-height: normal;
}

.asset-card__save,
.asset-card__cart {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 0;
	background: var(--bg);
	cursor: pointer;
}

.asset-card__save {
	position: absolute;
	top: 12px;
	right: 12px;
	width: 38px;
	height: 38px;
	padding: 0;
	border-radius: var(--radius-pill);
}

.asset-card__save-icon--saved,
.asset-card.is-saved .asset-card__save-icon {
	display: none;
}

.asset-card.is-saved .asset-card__save-icon--saved {
	display: block;
}

.asset-card__footer {
	position: absolute;
	right: 16px;
	bottom: 16px;
	left: 16px;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 12px;
	color: var(--bg);
}

.asset-card__info {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
	min-width: 0;
}

.asset-card__badge {
	padding: 3px 8px;
	border-radius: var(--radius-pill);
	background: var(--white-18);
	font-size: var(--fs-tiny);
	font-weight: var(--fw-semibold);
	line-height: normal;
}

.asset-card__title {
	margin: 0;
	max-width: 100%;
	color: var(--bg);
	font-family: var(--font-body);
	font-size: var(--fs-body-l);
	font-weight: var(--fw-semibold);
	line-height: normal;
	letter-spacing: 0;
}

/* The title link covers the whole card; the buttons sit above it. */
.asset-card__link {
	display: block;
	overflow: hidden;
	color: inherit;
	text-decoration: none;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.asset-card__link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.asset-card__link:focus-visible {
	outline: none;
}

.asset-card:has(.asset-card__link:focus-visible) {
	outline: 2px solid var(--plum);
	outline-offset: 2px;
}

.asset-card__meta {
	margin: 0;
	color: var(--white-75);
	font-size: var(--fs-small);
	line-height: normal;
}

.asset-card__cart {
	flex-shrink: 0;
	width: 42px;
	height: 42px;
	border-radius: var(--radius-tile-sm);
}

.asset-card__save:focus-visible,
.asset-card__cart:focus-visible {
	outline-color: var(--bg);
}

/*
 * Hidden until hover or keyboard focus; a saved asset keeps its heart visible. Hidden buttons
 * ignore the pointer, so a tap on a touch screen always opens the asset.
 */
.asset-card__save,
.asset-card__footer {
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--ease-hover), transform var(--ease-hover);
}

.asset-card__link::after {
	pointer-events: auto;
}

.asset-card__footer {
	transform: translateY(4px);
}

.asset-card.is-saved .asset-card__save {
	opacity: 1;
	pointer-events: auto;
}

@media (hover: hover) {
	.asset-card:hover {
		box-shadow: var(--shadow-card-hover);
	}

	.asset-card:hover::before,
	.asset-card:hover .asset-card__save,
	.asset-card:hover .asset-card__footer {
		opacity: 1;
	}

	.asset-card:hover .asset-card__footer {
		transform: none;
	}

	.asset-card:hover .asset-card__save,
	.asset-card:hover .asset-card__cart {
		pointer-events: auto;
	}
}

.asset-card:focus-within {
	box-shadow: var(--shadow-card-hover);
}

.asset-card:focus-within::before,
.asset-card:focus-within .asset-card__save,
.asset-card:focus-within .asset-card__footer {
	opacity: 1;
}

.asset-card:focus-within .asset-card__footer {
	transform: none;
}

.asset-card:focus-within .asset-card__save,
.asset-card:focus-within .asset-card__cart {
	pointer-events: auto;
}

/* FAQ (2107:199) */

.faq {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.faq__item {
	border-radius: var(--radius-control);
	background: var(--cream);
}

.faq__question {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	min-height: 54px;
	padding: 9px 9px 9px 18px;
	border-radius: var(--radius-control);
	color: var(--ink);
	font-size: var(--fs-body-l);
	font-weight: var(--fw-semibold);
	line-height: 22px;
	list-style: none;
	cursor: pointer;
}

.faq__question::-webkit-details-marker {
	display: none;
}

.faq__toggle {
	position: relative;
	flex-shrink: 0;
	width: 36px;
	height: 36px;
	border-radius: 6px;
	background: var(--bg);
	transition: box-shadow var(--ease-hover);
}

.faq__toggle::before,
.faq__toggle::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 13px;
	height: 2px;
	border-radius: var(--radius-pill);
	background: var(--ink);
	transform: translate(-50%, -50%);
}

/* Vertical bar of the plus turns flat into the minus. */
.faq__toggle::after {
	transform: translate(-50%, -50%) rotate(90deg);
	transition: transform 0.25s ease;
}

.faq__item[open]:not(.is-closing) .faq__toggle::after {
	transform: translate(-50%, -50%) rotate(0deg);
}

.faq__question:hover .faq__toggle {
	box-shadow: inset 0 0 0 1px var(--line-cool);
}

.faq__answer {
	overflow: hidden; /* faq.js animates its height */
}

.faq__answer-inner {
	max-width: calc(490px + 36px);
	padding: 0 18px 30px;
	color: var(--muted);
	font-size: var(--fs-body-sm);
	line-height: 22px;
}

.faq__answer p {
	margin: 0;
}

.faq__answer p + p {
	margin-top: 8px;
}

/* Page eyebrow and section title (Contact 2186:665, Licensing 2185:665) */

.eyebrow {
	margin: 0;
	color: var(--red);
	font-size: var(--fs-eyebrow);
	font-weight: var(--fw-semibold);
	line-height: normal;
	letter-spacing: var(--ls-eyebrow);
	text-transform: uppercase;
}

/* On plum: pink (Licensing 2185:755); on photos: white (2185:897). */
.eyebrow--pink {
	color: var(--pink-on-dark);
}

.eyebrow--light {
	color: var(--white-70);
}

.page-section-title {
	margin: 0;
	color: var(--ink);
	font-size: var(--fs-section-md);
	line-height: var(--lh-h2);
	letter-spacing: var(--ls-h2);
}

/* FAQ variant with lines and round toggles, black when open (2186:803). */
.faq--lines {
	gap: 0;
	border-top: 1px solid var(--border);
}

.faq--lines .faq__item {
	border-bottom: 1px solid var(--border);
	border-radius: 0;
	background: none;
}

.faq--lines .faq__question {
	min-height: 0;
	padding: 24px 0;
	font-size: var(--fs-h6);
	line-height: normal;
}

.faq--lines .faq__toggle {
	border-radius: 50%;
	background: var(--cream-2);
}

.faq--lines .faq__toggle::before,
.faq--lines .faq__toggle::after {
	width: 11px;
	height: 1.5px;
}

.faq--lines .faq__item[open]:not(.is-closing) .faq__toggle {
	background: var(--ink);
}

.faq--lines .faq__item[open]:not(.is-closing) .faq__toggle::before,
.faq--lines .faq__item[open]:not(.is-closing) .faq__toggle::after {
	background: var(--bg);
}

.faq--lines .faq__answer-inner {
	max-width: 720px;
	padding: 0 0 24px;
	color: var(--muted);
	font-size: var(--fs-body-l);
	line-height: 1.65;
}

.faq--lines .faq__answer a {
	color: var(--plum);
}

/* Photo CTA, full bleed (Licensing 2185:895, About 2184:779) */

.photo-cta {
	position: relative;
	overflow: hidden;
	background: var(--plum);
	color: var(--bg);
}

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

.photo-cta::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: var(--gradient-photo-cta);
}

.photo-cta__inner {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	gap: 18px;
	min-height: 540px;
	padding-block: 80px;
}

.photo-cta__title {
	max-width: 620px;
	margin: 0;
	color: var(--bg);
	font-size: var(--fs-contact-title);
	line-height: 1.05;
	letter-spacing: -0.025em;
}

.photo-cta__text {
	max-width: 520px;
	margin: 0;
	color: var(--white-80);
	font-size: var(--fs-h6);
	line-height: 1.6;
}

.photo-cta__buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	padding-top: 12px;
}

.photo-cta__buttons .button {
	gap: 10px;
	padding: 17px 28px;
	font-size: var(--fs-body-l);
}

.photo-cta__outline {
	border: 1px solid var(--white-50);
	background: none;
	color: var(--bg);
}

.photo-cta__outline:hover {
	border-color: var(--bg);
	background: var(--white-12);
	color: var(--bg);
}

/* Form fields (woocommerce_form_field markup): checkout and My Account > Addresses */

.checkout-fields {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px 16px;
}

.checkout-fields .form-row {
	display: flex;
	flex-direction: column;
	gap: 8px;
	grid-column: 1 / -1;
	margin: 0;
}

.checkout-fields .form-row-first {
	grid-column: 1;
}

.checkout-fields .form-row-last {
	grid-column: 2;
}

.checkout-fields .form-row[hidden],
.checkout-fields .form-row.hidden {
	display: none;
}

.checkout-fields label {
	color: var(--ink);
	font-size: var(--fs-body-sm);
	font-weight: var(--fw-semibold);
	line-height: normal;
}

/* The design marks optional fields, not required ones. */
.checkout-fields .required {
	display: none;
}

.checkout-fields .optional {
	color: var(--muted-2);
	font-weight: var(--fw-regular);
}

.checkout-fields .input-text,
.checkout-fields select {
	width: 100%;
	height: 52px;
	padding: 0 15px;
	border: 1px solid var(--border-strong);
	border-radius: var(--radius-control);
	background: var(--bg);
	color: var(--ink);
	font-family: var(--font-body);
	font-size: var(--fs-body);
	transition: border-color var(--ease-hover), box-shadow var(--ease-hover);
}

.checkout-fields select {
	padding-right: 40px;
	background: var(--bg) url("../icons/chevron-down.svg") right 16px center / 16px no-repeat;
	appearance: none;
	cursor: pointer;
}

/* Darker than the design's #8b949a for AA contrast. */
.checkout-fields .input-text::placeholder {
	color: var(--muted-2);
	opacity: 1;
}

.checkout-fields .input-text:focus,
.checkout-fields select:focus {
	border-color: var(--plum);
	outline: none;
	box-shadow: 0 0 0 1px var(--plum);
}

.checkout-fields .input-text[readonly] {
	background: var(--hover);
}

.checkout-fields .woocommerce-invalid .input-text,
.checkout-fields .woocommerce-invalid select {
	border-color: var(--red);
}

/* CTA banner (2107:501), full-bleed */

.cta-banner {
	position: relative;
	overflow: hidden;
	padding-block: 99px;
	background: var(--gradient-cta-banner);
	color: var(--bg);
}

.cta-banner__inner {
	position: relative;
	z-index: 1;
}

.cta-banner__title {
	max-width: 672px;
	color: var(--bg);
	font-size: var(--fs-section-lg);
	letter-spacing: var(--ls-section);
	text-wrap: balance;
}

.cta-banner__text {
	margin: 24px 0 0;
	color: var(--bg);
	font-size: var(--fs-intro);
	line-height: var(--lh-intro);
	opacity: 0.76;
}

.cta-banner__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 11px;
	margin-top: 36px;
}

.cta-banner :focus-visible {
	outline-color: var(--bg);
}

/*
 * Anchored to the centred 1280 container, not the section edge, so it keeps its place
 * next to the text at any viewport width or zoom level. Figma: left edge 612px from the
 * container start (802px at 1660), 858px wide.
 */
.cta-banner__wave {
	position: absolute;
	bottom: -40px;
	left: calc(max(var(--gutter), 50% - var(--container) / 2) + 612px);
	width: 858px;
	max-width: none;
	height: auto;
	pointer-events: none;
}

/* Suggested searches: pill links with a search icon (2211:1927, 2213:2139) */

.suggestions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.suggestion {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 8px 14px;
	border: 1px solid var(--border);
	border-radius: var(--radius-pill);
	background: var(--bg);
	color: var(--body);
	font-size: var(--fs-small);
	font-weight: var(--fw-semibold);
	line-height: normal;
	text-decoration: none;
}

.suggestion:hover {
	border-color: var(--ink);
	color: var(--ink);
}

/* WooCommerce notices (wc_print_notices): added to cart, errors, info */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 16px;
	margin: 0 0 12px;
	padding: 14px 16px;
	border-radius: var(--radius-tile-sm);
	background: var(--green-tint);
	color: var(--ink);
	font-size: var(--fs-body-sm);
	line-height: 1.5;
	list-style: none;
}

.woocommerce-info {
	background: var(--plum-tint-chip);
}

/* WooCommerce focuses new notices for screen readers; no focus ring on a message. */
.woocommerce-message:focus,
.woocommerce-info:focus,
.woocommerce-error:focus,
.woocommerce-NoticeGroup:focus {
	outline: none;
}

.woocommerce-error {
	flex-direction: column;
	align-items: flex-start;
	background: var(--red-tint);
}

.woocommerce-message .button,
.woocommerce-info .button {
	order: 2;
	margin-left: auto;
	padding: 8px 14px;
	border: 1px solid var(--border-strong);
	background: var(--bg);
	color: var(--ink);
	font-size: var(--fs-small);
}

.woocommerce-message .button:hover,
.woocommerce-info .button:hover {
	border-color: var(--ink);
}

/* Responsive */

@media (max-width: 1023px) {
	.photo-cta::before {
		background: var(--gradient-photo-cta-mobile);
	}
}

/* Phones: Figma Home — Mobile 390 (2308:2772). */
@media (max-width: 767px) {
	.checkout-fields {
		grid-template-columns: minmax(0, 1fr);
	}

	.checkout-fields .form-row-first,
	.checkout-fields .form-row-last {
		grid-column: 1;
	}

	.photo-cta__inner {
		min-height: 520px;
		padding-block: 56px;
	}

	.photo-cta__text {
		font-size: var(--fs-body-l);
	}

	.photo-cta__buttons .button {
		flex: 1 1 auto;
		justify-content: center;
	}

	.page-section-title {
		font-size: var(--fs-section-sm);
	}

	.faq--lines .faq__question {
		padding: 20px 0;
		font-size: var(--fs-body-l);
	}

	/* Keep the round toggles of this variant (the Home FAQ shrinks them on phones). */
	.faq--lines .faq__toggle {
		width: 32px;
		height: 32px;
		background: var(--cream-2);
	}

	.faq--lines .faq__toggle::before,
	.faq--lines .faq__toggle::after {
		width: 10px;
		height: 1.5px;
	}

	.faq--lines .faq__answer-inner {
		margin-top: 0;
		padding: 0 0 20px;
		font-size: var(--fs-body-sm);
	}

	.chip--tab {
		padding: 7px 13px;
		border-color: var(--border);
		color: var(--body);
	}

	.chip--tab.is-active {
		border-color: var(--ink);
		color: var(--bg);
	}

	.chip--tag {
		padding: 8px 13px;
		color: var(--body);
		font-size: var(--fs-small);
	}

	.section-heading--md .section-heading__intro {
		font-size: var(--fs-intro);
		line-height: var(--lh-intro);
	}

	.category-card {
		gap: 10px;
	}

	.category-card__media {
		aspect-ratio: 169 / 190;
		border-radius: var(--radius-tile);
	}

	.category-card__title {
		font-size: var(--fs-body-sm);
		line-height: 1.3;
	}

	.collection-card__collage,
	.collection-card__collage--main-right {
		grid-template-columns: 1fr 1fr;
		gap: 4px;
		aspect-ratio: 290 / 288;
		border-radius: var(--radius-tile);
	}

	.collection-card__title {
		font-size: var(--fs-body);
		line-height: normal;
	}

	.collection-card__meta {
		min-height: 0;
	}

	.collection-card__arrow {
		width: 16px;
		height: 16px;
	}

	.faq {
		gap: 10px;
	}

	.faq__item {
		background: var(--cream-2);
	}

	.faq__question {
		gap: 12px;
		min-height: 0;
		padding: 16px;
		font-size: var(--fs-body-sm);
		line-height: 1.4;
	}

	.faq__toggle {
		width: 16px;
		height: 16px;
		background: none;
	}

	.faq__toggle::before,
	.faq__toggle::after {
		width: 9.33px;
		height: 1.33px;
	}

	.faq__question:hover .faq__toggle {
		box-shadow: none;
	}

	.faq__answer-inner {
		max-width: none;
		margin-top: -6px;
		padding: 0 16px 16px;
		font-size: var(--fs-small);
		line-height: 1.6;
	}

	.cta-banner {
		padding-block: 56px 140px;
		background: var(--gradient-cta);
	}

	.cta-banner__title {
		line-height: var(--lh-section);
		letter-spacing: -0.01em;
		text-wrap: wrap;
	}

	.cta-banner__text {
		margin-top: 18px;
		opacity: 0.8;
	}

	.cta-banner__actions {
		gap: 10px;
		margin-top: 18px;
	}

	/* Same wave at 62%, overhanging the right edge by 30px. */
	.cta-banner__wave {
		right: -30px;
		bottom: 0;
		left: auto;
		width: 532px;
	}

	/*
	 * On phones wider than the wave (about 500px up), continue its flat base to the left
	 * edge. 24.3px = 39.182 / 858 of the 532px wave, the height of the flat base.
	 */
	.cta-banner:has(> .cta-banner__wave)::after {
		content: "";
		position: absolute;
		bottom: 0;
		left: 0;
		right: 501px;
		height: 24.3px;
		background: var(--bg);
		pointer-events: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.button,
	.button__icon,
	.category-card__image,
	.collection-card__image,
	.collection-card__arrow,
	.asset-card,
	.asset-card::before,
	.asset-card__save,
	.asset-card__footer,
	.faq__toggle::after {
		transition: none;
	}
}

/* Search suggestions under the catalogue search boxes (assets/js/search-suggest.js). Not in the
   design: a dropdown in the style of the account menu. */

.search-suggest {
	position: fixed; /* top, left and width set by the script */
	z-index: 60;
	padding: 8px;
	border: 1px solid var(--line);
	border-radius: var(--radius-tile);
	background: var(--bg);
	box-shadow: var(--shadow-dropdown);
	color: var(--ink);
	text-align: left;
}

.search-suggest[hidden] {
	display: none;
}

.search-suggest__title {
	margin: 4px 10px 6px;
	color: var(--muted-2);
	font-size: var(--fs-small-sm);
	font-weight: var(--fw-semibold);
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.search-suggest__list {
	max-height: 320px; /* lowered by the script to fit the window */
	margin: 0;
	padding: 0;
	overflow-y: auto;
	list-style: none;
}

.search-suggest__option {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	min-height: 42px;
	padding: 8px 10px;
	border-radius: var(--radius-control);
	cursor: pointer;
	font-size: var(--fs-body-sm);
	line-height: 1.3;
}

.search-suggest__option:hover,
.search-suggest__option[aria-selected="true"] {
	background: var(--plum-tint-weak);
}

.search-suggest__label {
	min-width: 0;
	overflow-wrap: anywhere;
}

.search-suggest__label strong {
	color: var(--plum);
	font-weight: var(--fw-semibold);
}

.search-suggest__type {
	flex-shrink: 0;
	color: var(--muted-2);
	font-size: var(--fs-small-sm);
}