@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@700&display=swap');


:root {
	/* COLOURS */
	/* Theme */
	--th-blue-default: #11094F;
	--th-grey-10: #E6E6E7;
	--th-grey-20: #CECDD0;
	--th-grey-50: #848389;
	--th-grey-70: #4B4B56;
	--th-violet-default: #763AD6;
	--th-violet-20: #E4D8F7;
	--th-violet-50: #BB9DEB;
	--th-violet-110: #6A34C1;
	--th-violet-120: #5E2EAB;
	--th-aqua: #8DEAFF;
	--th-cream: #F6F4F2;
	--th-cream-orange: #FFF2DE;
	/* Text */
	--th-text-color-primary: #11094F;
	--th-text-color-secondary: #33304E;
	--th-text-color-tertiary: #763AD6;
	--th-text-color-muted: #64647B;
	--th-text-color-inverted: #FFFFFF;
	/* Border */
	--th-border-color-grey: #B8B5CA;
	--th-border-color-violet: #BB9DEB;
	--th-border-radius: 8px;
	/* Hr */
	--th-hr-height: 1px;
	--th-hr-color: #B8B5CA;
	/* Fill */
	--th-fill-color: #FFFFFF;
	/* Button */
	--th-btn-border-radius: 4px;
}

body {
	font-family: 'Inter', sans-serif;
}

/* TEXT */

.th-text-primary {
	color: var(--th-text-color-primary) !important;
}

.th-text-secondary {
	color: var(--th-text-color-secondary) !important;
}

.th-text-muted {
	color: var(--th-text-color-muted) !important;
}

.th-text-S {
	/* Edita Web/Body S */
	color: var(--th-text-color-primary);
	font-family: Inter;
	font-size: 14px;
	font-style: normal;
	font-weight: 400;
	line-height: 140%;
}

.th-text-S-bold {
	/* Edita Web/Body S Bold*/
	color: var(--th-text-color-primary);
	font-family: Inter;
	font-size: 14px;
	font-style: normal;
	font-weight: 700;
	line-height: 140%;
}

.th-text-M {
	/* Edita Web/Body M */
	color: var(--th-text-color-primary);
	font-family: Inter;
	font-size: 18px;
	font-style: normal;
	font-weight: 400;
	line-height: 150%; /* 27px */
}

.th-text-M-reduced-line-height {
	/* Edita Web/Body M - Reduced line height */
	color: var(--th-text-color-primary);
	font-family: Inter;
	font-size: 18px;
	font-style: normal;
	font-weight: 400;
	line-height: 120%; /* 27px */
}

/* Edita Web/Body L */
.th-text-L {
	color: var(--th-text-color-primary);
	font-family: Inter;
	font-size: 20px;
	font-style: normal;
	font-weight: 400;
	line-height: 150%; /* 30px */
}

/* Edita Web/Otsikko H3 */
.th-text-h3 {
	color: var(--th-text-color-primary);
	font-family: Inter;
	font-size: 31px;
	font-style: normal;
	font-weight: 600;
	line-height: 150%; /* 46.5px */
}

/* Edita Web/Otsikko H4 */
.th-text-h4 {
	color: var(--th-text-color-primary);
	font-size: 24px;
	font-style: normal;
	font-weight: 600;
	line-height: 150%; /* 36px */
}

.th-text-subtitle {
	color: var(--th-text-color-primary);
	font-family: Inter;
	font-size: 14px;
	font-style: normal;
	font-weight: 700;
	line-height: 120%; /* 16.8px */
	text-transform: uppercase;
}

.th-text-product-card-subtitle {
	color: var(--th-text-color-primary);
	font-family: Inter;
	font-size: 13px;
	font-style: normal;
	font-weight: 400;
	line-height: 120%; /* 15.6px */
	letter-spacing: 1.04px;
	text-transform: uppercase;
}

