/* Soler — homepage. Geometry follows the original design (hero by viewport height, the rest measured
   at 1440px, 1vw = 14.4px); tablet and mobile restack the same pieces. Vintage details — chapter
   numerals, paper specimen labels, the stamp — are analog by intent: no digital HUD. */

.home {
	position: relative;
}

/* Chapter markers ("II · Аптеката"): Lora italic with a hand-drawn flourish that inks in. */
.chapter {
	display: inline-flex;
	align-items: baseline;
	gap: 0.7vw;
	margin-bottom: 1.4vw;
	color: var(--green);
	font-size: clamp(14px, 1.04vw, 17px);
	font-style: italic;
}

.chapter__num {
	font-size: 1.25em;
	letter-spacing: 0.04em;
}

.chapter__label::before {
	content: "· ";
}

.chapter__flourish {
	align-self: center;
	width: clamp(40px, 4.4vw, 70px);
	height: auto;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.2;
	stroke-linecap: round;
	stroke-dasharray: 1;
	stroke-dashoffset: 0;
	transition: stroke-dashoffset 1.6s var(--ease-out) 0.2s;
}

.motion .chapter:not(.is-drawn) .chapter__flourish {
	stroke-dashoffset: 1;
}

/* Specimen label: a small paper tag pinned to a photo, like a herbarium sheet. */
.label-tag {
	display: inline-block;
	padding: 0.45em 0.9em 0.5em;
	background: var(--cream);
	color: var(--ink);
	font-size: clamp(13px, 0.97vw, 16px);
	box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08), 0 6px 14px -8px rgba(0, 0, 0, 0.35);
	transform: rotate(-1.2deg);
}

.label-tag em {
	color: var(--green);
	margin-right: 0.3em;
}

/* ---------------------------------------------------------------------------
   Hero — sized by viewport height, like the original (100vh; card 80vh; lily 70vh)
   ------------------------------------------------------------------------- */

.hero {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 100vh;
	min-height: 100svh;
	padding-left: 4vw;
}

.hero__content {
	position: relative;
	z-index: 4;
	width: 47vw;
	padding-top: 9vh;
}

.hero__title {
	color: var(--green);
	font-size: 4vw;
	line-height: 1.02;
	letter-spacing: -0.005em;
}

.hero__title .c {
	display: inline-block;
	will-change: transform, opacity, filter;
}

.hero__text {
	width: 40vw;
	margin: 3.2vw 0 0 0.7vw;
	color: var(--text);
	text-align: justify;
	hyphens: auto;
}

.hero__btn {
	margin-top: 4.1vw;
}

/* The lily (538×720) stands 70vh tall, centred around 62vw. */
.hero__flower {
	position: absolute;
	top: 18vh;
	left: calc(62vw - 26.15vh);
	z-index: 3;
	width: 52.3vh;
	transform-origin: 50% 100%;
}

.hero__flower img {
	width: 100%;
}

.hero__card {
	position: absolute;
	top: -2vw;
	left: 70vw;
	z-index: 2;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
	width: 20vw;
	height: calc(80vh + 2vw);
	padding: calc(2vw + 3.4vh) 2.8vw 2.8vw;
	background: #f8f8f6;
	border-radius: 0 0 1.4vw 1.4vw;
	box-shadow: var(--shadow-card);
}

.hero__amphi {
	width: 10.5vw;
}

.hero__info {
	align-self: stretch;
	text-align: right;
	line-height: 1.5;
}

.hero__info-title {
	margin-bottom: 0.6vw;
}

.hero__info hr {
	margin: 1vw 0 1.1vw;
	border: 0;
	border-top: 1px solid var(--green);
}

.hero__info a {
	color: var(--green);
}

/* "Отворено · до 21 ч": a quiet italic note with a softly breathing dot. */
.status {
	display: inline-flex;
	align-items: center;
	gap: 0.55em;
	margin-bottom: 1.4vw;
	color: var(--green);
	font-size: clamp(14px, 1.04vw, 17px);
	font-style: italic;
}

.status__dot {
	width: 0.5em;
	height: 0.5em;
	background: var(--green);
	border-radius: 50%;
	animation: status-breathe 3.2s ease-in-out infinite;
}

