/* css variables */ 
:root {
	--product-option-width: clamp(480px, 33.3333vw, 655px);
}

/* make close button display above preview configuration layer */
html.config-preview-open #btn-close-fullscreen {
	z-index: 3;
}

/* tooltip specific css for config preview */
.ui-tooltip-config-preview {
	max-width: 320px;
}

.ui-tooltip-config-preview > .ui-tooltip-content {
	padding: 15px 0px;
}

.ui-tooltip-config-preview  .preview-config-wrapper {
	display: grid;
	grid-gap: 1px;
}

.ui-tooltip-config-preview .preview-config-wrapper > .grid-item {
	line-height: 1;
}

.ui-tooltip-config-preview .preview-config-wrapper > .grid-item > canvas {
	max-height: 90px;
}

/* hide on desktop */
#product-overlay-control {
	display: none;
}

/* spinner animation for loading menu content */
#product-option-info.menu-loading::after {
	content: "";
	display: block;
	position: absolute;
	border: 7px solid rgba(0,0,0,0.1);
	border-top: 7px solid rgba(0,0,0,0.3);
	border-radius: 50%;
	width: 100px;
	height: 100px;
	animation: spin 2s linear infinite;
	top: 50%;
	left: 50%;
	margin-left: -50px;
	margin-top: -50px;
}

/* needed to add this somewhat complicated solution to get the dashed underline when hovering dimensions under branding methods */
#product-option-content .content :not(.circle-grid-view) .option-value-wrapper .wrapper-label.color-1 .overlay-dim > span.underline::after {
	background: repeating-linear-gradient(90deg, transparent 0, #f37021 1px, #f37021 .25em, transparent calc(.25em + 1px), transparent .5em);
}

#product-option-content .content :not(.circle-grid-view) .option-value-wrapper .wrapper-label.color-2 .overlay-dim > span.underline::after {
	background: repeating-linear-gradient(90deg, #fff 0, #00aeef 1px, #00aeef .25em, #fff calc(.25em + 1px), #fff .5em);
}

#product-option-content .content :not(.circle-grid-view) .option-value-wrapper .wrapper-label.color-3 .overlay-dim > span.underline::after {
	background: repeating-linear-gradient(90deg, #fff 0, #ef5ba1 1px, #ef5ba1 .25em, #fff calc(.25em + 1px), #fff .5em);
}

#product-option-content .content :not(.circle-grid-view) .option-value-wrapper .wrapper-label.color-4 .overlay-dim > span.underline::after {
	background: repeating-linear-gradient(90deg, #fff 0,  #67c18c 1px, #67c18c .25em, #fff calc(.25em + 1px), #fff .5em);
}

#product-option-content .content :not(.circle-grid-view) .option-value-wrapper .wrapper-label.color-5 .overlay-dim > span.underline::after {
	background: repeating-linear-gradient(90deg, #fff 0, #ffc20e 1px, #ffc20e .25em, #fff calc(.25em + 1px), #fff .5em);
}

#product-option-content .content :not(.circle-grid-view) .option-value-wrapper .wrapper-label.color-6 .overlay-dim > span.underline::after {
	background: repeating-linear-gradient(90deg, #fff 0, #92278f 1px, #92278f .25em, #fff calc(.25em + 1px), #fff .5em);
}

#product-option-content .content :not(.circle-grid-view) .option-value-wrapper .wrapper-label.color-7 .overlay-dim > span.underline::after {
	background: repeating-linear-gradient(90deg, #fff 0, #939598 1px, #939598 .25em, #fff calc(.25em + 1px), #fff .5em);
}

#product-option-content .content :not(.circle-grid-view) .option-value-wrapper .wrapper-label.color-8 .overlay-dim > span.underline::after {
	background: repeating-linear-gradient(90deg, #fff 0, #017feb 1px, #017feb .25em, #fff calc(.25em + 1px), #fff .5em);
}

#product-option-content .content :not(.circle-grid-view) .option-value-wrapper .wrapper-label.color-9 .overlay-dim > span.underline::after {
	background: repeating-linear-gradient(90deg, #fff 0, #231f20 1px, #231f20 .25em, #fff calc(.25em + 1px), #fff .5em);
}

#product-option-content .content :not(.circle-grid-view) .option-value-wrapper .wrapper-label.color-10 .overlay-dim > span.underline::after {
	background: repeating-linear-gradient(90deg, #fff 0, #cbdb2a 1px, #cbdb2a .25em, #fff calc(.25em + 1px), #fff .5em);
}

#product-option-content .content :not(.circle-grid-view) .option-value-wrapper .wrapper-label.color-11 .overlay-dim > span.underline::after {
	background: repeating-linear-gradient(90deg, #fff 0, #005d83 1px, #005d83 .25em, #fff calc(.25em + 1px), #fff .5em);
}

/* product styling */
#main  #product {
	padding-top: 0;
	padding-bottom: 0;
	overflow-x: clip;
}

/* this header is only visible on mobile */
#product .canvas-container > .headline {
	display: none;
}

#product .flex-row {
	flex-wrap: nowrap;
}

#product .canvas-container {
	position: relative;
	flex: 1;
	padding-top: 65px;
	padding-bottom: 30px;
}

#product .product-option-container {
	flex: 0 0 var(--product-option-width);
	position: relative;
}

/* positioning of canvas is off without this */
html.logo-editor-open #product .canvas-container {
	position: initial;
}

#product .wrapper .container {
	max-width: 100%;
}

#overlay-carousel {
	overflow: hidden;
}

#overlay-carousel > ul,
#overlay-thumbnail-carousel > ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

#overlay-carousel .overlay-wrapper {
	contain: paint;
	backface-visibility: hidden;
}

#overlay-carousel .overlay-wrapper.slide-in > canvas,
#overlay-carousel .overlay-wrapper.slide-out-left > canvas,
#overlay-carousel .overlay-wrapper.slide-out-right > canvas {
	pointer-events: none;
}

#overlay-carousel .overlay-wrapper.slide-in .ui-overlay-controls-wrapper,
#overlay-carousel .overlay-wrapper.slide-out-left .ui-overlay-controls-wrapper,
#overlay-carousel .overlay-wrapper.slide-out-right .ui-overlay-controls-wrapper {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

/* slide out left */
#overlay-carousel .overlay-wrapper.slide-out-left:not(.ui-display-loader) {
	animation: cubic-bezier(0.250,0.1,0.250,1) slide-out-left .45s;
	animation-fill-mode: forwards;
}

/* slide in from opposier direction */
#overlay-carousel .overlay-wrapper.slide-out-left.slide-in:not(.ui-display-loader)  {
	animation: cubic-bezier(0.33,1,0.68,1) slide-in-left .45s;
}

/* slide out right */
#overlay-carousel .overlay-wrapper.slide-out-right:not(.ui-display-loader) {
	animation: cubic-bezier(0.250,0.1,0.250,1) slide-out-right .45s;
	animation-fill-mode: forwards;
}

/* slide in from opposier direction */
#overlay-carousel .overlay-wrapper.slide-out-right.slide-in:not(.ui-display-loader)  {
	animation: cubic-bezier(0.33,1,0.68,1) slide-in-right .45s;
}

/* navigation slider dots + arrows */
#overlay-carousel ul > li > .slider-nav {
	position: absolute;
	bottom: 20px;
	left: 0;
	right: 0;
	padding-left: 8px;
	padding-right: 8px;
	margin: 0 auto;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 12px;
	width: fit-content;
	height: 32px;
	transition: visibility 0.2s linear, opacity 0.2s linear;
	visibility: visible;
	opacity: 1;
	z-index: 1;
	background-color: rgba(255, 255, 255, 0.15);
	backdrop-filter: blur(5px);
	border-radius: 16px;
	pointer-events: none;
}

/* hide slider nav when branding menu is open */
#product.branding-menu-open #overlay-carousel ul > li > .slider-nav {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	touch-action: none;
}

/* arrows */
#overlay-carousel ul > li > .slider-nav > .slider-arrow {
	position: relative;
	width: 28px;
	height: 28px;
	border: none;
	background: transparent;
	padding: 0;
	cursor: pointer;
	pointer-events: all;
}

#overlay-carousel ul > li > .slider-nav > .slider-arrow::before {
	transition: color 140ms linear;
}

#overlay-carousel ul > li > .slider-nav > .slider-arrow::before {
	font-family: "Material Icons";
	-webkit-font-feature-settings: "liga";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 24px;
	line-height: 1;
	color: rgba(0,0,0,0.3);
	content: "chevron_left";
}

#overlay-carousel ul > li > .slider-nav > .slider-arrow[disabled]::before {
	color: rgba(0,0,0,0.2);
	pointer-events: none;
}

#overlay-carousel ul > li > .slider-nav > .slider-arrow[value="next"]::before {
	content: "chevron_right";
}

@media (hover: hover) and (pointer: fine) {
	#overlay-carousel ul > li > .slider-nav > .slider-arrow:not(:disabled):hover::before {
		color: rgba(0,0,0,0.8);
	}
}

/* dots wrapper */
#overlay-carousel ul > li > .slider-nav > .slider-dots {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 12px;
	width: fit-content;
	height: 20px;
	padding: 0 15px;
	pointer-events: none;
}

/* dots */
#overlay-carousel ul > li > .slider-nav > .slider-dots > .dot {
	display: inline-block;
	position: relative;
	height: 10px;
	width: 10px;
	background-color: rgba(0,0,0,0.2);
	border-radius: 50%;
	transition: transform 140ms cubic-bezier(0.16, 1, 0.3, 1), background-color 140ms linear;
	cursor: pointer;
	pointer-events: all;
}

#overlay-carousel ul > li > .slider-nav > .slider-dots > .dot::before {
	content: "";
	position: absolute;
	height: 22px;
	width: 22px;
	border-radius: 50%;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	pointer-events: all;
}

#overlay-carousel ul > li > .slider-nav > .slider-dots > .dot.active {
	background-color: rgba(0,0,0,1);
	transform: scale(1.3333);
}

#overlay-carousel ul > li > .slider-nav > .slider-dots > .dot:not(.active):hover {
	background-color: rgba(0,0,0,0.3);
}

#overlay-carousel > ul li:not(:first-child) {
	display: none;
}

#main #product #overlay-carousel .overlay-wrapper {
	display: block;
	max-height: calc(100vh - 247px);
	min-height: calc(100vh - 247px);
	max-width: calc(100vw - var(--product-option-width));
	min-width: calc(100vw - var(--product-option-width));
	margin: 0 auto;
	width: auto;
	aspect-ratio: 4 / 3;
}

#overlay-carousel .overlay-wrapper > canvas {
	max-height: 1500px;
	min-height: 10px;
	width: 100%;
	height: 100%;
	cursor: zoom-in;
}

/* image clone of canvas */
#overlay-carousel .overlay-wrapper > .ui-cloned-overlay {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background-color: white;
}

#overlay-thumbnail-carousel {
	display: none;
}

#btn-close-fullscreen {
	display: none;
}

#product .canvas-container > .btn-favorites {
	padding: 6px;
	position: absolute;
	top: 30px;
	right: 30px;
}

#product .canvas-container > .btn-favorites > span {
	font-size: 30px;
}

/* content container for quantity menu */
#quantity-content {
	display: none;
}

/* product option styling */
#product-option {
	height: calc(100vh - 152px);
	padding-left: 45px;
	padding-right: 45px;
	box-shadow: 0 0 35px rgba(0,0,0,0.08);
	clip-path: inset(0px 0px 0px -35px);
	scrollbar-gutter: stable;
	scrollbar-width: auto;
	scrollbar-color: transparent transparent;
}

#product-option > .content {
	padding-top: 65px;
}

#product-option,
#product-option-info > .content {
	width: 100%;
	overflow-y: auto;
	overflow-x: hidden;
	overscroll-behavior: none;
}

#product-option-content .content:not(.no-scroll) {
	width: 100%;
	overflow-y: auto;
	overflow-x: hidden;
	scrollbar-width: none;
	overscroll-behavior: none;
}

#product-option-content .content:not(.no-scroll):has(.picker-wrapper) {
	scrollbar-gutter: stable;
}

#product-option.scroll-up {
	overscroll-behavior: auto;
}

#product-option-content > .content::-webkit-scrollbar,
#product-option-content .content > .box-list-view > .quantity-step-content::-webkit-scrollbar {
	display: none;
}

#product-option > .content {
	padding-bottom: 20px;
}

#product-option .content .product-name-wrapper {
	display: grid;
	row-gap: 0;
	padding-right: 75px;
}

#product-option .content .product-name-wrapper > .row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	column-gap: 16px;
	align-items: end;
}

#product-option .content .product-name-wrapper > .row > h1 {
	font-size: 28px;
	margin: 0;
	min-width: 0;
	line-height: 1.4;
	overflow: hidden;
	text-wrap: balance;
}

#product-option .content .product-name-wrapper > .row > .product-unit-price {
	justify-self: end;
	align-self: end;
	white-space: nowrap;
	line-height: 1;
	margin-bottom: 7px;
}

#product-option .content .product-name-wrapper > .row > .product-unit-extra-price {
	justify-self: end;
	white-space: nowrap;
	line-height: 1.3;
}

#product-option .content .content-header .review-stars {
	display: flex;
	align-items: center;
}

#product-option .content .content-header .review-stars > .review-count {
	margin-left: 10px;
}

#product-option-content hr,
#product-option-info hr {
	height: 1px;
	background-color: var(--border-color);
	border: none;
	margin-bottom: 45px !important;
}

#product-option .headline.column {
	display: flex;
	align-items: center;
	gap: 10px;
}

#product-option .headline.column > a.internal-anchor {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin-left: auto;
	white-space: nowrap;
	line-height: 1.9 !important;
	vertical-align: middle;
	font-size: 14px;
	font-weight: 400;
}

#product-option .headline.column > a.internal-anchor > .svg-file-type {
	width: 28px;
	height: 28px;
	margin-right: 0;
}

#product-option div:not(.h3),
#product-option label,
#product-option p,
#product-option-content div:not(.h3),
#product-option-content label,
#product-option-content .wrapper-label,
#product-option-content p {
	font-size: 13px;
}

