/* ============================================================
   NewXmod — Single Product Page (below the fold)

   The tab bar, both tab panels, the selling points and the free prose above
   and below the component list, the component list itself, and the two card
   rails (up-sells, related). Split from single-product.css to stay inside the
   per-file budget; load order is single-product.css -> this file, so the
   tokens and the grid are already in place when these rules land. See
   single-product.css for why the page needed its own stylesheet at all.
   ============================================================ */

/* ---------- Tab bar ---------------------------------------------------
   WooCommerce ships this as a plain <ul>, so on a page with no WC CSS it
   renders as a bulleted list with the browser's 40px indent. */
.single-product .woocommerce-tabs ul.tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.single-product .woocommerce-tabs ul.tabs li {
	margin: 0;
	padding: 0;
}

.single-product .woocommerce-tabs ul.tabs li a {
	display: block;
	padding: 0.6rem 1.2rem;
	border: 1px solid var(--border);
	border-radius: 999px;
	background: var(--surface);
	color: var(--text-dim);
	font-size: 0.95rem;
	font-weight: 600;
	text-decoration: none;
	transition: background 0.2s var(--ease), border-color 0.2s var(--ease), color 0.2s var(--ease);
}

.single-product .woocommerce-tabs ul.tabs li a:hover,
.single-product .woocommerce-tabs ul.tabs li a:focus-visible {
	border-color: var(--accent);
	color: var(--accent-text);
}

.single-product .woocommerce-tabs ul.tabs li.active a,
.single-product .woocommerce-tabs ul.tabs li a[aria-selected="true"] {
	border-color: var(--accent);
	background: var(--accent);
	color: var(--on-accent);
	box-shadow: 0 4px 14px var(--accent-glow);
}

/* ---------- Tab panels ------------------------------------------------
   NOTE — there is deliberately NO `display` rule here. WooCommerce hides
   the closed panels with an inline style and leaves the open one visible
   simply by not hiding it: it carries no `active` class to bring it back.
   The WooCommerce stylesheet we drop does `.panel { display: none }` plus
   a `.panel.active` rule, and copying that pair would hide every panel on
   the page. So the panels are styled, never hidden, from this file. */
.single-product .woocommerce-tabs .panel {
	margin-block-start: 1.5rem;
	padding: clamp(1.25rem, 3vw, 2rem);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	background: var(--surface);
	color: var(--text);
	line-height: 1.8;
}

.single-product .woocommerce-tabs .panel > :first-child {
	margin-block-start: 0;
}

.single-product .woocommerce-tabs .panel > :last-child {
	margin-block-end: 0;
}

.single-product .woocommerce-tabs .panel h2 {
	margin-block: 0 1rem;
	color: var(--text-bright);
	font-size: clamp(1.1rem, 2vw, 1.4rem);
	font-weight: 800;
}

.single-product .woocommerce-tabs .panel img {
	max-width: 100%;
	height: auto;
	border-radius: var(--radius-sm);
}

/* ---------- The specification, as a card beside the picture -----------
   A CARD, NOT A TAB, SINCE 2026-10-02. The specification was the first tab of
   the bar and the tab the page opened on; every rule in the two sections below
   was keyed to `#tab-spec`, and the panel card did the framing. Valery moved
   it out of the bar — "תעביר לצד שמאל של התמונה מחוץ לתמונה אבל שהם ישבו באותו
   הגובה … תיאור ומידע נוסף שיישאר מתחת" — so the markup is printed into the
   buy box's column by newxmod_product_spec_card() and this is what frames it.
   In RTL that column is the one on the left of the gallery, which is the side
   he asked for; the grid that puts it there is in single-product.css.

   The two sections below are the same rules they always were, re-scoped from
   `#tab-spec` to `.nx-spec-card__body` — the wrapper woocommerce/
   single-product/spec-card.php prints around the content. Scoping to the BODY
   rather than to the card is what keeps the card's own heading out of reach of
   the `> p` rows and of the two first-child collapses.

   THE CARD IS NOT STICKY, for the reason the buy box is not sticky: the tab bar
   below is a sibling of the whole row and paints over anything that floats out
   of it. See the note in single-product.css.

   The padding is smaller than a panel's, and that is not a mistake. A panel
   runs the full 1200px and can afford 2rem of inset on each side; this card
   lives in the 489px column the buy box uses, where a panel's inset would eat
   an eighth of a row's width. The gap above it is the summary's own 1rem flex
   gap, so nothing is declared here. */
