/* =========================================================
   KAHVE TOWN VARIATION SWATCHES v0.3.3
   ========================================================= */

.ktvs-options,
.ktvs-options * {
	box-sizing: border-box;
}

table.variations tr.ktvs-row {
	display: block !important;
	width: 100% !important;
	margin: 0 0 14px !important;
}

table.variations tr.ktvs-row > th.label,
table.variations tr.ktvs-row > td.value {
	display: block !important;
	width: 100% !important;
	max-width: none !important;
	padding: 0 !important;
	border: 0 !important;
}

table.variations tr.ktvs-row-grind > th.label {
	display: none !important;
}

table.variations tr.ktvs-row:not(.ktvs-row-grind) > th.label {
	margin: 0 0 8px !important;
	text-align: left !important;
}

table.variations tr.ktvs-row:not(.ktvs-row-grind) > th.label label {
	margin: 0 !important;
	color: #102765 !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	line-height: 1.3 !important;
}

.ktvs-native-select {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	margin: -1px !important;
	padding: 0 !important;
	overflow: hidden !important;
	clip: rect(0 0 0 0) !important;
	clip-path: inset(50%) !important;
	white-space: nowrap !important;
	border: 0 !important;
	opacity: 0 !important;
	pointer-events: none !important;
}

/* INTRO */

.ktvs-grind-intro {
	width: 100%;
	margin: 0 0 12px;
	text-align: center;
}

.ktvs-grind-title {
	margin: 0;
	color: #102765;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.25;
}

.ktvs-grind-helper {
	margin-top: 4px;
	color: #929292;
	font-size: 11.5px;
	font-weight: 400;
	line-height: 1.4;
}

/* SWATCH GRID */

.ktvs-options {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	gap: 7px !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
}

.ktvs-option {
	position: relative !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 6px !important;
	width: 100% !important;
	min-width: 0 !important;
	min-height: 74px !important;
	margin: 0 !important;
	padding: 8px 6px !important;
	border: 1px solid #e7ded2 !important;
	border-radius: 12px !important;
	background: #fff !important;
	color: #2b2b2b !important;
	font-family: inherit !important;
	font-size: 11.5px !important;
	font-weight: 600 !important;
	line-height: 1.15 !important;
	text-align: center !important;
	cursor: pointer !important;
	box-shadow: none !important;
	transform: none !important;
	transition:
		border-color .16s ease,
		background-color .16s ease,
		box-shadow .16s ease !important;
}

.ktvs-option:hover,
.ktvs-option:focus-visible {
	border-color: #cf7d26 !important;
	background: #fffaf5 !important;
	box-shadow: 0 4px 12px rgba(16,39,101,.05) !important;
	transform: none !important;
	outline: none !important;
}

.ktvs-option-icon {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 31px !important;
	height: 31px !important;
	flex: 0 0 31px !important;
	border-radius: 9px !important;
	background: #f8f5ef !important;
	color: #102765 !important;
}

.ktvs-option-icon svg {
	display: block !important;
	width: 15px !important;
	height: 15px !important;
	fill: none !important;
	stroke: currentColor !important;
	stroke-width: 1.8 !important;
	stroke-linecap: round !important;
	stroke-linejoin: round !important;
}

.ktvs-option-label {
	display: block !important;
	width: 100% !important;
	color: inherit !important;
	font-size: inherit !important;
	font-weight: inherit !important;
	line-height: 1.15 !important;
	text-align: center !important;
	white-space: normal !important;
	overflow-wrap: break-word !important;
}

.ktvs-option.ktvs-text-only {
	min-height: 48px !important;
	padding: 8px 10px !important;
}

.ktvs-option.is-selected {
	border-color: #102765 !important;
	background: #f7fbfc !important;
	color: #102765 !important;
	box-shadow:
		0 0 0 1px #102765,
		inset 0 0 0 1px rgba(207,125,38,.12),
		0 5px 14px rgba(16,39,101,.08) !important;
}

.ktvs-option.is-selected .ktvs-option-icon {
	background: #eef3fb !important;
}