.status.is-closed {
	color: #8a6a3c;
}

.status.is-closed .status__dot {
	background: #b08a52;
	animation: none;
}

@keyframes status-breathe {
	0%, 100% { opacity: 1; transform: scale(1); }
	50% { opacity: 0.35; transform: scale(0.75); }
}

.hero__bud {
	position: absolute;
	bottom: -6.4vw;
	left: 3.3vw;
	z-index: 1;
	width: 14vw;
}

/* Intro start states (animated by home.js). */
.motion [data-hero-card] {
	transform: translateY(-100%);
}

.motion [data-hero-flower] {
	clip-path: inset(100% 0 0 0);
}

/* ---------------------------------------------------------------------------
   #more — slider on the grey panel
   ------------------------------------------------------------------------- */

.more {
	position: relative;
	height: 50vw;
	margin-top: 2vw;
}

.more__panel {
	position: absolute;
	top: 0;
	left: 0;
	width: 55vw;
	height: 36.2vw;
	background: var(--mist);
}

/* Sits right above the introduction it belongs to (the hero's lily bud hangs over the left edge). */
.more__index {
	position: absolute;
	top: 20.4vw;
	left: 73.6vw;
}

.more__slider {
	position: absolute;
	inset: 0;
}

.more__slides {
	position: absolute;
	top: 4vw;
	left: 10.5vw;
	width: 52.2vw;
	height: 37.5vw;
	overflow: hidden;
}

.more__slide {
	position: absolute;
	inset: 0;
	visibility: hidden;
	overflow: hidden;
}

.more__slide.is-active,
.more__slide.is-leaving {
	visibility: visible;
}

.more__slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.more__nav {
	position: absolute;
	top: 30.4vw;
	left: 3.5vw;
}

.more__count {
	position: absolute;
	top: 41.6vw;
	left: 3.5vw;
}

.more__text {
	position: absolute;
	top: 24.4vw;
	left: 73.6vw;
	width: 21.7vw;
	text-align: justify;
	hyphens: auto;
}

/* ---------------------------------------------------------------------------
   Kinetic marquee
   ------------------------------------------------------------------------- */

.marquee {
	overflow: hidden;
	padding: 3vw 0 6vw;
	color: var(--green);
	border-block: 0;
}

.marquee__track {
	display: flex;
	width: max-content;
	will-change: transform;
}

.marquee__run {
	display: flex;
	align-items: center;
	flex: none;
}

.marquee__word {
	padding: 0 2.2vw;
	font-size: 6.6vw;
	font-style: italic;
	line-height: 1.15;
	white-space: nowrap;
}

.marquee__word:nth-child(4n + 3) {
	color: transparent;
	-webkit-text-stroke: 1px var(--green);
}

.marquee__leaf {
	width: 3.4vw;
	height: 3.4vw;
	flex: none;
	transform: rotate(-20deg);
}

/* ---------------------------------------------------------------------------
   Assortment
   ------------------------------------------------------------------------- */

.assortment {
	padding-left: 8vw;
}

.assortment__title {
	margin-bottom: 4.6vw;
}

.assortment__band {
	position: relative;
}

.assortment__band::before {
	content: "";
	position: absolute;
	top: 2.3vw;
	left: 0;
	right: 0;
	bottom: 0;
	background: var(--mist);
}

.assortment__list {
	position: relative;
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	margin: 0;
	padding: 0 0 1.6vw;
	list-style: none;
}

.assortment__link {
	display: flex;
	flex-direction: column;
	align-items: center;
	height: 100%;
	padding: 0 1.4vw 1.4vw;
	color: var(--text);
	text-align: center;
}

.assortment__icon {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	width: 4.45vw;
	height: 4.45vw;
	transition: transform 0.6s var(--ease-out);
}

.assortment__icon .ic {
	width: 100%;
	height: 100%;
	overflow: visible;
}

.assortment__name {
	position: relative;
	margin: 2.3vw 0 1.5vw;
	color: var(--text);
	font-size: clamp(18px, 1.67vw, 28px);
}

.assortment__name::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -0.3vw;
	height: 1px;
	background: var(--green);
	transform: scaleX(0);
	transition: transform 0.55s var(--ease-out);
}