.th-text-product-card-title {
	color: var(--th-text-primary);
	font-family: Inter;
	font-size: 16px;
	font-style: normal;
	font-weight: 700;
	line-height: normal;
}

.th-text-product-card-price {
	color: var(--th-text-primary);
	font-family: Open Sans;
	font-size: 16px;
	font-style: normal;
	font-weight: 700;
	line-height: normal;
}

.th-text-product-card-price-L {
	color: var(--th-text-color-tertiary);
	font-family: Open Sans;
	font-size: 22px;
	font-style: normal;
	font-weight: 700;
	line-height: 89%;
}

.th-text-product-card-qty {
	color: var(--th-text-primary);
	font-family: Inter;
	font-size: 14px;
	font-style: normal;
	font-weight: 700;
	line-height: 120%; /* 16.8px */
	letter-spacing: 0.28px;
}

.th-text-product-card-details-label {
	color: var(--th-text-color-secondary);
	font-family: Inter;
	font-size: 12px;
	font-style: normal;
	font-weight: 400;
	line-height: 163%;
	letter-spacing: 0.12px;
	text-transform: uppercase;
}

.th-text-product-card-details-value {
	color: var(--th-text-color-primary);
	font-family: Inter;
	font-size: 14px;
	font-style: normal;
	font-weight: 400;
	line-height: 140%;
}

.th-text-product-card-details-value-vac {
	color: var(--th-grey-50);
}

/* BACKGROUND */
.th-bg-primary {
	background-color: var(--th-cream);
}

.th-bg-cream-orange {
	background-color: var(--th-cream-orange);
}

.th-rounded {
	border-radius: var(--th-border-radius);
}

.th-bg-fill {
	background-color: var(--th-fill-color);
}

/* BUTTON */

/* PRIMARY */
.th-btn-primary {
	display: inline-flex;
	padding: 12px 16px;
	align-items: center;
	color: var(--th-text-color-inverted);
	text-align: center;
	font-size: 16px;
	font-weight: 600;
	font-style: normal;
	line-height: 120%; /* 19.2px */
	background-color: var(--th-violet-default);
	width: auto;
	border: 1px solid var(--th-violet-110);
	border-radius: var(--th-btn-border-radius);
	box-shadow: 1px 1px 2px 0px rgba(17, 9, 79, 0.10);
}

	.th-btn-primary:hover {
		background-color: var(--th-violet-110);
	}

	.th-btn-primary:active {
		border: 1px solid var(--th-violet-default);
		background-color: var(--th-violet-120);
		box-shadow: 1px 1px 2px 0px rgba(17, 9, 79, 0.10), 2px 2px 4px 0px rgba(17, 9, 79, 0.20) inset;
	}

	.th-btn-primary:focus {
		border: 3px solid var(--th-violet-50);
		box-shadow: 1px 1px 2px 0px rgba(17, 9, 79, 0.10);
	}

	.th-btn-primary:disabled {
		color: var(--th-grey-20);
		background-color: var(--th-grey-70);
	}

/* SECONDARY */
.th-btn-secondary {
	display: inline-flex;
	padding: 12px 16px;
	align-items: center;
	color: var(--th-violet-120);
	text-align: center;
	font-size: 16px;
	font-style: normal;
	font-weight: 600;
	line-height: 120%; /* 19.2px */
	border: 1px solid var(--th-violet-120);
	background-color: unset;
	width: auto;
	border-radius: var(--th-btn-border-radius);
	box-shadow: 1px 1px 2px 0px rgba(17, 9, 79, 0.05);
}

	.th-btn-secondary:hover {
		background: var(--th-violet-20);
	}

	.th-btn-secondary:active {
		box-shadow: 4px 4px 4px 0px rgba(17, 9, 79, 0.10) inset, 1px 1px 2px 0px rgba(17, 9, 79, 0.05);
	}

	.th-btn-secondary:focus {
		border: 3px solid var(--th-violet-50);
	}

	.th-btn-secondary:disabled {
		border: 1px solid var(--th-border-color-grey);
		background: var(--th-grey-10);
	}