.single-product .nx-spec-card {
	padding: clamp(1rem, 1.8vw, 1.5rem);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	background: var(--surface);
	color: var(--text);
	line-height: 1.8;
}

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

.single-product .nx-spec-card__body > :first-child {
	margin-block-start: 0;
}

.single-product .nx-spec-card__body > :last-child {
	margin-block-end: 0;
}

/* ---------- The component list ---------------------------------------
   The specification is not prose. It is eight paragraphs of
   `<value><strong>Hebrew label</strong>` — the parts of the build, each
   saved with `direction: ltr` so the English part name reads left to
   right. As plain paragraphs it is eight bold sentences in a column; as
   rows it is the spec sheet a buyer actually scans.

   THESE SELECTORS ARE SCOPED TO THE CARD'S BODY AND NOT TO #tab-description,
   and the difference is the whole point of the split that created them: the
   rows come from `the_content()` and that now prints into the card. Pointing
   them at the description tab would style nothing at all and leave eight
   unstyled paragraphs in a card.

   The saved LTR direction is left alone on purpose: in an RTL page it
   puts the Hebrew label at the reading start and the part after it, which
   is the order the two are read in.

   The selectors are child combinators, and that is load-bearing rather than
   tidiness. `the_content()` prints the part list straight into the body, so
   those <p> are direct children — but the selling points and the free prose
   live in the description tab and are paragraphs nested inside .nx-pitch and
   .nx-prose, and an earlier plain `#tab-description p` reached them too. It
   turned the marketing lead line into a spec row with a divider under it and
   pushed its text apart with `justify-content: space-between`. The compound
   part `> p strong` is still needed for the same reason a second time over:
   the bill of materials table brings its own <strong>, and a pill inside a
   table cell would break the columns. */
.single-product .nx-spec-card__body > p {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.35rem 1rem;
	margin: 0;
	padding-block: 0.7rem;
	border-block-end: 1px solid var(--border);
}

.single-product .nx-spec-card__body > p:last-child {
	border-block-end: 0;
}

.single-product .nx-spec-card__body > p strong {
	flex: 0 0 auto;
	padding: 0.15rem 0.7rem;
	border-radius: 999px;
	background: var(--accent-subtle);
	color: var(--accent-text);
	font-size: 0.85rem;
	font-weight: 700;
	white-space: nowrap;
}

/* On a narrow screen there is no room for two columns, and a pill stranded
   on the far edge of a wrapped row reads as a mistake. */
@media (max-width: 640px) {
	.single-product .nx-spec-card__body > p {
		display: block;
	}

	.single-product .nx-spec-card__body > p strong {
		display: block;
		width: fit-content;
		margin-block-start: 0.4rem;
	}
}

/* ---------- Selling points -------------------------------------------
   The shop's own copy, written before this theme existed. Two or three short
   lines per machine, saved in the second_summary meta the old site's ACF
   field group wrote and read by nothing since. Before this block the nine
   gaming PCs rendered as a bare part list; see inc/product-overview.php for
   how they surfaced.

   A tinted card with an accent rail, because it is a claim about the build
   rather than part of the specification — and it has to read as a claim at a
   glance from across the page. */
.single-product #tab-description .nx-pitch {
	margin-block: 0 1.5rem;
	padding: clamp(1rem, 2.5vw, 1.5rem);
	border: 1px solid var(--border);
	border-inline-start: 3px solid var(--accent);
	border-radius: var(--radius);
	background: var(--surface-2);
}

.single-product #tab-description .nx-pitch__lead {
	display: block;
	margin: 0;
	padding: 0;
	border: 0;
	color: var(--text-bright);
	font-size: clamp(1.05rem, 1.8vw, 1.3rem);
	font-weight: 700;
	line-height: 1.5;
}

.single-product #tab-description .nx-pitch__list {
	display: grid;
	gap: 0.45rem;
	margin: 0.9rem 0 0;
	padding: 0;
	list-style: none;
}

.single-product #tab-description .nx-pitch__list li {
	position: relative;
	padding-inline-start: 1.5rem;
	color: var(--text-dim);
	line-height: 1.7;
}

/* A tick, drawn rather than typed: a literal ✓ depends on the font stack and
   on this box the Hebrew families do not all carry it. */