.assortment__text {
	max-width: 16vw;
	line-height: 1.5;
}

.assortment__link:hover .assortment__icon {
	transform: translateY(-0.6vw) rotate(-6deg);
}

.assortment__link:hover .assortment__name::after {
	transform: scaleX(1);
}

/* ---------------------------------------------------------------------------
   Why Soler — accordion card
   ------------------------------------------------------------------------- */

.why {
	position: relative;
	padding: 7.8vw 0 9vw 8vw;
}

.why__card {
	position: relative;
	z-index: 1;
	width: 61.6vw;
	padding: 3.6vw 11vw 3.6vw 3.5vw;
	background: var(--sand);
	box-shadow: var(--shadow-card);
}

.why__title {
	margin-bottom: 3.4vw;
	color: var(--green);
}

.why__heading {
	font-size: inherit;
}

.why__toggle {
	display: flex;
	align-items: center;
	gap: 1vw;
	width: 100%;
	padding: 1.15vw 0 1.15vw 0.6vw;
	background: none;
	border: 0;
	color: #111;
	font-size: clamp(18px, 1.67vw, 28px);
	line-height: 1.25;
	text-align: left;
	cursor: pointer;
	transition: color 0.35s var(--ease);
}

.why__toggle:hover,
.why__item.is-open .why__toggle {
	color: var(--green);
}

/* Plus that becomes a minus. */
.why__icon {
	position: relative;
	flex: none;
	width: 1.5vw;
	min-width: 16px;
	height: 1.5vw;
	min-height: 16px;
}

.why__icon::before,
.why__icon::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	height: 3px;
	margin-top: -1.5px;
	background: currentColor;
	transition: transform 0.5s var(--ease-out);
}

.why__icon::after {
	transform: rotate(90deg);
}

.why__item.is-open .why__icon::after {
	transform: rotate(0deg) scaleX(0);
}

.why__panel {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.6s var(--ease-out);
}

.why__item.is-open .why__panel {
	grid-template-rows: 1fr;
}

.why__panel-inner {
	overflow: hidden;
}

.why__panel p {
	padding: 1vw 0 1.6vw 0.6vw;
	color: #111;
	font-size: clamp(14px, 1.04vw, 17px);
	text-align: justify;
	hyphens: auto;
}

.why__flower {
	position: absolute;
	top: 23.3vw;
	left: 58.2vw;
	z-index: 2;
	width: 18.9vw;
	transform-origin: 50% 100%;
}

/* ---------------------------------------------------------------------------
   Best sellers
   ------------------------------------------------------------------------- */

.best {
	position: relative;
	padding: 6vw 0 8vw;
}

/* Wide enough that the title never wraps on tablets. */
.best__label {
	width: max(20vw, 220px);
	height: 25vw;
	margin-left: 8vw;
	padding: 2.8vw;
	background: var(--sand);
}

.best__title {
	color: var(--green);
	font-size: clamp(18px, 1.67vw, 28px);
}

/* The cards overlap the label but always start ~30px below its title (≈ 26px + 6.2vw down). */
.best__carousel {
	position: relative;
	width: 79.2vw;
	margin: max(-16.8vw, calc(56px - 18.8vw)) 0 0 17.4vw;
	--best-gap: 1.6vw;
}

/* Clips sideways only, so the cards' shadows can still fall below them. */
.best__viewport {
	overflow-x: hidden;
	overflow-x: clip;
	padding-bottom: 3vw;
	margin-bottom: -3vw;
	touch-action: pan-y;
	cursor: grab;
}

.best__carousel.is-dragging .best__viewport {
	cursor: grabbing;
}

