/* ----------------------------------------------------------------
   "Theme" taxonomy archive (/theme/{slug}/)
   Full-height fixed 9:16 banner on the left, no max-width container,
   product grid fills the remaining width.
---------------------------------------------------------------- */

.theme-taxonomy-layout {
	display: flex;
	align-items: flex-start;
	width: 100%;
}

.theme-banner-inner {
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
	background: #000000;
}

.theme-banner-slider {
	position: absolute;
	inset: 0;
}

.theme-banner-slide {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	opacity: 0;
	transition: opacity 1s ease-in-out;
}

.theme-banner-slide.is-active {
	opacity: 1;
}

.theme-banner-gradient {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 55%;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0) 100%);
	pointer-events: none;
}

.theme-banner-content {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 1.75rem;
	color: #ffffff;
	z-index: 2;
}

.theme-banner-title {
	font-size: 1.8rem;
	line-height: 1.2;
	margin: 0 0 0.5rem 0;
	color: #ffffff;
}

.theme-banner-description {
	font-size: 0.9rem;
	line-height: 1.5;
	margin: 0;
	opacity: 0.9;
}

.theme-products-col {
	flex: 1;
	min-width: 0;
}

/* Desktop: banner is truly fixed — full viewport height below the header,
   pinned to the left edge — and stays put while the grid scrolls. */
@media (min-width: 993px) {
	.theme-banner {
		position: fixed;
		top: 70px; /* .site-header height */
		left: 0;
		height: calc(100vh - 70px);
		aspect-ratio: 9 / 16;
		z-index: 500; /* below .site-header (999) / #cg-top-bar (1000) */
	}

	body.has-cg-top-bar .theme-banner {
		top: 100px; /* header pushed down 30px by the announcement bar */
		height: calc(100vh - 100px);
	}

	.theme-products-col {
		margin-left: calc((100vh - 30px) * 9 / 16);
	}

	body.has-cg-top-bar .theme-products-col {
		margin-left: calc((100vh - 30px) * 9 / 16);
	}
}

/* Mobile: banner moves to the top, full width, static (no fixed/sticky),
   products stack below it. The banner (now back in normal flow) needs the
   header clearance instead of <main>, which the global `main{margin-top}`
   rule would otherwise add a second time. */
@media (max-width: 992px) {
	.theme-taxonomy-layout {
		flex-direction: column;
	}

	.theme-banner {
		position: static;
		width: 100%;
		aspect-ratio: 9 / 16;
		margin-top: 0px;
	}

	body.has-cg-top-bar .theme-banner {
		margin-top: 100px;
	}

	.theme-products-col {
		margin-left: 0;
		margin-top: 0 !important;
		width: 100%;
	}
}