/**
 * Product Image Configurator — cart-facing styles.
 *
 * Split out of frontend.css because the configurator's stylesheet only loads on
 * product pages, while the basket appears everywhere: the mini-cart drawer sits
 * in the site header on every page, and the cart and checkout pages are not
 * product pages. Loading the whole configurator stylesheet sitewide to style
 * three selectors would be wasteful, so these travel on their own.
 *
 * Every custom property carries a fallback, because the file that declares them
 * is usually not present when this one loads.
 *
 * @package ProductImageConfigurator
 */

/* -------------------------------------------------------- Cart integration */

.pic-cart-meta {
	display: inline-flex;
	gap: 8px;
	align-items: center;
	max-width: 100%;
	min-width: 0;
}

.pic-cart-meta__img {
	width: 48px;
	height: 48px;
	object-fit: cover;
	border: 1px solid var( --pic-line, #e4e4e4 );
	border-radius: 6px;
}

/* `break-all` here is what turned a long export filename into one letter per
   line in the mini-cart. The name is shortened in PHP, so ordinary wrapping is
   enough — and `anywhere` still saves an unbroken name in a very narrow theme
   without splitting every word. */
.pic-cart-meta__name {
	min-width: 0;
	font-size: 13px;
	line-height: 1.4;
	overflow-wrap: anywhere;
}

.pic-cart-edit {
	font-size: 14px;
	font-style: italic;
	font-weight: 600;
	line-height: 1.4;
	color: var( --pic-ink, #1d1d1d );
	text-decoration: none;
}

.pic-cart-edit:hover,
.pic-cart-edit:focus-visible {
	color: var( --pic-brand-dark, #d9a806 );
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* WooCommerce prints `<dt class="variation-KEY">key:</dt>` for every item-data
   row. This row is deliberately unlabelled, which leaves a `<dt>` containing a
   bare colon — not empty, so `:empty` cannot reach it. An empty key sanitises
   to the class `variation-`, which can. */
dl.variation dt.variation-,
.variation dt.variation- {
	display: none;
}

dl.variation dd.variation-,
.variation dd.variation- {
	margin: 0;
}

dl.variation dd.variation- p,
.variation dd.variation- p {
	margin: 0;
}

/* Some themes lay the list out as a grid or float the terms; with the term
   hidden the description should take the full width either way. */
dl.variation dd.variation- {
	display: block;
	float: none;
	width: auto;
	padding: 0;
}

.pic-cart-thumb {
	object-fit: cover;
	border-radius: 6px;
}

.pic-order-artwork img {
	max-width: 120px;
	height: auto;
}

/* ------------------------------------------------------------ Small screens */

/* The mini-cart drawer is the narrowest column on the site — often under
   260px once the thumbnail and the padding are taken out. */
@media ( max-width: 600px ) {
	.pic-cart-meta {
		gap: 6px;
	}

	.pic-cart-meta__img {
		width: 40px;
		height: 40px;
	}

	.pic-cart-edit {
		font-size: 13.5px;
	}
}

@media ( pointer: coarse ) {
	/* A text link inside a dense basket row needs a bigger hit area than its
	   own line height provides. */
	.pic-cart-edit {
		display: inline-block;
		padding: 6px 0;
	}
}