/**
 * YPC Datafeedr Similar Products
 * Responsive offer cards for the automatic WooCommerce product-page comparison.
 */

.single-product .dfrcs,
.single-product .dfrcs *,
.single-product .dfrcs *::before,
.single-product .dfrcs *::after {
	box-sizing: border-box;
}

.single-product .dfrcs .ypc-dfrcs-heading {
	max-width: 100%;
	margin: 2rem 0 1rem;
	font-size: clamp(1.35rem, 2.3vw, 1.85rem);
	line-height: 1.25;
	overflow-wrap: anywhere;
}

.single-product .dfrcs ul.ypc-dfrcs-compset {
	display: block !important;
	width: 100%;
	max-width: 100%;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	list-style: none !important;
}

.single-product .dfrcs ul.ypc-dfrcs-compset > li.ypc-dfrcs-row {
	width: 100%;
	max-width: 100%;
	margin: 0 0 12px !important;
	padding: 0 !important;
	border: 1px solid #e3e6e8 !important;
	border-radius: 8px;
	background: #fff;
	overflow: hidden;
	list-style: none !important;
}

.single-product .dfrcs ul.ypc-dfrcs-compset > li.ypc-dfrcs-row:last-child {
	border-bottom: 1px solid #e3e6e8 !important;
}

.single-product .dfrcs ul.ypc-dfrcs-compset > li.ypc-dfrcs-row > a.ypc-dfrcs-offer {
	display: block !important;
	width: 100%;
	max-width: 100%;
	margin: 0 !important;
	padding: 14px 16px !important;
	border: 0 !important;
	box-shadow: none !important;
	color: inherit !important;
	text-decoration: none !important;
	touch-action: manipulation;
}

.single-product .dfrcs ul.ypc-dfrcs-compset > li.ypc-dfrcs-row > a.ypc-dfrcs-offer:focus-visible {
	outline: 3px solid currentColor;
	outline-offset: -3px;
}

.single-product .dfrcs ul.ypc-dfrcs-compset .ypc-dfrcs-item {
	display: grid !important;
	grid-template-columns: minmax(0, 1.8fr) minmax(110px, 0.65fr) minmax(90px, 0.4fr) minmax(96px, auto);
	grid-template-areas: "product retailer price button";
	gap: 16px;
	align-items: center;
	justify-content: stretch !important;
	width: 100%;
	max-width: 100%;
	height: auto !important;
	min-height: 78px;
	margin: 0 !important;
	padding: 0 !important;
}

.single-product .dfrcs ul.ypc-dfrcs-compset .ypc-dfrcs-product {
	display: grid !important;
	grid-template-columns: 72px minmax(0, 1fr);
	gap: 14px;
	align-items: center;
	min-width: 0;
	max-width: 100%;
	margin: 0 !important;
	padding: 0 !important;
	grid-area: product;
	text-align: left !important;
}

.single-product .dfrcs ul.ypc-dfrcs-compset .ypc-dfrcs-product.no-image {
	grid-template-columns: minmax(0, 1fr);
}

.single-product .dfrcs ul.ypc-dfrcs-compset .ypc-dfrcs-image {
	display: flex !important;
	flex: none !important;
	align-items: center;
	justify-content: center;
	width: 72px;
	height: 72px;
	min-width: 72px;
	margin: 0 !important;
	padding: 0 !important;
	text-align: center !important;
}

.single-product .dfrcs ul.ypc-dfrcs-compset .ypc-dfrcs-image img {
	display: block !important;
	float: none !important;
	width: auto !important;
	height: auto !important;
	max-width: 72px !important;
	max-height: 72px !important;
	margin: 0 auto !important;
	padding: 0 !important;
	border: 0 !important;
	box-shadow: none !important;
	object-fit: contain;
}

.single-product .dfrcs ul.ypc-dfrcs-compset .ypc-dfrcs-product-name {
	min-width: 0;
	max-width: 100%;
	margin: 0 !important;
	padding: 0 !important;
	color: #222 !important;
	font-size: 16px !important;
	font-weight: 600 !important;
	line-height: 1.35 !important;
	text-align: left !important;
	text-decoration: none !important;
	text-transform: none !important;
	overflow-wrap: anywhere;
	word-break: normal;
	hyphens: auto;
}

.single-product .dfrcs ul.ypc-dfrcs-compset .ypc-dfrcs-retailer,
.single-product .dfrcs ul.ypc-dfrcs-compset .ypc-dfrcs-price,
.single-product .dfrcs ul.ypc-dfrcs-compset .ypc-dfrcs-link {
	min-width: 0;
	max-width: 100%;
	margin: 0 !important;
	padding: 0 !important;
	flex: none !important;
}

.single-product .dfrcs ul.ypc-dfrcs-compset .ypc-dfrcs-retailer {
	grid-area: retailer;
	text-align: left !important;
}

.single-product .dfrcs ul.ypc-dfrcs-compset .ypc-dfrcs-retailer img {
	display: block !important;
	float: none !important;
	width: auto !important;
	height: auto !important;
	max-width: 130px !important;
	max-height: 42px !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	box-shadow: none !important;
	object-fit: contain;
}

.single-product .dfrcs ul.ypc-dfrcs-compset .ypc-dfrcs-retailer span {
	display: none;
	max-width: 100%;
	font-size: 15px !important;
	font-weight: 600 !important;
	line-height: 1.25 !important;
	overflow-wrap: anywhere;
}

