/*--------------------------------------------------------------
# Material Library — Substance-3D-style asset browser
# Loaded only on the "Material Library" page template.
--------------------------------------------------------------*/
.c4d-ml-page  {

    .c4d-ml,
    .jupiterx-main-content {
        padding-top: 0px;
        padding-bottom: 0px;
    }

 }
/* Full-bleed: neutralise the theme's boxed container on this page template.
   The template also sets container-fluid via ACF, this is the belt-and-braces. */
.c4d-ml-page .jupiterx-main-content .container,
.c4d-ml-page .jupiterx-main-content .container-fluid {
	max-width: none;
	width: 100%;
	padding-left: 0;
	padding-right: 0;
}

.c4d-ml-page .jupiterx-main-content .row {
	margin-left: 0;
	margin-right: 0;
}

.c4d-ml-page .jupiterx-primary {
	max-width: none;
	flex: 0 0 100%;
	padding-left: 0;
	padding-right: 0;
}

.c4d-ml {
	--c4d-ml-gap: 2.5rem;
	--c4d-ml-sidebar-w: 264px;
	--c4d-ml-border: var(--c4d-lines-color, #373737);
	--c4d-ml-accent: var(--e-global-color-accent, #2b6cff);

	/* Custom sort dropdown panel — tweak these to taste. Trigger reuses the
	   plain select look (transparent bg, inherited text, --c4d-ml-border). */
	--c4d-ml-menu-bg: #1a1a1a;
	--c4d-ml-menu-text: inherit;
	--c4d-ml-menu-hover-bg: rgba(255, 255, 255, 0.07);

	/* Pagination tiles — the theme's default is a light (white bg) style that
	   doesn't fit this dark page, so it's fully overridden rather than themed. */
	--c4d-ml-page-bg: #202020;
	--c4d-ml-page-border: var(--c4d-lines-color, #373737);
	--c4d-ml-page-text: #c7c7c7;
	--c4d-ml-page-text-active: #ffffff;

	width: 100%;
	padding: 0px 30px;
}

.c4d-ml__body {
	display: grid;
	grid-template-columns: calc(var(--c4d-ml-sidebar-w) + var(--c4d-ml-gap)) minmax(0, 1fr);
	gap: var(--c4d-ml-gap);
	align-items: start;
}

/*--------------------------------------------------------------
# Main column head: title + count
--------------------------------------------------------------*/
.c4d-ml__head {
	margin-bottom: 1.5rem;
    margin-top:-10px;
}

.c4d-ml__title {
	margin: 0 0 0.5rem;
}

.c4d-ml__intro {
	max-width: 60ch;
	margin-bottom: 0.5rem;
	opacity: 0.8;
}

.c4d-ml__count {
	margin: 0.35rem 0 0;
	font-size: 0.9rem;
	opacity: 0.6;
	font-variant-numeric: tabular-nums;
}

/*--------------------------------------------------------------
# Sidebar / filters
--------------------------------------------------------------*/
.c4d-ml-sidebar {
	position: sticky;
	top: 1.5rem;
	padding-top: 40px;
	padding-right: var(--c4d-ml-gap);
	border-right: 1px solid var(--c4d-lines-color, #373737);
    padding-bottom: 60px;
}

.c4d-ml-filter + .c4d-ml-filter {
	margin-top: 1.75rem;
	padding-top: 1.75rem;
	border-top: 1px solid var(--c4d-ml-border);
}

.c4d-ml-filter__title {
	margin: 0 0 0.95rem;
	font-size: 1rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.c4d-ml-filter__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.c4d-ml-filter__list--depth-2 {
	margin-left: 0.85rem;
	padding-left: 0.5rem;
	border-left: 1px solid var(--c4d-ml-border);
	overflow: hidden;
	max-height: 0;
	opacity: 0;
	transition: max-height 0.2s ease, opacity 0.2s ease;
}

.c4d-ml-filter__item.is-open > .c4d-ml-filter__list--depth-2 {
	max-height: 2000px;
	opacity: 1;
}

.c4d-ml-filter__row {
	display: flex;
	align-items: center;
}

.c4d-ml-filter__link {
	flex: 1 1 auto;
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.5rem;
	padding: 0.4rem 0.5rem;
	border-radius: 6px;
	color: inherit;
	text-decoration: none;
	line-height: 1.3;
	transition: all 0.25s ease;
    opacity: 0.5;
    border: 1px solid transparent;
}

.c4d-ml-filter__link:hover {
	opacity: 1;
    color: #FFFFFF;
    text-decoration: none;
}

.c4d-ml-filter__link.is-active {
	color: #FFFFFF;
	opacity: 1;
    border: 1px solid var(--e-global-color-accent);
}

.c4d-ml-filter__link.is-active .c4d-ml-filter__count {
	opacity: 0.85;
}

.c4d-ml-filter__count {
	flex: 0 0 auto;
	font-size: 0.8em;
	opacity: 0.55;
	font-variant-numeric: tabular-nums;
}

.c4d-ml-filter__toggle {
	flex: 0 0 auto;
	width: 28px;
	height: 28px;
	margin-left: 0.15rem;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
	color: inherit;
	position: relative;
}

.c4d-ml-filter__toggle::before {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	width: 0.5rem;
	height: 0.5rem;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
	transition: transform 0.2s ease;
	opacity: 0.6;
}

.c4d-ml-filter__item.is-open > .c4d-ml-filter__row .c4d-ml-filter__toggle::before {
	transform: translateY(2px) rotate(225deg);
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

/*--------------------------------------------------------------
# Toolbar: search + count + sort
--------------------------------------------------------------*/
.c4d-ml-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem 1rem;
	margin-bottom: 1.75rem;
}

.c4d-ml-toolbar__search {
	position: relative;
	flex: 1 1 320px;
	min-width: 200px;
}

.c4d-ml-toolbar__search input[type="search"] {
	width: 100%;
	padding: 0.6rem 2.5rem 0.6rem 0.9rem;
	border: 1px solid var(--c4d-ml-border);
	border-radius: 0px;
	background: transparent;
	color: inherit;
	font: inherit;
	line-height: 1.4;
}

.c4d-ml-toolbar__search input[type="search"]:focus {
	outline: 2px solid var(--c4d-ml-accent);
	outline-offset: 1px;
}

.c4d-ml-toolbar__search-btn {
	position: absolute;
	top: 0;
	right: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 100%;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
	color: inherit;
}

.c4d-ml-toolbar__search-icon {
	width: 1.05rem;
	height: 1.05rem;
	opacity: 0.55;
}

.c4d-ml-toolbar__search-btn:hover .c4d-ml-toolbar__search-icon {
	opacity: 0.9;
}

.c4d-ml-toolbar__sort {
	position: relative;
	flex: 0 0 auto;
	margin-left: auto;
	margin-bottom: 0;
}

/* Native <select> — visible until JS enhances (no-JS fallback), then kept in the
   form but visually hidden. */
.c4d-ml-toolbar__sort select {
	padding: 0.55rem 2rem 0.55rem 0.9rem;
	border: 1px solid var(--c4d-ml-border);
	border-radius: 0;
	background: transparent;
	color: inherit;
	font: inherit;
	cursor: pointer;
	appearance: none;
	background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
	background-position: calc(100% - 1.05rem) 55%, calc(100% - 0.7rem) 55%;
	background-size: 0.35rem 0.35rem, 0.35rem 0.35rem;
	background-repeat: no-repeat;
}

.c4d-ml-toolbar__sort select:focus {
	outline: 2px solid var(--c4d-ml-accent);
	outline-offset: 1px;
}

.c4d-ml-toolbar__sort.is-enhanced select {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: 0;
	border: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* Custom dropdown (built by JS) */
.c4d-ml-select {
	position: relative;
}

.c4d-ml-select__trigger {
	display: inline-flex;
	align-items: center;
	gap: 1.5rem;
	padding: 0.55rem 0.9rem;
	border: 1px solid var(--c4d-ml-border);
	border-radius: 0;
	background: transparent;
	color: inherit;
	font: inherit;
	line-height: 1.3;
	white-space: nowrap;
	cursor: pointer;
}

.c4d-ml-select__trigger:focus-visible {
	outline: 2px solid var(--c4d-ml-accent);
	outline-offset: 1px;
}

.c4d-ml-select__arrow {
	flex: 0 0 auto;
	width: 0.4rem;
	height: 0.4rem;
	margin-left: auto;
	border-right: 1px solid currentColor;
	border-bottom: 1px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
	transition: transform 0.15s ease;
}

.c4d-ml-select.is-open .c4d-ml-select__arrow {
	transform: translateY(1px) rotate(225deg);
}

.c4d-ml-select__menu {
	position: absolute;
	top: calc(100% - 1px);
	right: 0;
	z-index: 20;
	min-width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
	border: 1px solid var(--c4d-ml-border);
	background: var(--c4d-ml-menu-bg);
	color: var(--c4d-ml-menu-text);
}

.c4d-ml-select__menu[hidden] {
	display: none;
}

.c4d-ml-select__option {
	padding: 0.5rem 0.9rem;
	font: inherit;
	white-space: nowrap;
	cursor: pointer;
}

.c4d-ml-select__option:hover,
.c4d-ml-select__option.is-active {
	background: var(--c4d-ml-menu-hover-bg);
}

.c4d-ml-select__option[aria-selected="true"] {
	font-weight: 600;
}

@media (max-width: 600px) {
	.c4d-ml-toolbar__sort {
		margin-left: 0;
	}
}

/*--------------------------------------------------------------
# Results grid
--------------------------------------------------------------*/
.c4d-ml__main {
	min-width: 0;
	padding-top: 40px;
    padding-bottom: 60px;
}

.c4d-ml__results {
	transition: opacity 0.15s ease;
}

.c4d-ml.is-loading .c4d-ml__results {
	opacity: 0.45;
	pointer-events: none;
}

.c4d-ml__results ul.products {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 1.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.c4d-ml__results ul.products::before,
.c4d-ml__results ul.products::after {
	content: none !important;
	display: none !important;
}

.c4d-ml__results ul.products li.product {
	width: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	float: none !important;
	clear: none !important;
	display: flex;
	flex-direction: column;
}

.c4d-ml__results ul.products li.product > a {
	display: flex;
	flex-direction: column;
	text-decoration: none;
	color: inherit;
}

/* Contain the product image in a fixed-ratio tile (the theme's shop CSS doesn't
   load on this custom page, so images would otherwise render at full size). */
.c4d-ml__results .jupiterx-wc-loop-product-image {
	display: block;
	position: relative;
	width: 100%;
	aspect-ratio: 1 / 1;
	margin: 0 0 0.75rem;
	border-radius: 8px;
	overflow: hidden;
	background: rgba(127, 127, 127, 0.08);
}

.c4d-ml__results .jupiterx-wc-loop-product-image img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Fallback if the markup is a plain <img> (no theme wrapper). */
.c4d-ml__results ul.products li.product > a > img {
	display: block;
	width: 100%;
	height: auto;
	margin: 0 0 0.75rem;
	border-radius: 8px;
}

.c4d-ml__results ul.products li.product .woocommerce-loop-product__title,
.c4d-ml__results ul.products li.product h2,
.c4d-ml__results ul.products li.product h3 {
	font-size: 0.75rem;
	line-height: 1.3;
	margin: 0 0 0.15rem;
	padding: 0;
    transition: all 0.25s ease;
}

.c4d-ml__results ul.products li.product:hover {
    h2,
    h3 {
        color: var(--c4d-active-color);
    }
}

.c4d-ml__results ul.products li.product .price {
	font-size: 0.9rem;
	opacity: 0.75;
}

.c4d-ml__results ul.products li.product .button,
.c4d-ml__results ul.products li.product .added_to_cart {
	margin-top: 0.5rem;
	align-self: flex-start;
}

.c4d-ml-empty {
	padding: 3rem 0;
	opacity: 0.7;
}

/* Reuses the theme's WooCommerce pagination styling (`.woocommerce-pagination`,
   `.page-numbers`) via the `.woocommerce` ancestor — same trick as the button
   above; the theme's pagination LESS is entirely scoped under `.woocommerce`. */
.c4d-ml__pagination {
	margin-top: 3rem;
	text-align: center;
}

.c4d-ml__pagination:empty {
	margin-top: 0;
}

.c4d-ml-pagination .page-numbers {
	background-color: var(--c4d-ml-page-bg) !important;
	border-color: var(--c4d-ml-page-border) !important;
	color: var(--c4d-ml-page-text) !important;
}
.c4d-ml-pagination a.page-numbers:hover {
    color: var(--c4d-ml-page-text-active) !important;
}

.c4d-ml-pagination .page-numbers.current,
.c4d-ml-pagination a.page-numbers:focus {
	color: var(--e-global-color-accent) !important;
    font-weight: 600 !important;
}

/*--------------------------------------------------------------
# Responsive
--------------------------------------------------------------*/
@media (max-width: 900px) {
	.c4d-ml__body {
		grid-template-columns: 1fr;
	}

	.c4d-ml-sidebar {
		position: static;
		padding-right: 0;
		padding-bottom: 1.75rem;
		border-right: 0;
		border-bottom: 1px solid var(--c4d-lines-color, #373737);
	}
}