/* NoirMusk cart — "Add a tester" picker under the items table */

.woocommerce-cart .woocommerce .noirmusk-testers {
	margin: 22px 0 0;
	border: 1px solid #ece7de;
	border-radius: 10px;
	background: #fff;
	font-family: var(--theme-body-font-family), 'Inter', sans-serif;
	overflow: hidden;
	transition: border-color 0.25s ease;
}
.woocommerce-cart .woocommerce .noirmusk-testers[open] {
	border-color: #e2d5bd;
}

/* header row */
.woocommerce-cart .woocommerce .noirmusk-testers__head {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 18px 22px;
	list-style: none;
	cursor: pointer;
	user-select: none;
}
.woocommerce-cart .woocommerce .noirmusk-testers__head::-webkit-details-marker {
	display: none;
}
.woocommerce-cart .woocommerce .noirmusk-testers__head::marker {
	content: '';
}
.noirmusk-testers__intro {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}
.noirmusk-testers__title {
	font-family: var(--theme-heading-font-family);
	font-size: 20px;
	font-weight: 700;
	letter-spacing: 0.05em;
	line-height: 1.2;
	text-transform: uppercase;
	color: #1a1a1a;
}
.noirmusk-testers__sub {
	font-size: 14px;
	line-height: 1.5;
	color: #6b665d;
}
.noirmusk-testers__sub .amount {
	font-size: inherit;
	font-weight: 600;
	color: #a3703f;
}
.noirmusk-testers__count {
	flex: 0 0 auto;
	padding: 6px 14px;
	border: 1px dashed #d8c29b;
	border-radius: 4px;
	background: #faf6ee;
	font-size: 13px;
	font-weight: 600;
	white-space: nowrap;
	color: #a3703f;
}
.noirmusk-testers__count .amount {
	font-size: inherit;
	font-weight: inherit;
	color: inherit;
}
.noirmusk-testers__chevron {
	flex: 0 0 auto;
	width: 10px;
	height: 10px;
	margin: -4px 4px 0 0;
	border: solid #8c867c;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
	transition: transform 0.25s ease, border-color 0.2s ease;
}
.woocommerce-cart .woocommerce .noirmusk-testers__head:hover .noirmusk-testers__chevron {
	border-color: #a3703f;
}
.woocommerce-cart .woocommerce .noirmusk-testers[open] .noirmusk-testers__chevron {
	margin-top: 4px;
	transform: rotate(-135deg);
}

/* perfume tiles */
.woocommerce-cart .woocommerce .noirmusk-testers__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
	gap: 10px;
	padding: 20px 22px 22px;
	border-top: 1px solid #ece7de;
}
.woocommerce-cart .woocommerce .noirmusk-testers .noirmusk-tester {
	position: relative;
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	padding: 8px 14px 8px 8px;
	border: 1px solid #ece7de;
	border-radius: 6px;
	background: #fff;
	cursor: pointer;
	transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}
.woocommerce-cart .woocommerce .noirmusk-testers .noirmusk-tester:hover {
	border-color: #d8c29b;
}
.woocommerce-cart .woocommerce .noirmusk-testers .noirmusk-tester.is-on {
	border-color: #a3703f;
	background: #faf6ee;
	box-shadow: 0 0 0 3px rgba(163, 112, 63, 0.12);
}
.woocommerce-cart .woocommerce .noirmusk-testers .noirmusk-tester.is-loading {
	opacity: 0.6;
	pointer-events: none;
}

.noirmusk-tester__thumb {
	flex: 0 0 46px;
	width: 46px;
	height: 46px;
	border-radius: 4px;
	background: #f3efe8;
	overflow: hidden;
}
.woocommerce-cart .woocommerce .noirmusk-tester__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	object-fit: cover;
}
.noirmusk-tester__name {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	font-family: var(--theme-heading-font-family);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.05em;
	line-height: 1.3;
	text-overflow: ellipsis;
	text-transform: uppercase;
	white-space: nowrap;
	color: #1a1a1a;
}

/* real checkbox stays for keyboard + screen readers */
.noirmusk-tester__input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	opacity: 0;
	pointer-events: none;
}
.noirmusk-tester__box {
	position: relative;
	flex: 0 0 22px;
	width: 22px;
	height: 22px;
	border: 1.5px solid #c9bfae;
	border-radius: 4px;
	background: #fff;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}
.noirmusk-tester__box::after {
	content: '';
	position: absolute;
	top: 3px;
	left: 7px;
	width: 5px;
	height: 10px;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg) scale(0);
	transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.noirmusk-tester.is-on .noirmusk-tester__box {
	border-color: #a3703f;
	background: #a3703f;
}
.noirmusk-tester.is-on .noirmusk-tester__box::after {
	transform: rotate(45deg) scale(1);
}
.noirmusk-tester__input:focus-visible ~ .noirmusk-tester__box {
	outline: 2px solid #a3703f;
	outline-offset: 2px;
}

/* totals: the tester fee rows */
.woocommerce-cart .woocommerce .cart_totals table.shop_table tr.fee th {
	font-weight: 500;
}
.woocommerce-cart .woocommerce .cart_totals table.shop_table tr.fee td {
	white-space: nowrap;
}

@media (max-width: 768px) {
	.woocommerce-cart .woocommerce .noirmusk-testers__head {
		flex-wrap: wrap;
		padding: 16px 18px;
	}
	.woocommerce-cart .woocommerce .noirmusk-testers__intro {
		flex-basis: calc(100% - 40px);
	}
	.woocommerce-cart .woocommerce .noirmusk-testers__count {
		order: 3;
	}
	.woocommerce-cart .woocommerce .noirmusk-testers__grid {
		grid-template-columns: 1fr;
		padding: 16px 18px 18px;
	}
}
@media (prefers-reduced-motion: reduce) {
	.noirmusk-testers,
	.noirmusk-tester,
	.noirmusk-tester__box,
	.noirmusk-tester__box::after,
	.noirmusk-testers__chevron {
		transition: none;
	}
}
