/* ==========================================================================
   Bloomazz — Shop / category archive
   A full-bleed photographic banner (name + the category's own image,
   nothing else) followed by the product grid, with the long-form
   category description rendered once at the very end of the page (see
   .bz-shop-footer-description, and bloomazz_shop_render_description_footer()
   in inc/shop.php). Categories with no image fall back to the older
   compact text-only banner — see .bz-shop-banner--plain below.
   ========================================================================== */

/* ==========================================================================
   Banner — full-bleed photo, name set directly over it. The shop's own
   photography is shot on a consistent warm, light (linen/cream) backdrop
   — see --bz-linen — so the type sits in ink rather than white-on-scrim:
   a dark scrim would fight the photography instead of sitting inside it,
   and ink reads clean straight over a light backdrop. The soft cream
   wash at the base of the photo is there for legibility on whatever part
   of the shot the text lands on, not to darken the image.

   Desktop and mobile can show different photos — see the <picture>
   element in woocommerce/loop/header.php — because a wide shot built for
   the desktop banner rarely re-crops into something worth looking at on
   a phone. Each breakpoint below sizes the banner for whichever image is
   actually likely to be showing at that width, not a scaled-down version
   of the same desktop number. */
/* Full-bleed band — same width:100vw breakout used for .bz-reviews and
   .bz-pdp-trust elsewhere: reaches the viewport edges regardless of the
   normal page width (it's a sibling of ul.products, which lives inside
   the theme's own .container — see inc/woocommerce.php). */
.bz-shop-banner {
	width: 100vw;
	position: relative;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
	margin-bottom: 2.75rem;
}

/* Photo variant */
.bz-shop-banner--photo {
	position: relative;
	overflow: hidden;
	min-height: clamp(340px, 42vh, 460px);
	display: flex;
	align-items: flex-end;
}
.bz-shop-banner-media {
	position: absolute;
	inset: 0;
	z-index: 0;
}
.bz-shop-banner-media picture {
	display: block;
	width: 100%;
	height: 100%;
}
.bz-shop-banner-media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}
.bz-shop-banner--photo .bz-shop-banner-copy {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: var(--bz-container);
	margin: 0 auto;
	padding: 0 20px 2.75rem;
}

.bz-shop-banner-crumb .woocommerce-breadcrumb {
	display: block;
	margin: 0 0 1.25rem;
	font-size: 0.74rem;
	letter-spacing: 0.02em;
}
.bz-shop-banner--photo .bz-shop-banner-crumb .woocommerce-breadcrumb {
	color: #6f6b7a;
}
.bz-shop-banner--photo .bz-shop-banner-crumb .woocommerce-breadcrumb a {
	color: #6f6b7a;
	transition: color 0.15s ease;
}
.bz-shop-banner--photo .bz-shop-banner-crumb .woocommerce-breadcrumb a:hover {
	color: var(--bz-lavender-deep);
}

.bz-shop-banner--photo .bz-shop-banner-title {
	font-family: var(--bz-font-display);
	font-style: italic;
	font-weight: 400;
	font-size: clamp(2.6rem, 5.2vw, 4.25rem);
	line-height: 1.05;
	color: var(--bz-ink);
	max-width: 14ch;
	margin: 0;
}

/* Plain variant (no category image set): copy only, contained — nothing
   to build a full-bleed moment around. */
.bz-shop-banner--plain {
	background: var(--bz-linen);
}
.bz-shop-banner--plain .bz-shop-banner-copy {
	max-width: var(--bz-container);
	margin: 0 auto;
	padding: 2.5rem 20px 3rem;
}
.bz-shop-banner--plain .bz-shop-banner-crumb .woocommerce-breadcrumb {
	color: #8a8694;
}
.bz-shop-banner--plain .bz-shop-banner-crumb .woocommerce-breadcrumb a {
	color: #8a8694;
}
.bz-shop-banner--plain .bz-shop-banner-crumb .woocommerce-breadcrumb a:hover {
	color: var(--bz-lavender-deep);
}
.bz-shop-banner--plain .bz-shop-banner-title {
	font-family: var(--bz-font-display);
	font-style: italic;
	font-weight: 400;
	font-size: clamp(2rem, 3.4vw, 2.6rem);
	color: var(--bz-ink);
	margin: 0.2rem 0 0;
}

/* ==========================================================================
   Footer description — the category's long-form copy, moved out of the
   banner (see inc/shop.php) so the banner itself can stay to just the
   name and the image. Sits after the product grid/pagination, still
   inside .container.
   ========================================================================== */