#product-option h3,
#product-option .h3,
#product-option-content .h3,
#product-option-info .h3  {
	display: block;
	font-size: 24px;
	font-weight: 800;
	margin-top: 0;
	line-height: 1.4;
}

#product-option .content-header,
#product-option h3,
#product-option .h3 {
	margin-left: 20px;
	margin-bottom: 20px;
}

#product-option .content-header {
	position: relative;
	margin-bottom: 30px;
}

#product-option > .content ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
	width: 100%;
}

#product-option .content .product-option-nav {
	margin: 0 0 40px 0;
}

#product-option .content .product-option-nav:last-of-type {
	margin-bottom: 0;
}

#product-option .content .product-option-nav:last-of-type > li.menu-item:last-child {
	padding-bottom: 0;
}

#product-option .menu-item {
	padding-bottom: 15px;
}

#product-option .menu-item.menu-item-footer {
	padding-top: 15px;
	text-align: center;
}

#product-option .menu-item > .label-container {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	min-height: 90px;
	padding: 20px 30px;
	border: 1px solid transparent;
	background-color: var(--menu-background-color);
	border-radius: 3px;
	line-height: 1.9;
	white-space: normal;
	cursor: pointer;
}

 /* required options should display asterisk */
#product-option .menu-item > .label-container[data-required] > .label-heading > span::before {
	font-family: "Material Icons";
	content: "emergency";
	-webkit-font-feature-settings: "liga";
	color: #aaaaaa;
	position: absolute;
	display: inline-block;
	font-size: 12px;
	font-weight: 400;
	right: -15px;
}
 
/* asterisk when option is marked as invalid */
#product-option .menu-item.invalid > .label-container > .label-heading > span::before {
 	color: var(--danger-color);
}

/* hide required icon once the primary (heading-adjacent) caption is no longer default */
#product-option .menu-item > .label-container[data-required]:not(:has(> .label-heading + .label-wrapper .label-caption.label-default)) > .label-heading > span::before {
	content: "";
}

#product-option .menu-item:has(> .label-container.info) {
	display: none;
}

#product-option .menu-item > .label-container:not(.info)::after {
	font-family: "Material Icons";
	content: "chevron_right";
	-webkit-font-feature-settings: "liga";
	color: var(--dark-anchor-color);
	position: absolute;
	display: inline-block;
	font-size: 24px;
	font-weight: 400;
	top: 50%;
	right: 21px;
	margin-top: -20px;
}

#product-option-content .option-value-wrapper.extra-option > .wrapper-label.invalid > .arrow::after,
#product-option .menu-item.invalid > .label-container::after {
	color: var(--danger-color);
}

#product-option .menu-item > .content {
	height: 0;
	position: absolute;
	visibility: hidden;
}

#product-option .menu-item.transition:not(.invalid)  > .label-container {
	transition: box-shadow 1s ease-out;
	box-shadow: 0px 0px 0px 2px transparent;
}

#product-option .menu-item.active:not(.invalid) > .label-container {
	box-shadow: 0px 0px 0px 2px rgba(0,0,0,1);
	transition: none;
}

/* render rainbow highlight border around the option */
#product-option .menu-item.highlight {
	position: relative;
}

#product-option .menu-item.highlight > .label-container::before,
#product-option .menu-item.transition > .label-container::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	border-radius: inherit;
	border: 3px solid transparent;
	background: linear-gradient(90deg, rgba(141, 100, 170, 1) 0%, rgba(68, 200, 245, 1) 25%, rgba(130, 202, 156, 1) 50%, rgba(255, 205, 91, 1) 75%, rgba(238, 61, 150, 1) 100%) border-box;
	-webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
	-webkit-mask-composite: destination-out;
	mask-composite: exclude;
	pointer-events: none;
	opacity: 0;
}

#product-option .menu-item.transition > .label-container::before {
	transition: opacity 1s ease-out;
}

#product-option .menu-item.highlight > .label-container::before {
	opacity: 1;
}

/* render animated arrow pointing toward the highlighted option */
#product-option .menu-item.highlight::after,
#product-option .menu-item.transition::after {
	font-family: "Material Icons Outlined";
	-webkit-font-feature-settings: "liga";
	content: "arrow_forward";
	position: absolute;
	left: -34px;
	top: 50%;
	width: 22px;
	height: 22px;
	margin-top: -15px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 22px;
	line-height: 1;
	font-weight: 400;
	color: black;
	pointer-events: none;
	opacity: 0;
	z-index: 3;
}

#product-option .menu-item.transition::after {
	transition: opacity 1s ease-out;
}

#product-option .menu-item.highlight::after {
	opacity: 1;
	animation: highlight-arrow 0.9s ease-in-out infinite;
}

/* animate arrow with horizontal slide and fade effect */
@keyframes highlight-arrow {
	0% {
		transform: translateX(0);
		opacity: 0.7;
	}

	50% {
		transform: translateX(8px);
		opacity: 1;
	}

	100% {
		transform: translateX(0);
		opacity: 0.7;
	}
}

/* product option is invalid */
#product-option .menu-item.invalid > .label-container,
#product-option-content .content :not(.circle-grid-view) .option-value-wrapper > input:checked ~ .wrapper-label.invalid {
	box-shadow: 0px 0px 0px 2px var(--danger-color);
	transition: none;
}

/* alerts inside option menu needs a little less margin-bottom for even spacing */
#product-option .alert,
#product-option-content .alert {
	margin-bottom: 15px;
}

/* product option is invalid */
#product-option-content .content :not(.circle-grid-view) .option-value-wrapper > input:checked ~ .wrapper-label.invalid .label-caption,
#product-option-content .content :not(.circle-grid-view) .option-value-wrapper > input:checked ~ .wrapper-label.invalid .label-price,
#product-option .menu-item.invalid > .label-container .label-heading {
	color: var(--danger-color);
}

#product-option .menu-item:not(.active):not(.invalid) > .label-container:not(.info):hover,
#product-option .menu-item:not(.active):not(.invalid).hover > .label-container:not(.info) {
	box-shadow: 0px 0px 0px 1px rgba(0,0,0,0.2);
}

#product-option .menu-item  .label-heading {
	font-weight: 700;
}

#product-option .menu-item  .label-wrapper {
	width: 100%;
	max-height: 24px;
	opacity: 1;
	transition: max-height 0.15s ease-in, opacity 0.15s ease-in;
}

#product-option .menu-item  .label-wrapper .label-caption {
	color: var(--dark-anchor-color);
}

#product-option .menu-item  .label-wrapper .label-default,
#product-option-content .content .option-value-wrapper > .wrapper-label .label-default {
	color: var(--default-text-color);
}

#product-option .menu-item  .label-wrapper > .label-caption > .material-icons,
#product-option-content .content .option-value-wrapper > .wrapper-label > .label-caption > .material-icons,
#product-option-content .content .option-value-wrapper > .wrapper-label > .label-row.heading > .label-caption > .material-icons {
	background: linear-gradient(45deg, rgba(68,200,245,1) 4%, rgba(81,58,151,1) 22%, rgba(238,61,150,1) 46%, rgba(255,242,0,1) 71%, rgba(80,184,72,1) 95%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	position: absolute;
	display: inline-block;
	margin-left: 6px;
	font-size: 22px;
	margin-top: -1px;
}

#product-option-content .content .option-value-wrapper > .wrapper-label > .label-caption > .material-icons,
#product-option-content .content .option-value-wrapper > .wrapper-label > .label-row.heading > .label-caption > .material-icons {
	margin-top: -3px;
}

#product-option-content .content .option-value-wrapper > .wrapper-label > .label-row.footer {
	display: none;
}

#product-option-content .content .option-value-wrapper > input:checked ~ .wrapper-label > .label-row.footer {
	display: block;
}

#product-option-content .content .option-value-wrapper > .wrapper-label > .label-row.footer > .label-caption {
	display: block;
	padding-top: 15px;
}

#product-option-content .content .option-value-wrapper > .wrapper-label > .label-row.footer > .label-caption:not(:first-child) {
	padding-top: 10px;
}

#product-option-content .content > .box-list-view  > .option-value-wrapper.multi-row > input:checked ~ .wrapper-label:has(>.label-row.footer .label-caption:nth-of-type(1)) > span.color-circle,
#product-option-content .content > .box-list-view  > .option-value-wrapper.multi-row > input:checked ~ .wrapper-label:has(>.label-row.footer .label-caption:nth-of-type(1)) > span.img-container {
	top: -35px;
}

#product-option-content .content > .box-list-view  > .option-value-wrapper.multi-row > input:checked ~ .wrapper-label:has(>.label-row.footer .label-caption:nth-of-type(2)) > span.color-circle,
#product-option-content .content > .box-list-view  > .option-value-wrapper.multi-row > input:checked ~ .wrapper-label:has(>.label-row.footer .label-caption:nth-of-type(2)) > span.img-container {
	top: -70px;
}

#product-option-content > .content > .box-list-view.color-option .option-value-wrapper > .wrapper-label > .color-circle ~ .label-row.footer,
#product-option-content > .content > .box-list-view.color-option .option-value-wrapper > .wrapper-label > .img-container ~ .label-row.footer,
#product-option-content > .content > .box-list-view .option-value-wrapper > .wrapper-label > .img-container ~ .label-row.footer {
	margin-bottom: -10px;
	margin-left: 3px;
}

#product-option-content > .content > .box-list-view.color-option .option-value-wrapper > .wrapper-label > .color-circle ~ .label-row.footer > .label-caption:first-child,
#product-option-content > .content > .box-list-view.color-option .option-value-wrapper > .wrapper-label > .img-container ~ .label-row.footer > .label-caption:first-child {
	padding-top: 25px;
}

#product-option-content > .content > .box-list-view.color-option .option-value-wrapper > .wrapper-label > .color-circle ~ .label-row.footer > .label-caption:not(:first-child),
#product-option-content > .content > .box-list-view.color-option .option-value-wrapper > .wrapper-label > .img-container ~ .label-row.footer > .label-caption:not(:first-child) {
	padding-top: 10px;
}

#product-option-content .content .design-method-online .option-value-wrapper > input:checked ~ .wrapper-label > .label-row.logotype.bright ~ .label-row.footer {
	margin-top: 25px;
}

#product-option-content .content .option-value-wrapper > .wrapper-label > .label-row.footer > .label-caption > .material-icons-outlined {
	vertical-align: text-bottom;
	font-size: 18px;
	margin-right: 5px;
}

#product-option .menu-item  .label-wrapper.transition {
	max-height: 0;
	opacity: 0;
	transition: max-height 0.15s ease-out, opacity 0.15s ease-out;
	overflow: hidden;
}

#product-option .menu-item .label-price {
	float: right;
	clear: both;
	margin-right: 45px;
}

#product-option .menu-item  > .label-container.info .label-price {
	margin-right: 0;
}

#product-option .menu-item .label-color,
#product-option-content .label-color {
	position: relative;
	display: inline-block;
	border-radius: 50%;
	width: 15px;
	height: 15px;
	margin-left: 7px;
	top: 3px;
}

#product-option .menu-item > .label-container.canvas {
	padding-left: 110px;
}

#product-option .menu-item > .label-container.canvas > .branding-canvas {
	position: absolute;
	left: 0;
	width: auto;
	max-width: 100%;
	max-height: 70px;
	margin: 10px;
	padding-bottom: 1px;
	mix-blend-mode: multiply;
}

/* hovering branding canvas display an arrow */
#product-option .menu-item > .label-container.canvas > .branding-canvas + .arrow {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	margin: auto 0;
	width: 28px;
	height: 28px;
	opacity: 0;
	transition: opacity .15s ease-in;
	pointer-events: none;
}

#product-option .menu-item > .label-container.canvas > .branding-canvas + .arrow::after {
	font-family: "Material Icons";
	content: "arrow_left";
	-webkit-font-feature-settings: "liga";
	font-size: 28px;
	width: 28px;
	height: 28px;
	font-weight: 400;
	color: black;
	line-height: 1;
}

#product-option .menu-item > .label-container.canvas > .branding-canvas:hover + .arrow {
	opacity: 1;
}

/* product options footer */
#product-option-footer {
	margin-left: -15px;
	margin-right: -15px;
}

#product-option-footer > .sticky {
	height: 90px;
	position: absolute;
	left: 30px;
	right: 46px;
	bottom: 0;
	background-color: var(--background-color);
	z-index: 1;
	opacity: 0;
	transform: translateY(15px);
	pointer-events: none;
}

/* transitions effects */
#product-option-footer.transition > .sticky {
	transition: transform 0.5s ease, opacity 0.3s ease;
	backface-visibility: hidden;
	perspective: 1000;
}

#product-option-footer.footer-sticky > .sticky {
	opacity: 1;
	transform: translateY(0);
	pointer-events: all;
}

#product-option-footer > .sticky::before {
	content: "";
	position: absolute;
	height: 44px;
	left: 0;
	right: 0;
	top: 0;
	box-shadow: 0px -10px 20px -20px rgba(0,0,0,1);
	pointer-events: none;
}

#product-option-footer > .sticky > .flex-row {
	height: 100%;
}

#product-option-footer .flex-column {
	margin: 0;
	padding-right: 15px;
	padding-left: 15px;
	flex: 1;
}

#product-option-footer .footer-container {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	position: relative;
	white-space: nowrap;
}

#product-option-footer .btn {
	margin: 0;
	max-width: none;
	padding: 18px 50px;
}

#product-option-footer .btn.btn-done {
	display: none;
} 

#product-option-footer .flex-row > .flex-column .footer-container  .btn-input {
	padding: 13px 20px;
	max-height: 50px;
	max-width: 140px;
	overflow-x: hidden;
}

#product-option-footer .flex-row > .flex-column .btn-input.btn-quantity {
	text-align: left;
	font-size: 14px;
	min-height: 54px;
	padding: 18px 30px 20px 25px;
	margin: 0;
	border-radius: 3px;
}

#product-option-footer .flex-row > .flex-column .btn-input.btn-quantity.transition {
	transition: box-shadow 1s ease-out;
	box-shadow: 0px 0px 0px 2px transparent;
}

