/* Dynamic Product Filter — layout */
.dpf-wrapper {
	display: flex;
	gap: 32px;
	align-items: flex-start;
}

.dpf-sidebar {
	width: var(--dpf-sidebar-width, 280px);
	flex: 0 0 var(--dpf-sidebar-width, 280px);
	font-family: inherit;
}

.dpf-results {
	flex: 1 1 auto;
	min-width: 0;
}

/* Header */
.dpf-header {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 16px;
}
.dpf-header h3 {
	margin: 0;
	font-size: 22px;
	font-weight: 600;
}
.dpf-header-icon { font-size: 18px; }

/* Clear all */
.dpf-clear-all {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	background: var(--dpf-clear-bg, #d9d9d9);
	border: none;
	border-radius: 6px;
	padding: 12px;
	font-weight: 600;
	font-size: 15px;
	cursor: pointer;
	margin-bottom: 18px;
}
.dpf-clear-all:hover { background: #cfcfcf; }

/* Active filter chips */
.dpf-active-chips { margin-bottom: 8px; }
.dpf-chip {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 0;
	font-size: 14px;
	border-bottom: 1px solid #eceff1;
}
.dpf-chip .dpf-chip-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--dpf-dark, #3a3a3a);
	flex: 0 0 auto;
}
.dpf-chip .dpf-chip-label { flex: 1 1 auto; color: #3a3a3a; }
.dpf-chip .dpf-chip-remove {
	cursor: pointer;
	border: none;
	background: none;
	font-size: 16px;
	line-height: 1;
	color: #7a7a7a;
}

/* Collapsible sections */
.dpf-section {
	border-bottom: 1px solid #eceff1;
	padding: 16px 0;
}
.dpf-section summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	cursor: pointer;
	list-style: none;
	font-size: 17px;
	font-weight: 600;
}
.dpf-section summary::-webkit-details-marker { display: none; }
.dpf-section summary::before {
	content: "\25B4";
	margin-right: 8px;
	font-size: 12px;
	transition: transform .15s ease;
}
.dpf-section:not([open]) summary::before { transform: rotate(180deg); }
.dpf-section summary span:first-child { display: flex; align-items: center; }
.dpf-reset {
	font-size: 12px;
	letter-spacing: .04em;
	color: #9a9a9a;
	text-decoration: none;
	text-transform: uppercase;
}
.dpf-reset:hover { color: #3a3a3a; }

/* Checkbox lists */
.dpf-options { margin-top: 14px; display: flex; flex-direction: column; gap: 12px; }
.dpf-checkbox {
	display: flex;
	align-items: center;
	gap: 10px;
	cursor: pointer;
	font-size: 15px;
}
.dpf-checkbox input[type="checkbox"] {
	width: 18px;
	height: 18px;
	accent-color: var(--dpf-primary, #09777e);
	flex: 0 0 auto;
}
.dpf-label-text { flex: 1 1 auto; }
.dpf-count { color: #9a9a9a; font-size: 14px; }
.dpf-checkbox.is-disabled { color: #c3c3c3; cursor: not-allowed; }
.dpf-checkbox.is-disabled .dpf-count { color: #d5d5d5; }

/* Price slider */
.dpf-price { margin-top: 14px; }
.dpf-slider {
	position: relative;
	height: 24px;
	margin: 0 10px 8px;
}
.dpf-slider-track,
.dpf-slider-range {
	position: absolute;
	top: 50%;
	height: 4px;
	transform: translateY(-50%);
	border-radius: 2px;
}
.dpf-slider-track { left: 0; right: 0; background: #e3e8ea; }
.dpf-slider-range { background: var(--dpf-dark, #1a1a1a); }
.dpf-range {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	margin: 0;
	appearance: none;
	-webkit-appearance: none;
	background: none;
	pointer-events: none;
}
.dpf-range::-webkit-slider-thumb {
	appearance: none;
	-webkit-appearance: none;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: #fff;
	border: 2px solid var(--dpf-dark, #1a1a1a);
	cursor: pointer;
	pointer-events: auto;
	margin-top: 2px;
}
.dpf-range::-moz-range-thumb {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: #fff;
	border: 2px solid var(--dpf-dark, #1a1a1a);
	cursor: pointer;
	pointer-events: auto;
}
.dpf-range::-webkit-slider-runnable-track { background: transparent; }
.dpf-range::-moz-range-track { background: transparent; }

.dpf-slider-scale {
	display: flex;
	justify-content: space-between;
	font-size: 13px;
	color: #9a9a9a;
	margin: 0 4px 16px;
}

.dpf-price-inputs {
	display: flex;
	align-items: center;
	gap: 10px;
}
.dpf-price-field {
	flex: 1 1 0;
	border: 1px solid #d9d9d9;
	border-radius: 6px;
	padding: 10px 12px;
}
.dpf-price-field input {
	width: 100%;
	border: none;
	background: none;
	font-weight: 600;
	color: var(--dpf-primary, #09777e);
	font-size: 15px;
	text-align: center;
	appearance: textfield;
}
.dpf-price-field input::-webkit-outer-spin-button,
.dpf-price-field input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}
.dpf-price-dash { color: #9a9a9a; }

/* Toolbar: sort + view toggle */
.dpf-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 20px;
}
.dpf-sort {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 14px;
	color: #6a6a6a;
}
.dpf-sort label { white-space: nowrap; }
.dpf-orderby {
	border: none;
	background: none;
	font-weight: 700;
	font-size: 14px;
	color: #1a1a1a;
	cursor: pointer;
	padding: 4px 0;
}
.dpf-view-toggle {
	display: flex;
	gap: 6px;
}
.dpf-view-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border: 1px solid #e3e8ea;
	border-radius: 6px;
	background: #fff;
	color: #9a9a9a;
	cursor: pointer;
	padding: 0;
}
.dpf-view-btn.is-active {
	background: var(--dpf-dark, #1a1a1a);
	border-color: var(--dpf-dark, #1a1a1a);
	color: #fff;
}

/* Results grid */
.dpf-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
}
@media (max-width: 1024px) { .dpf-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .dpf-grid { grid-template-columns: 1fr; } }

/* View toggle variants (dpf-view-grid4 is the same as the default 4-col grid above) */
.dpf-grid.dpf-view-grid2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 640px) { .dpf-grid.dpf-view-grid2 { grid-template-columns: 1fr; } }

.dpf-grid.dpf-view-list { grid-template-columns: 1fr; }
.dpf-grid.dpf-view-list .dpf-card {
	flex-direction: row;
	align-items: stretch;
}
.dpf-grid.dpf-view-list .dpf-card-image {
	flex: 0 0 180px;
	width: 180px;
	padding: 0;
}
.dpf-grid.dpf-view-list .dpf-card-image img { height: 100%; min-height: 140px; }
.dpf-grid.dpf-view-list .dpf-card-body {
	margin-top: 0;
	margin-left: 10px;
	justify-content: center;
	flex: 1 1 auto;
}

.dpf-card {
	position: relative;
	background: #fff;
	border: 1px solid #e3e8ea;
	border-radius: var(--dpf-radius, 10px);
	box-shadow: 0 2px 10px rgba(164, 204, 229, .5);
	padding: 5px;
	display: flex;
	flex-direction: column;
	transition: box-shadow .15s ease;
}
.dpf-card:hover { box-shadow: 4px 4px 8px #e3e8ea; }

.dpf-badge {
	position: absolute;
	top: 5px;
	left: 5px;
	z-index: 1;
	background: var(--dpf-badge-bg, #e9edef);
	color: #3a3a3a;
	padding: 5px 8px;
	border-radius: 4px;
	font-size: 13px;
	font-weight: 600;
}
.dpf-card-image { display: block; padding: 10px 0 0; text-align: center; }
.dpf-card-image img { width: 100%; height: 220px; object-fit: contain; }

.dpf-card-body {
	background: var(--dpf-card-bg, #ebf2f6);
	border-radius: 6px;
	padding: 14px;
	margin-top: 10px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.dpf-card-title { margin: 0; font-size: 14px; font-weight: 700; color: #3a3a3a; }
.dpf-card-title a { color: inherit; text-decoration: none; }
.dpf-card-subtitle { margin: 0; font-size: 13px; color: #6a6a6a; }
.dpf-card-price { font-size: 15px; font-weight: 600; }
.dpf-card-price del { color: #9a9a9a; font-weight: 400; margin-right: 6px; }
.dpf-card-cart { margin-top: 4px; }
.dpf-card-cart .button {
	display: inline-block;
	background: var(--dpf-primary, #09777e);
	color: #fff;
	border-radius: 6px;
	padding: 10px 16px;
	font-size: 13px;
	text-decoration: none;
	font-weight: 600;
}
.dpf-card-cart .button.loading { opacity: .6; }
.dpf-card-cart .button.added::after { content: " ✓"; }

.dpf-no-products { grid-column: 1 / -1; text-align: center; color: #9a9a9a; padding: 40px 0; }

/* When rendering via a selected Elementor Loop Item template instead of the built-in card */
.dpf-elementor-item { min-width: 0; }

.dpf-load-more-wrap { text-align: center; margin-top: 24px; }
.dpf-load-more {
	background: var(--dpf-primary, #09777e);
	color: #fff;
	border: none;
	border-radius: 6px;
	padding: 12px 28px;
	font-weight: 600;
	cursor: pointer;
}
.dpf-load-more[disabled] { opacity: .5; cursor: not-allowed; }

.dpf-grid.is-loading { opacity: .5; pointer-events: none; }

@media (max-width: 900px) {
	.dpf-wrapper { flex-direction: column; }
	.dpf-sidebar { width: 100%; flex-basis: auto; }
}