/* Shop facets bar (2026-10-04): Material / Znamka / Cena / Spol / Velikost above the product grid.
   Same visual language as the colour filter and its chips: pills, green selected state (#0a6b2c on #e8f3ec).
   Own file, versioned by filemtime in inc/shop-facets.php. Desktop: one row of dropdowns. <=768px: one "Filtriraj izdelke" button, the groups open below it. */

.grafline-facets {
	margin: 0 0 16px;
}

.grafline-facets__toggle {
	display: none;
}

.grafline-facets__row {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 8px;
}

.grafline-facet {
	position: relative;
}

.grafline-facet > summary {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 0.45rem 1rem;
	font-size: var(--font-size-sm, 0.875rem);
	font-weight: 600;
	line-height: 1.3;
	color: var(--grafline-text, #222);
	background: var(--grafline-bg-light, #fff);
	border: 1px solid var(--grafline-border, #ddd);
	border-radius: var(--radius-full, 99px);
	box-shadow: var(--shadow-xs, none);
	cursor: pointer;
	list-style: none;
	user-select: none;
	transition: border-color 0.15s, background 0.15s;
}

.grafline-facet > summary::-webkit-details-marker {
	display: none;
}

.grafline-facet > summary::after {
	content: "";
	width: 6px;
	height: 6px;
	margin-top: -3px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	transition: transform 0.15s;
}

.grafline-facet[open] > summary::after {
	margin-top: 3px;
	transform: rotate(-135deg);
}

.grafline-facet > summary:hover {
	border-color: #0a6b2c;
}

.grafline-facet > summary:focus-visible,
.grafline-facets__toggle:focus-visible,
.grafline-facet__opt:focus-visible {
	outline: 2px solid #0a6b2c;
	outline-offset: 2px;
}

.grafline-facet[open] > summary,
.grafline-facet.is-active > summary {
	background: #e8f3ec;
	border-color: #0a6b2c;
	color: #0a6b2c;
}

.grafline-facets__n,
.grafline-facet__n {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
	color: #fff;
	background: #0a6b2c;
	border-radius: 99px;
}

/* dropdown panel */
.grafline-facet__panel {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	z-index: 30;
	box-sizing: border-box;
	min-width: 230px;
	max-width: min(360px, 90vw);
	max-height: 340px;
	overflow-y: auto;
	padding: 6px;
	background: #fff;
	border: 1px solid #e3e3e3;
	border-radius: 12px;
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.14);
}

.grafline-facet__opt {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 7px 10px;
	font-size: 13px;
	color: #333;
	text-decoration: none;
	border-radius: 8px;
}

.grafline-facet__opt:hover {
	background: #f6f6f6;
}

.grafline-facet__opt.is-on {
	font-weight: 600;
	color: #0a6b2c;
	background: #e8f3ec;
}

.grafline-facet__box {
	flex: none;
	width: 16px;
	height: 16px;
	box-sizing: border-box;
	border: 1.5px solid #b5b5b5;
	border-radius: 4px;
	background: #fff;
}

.grafline-facet__opt.is-on .grafline-facet__box {
	border-color: #0a6b2c;
	background: #0a6b2c url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat;
}

.grafline-facet__lbl {
	min-width: 0;
	overflow-wrap: anywhere;
}

.grafline-facet__cnt {
	margin-left: auto;
	padding-left: 8px;
	font-size: 12px;
	font-weight: 400;
	color: #888;
}

/* sizes: compact chips instead of a list */
.grafline-facet.is-chips .grafline-facet__panel {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	width: max-content;
	padding: 10px;
}

.grafline-facet.is-chips .grafline-facet__opt {
	gap: 6px;
	padding: 4px 11px;
	border: 1px solid #d4d4d4;
	border-radius: 99px;
}

.grafline-facet.is-chips .grafline-facet__opt.is-on {
	border-color: #0a6b2c;
}

.grafline-facet.is-chips .grafline-facet__box {
	display: none;
}

.grafline-facet.is-chips .grafline-facet__cnt {
	margin: 0;
	padding: 0;
}

/* phones: one button, the groups stack below it, panels open inline */
@media (max-width: 768px) {
	.grafline-facets__toggle {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 8px;
		width: 100%;
		padding: 0.6rem 1rem;
		font-size: var(--font-size-sm, 0.875rem);
		font-weight: 600;
		color: var(--grafline-text, #222);
		background: var(--grafline-bg-light, #fff);
		border: 1px solid var(--grafline-border, #ddd);
		border-radius: var(--radius-full, 99px);
		cursor: pointer;
	}

	.grafline-facets.is-open .grafline-facets__toggle {
		color: #0a6b2c;
		background: #e8f3ec;
		border-color: #0a6b2c;
	}

	.grafline-facets__row {
		display: none;
		flex-direction: column;
		align-items: stretch;
		gap: 6px;
		margin-top: 8px;
	}

	.grafline-facets.is-open .grafline-facets__row {
		display: flex;
	}

	.grafline-facet > summary {
		display: flex;
		justify-content: space-between;
		border-radius: 12px;
	}

	.grafline-facet > summary .grafline-facet__title {
		margin-right: auto;
	}

	.grafline-facet__panel {
		position: static;
		min-width: 0;
		max-width: none;
		max-height: 280px;
		margin-top: 4px;
		box-shadow: none;
	}

	.grafline-facet.is-chips .grafline-facet__panel {
		width: auto;
	}
}

@media (prefers-reduced-motion: reduce) {
	.grafline-facet > summary,
	.grafline-facet > summary::after {
		transition: none;
	}
}