/* =====================================================
   WC Linked Variations List — wc-lvl.css
   ===================================================== */

.wc-lvl {
	--lvl-border:        #e5e7eb;
	--lvl-bg-hover:      #f9fafb;
	--lvl-bg-active:     #e8f5e9;
	--lvl-text:          #374151;
	--lvl-text-muted:    #9ca3af;
	--lvl-thumb-size:    52px;
	--lvl-radius:        6px;
	--lvl-search-height: 42px;
	--lvl-font:          inherit;

	font-family: var(--lvl-font);
	margin-block: 1.5rem;
}

/* ── Search bar ─────────────────────────────────── */

.wc-lvl__search-wrap {
	position:     relative;
	display:      flex;
	align-items:  center;
	margin-bottom: 0;
	border:       1px solid var(--lvl-border);
	border-bottom: none;
	border-radius: var(--lvl-radius) var(--lvl-radius) 0 0;
	background:   #fff;
}

.wc-lvl__search-icon {
	position:   absolute;
	left:       12px;
	color:      var(--lvl-text-muted);
	flex-shrink: 0;
	pointer-events: none;
}

.wc-lvl__search {
	width:        100%;
	height:       var(--lvl-search-height);
	padding:      0 100px 0 38px;
	border:       none;
	outline:      none;
	font-size:    0.875rem;
	color:        var(--lvl-text);
	background:   transparent;
	appearance:   none;
	-webkit-appearance: none;
}

.wc-lvl__search::placeholder {
	color: var(--lvl-text-muted);
}

/* Clear (×) button injected by JS */
.wc-lvl__clear {
	position:    absolute;
	right:       56px;
	display:     flex;
	align-items: center;
	justify-content: center;
	width:       24px;
	height:      24px;
	border:      none;
	background:  none;
	cursor:      pointer;
	color:       var(--lvl-text-muted);
	font-size:   1.1rem;
	line-height: 1;
	padding:     0;
	border-radius: 50%;
	transition:  color 0.15s, background 0.15s;
}

.wc-lvl__clear:hover {
	color:       var(--lvl-text);
	background:  var(--lvl-border);
}

.wc-lvl__clear[hidden] {
	display: none;
}

.wc-lvl__count {
	position:    absolute;
	right:       12px;
	font-size:   0.75rem;
	color:       var(--lvl-text-muted);
	white-space: nowrap;
}

/* ── List ───────────────────────────────────────── */

.wc-lvl__list {
	list-style:  none;
	margin:      0;
	padding:     0;
	border:      1px solid var(--lvl-border);
	border-radius: 0 0 var(--lvl-radius) var(--lvl-radius);
	overflow:    hidden;
}

.wc-lvl__item {
	border-bottom: 1px solid var(--lvl-border);
}

.wc-lvl__item:last-child {
	border-bottom: none;
}

.wc-lvl__item--active > .wc-lvl__link {
	background: var(--lvl-bg-active);
}

/* ── Link / row ─────────────────────────────────── */

.wc-lvl__link {
	display:        flex;
	align-items:    center;
	gap:            12px;
	padding:        10px 14px;
	text-decoration: none;
	color:          var(--lvl-text);
	background:     #fff;
	transition:     background 0.12s;
}

.wc-lvl__link:hover {
	background: var(--lvl-bg-hover);
	text-decoration: none;
}

.wc-lvl__item--active > .wc-lvl__link:hover {
	background: var(--lvl-bg-active);
}

/* ── Thumbnail ──────────────────────────────────── */

.wc-lvl__thumb-wrap {
	flex-shrink:  0;
	width:        var(--lvl-thumb-size);
	height:       var(--lvl-thumb-size);
	border-radius: 3px;
	overflow:     hidden;
	background:   var(--lvl-border);
}

.wc-lvl__thumb {
	width:      100%;
	height:     100%;
	object-fit: cover;
	display:    block;
}

/* ── Text column (title + chips) ────────────────── */

.wc-lvl__text-col {
	display:        flex;
	flex-direction: column;
	gap:            4px;
	min-width:      0; /* allow text truncation */
}

/* ── Title ──────────────────────────────────────── */

.wc-lvl__title {
	font-size:     0.875rem;
	font-weight:   400;
	line-height:   1.4;
	color:         var(--lvl-text);
	white-space:   nowrap;
	overflow:      hidden;
	text-overflow: ellipsis;
}

.wc-lvl__item--active .wc-lvl__title {
	font-weight: 600;
}

/* ── Attribute chips row ────────────────────────── */

.wc-lvl__attrs {
	display:   flex;
	flex-wrap: wrap;
	gap:       4px;
}

.wc-lvl__attr-chip {
	display:       inline-block;
	font-size:     0.72rem;
	line-height:   1;
	padding:       3px 7px;
	border-radius: 99px;
	background:    #f3f4f6;
	color:         var(--lvl-text-muted);
	white-space:   nowrap;
}

/* ── Empty state ────────────────────────────────── */

.wc-lvl__empty {
	margin:     0;
	padding:    16px 14px;
	font-size:  0.875rem;
	color:      var(--lvl-text-muted);
	text-align: center;
	border:     1px solid var(--lvl-border);
	border-top: none;
	border-radius: 0 0 var(--lvl-radius) var(--lvl-radius);
}

.wc-lvl__empty[hidden] {
	display: none;
}

/* ── Highlight matched text ─────────────────────── */

.wc-lvl__highlight {
	background:    #fef08a;
	border-radius: 2px;
	padding:       0 1px;
}