/**
 * DS Elements — Thanh lọc sản phẩm
 *
 * Hàng tab cuộn ngang khi hẹp thay vì xuống dòng: đây là thanh điều hướng danh
 * mục, xuống dòng thành 3 hàng thì mất luôn cảm giác "một dải chọn".
 */

.elementor-widget-ds-product-filter {
	width: 100%;
	min-width: 0;
}

.ds-pf {
	width: 100%;
	min-width: 0;

	--ds-pf-swatch-size: 34px;
	--ds-pf-swatch-gap: var(--ds-space-3);
}

.ds-pf *,
.ds-pf *::before,
.ds-pf *::after {
	box-sizing: border-box;
}

/* --- Hàng tab ----------------------------------------------------------- */

.ds-pf__tabs {
	display: flex;
	gap: var(--ds-space-2);
	overflow-x: auto;
	scrollbar-width: none;
	-ms-overflow-style: none;
	padding-bottom: var(--ds-space-1);
}

.ds-pf__tabs::-webkit-scrollbar {
	display: none;
}

.ds-pf__tab {
	flex: 1 1 auto;
	padding: var(--ds-space-3) var(--ds-space-6);
	white-space: nowrap;
	text-align: center;
	text-decoration: none;

	background: var(--ds-pf-tab-bg, var(--ds-color-surface));
	color: var(--ds-pf-tab-color, var(--ds-color-body));
	border-radius: var(--ds-pf-tab-radius, var(--ds-radius-md));

	font-size: var(--ds-fs-nav);
	font-weight: var(--ds-fw-semibold);
	line-height: var(--ds-lh-button);

	transition: background var(--ds-transition), color var(--ds-transition);
}

.ds-pf__tab:hover {
	background: var(--ds-color-line-soft);
	color: var(--ds-color-brand);
}

.ds-pf__tab.is-active {
	background: var(--ds-pf-tab-bg-active, var(--ds-color-brand));
	color: var(--ds-pf-tab-color-active, var(--ds-color-white));
}

.ds-pf__tab:focus-visible {
	outline: 2px solid var(--ds-color-brand-light);
	outline-offset: 2px;
}

/* --- Hàng dưới ---------------------------------------------------------- */

.ds-pf__row {
	margin-top: var(--ds-space-4);
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: var(--ds-space-6);
}

/* Cụm màu rộng gấp đôi một ô chọn — 9 chấm cần chỗ, ô chọn thì không. */
.ds-pf__box--colors {
	flex: 2 1 380px;
}

.ds-pf__box--select {
	flex: 1 1 220px;
}

.ds-pf__box {
	min-width: 0;
	padding: var(--ds-space-4) var(--ds-space-6);

	background: var(--ds-pf-box-bg, var(--ds-color-white));
	border: 1px solid var(--ds-pf-box-border, var(--ds-color-border));
	border-radius: var(--ds-pf-box-radius, var(--ds-radius-md));
}

/* Ô chọn không có khung riêng — nhãn và select nằm thẳng trên nền trang. */
.ds-pf__box--select {
	padding: 0;
	background: none;
	border: 0;
}

.ds-pf__label {
	display: block;
	margin-bottom: var(--ds-space-3);
	color: var(--ds-pf-label-color, var(--ds-color-brand));
	font-size: var(--ds-fs-small);
	font-weight: var(--ds-fw-bold);
	line-height: var(--ds-lh-small);
	letter-spacing: var(--ds-ls-eyebrow);
	text-transform: uppercase;
}

/* --- Chấm màu ----------------------------------------------------------- */

.ds-pf__swatches {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ds-pf-swatch-gap);
}

.ds-pf__swatch {
	position: relative;
	display: block;
	width: var(--ds-pf-swatch-size);
	height: var(--ds-pf-swatch-size);
	border-radius: var(--ds-radius-pill);
	border: 1px solid var(--ds-color-border);
	background: var(--ds-color-surface);
	transition: transform var(--ds-transition), box-shadow var(--ds-transition);
}

.ds-pf__swatch:hover {
	transform: scale(1.08);
}

/* Vòng chọn vẽ bằng box-shadow chứ không phải border: border sẽ ăn vào đường
   kính và làm chấm co lại lúc chọn. */
.ds-pf__swatch.is-active {
	box-shadow: 0 0 0 2px var(--ds-color-white),
		0 0 0 4px var(--ds-pf-swatch-ring, var(--ds-color-brand));
}

.ds-pf__swatch:focus-visible {
	outline: 2px solid var(--ds-color-brand-light);
	outline-offset: 4px;
}

/* --- Ô chọn ------------------------------------------------------------- */

.ds-pf__select {
	width: 100%;
	/* Phải chừa chỗ cho mũi tên: lề 16px + hình 18px, làm tròn lên nấc 48px. */
	padding: var(--ds-space-3) var(--ds-space-12) var(--ds-space-3) var(--ds-space-4);

	background-color: var(--ds-pf-box-bg, var(--ds-color-white));
	border: 1px solid var(--ds-pf-box-border, var(--ds-color-border));
	border-radius: var(--ds-pf-box-radius, var(--ds-radius-md));
	color: var(--ds-color-body);

	font-size: var(--ds-fs-body);
	line-height: var(--ds-lh-button);

	/* Mũi tên vẽ bằng SVG inline để không phụ thuộc mũi tên mặc định của hệ
	   điều hành — trên macOS và Windows nó khác hẳn nhau. */
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23808090' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right var(--ds-space-4) center;
	background-size: 18px 18px;
}

.ds-pf__select:focus-visible {
	outline: 2px solid var(--ds-color-brand-light);
	outline-offset: 2px;
}

/* --- Màn nhỏ ------------------------------------------------------------ */

@media (max-width: 767px) {
	.ds-pf__tab {
		flex: 0 0 auto;
		padding-inline: var(--ds-space-4);
	}

	.ds-pf__row {
		gap: var(--ds-space-4);
	}

	.ds-pf__box--colors,
	.ds-pf__box--select {
		flex: 1 1 100%;
	}
}