#product-option-footer .flex-row > .flex-column .btn-input.btn-quantity::after {
	font-family: "Material Icons";
	content: "chevron_right";
	-webkit-font-feature-settings: "liga";
	font-size: 20px;
	font-weight: 400;
	position: absolute;
	top: 50%;
	margin-top: -10px;
	right: 10px;
	color: var(--button-inverse-text-color);
}

#product-option-footer .flex-row > .flex-column .footer-container .btn-input  > span {
	font-size: 18px;
	color: var(--button-inverse-text-color);
}

/* price css for sticky footer */
#product-option-footer > .sticky .footer-container.price-container {
	display: flex;
	align-items: center;
}

#product-option-footer > .sticky .price-container > .price {
	position: relative;
	font-size: 24px;
	font-weight: 500;
}

#product-option-footer > .sticky .price-container > .price > span {
	font-size: 0.7em;
}

#product-option-footer > .sticky .price-container > .price[data-tax] {
	line-height: 10px;
}

#product-option-footer > .sticky .price-container > .price[data-tax]::after {
	content: "\a" attr(data-tax);
	color: black;
	white-space: pre;
	font-size: 11px;
	line-height: 0;
	font-weight: 400;
}

#product-option-footer > .sticky .btn {
	font-size: 16px;
	font-weight: 500;
}

#product-option-footer > .sticky .btn-cart,
#product-option-footer > .sticky .btn-done {
	max-width: 220px;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
	border: 0;
}

/* medium resolution adapations */
@media only screen and (max-width: 1670px) {
	#product-option-footer > .sticky .btn-cart,
	#product-option-footer > .sticky .btn-done {
		padding: 18px 30px;
	}
}

/* static product options footer */
#product-option-footer  > .static {
	position: relative;
	display: flex;
	flex-wrap: initial;
	flex-direction: column;
	margin-bottom: 20vh;
	pointer-events: none;
}

#product-option-footer.footer-static  > .static {
	pointer-events: all;
}

#product-option-footer  > .static .flex-column.button-container {
	margin-top: 45px;
}

#product-option-footer  > .static .flex-column .btn-input.btn-quantity {
	display: flex;
	align-items: center;
	padding: 38px 40px 38px 30px;
	margin-bottom: 35px;
	background-color: var(--menu-background-color);
}

#product-option-footer  > .static .flex-column .btn-input.btn-quantity > span {
	font-size: 12px;
	margin-left: auto;
	margin-right: 20px;
}

#product-option-footer  > .static .flex-column .btn-input.btn-quantity::after {
	font-size: 24px;
	right: 21px;
	margin-top: -12px;
}

#product-option-footer  > .static .footer-container.price-summary,
#product-option-footer  > .static .footer-container.config-container {
	margin-top: 20px;
}

#product-option-footer  > .static  .price-container {
	flex-direction: column;
}

#product-option-footer  > .static  .price-container > .price {
	font-weight: 500;
	font-size: 42px;
	align-items: baseline;
	line-height: 1;
	margin-top: 20px;
	margin-bottom: 20px;
}

#product-option-footer  > .static  .price-container > .price > span {
	font-size: 0.7em;
}

#product-option-footer > .static .footer-container.tax-container {
	font-weight: 400;
	line-height: 2.5;
}

#product-option-footer > .static .footer-container.discount-container {
	font-weight: 500;
	margin-top: 10px;
	padding: 10px 0;
	background-color: #ffeec0;
}

#product-option-footer > .static .footer-container.discount-container > .discount > strong {
	font-size: 12px;
}

#product-option-footer > .static .footer-container.tax-container > .tax > span {
	color: var(--action-color);
}

#product-option-footer > .static .btn {
	font-size: 20px;
}

#product-option-footer > .static .btn {
	padding: 25px 25px;
}

/* product option footer usp */
#product-option-footer .footer-usp-wrapper {
	margin-top: 65px;
	padding-top: 65px;
	margin-right: 30px;
	margin-left: 30px;
	border-top: 1px solid var(--border-color);
}

#product-option-footer .footer-usp > ul,
#product-option-footer .footer-usp > ul li {
	list-style-type: none;
	margin: 0;
	padding: 0;
	width: 100%;
}

#product-option-footer .footer-usp > ul.nav {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
}

#product-option-footer .footer-usp > ul.nav > li.menu-item {
	display: block;
}

#product-option-footer .footer-usp > ul.nav > li.menu-item > a {
	position: relative;
	display: flex;
	align-items: center;
	border-bottom: 1px solid var(--border-color);
	padding: 30px 5px;
}

#product-option-footer .footer-usp > ul.nav > li.menu-item > a::after {
	font-family: "Material Icons";
	content: "chevron_right";
	-webkit-font-feature-settings: "liga";
	font-size: 24px;
	font-weight: 400;
	position: absolute;
	right: 0;
	top: 50%;
	margin-top: -20px;
	color: var(--dark-anchor-color); 
}

#product-option-footer .footer-usp > ul.nav > li.menu-item:last-child > a {
	border-bottom-color: transparent;
}

#product-option-footer .footer-usp > ul.nav > li.menu-item > a > .material-icons,
#product-option-footer .footer-usp > ul.nav > li.menu-item > a > .material-icons-outlined {
	margin-right: 15px;
	vertical-align: middle;
}

/* product added styling */
.product-added-menu {
	visibility: hidden;
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	width: 570px;
	background-color: var(--background-color);
	z-index: 6;
	transform: translateX(100%);
	box-shadow: 0 0 25px rgba(0,0,0,0.25);
	clip-path: inset(0px 0px 0px -25px);
	border-left: 1px solid rgba(0,0,0,0);
}

.product-added-menu.transition {
	transition: visibility 0s linear 0.2s, transform 0.2s cubic-bezier(0,0,0.1,1);
}

.product-added-menu.active {
	visibility: visible;
	transform: translateX(0);
	transition: visibility 0s linear 0s, transform 0.2s cubic-bezier(0,0,0.1,1);
}

.product-added-menu > .content-title {
	position: relative;
	display: flex;
	align-items: center;
	font-size: 24px;
	padding-top: 27px;
	padding-bottom: 20px;
	font-weight: 700;
	line-height: 1.4;
	margin: 0;
}

.product-added-menu > .content {
	width: 100%;
	height: calc(100vh);
	overflow-y: auto;
	overflow-x: hidden;
	overscroll-behavior: none;
	scroll-behavior: smooth;
	padding-top: 10px;
	padding-bottom: 200px;
}

.product-added-menu > .content-title,
.product-added-menu > .content,
.product-added-menu > .content-footer {
	padding-left: 45px;
	padding-right: 45px;
}

.product-added-menu .content .flex-row {
	margin-bottom: 25px;
	gap: 15px;
}

.product-added-menu .content .product-box {
	cursor: pointer;
	border-radius: 4px;
	transition: background-color 0.1s linear;
}

.product-added-menu .content .accessories .flex-row:hover {
	background-color: var(--menu-background-color);
}

.product-added-menu .content .flex-row:hover span.underline::after {
	opacity: 1
}

.product-added-menu .content .flex-column {
	justify-content: center;
}

.product-added-menu .content .flex-column.text-right {
	flex-direction: row;
	align-items: center;
	gap: 4px;
}

.product-added-menu .content .flex-column.image {
	flex: 0 0 160px;
	mix-blend-mode: multiply;
}

.product-added-menu .content .flex-column small {
	font-size: small;
	margin-right: 5px;
}

.product-added-menu .content .img-container {
	position: relative;
	max-width: 160px;
	max-height: 120px;
	padding: 10px;
}

.product-added-menu .content,
.product-added-menu .content div,
.product-added-menu .content p {
	font-size: 13px;
	line-height: 1.8;
}

.product-added-menu .content .name {
	font-size: 16px;
	line-height: 1.4;
	font-weight: 800;
	display: block;
	text-wrap: balance;
	margin-bottom: 5px;
}

.product-added-menu .content a.name > .underline::after {
	bottom: 2px;
}

.product-added-menu .content hr {
	display: block;
	height: 1px;
	background-color: var(--border-color);
	border: none;
	margin-bottom: 25px;
}

.product-added-menu .content .description,
.product-added-menu .content .description p {
	font-size: 15px;
}

.product-added-menu .content .internal-anchor {
	color: var(--anchor-color);
	transition: color 0.2s linear;
	-webkit-user-select: none;
	user-select: none;
}

.product-added-menu .content .internal-anchor  > span.underline::after {
	background-color: var(--anchor-color);
	bottom: 0.25em;
}

.product-added-menu .content .sub-header > strong {
	display: block;
	font-size: 20px;
	padding-top: 15px;
	margin-bottom: 45px;
}

.product-added-menu .btn-close {
	position: absolute;
	top: 20px;
	right: 20px;
	z-index: 2;
}

.product-added-menu .btn-close > span {
	font-size: 28px;
}

.product-added-menu > .content-footer {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-top: 35px;
	padding-bottom: 35px;
	background-color: var(--background-color);
	gap: 20px;
}

.product-added-menu  > .content-footer .btn {
	display: block;
	margin: 0;
}

.product-added-menu  > .content-footer .btn:only-child  {
	max-width: 320px;
	margin: 0 auto;
}

.product-added-menu > .content.fixed-footer {
	height: calc(100vh - 214px);
}

.product-added-menu > .content.fixed-footer.large-footer {
	height: calc(100vh - 297px);
}

.product-added-menu.header-overflow > .content-title::before {
	content: "";
	position: absolute;
	height: 44px;
	bottom: 0;
	left: 40px;
	right: 40px;
	box-shadow: 0px 10px 20px -20px rgba(0,0,0,1);
	z-index: 1;
	pointer-events: none;
}

.product-added-menu.footer-overflow > .content-footer::before {
	content: "";
	position: absolute;
	height: 44px;
	top: 0;
	left: 40px;
	right: 40px;
	box-shadow: 0px -10px 20px -20px rgba(0,0,0,1);
	pointer-events: none;
}

.product-added-menu > .content::-webkit-scrollbar { 
	width: 2px;
	background: transparent;
}

.product-added-menu > .content::-webkit-scrollbar-thumb {
	background-color: black;
}

/* product option content styling */
#product-option-content {
	visibility: hidden;
	position: absolute;
	top: -92px;
	right: 0;
	bottom: -60px;
	width: 570px;
	background-color: var(--background-color);
	z-index: 3;
	transform: translateX(100%);
	box-shadow: 0 0 25px rgba(0,0,0,0.25);
	clip-path: inset(0px 0px 0px -25px);
	border-left: 1px solid rgba(0,0,0,0);
}

#product-option-content.active.level-2 {
	box-shadow: unset;
	border-left: 1px solid white;
}

#product-option-content.transition {
	transition: visibility 0s linear 0.2s, transform 0.2s cubic-bezier(0,0,0.1,1);
	z-index: 5;
}

#product-option-content.transition.active {
	visibility: visible;
	transform: translateX(0);
	transition: visibility 0s linear 0s, transform 0.2s cubic-bezier(0,0,0.1,1);
}

#product-option-content .content-title,
#product-option-info .content-title {
	position: relative;
	font-size: 24px;
	padding-top: 27px;
	padding-bottom: 20px;
}

#product-option-content .content-title {
	display: flex;
	align-items: center;
}

#product-option-info > .content-title {
	display: block;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	max-width: calc(100% - 25px);
}

#product-option-content .content-title.breadcrumb,
#product-option-info > .content-title.breadcrumb {
	font-size: 16px;
	padding-top: 33px;
	padding-bottom: 25px;
}

#product-option-content .content-title,
#product-option-content .content,
#product-option-info > .content-title,
#product-option-info > .content {
	padding-left: 45px;
	padding-right: 61px;
	margin: 0;
}

#product-option-content .content-title > span,
#product-option-info > .content-title > span {
	font-weight: 400;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	padding-right: 25px;
}

/* add a single white space before the element */
#product-option-content .content-title > span:before,
#product-option-info > .content-title > span:before {
	content: '\00a0';
}

#product-option-content .content-title > .material-icons,
#product-option-content .content-title > .material-icons-outlined,
#product-option-info > .content-title > .material-icons,
#product-option-info > .content-title > .material-icons-outlined {
	margin-right: 15px;
}

#product-option-content .content,
#product-option-info > .content {
	height: calc(100vh - 82px);
	padding-top: 10px;
	padding-bottom: 0;
}

#product-option-content .content:not(.no-scroll),
#product-option-info > .content:not(.no-scroll) {
	padding-bottom: 200px;
}

#product-option-content .content {
	scroll-behavior: smooth;
}

#product-option-content .btn-close,
#product-option-info > .btn-close {
	position: absolute;
	top: 20px;
	right: 37px;
	z-index: 2;
}

#product-option-info.level-2 > .btn-close.close {
	display: none;
}

#product-option-info.level-2 > .btn-close.arrow {
	display: block;
}

#product-option-info.level-1 > .btn-close.close {
	display: block;
}

#product-option-info.level-1 > .btn-close.arrow {
	display: none;
}

#product-option-content .btn-previous {
	position: absolute;
	top: 20px;
	left: 30px;
}

#product-option-content .btn-close > span,
#product-option-content .btn-previous > span,
#product-option-info > .btn-close > span {
	font-size: 28px;
}

/* summary total */
#product-option-content .content > .box-list-view  .summary-total {
	border-top: 1px solid var(--border-color);
	border-bottom: 1px solid var(--border-color);
	margin-top: 25px;
	margin-bottom: 35px;
	padding-top: 25px;
	padding-bottom: 25px;
}

#product-option-content .content > .box-list-view  .summary-total strong {
	font-size: 16px;
}

/* since we can combine different views in the same menu we need some spaces */
#product-option-content .content > .box-list-view + .circle-grid-view,
#product-option-content .content > .box-list-view + .canvas-grid-view {
	margin-top: 35px;
}

/* since we can combine different views in the same menu we need some spaces */
#product-option-content .content > .circle-grid-view + .box-list-view {
	margin-top: 10px;
}

/* since we can combine different views in the same menu we need some spaces */
#product-option-content .content > .canvas-grid-view + .box-list-view {
	margin-top: 80px;
}

/* box list view */
#product-option-content .content > .box-list-view .option-value-wrapper {
	padding-bottom: 15px;
}