.single-product #tab-description .nx-pitch__list li::before {
	content: "";
	position: absolute;
	inset-inline-start: 0.25rem;
	inset-block-start: 0.7em;
	width: 0.5rem;
	height: 0.25rem;
	border-inline-start: 2px solid var(--ok);
	border-block-end: 2px solid var(--ok);
	transform: rotate(-45deg);
}

/* ---------- Free prose -----------------------------------------------
   The part the owner writes himself. It shares the description tab with the
   selling points and NOT with the part list any more, so the rule that used
   to separate it from the specification above it is gone: with the rows moved
   into their own tab, that border drew a divider through the middle of the
   copy card for no reason. The gap is just a gap. */
.single-product #tab-description .nx-prose {
	margin-block-start: 1.5rem;
	color: var(--text-dim);
	line-height: 1.8;
}

.single-product #tab-description .nx-prose > p {
	margin-block: 0 1rem;
}

.single-product #tab-description .nx-prose > p:last-child {
	margin-block-end: 0;
}

/* ---------- The bill of materials -------------------------------------
   Written by the add-a-product screen, printed in the specification card under
   the part rows. It used to sit between the description and the free prose and
   it sits under the rows now, inside the same card, so the separation it needed
   is still needed — a hand-assembled machine has an empty body and no rows
   above it, and a gaming PC with a BOM has both. Scoped to the card and not to
   the body wrapper, because the table is the body's sibling rather than its
   child. */
.single-product .nx-spec-card .nx-spec {
	margin-block-start: 1.75rem;
}

/* The first-child collapse, one level down from the body wrapper's: on a
   machine with no rows at all the bill of materials IS the card's first
   content, and 1.75rem of air under the card's own heading is a gap that
   should not be there. */
.single-product .nx-spec-card__body > .nx-spec:first-child {
	margin-block-start: 0;
}

/* THE TABLE'S OWN HEADING IS HIDDEN, WHICH REVERSES AN EARLIER CALL. It used to
   be kept on purpose, with the argument that the table is the detail of the
   build while the rows above it are the headline, so the two readings needed
   the heading between them. There is no "between them" any more: the card is
   one box with one heading — מפרט, in spec-card.php — and a second one sitting
   directly under it saying המפרט is the same word twice in 489px. Hidden here
   rather than removed from the markup, because newxmod_build_spec_table()
   emits it and a child theme or a full-width use of that table may want it
   back; the card's heading is the region's accessible name either way, and it
   is announced once, which is the other reason not to leave a duplicate in the
   accessibility tree. */
.single-product .nx-spec-card .nx-spec__title {
	display: none;
}

/* THE ONE LINE UNDER THE COMPONENT LIST, not a warning box above it. Until
   2026-10-21 this slot carried `.nx-spec__note` — a red-bordered sentence naming
   the missing parts and calling the machine unavailable — and every row carried
   a `.nx-spec__state` cell saying במלאי or אזל מהמלאי. Valery asked for both to go:
   a customer reading "אזל מהמלאי" beside one line of a specification concludes
   the COMPUTER is out of stock and does not call, which costs the sale the
   warning was meant to protect. The rule itself is untouched — a machine with a
   short component is still taken off sale by build.php — only its caption is.

   Small and quiet on purpose: it is a footnote to the table, not a message, and
   it must not compete with the parts above it. */
.single-product .nx-spec-card .nx-spec__disclaimer {
	margin-block: 0.875rem 0;
	font-size: 0.8125rem;
	line-height: 1.55;
	color: var(--text-dim);
}

.single-product .nx-spec-card .nx-spec__table {
	inline-size: 100%;
	border-collapse: collapse;
	font-size: 0.9375rem;
}

.single-product .nx-spec-card .nx-spec__table td {
	padding-block: 0.625rem;
	padding-inline: 0;
	border-block-end: 1px solid var(--border);
	vertical-align: baseline;
}

.single-product .nx-spec-card .nx-spec__part {
	color: var(--text);
}

.single-product .nx-spec-card .nx-spec__table tr:last-child td {
	border-block-end: 0;
}

/* ---------- Manufacturer links ----------------------------------------
   The AI-found link list, printed after the attributes table in the
   additional-information tab by inc/product-links.php. It is scoped to the
   tab rather than left loose, so a block that one day appears elsewhere does
   not inherit the panel's list styling by accident. */
