/* =============================================================================
   PRODUCT LIST -- a titled card of compact product rows
   =============================================================================
   The dense companion to the product card (product-card.css): a white card
   with a title row and up to three one-line product rows
   (template-parts/product-row.php). First used by the product page's "Keep
   exploring" band; nothing in here knows about that page.

   Below --bp-sm a card marked data-product-list-collapsible becomes an
   accordion: assets/js/product-list.js turns the title into a button and
   starts it collapsed. Without JavaScript every card stays open.
   ============================================================================= */

.product-list {
	display:          flex;
	flex-direction:   column;
	min-width:        0;
	overflow:         hidden; /* row hover backgrounds follow the corners */
	background-color: var(--color-bg-primary);
	border:           1px solid var(--color-border-subtle);
	border-radius:    var(--radius-m);
}

.product-list__header {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	gap:             var(--space-xs);
	margin:          0;
	padding:         var(--space-s) var(--space-m);
	border-bottom:   1px solid var(--color-border-subtle);
	font-size:       var(--text-ui);
	font-weight:     var(--weight-black);
	line-height:     var(--leading-slim);
	color:           var(--color-text-primary);
}

.product-list__chevron {
	display:    none; /* only the accordion shows it */
	flex:       none;
	transition: transform var(--duration-fast) var(--ease-standard);
}

.product-list__items {
	margin:     0;
	padding:    0;
	list-style: none;
}

/* Hairline between rows: half-way between the card border and white. */
.product-list__item + .product-list__item {
	border-top: 1px solid color-mix(in srgb, var(--color-border-subtle) 50%, var(--color-bg-primary));
}

/* ---- Row --------------------------------------------------------------- */

.product-row {
	display:         flex;
	align-items:     center;
	gap:             var(--space-s);
	padding:         var(--space-s) var(--space-m);
	color:           var(--color-text-primary);
	text-decoration: none;
}

.product-row:hover {
	background-color: color-mix(in srgb, var(--color-bg-subtle) 50%, var(--color-bg-primary));
	text-decoration:  none;
}

/* Inset, so the card's overflow: hidden cannot clip it. */
.product-row:focus-visible {
	outline:        2px solid var(--color-text-primary);
	outline-offset: -2px;
}

.product-row__media {
	flex:          none;
	width:         48px;
	height:        48px;
	object-fit:    contain;
	border-radius: var(--radius-s);
}

span.product-row__media {
	background-color: var(--color-bg-subtle);
}

.product-row__body {
	display:        flex;
	flex:           1;
	flex-direction: column;
	min-width:      0;
	line-height:    var(--leading-slim);
}

.product-row__brand {
	font-size:      var(--text-2xs);
	font-weight:    var(--weight-bold);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color:          var(--color-text-secondary);
}

.product-row__name {
	font-size:   var(--text-body-small);
	font-weight: var(--weight-bold);
}

/* One line, always: a long value ends in an ellipsis rather than wrapping. */
.product-row__spec {
	overflow:      hidden;
	font-size:     var(--text-xs);
	color:         var(--color-text-secondary);
	white-space:   nowrap;
	text-overflow: ellipsis;
}

.product-row__price {
	flex:        none;
	font-size:   var(--text-body-small);
	font-weight: var(--weight-bold);
	color:       var(--color-accent);
	white-space: nowrap;
}

/* "From" before a lowest-variant price: quieter than the amount it qualifies. */
.product-row__price-from {
	font-size:   var(--text-xs);
	font-weight: var(--weight-regular);
	color:       var(--color-text-secondary);
}

/* =============================================================================
   ACCORDION -- below --bp-sm (600px), via assets/js/product-list.js
   ============================================================================= */

.product-list__toggle {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	gap:             var(--space-xs);
	width:           100%;
	min-height:      44px;
	margin:          0;
	padding:         var(--space-s) var(--space-m);
	font:            inherit;
	color:           inherit;
	text-align:      left;
	background:      none;
	border:          0;
	cursor:          pointer;
}

.product-list__toggle:focus-visible {
	outline:        2px solid var(--color-text-primary);
	outline-offset: -2px;
}

/* The button carries the padding once it exists. */
.product-list__header:has( > .product-list__toggle ) {
	padding: 0;
}

.product-list__toggle .product-list__chevron {
	display: block;
}

.product-list__toggle[aria-expanded="true"] .product-list__chevron {
	transform: rotate( 180deg );
}

.product-list.is-collapsed .product-list__header {
	border-bottom: 0;
}

@media ( prefers-reduced-motion: reduce ) {
	.product-list__chevron {
		transition: none;
	}
}