/* disabled option value wrapper */
#product-option-content .content > .box-list-view .option-value-wrapper.disabled > .wrapper-label {
	box-shadow: 0px 0px 0px 1px rgba(0,0,0,0.1);
	color: #afafaf;
	background-color: #ffffff;
	pointer-events: none;
	-webkit-user-select: none;
	user-select: none;
}

/* disabled option value wrapper */
#product-option-content .content > .box-list-view .option-value-wrapper.disabled > .wrapper-label .internal-anchor {
	pointer-events: all;
}

/* needs to be hidden, but not with display:none since they need to be focused */
#product-option-content .content .option-value-wrapper > input {
	display: block;
	opacity: 0;
	height: 0;
	width: 0;
	margin: 0;
	padding: 0;
}

#product-option-content .content  .option-value-wrapper > .wrapper-label {
	cursor: pointer;
}

#product-option .internal-anchor,
#product-option-content .content  .internal-anchor,
#product-option-info .content  .internal-anchor {
	color: var(--anchor-color);
	transition: color 0.2s linear;
	line-height: 2.5;
	-webkit-user-select: none;
	user-select: none;
}

/* truncate long labels with ellipsis to preserve space for the size text */
#product-option .surface-content-dim .internal-anchor > .underline {
	max-width: 200px;
	display: inline-block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	vertical-align: bottom;
}

#product-option .internal-anchor.disabled {
	color: rgba(0,0,0,0.4);
	pointer-events: none;
}

/* fix to get equal line-height as the other rows when link is inside .menu-item */
#product-option .menu-item  .label-wrapper .internal-anchor {
	line-height: inherit;
}

/* fix to get equal line-height as the other rows when link is inside .menu-item */
#product-option .menu-item  .label-wrapper .internal-anchor > span.underline::after {
	bottom: 0.35em;
}

#product-option .internal-anchor > span.underline::after,
#product-option-content .internal-anchor > span.underline::after,
#product-option-info .internal-anchor > span.underline::after {
	background-color: var(--anchor-color);
}

#product-option-content .internal-anchor > span.underline + span.material-icons {
	font-size: 18px;
	top: 4px;
	position: relative;
	padding-left: 2px;
}

#product-option-content .is-logotype .internal-anchor > span.underline + span.material-icons {
	padding-left: 6px;
}

#product-option-content .content .option-value-description.anchor {
	line-height: 2.5;
}

#product-option-footer .internal-anchor,
#product-option-content .content  .label-wrapper  .internal-anchor,
#product-option-content .content .option-value-description.anchor .internal-anchor {
	float: right;
}

#product-option-content .content > :not(.circle-grid-view) .option-value-wrapper > .wrapper-label {
	border-radius: 3px;
}

#product-option-content.quantity-menu .content > .box-list-view .option-value-wrapper > .wrapper-label,
#product-option-content .content > .box-list-view > .option-value-wrapper > .wrapper-label {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 75px;
	background-color: var(--menu-background-color);
	padding: 0 30px;
	-webkit-user-select: none;
	user-select: none;
}

#product-option-content .content > .box-list-view  > .option-value-wrapper > .wrapper-label > span.color-circle {
	display: inline-block;
	border-radius: 50%;
	width: 25px;
	height: 25px;
	margin-right: 30px;
}

/* position absolute + center vertically when multi-row */
#product-option-content .content > .box-list-view  > .option-value-wrapper.multi-row > .wrapper-label > span.color-circle {
	position: absolute;
	top: 0;
	bottom: 0;
	margin: auto 0;
}

#product-option-content .content :not(.circle-grid-view) > .option-value-wrapper:not(.disabled ) > .wrapper-label:hover {
	box-shadow: 0px 0px 0px 1px rgba(0,0,0,0.2);
}

/* select, change logotype texts in branding method options */
#product-option-content .content .option-value-wrapper  .wrapper-label > .label-row.upload-logotype,
#product-option-content .content .option-value-wrapper  .wrapper-label > .label-row.change-logotype {
	overflow: hidden;
	max-height: 0;
	clear: both;
}

/* extra information icon */
#product-option-content .content .option-value-wrapper  .wrapper-label > .extra-info {
	position: absolute;
	top: 8px;
	right: 8px;
	font-size: 18px;
	color: #acacac;
	z-index: 1;
}

/* change color on hover */
#product-option-content .content .option-value-wrapper  .wrapper-label:hover > .extra-info {
	color: var(--anchor-color);
}

/* hide icon when active */
#product-option-content .content .option-value-wrapper > input:checked ~ .wrapper-label > .extra-info {
	display: none;
}

#product-option-content .content .design-method-online .option-value-wrapper  .wrapper-label > .label-row.upload-logotype > .label-caption:not(.surface-content-dim),
#product-option-content .content .design-method-online .option-value-wrapper  .wrapper-label > .label-row.change-logotype > .label-caption:not(.surface-content-dim) {
	float: right;
	margin-right: 30px;
}

#product-option-content .content .option-value-wrapper  .wrapper-label > .label-row.heading > .label-caption.overlay-dim {
	display: inline-block;
	margin-left: 5px;
	opacity: 0;
	transition: opacity 0.2s ease;
}

#product-option-content .content .option-value-wrapper > input:checked ~ .wrapper-label > .label-row.heading > .label-caption.overlay-dim,
#product-option-content .content .option-value-wrapper  .wrapper-label:hover > .label-row.heading > .label-caption.overlay-dim {
	opacity: 1;
}

#product-option-content .content  .option-value-wrapper  .wrapper-label > .label-row.heading > .label-caption.overlay-dim > [data-toggle="tooltip"] {
	font-weight: 400;
	color: #000000;
	line-height: initial;
}

#product-option-content .content .option-value-wrapper  .wrapper-label > .label-row > .label-caption.surface-content-dim {
	float: left;
}

/* special styling when there is white logo against gray background */
#product-option-content .content .design-method-online .option-value-wrapper > .wrapper-label > .label-row.logotype.bright {
	margin-bottom: -32px;
}

/* special styling when there is white logo against gray background */
#product-option-content .content .design-method-online .option-value-wrapper > input:checked ~ .wrapper-label > .label-row.logotype.bright ~ .change-logotype {
	position: relative;
	bottom: -13px;
}

/* special styling when there is white logo against gray background */
#product-option-content .content .design-method-online .option-value-wrapper > input:checked ~ .wrapper-label > .label-row.logotype.bright ~ .change-logotype > .label-caption > .underline::after {
	background-color: #ffffff;
}

/* special styling when there is white logo against gray background */
#product-option-content .content .design-method-online .option-value-wrapper > input:checked ~ .wrapper-label > .label-row.logotype.bright ~ .change-logotype > .label-caption > span {
	color: #ffffff;
}

#product-option-content .content .design-method-online .option-value-wrapper:not(.has-selected-logo) > input:checked ~ .wrapper-label > .label-row.upload-logotype,
#product-option-content .content .design-method-online .option-value-wrapper > input:checked ~ .wrapper-label > .label-row.logotype ~ .change-logotype {
	max-height: initial;
	z-index: 1;
}

#product-option-content .content .design-method-online .option-value-wrapper:not(.has-selected-logo) > input:checked ~ .wrapper-label > .label-row.upload-logotype > button {
	display: block;
	max-width: 320px;
	margin: 35px auto 25px auto;
	padding: 20px 18px;
	transition: initial;
	animation: zoom-in .2s forwards;
}

#product-option-content .content .design-method-online .option-value-wrapper.logotype > label.is-logotype > span.label-caption {
	flex-grow: 1;
}

/* when hovering the logotype wrapper, a delete logotype button is displayed if a mouse pointer is used */
@media only screen and (pointer: fine) {
	#product-option-content .content .design-method-online .option-value-wrapper.logotype > label.is-logotype:hover > button {
		display: block;
		opacity: 1;
	}
}

#product-option-content .content .design-method-online .option-value-wrapper.logotype > label.is-logotype > button {
	display: none;
	opacity: 0;
	background-color: transparent;
}

#product-option-content .content .design-method-online .option-value-wrapper.logotype > label.is-logotype > button > span {
	color: #000000;
	font-size: 18px;
}

#product-option-content .content .design-method-online .option-value-wrapper .wrapper-label > .label-row  > .label-caption > span.underline,
#product-option-content .content .option-value-wrapper.extra-option  .wrapper-label > .label-row  > .label-caption > span.underline {
	line-height: 2.5;
}

#product-option-content .content .design-method-online .option-value-wrapper  .wrapper-label > .label-row  > .label-caption:not(.overlay-dim) > span.underline,
#product-option-content .content .option-value-wrapper.extra-option  .wrapper-label > .label-row  > .label-caption:not(.overlay-dim) > span.underline {
	color: var(--anchor-color);
}

#product-option-content .content .design-method-online .option-value-wrapper .wrapper-label > .label-row  > .label-caption > span.underline::after,
#product-option-content .content .option-value-wrapper.extra-option .wrapper-label > .label-row  > .label-caption > span.underline::after {
	background-color: var(--anchor-color);
}

#product-option-content .content .design-method-online .option-value-wrapper > input:checked ~ .wrapper-label > .label-row > .label-caption.open-logotype-list:hover > span.underline::after,
#product-option-content .content .design-method-online .option-value-wrapper > input:checked ~ .wrapper-label:hover > .label-row > .label-caption:not(.open-logotype-list) > span.underline::after,
#product-option-content .content .has-branding .option-value-wrapper.extra-option > input:checked ~ .wrapper-label:hover > .label-row > .label-caption > span.underline::after {
	opacity: 1 !important;
}

#product-option-content .content .design-method-online .option-value-wrapper > input:checked ~ .wrapper-label:has(.label-caption.open-logotype-list:hover) > .label-row > .label-caption:not(.open-logotype-list) > span.underline::after,
#product-option-content .content .design-method-proof > input:checked ~ .wrapper-label:has(.label-row.file-row .underline:hover) > .label-row.heading > .label-caption > span:first-child::after {
	opacity: 0 !important;
}

#product-option .menu-item > .label-container > .label-heading > span,
#product-option-content .content :not(.circle-grid-view) .option-value-wrapper.multi-row .wrapper-label > .label-row.heading > .label-caption > span:first-child,
#product-option-content .content :not(.circle-grid-view):not(.canvas-grid-view) .option-value-wrapper > .wrapper-label > .label-caption.multi-row > span > span,
#product-option-content .content .canvas-grid-view .option-value-wrapper > .wrapper-label > .label-caption > span {
	position: relative;
}

/* underscore label text when hover css */
#product-option .menu-item:not(.invalid) > .label-container > .label-heading > span::after,
#product-option-content .content :not(.circle-grid-view):not(.canvas-grid-view) .option-value-wrapper.multi-row > .wrapper-label > .label-row.heading > .label-caption > span:first-child::after,
#product-option-content .content :not(.circle-grid-view):not(.canvas-grid-view) .option-value-wrapper > .wrapper-label > .label-caption:not(.multi-row)::after ,
#product-option-content .content :not(.circle-grid-view):not(.canvas-grid-view) .option-value-wrapper > .wrapper-label > .label-caption.multi-row > span > span:first-child::after,
#product-option-content .content .canvas-grid-view .option-value-wrapper > .wrapper-label > .label-caption > span::after  {
	content: "";
	position: absolute;
	bottom: -1px;
	left: 0;
	height: 1px;
	width: 100%;
	opacity: 0;
	background-color: var(--dark-anchor-color);
	transition: opacity 0.1s linear;
}

#product-option .menu-item:not(.invalid) > .label-container:hover > .label-heading > span::after,
#product-option-content .content :not(.circle-grid-view) .option-value-wrapper.multi-row > .wrapper-label:not(.invalid):hover > .label-row.heading > .label-caption > span:first-child::after,
#product-option-content .content :not(.circle-grid-view) .option-value-wrapper:not(.disabled) > .wrapper-label:not(.invalid):hover > .label-caption:not(.multi-row)::after ,
#product-option-content .content :not(.circle-grid-view) .option-value-wrapper > .wrapper-label:not(.invalid):hover > .label-caption.multi-row > span > span:first-child::after,
#product-option-content .content .canvas-grid-view .option-value-wrapper > .wrapper-label:not(.invalid):hover > .label-caption > span::after   {
	opacity: 1;
}

#product-option .menu-item:not(.invalid) > .label-container:has(.label-wrapper.design-method-comment .underline:hover) > .label-heading > span::after,
#product-option .menu-item:not(.invalid) > .label-container:has(.label-wrapper.file-row .underline:hover) > .label-heading > span::after,
#product-option .menu-item:not(.invalid) > .label-container:has(.label-wrapper.surface-content-dim .underline:hover) > .label-heading > span::after,
#product-option-content .content :not(.circle-grid-view) .option-value-wrapper.multi-row > .wrapper-label:not(.invalid):has(.label-row.file-row .underline:hover) > .label-row.heading > .label-caption > span:first-child::after,
#product-option-content .content :not(.circle-grid-view) .option-value-wrapper.multi-row > .wrapper-label:not(.invalid):has(.label-caption.open-logotype-list:hover) > .label-row.heading > .label-caption > span:first-child::after,
#product-option-content .content :not(.circle-grid-view) .option-value-wrapper > .wrapper-label:not(.invalid):has(a.internal-anchor:hover) > .label-caption.multi-row > span > span:first-child::after {
	opacity: 0 !important;
}

#product-option-content .content :not(.circle-grid-view) .option-value-wrapper > input:checked ~ .wrapper-label:not(.invalid),
#product-option-content .content :not(.circle-grid-view) .option-value-wrapper > input:checked ~ .wrapper-label:not(.invalid):hover {
	box-shadow: 0px 0px 0px 2px rgba(0,0,0,1);
}

#product-option-content .content :not(.circle-grid-view) .option-value-wrapper > input:checked ~ .wrapper-label:not(.invalid) .label-caption.multi-row > span:first-child,
#product-option-content .content :not(.circle-grid-view) .option-value-wrapper > input:checked ~ .wrapper-label:not(.invalid) .label-row.heading {
	font-weight: 700;
}

