/* ========================================
   Kleurstalen Archive
   ======================================== */

/* Checkbox on card */
.tg-kleurstaal-card .tg-kleurstaal-checkbox {
	display: none;
}

.tg-kleurstaal-card-label {
	cursor: pointer;
	display: block;
}

.tg-kleurstaal-card .tg-kleurstaal-check {
	position: absolute;
	top: 12px;
	right: 12px;
	width: 24px;
	height: 24px;
	background: #fff;
	border: 1px solid var(--e-global-color-d8eaab8, #ece4e1);
	border-radius: 4px;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 2;
	transition: all 0.15s;
	color: transparent;
}

.tg-kleurstaal-card .tg-kleurstaal-checkbox:checked ~ .tg-product-card-image .tg-kleurstaal-check {
	background: #B76E79;
	border-color: #B76E79;
	color: #fff;
}

/* In cart state */
.tg-kleurstaal-card.tg-kleurstaal-in-cart {
	opacity: 0.5;
	pointer-events: none;
}

.tg-kleurstaal-card.tg-kleurstaal-in-cart .tg-kleurstaal-check {
	background: var(--e-global-color-primary, #1f1a1a);
	border-color: var(--e-global-color-primary, #1f1a1a);
	color: #fff;
}

/* Max reached - disable unchecked */
.tg-kleurstaal-card.tg-kleurstaal-max-reached .tg-kleurstaal-card-label {
	cursor: not-allowed;
}

.tg-kleurstaal-card.tg-kleurstaal-max-reached .tg-kleurstaal-check {
	opacity: 0.3;
}

/* ---- Sticky Bar ---- */

.tg-kleurstalen-sticky {
	position: sticky;
	bottom: 0;
	left: 0;
	right: 0;
	background: var( --e-global-color-49b4663 );
	border-top: 1px solid var(--e-global-color-d8eaab8, #ece4e1);
	padding: 16px 0;
	z-index: 100;
	margin-top: 24px;
}

.tg-kleurstalen-sticky-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

.tg-kleurstalen-sticky-count {
	font-family: var(--e-global-typography-text-font-family, 'Inter'), Sans-serif;
	font-weight: 500;
	font-size: 12px;
	line-height: 16px;
	text-transform: uppercase;
	color: var(--e-global-color-primary, #1f1a1a);
	white-space: nowrap;
}

.tg-kleurstalen-sticky .tg-kleurstalen-sticky-btn,
.tg-kleurstalen-sticky .tg-kleurstalen-sticky-btn:hover {
	font-family: var(--e-global-typography-text-font-family, 'Inter'), Sans-serif;
	font-weight: 500;
	font-size: 12px;
	line-height: 18px;
	text-transform: uppercase;
	color: #FDE3D6;
	background: var( --e-global-color-text );
	border: 1px solid var( --e-global-color-text );
	border-radius: 4px;
	padding: 16px 24px !important;
	height: 50px;
	cursor: pointer;
	transition: all 0.2s;
	white-space: nowrap;
}

.tg-kleurstalen-sticky-btn:hover:not([disabled]) {
	background: var(--e-global-color-primary, #1f1a1a);
	color: #fff;
	border-color: var(--e-global-color-primary, #1f1a1a);
}

.tg-kleurstalen-sticky-btn[disabled],
.tg-kleurstalen-sticky-btn:hover[disabled] {
	color: var( --e-global-color-text );
	background: #DADADA !important;
	cursor: default;
	border-color: transparent;
}

.tg-kleurstalen-sticky-btn.tg-kleurstalen-btn-success,
.tg-kleurstalen-sticky-btn.tg-kleurstalen-btn-success:hover {
	background: #63d694 !important;
	color: #1d0f0e;
	border-color: #63d694;
}

/* ---- Responsive ---- */

@media (max-width: 600px) {
	.tg-kleurstalen-sticky-inner {
		flex-direction: column;
		gap: 8px;
	}

	.tg-kleurstalen-sticky-btn {
		width: 100%;
		text-align: center;
	}
}

/* Header */
.tg-kleurstalen-header {
	display: flex;
    flex-direction: column;
    gap: 24px;
    max-width: 500px;
    margin-bottom: 40px;
}

.tg-kleurstalen-header .tg-kleurstalen-title {
	font-family: var(--e-global-typography-primary-font-family, 'Barlow Condensed'), Sans-serif;
	font-weight: 700;
	font-size: 56px;
	line-height: 0.88;
	letter-spacing: 2.9px;
	text-transform: uppercase;
	color: var(--e-global-color-primary, #1f1a1a);
	margin: 0;
}

.tg-kleurstalen-header .tg-kleurstalen-desc {
	font-family: var(--e-global-typography-text-font-family, 'Inter'), Sans-serif;
	font-weight: 400;
	font-size: 14px;
	line-height: 1.5;
	color: var(--e-global-color-primary, #1f1a1a);
	margin: 0;
}

@media (max-width: 768px) {
	.tg-kleurstalen-header .tg-kleurstalen-title {
		font-size: 36px;
		letter-spacing: 1.86px;
	}

	.tg-kleurstalen-header {
		gap: 12px;
		margin-top: 8px;
		margin-bottom: 32px;
	}
}