.best__track {
	position: relative;
	display: flex;
	gap: var(--best-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.best__card {
	position: relative;
	flex: 0 0 calc((100% - 2 * var(--best-gap)) / 3);
	min-width: 0;
}

.best__carousel.is-static .best__viewport {
	cursor: auto;
}

.best__carousel.is-static .best__controls {
	display: none;
}

/* Arrows and counter sit in the left margin under the label, as in the original. */
.best__controls {
	position: absolute;
	top: 20.5vw;
	left: -13.4vw;
	display: flex;
	flex-direction: column;
	gap: 2.4vw;
}

/* ---------------------------------------------------------------------------
   Gallery
   ------------------------------------------------------------------------- */

.gallery {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 30vw 30vw;
	gap: 2vw;
	padding: 2vw 2vw 0;
}

.gallery__item {
	position: relative;
	overflow: hidden;
}

.gallery__item--tall {
	grid-row: span 2;
}

.gallery__item img {
	position: absolute;
	top: -8%;
	left: 0;
	width: 100%;
	height: 116%;
	object-fit: cover;
}

.gallery__tag {
	position: absolute;
	left: 1.4vw;
	bottom: 1.4vw;
	z-index: 3;
}

/* ---------------------------------------------------------------------------
   Quote
   ------------------------------------------------------------------------- */

.quote {
	position: relative;
	margin-top: 8vw;
	padding: 21vw 0 20vw 25.7vw;
	overflow: hidden;
	background: var(--sand);
}

.quote__card {
	position: absolute;
	top: 0;
	left: 8vw;
	display: flex;
	justify-content: center;
	width: 24.3vw;
	height: 15.9vw;
	padding-top: 1.6vw;
	background: #fff;
	border-radius: 0 0 1.4vw 1.4vw;
	box-shadow: var(--shadow-card);
}

.quote__amphi {
	width: 13.5vw;
}

.quote__mark {
	width: 3.2vw;
	height: auto;
	margin-bottom: 2.6vw;
	color: var(--green);
}

.quote__text {
	max-width: 46vw;
	color: #3a3a3a;
	font-size: 2.8vw;
	font-style: italic;
	line-height: 1.5;
}

.quote__text .word {
	transition: color 0.2s linear;
}

/* ---------------------------------------------------------------------------
   Tablet (768–1024): same composition, a little more air
   ------------------------------------------------------------------------- */

@media (max-width: 1024px) {
	.hero__title {
		font-size: 5vw;
	}

	.hero__content {
		width: 50vw;
	}

	.hero__text {
		width: 44vw;
	}

	.hero__card {
		height: calc(72vh + 2vw);
	}

}

/* ---------------------------------------------------------------------------
   Mobile: pieces restack in the original mobile order — card (hanging from the top), flower, headline.
   ------------------------------------------------------------------------- */

@media (max-width: 767px) {
	.chapter {
		gap: 8px;
		margin-bottom: 14px;
	}

	.hero {
		flex-direction: column;
		align-items: stretch;
		min-height: 0;
		padding: 0 16px 48px;
	}

	.hero__card {
		position: relative;
		top: -8px;
		left: auto;
		order: 1;
		width: 100%;
		height: auto;
		min-height: 0;
		margin: 0 auto;
		padding: 88px 22px 26px;
		gap: 22px;
		border-radius: 0 0 18px 18px;
		align-items: stretch;
	}

	.hero__amphi {
		width: 150px;
		margin: 0 auto;
	}

	.hero__info {
		text-align: left;
	}

	/* As in the original: contacts sit right, leaving the bottom-left corner to the lily. */
	.hero__info p:last-child {
		padding-left: 28vw;
		text-align: right;
	}

	.status {
		margin-bottom: 14px;
	}

	.hero__info hr {
		margin: 12px 0;
	}

	.hero__flower {
		position: relative;
		top: auto;
		left: auto;
		height: auto;
		order: 2;
		width: 26vw;
		margin: -132px 0 0 18px;
	}

	.hero__content {
		order: 3;
		width: auto;
		padding-top: 20px;
	}

	.hero__title .c {
		will-change: auto;
	}

	.hero__title {
		font-size: 7.2vw;
		line-height: 1.08;
	}

	.hero__text {
		width: auto;
		margin: 22px 0 0;
	}

	.hero__btn {
		margin-top: 28px;
	}

	.hero__bud {
		display: none;
	}

	.more {
		display: flex;
		flex-direction: column;
		height: auto;
		margin: 0;
		padding: 40px 0 0;
	}

	.more__panel {
		top: 40px;
		width: 82vw;
		height: 70vw;
	}

	.more__index {
		position: relative;
		top: auto;
		left: auto;
		margin: 0 16px 16px;
	}

	.more__slider {
		position: relative;
		inset: auto;
		height: 84vw;
	}

	.more__slides {
		top: 6vw;
		left: 12vw;
		width: 84vw;
		height: 66vw;
	}

	.more__nav {
		top: auto;
		bottom: 0;
		left: 16px;
		flex-direction: row;
		align-items: center;
		gap: 16px;
	}

	.slider-nav__btn--next {
		margin-left: 0;
	}

	.more__count {
		top: auto;
		bottom: 8px;
		left: auto;
		right: 16px;
	}

	.more__text {
		position: relative;
		top: auto;
		left: auto;
		width: auto;
		margin: 32px 16px 0;
	}

	.marquee {
		padding: 40px 0;
	}

	.marquee__word {
		font-size: 12vw;
	}

	.marquee__leaf {
		width: 7vw;
		height: 7vw;
	}

	.assortment {
		padding: 0 16px;
	}

	.assortment__title {
		margin-bottom: 28px;
	}

	.assortment__band::before {
		top: 30px;
		left: -16px;
		right: -16px;
	}

	.assortment__list {
		grid-template-columns: 1fr 1fr;
		gap: 28px 0;
		padding-bottom: 28px;
	}

	.assortment__item:last-child {
		grid-column: 1 / -1;
	}

	.assortment__link {
		padding: 0 10px;
	}

	.assortment__icon {
		width: 60px;
		height: 60px;
	}

	.assortment__name {
		margin: 18px 0 10px;
	}

	.assortment__text {
		max-width: none;
		font-size: 14px;
	}

	.why {
		padding: 56px 16px 24px;
	}

	.why__card {
		width: auto;
		padding: 32px 20px 24px;
	}

	.why__title {
		margin-bottom: 20px;
	}

	.why__toggle {
		gap: 12px;
		padding: 12px 0;
	}

	.why__panel p {
		padding: 6px 0 14px;
	}

	.why__flower {
		position: relative;
		top: auto;
		left: auto;
		display: block;
		width: 40vw;
		margin: -36px 4vw 0 auto;
	}

	.best {
		padding: 24px 16px 56px;
	}

	.best__label {
		width: 52vw;
		height: 44vw;
		margin: 0;
		padding: 20px;
	}

	.best__carousel {
		width: auto;
		margin: calc(104px - 44vw) -16px 0 6vw;
		--best-gap: 12px;
	}

	.best__viewport {
		padding-bottom: 24px;
		margin-bottom: -24px;
	}

	.best__card {
		flex-basis: 74%;
	}

	.best__controls {
		position: static;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		margin: 22px 16px 0 0;
	}

	.best__nav {
		flex-direction: row;
		gap: 16px;
	}

	.gallery {
		grid-template-columns: 1fr;
		grid-template-rows: 112vw 64vw 64vw;
		gap: 12px;
		padding: 48px 12px 0;
	}

	.gallery__item--tall {
		grid-row: auto;
	}

	.gallery__tag {
		left: 12px;
		bottom: 10px;
	}

	.quote {
		margin-top: 56px;
		padding: 230px 20px 96px;
	}

	.quote__card {
		left: 20px;
		width: 62vw;
		height: 44vw;
		padding-top: 16px;
		border-radius: 0 0 16px 16px;
	}

	.quote__amphi {
		width: 38vw;
	}

	.quote__mark {
		width: 36px;
		margin-bottom: 18px;
	}

	.quote__text {
		max-width: none;
		font-size: 7.4vw;
	}
}

/* ---------------------------------------------------------------------------
   Hand-drawn herbarium (inc/herbs.php): ink lines draw in, a watercolour wash follows,
   then the plant sways and leans away from the pointer like in a light breeze.
   ------------------------------------------------------------------------- */

.herb-fig {
	position: absolute;
	z-index: 3;
	margin: 0;
	pointer-events: none;
}

.herb {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
	transform-origin: 50% 100%;
}

.herb__sway {
	transform-box: fill-box;
	transform-origin: 50% 100%;
}

.herb__ink {
	fill: none;
	stroke: #2c5a3c;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.herb__stem {
	stroke-width: 2.8;
}

.herb__vein {
	stroke-width: 1.15;
}

.herb__petal,
.herb__floret {
	stroke-width: 1.55;
}

.herb__dot {
	stroke-width: 2.6;
}

/* Herbarium caption: Latin name, then the Bulgarian one beneath. */


.motion .herb__ink {
	stroke-dasharray: 1;
	stroke-dashoffset: 1;
}

.motion .herb__wash {
	opacity: 0;
}

.motion-failed .herb__ink {
	stroke-dashoffset: 0 !important;
}

.motion-failed .herb__wash {
	opacity: 1 !important;
}

.assortment {
	position: relative;
}

.flower--more {
	top: 3vw;
	left: 63.5vw;
	width: 13vw;
}

.flower--quote {
	top: 11vw;
	left: 76vw;
	width: 14vw;
}

@media (max-width: 767px) {
	.herb-fig__cap {
		margin-top: 6px;
		font-size: 11px;
	}

	/* On phones solid herbs only appear where there is clear space; ghosts stay in the background. */
	.flower--more {
		display: none;
	}

	/* Bottom corner: the fixed bookmark would cover the top-right one. */
	.flower--quote {
		top: auto;
		right: 16px;
		bottom: 16px;
		left: auto;
		width: 22vw;
	}
}

/* Herb name: a small paper label that appears only while the drawing itself is hovered. */
.herb-fig .herb path {
	pointer-events: visiblePainted;
}

.herb-fig__cap {
	position: absolute;
	left: 50%;
	bottom: -0.2vw;
	z-index: 2;
	padding: 0.4em 0.85em 0.45em;
	background: var(--cream);
	color: var(--ink);
	font-size: clamp(12px, 0.9vw, 14px);
	line-height: 1.3;
	white-space: nowrap;
	text-align: center;
	box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06), 0 8px 18px -10px rgba(0, 0, 0, 0.4);
	opacity: 0;
	transform: translate(-50%, 8px) rotate(-1.4deg);
	transition: opacity 0.35s ease, transform 0.5s var(--ease-out);
	pointer-events: none;
}

.herb-fig__cap em {
	display: block;
	color: var(--green);
	font-style: italic;
}

.herb-fig:hover .herb-fig__cap {
	opacity: 1;
	transform: translate(-50%, 0) rotate(-1.4deg);
}

.gallery {
	position: relative;
}

/* Ghost outlines: large, faint, line-only herbs behind the content. */
.herb-ghost {
	position: absolute;
	z-index: 0;
	pointer-events: none;
}

.herb-ghost .herb__ink {
	stroke: var(--green);
	stroke-opacity: 0.2;
	stroke-width: 1.3;
}

.herb-ghost .herb__stem {
	stroke-width: 1.7;
}

.more__slides {
	touch-action: pan-y;
	cursor: grab;
}

.more__slides:active {
	cursor: grabbing;
}

/* The original watercolour flowers sway in a slow breeze (keyframes in base.css). */
@media (prefers-reduced-motion: no-preference) {
	.hero__flower,
	.hero__bud,
	.why__flower {
		animation: soler-sway 4.6s cubic-bezier(0.37, 0, 0.63, 1) -2s infinite alternate;
	}

	.hero__bud {
		transform-origin: 50% 100%;
		animation-duration: 3.8s;
		animation-delay: -1s;
	}

	.why__flower {
		animation-duration: 5.4s;
		animation-delay: -3s;
	}
}

/* ---------------------------------------------------------------------------
   "От нашите рафтове" (template-parts/home/shelf.php): a tab per menu group — the active one
   underlined by the flowing wave — each with a sand label tile beside six product cards.
   ------------------------------------------------------------------------- */

.shelf {
	padding: 2vw 8vw 6vw;
}

.shelf__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 18px 48px;
	margin-bottom: clamp(26px, 3vw, 48px);
}

