/* Shop by mood — collection banners on the home page */
.coll-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }

.coll { --bg: var(--surface); --ink: var(--text); --sub: var(--muted); border-radius: var(--r-lg); background: var(--bg); color: var(--ink); overflow: hidden; }
.coll--deep  { --bg: var(--accent); --ink: #fff; --sub: #e9d6bf; }
.coll--ink   { --bg: #1c1b19; --ink: #fff; --sub: #c9c3b8; }
.coll--mint  { --bg: #e1f5ee; --ink: #085041; --sub: #2f6f5c; }
.coll--lime  { --bg: #eaf3de; --ink: #27500a; --sub: #3b6d11; }
.coll--cream { --bg: #f6eedf; --ink: #5a3a12; --sub: #85602b; }
.coll--sand  { --bg: #e9e1d6; --ink: #3d3326; --sub: #6b5d4b; }

.coll__link {
	position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: stretch; gap: 12px;
	min-height: 200px; padding: 22px 18px 22px 22px; color: inherit; text-decoration: none !important;
}
.coll__text { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.coll__title { font-size: 24px; font-weight: 600; letter-spacing: -0.03em; line-height: 1.1; }
.coll__line { font-size: var(--fs-sm); color: var(--sub); line-height: 1.4; max-width: 22ch; }
.coll__count { margin-top: auto; font: 500 var(--fs-xs)/1 var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--sub); white-space: nowrap; }
.coll__count span { display: inline-block; transition: transform .25s var(--ease); }

.coll__fan { position: relative; width: 196px; align-self: center; height: 150px; }
.coll__bottle {
	position: absolute; top: 14px; left: calc(var(--i) * 56px); width: 84px; height: 112px;
	border-radius: 12px; background: #fff; box-shadow: 0 10px 24px -14px rgba(0,0,0,.45);
	transform: rotate(calc((var(--i) - 1) * 7deg)) translateY(calc((1 - var(--i)) * (1 - var(--i)) * 6px));
	transition: transform .35s var(--ease);
	z-index: calc(3 - var(--i));
}
.coll__bottle:nth-child(2) { z-index: 3; }
.coll__bottle img { width: 100%; height: 100%; object-fit: contain; padding: 6px; mix-blend-mode: multiply; }

@media (hover: hover) {
	.coll__link:hover .coll__bottle { transform: rotate(calc((var(--i) - 1) * 11deg)) translate(calc((var(--i) - 1) * 10px), -6px); }
	.coll__link:hover .coll__count span { transform: translateX(4px); }
}
.coll__link:focus-visible { outline: 2px solid var(--tint); outline-offset: -4px; border-radius: var(--r-lg); }

@media (max-width: 1100px) {
	.coll-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
	.coll-grid {
		grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 84%;
		overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
		margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter); scroll-padding: 0 var(--gutter);
	}
	.coll-grid::-webkit-scrollbar { display: none; }
	.coll { scroll-snap-align: start; }
	.coll__link { min-height: 176px; padding: 18px 12px 18px 18px; }
	.coll__title { font-size: 21px; }
	.coll__fan { width: 112px; height: 120px; }
	.coll__bottle { width: 56px; height: 76px; left: calc(var(--i) * 28px); }
}
@media (prefers-reduced-motion: reduce) {
	.coll__bottle, .coll__count span { transition: none; }
}