/**
 * Location: /wp-content/plugins/suntechmall-engine/modules/also-used/assets/also-used.css
 * Purpose:
 * - "Also used" row on out-of-stock Electronic Parts single product
 *   pages: heading plus substitute part-number chips on the same line
 *   as the price and the out-of-stock badge, inside the price row.
 *   Flat clean design (no blur, no shadow), using the site
 *   design tokens.
 *
 * Related files:
 * - modules/also-used/frontend.php (enqueue, only when the row renders)
 * - modules/also-used/templates/row.php (row markup)
 *
 * @package SuntechMallEngine
 */

/* When the row is present, the price container becomes one flex line
   (price, stock badge, "Also used" row) instead of its single-column
   grid, so the row sits on the same line as the badge. The row wraps
   its own chips and the container wraps on narrow screens. The
   tablet and mobile selectors match the two-column price rules in the
   single-product stylesheet, so the flex line wins on every layout. */
body.single-product.stm-engine-storefront .stm-single-price:has(> .stm-also-used),
html[data-stm-layout="tablet"] body.single-product.stm-engine-storefront .stm-single-price:has(> .stm-also-used),
html[data-stm-layout="mobile"] body.single-product.stm-engine-storefront .stm-single-price:has(> .stm-also-used) {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
}

/* The row is a flex item on the price line: it takes the remaining
   width and its own chips wrap inside it, so the line never overflows. */
.stm-also-used {
	display: flex;
	flex: 1 1 auto;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	min-width: 0;
	margin-bottom: 0;
}

.stm-also-used__label {
	color: var(--stm-color-heading, #0f172a);
	font-size: 13px;
	font-weight: 700;
	line-height: 1.4;
}

.stm-also-used__chip {
	display: inline-flex;
	align-items: center;
	padding: 6px 14px;
	border: 1px solid var(--stm-color-border, #e5e7eb);
	border-radius: 999px;
	background: var(--stm-color-surface, #ffffff);
	color: var(--stm-color-ink, #1f2937);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
	text-decoration: none;
}

.stm-also-used__chip:hover {
	border-color: var(--stm-color-primary, #ff6a00);
	background: var(--stm-color-primary-soft, #fff2e8);
	color: var(--stm-color-primary, #ff6a00);
}