/* TERTIARY */
.th-btn-tertiary {
	display: inline-flex;
	padding: 12px 16px;
	align-items: center;
	color: var(--th-violet-110);
	text-align: center;
	font-size: 16px;
	font-style: normal;
	font-weight: 600;
	line-height: 120%; /* 19.2px */
	border: unset;
	background-color: unset;
	width: auto;
	border-radius: var(--th-btn-border-radius)
}
	.th-btn-tertiary:hover, .th-btn-tertiary:active {
		text-decoration-line: underline;
		color: var(--th-violet-120);
	}

	.th-btn-tertiary:focus {
		text-decoration-line: underline;
		color: var(--th-violet-120);
		border: 3px solid var(--th-violet-50);
	}

	.th-btn-tertiary:disabled {
		text-decoration-line: line-through;
		color: var(--th-text-color-muted);
	}

.th-btn-product-card-details-more-info {
	color: var(--th-text-color-muted);
	text-align: center;
	font-family: Inter;
	font-size: 14px;
	font-style: normal;
	font-weight: 700;
	line-height: 100%;
	background-color: unset;
	border: unset;
}

/* BORDER / HR */

.th-border, .th-border-primary {
	border-color: var(--th-border-color-grey);
}

hr {
	height: var(--th-hr-height);
	color: var(--th-hr-color);
}

/* LINK */
.th-text-link-blue {
	color: var(--th-text-color-primary);
	text-decoration-line: underline;
}

	.th-text-link-blue:hover, .th-text-link-blue:active, .th-text-link-blue:focus {
		color: var(--th-text-color-primary);
	}

.th-text-link-violet {
	color: var(--th-text-color-tertiary);
	text-decoration-line: underline;
}

	.th-text-link-violet:hover, .th-text-link-violet:active, .th-text-link-violet:focus {
		color: var(--th-violet-120);
	}

.th-front-page-username-wrapper, .th-front-page-password-wrapper {
	max-width: 250px;
}
/* HR DOTTED */
.th-hr-dotted {
	border-top: 2px dotted var(--th-hr-color);
}

/* INPUTS */

/* TEXT */
.th-input-text {
	width: 225px;
	height: 37px;
	color: var(--th-text-color-muted);
	font-family: Inter;
	font-size: 14px;
	font-style: normal;
	font-weight: 400;
	line-height: 120%; /* 16.8px */
	letter-spacing: 0.28px;
}

	/*.th-input-text:active, .th-input-text:focus {
		border: 3px solid var(--th-border-color-violet);
		border-color: var(--th-border-color-violet);
	}*/

.th-input-text-label {
	color: var(--th-text-secondary);
	font-family: Inter;
	font-size: 14px;
	font-style: normal;
	font-weight: 400;
	line-height: 150%; /* 21px */
}


/*-----------------------------------*/
/*		PAGE SPECIFIC BEGINS		 */
/*-----------------------------------*/

/* LOG IN FORM & QUICK LINKS FRONT-PAGE */
.th-front-page-login-form-container, .th-front-page-quick-links-container {
	border-radius: var(--th-border-radius);
	background-color: var(--th-fill-color);
	box-shadow: 0px 2px 8px 0px rgba(17, 9, 79, 0.10);
	max-height: 760px;
}

/* PRODUCT CARDS FRONT-PAGE */

.th-front-page-product-card-container.first-product-row {
	margin-bottom: 150px;
}

.th-front-page-product-card-container.second-product-row {
	margin-bottom: 100px;
}

/* PRODUCT PAGE */
.th-product-page-qty-input-field {
	max-width: 50px;
}

.th-product-page-product-details-wrapper {
	width: 320px;
}
@media (max-width: 379px) {
	.th-product-page-product-details-custom-margin-top {
		margin-top: 0.5rem; /* Equals mt-2 */
	}
}