/* =========================================================
   SOUQDENT PRODUCT CARD
   ========================================================= */


/* =========================================================
   PRODUCT GRID
   ========================================================= */

.sd-product-grid{
	display:grid;
	grid-template-columns:repeat(3,minmax(0,1fr));
	gap:22px;
	align-items:stretch;
}


/* =========================================================
   PRODUCT CARD
   ========================================================= */

.sd-product-card{
	min-width:0;

	display:flex;
	flex-direction:column;

	height:100%;

	overflow:hidden;

	background:#fff;

	border:1px solid #e5e9ee;
	border-radius:12px;

	transition:
		transform .2s ease,
		box-shadow .2s ease,
		border-color .2s ease;
}


.sd-product-card:hover{
	transform:translateY(-3px);

	border-color:#d9dee5;

	box-shadow:
		0 12px 28px
		rgba(17,24,32,.07);
}


/* =========================================================
   IMAGE LINK
   ========================================================= */

.sd-product-card-image-link{
	display:block;

	width:100%;

	background:#fff;

	border-bottom:1px solid #edf0f3;

	text-decoration:none;
}


/* =========================================================
   IMAGE AREA
   ========================================================= */

.sd-product-card-image{
	position:relative;

	width:100%;
	height:300px;

	display:flex;
	align-items:center;
	justify-content:center;

	padding:12px;

	overflow:hidden;

	background:#fff;
}


/* Real product image */

.sd-product-card-image .sd-product-card-img{
	display:block;

	width:auto;
	height:100%;

	max-width:100%;
	max-height:100%;

	margin:0 auto;

	object-fit:contain;
	object-position:center;

	background:#fff;
}


/* WooCommerce placeholder */

.sd-product-card-image .woocommerce-placeholder{
	display:block;

	width:42%;
	height:42%;

	max-width:42%;
	max-height:42%;

	margin:auto;

	object-fit:contain;

	background:#fff;
}


/* =========================================================
   PRODUCT BODY
   ========================================================= */

.sd-product-card-body{
	display:flex;
	flex:1;
	flex-direction:column;

	padding:17px 16px 16px;
}


/* =========================================================
   BRAND BLOCK

   Row 1:
   [ BRAND LOGO ] [ BRAND NAME ]

   Row 2:
   [ FLAG ] [ COUNTRY ]
   ========================================================= */

.sd-product-card-brand{
	display:flex;
	flex-direction:column;
	align-items:flex-start;

	width:100%;

	margin:0 0 11px;

	color:#687586;
}


/* =========================================================
   BRAND FIRST ROW
   ========================================================= */

.sd-product-card-brand-main{
	display:flex;
	align-items:center;

	width:100%;

	gap:10px;

	min-height:44px;
}


/* =========================================================
   BRAND LOGO LINK
   ========================================================= */

.sd-product-card-brand-logo-link{
	display:flex;
	align-items:center;
	justify-content:flex-start;

	flex:0 0 auto;

	min-width:0;

	text-decoration:none;
}


/* =========================================================
   BRAND LOGO

   IMPORTANT:
   Wide logo area.
   Full original logo remains visible.
   ========================================================= */

.sd-product-card-brand-logo{
	display:flex;
	align-items:center;
	justify-content:flex-start;

	flex:0 0 90px;

	width:90px;
	height:38px;

	padding:0;

	background:transparent;

	border:0;

	overflow:visible;
}


.sd-product-card-brand-logo img{
	display:block;

	width:100%;
	height:100%;

	max-width:90px;
	max-height:38px;

	margin:0;

	object-fit:contain;
	object-position:left center;

	background:transparent;
}


/* =========================================================
   BRAND NAME
   ========================================================= */

.sd-product-card-brand-name{
	display:block;

	flex:1 1 auto;

	min-width:0;

	overflow:hidden;

	color:#687789;

	font-size:13px;
	font-weight:600;
	line-height:1.3;

	text-decoration:none;

	text-overflow:ellipsis;
	white-space:nowrap;
}


a.sd-product-card-brand-name:hover{
	color:#d99000;
}


/* =========================================================
   COUNTRY SECOND ROW
   ========================================================= */

.sd-product-card-brand-country{
	display:flex;
	align-items:center;

	gap:7px;

	margin-top:5px;
	margin-left:0;

	min-height:18px;

	color:#718096;

	font-size:11.5px;
	font-weight:500;
	line-height:1.25;
}


/* =========================================================
   COUNTRY FLAG
   ========================================================= */

.sd-product-card-brand-country img{
	display:block;

	width:22px;
	height:15px;

	flex:0 0 22px;

	object-fit:cover;

	background:#fff;

	border:1px solid #e1e6eb;
	border-radius:2px;
}


/* =========================================================
   COUNTRY NAME
   ========================================================= */

.sd-product-card-brand-country-name{
	display:block;

	min-width:0;

	overflow:hidden;

	font-weight:500;

	text-overflow:ellipsis;
	white-space:nowrap;
}


/* =========================================================
   PRODUCT TITLE
   ========================================================= */

.sd-product-card-title{
	margin:0;

	font-size:15px;
	font-weight:800;
	line-height:1.35;
}


.sd-product-card-title a{
	color:#172230;

	text-decoration:none;
}


.sd-product-card-title a:hover{
	color:#d99000;
}


/* =========================================================
   SHORT DESCRIPTION
   Fixed to 2 rows
   ========================================================= */

.sd-product-card-description{
	margin:8px 0 0;

	height:40px;

	overflow:hidden;

	color:#4f5d6e;

	font-size:13px;
	line-height:1.5;

	display:-webkit-box;

	-webkit-box-orient:vertical;
	-webkit-line-clamp:2;
}


