/**
 * Maven Home - Product category & shop archive styles
 * Banner, header, product grid (same card style as featured products).
 */

/* Main content area - constrain width */
.maven-shop-page #primary,
.maven-shop-page .woocommerce {
	max-width: none;
}

/* Breadcrumbs - match product page styling */
.maven-shop-page .woocommerce-breadcrumb {
	font-size: 0.875rem;
	color: var(--color-text-muted);
	margin-top: 4rem;
	margin-bottom: 0.75rem;
	padding-left: 5%;
	padding-right: 0;
}

.maven-shop-page .woocommerce-breadcrumb a {
	color: var(--color-primary);
	text-decoration: none;
}

.maven-shop-page .woocommerce-breadcrumb a:hover {
	text-decoration: underline;
}

/* ==========================================================================
   Category banner - full width, decorative only
   ========================================================================== */

.maven-shop-page .maven-cat-banner {
	width: 100% !important;
	aspect-ratio: 16 / 5; /* 1920x600 */
	align-self: flex-start !important;
	background-size: cover !important;
	background-position: center !important;
	background-color: var(--color-bg-alt);
	overflow: hidden;
}

/* ==========================================================================
   Category header - title + description
   ========================================================================== */

.maven-cat-header {
	text-align: center;
	padding: 3rem 5% 2rem;
	max-width: 720px;
	margin: 0 auto;
}

.maven-cat-header__title {
	font-size: clamp(1.75rem, 3vw, 2.25rem);
	font-weight: 500;
	margin: 0 0 0.75rem;
	color: var(--color-primary);
}

.maven-cat-header__desc {
	font-size: 1rem;
	line-height: 1.6;
	color: var(--color-text-muted);
	margin: 20px;
}

.maven-cat-header__desc p:last-child {
	margin-bottom: 0;
}

/* ==========================================================================
   Product grid - uniform cards (no masonry)
   ========================================================================== */

.maven-category-grid {
	display: grid !important;
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	gap: 28px;
	max-width: 1400px;
	margin: 0 auto 3rem !important;
	padding: 0 5%;
	list-style: none !important;
	width: 100%;
	justify-content: start;
}

/* Remove WooCommerce clearfix pseudo-elements - they become grid items and push the product to the second column */
.maven-category-grid::before,
.maven-category-grid::after {
	display: none !important;
}

/* Prevent flex parent from centering the grid */
.maven-shop-page .woocommerce .products,
.maven-shop-page ul.products.maven-category-grid {
	align-self: stretch;
	width: 100%;
}

/* Override WooCommerce float/width so our grid controls layout */
.maven-category-grid li.product {
	float: none !important;
	width: auto !important;
	margin: 0 !important;
}

.maven-category-grid .maven-prod-card-wrap {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

.maven-category-grid .maven-prod-card {
	display: block;
	border-radius: 20px;
	overflow: hidden;
	text-decoration: none !important;
	background: var(--color-bg-alt);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.maven-category-grid .maven-prod-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 20px 40px rgba(26, 26, 26, 0.12);
}

/* Square image container - padding-bottom trick + absolute img to override WooCommerce's height:auto */
.maven-category-grid .maven-prod-card__img {
	position: relative;
	width: 100%;
	padding-bottom: 100%;
	background-color: var(--color-bg-alt);
	overflow: hidden;
}

.maven-category-grid .maven-prod-card__img img {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	display: block !important;
}

.maven-category-grid .maven-prod-card__content {
	padding: 22px;
}

.maven-category-grid .maven-prod-card__title {
	font-size: 1.05rem;
	font-weight: 500;
	margin: 0 0 0.35rem;
	color: var(--color-primary);
	line-height: 1.3;
}

.maven-category-grid .maven-prod-card__price {
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--color-accent);
}

.maven-category-grid .maven-prod-card__price del {
	color: var(--color-text-muted);
	font-weight: 400;
}

