/* ==========================================================================
   Mandala Bloom — Shop Page Styles
   100wardeh-inspired: category tabs, sorting, filters, clean grid.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Shop Controls — tabs on top, count + sorting in a row below
   -------------------------------------------------------------------------- */

/* Result count + sorting on one line */
.woocommerce .woocommerce-result-count,
.woocommerce-page .woocommerce-result-count {
	font-family: var(--mb-font-body);
	font-size: 0.8rem;
	color: var(--mb-text-muted);
	text-transform: none;
	letter-spacing: 0;
	margin: 0;
	line-height: 1;
	display: flex;
	align-items: center;
}

.woocommerce .woocommerce-ordering {
	margin: 0;
}

/* Sorting dropdown — clean, matches brand */
.woocommerce .woocommerce-ordering select,
.woocommerce-page .woocommerce-ordering select {
	border: 1px solid var(--mb-border) !important;
	border-radius: 8px !important;
	padding: 0.45rem 2.2rem 0.45rem 0.85rem !important;
	font-family: var(--mb-font-body) !important;
	font-size: 0.8rem !important;
	font-weight: 500;
	color: var(--mb-text-dark) !important;
	background-color: var(--mb-white) !important;
	height: auto !important;
	appearance: none !important;
	-webkit-appearance: none !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23666' d='M6 8L0 0h12z'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right 0.75rem center !important;
	box-shadow: var(--mb-shadow-sm);
	transition: border-color var(--mb-duration) var(--mb-ease),
	            box-shadow var(--mb-duration) var(--mb-ease);
	cursor: pointer;
}

.woocommerce .woocommerce-ordering select:hover {
	border-color: var(--mb-gold) !important;
}

.woocommerce .woocommerce-ordering select:focus {
	border-color: var(--mb-gold) !important;
	box-shadow: 0 0 0 3px var(--mb-gold-subtle) !important;
	outline: none;
}

/* Sorting wrapper — proper stacking on mobile */
.woocommerce .woocommerce-ordering {
	position: relative;
	z-index: 10;
}

@media (max-width: 768px) {
	.woocommerce .woocommerce-ordering select,
	.woocommerce-page .woocommerce-ordering select {
		font-size: 0.85rem !important;
		padding: 0.6rem 2.5rem 0.6rem 1rem !important;
		width: 100%;
		color-scheme: light;
	}
}

/* Force light appearance on all select dropdowns */
.woocommerce .woocommerce-ordering select,
.woocommerce-page .woocommerce-ordering select,
select.orderby {
	color-scheme: light !important;
	background-color: var(--mb-white) !important;
	color: var(--mb-text-dark) !important;
}


/* --------------------------------------------------------------------------
   2. Category Tabs — 100wardeh-style pill buttons
   -------------------------------------------------------------------------- */

/* Override Blocksy's .woo-listing-top to stack tabs above controls */
.woo-listing-top {
	flex-wrap: wrap !important;
}

.mb-category-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	width: 100%;
	margin-block-end: 0;
	flex: 0 0 100%;
}

.mb-category-tab {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.45rem 0.9rem;
	font-family: var(--mb-font-body);
	font-size: 0.75rem;
	font-weight: 500;
	color: var(--mb-text-dark);
	background-color: var(--mb-white);
	border: 1px solid var(--mb-border);
	border-radius: 6px;
	text-decoration: none;
	white-space: nowrap;
	transition: all 150ms var(--mb-ease);
	box-shadow: var(--mb-shadow-sm);
	cursor: pointer;
}

.mb-category-tab:hover {
	border-color: var(--mb-gold);
	color: var(--mb-gold);
	box-shadow: var(--mb-shadow-md);
	transform: translateY(-1px);
}

.mb-category-tab:active {
	transform: translateY(0);
	box-shadow: none;
}

/* Active tab */
.mb-category-tab--active,
.mb-category-tab--active:hover {
	background-color: var(--mb-gold);
	color: var(--mb-white);
	border-color: var(--mb-gold);
	box-shadow: none;
	transform: none;
}

/* Grid transition during AJAX filter */
.woocommerce ul.products {
	transition: opacity 0.2s ease;
}


/* --------------------------------------------------------------------------
   2b. Shop Controls Row — count left, sort right
   -------------------------------------------------------------------------- */

