/*
 * Zairi Seasons: the seasonal shelf, link and note.
 * Only the four --season-* tokens change with the season (written inline by the plugin when an experience is
 * active). The brand forest, coral, cream, logo and type never change here; every token falls back to them.
 */

.zf-season-link {
	color: var(--season-accent, var(--forest));
	text-decoration-color: var(--season-accent, var(--forest));
}

.main-nav a.zf-season-link,
.site-header .header-bottom .main-nav a.zf-season-link {
	border-block-end-color: var(--season-accent, var(--coral));
}

.zf-season-link .zf-nav-icon {
	color: var(--season-accent, var(--forest));
}

/* The top-row chip shows only on wide screens; there the bar shares its row with the search and the link would wrap it. */
.header-tools .zf-season-link {
	display: none;
}

@media (width > 70rem) {
	.header-tools .zf-season-link {
		display: inline-flex;
		align-items: center;
		gap: 0.35em;
		min-block-size: 44px;
		padding-inline: 0.75rem;
		border: 1px solid var(--season-tint, var(--line));
		border-radius: 999px;
		background: var(--season-wash, var(--card));
		font-weight: 700;
		text-decoration: none;
	}

	.site-header .header-bottom .main-nav a.zf-season-link {
		display: none;
	}
}

.zf-season-shelf {
	padding: clamp(1rem, 0.6rem + 1.5vw, 1.75rem);
	border: 1px solid var(--season-tint, var(--line));
	border-radius: 20px;
	background: var(--season-wash, var(--card));
}

.zf-living-home .zf-season-shelf {
	padding-block: clamp(1rem, 0.6rem + 1.5vw, 1.75rem);
}

.zf-season-shelf--shop {
	margin-block: 1rem 1.5rem;
}

.zf-season-shelf .section-heading h2 {
	color: var(--season-ink-soft, var(--ink));
}

.zf-season-shelf .text-link {
	color: var(--season-accent, var(--forest));
}

.zf-season-shelf > .small {
	margin-block: -0.75rem 1rem;
	color: var(--season-ink-soft, var(--muted));
}

/* Every card the same size: the home shelf's wide first card is for the fresh shelf only. */
.products-grid.zf-season-grid {
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
}

.zf-season-grid .product-image {
	aspect-ratio: 1;
}

/* On a phone the shelf is one swipeable row, with the next card peeking in, instead of a screen per card. */
@media (width < 42rem) {
	.products-grid.zf-season-grid {
		grid-template-columns: none;
		grid-auto-flow: column;
		grid-auto-columns: min(78%, 17rem);
		overflow-x: auto;
		overscroll-behavior-inline: contain;
		scroll-snap-type: inline mandatory;
		scrollbar-width: thin;
		padding-block-end: 0.5rem;
	}

	.zf-season-grid > .product-card {
		scroll-snap-align: start;
	}
}

/* On a product page the note keeps the product column's width and sits above the side vines, like the page's
   other content. */
.zf-living-pdp .zf-season-note {
	position: relative;
	z-index: 1;
	inline-size: min(calc(100% - 2 * var(--zfl-page-pad, 1rem)), 1380px);
	margin: 1.5rem auto;
}

.zf-season-note .section-heading h2 {
	font-size: clamp(1.25rem, 1rem + 0.8vw, 1.75rem);
}

.products-grid.zf-season-note__grid {
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 18rem));
}

body.zf-season .site-header {
	border-block-start: 4px solid var(--season-accent, transparent);
}

body.zf-season .zf-living-hero__eyebrow {
	text-decoration: underline;
	text-decoration-color: var(--season-tint, currentColor);
	text-decoration-thickness: 3px;
	text-underline-offset: 0.3em;
}

/* Bouquet builder: the season's suggestion and the tag on its colours and style. Nothing is preselected. */
.season-suggestion {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	padding: 0.75rem 1rem;
	border: 1px solid var(--season-tint, var(--line));
	border-radius: 14px;
	background: var(--season-wash, var(--card));
	color: var(--season-ink-soft, var(--ink));
}

.season-suggestion[hidden] {
	display: none;
}

.season-suggestion p {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
}

.season-suggestion-icon {
	display: inline-flex;
	flex: none;
	color: var(--season-accent, var(--forest));
}

.season-suggestion .chip {
	border-color: var(--season-accent, var(--forest));
	font-weight: 700;
}

.chip-season {
	margin-inline-start: 0.4em;
	padding: 0.05em 0.45em;
	border-radius: 999px;
	background: var(--season-tint, var(--card));
	color: var(--season-ink-soft, var(--ink));
	font-size: 0.75rem;
	font-style: normal;
	font-weight: 700;
}

/* The whole site in the season's secondary tones. The brand green, coral buttons, logo and type stay as they are. */
body.zf-season .site-header {
	background: var(--season-wash, transparent);
	border-block-end-color: var(--season-tint, var(--line));
}

/* The footer keeps its own dark ground; the season shows in its top line, its roots and its seasonal link. */
body.zf-season .site-footer {
	border-block-start: 4px solid var(--season-accent, transparent);
}

body.zf-season .footer-roots {
	color: var(--season-accent, var(--citron));
}

body.zf-season .home-care-knowledge,
body.zf-season .home-conclusion__service {
	background: var(--season-wash, transparent);
	border-radius: 20px;
}

body.zf-season .zf-living-category {
	border-color: var(--season-tint, rgb(15 81 35 / 0.16));
}

body.zf-season .zf-living-category:is(:hover, :focus-visible) {
	border-color: var(--season-accent, var(--forest));
}

body.zf-season .button.secondary {
	border-color: var(--season-accent, var(--ink));
}

body.zf-season .text-link {
	text-decoration-color: var(--season-accent, currentColor);
}

/* A product on the seasonal shelf carries a small tag wherever its card appears. */
.zf-season-tag {
	display: inline-flex;
	align-items: center;
	gap: 0.3em;
	inline-size: fit-content;
	padding: 0.15em 0.6em;
	border-radius: 999px;
	background: var(--season-tint, var(--sand));
	color: var(--season-ink-soft, var(--ink));
	font-size: 0.78rem;
	font-weight: 700;
}

/* Inside the seasonal shelf every card is seasonal; the tag says it only elsewhere. */
.zf-season-shelf .zf-season-tag {
	display: none;
}

.zf-season-tag__icon {
	inline-size: 1em;
	block-size: 1em;
}

/* The line at the top of a category that belongs to the season. */
.zf-season-strip {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.35rem 0.6rem;
	margin-block: 0 1rem;
	padding: 0.7rem 1rem;
	border: 1px solid var(--season-tint, var(--line));
	border-radius: 14px;
	background: var(--season-wash, var(--card));
	color: var(--season-ink-soft, var(--ink));
}

.zf-season-strip__icon {
	color: var(--season-accent, var(--forest));
}

.zf-season-footer {
	margin: 0.5rem 0 0;
}

.zf-season-footer a {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	color: var(--season-tint, currentColor);
	font-weight: 700;
	text-decoration: none;
}