/* Subcategory filter bar - horizontal pills above products */
.maven-subcat-filter {
	max-width: 1400px;
	margin: 0 auto 1.5rem;
	padding: 0 5%;
}

.maven-subcat-filter__list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.maven-subcat-filter__item {
	margin: 0;
}

.maven-subcat-filter__link {
	display: inline-block;
	padding: 0.5rem 1rem;
	font-size: 0.9rem;
	font-weight: 500;
	color: var(--color-primary);
	background-color: var(--color-bg-alt);
	border: 1px solid rgba(26, 26, 26, 0.12);
	border-radius: 8px;
	text-decoration: none;
	transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

.maven-subcat-filter__link:hover {
	color: var(--color-accent);
	border-color: var(--color-accent);
}

.maven-subcat-filter__link--current {
	color: var(--color-accent);
	background-color: rgba(212, 116, 92, 0.08);
	border-color: var(--color-accent);
}

/* Shop toolbar - result count + ordering (matches grid layout) */
.maven-shop-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	max-width: 1400px;
	margin: 0 auto 1.5rem;
	padding: 0 5%;
}

.maven-shop-toolbar .woocommerce-result-count {
	float: none;
	margin: 0;
	font-size: 0.9rem;
	color: var(--color-text-muted);
}

.maven-shop-toolbar .woocommerce-ordering {
	float: none;
	margin: 0;
}

.maven-shop-toolbar .woocommerce-ordering .orderby {
	padding: 0.5rem 2rem 0.5rem 0.75rem;
	font-size: 0.9rem;
	font-family: inherit;
	color: var(--color-primary);
	background-color: var(--color-bg-alt);
	border: 1px solid rgba(26, 26, 26, 0.15);
	border-radius: 8px;
	cursor: pointer;
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%231A1A1A' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.75rem center;
}

.maven-shop-toolbar .woocommerce-ordering .orderby:focus {
	outline: 2px solid var(--color-accent);
	outline-offset: 2px;
}

.maven-shop-page .woocommerce .products {
	clear: both;
}

/* ==========================================================================
   Pagination - category, shop, search results
   ========================================================================== */

.woocommerce-pagination,
.navigation.pagination {
	margin-top: 2rem !important;
	margin-bottom: 3rem !important;
	padding: 0 5%;
	display: flex !important;
	justify-content: center !important;
	border: none !important;
	outline: none !important;
	box-shadow: none !important;
}

.woocommerce-pagination ul.page-numbers,
.navigation.pagination .nav-links {
	display: flex !important;
	align-items: center !important;
	gap: 0.4rem !important;
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
	border: none !important;
	outline: none !important;
	box-shadow: none !important;
}

.woocommerce-pagination ul.page-numbers li {
	margin: 0 !important;
	padding: 0 !important;
	border: none !important;
	outline: none !important;
	box-shadow: none !important;
	background: transparent !important;
	background-color: transparent !important;
}

/* Suppress block theme hover background on pagination containers */
.woocommerce-pagination:hover,
.navigation.pagination:hover {
	background: transparent !important;
	background-color: transparent !important;
}

.woocommerce-pagination ul.page-numbers:hover,
.navigation.pagination .nav-links:hover {
	background: transparent !important;
	background-color: transparent !important;
}