.single-product .dfrcs ul.ypc-dfrcs-compset .ypc-dfrcs-retailer.dfrcs_missing_logo img {
	display: none !important;
}

.single-product .dfrcs ul.ypc-dfrcs-compset .ypc-dfrcs-retailer.dfrcs_missing_logo span {
	display: inline !important;
}

.single-product .dfrcs ul.ypc-dfrcs-compset .ypc-dfrcs-retailer-name {
	color: #444 !important;
	font-size: 15px !important;
	font-weight: 600 !important;
	line-height: 1.25 !important;
	overflow-wrap: anywhere;
}

.single-product .dfrcs ul.ypc-dfrcs-compset .ypc-dfrcs-price {
	grid-area: price;
	font-size: 18px !important;
	font-weight: 700 !important;
	line-height: 1.25 !important;
	text-align: left !important;
	white-space: nowrap;
}

.single-product .dfrcs ul.ypc-dfrcs-compset .ypc-dfrcs-price del,
.single-product .dfrcs ul.ypc-dfrcs-compset .ypc-dfrcs-price ins {
	line-height: 1.25 !important;
}

.single-product .dfrcs ul.ypc-dfrcs-compset .ypc-dfrcs-link {
	display: block !important;
	grid-area: button;
	text-align: right !important;
}

.single-product .dfrcs ul.ypc-dfrcs-compset .ypc-dfrcs-link .dfrcs_action {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	height: auto !important;
	padding: 10px 18px !important;
	line-height: 1.2 !important;
	white-space: nowrap;
}

.single-product .dfrcs ul.ypc-dfrcs-compset .ypc-dfrcs-offer > .dfrcs_promo {
	margin: 10px 0 0 !important;
	padding: 10px 0 0 !important;
	border-top: 1px solid #e8eaec;
	line-height: 1.35 !important;
	text-align: left !important;
}

/* Tablet and narrow content columns: turn each row into a compact card. */
@media screen and (max-width: 900px) {
	.single-product .dfrcs ul.ypc-dfrcs-compset .ypc-dfrcs-item {
		grid-template-columns: minmax(0, 1fr) auto;
		grid-template-areas:
			"product product"
			"retailer price"
			"button button";
		gap: 12px 16px;
	}

	.single-product .dfrcs ul.ypc-dfrcs-compset .ypc-dfrcs-product {
		grid-area: product;
	}

	.single-product .dfrcs ul.ypc-dfrcs-compset .ypc-dfrcs-retailer {
		grid-area: retailer;
		align-self: center;
	}

	.single-product .dfrcs ul.ypc-dfrcs-compset .ypc-dfrcs-price {
		grid-area: price;
		align-self: center;
		justify-self: end;
		text-align: right !important;
	}

	.single-product .dfrcs ul.ypc-dfrcs-compset .ypc-dfrcs-link {
		display: block !important;
		grid-area: button;
		width: 100%;
		text-align: center !important;
	}

	.single-product .dfrcs ul.ypc-dfrcs-compset .ypc-dfrcs-link .dfrcs_action {
		width: 100%;
	}
}

/* Phones: retain the thumbnail, wrap long names, and avoid horizontal overflow. */
@media screen and (max-width: 565px) {
	.single-product .dfrcs .ypc-dfrcs-heading {
		font-size: 1.35rem;
	}

	.single-product .dfrcs ul.ypc-dfrcs-compset > li.ypc-dfrcs-row > a.ypc-dfrcs-offer {
		padding: 12px !important;
	}

	.single-product .dfrcs ul.ypc-dfrcs-compset .ypc-dfrcs-item {
		gap: 11px 12px;
	}

	.single-product .dfrcs ul.ypc-dfrcs-compset .ypc-dfrcs-product {
		grid-template-columns: 68px minmax(0, 1fr);
		gap: 11px;
	}

	.single-product .dfrcs ul.ypc-dfrcs-compset .ypc-dfrcs-product.no-image {
		grid-template-columns: minmax(0, 1fr);
	}

	.single-product .dfrcs ul.ypc-dfrcs-compset .ypc-dfrcs-image {
		display: flex !important;
		width: 68px;
		height: 68px;
		min-width: 68px;
	}

	.single-product .dfrcs ul.ypc-dfrcs-compset .ypc-dfrcs-image img {
		max-width: 68px !important;
		max-height: 68px !important;
	}

	.single-product .dfrcs ul.ypc-dfrcs-compset .ypc-dfrcs-product-name {
		font-size: 15px !important;
	}

	.single-product .dfrcs ul.ypc-dfrcs-compset .ypc-dfrcs-retailer img {
		width: auto !important;
		max-width: 105px !important;
		max-height: 36px !important;
	}

	.single-product .dfrcs ul.ypc-dfrcs-compset .ypc-dfrcs-price {
		font-size: 17px !important;
	}
}

/* Very small phones: stack retailer and price as well. */
@media screen and (max-width: 380px) {
	.single-product .dfrcs ul.ypc-dfrcs-compset .ypc-dfrcs-item {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas:
			"product"
			"retailer"
			"price"
			"button";
	}

	.single-product .dfrcs ul.ypc-dfrcs-compset .ypc-dfrcs-price {
		justify-self: start;
		text-align: left !important;
	}

	.single-product .dfrcs ul.ypc-dfrcs-compset .ypc-dfrcs-link {
		display: block !important;
	}
}