@import '_global.scss';

.mlwoo--single-product {
	min-height: calc( 100vh - 80px );
	height: calc( 100vh - 80px );
	overflow-y: scroll;

	.mlwoo-breadcrumb {
		font-size: 1.15rem;
		font-weight: 700;

		a {
			color: var( --color-primary-1 );
			font-weight: 100;
			text-decoration: none;
			font-size: 1rem;
		}
	}

	&__title {
		font-family: var( --font-playfair );
		font-weight: 700;
		font-size: 1.65rem;
		color: var( --font-color-title );
		margin-top: 1rem;
		margin-bottom: 0.5rem;
	}

	&__carousel {
		margin: 0 -1.25rem;
	}

	&__carousel,
	&__thumbnail-nav {
		img {
			display: block;
			width: 100%;
			height: auto;
		}
	}

	&__fp-image-item {
		border-radius: var( --radius );
	}

	&__thumbnail-nav {
		display: flex;
		flex-flow: row wrap;
		margin-top: 0.25rem;
		align-items: center;

		img {
			display: block;
			max-width: 48px;
			height: auto;
			margin-right: 6px;
			border-radius: var( --radius );
			border: 2px solid rgba( 0, 0, 0, 0 );

			&.tns-nav-active {
				border: 2px solid var( --color-secondary-1 );
			}
		}
	}

	#tns1 > .tns-item {
		padding: 1rem;

		img {
			box-shadow: 0px 0.175em 0.5em rgba(2, 8, 20, 0.1), 0px 0.085em 0.175em rgba(2, 8, 20, 0.15);
		}
	}

	&__sku-wrapper {
		display: block;
		margin: 1rem 0;
		font-weight: 700;
	}

	&__sku {
		font-weight: 400;
	}

	&__price {
		font-size: 1.5rem;
		font-family: var( --font-nunito );
		font-weight: 700;
		margin-top: 0.75rem;

		del {
			font-size: 1rem;
			font-weight: 400;
			color: var( --color-secondary-4 );
		}

		ins {
			text-decoration: none;
		}
	}

	&__add-to-cart-form {
		display: flex;
		flex-flow: row wrap;
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 80px;
		padding: 0.85rem;
		border-top: 2px solid var( --color-primary-2 );
		background-color: #fff;
		z-index: 10;
	}

	&__quantity {
		display: flex;
		flex-flow: row wrap;
		align-items: center;
		border-radius: var( --radius );
		margin-right: 1.25rem;
	}

	&__quantity-input {
		padding: 0.5rem 0.85rem;
		text-align: center;
		font-size: 1.25rem;
	}

	&__quantity-input-control {
		display: flex;
		justify-content: center;
		width: 35px;
		height: 35px;
		border-radius: 50%;
		color: var( --color-secondary-3 );
		font-family: var( --font-nunito );
		font-weight: 700;
		font-size: 1.85rem;
		border: 2px solid var( --color-secondary-3 );
		line-height: 28px;

		&--decrease {
			margin-right: 0.75rem;
		}

		&--increase {
			margin-left: 0.75rem;
		}

		&:active {
			background: var( --color-primary-2 );
		}
	}

	.mlwoo--single-product__add-to-cart-button {
		position: relative;
		height: 50px;
		flex: 1;
	}

	&__add-to-cart-spinner {
		display: none;
		@include absolute-center;

		svg {
			display: block;
		}
	}
}