/*
	Theme Name: Hello Studio22
	Theme URI: https://studio22.com.au
	Author: Adam Trickett (Studio22)
	Author URI: https://studio22.com.au
	Description: Hello Studio22 is a custom theme for Studio22. Better than Hello Elementor.
*/

body.elementor-editor-active:not(.admin-bar) {
	/* removes body margin inside Elementor iframe. doesn't work if moved to an editor-stylesheet so it has to go here. */
	/* ignored on frontend if user is logged in and admin bar is shown. */
	margin: 0 !important;
}

body {
	gap: 0;
	margin: 0 !important;

	&.hello-studio22 {
		font-family: "poppins", sans-serif;

		a {
			color: var(--e-global-color-primary);
		}
	}
}

body.admin-bar header,
body header:not(#elementor-panel-header-wrapper) {
	margin-top: 100px;
}

body.admin-bar {

	#wpadminbar {
		position: fixed !important;
	}

	header {
		div.elementor-element.header-container {
			top: 32px;
		}
	}
}


/*product archive sidebar */
ul:is(.product-archive-category-list, .product-archive-tag-list, .product-archive-material-list) {
	list-style-type: none;
	margin: 0;
	padding: 0;

	li {
		margin-bottom: 0.625rem;
		font-family: "poppins", sans-serif;

		a {
			font-size: 1rem;
			font-weight: 400;
			color: var(--site-heading-color);
		}
	}
}

body ul.page-numbers {
	border: 0 none !important;

	li {
		border: 0 none !important;

		span.page-numbers.current {
			background-color: var(--e-global-color-primary);
			color: #FFF;
		}

		a {
			font-family: "poppins", sans-serif;
			font-size: 1rem;
			font-weight: 400;
			color: var(--site-heading-color);
		}
	}
}

.studio22-product-grid-header {
	display: flex;
	flex-direction: row;
	gap: 1rem;
	align-items: center;
	justify-content: flex-end;
	margin-bottom: 2rem;
	font-family: "poppins", sans-serif;
	font-size: 0.75rem;

	@media (min-width: 1024px) {

		margin-top: -70px;

		&>* {
			float: none !important;
		}
	}

	form,
	form select,
	p {
		margin: 0 !important;
		font-family: "poppins", sans-serif;
		font-size: 0.75rem;
	}

	form select {
		background-color: var(--e-global-color-2f53f85);
		border: 0 none;
	}
}

/* Force Elementor Cart Icon to Always Be Visible */
#elementor-menu-cart__toggle_button {
	visibility: visible !important;
	opacity: 1 !important;
	display: flex !important;
	align-items: center;
	justify-content: center;
}

/* Apply an SVG mask and color it dynamically */
#elementor-menu-cart__toggle_button i {
	display: inline-block !important;
	width: 16px !important;
	height: 14px !important;
	margin-bottom: 1px;
	background-color: var(--e-global-color-primary) !important;
	/* Fills the icon */
	-webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M528.12 301.319l47.273-208C578.806 78.301 567.391 64 551.99 64H159.208l-9.166-44.81C147.758 8.021 137.93 0 126.529 0H24C10.745 0 0 10.745 0 24v16c0 13.255 10.745 24 24 24h69.883l70.248 343.435C147.325 417.1 136 435.222 136 456c0 30.928 25.072 56 56 56s56-25.072 56-56c0-15.674-6.447-29.835-16.824-40h209.647C430.447 426.165 424 440.326 424 456c0 30.928 25.072 56 56 56s56-25.072 56-56c0-22.172-12.888-41.332-31.579-50.405l5.517-24.276c3.413-15.018-8.002-29.319-23.403-29.319H218.117l-6.545-32h293.145c11.206 0 20.92-7.754 23.403-18.681z"></path></svg>') !important;
	-webkit-mask-size: cover;
	-webkit-mask-repeat: no-repeat;
	mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M528.12 301.319l47.273-208C578.806 78.301 567.391 64 551.99 64H159.208l-9.166-44.81C147.758 8.021 137.93 0 126.529 0H24C10.745 0 0 10.745 0 24v16c0 13.255 10.745 24 24 24h69.883l70.248 343.435C147.325 417.1 136 435.222 136 456c0 30.928 25.072 56 56 56s56-25.072 56-56c0-15.674-6.447-29.835-16.824-40h209.647C430.447 426.165 424 440.326 424 456c0 30.928 25.072 56 56 56s56-25.072 56-56c0-22.172-12.888-41.332-31.579-50.405l5.517-24.276c3.413-15.018-8.002-29.319-23.403-29.319H218.117l-6.545-32h293.145c11.206 0 20.92-7.754 23.403-18.681z"></path></svg>') !important;
	mask-size: cover;
	mask-repeat: no-repeat;
}