#product-option-content .content :not(.circle-grid-view) .option-value-wrapper.logotype > input:checked ~ .wrapper-label > button {
	display: block;
	opacity: 1;
}

#product-option-content .content > .box-list-view > .option-value-wrapper > .wrapper-label > .label-price {
	position: absolute;
	right: 30px;
}

#product-option-content .content > .box-list-view > .option-value-wrapper > .wrapper-label .from.label-price {
	color: var(--default-text-color);
}

#product-option-content .content > .box-list-view > .option-value-wrapper > .wrapper-label .from.label-price > span {
	font-size: 11px;
}

#product-option-content .content > .box-list-view > .option-value-wrapper > .wrapper-label[title]::after {
	content: attr(title);
	line-height: 1.4;
}

#product-option-content .content > .box-list-view > .option-value-wrapper > .wrapper-label > .label-caption {
	position: relative;
	line-height: 1.4;
}

#product-option-content .content  .option-value-wrapper > .wrapper-label > .label-caption > em,
#product-option-content .content  .option-value-wrapper > .wrapper-label > .label-row.heading > .label-caption > em {
	font-style: italic;
	font-weight: 100;
	display: inline-block;
	padding-left: 5px;
}

#product-option-content .content  .option-value-wrapper > .wrapper-label > .label-caption.multi-row > span {
	display: block;
}

#product-option-content .content .option-value-wrapper > .wrapper-label.is-logotype > .label-caption {
	min-width: 0;
}

#product-option-content .content .option-value-wrapper > .wrapper-label.is-logotype > .label-caption > span {
	display: block;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

#product-option-content .content  .option-value-wrapper > .wrapper-label > .label-caption.multi-row > span:first-child {
	position: relative;
	margin-top: 8px;
}

#product-option-content .content  .option-value-wrapper > .wrapper-label > .label-caption.multi-row > span:not(:first-child),
#product-option-content .content  .option-value-wrapper > .wrapper-label > .label-caption.multi-row > a:not(:first-child) {
	display: inline-block;
	font-weight: 400;
	line-height: 2.5;
}

#product-option-content .content > .box-list-view .option-value-header {
	padding: 60px 0 20px 0;
}

#product-option-content .content > .box-list-view .option-value-header > .label-wrapper > strong {
	font-size: 20px;
}

#product-option-content .content > .box-list-view .option-value-description,
#product-option-content .content > .option-value-description {
	margin-bottom: 40px;
}

#product-option-content .content > .box-list-view .option-value-description + .option-value-header {
	padding-top: 0;
}

/* input control layout css */
#product-option-info .content  .form-control,
#product-option-content .content > .box-list-view .form-control {
	font-size: 13px;
}

#product-option-content .content > .box-list-view > .input-columns {
	display: flex;
	margin-bottom: 45px;
}

#product-option-content .content > .box-list-view > .input-columns .form-control,
#product-option-content .content > .box-list-view > .input-columns .btn-input {
	height: 45px;
	margin-right: 15px;
}

#product-option-content .content > .box-list-view > .input-columns .btn-input:last-child {
	margin-right: 0;
}

#product-option-content .content > .box-list-view > .input-columns .form-control {
	width: auto;
	min-width: 90px;
	padding: 15px;
}

/* highlight when focused input are invalid */
#product-option-content .content > .box-list-view input.form-control:focus:invalid {
	box-shadow: 0px 0px 0px 1px var(--danger-color);
}

/* styling for quantity input */
#product-option-content .content > .box-list-view > .input-columns #input-quantity {
	width: 100%;
	text-align: center;
	font-size: 18px;
	font-weight: 700;
}

#product-option-content .content > .box-list-view > .input-columns > [data-unit] {
	width: 100%;
	position: relative;
	margin-right: 15px;
}

#product-option-content .content > .box-list-view > .input-columns > [data-unit]::after {
	content: attr(data-unit);
	position: absolute;
	bottom: 7px;
	right: 17px;
	font-size: 14px;
	pointer-events: none;
}

#product-option-content .content > .box-list-view > .input-columns .btn-input {
	padding: 15px 20px;
	font-size: 14px;
	margin-top: 0;
	width: auto;
}

#product-option-content .content > .box-list-view > .input-columns > .btn-input.input-control > .material-icons {
	font-size: 14px;
	-webkit-user-select: none;
	user-select: none;
}

#product-option-content .content  input[type="number"]::-webkit-inner-spin-button, 
#product-option-content .content  input[type="number"]::-webkit-outer-spin-button { 
	appearance: none; 
	margin: 0; 
}

#product-option-content .content > .box-list-view > .standard-quantity-header {
	position: relative;
	padding-bottom: 25px;
	clear: both;
}

#product-option-content .content.no-scroll > .box-list-view > .quantity-step-content {
	height: calc(100vh - 466px);
	overflow-y: auto;
	overflow-x: hidden;
	scroll-behavior: smooth;
	overscroll-behavior: none;
}

#product-option-content .content > .box-list-view > .quantity-step-content {
	position: relative;
	width: 100%;
	margin-left: -2px;
	margin-right: -2px;
	padding: 0 2px 25px 2px;
}

#product-option-content .content.no-scroll > .box-list-view > .quantity-step-content {
	padding: 35px 2px 200px 2px;
}

#product-option-content .content > .box-list-view.quantity-view .option-value-wrapper > .wrapper-label > .label-row > .label-price {
	margin-right: 0 !important;
}

#product-option-content .content > .box-list-view.quantity-view .option-value-wrapper > .wrapper-label > .label-row:not(.heading) {
	display: none;
}

#product-option-content .content > .box-list-view.quantity-view .option-value-wrapper > input:checked ~ .wrapper-label {
	padding-bottom: 15px;
}

#product-option-content .content > .box-list-view.quantity-view .option-value-wrapper > input:checked ~ .wrapper-label > .label-row:not(.heading) {
	display: block;
}

/* measurement and product sizes, variants styling */
#product-option-content .content > .box-list-view > .input-control-container {
	margin-bottom: 45px;
}

#product-option-content .content > .box-list-view > .input-control-container > .flex-row > .flex-column {
	margin-top: 4px;
	margin-bottom: 4px;
	flex-direction: row;
	align-self: center;
}

#product-option-content .content > .box-list-view > .input-control-container > .flex-row > .flex-column:first-child {
	flex-grow: 2;
}

#product-option-content .content > .box-list-view > .input-control-container > .flex-row > .flex-column + .flex-column {
	flex-grow: 1;
	flex-basis: 30px;
	justify-content: right;
	align-items: baseline;
	line-height: 1;
}

#product-option-content .content > .box-list-view > .input-control-container .form-control {
	font-size: 12px;
	color: rgba(0,0,0,0.4);
	width: 100%;
	padding: 8px;
	text-align: center;
	margin-bottom: 0;
}

#product-option-content .content > .box-list-view > .input-control-container .btn-input {
	padding: 8px 12px;
	width: auto;
	position: relative;
	top: 1px;
}

#product-option-content .content > .box-list-view > .input-control-container .btn-input > span {
	font-size: 13px;
	-webkit-user-select: none;
	user-select: none;
}

#product-option-content .content > .box-list-view > .input-control-container .input-columns.has-quantity > .form-control {
	color: inherit;
	font-weight: 700;
}

#product-option-content .content > .box-list-view > .input-control-container .input-columns.has-quantity >.btn-input > span {
	color: inherit;
}

#product-option-content .content > .box-list-view > .input-control-container .btn-input[value="-"] {
	margin-right: 10px;
}

#product-option-content .content > .box-list-view > .input-control-container .btn-input[value="+"] {
	margin-left: 10px;
}

#product-option-content .content > .box-list-view > .input-control-container > .flex-row.total-quantity {
	border-top: 1px solid var(--border-color);
	margin-top: 20px;
	padding-top: 20px;
}

#product-option-content .content > .box-list-view > .input-control-container > .flex-row.total-quantity > .flex-column:has(em:not(.hidden)) {
	color: var(--price-color);
}

#product-option-content .content > .box-list-view > .input-control-container > .flex-row.total-quantity em {
	font-style: italic;
	font-weight: 100;
	display: inline-block;
	padding-left: 5px;
}

/* quantity input with data-steps should be read-only */
#product-option-content .content > .box-list-view .form-control.quantity-input[data-steps] {
	background-color: transparent;
	pointer-events: none;
	-webkit-user-select: none;
	user-select: none;
}

/* measurement */
#product-option-content .content > .box-list-view > .measurement-container > .flex-row > .flex-column {
	margin-top: 6px;
	margin-bottom: 6px;
}

#product-option-content .content > .box-list-view > .measurement-container .form-control {
	font-size: 13px;
	min-width: 90px;
	padding: 15px;
	height: 45px;
}

#product-option-content .content > .box-list-view > .measurement-container .btn-input {
	padding: 15px 20px;
	font-size: 14px;
	margin-top: 0;
	width: auto;
	-webkit-user-select: none;
	user-select: none;
}

/* disabled button style */
#product-option-content .content > .box-list-view .btn-input:disabled,
#product-option-content .content > .box-list-view .btn-input[disabled] {
	color: rgba(0,0,0,0.4);
	pointer-events: none;
}

#product-option-content .content > .box-list-view > .measurement-container .btn-input[value="+"] {
	margin-left: 15px;
}

#product-option-content .content > .box-list-view > .measurement-container .btn-input[value="-"] {
	margin-right: 15px;
}

/* quantity steps */
#product-option-content .content > .box-list-view > .quantity-step-content .table {
	margin-top: 0;
	font-size: 13px;
}

#product-option-content .content > .box-list-view > .quantity-step-content .table.table-border tr > td {
	white-space: nowrap;
}

#product-option-content .content > .box-list-view > .quantity-step-content .table.table-more-height td {
	padding-top: 30px;
	padding-bottom: 30px;
}

#product-option-content .content > .box-list-view > .quantity-step-content .table.table-border tr:first-child > td {
	border-top: 1px solid var(--border-color);
}

#product-option-content .content > .box-list-view > .quantity-step-content .table.table-border tr.active > td:last-child {
	width: 10%;
}

#product-option-content .content > .box-list-view > .quantity-step-content .table.table-border tr.active > td {
	border-top: 2px solid black;
	border-bottom: 2px solid black;
}

#product-option-content .content > .box-list-view > .quantity-step-content .table.table-border tr.active > td > em {
	display: inline-block;
	font-weight: 100;
	padding-left: 15px;
}

#product-option-content .content > .box-list-view > .quantity-step-content .table.table-border tr.active > td:last-child,
#product-option-content .content > .box-list-view > .quantity-step-content .table.table-border tr.active > td > span {
	font-weight: 700;
}

/* design method = online */
#product-option-content .content > .box-list-view .option-value-wrapper.logo-tool:not(.disabled) > input:checked ~ .wrapper-label,
#product-option-content .content > .box-list-view .option-value-wrapper.logo-tool:not(.disabled) > .wrapper-label:hover {
	position: relative;
	margin-top: -3px;
	margin-left: -2px;
	margin-bottom: -2px;
	margin-right: -2px;
	background: linear-gradient(90deg, rgba(141,100,170,1) 0%, rgba(68,200,245,1) 25%, rgba(130,202,156,1) 50%, rgba(255,205,91,1) 75%, rgba(238,61,150,1) 100%);
	background-size: 100% 100%;
	box-shadow: none;
	min-height: 80px;
	cursor: pointer;
}

#product-option-content .content > .box-list-view .option-value-wrapper.multi-row.logo-tool:not(.disabled) > input:checked ~ .wrapper-label,
#product-option-content .content > .box-list-view .option-value-wrapper.multi-row.logo-tool:not(.disabled) > .wrapper-label:hover {
	margin: 0px;
}

#product-option-content .content > .box-list-view .option-value-wrapper.logo-tool:not(.disabled) > input:checked ~ .wrapper-label::after,
#product-option-content .content > .box-list-view .option-value-wrapper.logo-tool:not(.disabled) > .wrapper-label:hover::after {
	content: "";
	position: absolute;
	top: 3px;
	left: 3px;
	bottom: 3px;
	right: 3px;
	background-color: rgba(255,255,255,0.95);
	border-radius: 2px;
	line-height: 74px;
	padding-left: 39px;
	pointer-events: none;
}

#product-option-content .content > .box-list-view > .option-value-wrapper.logo-tool > .wrapper-label .label-price {
	font-weight: 400;
	margin-top: 1px;
	margin-right: 30px;
	z-index: 1;
}

#product-option-content .content > .box-list-view .option-value-wrapper.logo-tool:not(.disabled) > input:checked ~ .wrapper-label > .label-price,
#product-option-content .content > .box-list-view .option-value-wrapper.logo-tool:not(.disabled) > .wrapper-label:hover > .label-price {
	right: 32px;
}

#product-option-content .content > .box-list-view .option-value-wrapper.logo-tool > .wrapper-label .label-caption {
	position: relative;
}

#product-option-content .content > .box-list-view .option-value-wrapper.logo-tool:not(.disabled) > input:checked ~ .wrapper-label .label-caption,
#product-option-content .content > .box-list-view .option-value-wrapper.logo-tool:not(.disabled) > .wrapper-label:hover .label-caption {
	margin-top: 1px;
	margin-left: 2px;
}

#product-option-content .content > .box-list-view .option-value-wrapper.multi-row.logo-tool:not(.disabled) > input:checked ~ .wrapper-label .label-caption,
#product-option-content .content > .box-list-view .option-value-wrapper.multi-row.logo-tool:not(.disabled) > .wrapper-label:hover .label-caption {
	margin-top: 0px;
	margin-left: 0px;
}

#product-option-content .content > .box-list-view  .option-value-wrapper.logo-tool .wrapper-label > .label-caption,
#product-option-content .content > .box-list-view  .option-value-wrapper.logo-tool .wrapper-label > .label-row {
	z-index: 1;
}

/* only show extra rows when checked on design method value options */
#product-option-content .content .option-value-wrapper.extra-option.multi-row > input[data-design-method] ~ .wrapper-label > .label-row.file-row {
	display: none;
}

#product-option-content .content .option-value-wrapper.extra-option.multi-row > input[data-design-method]:checked ~ .wrapper-label > .label-row.file-row {
	display: block;
}

