/* ---------- Product add-ons --------------------------------------------
   The extras area (inc/product-addons.php, template-parts/product-addons.php),
   Valery, 2026-09-28: "מתחת למורצ ליפני תיאור נעשה שדה בחירה של דברים נוספים
   שיתחייל אםפ כפתור פלוס ואם לחצו על פלוס יפתח שדה דרופ ליסט של מוצרים".

   It used to live at the end of single-product-details.css and hang under the
   description tabs. It then sat inside the product summary, between the price
   and the excerpt. SINCE 2026-09-29 it is a full-width row of `div.product`,
   under the images and above the tab bar (Valery: "תוספות צריך לרדת למטה
   מתחת לתמונות"; the move is in inc/product-addons.php, the grid placement in
   single-product.css). It keeps its own sheet for two reasons: the layout file
   is at the code ceiling the README sets, and nothing else on the site uses
   these class names. */

   WHAT IT HAS TO DO
   -----------------
   Look like a place where a spec grows rather than a form to fill in. The `+`
   button is dashed and quiet until hovered, the rows are as wide as the column,
   and the running total is separated by a dashed rule the way the AI disclaimer
   under the attribute list is separated: it is a different kind of statement
   (a total the visitor is assembling) and it must not read as one more row.

   Rows use logical properties, so the removal button stays on the far side in
   Hebrew, English and Russian alike. */

/* No top margin: the block's distance from what is above it is a property of
   where the grid puts it, and single-product.css owns that measurement
   (`.single-product div.product > .nx-addons`). The bottom stays zero while the
   block is the bottom-most of its row. */
.single-product .nx-addons {
	margin-block-end: 0;
	padding: clamp(1rem, 2.5vw, 1.5rem);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	background: var(--surface);
}

.single-product .nx-addons__title {
	margin-block: 0 0.35rem;
	color: var(--text-bright);
	font-size: clamp(1.05rem, 1.8vw, 1.25rem);
	font-weight: 800;
}

.single-product .nx-addons__note {
	margin-block: 0 0.75rem;
	color: var(--text-dim);
	font-size: 0.875rem;
}

/* The `<template>` and the hidden tick boxes carry the `hidden` attribute, and
   any `display` rule would silently win over it: state the intent once. */
.single-product .nx-addons [hidden] {
	display: none;
}

/* ---------- The rows --------------------------------------------------- */

.single-product .nx-addons__rows {
	display: grid;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.single-product .nx-addons__row {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.single-product .nx-addons__field {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	flex: 1 1 auto;
	min-inline-size: 0;
}

.single-product .nx-addons__field-text {
	flex: none;
	white-space: nowrap;
	color: var(--text-dim);
	font-size: 0.8125rem;
}

.single-product .nx-addons__select {
	flex: 1 1 auto;
	min-inline-size: 0;
	max-inline-size: 100%;
	padding: 0.5rem 0.6rem;
	border: 1px solid var(--border-light);
	border-radius: var(--radius-sm);
	background: var(--bg-elev);
	color: var(--text);
	font: inherit;
	font-size: 0.9375rem;
}

/* Written by the script once the row holds an add-on, so a visitor can see at a
   glance which rows are part of what he is about to send. */
.single-product .nx-addons__row--filled .nx-addons__select {
	border-color: var(--accent);
	color: var(--text-bright);
	font-weight: 700;
}

/* The chosen add-on's own price, beside the add-on itself: Valery, 2026-10-02,
   "רואים את המחיר של התוספת ליד התוספת עצמה".

   Sits between the dropdown and the removal button, at the row's inline end, so
   the numbers of a list of rows line up in one column and the eye can compare
   them. `min-inline-size` keeps that column from widening the row's box as the
   digits change — the field beside it is `flex: 1 1 auto` and would otherwise
   give up the difference — and tabular figures stop the digits from shifting
   inside the column as they change. The script unhides this and fills it; an
   empty row leaves it empty. */
.single-product .nx-addons__row-price {
	flex: none;
	min-inline-size: 4rem;
	white-space: nowrap;
	text-align: end;
	color: var(--text-bright);
	font-size: 0.9375rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.single-product .nx-addons__remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	inline-size: 2.25rem;
	block-size: 2.25rem;
	padding: 0;
	border: 1px solid var(--border-light);
	border-radius: var(--radius-sm);
	background: var(--surface-2);
	color: var(--text-dim);
	font-size: 1.1rem;
	line-height: 1;
	cursor: pointer;
	transition:
		color 0.15s var(--ease),
		border-color 0.15s var(--ease);
}

.single-product .nx-addons__remove:hover,
.single-product .nx-addons__remove:focus-visible {
	border-color: var(--danger);
	color: var(--danger);
}

/* ---------- The `+` button -------------------------------------------- */

.single-product .nx-addons__actions {
	margin-block: 0.75rem 0;
}

.single-product .nx-addons__add {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 0.9rem;
	border: 1px dashed var(--border-light);
	border-radius: var(--radius-sm);
	background: transparent;
	color: var(--accent-text);
	font: inherit;
	font-size: 0.9375rem;
	font-weight: 700;
	cursor: pointer;
	transition:
		background 0.15s var(--ease),
		border-color 0.15s var(--ease);
}

.single-product .nx-addons__add:hover,
.single-product .nx-addons__add:focus-visible {
	border-style: solid;
	border-color: var(--accent);
	background: var(--accent-subtle);
}

/* Decorative: the word next to it says what the control does. */
.single-product .nx-addons__sign {
	font-size: 1.1rem;
	line-height: 1;
}

/* ---------- The total of the built machine ----------------------------- */

/* The last line of the block and the only number in it the visitor assembled:
   the machine's own price plus every add-on he picked (config.basePrice plus the
   ticked rows, added up in assets/js/product-addons.js).

   It was the extras' sum until 2026-10-02, when Valery asked for the total of the
   built machine instead. The dashed rule above it stays, and matters more now
   than it did: it separates "what is in this list" from "what it costs".

   The script writes the text and unhides the line; with nothing picked the
   element stays hidden rather than holding a blank rule in place. The block's
   own padding is what keeps it off the border, so no bottom margin here. */
.single-product .nx-addons__summary {
	margin-block: 0.75rem 0;
	padding-block-start: 0.75rem;
	border-block-start: 1px dashed var(--border);
	color: var(--accent-text);
	font-size: 1rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

/* ---------- Selling mode: the same list, as links ---------------------- */

.single-product .nx-addons__list {
	display: grid;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.single-product .nx-addons__item {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	padding-block: 0.65rem;
	border-block-end: 1px solid var(--border);
}

.single-product .nx-addons__item:last-child {
	border-block-end: 0;
}

.single-product .nx-addons__link {
	color: var(--accent-text);
	text-decoration: none;
}

.single-product .nx-addons__link:hover {
	text-decoration: underline;
}

.single-product .nx-addons__price {
	white-space: nowrap;
	color: var(--text-bright);
	font-weight: 700;
}

@media (max-width: 600px) {
	/* The row's own label is the first thing to go when the column is narrow:
	   the dropdown still says which add-on is chosen, and the `+` button still
	   says what it adds. */
	.single-product .nx-addons__field-text {
		display: none;
	}

	.single-product .nx-addons__item {
		flex-wrap: wrap;
		gap: 0.25rem 0.75rem;
	}
}