.bz-shop-footer-description {
	max-width: 68ch;
	margin: 0 auto 3rem;
	padding-top: 2.5rem;
	border-top: 1px solid var(--bz-border);
	color: #6f6b7a;
	line-height: 1.8;
}
.bz-shop-footer-description-heading {
	font-size: clamp(1.5rem, 2.1vw, 1.9rem);
	color: var(--bz-ink);
	margin: 0 0 0.9rem;
}
.bz-shop-footer-description > *:last-child {
	margin-bottom: 0;
}

/* ==========================================================================
   Result count + sort bar
   ========================================================================== */
.bz-shop-utility-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 1rem;
	padding-bottom: 1.5rem;
	margin-bottom: 2.5rem;
	border-bottom: 1px solid var(--bz-border);
}
.woocommerce-result-count {
	margin: 0;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #8a8694;
}
.woocommerce-ordering {
	margin: 0;
	float: none !important;
}
.woocommerce-ordering select.orderby {
	appearance: none;
	border: 1px solid var(--bz-border);
	border-radius: var(--bz-radius);
	padding: 0.6em 2.2em 0.6em 1em;
	font-family: var(--bz-font-body);
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--bz-ink);
	background: var(--bz-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23211f2e' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 0.9em center;
	cursor: pointer;
}
.woocommerce-ordering select.orderby:focus {
	outline: none;
	border-color: var(--bz-lavender);
}

/* ==========================================================================
   Product grid — same rhythm as the homepage shelves / PDP upsells
   (.bz-product-grid in main.css), applied directly to WooCommerce's own
   ul.products since the shop/category loop doesn't go through that
   component wrapper. Already sits inside the theme's .container (see
   inc/woocommerce.php), so no extra max-width/padding needed here.
   ========================================================================== */
.woocommerce-page .container ul.products {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1.75rem 1.5rem;
	list-style: none;
	margin: 0 0 3rem;
	padding: 0;
}
/* WooCommerce's own ul.products::before/::after are a float-era clearfix
   that becomes a phantom grid item once display:grid is applied — same
   bug fixed the same way for the upsells grid and My Account dashboard
   elsewhere in this theme. */
.woocommerce-page .container ul.products::before,
.woocommerce-page .container ul.products::after {
	content: none;
}

/* ==========================================================================
   Pagination
   ========================================================================== */
.woocommerce-pagination {
	margin: 1rem 0 3rem;
}
.woocommerce-pagination ul.page-numbers {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
}
.woocommerce-pagination .page-numbers li {
	margin: 0;
}
.woocommerce-pagination .page-numbers a,
.woocommerce-pagination .page-numbers span {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 38px;
	height: 38px;
	padding: 0 0.4em;
	border: 1px solid var(--bz-border);
	border-radius: var(--bz-radius);
	font-size: 0.82rem;
	font-weight: 700;
	color: var(--bz-ink);
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.woocommerce-pagination .page-numbers a:hover {
	border-color: var(--bz-lavender);
}
.woocommerce-pagination .page-numbers .current {
	background: var(--bz-ink);
	border-color: var(--bz-ink);
	color: var(--bz-white);
}
.woocommerce-pagination .page-numbers .dots {
	border-color: transparent;
	color: #8a8694;
}

/* ==========================================================================
   No products found
   ========================================================================== */
.woocommerce-info {
	list-style: none;
	margin: 0 0 3rem;
	padding: 1.4em 1.6em !important;
	border-radius: var(--bz-radius);
	background: var(--bz-linen);
	color: var(--bz-ink);
	border-top: 0 !important;
	border-left: 3px solid var(--bz-lavender);
}
.woocommerce-info::before {
	display: none !important;
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1024px) {
	.woocommerce-page .container ul.products {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 780px) {
	.bz-shop-banner {
		margin-bottom: 2rem;
	}
	.bz-shop-banner--photo {
		min-height: clamp(460px, 82vh, 640px);
	}
	.bz-shop-banner--photo .bz-shop-banner-copy {
		padding: 0 20px 2rem;
	}
	.bz-shop-banner--plain .bz-shop-banner-copy {
		padding: 1.75rem 20px 2.25rem;
	}
	.bz-shop-utility-bar {
		padding-bottom: 1.25rem;
		margin-bottom: 1.75rem;
	}
	.bz-shop-footer-description {
		padding-top: 2rem;
		margin-bottom: 2.25rem;
	}
}

@media (max-width: 560px) {
	.woocommerce-page .container ul.products {
		grid-template-columns: repeat(2, 1fr);
		gap: 1.25rem 0.9rem;
	}
}