/* add some space between uploaded file(s) and other rows */
#product-option .menu-item .label-wrapper:not(.file-row) + .label-wrapper.file-row,
#product-option-content .content .option-value-wrapper > .wrapper-label > .label-row:not(.file-row) + .label-row.file-row {
	margin-top: 10px;
}

/* circle grid view content */
#product-option-content .content > .circle-grid-view > .option-value-wrapper {
	position: relative;
	display: inline-block;
	margin-right: 25px;
	margin-bottom: 25px;
}

#product-option-content .content > .circle-grid-view > .option-value-wrapper > .wrapper-label {
	position: relative;
	display: block;
	width: 25px;
	height: 25px;
}

#product-option-content .content > .circle-grid-view > .option-value-wrapper > .wrapper-label > span.color-circle {
	display: block;
	border-radius: 50%;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	transition: transform .1s ease-out;
}

#product-option .menu-item .label-color.bright,
#product-option-content .label-color.bright,
#product-option-content .content > .color-option > .option-value-wrapper.bright > .wrapper-label > span.color-circle {
	border: 1px solid #cccccc;
}

#product-option-content .content > .circle-grid-view > .option-value-wrapper > .wrapper-label::after {
	content: "";
	position: absolute;
	display: inline-block;
	border-radius: 50%;
	top: -8px;
	left: -8px;
	right: -8px;
	bottom: -8px;
	border: 2px solid #000000;
	visibility: hidden;
}

#product-option-content .content > .circle-grid-view > .option-value-wrapper > input:checked ~ .wrapper-label::after,
#product-option-content .content > .circle-grid-view > .option-value-wrapper > .wrapper-label:hover::after {
	visibility: visible;
}

#product-option-content .content > .circle-grid-view > .option-value-wrapper > input:checked ~ .wrapper-label > span.color-circle {
	transform: scale(1.60);
}

/* canvas color grid content */
#product-option-content .content > .canvas-grid-view {
	display: flex;
	flex-wrap: wrap;
	margin-bottom: -45px;
}

#product-option-content .content > .canvas-grid-view > .option-value-wrapper {
	flex: 0 0 25%;
	padding-bottom: 45px;
}

#product-option-content .content > .canvas-grid-view > .option-value-wrapper > .wrapper-label {
	display: block;
	margin-right: 5px;
	padding: 5px;
}

#product-option-content .content > .canvas-grid-view > .option-value-wrapper > .wrapper-label > .label-caption,
#product-option-content .content > .canvas-grid-view > .option-value-wrapper > .wrapper-label > .label-price  {
	display: block;
	text-align: center;
}

/* box-list image and canvas content */
#product-option-content .content > .box-list-view.img > .option-value-wrapper > .wrapper-label,
#product-option-content .content > .box-list-view.larger > .option-value-wrapper > .wrapper-label {
	min-height: 90px;
}

#product-option-content .content > .box-list-view.color-option > .option-value-wrapper > .wrapper-label > canvas {
	margin-left: -15px;
}

#product-option-content > .content > .box-list-view .option-value-wrapper > .wrapper-label > .img-container {
	display: inline-block;
	margin-right: 15px;
	margin-left: -30px;
	min-width: 100px;
}

#product-option-content > .content > .box-list-view .option-value-wrapper > .wrapper-label > .img-container ~ .label-row {
	margin-left: 80px;
}

#product-option-content > .content > .box-list-view.color-option .option-value-wrapper > .wrapper-label > .img-container ~ .label-row {
	margin-left: 70px;
}

#product-option-content > .content > .box-list-view.color-option .option-value-wrapper > .wrapper-label > .color-circle ~ .label-row {
	margin-left: 55px;
}

#product-option-content > .content > .box-list-view .option-value-wrapper.multi-row > .wrapper-label > .img-container {
	position: absolute;
	top: 0;
	bottom: 0;
	display: flex;
	align-items: center;
}

#product-option-content > .content > .box-list-view .option-value-wrapper.multi-row > .wrapper-label > .label-row.read-more {
	position: relative;
	margin-top: -7px;
}

#product-option-content .content > .box-list-view > .option-value-wrapper > .wrapper-label canvas,
#product-option-content .content > .box-list-view > .option-value-wrapper > .wrapper-label > .img-container > img {
	width: auto;
	max-width: 100%;
	max-height: 70px;
	margin: 10px 15px;
	mix-blend-mode: multiply;
}

#product-option-content .content > .box-list-view.color-option > .option-value-wrapper > .wrapper-label canvas {
	max-height: 60px;
}

#product-option-content > .content > .content-footer {
	padding-top: 100px;
}

#product-option-content .content-footer .btn {
	display: block;
	max-width: 320px;
	margin: 0 auto;
}

/* extra product option (sub-level option) */
#product-option-content .option-value-wrapper:not(.extra-option):not(.has-extra-option) > .extra-option-content {
	display: none;
}

#product-option-content .option-value-wrapper > .extra-option-content {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: var(--background-color);
	visibility: hidden;
	transform: translateX(100%);
	transition: visibility 0s linear 0.2s, max-height 0s linear 0.2s, transform 0.2s cubic-bezier(0,0,0.1,1);
	max-height: 0;
	z-index: 3;
}

#product-option-content .option-value-wrapper > input ~ .wrapper-label.active ~ .extra-option-content {
	visibility: visible;
	max-height: 100vh;
	transform: translateX(0);
	transition: visibility 0s linear 0s, transform 0.2s cubic-bezier(0,0,0.1,1);
}

/* disable sub menu transition (avoid double slide-in when opened via shortcut) */
#product-option-content.no-sub-transition .option-value-wrapper > .extra-option-content,
#product-option-content.no-sub-transition .option-value-wrapper > input ~ .wrapper-label.active ~ .extra-option-content {
	transition: none !important;
}

#product-option-content > .content > .box-list-view .option-value-wrapper.extra-option > .wrapper-label > .label-price {
	right: 65px;
}

#product-option-content .design-method-online .option-value-wrapper .wrapper-label .change-logotype .arrow,
#product-option-content .option-value-wrapper.extra-option > .wrapper-label > .arrow {
	display: inline-block;
	position: absolute;
	right: 21px;
}

#product-option-content .design-method-online .option-value-wrapper > .wrapper-label > .arrow {
	display: none;
}

#product-option-content .option-value-wrapper.extra-option > .wrapper-label > .arrow::after {
	font-family: "Material Icons";
	content: "chevron_right";
	-webkit-font-feature-settings: "liga";
	font-size: 24px;
	font-weight: 400;
	position: absolute;
	right: 0;
	top: 50%;
	margin-top: -19px;
	color: var(--dark-anchor-color);
}

#product-option-content .design-method-online .option-value-wrapper .wrapper-label .change-logotype .open-logotype-list > span.underline::after {
	width: 120%;
}

#product-option-content .design-method-online .option-value-wrapper input:checked ~ .wrapper-label .change-logotype .arrow > span {
	font-size: 24px;
	font-weight: 400;
	position: absolute;
	right: -45px;
	top: 33px;
	margin-top: -19px;
	color: var(--anchor-color);
}

#product-option-content .option-value-wrapper > .extra-option-content > .content-title {
	padding-left: 90px;
}

#product-option-content .option-value-wrapper > .extra-option-content .table-responsive {
	margin-top: 45px;
}
 
#product-option-content .option-value-wrapper > .extra-option-content .table-responsive.hidden + .table-responsive {
	margin-top: 65px;
}

#product-option-content .option-value-wrapper > .extra-option-content .table-upload th:last-child {
	width: 70px;
}

#product-option-content .option-value-wrapper > .extra-option-content .wrapper-comment {
	margin-top: 45px;
}

#product-option-content .option-value-wrapper > .extra-option-content .table-responsive:not(.hidden) + div > .wrapper-comment {
	margin-top: 0px;
}

#product-option-content .option-value-wrapper > .extra-option-content .wrapper-comment hr:nth-of-type(2) {
	display: none;
}

/* extra pantone selector (sub-level option) */ 
#product-option-content .option-value-wrapper.color-wheel  .label-color-wheel {
	position: absolute;
	display: inline-block;
	border-radius: 50%;
	width: 38px;
	height: 38px;
	top: 50%;
	transform: translateY(-50%);
	margin-left: 32px;
	background: url(data:image/png;base64,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) no-repeat center center;
	background-size: 38px 38px;
}

/* multi row layout in option values */
#product-option-content .content > .box-list-view .option-value-wrapper.multi-row > .wrapper-label {
	flex-direction: column;
	align-items: unset;
	justify-content: center;
	padding-top: 26px;
	padding-bottom: 25px;
}

#product-option-content .content > .box-list-view .option-value-wrapper.color-wheel.multi-row > .wrapper-label {
	padding-top: 22px;
	padding-bottom: 20px;
	padding-left: 0;
}

#product-option-content .option-value-wrapper.color-wheel.multi-row > .wrapper-label > .label-row {
	display: inline-block;
	padding-left: 100px;
}

#product-option-content .content :not(.circle-grid-view) .option-value-wrapper.multi-row > input:checked ~ .wrapper-label > .label-row.heading > .label-caption,
#product-option-content .content :not(.circle-grid-view) .option-value-wrapper.multi-row > input:checked ~ .wrapper-label > .label-row.heading > .label-price {
	font-weight: 700 !important;
}

#product-option-content .content > .box-list-view .option-value-wrapper.multi-row > .wrapper-label > .label-row > .label-price {
	float: right;
	clear: both;
}

#product-option-content .content > .box-list-view.design-method-online .option-value-wrapper.multi-row > .wrapper-label > .label-row > .label-price,
#product-option-content .content > .box-list-view .option-value-wrapper.extra-option.multi-row > .wrapper-label > .label-row > .label-price {
	margin-right: 30px;
}

#product-option-content .content > .box-list-view .option-value-wrapper.multi-row > .wrapper-label > .label-row.logotype {
	display: none;
}

/* only display selected logotype when logo tool is enabled */
#product-option-content .content > .design-method-online .option-value-wrapper.multi-row > input:checked ~ .wrapper-label > .label-row.logotype {
	display: block;
	margin-top: 20px;
}

#product-option-content .content > .design-method-online .option-value-wrapper.multi-row > .wrapper-label > .label-row.logotype > .img-container {
	display: block;
	position: relative;
	margin: 0 -30px;
	padding: 30px;
}

#product-option-content .content > .design-method-online .option-value-wrapper.multi-row > input:checked ~ .wrapper-label > .label-row.logotype .button-container {
	display: none;
}

#product-option-content .content > .design-method-online .option-value-wrapper.multi-row > .wrapper-label > .label-row.logotype .img-container {
	margin-bottom: -25px;
	padding: 40px 70px 55px 70px;
}

#product-option-content .content > .design-method-online .option-value-wrapper.multi-row > .wrapper-label > .label-row.logotype > .img-container::before {
	content: "";
	position: absolute;
	top: 0;
	left: 30px;
	right: 30px;
	border-top: 1px solid var(--border-color);
}

#product-option-content .content > .design-method-online .option-value-wrapper.multi-row > .wrapper-label > .label-row.logotype.bright .img-container {
	background-color: #b9bcbf;
}

#product-option-content .content > .design-method-online .option-value-wrapper.multi-row > .wrapper-label > .label-row.logotype.bright .img-container::before {
	display: none;
}

#product-option-content .content > .design-method-online .option-value-wrapper.multi-row > .wrapper-label > .label-row.logotype .img-container > img {
	max-height: 120px;
	margin: 0 auto;
	animation: zoom-in .2s forwards;
}

#product-option-content .content .label-discount.minus {
	font-weight: 100;
}

/* Negative (-) price + Emphasis total price = pink color */
#product-option .content .label-price.minus,
#product-option-content .content .label-discount.minus,
#product-option-content .content .label-price.minus,
#product-option-info .content .table.table-price-summary tr.discount td,
#product-option-info .content .table.table-price-summary td.minus,
#product-pricelist .table td.minus,
#product-pricelist .table tr.campaign td,
#product-option-footer > .static .price-container > .price,
#product-option-footer > .sticky .price-container > .price {
	color: var(--price-color);
}

#product-option-content .content > .box-list-view .option-value-wrapper > .wrapper-label > .label-row > .label-price > .label-price-amount {
	display: inline-block;
	min-width: 110px;
	text-align: right;
}

#product-option-content .content > .box-list-view .option-value-wrapper.multi-row > .wrapper-label > .label-row > .label-price > .label-discount {
	display: inline-block;
	padding-right: 5px;
}

#product-option-content .content > .box-list-view .option-value-wrapper.multi-row > .wrapper-label > .arrow {
	top: 50%;
	margin-top: -2px;	
}

#product-option-content .content > .box-list-view .option-value-wrapper.has-extra-option.multi-row.extra-option > .wrapper-label > .arrow {
	top: 36px;
	margin-top: 0;
}

/* arrow position when selected */
#product-option-content .design-method-online .option-value-wrapper input:checked ~ .wrapper-label .change-logotype .arrow,
#product-option-content .content > .box-list-view .option-value-wrapper.has-extra-option.multi-row.extra-option > input:checked ~ .wrapper-label > .arrow {
	top: auto;
	bottom: 41px;
}

/* arrow color when logotype exists in container and bright logo */
#product-option-content .content > .box-list-view.design-method-online .option-value-wrapper.has-extra-option.multi-row > .wrapper-label > .label-row.logotype.bright ~ .change-logotype .arrow > span {
	color: #ffffff;
}

#product-option-content .option-value-wrapper.has-extra-option > .extra-option-content .wrapper-label {
	overflow: hidden;
}

#product-option-content .option-value-wrapper.has-extra-option > .extra-option-content .wrapper-upload {
	margin-top: 45px;
}

#product-option-content .option-value-wrapper.has-extra-option > .extra-option-content .wrapper-label > .img-container > img  {
	mix-blend-mode: normal;
}

#product-option-content .option-value-wrapper.has-extra-option > .extra-option-content .wrapper-label > .bright  {
	background-color: #b9bcbf;
}

#product-option-content .option-value-wrapper.has-extra-option > .extra-option-content .wrapper-label  .bright.label-color  {
	border: 1px solid #cccccc;
}