.shelf__title {
	color: var(--green);
	font-size: clamp(30px, 3.2vw, 54px);
	font-weight: 400;
	line-height: 1.08;
}

.shelf__tabs {
	display: flex;
	gap: clamp(18px, 2.2vw, 36px);
}

html body .shelf__tab {
	position: relative;
	display: inline-block;
	padding: 4px 0 14px;
	background: none;
	border: 0;
	border-radius: 0;
	color: var(--muted);
	font-family: var(--font);
	font-size: clamp(15px, 1.15vw, 18px);
	white-space: nowrap;
	cursor: pointer;
	transition: color 0.3s ease;
}

html body .shelf__tab:hover,
html body .shelf__tab[aria-selected="true"] {
	color: var(--green);
}

.shelf__tab:focus-visible {
	outline: 2px solid var(--green);
	outline-offset: 6px;
}

/* The wave under the active tab inks in; the others wait undrawn. Out of the flow, so it never
   widens the tab. */
.shelf__tab .chapter__flourish {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 52px;
	stroke-dashoffset: 1;
	transition: stroke-dashoffset 0.9s var(--ease-out);
}

.shelf__tab[aria-selected="true"] .chapter__flourish {
	stroke-dashoffset: 0;
}

.shelf__panel:focus {
	outline: none;
}