.ktvs-check {
	position: absolute !important;
	top: 6px !important;
	right: 6px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 18px !important;
	height: 18px !important;
	border-radius: 50% !important;
	background: #cf7d26 !important;
	color: #fff !important;
	font-size: 9px !important;
	font-weight: 700 !important;
	line-height: 1 !important;
	opacity: 0 !important;
	transform: scale(.75) !important;
	pointer-events: none !important;
	transition:
		opacity .14s ease,
		transform .14s ease !important;
}

.ktvs-option.is-selected .ktvs-check {
	opacity: 1 !important;
	transform: scale(1) !important;
}

.ktvs-option:disabled,
.ktvs-option.is-disabled {
	opacity: .34 !important;
	cursor: not-allowed !important;
	filter: grayscale(.2) !important;
	box-shadow: none !important;
	transform: none !important;
}

/* GUIDE */

.ktvs-guide {
	width: 100%;
	margin-top: 10px;
}

.ktvs-guide-toggle {
	display: flex !important;
	align-items: center !important;
	gap: 8px !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 6px 2px !important;
	border: 0 !important;
	background: transparent !important;
	color: #4b4b4b !important;
	font-family: inherit !important;
	font-size: 12px !important;
	font-weight: 600 !important;
	line-height: 1.2 !important;
	text-align: left !important;
	cursor: pointer !important;
	box-shadow: none !important;
	transform: none !important;
}

.ktvs-guide-toggle:hover,
.ktvs-guide-toggle:focus {
	background: transparent !important;
	color: #102765 !important;
	box-shadow: none !important;
	transform: none !important;
	outline: none !important;
}

.ktvs-guide-info {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 17px;
	height: 17px;
	flex: 0 0 17px;
	border-radius: 50%;
	background: #9b9b9b;
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	line-height: 1;
}

.ktvs-guide-chevron {
	margin-left: auto;
	color: #8b8b8b;
	font-size: 13px;
	line-height: 1;
	transition: transform .18s ease;
}

.ktvs-guide.is-open .ktvs-guide-chevron {
	transform: rotate(180deg);
}

.ktvs-guide-content {
	margin-top: 6px;
}

.ktvs-guide-box {
	padding: 10px 14px !important;
	border: 1px solid #ece7e1 !important;
	border-radius: 12px !important;
	background: #fbfaf8 !important;
}

.ktvs-guide-row {
	display: grid !important;
	grid-template-columns: 170px minmax(0, 1fr) !important;
	align-items: baseline !important;
	gap: 14px !important;
	min-width: 0 !important;
	padding: 4px 0 !important;
}

.ktvs-guide-row strong {
	display: block !important;
	margin: 0 !important;
	color: #4a4a4a !important;
	font-size: 11px !important;
	font-weight: 700 !important;
	line-height: 1.35 !important;
}

.ktvs-guide-row span {
	display: block !important;
	color: #858585 !important;
	font-size: 10.5px !important;
	font-weight: 400 !important;
	line-height: 1.35 !important;
}

/* RESET */

table.variations tr.ktvs-row .reset_variations {
	display: block !important;
	width: fit-content !important;
	margin: 9px auto 0 !important;
	color: #cf7d26 !important;
	font-size: 10px !important;
	font-weight: 500 !important;
	line-height: 1.2 !important;
	text-decoration: none !important;
}

/* TABLET + MOBILE: 3 columns stay */

@media (max-width: 900px) {
	.ktvs-options {
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
		gap: 6px !important;
	}

	.ktvs-option {
		min-height: 68px !important;
		padding: 7px 5px !important;
		font-size: 10.5px !important;
	}

	.ktvs-option-icon {
		width: 29px !important;
		height: 29px !important;
		flex-basis: 29px !important;
	}

	.ktvs-option-icon svg {
		width: 14px !important;
		height: 14px !important;
	}

	.ktvs-guide-row {
		grid-template-columns: 128px minmax(0, 1fr) !important;
		gap: 10px !important;
	}

	.ktvs-guide-row strong {
		font-size: 10.5px !important;
	}

	.ktvs-guide-row span {
		font-size: 10px !important;
	}
}

/* Very narrow phones only */
@media (max-width: 360px) {
	.ktvs-options {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}

	.ktvs-guide-row {
		grid-template-columns: 105px minmax(0, 1fr) !important;
		gap: 8px !important;
	}
}