/* homepage tile animations */
body#hello_studio22 {
	.hidden-until-animated {
		opacity: 0;
		animation: fadeInAndSlideUp 1s forwards;
	}

	.e-loop-item {
		&:nth-child(1) .hidden-until-animated {
			animation-delay: 100ms;
		}

		&:nth-child(2) .hidden-until-animated {
			animation-delay: 200ms;
		}

		&:nth-child(3) .hidden-until-animated {
			animation-delay: 300ms;
		}

		&:nth-child(4) .hidden-until-animated {
			animation-delay: 400ms;
		}

		&:nth-child(5) .hidden-until-animated {
			animation-delay: 500ms;
		}

		&:nth-child(6) .hidden-until-animated {
			animation-delay: 600ms;
		}

		&:nth-child(7) .hidden-until-animated {
			animation-delay: 700ms;
		}

		&:nth-child(8) .hidden-until-animated {
			animation-delay: 800ms;
		}

		&:nth-child(9) .hidden-until-animated {
			animation-delay: 900ms;
		}
	}


}

@keyframes fadeInAndSlideUp {
	from {
		opacity: 0;
		transform: translateY(20px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* product tabs clean up */
.woocommerce-tabs.wc-tabs-wrapper {
	font-family: "poppins", sans-serif;

	.panel {
		h2 {
			display: none !important;
		}
	}

	ul.wc-tabs {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		padding: 0 !important;
		margin: 0 0 2rem 0 !important;
		list-style: none;

		li:is(.description_tab, .additional_information_tab, .reviews_tab) {
			flex: 1;
			border: 0 none !important;
			text-align: center;
			border-radius: 0;
			background-color: transparent !important;
			margin: 0 0 0 0 !important;

			a {
				font-size: 1.625rem;
				line-height: 1rem;
				font-weight: 400 !important;
			}

			&.active {
				position: relative;


				&::after {
					position: absolute;
					left: 0;
					bottom: -1px;
					content: "";
					width: 100%;
					height: 10px;
					background-color: #D6D2C4;
				}
			}
		}
	}

	div:is(#tab-description, #tab-additional_information, #tab-reviews) {
		padding: 0 1.875rem 1.875rem 1.875rem !important;
		margin: 0 0 0 0 !important;
		border: 0 none !important;
		background-color: transparent !important;

		h2 {
			display: none !important;
		}

		p {
			margin: 0 0 1.875rem 0 !important;
			font-family: "poppins", sans-serif;
			font-size: 1rem;
			line-height: 1.5rem;
			font-weight: 400;
		}
	}

	/* blog templates */
	ul:is(.blog-category-list-for-current-post) {
		list-style: none;
		display: flex;
		flex-direction: row;
		gap: 0.5rem;
		padding: 0;
		margin: 0 0 0 0;

		li {
			a {
				background: var(--e-global-color-accent);
				font-family: "poppins", sans-serif;
				color: #FFF !important;
				display: block;
				font-size: 0.6875rem !important;
				text-transform: uppercase;
				line-height: 1;
				padding: 5px 10px;
				border-radius: 3px;
			}
		}
	}

	.elementor-widget-theme-post-excerpt {
		p {
			margin: 0 0 0 0;
			display: inline;
			;
		}
	}

	.elementor-widget-theme-post-featured-image a {
		display: block !important;
	}

	.blog-aside {
		gap: 0 !important;

		.blog-aside-search {
			padding: 0 0 1.875rem 0 !important;
			margin: 0 0 1.875rem 0 !important;
			border-bottom: 1px solid #F3F3F3;

			form {
				display: flex;
				position: relative;
				height: 48px;
				background: #F3F3F3 !important;

				input[type="search"] {
					display: block;
					background: transparent;
					border: 0 none;
					padding-left: 1rem;
				}

				button {
					position: absolute;
					top: 0;
					right: 0;
					aspect-ratio: 1;
					width: 48px;
					height: 48px;
					background: transparent !important;
					display: flex;
					align-items: center;
					justify-items: center;

					svg {
						margin: 0 0 0 0;
						fill: #000 !important;
					}
				}
			}
		}

		h5 {
			margin: 0 0 0 0 !important;
			font-family: "poppins", Sans-Serif;
			font-size: 1.5rem;
			font-weight: 500;
		}

		.blog-aside-categories {

			ul {
				margin: 1.875rem 0 1.875rem 0;
				border-bottom: 1px solid #F3F3F3;
				padding: 0 0 1.875rem 0;
				list-style: none;
				display: flex;
				flex-direction: column;
				gap: 0.5rem;

				li {
					a {
						font-family: "poppins", sans-serif;
						font-size: 1rem;
						font-weight: 400;
						color: var(--site-heading-color);
					}
				}

			}

		}

		.blog-aside-archives {
			select {
				margin: 1.875rem 0 1.875rem 0;
				display: block;
				width: 100%;
				height: 48px;
				border-radius: 0;
				border: 1px solid #000;
				background-color: transparent;
			}
		}

		.blog-aside-recent-posts {
			padding: 0 0 1.875rem 0 !important;
			margin: 1.875rem 0 1.875rem 0 !important;
			border-bottom: 1px solid #F3F3F3;

			.blog-aside-recent-post-tile {
				gap: 0 !important;
				padding: 0 0 1.25rem 0;
				margin: 0 0 1.25rem 0;
				border-bottom: 1px solid #F3F3F3;

				.elementor-widget-image {
					min-width: 80px;

					img {
						display: block;
						aspect-ratio: 1;
					}
				}

				.line-post-date {
					ul {
						height: max-content;
						list-style: none;
						margin: 0;
						padding: 0;

						li {
							height: max-content;
							margin: 0 0 0 0 !important;
							padding: 0;

							span {
								height: max-content;

								time {
									display: block;
									font-family: "poppins", Sans-Serif !important;
									font-size: 0.75rem !important;
									line-height: 1;
									font-weight: 400;
									text-transform: uppercase;
									color: var(--e-global-color-accent);
								}
							}
						}
					}
				}

				.line-post-title {
					span a {
						display: block;
						font-family: "poppins", Sans-Serif !important;
						font-size: 0.875rem !important;
						line-height: 1.25;
						font-weight: 400;
					}
				}
			}
		}
	}
}

#blog_single {

	.elementor-widget-post-info {
		.elementor-inline-items {
			.elementor-post-info__item--type-author {
				.elementor-post-info__item-prefix {
					text-transform: capitalize;
				}
			}

			.elementor-post-info__item--type-date {
				.elementor-post-info__item-prefix {
					text-transform: none;
				}
			}

			.elementor-post-info__item--type-terms {
				margin-left: 0.5rem;
				padding-left: 0.5rem;
				border-left: 1px solid var(--e-global-color-accent);
			}
		}
	}

	.elementor-widget-theme-post-content {
		p:first-of-type {
			margin-top: 0 !important;
		}
	}

	h3#reply-title {
		font-size: 1.5rem;
		font-weight: 500;
		margin: 0 0 0.5rem 0;
	}
}

.elementor-widget-post-comments {
	font-family: "poppins", Sans-Serif;

	h3#reply-title {
		font-size: 1.5rem;
		font-weight: 500;
		margin: 0 0 0.5rem 0;
	}
}

.woocommerce ul.products li.product a img {
	height:460px;
	object-fit:cover;
}

body.woocommerce-page div.product .elementor-widget-woocommerce-product-images div.images {
	display:flex;
	flex-direction:row-reverse;
	

	.flex-viewport {
		width:100%;
		padding-left: 2rem;
	}

	.flex-control-nav {
		display:flex;
		flex-direction:column;
		gap:1rem;
		margin:0 !important;
		min-width:6rem;

		li {
			padding:0 0 0 0;
			width:6rem;
			aspect-ratio:1;

			img {
				display:block;
				width:100%;
				height:100%;
				aspect-ratio:1;
			}
		}
	}
}