/* Nature's Lines — home occasions carousel (pa_povod). Lane mechanics follow the
   gift carousel (horizontal scroll, snap, thin scrollbar) but the classes are an
   independent nl-occasions-* set. Tokens (--nl-*) from header.css :root. */

.nl-occasions__scroller { position: relative; }

.nl-occasions__track {
	display: flex; gap: 12px; margin: 0; padding: 2px 0 8px; list-style: none;
	overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
	min-width: 0; max-width: 100%;
}
.nl-occasions__item { flex: 0 0 auto; scroll-snap-align: start; }

.nl-occasions-card { display: block; width: 96px; text-decoration: none; }
.nl-occasions-card__media {
	display: block; aspect-ratio: 1 / 1; border-radius:  0; overflow: hidden;
	background: var(--nl-surface, #f7f5f1); border: 1px solid var(--nl-line, #e6e3dc);
	transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.nl-occasions-card__img,
.nl-occasions-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nl-occasions-card__tint {
	display: flex; align-items: center; justify-content: center;
	width: 100%; height: 100%; font-size: 24px; color: var(--nl-sage, #abc8bf);
	background: linear-gradient(155deg, #eef0e6 0%, #e3e9e1 55%, #d9e2d8 100%);
}
.nl-occasions-card__label {
	display: block; margin-top: 7px;
	font: 600 11.5px/1.35 var(--wp--preset--font-family--open-sans, "Open Sans", sans-serif);
	color: var(--nl-ink, #222222);
}
.nl-occasions-card:hover .nl-occasions-card__media {
	transform: translateY(-2px); border-color: var(--nl-sage, #abc8bf);
	box-shadow: 0 6px 16px rgba(34, 34, 34, .10);
}

/* desktop arrows — shown by JS only when the lane actually overflows */
.nl-occasions__arrow { display: none; }
@media (min-width: 1024px) {
	.nl-occasions__arrow {
		position: absolute; top: 84px; transform: translateY(-50%); z-index: 2;
		display: flex; align-items: center; justify-content: center;
		width: 38px; height: 38px; border-radius:  0; cursor: pointer;
		border: 1px solid var(--nl-line, #e6e3dc); background: var(--nl-canvas, #fff);
		color: var(--nl-ink, #222222); font-size: 16px; line-height: 1;
		box-shadow: 0 2px 10px rgba(34, 34, 34, .14);
		transition: opacity .15s ease, border-color .15s ease;
	}
	.nl-occasions__arrow:hover { border-color: var(--nl-sage, #abc8bf); }
	.nl-occasions__arrow[disabled] { opacity: .35; pointer-events: none; }
	.nl-occasions__arrow--prev { left: -14px; }
	.nl-occasions__arrow--next { right: -14px; }
}
.nl-occasions__arrow[hidden] { display: none; }

/* F1: tablet keeps the horizontal scroll, tile 108x108 (per Natureslines.dc.html L1367-1377) */
@media (min-width: 768px) {
	.nl-occasions__track { gap: 16px; }
	.nl-occasions-card { width: 108px; }
	.nl-occasions-card__label { font-size: 12px; margin-top: 8px; }
}
/* F5: desktop reverted to the pre-F1 horizontal scroll carousel with arrows (grid dropped).
   Tablet/mobile scroll (108/96) kept from F1. */
@media (min-width: 1024px) {
	.nl-occasions-card { width: 168px; }
	.nl-occasions__arrow { top: 84px; } /* media is 168px square -> arrow centred on the photo */
}

/* thin, unobtrusive scrollbar, same register as the gift lane */
.nl-occasions__track::-webkit-scrollbar { height: 6px; }
.nl-occasions__track::-webkit-scrollbar-thumb { background: var(--nl-line, #e6e3dc); border-radius:  0; }