/* =========================================================
   STORE
   ========================================================= */

.sd-product-card-store{
	margin-top:13px;
}


.sd-product-card-store-link{
	display:inline-flex;
	align-items:center;

	gap:9px;

	max-width:100%;

	color:#687789;

	font-size:12px;
	font-weight:600;
	line-height:1.3;

	text-decoration:none;
}


a.sd-product-card-store-link:hover{
	color:#d99000;
}


/* =========================================================
   STORE LOGO
   ========================================================= */

.sd-product-card-store-logo{
	display:flex;
	align-items:center;
	justify-content:flex-start;

	flex:0 0 48px;

	width:48px;
	height:34px;

	padding:0;

	background:transparent;

	border:0;
	border-radius:0;

	overflow:visible;
}


.sd-product-card-store-logo img{
	display:block;

	width:100%;
	height:100%;

	max-width:48px;
	max-height:34px;

	object-fit:contain;
	object-position:left center;

	background:transparent;
}


/* Store placeholder */

.sd-product-card-store-logo.is-placeholder{
	align-items:center;
	justify-content:center;

	color:#8a97a6;
}


.sd-product-card-store-logo.is-placeholder .dashicons{
	width:21px;
	height:21px;

	font-size:21px;
	line-height:21px;
}


/* Store name */

.sd-product-card-store-name{
	min-width:0;

	overflow:hidden;

	text-overflow:ellipsis;
	white-space:nowrap;
}


/* =========================================================
   BOTTOM AREA
   ========================================================= */

.sd-product-card-bottom{
	display:flex;
	flex-direction:column;

	margin-top:auto;
	padding-top:16px;
}


/* =========================================================
   PRICE
   ========================================================= */

.sd-product-card-price{
	min-height:24px;

	margin:0 0 12px;

	color:#d99000;

	font-size:15px;
	font-weight:800;
	line-height:1.35;
}


.sd-product-card-price del{
	margin-right:5px;

	color:#929ba7;

	font-size:12px;
	font-weight:500;
}


.sd-product-card-price ins{
	text-decoration:none;
}


/* =========================================================
   ACTIONS
   ========================================================= */

.sd-product-card-actions{
	display:flex;

	margin-top:auto;
}


/* =========================================================
   VIEW PRODUCT BUTTON
   ========================================================= */

.sd-product-card-view{
	display:inline-flex;
	align-items:center;
	justify-content:center;

	min-height:38px;

	padding:0 14px;

	border-radius:7px;

	background:#111820;
	color:#fff;

	font-size:13px;
	font-weight:800;

	text-decoration:none;

	transition:
		background .2s ease,
		color .2s ease;
}


.sd-product-card-view:hover{
	background:#ffad00;
	color:#111820;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width:1024px){

	.sd-product-grid{
		grid-template-columns:
			repeat(
				2,
				minmax(0,1fr)
			);
	}


	.sd-product-card-image{
		height:260px;
	}

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width:640px){

	.sd-product-grid{
		grid-template-columns:
			repeat(
				2,
				minmax(0,1fr)
			);

		gap:12px;
	}


	/* =====================================================
	   PRODUCT IMAGE
	   ===================================================== */

	.sd-product-card-image{
		height:180px;

		padding:8px;
	}


	.sd-product-card-image .woocommerce-placeholder{
		width:40%;
		height:40%;

		max-width:40%;
		max-height:40%;
	}


	/* =====================================================
	   PRODUCT BODY
	   ===================================================== */

	.sd-product-card-body{
		padding:12px;
	}


	/* =====================================================
	   BRAND — MOBILE
	   ===================================================== */

	.sd-product-card-brand{
		margin-bottom:8px;
	}


	.sd-product-card-brand-main{
		gap:6px;

		min-height:32px;
	}


	/*
	 * Keep enough width for horizontal manufacturer logos.
	 */

	.sd-product-card-brand-logo{
		flex:0 0 58px;

		width:58px;
		height:27px;
	}


	.sd-product-card-brand-logo img{
		width:100%;
		height:100%;

		max-width:58px;
		max-height:27px;

		object-fit:contain;
		object-position:left center;
	}


	.sd-product-card-brand-name{
		font-size:10.5px;
	}


	/* =====================================================
	   COUNTRY — MOBILE
	   ===================================================== */

	.sd-product-card-brand-country{
		gap:5px;

		margin-top:4px;

		font-size:9.5px;
	}


	.sd-product-card-brand-country img{
		width:18px;
		height:12px;

		flex-basis:18px;
	}


	/* =====================================================
	   PRODUCT — MOBILE
	   ===================================================== */

	.sd-product-card-title{
		font-size:13px;
		line-height:1.3;
	}


	.sd-product-card-description{
		margin-top:6px;

		height:34px;

		font-size:11.5px;
		line-height:1.45;
	}


	/* =====================================================
	   STORE — MOBILE
	   ===================================================== */

	.sd-product-card-store{
		margin-top:10px;
	}


	.sd-product-card-store-link{
		gap:6px;

		font-size:10px;
	}


	.sd-product-card-store-logo{
		flex:0 0 36px;

		width:36px;
		height:27px;
	}


	.sd-product-card-store-logo img{
		width:100%;
		height:100%;

		max-width:36px;
		max-height:27px;

		object-fit:contain;
		object-position:left center;
	}


	/* =====================================================
	   BOTTOM — MOBILE
	   ===================================================== */

	.sd-product-card-bottom{
		padding-top:12px;
	}


	.sd-product-card-price{
		min-height:20px;

		margin-bottom:9px;

		font-size:13px;
	}


	.sd-product-card-view{
		width:100%;
		min-height:36px;

		padding:0 8px;

		font-size:12px;
	}

}