/*
  Cart: show designer preview + product title stacked (thumbnail on top, title underneath)
  This keeps the cart layout consistent between desktop and mobile.
*/


/*
  Cart + Checkout: show designer preview + product title stacked
  (thumbnail on top, title underneath).

  On checkout, Woo/Flatsome sometimes puts the title next to the image
  unless we explicitly enforce a column layout.
*/
.woocommerce-cart .khl-cart-designer-name,
.woocommerce-checkout .khl-cart-designer-name,
.woocommerce-order-pay .khl-cart-designer-name {
	display: inline-flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
}

.woocommerce-cart .khl-cart-designer-name .khl-cart-designer-preview,
.woocommerce-checkout .khl-cart-designer-name .khl-cart-designer-preview,
.woocommerce-order-pay .khl-cart-designer-name .khl-cart-designer-preview {
	display: block;
}

/*
  Cart thumbnail background:
  The designer preview PNGs are transparent. In the cart (and mini-cart) that can make
  white letters disappear on a white page background.

  We enforce the old checker/pattern background behind the image.
  Note: some themes reset img backgrounds with `background: none !important;`,
  so we use !important here to ensure it always shows.
*/
.khl-cart-designer-preview {
	background-color: #f1f1f1 !important;
	background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTAgMTBIMTBWMjBIMFYxMFpNMTAgMEgyMFYxMEgxMFYwWiIgZmlsbD0iYmxhY2siIGZpbGwtb3BhY2l0eT0iMC4wNSIvPgo8L3N2Zz4K") !important;
	background-repeat: repeat !important;
	background-size: 15px 15px !important;
	background-position: 0 0 !important;
}

.woocommerce-cart .khl-cart-designer-title,
.woocommerce-checkout .khl-cart-designer-title,
.woocommerce-order-pay .khl-cart-designer-title {
	display: block;
}

.woocommerce-cart .khl-cart-designer-title a,
.woocommerce-checkout .khl-cart-designer-title a,
.woocommerce-order-pay .khl-cart-designer-title a {
	display: inline-block;
	margin-top: 2px;
}