.mb-shop-controls {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	flex: 0 0 100%;
	padding-block: 0.75rem;
	margin-block-start: 0.75rem;
	border-top: 1px solid var(--mb-border);
}

/* Override WooCommerce default float layout */
.mb-shop-controls .woocommerce-result-count {
	float: none !important;
	margin: 0 !important;
}

.mb-shop-controls .woocommerce-ordering {
	float: none !important;
	margin: 0 !important;
}

/* Show result count on mobile (Blocksy hides it with ct-hidden-sm) */
.mb-shop-controls .woocommerce-result-count.ct-hidden-sm {
	display: flex !important;
}

/* Sort dropdown — push to end, result count stays at start */
.mb-shop-controls .woocommerce-ordering {
	margin-inline-start: auto !important;
	order: 2;
}

.mb-shop-controls .woocommerce-result-count {
	order: 1;
}

@media (max-width: 480px) {
	.mb-shop-controls {
		flex-direction: row;
		align-items: center;
		gap: 0.5rem;
	}
}

/* --------------------------------------------------------------------------
   Custom Sort Dropdown
   -------------------------------------------------------------------------- */

.mb-sort-dropdown {
	position: relative;
	display: inline-block;
}

.mb-sort-dropdown__trigger {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 1rem;
	border: 1px solid var(--mb-border);
	border-radius: 8px;
	background: var(--mb-white);
	font-family: var(--mb-font-body);
	font-size: var(--mb-text-sm);
	font-weight: 500;
	color: var(--mb-text-dark);
	cursor: pointer;
	transition: border-color 0.2s ease;
	white-space: nowrap;
}

.mb-sort-dropdown__trigger:hover {
	border-color: var(--mb-gold);
}

.mb-sort-dropdown__trigger svg {
	transition: transform 0.2s ease;
}

.mb-sort-dropdown.is-open .mb-sort-dropdown__trigger svg {
	transform: rotate(180deg);
}

.mb-sort-dropdown__list {
	display: none;
	position: absolute;
	top: calc(100% + 4px);
	inset-inline-end: 0;
	min-width: 220px;
	background: var(--mb-white);
	border: 1px solid var(--mb-border);
	border-radius: 10px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
	list-style: none;
	padding: 0.35rem 0;
	margin: 0;
	z-index: 100;
	overflow: hidden;
}

.mb-sort-dropdown.is-open .mb-sort-dropdown__list {
	display: block;
}

.mb-sort-dropdown__item {
	padding: 0.6rem 1rem;
	font-size: var(--mb-text-sm);
	color: var(--mb-text-body);
	cursor: pointer;
	transition: background 0.15s ease;
}

.mb-sort-dropdown__item:hover {
	background: var(--mb-cream);
}

.mb-sort-dropdown__item--active {
	color: var(--mb-gold);
	font-weight: 600;
}

/* Hide Blocksy's mobile sort icon since we have our own dropdown */
.woocommerce-ordering .ct-sort-icon {
	display: none !important;
}


/* "from $X" price label on product cards */
.price-from {
	font-size: 0.85em;
	font-weight: 400;
	color: var(--mb-text-muted);
	text-transform: lowercase;
}

/* RTL: price line reads naturally right-to-left */
[dir="rtl"] .price:has(.price-from) {
	direction: rtl;
	unicode-bidi: bidi-override;
}


/* --------------------------------------------------------------------------
   3. Active Filters Bar
   -------------------------------------------------------------------------- */

.woocommerce .woocommerce-widget-layered-nav-dropdown,
.wc-block-active-filters {
	margin-block-end: var(--mb-space-md);
}

.wc-block-active-filters__clear-all {
	font-size: 0.75rem;
	color: var(--mb-text-muted);
}

.wc-block-active-filters__clear-all:hover {
	color: var(--mb-gold);
}


/* --------------------------------------------------------------------------
   4. Price Filter — clean slider style
   -------------------------------------------------------------------------- */

.wc-block-price-filter {
	padding: 0.75rem 1rem;
	background-color: rgba(0, 0, 0, 0.02);
	border-radius: 8px;
	margin-block-end: var(--mb-space-md);
}

.wc-block-price-filter__range-input-wrapper {
	margin-block: 0.5rem;
}