/* product option information menu */
#product-option-info  {
	visibility: hidden;
	position: absolute;
	top: -92px;
	right: 0;
	transform: translateX(100%);
	bottom: -60px;
	width: 570px;
	background-color: var(--background-color);
	box-shadow: 0 0 25px rgba(0,0,0,0.25);
	clip-path: inset(0px 0px 0px -25px);
	z-index: 5;
}

/* open as level 3 */
#product-option-content.active.level-2 ~ #product-option-info.active  {
	transition: none;
	visibility: visible;
	transform: translateX(-100%);
	box-shadow: inset -1px 0px 1px 0px rgba(0, 0, 0, 0.15), 0 0 25px rgba(0, 0, 0, 0.25);
	margin-right: -1px;
}

/* open as level 2 */
#product-option-info.level-1 { 
	transition: visibility 0s linear 0.2s, transform 0.2s cubic-bezier(0,0,0.1,1);
}

#product-option-content.level-1 ~ #product-option-info.active  {
	visibility: visible;
	transition: visibility 0s linear 0s, transform 0.2s cubic-bezier(0,0,0.1,1);
	transform: translateX(0);
}

#product-option-info > .content-header,
#product-option-info > .content,
#product-option-info > .content-footer {
	padding-left: 45px;
	padding-right: 45px;
}

#product-option-info:not(.level-2) > .content,
#product-option-content.fixed-footer > .content,
#product-option-content .option-value-wrapper.extra-option.fixed-footer .content {
	height: calc(100vh - 230px);
}

#product-option-content .option-value-wrapper:not(.extra-option).fixed-footer .content-footer {
	display: none;
}

/* better accuracy for the footer shadow detection */
#product-option-info .content  > :last-child,
#product-option-content:not(.quantity-menu) .content  > div:not(.circle-grid-view) > :not(.summary-total):last-child,
#product-option-content .quantity-step-content > :last-child {
	margin-bottom: 0 !important;
	padding-bottom: 0 !important;
}

@media (pointer: fine) {

	/* select logotype specific layout */
	#product-option-content .option-value-wrapper.fixed-footer > .extra-option-content > .content {
		padding-right: 45px !important;
	}
	
	#product-option-info.level-1 > .content-header,
	#product-option-info.level-1 > .content,
	#product-option-info.level-1 > .content-footer {
		padding-right: 61px;
	}

	#product-option {
		direction: rtl;
		padding-left: 30px;
		padding-right: 61px;
	}
	
	#product-option > .content,
	#product-option > #product-option-footer,
	#product-option > .quantity-content {
		direction: ltr;
	}
	
	#product-option:hover {
		scrollbar-color: rgba(120,120,120,0.1) transparent;
	}

	#product-option-info > .content::-webkit-scrollbar { 
		width: 2px;
		background: transparent;
	}

	#product-option-info > .content::-webkit-scrollbar-thumb {
		background-color: black;
	}
}

body.backdrop-visible #product-option::-webkit-scrollbar {
	display: none;
}

#product-option-info > .content,
#product-option-info > .content p,
#product-option-info > .content div {
	font-size: 13px;
}

#product-option-info > .content > .smaller-text p,
#product-option-info > .content > .smaller-text div {
	font-size: 13px;
	margin-bottom: 25px;
}

#product-option-info > .content .settings-item-wrapper {
	padding: 20px 0;
	border-top: 1px solid var(--border-color);
}

#product-option-info.level-1 > .content .settings-item-wrapper:has(.wrapper-label[data-update-default-logo="true"]) {
	display: none;
}

#product-option-info > .content .settings-item-wrapper .wrapper-label {
	display: flex;
	align-items: center;
}

#product-option-info > .content .settings-item-wrapper .wrapper-label[data-update-default-logo="true"] {
	cursor: pointer;
}

#product-option-info > .content .settings-item-wrapper .label-heading {
	font-weight: 800;
}

#product-option-info > .content .settings-item-wrapper .material-icons-outlined {
	font-size: 20px;
	color: #5f6368;
	margin-left: -2px;
	margin-right: 8px;
}

#product-option-info > .content .color-circle-wrapper .color-circle,
#product-option-info > .content .product-color-wrapper .color-circle {
	display: inline-block;
	border-radius: 50%;
	width: 16px;
	height: 16px;
	margin-right: 10px;
	vertical-align: text-bottom;
}

#product-option-info > .content .color-circle-wrapper > div,
#product-option-info > .content .product-color-wrapper > div {
	margin-bottom: 10px;
}

#product-option-info > .content .color-circle-wrapper .color-circle.bright,
#product-option-info > .content .product-color-wrapper .color-circle.bright {
	border: 1px solid #cccccc;
}

#product-option-info > .content .logo-edit-button {
	position: absolute;
	height: 150px;
	width: calc(100% - 90px);
	padding-top: 45px;
	bottom: 0;
	background-color: var(--background-color);
}

#product-option-info > .content .logo-edit-button > button {
	display: block;
	max-width: 320px;
	margin: 0 auto;
}

#product-option-info.level-1 > .content .logo-edit-button {
	display: none;
}

#product-option-info > .content .img-container,
#product-option-info > .content .youtube-responsive,
#product-option-info > .content p,
#product-option-info > .content ul,
#product-option-info > .content ol {
	display: block;
	margin-bottom: 45px;
}

/* only when the next sibling is ul/ol */
#product-option-info > .content .img-container:has(+ ul),
#product-option-info > .content .img-container:has(+ ol),
#product-option-info > .content .youtube-responsive:has(+ ul),
#product-option-info > .content .youtube-responsive:has(+ ol),
#product-option-info > .content p:has(+ ul),
#product-option-info > .content p:has(+ ol),
#product-option-info > .content ul:has(+ ul),
#product-option-info > .content ul:has(+ ol),
#product-option-info > .content ol:has(+ ul),
#product-option-info > .content ol:has(+ ol) {
	margin-bottom: 25px;
}

#product-option-info .wrapper-comment hr:nth-of-type(1) {
	display: none;
}

#product-option-info > .content h4,
#product-option-info > .content .h4 {
	font-weight: 700;
	font-size: 20px;
	margin-top: 0;
	margin-bottom: 25px;
}

#product-option-info > .content ul,
#product-option-info > .content ol {
	list-style-position: outside;
	padding-left: 30px;
}

#product-option-info > .content ul > li,
#product-option-info > .content ol > li {
	padding-bottom: 15px;
}

#product-option-info > .content ul > li:last-child,
#product-option-info > .content ol > li:last-child {
	padding-bottom: 0;
}

#product-option-info > .content .img-container.logo-container {
	background-color: var(--menu-background-color);
	border-radius: 3px;
	padding: 45px;
}

#product-option-info > .content .img-container.logo-container.bright {
	background-color: #b9bcbf;
}

#product-option-info > .content-footer,
#product-option-content.fixed-footer > .content-footer,
#product-option-content .option-value-wrapper.fixed-footer .content-footer {
	position: relative;
	height: 150px;
	padding-top: 45px;
	background-color: var(--background-color);
}

#product-option-info > .content-footer .btn,
#product-option-content.fixed-footer  > .content-footer .btn,
#product-option-content .option-value-wrapper.fixed-footer  .content-footer .btn,
#product-option-content .wrapper-upload .btn {
	display: block;
	max-width: 320px;
	margin: 0 auto;
}

#product-option-content .option-value-wrapper.has-extra-option > .extra-option-content .wrapper-upload .btn {
	padding: 20px 18px;
}

/* show header shadow box-shadow when overflow */
#product-overlay-control.header-overflow > .content-title::before,
#product-option-info.header-overflow > .content-title::before,
#product-option-content:not(.product-quantity).header-overflow > .content-title::before,
#product-option-content .extra-option-content.header-overflow > .content-title::before {
	content: "";
	position: absolute;
	height: 44px;
	bottom: 0;
	left: 40px;
	right: 40px;
	box-shadow: 0px 10px 20px -20px rgba(0,0,0,1);
	z-index: 1;
	pointer-events: none;
}

/* show header shadow box-shadow when overflow (need to special case the quantity menu) */
#product-option-content.quantity-menu.header-overflow .content.no-scroll .standard-quantity-header::before {
	content: "";
	position: absolute;
	height: 44px;
	left: -15px;
	right: -15px;
	bottom: 0;
	box-shadow: 0px 10px 20px -20px rgba(0,0,0,1);
	z-index: 1;
	pointer-events: none;
}

/* show footer shadow box-shadow when overflow */
#product-overlay-control.footer-overflow > .content-footer::before,
#product-option-info.footer-overflow > .content-footer::before,
#product-option-content.footer-overflow > .content-footer::before,
#product-option-content .extra-option-content.footer-overflow > .content-footer::before,
#product-overlay-control.footer-overflow > .content.footer-is-stuck > .sticky-footer::before,
#product-option-info.footer-overflow > .content.footer-is-stuck > .sticky-footer::before,
#product-option-content.footer-overflow > .content.footer-is-stuck > .sticky-footer::before,
#product-option-content.footer-overflow > .content.footer-is-stuck > .quantity-view .sticky-footer::before,
#product-option-content .extra-option-content.footer-overflow > .content.footer-is-stuck > .sticky-footer::before {
	content: "";
	position: absolute;
	height: 44px;
	top: 0;
	left: 40px;
	right: 40px;
	box-shadow: 0px -10px 20px -20px rgba(0,0,0,1);
	pointer-events: none;
}

#product-option-content .content .sticky-footer,
#product-option-info .content .sticky-footer {
	display: none;
}

#product-option-info:not(.level-1) > .btn-close {
	right: 20px;
}

/* quick link */
#main #quick-link {
	position: -webkit-sticky;
	position: sticky;
	top: -1px;
	background-color: var(--secondary-background-color);
	height: 60px;
	z-index: 2;
	width: 100%;
	border-top: 1px solid #e5e5e5;
	box-shadow: 0 0 35px rgba(0,0,0,0.12);
	clip-path: inset(0px 0px -35px 0px);
	overflow: hidden;
}

#quick-link > .product-config-bar {
	display: none;
}

#quick-link > .product-info {
	visibility: hidden;
	position: absolute;
	top: 0;
	bottom: 0;
	right: 30px;
	width: auto;
	opacity: 0;
	transform: translateX(20%);
	backface-visibility: hidden;
	pointer-events: none;
	-webkit-user-select: none;
	user-select: none;
	mix-blend-mode: multiply;
}

@media only screen and (min-width: 1580px) {
	#quick-link.transition > .product-info {
		transition: visibility 0s linear 0.4s, opacity 0.4s linear, transform 0.4s ease;
	}

	#quick-link.transition.stuck > .product-info {
		visibility: visible;
		transform: translateX(0);
		transition: visibility 0s linear 0s, opacity 0.4s linear, transform 0.4s ease;
		opacity: 1;
	}
}

#quick-link > .product-info > .flex-column {
	justify-content: center;
	padding-right: 15px;
}

#quick-link .img-container {
	position: relative;
}

#quick-link .product-info .img-container {
	display: flex;
	justify-content: center;
	width: 60px;
}

#quick-link > .product-info .title {
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
}

#quick-link > .product-info .review-stars {
	line-height: 1;
	white-space: nowrap;
	margin-top: 2px;
}

#quick-link > .product-info .btn-top {
	display: flex;
	justify-content: center;
	align-items: center;
	border: none;
	outline: none;
	background-color: rgba(0,0,0,0.2);
	color: white;
	cursor: pointer;
	padding: 0;
	width: 25px;
	height: 25px;
	border-radius: 50%;
	pointer-events: all;
}

#quick-link > .product-info .review-stars > .star {
	font-size: 16px;
	line-height: 1;
}

#quick-link > .wrapper {
	margin: 0 auto;
	max-width: 930px;
	height: 100%;
}

#quick-link > .wrapper ul.navigation {
	position: relative;
	display: flex;
	justify-content: space-between;
	flex-direction: row;
	flex-shrink: 0;
	flex-wrap: nowrap;
}

#quick-link > .wrapper ul.navigation > li {
	display: inline-block;
	position: relative;
}

#quick-link > .wrapper ul.navigation > li > a {
	display: flex;
	font-weight: 500;
	line-height: 60px;
	font-size: 13px;
	padding-left: 15px;
	padding-right: 15px;
	white-space: nowrap;
}

#quick-link > .wrapper ul.navigation > li > a.active {
	font-weight: 700;
}

#quick-link > .wrapper ul.navigation > li > a.active::after, 
#quick-link > .wrapper ul.navigation > li > a:hover::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 2px;
	right: 2px;
	height: 3px;
	background-color: var(--dark-anchor-color);
}

#quick-link > .wrapper ul.navigation > li > a:not(.active):hover::after {
	background-color: #767676;
}

/* product section */
#main section.product-section {
	scroll-margin-top: 59px;
	padding: 100px 0 100px 0;
}

#main section.product-section ul.usp,
#main section.product-section p,
#main section.product-section div {
	line-height: 1.8;
}

#main section.product-section  > .product-header {
	margin-bottom: 60px;
}

#main section.product-section .product-description {
	margin-bottom: 100px;
}

#main section.product-section .product-description > p:last-of-type {
	margin-bottom: 0;
}

#main section.product-section  > .product-header h2,
#main section.product-section  > .product-header .h2 {
	font-size: 48px;
	font-weight: 700;
	margin-top: 0;
	margin-bottom: 20px;
}

#main section.product-section  > .product-header h2 + h3 {
	font-size: 18px;
	font-weight: 500;
	margin-bottom: 80px;
}

#product-description .product-description h2,
#product-description .product-description .h2 {
	font-size: 24px;
	font-weight: 700;
	margin-bottom: 22px;
	line-height: 1.3;
}

#product-description .product-description h3,
#product-description .product-description .h3 {
	line-height: 1.3;
}

#product-description .product-description ul,
#product-description .product-description ol {
	margin-bottom: 30px;
}

#main section.product-section.thinner .container {
	max-width: 900px;
}

#main section.product-section.dark {
	background-color: #1c1c1c;
	color: white;
}

#product-description h3,
#product-description .h3 {
	font-size: 24px;
	font-weight: 700;
}

#product-description .usp li > a > span.underline::after {
	bottom: 4px;
}