.single-product #tab-additional_information .nx-links {
	margin-block-start: 1.75rem;
	padding-block-start: 1.5rem;
	border-block-start: 1px solid var(--border);
}

.single-product #tab-additional_information .nx-links__title {
	margin-block: 0 0.75rem;
	font-size: 1.125rem;
	color: var(--text-bright);
}

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

/* The row is the part name and nothing else: inc/product-links.php prints one
   anchor per part and no separate URL, because the whole point of the link is
   that the customer reads "Galax GeForce RTX 4070 Ti Super" and follows it.
   The arrow is a glyph rather than a background image so it follows the inline
   direction inside an RTL list, and the accent colour is what carries the
   "this leaves the site" signal now that the URL is not on screen. */
.single-product #tab-additional_information .nx-links__list li {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.35rem 0.5rem;
	padding-block: 0.6rem;
	padding-inline: 0;
	border-block-end: 1px solid var(--border);
}

.single-product #tab-additional_information .nx-links__list li:last-child {
	border-block-end: 0;
}

.single-product #tab-additional_information .nx-links__list a {
	color: var(--accent-text);
	font-size: 0.9rem;
	word-break: break-word;
}

.single-product #tab-additional_information .nx-links__list a::after {
	content: " ↗";
	font-size: 0.8rem;
}

.single-product #tab-additional_information .nx-links__note {
	margin-block: 1rem 0;
	color: var(--text-dim);
	font-size: 0.8125rem;
}

/* The AI disclaimer, and it is the only line in this block that is not a
   reference the customer can go and check. Set apart from the note above by a
   rule rather than by weight: it has to be read, and it must not look like a
   warning about a fault in the product. */
.single-product #tab-additional_information .nx-links__disclaimer {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	margin-block: 1.25rem 0;
	padding-block-start: 1rem;
	border-block-start: 1px dashed var(--border);
	color: var(--text-dim);
	font-size: 0.8125rem;
	line-height: 1.6;
}

.single-product #tab-additional_information .nx-links__disclaimer::before {
	content: "ⓘ";
	flex: none;
	font-size: 0.95rem;
	opacity: 0.75;
}

/* ---------- Additional information ------------------------------------
   The attributes table: technical spec, so it gets the grid treatment the
   list above does not need. */
.single-product .woocommerce-product-attributes.shop_attributes {
	width: 100%;
	margin: 0;
	border-collapse: collapse;
}

.single-product .shop_attributes th,
.single-product .shop_attributes td {
	padding: 0.75rem 1rem;
	border: 0;
	border-block-end: 1px solid var(--border);
	text-align: start;
	vertical-align: middle;
}

.single-product .shop_attributes tr:last-child th,
.single-product .shop_attributes tr:last-child td {
	border-block-end: 0;
}

.single-product .shop_attributes th {
	width: 12rem;
	background: var(--surface-2);
	color: var(--text-dim);
	font-size: 0.9rem;
	font-weight: 600;
}

.single-product .shop_attributes td p {
	margin: 0;
}

/* ---------- Card rails ------------------------------------------------
   Both rails reuse the archive's .product-card, already styled in
   main.css — only the section heading and the gap above them are ours.

   The `display: block` below is not a no-op. WooCommerce gives these
   wrappers the `products` class as well as `up-sells` / `related`, so
   main.css's archive rule
       `.woocommerce .products { display: grid; grid-template-columns:
        repeat(auto-fill, minmax(250px, 1fr)) }`
   matches the WRAPPER and not only the <ul> inside it. That turned each
   wrapper into a four-column grid: the <h2> took the first cell, the whole
   product list took the second, and the list was squeezed into a single
   285px column. Up-sells showed one card floating in the middle of the row
   and the four related products stacked vertically in a 1934px-tall
   column. The wrapper is a section, not a product grid — the grid belongs
   to the <ul> inside it, which then gets the full 1200px and lays the cards
   out in a row exactly like the shop archive. */
.single-product .up-sells.products,
.single-product .related.products {
	display: block;
}

.single-product .up-sells > h2,
.single-product .related > h2 {
	margin: 0 0 1.25rem;
	color: var(--text-bright);
	font-size: clamp(1.25rem, 2.5vw, 1.75rem);
	font-weight: 800;
}