/* Slider track */
.wc-block-price-filter .wc-block-price-filter__range-input-progress {
	background-color: var(--mb-gold) !important;
}

/* Slider thumbs */
.wc-block-price-filter .wc-block-price-filter__range-input::-webkit-slider-thumb {
	background-color: var(--mb-white);
	border: 2px solid var(--mb-gold);
	width: 18px;
	height: 18px;
	border-radius: 50%;
}

.wc-block-price-filter .wc-block-price-filter__range-input::-moz-range-thumb {
	background-color: var(--mb-white);
	border: 2px solid var(--mb-gold);
	width: 18px;
	height: 18px;
	border-radius: 50%;
}

/* Price text labels */
.wc-block-price-filter .wc-block-price-filter__range-text {
	font-size: 0.75rem;
	color: var(--mb-text-muted);
}


/* --------------------------------------------------------------------------
   4b. Tag Page — "Browse All" button
   -------------------------------------------------------------------------- */

.mb-tag-back-to-shop {
	margin-block-end: var(--mb-space-md);
}

.mb-tag-back-to-shop .mb-btn {
	font-size: var(--mb-text-xs);
	padding: 0.5rem 1rem;
	border: 1.5px solid var(--mb-border);
	border-radius: var(--mb-radius-md);
	color: var(--mb-text-dark);
	background: var(--mb-white);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	transition: all 150ms var(--mb-ease);
}

.mb-tag-back-to-shop .mb-btn:hover {
	border-color: var(--mb-gold);
	color: var(--mb-gold);
}


/* --------------------------------------------------------------------------
   5. Shop Page Title — hide it (managed via category tabs instead)
   -------------------------------------------------------------------------- */

/* Hide the archive title + description banner */
.woocommerce-products-header,
.ct-hero-section[class*="product"],
.woocommerce .ct-page-title,
body.post-type-archive-product .hero-section,
body.post-type-archive-product .entry-header,
body.post-type-archive-product .ct-hero-section,
body.tax-product_cat .ct-hero-section,
body.tax-product_tag .ct-hero-section {
	display: none !important;
}


/* --------------------------------------------------------------------------
   6. Pagination — clean, minimal
   -------------------------------------------------------------------------- */

.woocommerce nav.woocommerce-pagination {
	margin-block-start: var(--mb-space-2xl);
	text-align: center;
}

.woocommerce nav.woocommerce-pagination ul {
	display: inline-flex;
	gap: 0.25rem;
	border: none;
}

.woocommerce nav.woocommerce-pagination ul li {
	border: none;
}

.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2rem;
	height: 2rem;
	padding: 0 0.5rem;
	font-family: var(--mb-font-body);
	font-size: 0.8rem;
	font-weight: 500;
	color: var(--mb-text-dark);
	border: 1px solid var(--mb-border);
	border-radius: 6px;
	background: var(--mb-white);
	text-decoration: none;
	transition: all var(--mb-duration) var(--mb-ease);
	box-shadow: var(--mb-shadow-sm);
}

.woocommerce nav.woocommerce-pagination ul li a:hover {
	border-color: var(--mb-gold);
	color: var(--mb-gold);
	transform: translateY(-1px);
	box-shadow: var(--mb-shadow-md);
}

.woocommerce nav.woocommerce-pagination ul li span.current {
	background-color: var(--mb-gold);
	color: var(--mb-white);
	border-color: var(--mb-gold);
}


/* --------------------------------------------------------------------------
   7. Breadcrumbs — subtle
   -------------------------------------------------------------------------- */

.woocommerce .woocommerce-breadcrumb {
	font-size: 0.75rem;
	color: var(--mb-text-muted);
	margin-block-end: var(--mb-space-lg);
}

.woocommerce .woocommerce-breadcrumb a {
	color: var(--mb-text-muted);
}

.woocommerce .woocommerce-breadcrumb a:hover {
	color: var(--mb-gold);
}


/* --------------------------------------------------------------------------
   8. "No products found" message
   -------------------------------------------------------------------------- */

.woocommerce-info {
	background-color: var(--mb-cream);
	border-top-color: var(--mb-gold);
	color: var(--mb-text-body);
	font-family: var(--mb-font-body);
	font-size: var(--mb-text-sm);
	border-radius: var(--mb-radius-md);
}