/**
 * DEJOIY product preview refinements.
 *
 * Desktop/laptop related products render as a horizontal recommendation rail.
 */

@media (min-width: 1025px) {
	body.single-product .dejoiy-mobile-product-reco.is-placed {
		width: min(100% - 48px, 1420px);
		margin: 32px auto 48px;
		padding: 22px 0 18px;
		background: #fff;
		border: 1px solid rgba(15, 23, 42, 0.08);
		border-radius: 18px;
		box-shadow: 0 18px 48px rgba(15, 23, 42, 0.08);
		overflow: hidden;
	}

	body.single-product .dejoiy-mobile-product-reco__title {
		margin: 0;
		padding: 0 24px 16px;
		font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
		font-size: clamp(1.2rem, 1.4vw, 1.55rem);
		font-weight: 800;
		line-height: 1.2;
		letter-spacing: -0.02em;
		color: #0f172a;
	}

	body.single-product .dejoiy-mobile-product-reco__track {
		display: flex;
		gap: 16px;
		overflow-x: auto;
		overflow-y: hidden;
		padding: 2px 24px 18px;
		scroll-snap-type: x mandatory;
		scroll-padding-left: 24px;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: thin;
		scrollbar-color: rgba(99, 102, 241, 0.35) rgba(226, 232, 240, 0.55);
	}

	body.single-product .dejoiy-mobile-product-reco__track::-webkit-scrollbar {
		height: 8px;
	}

	body.single-product .dejoiy-mobile-product-reco__track::-webkit-scrollbar-track {
		background: rgba(226, 232, 240, 0.55);
		border-radius: 999px;
	}

	body.single-product .dejoiy-mobile-product-reco__track::-webkit-scrollbar-thumb {
		background: linear-gradient(90deg, #3b82f6, #ec4899);
		border-radius: 999px;
	}

	body.single-product .dejoiy-mobile-product-reco__track .dm-card {
		position: relative;
		flex: 0 0 clamp(184px, 15vw, 232px);
		width: clamp(184px, 15vw, 232px);
		min-width: clamp(184px, 15vw, 232px);
		scroll-snap-align: start;
		background: #fff;
		border: 1px solid rgba(15, 23, 42, 0.08);
		border-radius: 16px;
		box-shadow: 0 10px 28px rgba(15, 23, 42, 0.07);
		overflow: hidden;
		transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
	}

	body.single-product .dejoiy-mobile-product-reco__track .dm-card:hover {
		transform: translateY(-3px);
		border-color: rgba(59, 130, 246, 0.2);
		box-shadow: 0 18px 42px rgba(15, 23, 42, 0.12);
	}

	body.single-product .dejoiy-mobile-product-reco__track .dm-card__link {
		display: flex;
		flex-direction: column;
		min-height: 100%;
		color: inherit;
		text-decoration: none;
	}

	body.single-product .dejoiy-mobile-product-reco__track .dm-card__media {
		position: relative;
		aspect-ratio: 1 / 1;
		display: grid;
		place-items: center;
		background: linear-gradient(135deg, #f8fafc, #eef2ff);
		overflow: hidden;
	}

	body.single-product .dejoiy-mobile-product-reco__track .dm-card__media img {
		width: 100%;
		height: 100%;
		object-fit: contain;
		padding: 14px;
		transition: transform 180ms ease;
	}

	body.single-product .dejoiy-mobile-product-reco__track .dm-card:hover .dm-card__media img {
		transform: scale(1.035);
	}

	body.single-product .dejoiy-mobile-product-reco__track .dm-card__ph {
		width: 58%;
		aspect-ratio: 1;
		border-radius: 18px;
		background: linear-gradient(135deg, #dbeafe, #fce7f3);
	}

	body.single-product .dejoiy-mobile-product-reco__track .dm-card__eco {
		position: absolute;
		left: 10px;
		top: 10px;
		max-width: calc(100% - 20px);
		padding: 4px 8px;
		border-radius: 999px;
		background: rgba(15, 23, 42, 0.82);
		color: #fff;
		font-size: 0.68rem;
		font-weight: 800;
		line-height: 1.2;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	body.single-product .dejoiy-mobile-product-reco__track .dm-card__fav {
		position: absolute;
		top: 10px;
		right: 10px;
		z-index: 3;
		width: 34px;
		height: 34px;
		display: grid;
		place-items: center;
		border: 1px solid rgba(15, 23, 42, 0.08);
		border-radius: 50%;
		background: rgba(255, 255, 255, 0.92);
		color: #ec4899;
		box-shadow: 0 8px 20px rgba(15, 23, 42, 0.12);
		cursor: pointer;
	}

	body.single-product .dejoiy-mobile-product-reco__track .dm-card__body {
		display: flex;
		flex-direction: column;
		gap: 6px;
		padding: 12px 13px 14px;
	}

	body.single-product .dejoiy-mobile-product-reco__track .dm-card__dpin {
		align-self: flex-start;
		padding: 3px 7px;
		border-radius: 999px;
		background: rgba(59, 130, 246, 0.09);
		color: #1d4ed8;
		font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
		font-size: 0.66rem;
		font-weight: 800;
		letter-spacing: 0.02em;
	}

	body.single-product .dejoiy-mobile-product-reco__track .dm-card__title {
		display: -webkit-box;
		min-height: 2.65em;
		margin: 0;
		overflow: hidden;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		color: #0f172a;
		font-size: 0.9rem;
		font-weight: 750;
		line-height: 1.32;
	}

	body.single-product .dejoiy-mobile-product-reco__track .dm-card__price {
		color: #2563eb;
		font-size: 0.98rem;
		font-weight: 850;
		line-height: 1.2;
	}

	body.single-product .dejoiy-mobile-product-reco__track .dm-card__price del {
		color: #94a3b8;
		font-size: 0.82em;
		font-weight: 600;
	}

	body.single-product .dejoiy-mobile-product-reco__track .dm-card__seller {
		display: inline-flex;
		align-items: center;
		gap: 5px;
		color: #64748b;
		font-size: 0.72rem;
		font-weight: 650;
	}

	body.single-product .dejoiy-mobile-product-reco__track .dm-card__dot {
		width: 7px;
		height: 7px;
		border-radius: 50%;
		background: #22c55e;
		box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.12);
	}
}