.shelf__panel:focus-visible {
	outline: 2px solid var(--green);
	outline-offset: 8px;
}

.shelf__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);
	gap: clamp(16px, 1.6vw, 28px);
}

.shelf__label {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: clamp(22px, 2.4vw, 40px);
	overflow: hidden;
	background: var(--sand);
}

.shelf__kicker {
	position: relative;
	z-index: 2;
	margin: 0 0 8px;
	color: var(--green);
	font-size: 13px;
	font-style: italic;
}

.shelf__name {
	position: relative;
	z-index: 2;
	color: var(--green);
	font-size: clamp(26px, 2.4vw, 40px);
	font-weight: 400;
	line-height: 1.1;
}

.shelf__intro {
	position: relative;
	z-index: 2;
	margin: 12px 0 0;
	color: var(--text);
	font-size: 15px;
	line-height: 1.55;
}

.shelf__links {
	position: relative;
	z-index: 2;
	display: grid;
	gap: 7px;
	margin: 20px 0 0;
	padding: 0;
	list-style: none;
}

.shelf__links a {
	color: var(--green);
	font-size: 15px;
	background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
	transition: background-size 0.45s var(--ease-out);
}

.shelf__links a:hover,
.shelf__links a:focus-visible {
	background-size: 100% 1px;
}

