/**
 * Page-group layout: title row → sidebar + content row.
 * Sidebar sticky, border-left running full content height.
 */

/* ——— Desktop flex: sidebar + main, side-by-side ——— */
@media (min-width: 46.875em) {
	.natella-page-group-sidebar-layout .natella-subpage__layout {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		gap: max(1.5rem, var(--natella-gap-lg));
		align-items: stretch;
	}

	/* Override subpages.css: main заливает всё остальное место, 60% cap убран. */
	.natella-page-group-sidebar-layout #natella-page-group-main,
	.natella-page-group-sidebar-layout .natella-page-group-layout__main,
	.natella-page-group-sidebar-layout #natella-page-group-main.natella-subpage__main,
	.natella-page-group-sidebar-layout .natella-subpage__main {
		flex: 1 1 auto;
		min-width: 0;
		max-width: none;
	}

	.natella-page-group-sidebar-layout .natella-page-group-sidebar-col {
		flex: 0 0 200px;
		max-width: 200px;
		min-width: 0;
		align-self: stretch;
		padding-block-start: clamp(3rem, 6vw, 5rem);
	}

	/* Рамку вокруг бокового меню убрали — nav без border и без padding-бокса. */
	.natella-page-group-sidebar-layout .natella-page-group-sidebar-col .natella-subpage__nav {
		display: block;
		flex: none;
		max-width: 100%;
		width: 100%;
		border: 0;
		padding: 0;
		position: sticky;
		top: var(--natella-page-group-sticky-top, 5.5rem);
		max-height: calc(100vh - var(--natella-page-group-sticky-top, 5.5rem) - 1rem);
		overflow-y: auto;
	}

	.natella-page-group-sidebar-layout .natella-subpage__nav-list {
		list-style: none;
		margin: 0;
		padding: 0;
		display: flex;
		flex-direction: column;
		gap: 0.15rem;
	}

	.natella-page-group-sidebar-layout .natella-subpage__nav-item {
		margin: 0;
	}

	.natella-page-group-sidebar-layout .natella-subpage__nav-link {
		display: block;
		padding: 0.6rem 0.75rem;
		font-family: var(--natella-font-heading);
		font-size: clamp(0.9rem, 1vw, 1rem);
		line-height: 1.35;
		font-weight: 500;
		color: var(--natella-color-text);
		text-decoration: none;
		border-radius: 2px;
		transition: background-color 0.18s ease, color 0.18s ease;
	}

	.natella-page-group-sidebar-layout .natella-subpage__nav-link:hover,
	.natella-page-group-sidebar-layout .natella-subpage__nav-link:focus-visible {
		background: rgba(0, 0, 0, 0.04);
		outline: none;
	}

	.natella-page-group-sidebar-layout .natella-subpage__nav-item.is-active .natella-subpage__nav-link {
		background: rgba(0, 0, 0, 0.06);
		font-weight: 600;
	}
}

/* ——— Mobile: sidebar — horizontal pill bar above content ——— */
@media (max-width: 46.8125em) {
	.natella-page-group-sidebar-layout .natella-subpage__layout {
		display: flex;
		flex-direction: column;
		gap: var(--natella-gap-lg);
	}

	.natella-page-group-sidebar-layout .natella-page-group-sidebar-col {
		order: -1;
		border: 0;
		padding: 0;
	}

	.natella-page-group-sidebar-layout .natella-subpage__nav-list {
		list-style: none;
		margin: 0;
		padding: 0;
		display: flex;
		flex-wrap: wrap;
		gap: 0.35rem 0.5rem;
	}

	.natella-page-group-sidebar-layout .natella-subpage__nav-link {
		display: inline-block;
		padding: 0.45rem 0.85rem;
		font-size: 0.9rem;
		line-height: 1.3;
		text-decoration: none;
		color: var(--natella-color-text);
		border: 1px solid var(--natella-color-border);
		border-radius: 999px;
		transition: background-color 0.18s ease, border-color 0.18s ease;
	}

	.natella-page-group-sidebar-layout .natella-subpage__nav-item.is-active .natella-subpage__nav-link {
		background: var(--natella-color-text);
		color: var(--natella-color-bg, #fff);
		border-color: var(--natella-color-text);
		font-weight: 600;
	}

	.natella-page-group-sidebar-layout .natella-subpage__nav-link:hover,
	.natella-page-group-sidebar-layout .natella-subpage__nav-link:focus-visible {
		border-color: var(--natella-color-text);
	}
}

/* ——— Collection hero bleed (collection single pages) ——— */
.natella-layout__section--collection-hero {
	padding-inline: 0;
}

.natella-collection-hero-bleed {
	width: 100%;
	margin: 0 0 max(1.35rem, var(--natella-gap-xl));
}

.natella-collection-hero-bleed[hidden] {
	display: none;
}

.natella-collection-hero-bleed .natella-page-hero {
	width: 100%;
	max-width: none;
	margin: 0;
}

.natella-layout__section--collection-hero > .natella-layout__inner {
	padding-inline: var(--natella-page-margin);
	overflow-x: clip;
}

/* ——— Collection page header (title + year) ——— */
.natella-collection-page__header {
	text-align: center;
	margin-block: max(0.5rem, var(--natella-gap-md)) max(1.5rem, var(--natella-gap-xl));
}

.natella-collection-page__title {
	margin-bottom: 0.35rem;
}

.natella-collection-page__year {
	margin: 0;
	font-family: var(--natella-font-heading);
	font-size: clamp(1rem, 2.5vw, 1.35rem);
	font-weight: 500;
	letter-spacing: var(--natella-tracking-display, 0.1em);
	color: var(--natella-color-muted);
}

/* ——— AJAX loading overlay ——— */
@keyframes natella-pg-spin {
	to {
		transform: rotate(360deg);
	}
}

.natella-page-group-ajax-overlay {
	position: absolute;
	inset: 0;
	z-index: 8;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgb(254 254 254 / 0.78);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.38s ease;
}

.natella-page-group-ajax-overlay.is-visible {
	opacity: 1;
}

.natella-page-group-ajax-overlay .natella-page-group-ajax-spinner {
	display: block;
	width: 1.35rem;
	height: 1.35rem;
	border: 2px solid var(--natella-color-border, #cfc9c8);
	border-top-color: var(--natella-color-text, #2f2e2e);
	border-radius: 50%;
	animation: natella-pg-spin 0.75s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
	.natella-page-group-ajax-overlay .natella-page-group-ajax-spinner {
		animation: none;
		border-top-color: var(--natella-color-border, #cfc9c8);
	}
}