.collection-default-page {
	display: flex;
	flex-direction: column;
	gap: clamp(var(--size-20), 4vw, var(--size-40));
	padding-bottom: clamp(var(--size-40), 5vw, var(--size-100));
}

.collection-default {
	display: flex;
	flex-direction: column;
	gap: var(--size-40);

	& .collection-header {
		margin-top: clamp(4rem, 4vw, 8rem);
		margin-bottom: clamp(2rem, 3vw, 3.5rem);
		text-align: center;
	}

	& .collection-title {
		font-size: clamp(2.3rem, 10vw, 8rem);
		font-weight: 500;
		line-height: 0.8;
		text-transform: uppercase;
		letter-spacing: -0.05rem;
		margin: 0 auto 2rem;
		width: fit-content;

		& .collection-title__count {
			font-size: 0.6em;
			position: relative;
			top: -2.5rem;
		}
	}

	& .collection-detail-desc {
		max-width: 62rem;
		margin: 0 auto;
		padding-inline: 1rem;
		font-size: clamp(var(--size-14), 2vw, var(--size-18));
		line-height: 1.4;
		font-weight: 400;
		text-transform: none;
		color: var(--color-text-secondary);
	}

	& .collection-default__banner {
		& .banner__image {
			& .collection-default__hero-image {
				display: block;
				width: 100%;
				height: 100%;
				object-fit: cover;
				position: absolute;
				inset: 0;
			}
		}

		& .btns-wrap {
			min-width: min(100%, 24rem);
		}
	}

	& .collection-default__products {
		& .products-wrap {
			display: grid;
			margin-top: 0;
			grid-template-columns: repeat(3, 1fr);

			& .product {
				width: 100%;
			}
		}
	}

	& .collection-default__split {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 4px;
		min-height: clamp(28rem, 50vw, 61rem);

		&--both {
			& .collection-default__split-image,
			& .collection-default__split-content {
				flex: 0 0 calc(50% - 2px);
				max-width: 50%;
			}
		}

		&--image-only {
			& .collection-default__split-image {
				flex: 1 1 100%;
				width: 100%;
				max-width: none;
			}
		}

		&--text-only {
			min-height: auto;

			& .collection-default__split-content {
				flex: 1 1 100%;
				width: 100%;
				max-width: none;
			}
		}
	}

	& .collection-default__split-image {


		& img {
			display: block;
			width: 100%;
			height: 100%;
			min-height: clamp(20rem, 50vw, 61rem);
			object-fit: cover;
		}
	}

	& .collection-default__split-content {
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		padding: clamp(2rem, 5vw, 5rem);
		text-align: center;
		--collection-split-bg: #A89B8C;
		background-color: var(--collection-split-bg);
	}

	& .collection-default__text-content {
		margin-inline: auto;

		& > :first-child {
			margin-top: 0;
		}

		& > :last-child {
			margin-bottom: 0;
		}

		& h3 {
			margin: 0 0 clamp(1.5rem, 3vw, 2.5rem);
			font-size: clamp(var(--size-18), 2.5vw, var(--size-24));
			font-weight: 500;
			line-height: 1.3;
		}

		& p,
		& li {
			font-size: clamp(var(--size-14), 1.8vw, var(--size-18));
			line-height: 1.5;
		}

		& p + p,
		& li + li,
		& h3 + p,
		& h3 + ul {
			margin-top: clamp(1rem, 2vw, 1.25rem);
		}

		& ul {
			margin: 0;
			padding: 0;
			list-style: none;
		}
	}

	& .collection-default__text-content--light {
		color: var(--color-white);

		& h3,
		& p,
		& li {
			color: inherit;
		}
	}

	& .collection-default__text-content--dark {
		& h3 {
			text-transform: uppercase;
			letter-spacing: 0.02em;
		}

		& p,
		& li {
			color: var(--color-text-primary);
		}
	}

	& .collection-default__gallery {
		& .banner__image {
			height: 100%;

			& img {
				display: block;
				width: 100%;
				height: 100%;
				object-fit: cover;
				position: absolute;
				inset: 0;
			}
		}
	}

	& .collection-default__text-section {
		padding-inline: 1rem;
		text-align: center;
	}
	.catalog.collection-default__catalog {
		grid-template-columns: repeat(3, 1fr);
	}
	
	
	@media (width < 1100px) {
		& .collection-title {
			& .collection-title__count {
				top: 0;
			}
		}
	}

	@media (width < 768px) {
		& .collection-default__banner {
			& .banner.banner--full {
				min-height: 28rem;
			}
		}

		& .collection-default__split {
			grid-template-columns: 1fr;
			min-height: auto;
		}

		& .collection-default__split--both {
			& .collection-default__split-image,
			& .collection-default__split-content {
				flex-basis: auto;
				max-width: none;
				width: 100%;
			}
		}

		& .collection-default__split-image {
			& img {
				min-height: 20rem;
			}
		}

		& .collection-default__gallery {
			& .banner {
				flex: 0 0 100%;
				min-height: 20rem;
			}
		}
		& .collection-default__products {
			& .products-wrap {
				grid-template-columns: 1fr;
			}
		}
		.catalog.collection-default__catalog {
			grid-template-columns: repeat(2, 50%);
		}
	}
}