/*
 Theme Name: Divi Child
 Theme URI: https://www.elegantthemes.com/gallery/divi/
 Description: Divi Child Theme
 Author: Elegant Themes
 Author URI: https://www.elegantthemes.com
 Template: Divi
 Version: 1.0.0
*/
 
/* =Theme customization starts here
------------------------------------------------------- */
/*######################################## PROJECT #########################################*/

/*
 *						LEO SLEUTEL
 *						Add cross-sells to add to cart form
 * @author				Chris
 * 
 */
/* --- Cross-sell kaart grid --- */

#xsel-as-addons .xsel-card > .xsel-form-wrap #bundle-totals{
	display:none;
}

#xsel-as-addons .xsel-card{
	display:grid;
	grid-template-columns: 10% 25% 25% auto; /* label | image | title | price */
	grid-template-areas:
		"label thumb title price"
		"form  form  form  form";
	gap: 12px 14px;
	align-items:center;
}

/* Elementen op de juiste plek zetten */
#xsel-as-addons .xsel-card > label{ 
	grid-area: label; margin:0; 
}
#xsel-as-addons .xsel-card > .xsel-thumb{ 
	grid-area: thumb; 
	width:92px; 
	height:92px; 
	border-radius:10px; 
	overflow:hidden; 
}
#xsel-as-addons .xsel-card > .xsel-thumb img{ 
	width:100%; 
	height:100%; 
	object-fit:cover; 
	display:block; 
}
#xsel-as-addons .xsel-card > h4{ 
	grid-area: title; 
	margin:0; 
	font-size:1.05rem; 
	line-height:1.25; 
}
#xsel-as-addons .xsel-card > .price{ 
	grid-area: price; 
	margin:0; 
	font-weight:600; 
	white-space:nowrap; 
	overflow: hidden;
}
#xsel-as-addons .xsel-card > .xsel-form-wrap{ 
	grid-area: form; 
	margin-top:4px; 
}


/* Responsive: onder 640px alles netter stapelen */
@media (max-width: 640px){
	#xsel-as-addons .xsel-card{
		grid-template-columns: 80px 1fr auto;
		grid-template-areas:
			"label label label"
			"thumb title price"
			"form  form  form";
	}
	#xsel-as-addons .xsel-card > .xsel-thumb{ width:80px; height:80px; }
}

/*#################################### END PROJECT #########################################*/