/*
Theme Name: FOCSHOP
Description: My custom theme based on Kadence WordPress theme.
Template: kadence
Version: 1.0.0
Text Domain: focshop
Author: MarcoWeb
*/

.ajax-load-more-wrap {
	display: flex;
	flex-flow: column;
	align-items: center;
}

.alm-listing {
	display: flex;
	flex-flow: row;
	width: 80%;
	flex-wrap: wrap;
	max-width: 1290px;
	gap: 20px;
	padding: 0 !important;
	margin-bottom: 30px !important;
}

.alm-item {
	display: flex;
	flex-flow: column;
	align-items: center;
	width: 22.5%;
	background-color: white !important;
	padding: 1em !important;
	border-radius: 10px;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
	gap: 20px;
	margin-bottom: 0 !important;
}

.alm-item img {
	position: relative !important;
	max-width: 200px !important;
	transition: all 0.4s linear;
}

.alm-item .media-column {
	position: relative;
}

.alm-item .media-column img:nth-child(1) {
	opacity: 1;
	height: 200px;
}

.alm-item .media-column img:nth-child(2) {
	position: absolute !important;
	opacity: 0;
	top: 0;
	left: 0;
	pointer-events: none;
	height: 200px;
}

.alm-item .media-column:hover img:nth-child(1) {
	opacity: 0;
	pointer-events: none;
}

.alm-item .media-column:hover img:nth-child(2) {
	opacity: 1;
	pointer-events: auto;
}

.alm-item .product-info-column {
	display: flex;
	flex-flow: column;
	width: 100%;
	gap: 10px;
}

.alm-item .product-info-column>a {
	text-decoration: none;
	text-align: center;
}

.alm-item .product-info-column h3 {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	font-size: 1em;
	overflow: hidden;
	transition: all 0.1s linear;
}

.alm-item .product-info-column>a:hover h3 {
	color: #4d40ff;
}

.alm-item .product-info-column .price {
	color: #4d40ff;
	font-weight: bold;
}

.alm-item .product-info-column .price small {
	font-weight: 400 !important;
	font-size: 0.9em;
}

textarea.wpcf7-form-control,
input.wpcf7-form-control {
	width: 100%;
	border-radius: 10px !important;
	background-color: rgb(245, 245, 245) !important;
}

input.wpcf7-submit {
	background-color: #e21e51 !important;
}

#woocommerce-product-search-field-0 {
	background-color: white !important;
}

.search-toggle-close .kadence-close-svg {
	fill: white !important;
}

.entry-summary form.cart {
	display: flex;
	flex-flow: column;
	gap: 15px;
}

.entry-summary form.cart .quantity {
	width: fit-content;
}

.request-quote-btn-single-product-layout {
	text-align: center !important;
	background-color: #1b1b1b !important;
	transition: all 0.5s linear;
}

.request-quote-btn-single-product-layout:hover {
	transform: scale(1.05);
	transform: translateY(-5px);
}

.single-product-payments-custom-01 .payment-custom-img {
	max-height: 50px !important;
}

.single-product .product_meta {
	font-size: larger;
}

.single-product .product_meta > span {
	color: #1b1b1b !important
}

.single-product .product_title {
	font-size: 28px;
}

.single-product .price > span > bdi {
	font-weight: bold;
}

.post-type-archive-product ul.products li.product {
	background-color: white !important;
	padding: 1em !important;
	border-radius: 10px;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
	gap: 10px;
}

.post-type-archive-product ul.products li.product .product-details {
	background-color: white !important;
	padding: 0 !important;
	margin: 0 !important;
}

.post-type-archive-product ul.products li.product .product-details .woocommerce-loop-product__title > a {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	font-size: 1em;
	font-weight: bold;
	text-align: center;
}

.post-type-archive-product ul.products li.product .product-details .price {
	text-align: center;
	font-size: 0.95em;
}

.price > span.woocommerce-Price-amount > bdi {
	font-weight: bold;
}

.post-type-archive-product ul.products li.product .product-details .product-action-wrap {
	display: flex;
	flex-flow: column;
	gap: 10px;
}

@media only screen and (max-width: 1199px) {
	.alm-listing {
		width: 100%;
	}

	.alm-item {
		width: 100%;
	}

	#mobile-header .site-main-header-inner-wrap {
		grid-template-columns: auto auto auto;
	}
}