.shelf__all {
	position: relative;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	gap: 10px;
	margin-top: 22px;
	padding-bottom: 4px;
	color: var(--green);
	font-size: 13.5px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat;
	transition: background-size 0.5s var(--ease-out);
}

.shelf__all svg {
	width: 18px;
	height: 18px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.4;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: transform 0.5s var(--ease-out);
}

.shelf__all:hover,
.shelf__all:focus-visible {
	background-size: 0 1px;
}

.shelf__all:hover svg,
.shelf__all:focus-visible svg {
	transform: translateX(5px);
}

/* The painted flower stands in the tile's corner, sized by height. */
.shelf__label .flower--shelf {
	right: 4%;
	bottom: 0;
	z-index: 1;
	width: auto;
	height: min(44%, 260px);
}

.flower.flower--shelf img {
	width: auto;
	height: 100%;
}

.shelf__products {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(16px, 1.6vw, 28px);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (max-width: 1024px) {
	.shelf__head {
		flex-direction: column;
		align-items: flex-start;
	}

	/* Tabs scroll sideways, fading out at the right edge as a hint. */
	.shelf__tabs {
		max-width: 100%;
		overflow-x: auto;
		scrollbar-width: none;
		-webkit-mask-image: linear-gradient(90deg, #000 82%, transparent);
		mask-image: linear-gradient(90deg, #000 82%, transparent);
	}

	.shelf__tabs::-webkit-scrollbar {
		display: none;
	}

	.shelf__tab:last-child {
		padding-right: 40px;
	}

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

	.shelf__label {
		padding-right: 38%;
	}

	.shelf__label .flower--shelf {
		right: 4%;
		height: min(80%, 230px);
	}
}

@media (max-width: 767px) {
	.shelf {
		padding: 24px 16px 56px;
	}

	.shelf__products {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px;
	}

	.shelf__label {
		padding: 22px 40% 24px 20px;
	}

	.shelf__label .flower--shelf {
		right: 3%;
		height: min(62%, 150px);
	}
}