#main section.product-section .flex-row {
	gap: 25px;
}

/* product pricelist css */
#main #product-pricelist .table td {
	white-space: nowrap;
}

#main #product-pricelist .table > tbody::after {
	content: '';
	display: block;
	height: 35px;
}

#main #product-pricelist .table > tbody.branding-method::after,
#main #product-pricelist .table > tbody.sub-section:not(.last)::after,
#main #product-pricelist .table tbody.branding-method  + tbody:not(.branding-method )::before,
#main #product-pricelist .table tbody.collapsible-child:not(.active) + tbody:not(.collapsible-header):not(.collapsible-child)::before {
	content: '';
	display: block;
	height: 15px;
}

#main #product-pricelist .table tbody.collapsible-header:not(.last)::after {
	height: 5px;
}

#main #product-pricelist .table > tbody.sub-section > tr > th {
	font-weight: 500;
}

/* we do this just for the extra padding when hovering collapsibles */
#main #product-pricelist .table-responsive {
	margin-left: -25px;
	margin-right: -25px
}

/* we do this just for the extra padding when hovering collapsibles */
#main #product-pricelist .table th:first-child,
#main #product-pricelist .table td:first-child {
	padding-left: 25px;
}

/* we do this just for the extra padding when hovering collapsibles */
#main #product-pricelist .table th:last-child,
#main #product-pricelist .table td:last-child {
	padding-right: 25px;
}

#main #product-pricelist .table th:first-child,
#main #product-pricelist .table td:first-child {
	background-color: white;
	position: -webkit-sticky;
	position: sticky;
	left: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 55vw;
}

#main #product-pricelist .table tbody.collapsible-header > tr:not(:first-child),
#main #product-pricelist .table tbody.collapsible-child  {
	display: none;
}

/* the expand collapsibles stuff */
#main #product-pricelist .table tbody.collapsible-header.active > tr:not(:first-child) { display: table-row; }
#main #product-pricelist .table tbody.collapsible-header.active + tbody.collapsible-child,
#main #product-pricelist .table tbody.collapsible-header.active + tbody.collapsible-child + tbody.collapsible-child,
#main #product-pricelist .table tbody.collapsible-header.active + tbody.collapsible-child + tbody.collapsible-child + tbody.collapsible-child,
#main #product-pricelist .table tbody.collapsible-header.active + tbody.collapsible-child + tbody.collapsible-child + tbody.collapsible-child + tbody.collapsible-child,
#main #product-pricelist .table tbody.collapsible-header.active + tbody.collapsible-child + tbody.collapsible-child + tbody.collapsible-child + tbody.collapsible-child + tbody.collapsible-child,
#main #product-pricelist .table tbody.collapsible-header.active + tbody.collapsible-child + tbody.collapsible-child + tbody.collapsible-child + tbody.collapsible-child + tbody.collapsible-child + tbody.collapsible-child
#main #product-pricelist .table tbody.collapsible-header.active + tbody.collapsible-child + tbody.collapsible-child + tbody.collapsible-child + tbody.collapsible-child + tbody.collapsible-child + tbody.collapsible-child + tbody.collapsible-child,
#main #product-pricelist .table tbody.collapsible-header.active + tbody.collapsible-child + tbody.collapsible-child + tbody.collapsible-child + tbody.collapsible-child + tbody.collapsible-child + tbody.collapsible-child + tbody.collapsible-child + tbody.collapsible-child,
#main #product-pricelist .table tbody.collapsible-header.active + tbody.collapsible-child + tbody.collapsible-child + tbody.collapsible-child + tbody.collapsible-child + tbody.collapsible-child + tbody.collapsible-child + tbody.collapsible-child + tbody.collapsible-child + tbody.collapsible-child  {
	display: table-row-group;
}

#main #product-pricelist .table tbody.collapsible-header > tr {
	position: relative;
	cursor: pointer;
}

#main #product-pricelist .table tbody.collapsible-header > tr > th {
	line-height: 2.5;
	padding-top: 15px;
	padding-bottom: 15px;
	-webkit-user-select: none;
	user-select: none;
}

#main #product-pricelist .table.table-hover tbody.collapsible-header:hover > tr > th,
#main #product-pricelist .table.table-hover tbody.collapsible-header.active > tr > th {
	background-color: var(--secondary-background-color);
}

#main #product-pricelist .table.table-hover tbody.collapsible-header:hover > tr > th > span.underline::after,
#main #product-pricelist .table.table-hover tbody.collapsible-header.active > tr > th > span.underline::after {
	opacity: 1;
}

#main #product-pricelist .table tbody.collapsible-header > tr:first-child::after {
	font-family: "Material Icons";
	content: "add";
	-webkit-font-feature-settings: "liga";
	font-size: 24px;
	font-weight: 500;
	position: absolute;
	right: 25px;
	top: 12px;
	color: var(--dark-anchor-color);
	opacity: 0.3;
	transition: all .1s linear;
}

#main #product-pricelist .table tbody.collapsible-header.active > tr:first-child::after {
	transform: rotate(45deg);
	opacity: 1;
}

#main #product-pricelist .table tbody.collapsible-header:hover > tr:first-child::after {
	opacity: 1;
}

/* product design css */
#main section.product-section.design {
	background:
		linear-gradient(215deg, rgba(237,14,107,1.0), rgba(255,255,255,0) 50.71%), 
		linear-gradient(307deg, rgba(45,52,148,1.0), rgba(255,255,255,0) 50.71%), 
		linear-gradient(160deg, rgba(252,177,54,1.0), rgba(255,255,255,0) 60%), 
		linear-gradient(45deg, rgba(1,187,193,1.0), rgba(255,255,255,0) 100%);
}

#main section.product-section.design * {
	color: white;
}

#main section.product-section.design p {
	font-weight: 500;
	margin-bottom: 50px;
	text-wrap: pretty;
}

#main section.product-section.design ul,
#main section.product-section.design ol {
	list-style-position: outside;
	padding-left: 30px;
	margin-bottom: 30px;
}

#main section.product-section.design li {
	padding-bottom: 15px;
}

#main section.product-section.design h3,
#main section.product-section.design .h3 {
	font-weight: 600;
	font-size: 26px;
	color: white;
}

#main section.product-section.design  .btn {
	max-width: 440px;
	line-height: 1;
}

#main section.product-section.design  .flex-column {
	align-items: center;
}

#main section.product-section .section {
	padding-bottom: 100px;
	margin-bottom: 100px;
	border-bottom: 1px solid rgba(255,255,255,0.5);
}

#main section.product-section .spacing-bottom {
	margin-bottom: 60px;
}

/* product reviews */
#main #product-reviews > .product-header {
	margin-bottom: initial;
}

#main #product-reviews .btn-container {
	margin-top: 100px;
	margin-bottom: 130px;
}

#product-reviews .container .reviews-content {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 50px;
}

#product-reviews .container .reviews-content > article {
	background-color: var(--background-color);
	box-shadow: 0 0 35px rgba(0,0,0,0.12);
	border-radius: 7px;
	line-height: 2;
	padding: 50px;
	opacity: 1;
	transition: opacity .3s ease-in;
}

#product-reviews .container .reviews-content > article.not-intersected {
	opacity: 0;
}

#product-reviews .container .reviews-content > article > .review-header {
	display: flex;
	column-gap: 25px;
	margin-bottom: 15px;
}

#product-reviews .container .reviews-content > article > .review-header > h3,
#product-reviews .container .reviews-content > article > .review-header > .h3,
#product-reviews .container .reviews-content > article > .review-header > .review-stars {
	font-size: 18px;
}

#product-reviews .container .reviews-content > article > .review-header > h3,
#product-reviews .container .reviews-content > article > .review-header > .h3 {
	margin: 0;
	line-height: 1.8;
	text-wrap: balance;
}

#product-reviews .container .reviews-content > article > .review-header > .review-stars {
	display: flex;
	align-items: start;
	padding-top: 4px;
}

#product-reviews .container .reviews-content > article > .review-header > .review-stars > .star {
	margin-right: 3px;
}

#product-reviews .container .reviews-content > article > .review-content .img-container {
	max-width: 135px;
	margin-right: 20px;
	float: left;
	clear: both;
}

#product-reviews .container .reviews-content > article > .review-content p:last-child {
	margin-bottom: 0;
}

/* zoom slider */ 
#product .ui-slider-wrapper {
	position: absolute;
	width: 500px;
	top: 44px;
	left: 0;
	right: var(--product-option-width);
	visibility: hidden;
	opacity: 0;
	transition: visibility 0.25s linear,opacity 0.25s linear;
	background-color: rgba(255, 255, 255, 0.15);
	backdrop-filter: blur(5px);
	border-radius: 15px;
	pointer-events: none;
	margin: 0 auto;
	padding: 15px 17px;
	z-index: 1;
}

/* display zoom slider after creation */ 
#product .ui-slider-wrapper.created {
	visibility: visible;
	opacity: 1;
	pointer-events: all;
}

/* zoom slider slider rail */ 
#product .ui-slider-wrapper >.ui-slider {
	background-color: rgba(0,0,0,0.1);
}

/* zoom slider tooltip */
#product .ui-slider-wrapper >.ui-slider::before,
#product .ui-slider-wrapper >.ui-slider::after {
	position: absolute;
	left: calc(100% + 30px);
	top: 50%;
	opacity: 0;
	transition: opacity 0.15s linear;
	pointer-events: none;
}

/* zoom slider tooltip box */
#product .ui-slider-wrapper >.ui-slider::before {
	content: attr(data-tooltip);
	transform: translateY(-50%);
	background-color: black;
	padding: 13px 10px 13px 22px;
	color: white;
	min-width: 115px;
	font-size: 13px;
	white-space: nowrap;
	border-radius: 6px;
}

/* zoom slider tooltip arrow */
#product .ui-slider-wrapper >.ui-slider::after {
	content: "";
	transform: translate(-100%, -50%);
	color: black;
	border-width: 6px;
	border-style: solid;
	border-color: transparent black transparent transparent;
}

#product .ui-slider-wrapper >.ui-slider.show-tooltip::before,
#product .ui-slider-wrapper >.ui-slider.show-tooltip::after {
	opacity: 1;
}

/* logo editor open */
html.logo-editor-open #product {
	background-color: var(--background-color);
}

/* no fullscreen support - extra css */
html.logo-editor-open.no-fullscreen-support #header,
html.logo-editor-open.no-fullscreen-support #quick-link,
html.logo-editor-open.no-fullscreen-support #footer-menu,
html.logo-editor-open.no-fullscreen-support #footer
html.logo-editor-open.no-fullscreen-support #main > section:not([id="product"]) {
	display: none;
}

/* no fullscreen support - extra css */
html.logo-editor-open.no-fullscreen-support #product {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 10;
}

/* no fullscreen support - needed for displaying the close button in top left corner */
html.config-preview-open.no-fullscreen-support #product-preview-config  + .wrapper #btn-close-fullscreen {
	position: fixed;
	display: block;
	z-index: 100;
}

html.logo-editor-open #product .container > .flex-row > .product-option-container {
	margin-right: 0;
}

html.logo-editor-open #product .body-backdrop {
	z-index: 3;
	top: 0;
}

html.logo-editor-open #main #product #overlay-carousel .overlay-wrapper {
	background-color: var(--background-color);
	position: absolute !important;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	min-height: calc(100vh);
	max-height: calc(100vh);
	max-width: unset;
	min-width: unset;
	padding-top: 0;
	padding-bottom: 0;
	margin: unset;
	aspect-ratio: unset;
}

html.logo-editor-open #overlay-carousel .overlay-wrapper.ui-display-loader {
	pointer-events: none;
}

html.logo-editor-open #overlay-carousel .overlay-wrapper.ui-display-loader::after {
	content: "";
	display: block;
	position: absolute;
	border: 12px solid rgba(0,0,0,0.1);
	border-top: 12px solid rgba(0,0,0,0.3);
	border-radius: 50%;
	width: 250px;
	height: 250px;
	animation: spin 2s linear infinite;
	top: 50%;
	left: 50%;
	margin-left: -425px;
	margin-top: -50px;
}

html.logo-editor-open #overlay-carousel .overlay-wrapper > canvas {
	max-height: 3000px;
	cursor: auto;
}

html.logo-editor-open #overlay-carousel .overlay-wrapper > canvas.ui-overlay-loading {
	visibility: hidden;
}

html.logo-editor-open #overlay-carousel .overlay-wrapper.ui-display-loader > .ui-overlay-controls-wrapper {
	display: none;
}

html.logo-editor-open #overlay-carousel ul > li > .slider-nav {
	right: var(--product-option-width);
}

html.logo-editor-open #product-option {
	height: 100vh;
	padding-right: 45px;
	background-color: rgba(255,255,255,0.9);
}

html.logo-editor-open #product-option::-webkit-scrollbar {
	width: 2px;
}

html.logo-editor-open #product-option-content .content-title, 
html.logo-editor-open #product-option-content .content, 
html.logo-editor-open #product-option-info > .content-title, 
html.logo-editor-open #product-option-info > .content {
	padding-right: 45px;
}

html.logo-editor-open #product-option-footer > .sticky {
	right: 30px;
}

html.logo-editor-open #product-option-footer .btn.btn-done {
	display: block;
	max-width: 400px;
}

html.logo-editor-open #product-option-footer .btn.btn-cart {
	display: none;
}

html.logo-editor-open #product-option-content,
html.logo-editor-open #product-option-info {
	top: 0;
}

html.logo-editor-open #btn-close-fullscreen {
	display: block;
}

html.logo-editor-open #btn-close-fullscreen {
	position: absolute;
	top: 30px;
	left: 30px;
	z-index: 2;
}

html.logo-editor-open #product .canvas-container > .btn-favorites {
	display: none;
}

html.logo-editor-open #btn-close-fullscreen::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background-color: rgba(255, 255, 255, 0.7);
	backdrop-filter: blur(5px);
	border-radius: 50%;
	width: 48px;
	height: 48px;
	z-index: -1;
}

html.logo-editor-open #btn-close-fullscreen  > span {
	font-size: 40px;
	-webkit-user-select: none;
	user-select: none;
}