
.reveal {
	#sulo-product {
		padding: 0;
		padding: 1rem;
	}
}
#sulo-store .reveal #sulo-product {
	.store-info {
		display: none;
	}
}

.store-name {
	margin: 0;
}

.breadcrumbs {
	margin-top: 1rem;
}

#sulo-product {
	.page-content {
		// padding: 3% 0;
	}
	ul.breadcrumbs {
		border-bottom: $global-border-secondary;
		padding: $global-padding 0;
		margin: $global-margin 0;
	}
	.section {
		.header {
			a {
				font-weight: bold;
				text-transform: none;
			}
		}
	}
	.store-not-found {
		margin-top: $global-margin;
	}
	.product-info-container {
		display: flex;
		flex-direction: column;
		.title {
			font-size: 120%;
		}
		.price {
			font-weight: $global-weight-bold;
			font-size: 110%;
		}
	}
	.product-details {
		p {
			// margin-bottom: 0;
			// @extend h4;
		}
		.ql-editor {
			padding: 0;
		}
	}
	.orbit {
		.orbit-container {
			.photo-container {
				background: transparent;
				&:hover {
					img {
						// opacity: 0;
					}
					.background {
						// background-size: 100%;
					}
				}
				.background {
					background-size: contain;
				}
			}
		}
		.orbit-bullets {
			button {
				height: $orbit-bullet-diameter;
				width: $orbit-bullet-diameter;
				border-radius: 0;
			}
		}
		li.orbit-slide {
			display: list-item;
			opacity: 0;
			position: absolute;
			visibility: hidden;
			// transition: visibility 0s, opacity 0.25s ease-in;
			transition: visibility 0s 0.25s, opacity .25s ease-in-out;
			&.is-active {
				position: relative;
				opacity: 1;
				visibility: visible;
				// transition-delay: 0;
				transition: visibility 0s, opacity .25s ease-in-out;
			}
		}
	}

	.product-action-container {
		.button {
			margin-bottom: 0.2rem;
		}
		> p {
			// overflow-y: hidden;
			text-align: center;
			margin-bottom: 0;
			// font-weight: bold;
			// color: map-get($foundation-palette, success);
			opacity: 0;
			transition: opacity .25s ease-in-out, visibility .25s ease-in-out,;
			visibility: hidden;
			&.show {
				visibility: visible;
				opacity: 1;
			}
		}
	}
	h4 {
		font-weight: 500;
		color: map-get($foundation-palette, primary);
	}

	.store-info {
		.row {
			padding: 0 0.5rem;
		}
		.column {
			padding: 0 0.5rem;
		}
		.title {
			text-transform: uppercase;
			// font-weight: 200;
			font-size: 80%;
		}
		.store-name {
			font-size: 1.1rem;
		}
		.store-tagline {
			font-style: italic;
			color: $dark-gray; 
			// font-weight: 200;
			font-size: 80%;
			p {
				margin: 0;
			}
		}
		a {
			margin: 0;
			// font-size: 1.5rem;
		}
	}
}

.sulo-browse {
	.breadcrumbs.invisible {
		// opacity: 0;
	}
	.categories {
		margin-bottom: 2rem;
		padding-bottom: 1rem;
		border-bottom: 1px solid $medium-gray;
		strong {
			text-transform: uppercase;
		}

		.column {
			padding-bottom: 1.2rem;
			@include breakpoint(medium) {
				padding-top: 0;
			}
			&:nth-child(3n) {
				max-width: 100%;
				flex: 1;
				.photo {
					padding-top: 33%;
				}
				@include breakpoint(medium) {
					flex: 1 0 33%;
					max-width: 33%;
					.photo {
						padding-top: 67%;
					}
				}
			}
		}
		.content {
			// font-size: 1rem;
			> div {
				padding: 0.2rem 0.5rem;
			}
			// padding: 1rem;
		}
		.overlay {
			$overlay: map-get($foundation-palette, primary);
			background: rgba($overlay, 0.3);
			// &:hover {
			// 	background: rgba($overlay, 0.1);
			// }
		}
	}
	.sort {
		display: flex;
		flex-direction: row;
		align-items: center;
		select {
			margin-left: 0.5rem;
		}
	}
	.sulo-items-container {
		padding-bottom: 4rem;
		.row {
			margin: 0;
		}
		select {
			font-size: 90%;
			font-weight: $global-weight-bold;
		}
		.column {
			// margin-bottom: 1.5rem;
			padding-bottom: 0;
		}
		// border-bottom: $global-border;

		> .header {
			text-align: center;
			// text-transform: uppercase;
			// border-bottom: $global-border;
			// font-size: 100%;
			// font-weight: $global-weight-bold;
		}
		&.empty-container {
			padding: 4rem 0;
		}
	}
	&#sulo-live {
		h2 {
			color: map-get($foundation-palette, sulo-dark);
		}
		.column {
			.section-title {
				justify-content: center;
			}
			.section-footer {
				margin-top: $global-margin;
				display: flex;
				justify-content: center;
			}
		}
	}
	.navigation {
		// margin-top: 4rem;
		span {
			// font-family: $header-font-family-sans-serif;
			letter-spacing: -0.5px;
		}
		.menu.vertical.sl-navigation-parent {
			// max-width: inherit;
			// position: fixed;
		}
		ul {		
			// position: fixed;

			// border-top: $global-border;
			border-bottom: $global-border;
			margin-bottom: $global-margin;
			padding: $global-padding;
			.nested {
				border: none;
				display: none;
				margin: 0;
				padding: 0;
				padding-left: $global-padding;
			}

			> li {
				transition: background .25s ease-in-out;
				padding: 0;
				> a {
					padding: 0.75rem 0.5rem;
					transition: background .25s ease-in-out;
					// color: $medium-gray;
				}
				&:hover {
					> a {
						color: $body-font-color;
						background: rgba($light-gray, 0.5);
					}
				}
				&.is-active {
					> a {
						color: $body-font-color;
						font-weight: bold;
						background: transparent;
					}
					// span {
					// 	color: $body-font-color;
					// 	font-weight: bold;
					// }
					> ul.nested {
						display: block;
						a {
							color: $body-font-color;
						}
						li.is-active, li:hover {
							a {
								font-weight: $global-weight-normal;
							}
							// span {
							// 	font-weight: bold;
							// }
							background: rgba($light-gray, 0.5);
						}
					}
				}
			}
		}
	}
	// .navigation {
	// 	// display: none;
	// 	@include breakpoint(large) {
	// 		// display: block;
	// 	}
	// 	ul {
	// 		border-top: 1px solid $medium-gray;
	// 		&.nested, ul {
	// 			border: none;
	// 		}
	// 		li.is-active {
	// 			font-weight: $global-weight-bold;
	// 			background: rgba($black, 0.05); 
	// 			a {
	// 				color: $black;
	// 			}
	// 		}
	// 	}
	// }
	input, select {
		margin: 0;
	}
	h1 {
		@include breakpoint(large) {
			// margin-bottom: 0;
		}
		// margin-bottom: 0;
		// margin-top: 2%;
	}
}
