:root {
	--tgb-lv-accent: var( --theme-primary-color, #161735 );
	--tgb-lv-border: #e3e3e3;
}
.tgb-lv-wrap {
	margin-bottom: 18px;
}

/* "Color: Miami" — label tên thuộc tính + giá trị đang chọn. */
.tgb-lv-current {
	margin: 0 0 10px;
	font-size: 14px;
}

.tgb-lv-current__label {
	font-weight: 600;
}

.tgb-lv-current__value {
	color: #444;
}

/*
 * Lưới preview — mobile hiển thị 4 sản phẩm, desktop hiển thị 6 (xem media
 * query cuối file). Cố định số cột để tỷ lệ swatch luôn nhất quán.
 */
.tgb-lv-preview-grid {
	display: grid;
	grid-template-columns: repeat( 4, minmax( 0, 1fr ) );
	gap: 10px;
	max-width: 360px;
}

/* 2 item cuối (vị trí 5, 6) chỉ dành cho desktop — ẩn ở mobile để overlay
   "xem thêm" rơi đúng vào item thứ 4. */
.tgb-lv-swatch.tgb-lv-mobile-hide {
	display: none;
}

.tgb-lv-swatch.has-more .tgb-lv-swatch__overlay--desktop {
	display: none;
}

/* Danh sách trong drawer — nhiều nhóm với số lượng khác nhau nên dùng flex-wrap. */
.tgb-lv-row {
	display: grid;
    gap: 10px;
    grid-template-columns: repeat(6, 1fr);
	
}

.tgb-lv-swatch {
	position: relative;
	display: block;
	aspect-ratio: 1 / 1;
	border-radius: 10px;
	border: 1px solid var( --tgb-lv-border );
	background: #fff;
	box-shadow: 0 1px 2px rgba( 0, 0, 0, 0.04 );
	transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.tgb-lv-preview-grid .tgb-lv-swatch {
	width: 100%;
}

/* .tgb-lv-row .tgb-lv-swatch {
	width: 64px;
	height: 64px;
} */

/* .tgb-lv-swatch:hover {
	box-shadow: 0 4px 10px rgba( 0, 0, 0, 0.1 );
	transform: translateY( -1px );
} */

.tgb-lv-swatch.is-active {
	border-color: var( --tgb-lv-accent );
	box-shadow: 0 0 0 1px var( --tgb-lv-accent );
}

.tgb-lv-swatch__media {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	padding: 4px;
	box-sizing: border-box;
}
.tgb-lv-swatch.is-active {
	border-color: var( --tgb-lv-accent );
	border-width: 1px;
	box-shadow: 0 0 0 1px var( --tgb-lv-accent );
}

/* Hết hàng: render bằng <span> (không href) nên không click được mặc định —
   giữ pointer-events bình thường (không dùng pointer-events: none) để cursor
   not-allowed và tooltip hover vẫn hoạt động (item "+còn lại" vẫn clickable
   để mở drawer nên không nhận class này, xem render_swatch()). */
.tgb-lv-swatch.is-disabled {
	cursor: not-allowed;
	opacity: 0.5;
	overflow: hidden;
}

.tgb-lv-swatch.is-disabled:hover {
	box-shadow: 0 1px 2px rgba( 0, 0, 0, 0.04 );
	transform: none;
}
/* Tooltip attribute value khi hover/focus — content lấy thẳng từ
   data-tgb-lv-tooltip nên không cần JS, dùng ::after để không phải thêm
   thẻ con (giữ markup gọn). */
.tgb-lv-swatch[data-tgb-lv-tooltip]::after {
	content: attr( data-tgb-lv-tooltip );
	position: absolute;
	bottom: calc( 100% + 8px );
	left: 50%;
	transform: translateX( -50% );
	background: rgba( 0, 0, 0, 0.85 );
	color: #fff;
	font-size: 11px;
	font-weight: 500;
	line-height: 1.3;
	white-space: nowrap;
	padding: 4px 8px;
	border-radius: 4px;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.15s ease;
	z-index: 5;
}

.tgb-lv-swatch[data-tgb-lv-tooltip]:hover::after,
.tgb-lv-swatch[data-tgb-lv-tooltip]:focus-visible::after {
	opacity: 1;
	visibility: visible;
}

.tgb-lv-swatch.is-disabled:hover {
	box-shadow: 0 1px 2px rgba( 0, 0, 0, 0.04 );
	transform: none;
}

.tgb-lv-swatch__badge {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba( 0, 0, 0, 0.6 );
	color: #fff;
	font-size: 10px;
	font-weight: 500;
	text-align: center;
	padding: 2px 0;
}

.tgb-lv-swatch__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border-radius: 6px;
}

.tgb-lv-swatch__text {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	width: 100%;
	font-size: 12px;
	font-weight: 500;
	line-height: 1.2;
	text-align: center;
	padding: 4px;
	background: #f6f6f6;
	border-radius: 6px;
}

.tgb-lv-swatch.has-more .tgb-lv-swatch__overlay {
	position: absolute;
	inset: 0;
	background: rgba( 0, 0, 0, 0.55 );
	color: #fff;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	border-radius: 6px;
}

.tgb-lv-swatch.has-more .tgb-lv-swatch__overlay small {
	font-size: 10px;
	font-weight: 400;
	margin-top: 2px;
}

.tgb-lv-group-title {
	margin: 18px 0 8px;
	font-size: 14px;
	font-weight: 600;
}

.tgb-lv-drawer__panel .tgb-lv-group-title:first-child {
	margin-top: 0;
}

/*
 * Drawer được JS re-parent ra <body> (xem frontend.js) nên luôn nằm ở gốc cây
 * DOM — `isolation: isolate` tạo stacking context riêng, kết hợp z-index rất
 * cao để không bao giờ bị theme/header sticky che mất.
 */
.tgb-lv-drawer {
	position: fixed;
	inset: 0;
	z-index: 999999;
	isolation: isolate;
	visibility: hidden;
}

.tgb-lv-drawer.is-open {
	visibility: visible;
}

.tgb-lv-no-scroll {
	overflow: hidden;
}

.tgb-lv-drawer__overlay {
	position: absolute;
	inset: 0;
	background: rgba( 0, 0, 0, 0.4 );
	opacity: 0;
	transition: opacity 0.2s ease;
}

.tgb-lv-drawer.is-open .tgb-lv-drawer__overlay {
	opacity: 1;
}

.tgb-lv-drawer__panel {
	position: absolute;
	top: 0;
	right: 0;
	height: 100%;
	width: min(100%, max(50%, 450px));
	background: #fff;
	padding: 30px;
	overflow-x: hidden;
	overflow-y: auto;
	transform: translateX( 100% );
	transition: transform 0.25s ease;
	box-sizing: border-box;
}

.tgb-lv-drawer.is-open .tgb-lv-drawer__panel {
	transform: translateX( 0 );
}

.tgb-lv-drawer__close {
    top: 14px !important;
    right: 14px !important;
	opacity: 1 !important;
}
@media ( max-width: 1000px ) {
	.tgb-lv-row {
    grid-template-columns: repeat(4, 1fr);
}
	.tgb-lv-drawer__panel {
	padding: 15px;
	}
}

/* Mobile: drawer trượt lên từ dưới (bottom sheet) thay vì từ phải. */
@media ( max-width: 600px ) {
	.tgb-lv-drawer__panel {
		width: 100%;
		right: 0;
		top: auto;
		bottom: 0;
		height: 80%;
		border-radius: 16px 16px 0 0;
		transform: translateY( 100% );
	}

	.tgb-lv-drawer.is-open .tgb-lv-drawer__panel {
		transform: translateY( 0 );
	}

	.tgb-lv-preview-grid {
		max-width: 100%;
	}
}

/* Desktop: hiển thị 6 sản phẩm thay vì 4 trước khi "xem thêm". */
@media ( min-width: 601px ) {
	.tgb-lv-preview-grid {
		grid-template-columns: repeat( 6, minmax( 0, 1fr ) );
		max-width: 100%;
	}

	.tgb-lv-swatch.tgb-lv-mobile-hide {
		display: block;
	}

	.tgb-lv-swatch.has-more .tgb-lv-swatch__overlay--desktop {
		display: flex;
	}

	.tgb-lv-swatch.has-more .tgb-lv-swatch__overlay--mobile {
		display: none;
	}
}