/* Base page number - subtle outlined pill (scoped to a/span only, not the ul) */
.woocommerce-pagination a.page-numbers,
.woocommerce-pagination span.page-numbers,
.navigation.pagination a.page-numbers,
.navigation.pagination span.page-numbers {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	min-width: 40px !important;
	height: 40px !important;
	padding: 0 0.75rem !important;
	font-size: 0.9rem !important;
	font-weight: 500 !important;
	font-family: var(--font-body) !important;
	color: var(--color-primary) !important;
	background: transparent !important;
	background-color: transparent !important;
	border: 1px solid rgba(26, 26, 26, 0.15) !important;
	border-radius: 8px !important;
	box-shadow: none !important;
	text-decoration: none !important;
	transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

/* Hover - soft warm fill (scoped to a/span only, not the ul) */
.woocommerce-pagination a.page-numbers:hover:not(.current),
.woocommerce-pagination span.page-numbers:hover:not(.current),
.navigation.pagination a.page-numbers:hover:not(.current),
.navigation.pagination span.page-numbers:hover:not(.current) {
	background: var(--color-bg-alt) !important;
	background-color: var(--color-bg-alt) !important;
	border-color: rgba(26, 26, 26, 0.35) !important;
	color: var(--color-primary) !important;
}

/* Current page - solid charcoal */
.woocommerce-pagination span.page-numbers.current,
.navigation.pagination span.page-numbers.current {
	background: var(--color-charcoal) !important;
	background-color: var(--color-charcoal) !important;
	border-color: var(--color-charcoal) !important;
	color: var(--color-white) !important;
	font-weight: 600 !important;
}

/* Prev / Next arrows */
.woocommerce-pagination a.page-numbers.next,
.woocommerce-pagination a.page-numbers.prev,
.navigation.pagination a.page-numbers.next,
.navigation.pagination a.page-numbers.prev {
	font-size: 1rem !important;
}

/* Dots (...) - no border, not interactive */
.woocommerce-pagination span.page-numbers.dots,
.navigation.pagination span.page-numbers.dots {
	border: none !important;
	background: transparent !important;
	background-color: transparent !important;
	color: var(--color-text-muted) !important;
	cursor: default !important;
	pointer-events: none !important;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

/* Tablet landscape: 3 cols, ~300px cards */
@media (max-width: 1024px) {
	.maven-shop-page #primary,
	.maven-shop-page main {
		padding-left: 1.5rem !important;
		padding-right: 1.5rem !important;
	}

	.maven-subcat-filter {
		padding-left: 1.5rem;
		padding-right: 1.5rem;
	}

	.maven-category-grid {
		grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
		padding-left: 1.5rem;
		padding-right: 1.5rem;
	}

	.maven-shop-toolbar {
		padding-left: 1.5rem;
		padding-right: 1.5rem;
	}

	.woocommerce-pagination {
		padding-left: 1.5rem;
		padding-right: 1.5rem;
	}
}

/* Tablet portrait: 2 cols, ~280px cards */
@media (max-width: 768px) {
	.maven-cat-header {
		padding: 2rem 6% 1.5rem;
	}

	.maven-shop-toolbar {
		padding-left: 1.5rem;
		padding-right: 1.5rem;
	}

	.maven-category-grid {
		grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
		gap: 20px;
		padding-left: 1.5rem;
		padding-right: 1.5rem;
	}

	.woocommerce-pagination {
		padding-left: 1.5rem;
		padding-right: 1.5rem;
	}

	.maven-category-grid .maven-prod-card__content {
		padding: 16px;
	}

	.maven-category-grid .maven-prod-card__title {
		font-size: 1rem;
	}
}

/* Mobile: single column, full width */
@media (max-width: 480px) {
	.maven-shop-page #primary,
	.maven-shop-page main {
		padding-left: 1.25rem !important;
		padding-right: 1.25rem !important;
	}

	.maven-subcat-filter {
		padding-left: 1.25rem;
		padding-right: 1.25rem;
		margin-bottom: 1rem;
	}

	.maven-subcat-filter__link {
		padding: 0.4rem 0.75rem;
		font-size: 0.85rem;
	}

	.maven-shop-toolbar {
		padding-left: 1.25rem;
		padding-right: 1.25rem;
	}

	.maven-category-grid {
		grid-template-columns: 1fr;
		gap: 16px;
		padding-left: 1.25rem;
		padding-right: 1.25rem;
	}

	.woocommerce-pagination {
		padding-left: 1.25rem;
		padding-right: 1.25rem;
	}
}