/* ----------------------------------------------------------------
   "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;
	display: inline-block;
}

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

.theme-banner-description p, 
.theme-banner-description a {
    color: #fff;
    font-size: 0.85rem;
}

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

.theme-banner span.cg_product_count {
    font-size: 8px;
    margin-top: 0;
    display: inline-block;
    position: absolute;
    padding: 4px 5px;
    background: #fff;
    color: #111;
    border-radius: 5px;
    line-height: 1;
    margin-left: 5px;
}

.shop-cat-description ul {
    padding:0;
    margin:30px;
}

.shop-cat-description a {
    font-weight: 600;
}

.cg-cats .shop-category-card .shop-category-card__name {
    display: block;
    margin-top: 0;
    font-size: 0.8rem;
    padding: 0.5rem;
    background: rgba(255,255,255,0.15);
    color: #fff;
    border-radius: 10px;
    border: 0;
    font-weight: 500;
    backdrop-filter: blur(10px);
}

.cg-cats .shop-category-card:hover .shop-category-card__name {
    background: rgba(255,255,255,1);
    color: #111;
}

/* 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: sticky;
		top: 70px; /* .site-header height */
		left: 0;
		height: calc(100vh - 70px);
		width: calc((100vh - 30px) * 9 / 16);
		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);
	}
	
	body.has-cg-top-bar.cg-top-bar-hidden .theme-banner {
        top: 70px;
        height: calc(100vh - 70px);
    }

	.theme-products-col {
		margin-left: 1rem;
	}

	body.has-cg-top-bar .theme-products-col {
		margin-left: 1rem;
	}
}

/* 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%;
	}
}