/* 
Theme Name: DJ Jewelry
Template: hello-elementor
Version: 1.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
*/

/* --------------------------------------------------------------
# Contents
#
# 0. Global
# 1. Header - Search
# 2. Navbar - Menu
# 3. Products Grid
# 4. DJ Product Gallery
# 5. DJ Product Tabs
# 6. Account
# 7. Cart
# 8. Breadcrumbs
-------------------------------------------------------------- */

/* --------------------------------------------------------------
# 0. Global
-------------------------------------------------------------- */
.dj-wrapper {
    padding-inline: 16px;
    box-sizing: border-box;
}

@media screen and (max-width: 767px) {
	.dj-wrapper {
		padding-inline: 10px;
	}
	.dj-wrapper.mobile-no-padding {
		padding-inline: 0;
	}
}

body.home header,
body.archive header,
body.blog header {
	background-color: transparent !important;
} 

/* ICON BOX FIX */
.icon-box-fix .elementor-icon  {
    display: flex;
}

.icon-box-fix .elementor-icon-box-content {
	display: flex;
	align-items: center;
}

/* PARAGRAPH */
.no-margin-p p {
	margin-bottom: 0;
}

/* A links */
.page-content a {
	text-decoration: none;
}

/** Forms */
.wpfFilterWrapper select {
	padding-left: 5px;
}

/* --------------------------------------------------------------
# 1. Header - Search
-------------------------------------------------------------- */
.dj-search {
	@media screen and (max-width: 600px) {
		.dgwt-wcas-ico-magnifier-handler {
			width: 16px;
			height: auto;
		}
	}
}

/* --------------------------------------------------------------
# 2. Navbar - Menu
-------------------------------------------------------------- */
.dj-navbar-menu .hfe-nav-menu li:last-child a {
	color: var(--e-global-color-accent);
	font-weight: 600;
}


/* --------------------------------------------------------------
# 3. Products Grid
-------------------------------------------------------------- */
.dj-product-grid-4 .wpr-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-auto-rows: 1fr;
	gap: 0px 20px;
	height: fit-content !important;
}

.dj-product-grid-4 .wpr-grid:after {
	display: none;
}

.dj-product-grid-4 .wpr-grid-item {
	position: static !important;
	width: 100% !important;
    height: auto !important;
}

@media screen and (max-width: 1000px) {
	.dj-product-grid-4 .wpr-grid {
		gap: 0px 12px;
	}
}

@media screen and (max-width: 768px) {
	.dj-product-grid-4 .wpr-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media screen and (max-width: 500px) {
	.dj-product-grid-4 .wpr-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 0px 6px;
	}
}

/* --------------------------------------------------------------
# 4. DJ Product Gallery
-------------------------------------------------------------- */
.dj-product-gallery .flex-control-thumbs img {
	aspect-ratio: 4 / 5;
	object-fit: cover;
}

.dj-product-gallery .woocommerce-product-gallery__image {
	aspect-ratio: 1 / 1.1;
}

.dj-product-gallery .woocommerce-product-gallery__image img {
	aspect-ratio: 1 / 1.1;
	height: auto;
	width: 100%;
	object-fit: cover;
}

/* --------------------------------------------------------------
# 5. DJ Product Tabs
-------------------------------------------------------------- */
.dj-product-tab {
	h3 {
		margin-top: 20px;
	}
}

@media screen and (max-width: 600px) {
	.dj-product-tab .wc-tabs {
		flex-direction: column;
		align-items: center;
	}
	
	.dj-product-tab .wc-tabs li {
		width: 100%;
	}
}

/* --------------------------------------------------------------
# 6. Account
-------------------------------------------------------------- */
.dj-account {
	.woocommerce-MyAccount-navigation {
		ul {
			padding: 0;
			margin: 0;
			list-style: none;
			li {
				&:not(:last-of-type) {
					a {
						border-bottom: 1px solid #FFFFFF;
					}

				}
				&.is-active {
					a {
						font-weight: 700;
					}
				}
				a {
					padding: 10px 15px;
					color: var(--e-global-color-text);
					background-color: var(--e-global-color-eea14db);
					box-sizing: border-box;
				}
			}
		}
	}
}


/* --------------------------------------------------------------
# 7. Cart
-------------------------------------------------------------- */
.dj-cart {
	.wc-forward {
		font-size: 16px !important;
		color: #FFFFFF !important;
		background-color: var(--e-global-color-primary) !important;
		border: 1px solid var(--e-global-color-primary) !important;
		&:hover {
			color: var(--e-global-color-primary) !important;
			background-color: transparent !important;
		}
	}
}

/* --------------------------------------------------------------
# 8. Breadcrumbs
-------------------------------------------------------------- */
.rank-math-breadcrumb {
	a,
	span {
		color: #111;
	}
	a {
		&:hover {
			color: #000;
		}
	}
	p {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
		gap: 8px;
		text-align: center;
	}
}

.hero-section .rank-math-breadcrumb {
	a,
	span {
		color: #FFF;
	}
	a {
		&:hover {
			color: #e4e4e4;
		}
	}
}