/* ============================================================
   NewXmod — Single Product Page (layout: gallery + buy box)

   WHY THIS FILE EXISTS
   inc/enqueue.php's newxmod_wc_styles_allowlist() returns an empty array:
   the theme drops every WooCommerce stylesheet on purpose and replaces it
   with its own. The archive, cart, checkout and account all got their
   replacement. The single product page never did — so WooCommerce's markup
   rendered against the browser defaults, which is a full-width column of
   undifferentiated blocks: gallery, then title, then price, then the short
   description's images at their full upload size, each one pushing the buy
   button further down. This file is that missing replacement.

   Everything is scoped to `.single-product`, a body class WooCommerce adds
   itself, so nothing here can reach another template.

   Read with: single-product-details.css (tab bar, spec rows, attributes).
   ============================================================ */

/* ---------- Breadcrumb ----------------------------------------------
   WooCommerce prints the breadcrumb inside <main class="site-main"> but
   OUTSIDE .page__inner, so it has no measure of its own and would run to
   the full width of the viewport. Repeating the wrapper's measure here is
   what keeps it aligned with the product grid underneath. */
.single-product .woocommerce-breadcrumb {
	max-width: var(--max-w);
	margin-inline: auto;
	padding: 1.25rem 1.25rem 0;
	color: var(--text-dim);
	font-size: 0.875rem;
	line-height: 1.6;
}

.single-product .woocommerce-breadcrumb a {
	color: var(--text-dim);
	text-decoration: none;
}

.single-product .woocommerce-breadcrumb a:hover,
.single-product .woocommerce-breadcrumb a:focus-visible {
	color: var(--accent-text);
	text-decoration: underline;
}

/* ---------- Product shell --------------------------------------------
   Two columns from 992px up: gallery first, buy box beside it, title over
   both, and the tabs, the extras and the two card rails spanning both. In
   RTL the first column is the right-hand one, which is where a Hebrew
   reader starts, so the gallery lands where the eye lands.

   THE SECOND COLUMN CARRIES THE SPECIFICATION SINCE 2026-10-02. Valery moved
   the specification out of the tab bar and asked for it beside the picture at
   the picture's height — "תעביר לצד שמאל של התמונה מחוץ לתמונה אבל שהם ישבו באותו
   הגובה" — and in RTL the column on the left of the gallery IS this one. The
   buy box alone was 93px high against a 542px gallery (measured 2026-10-02), so
   the card went in under the two things the box does hold rather than getting a
   third column: that keeps the picture at full width, keeps the delivery
   promise and the meta rows next to the price where they belong, and means the
   proportions below did not have to be re-tuned for every breakpoint. The card
   is printed into `.summary` by newxmod_product_spec_card(); its own rules are
   in single-product-details.css.

   The gap is split. Down the two columns it has to be generous — that is the
   gutter the eye reads the picture and the form against. ACROSS the rows it
   has to be tight, because what the rows separate is the title from the
   pictures, the pictures from the tab bar, the tab bar from the extras and the
   extras from the enquiry form, and every one of those pairs already carries
   its own margin below. One value for both directions put the old
   clamp(1.5rem, 3.5vw, 3.25rem) between the title and the gallery, which read
   as a stray gap rather than as spacing. */
.single-product div.product {
	display: grid;
	grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
	align-items: start;
	column-gap: clamp(1.5rem, 3.5vw, 3.25rem);
	row-gap: clamp(1rem, 2vw, 1.75rem);
}

/* The product's name, over both columns and on the image side.
   inc/product-layout.php moves it out of the summary and onto
   `woocommerce_before_single_product_summary`, so it is the grid's first
   child. Until 2026-09-29 the rule below read `.summary .product_title`,
   because the heading was the buy box's first line; see that file for why
   Valery moved it ("הכותרת של המוצר צריכה לעבור למעל התמונות מצד ימין"). */
.single-product div.product > .product_title {
	grid-column: 1 / -1;
	margin: 0;
	color: var(--text-bright);
	font-size: clamp(1.5rem, 3vw, 2.1rem);
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -0.01em;
}

/* A MACHINE'S price, on the line under the name and above the pictures.
   inc/product-layout.php prints it at priority 6 on the title's own hook, having
   unhooked WooCommerce's own price from the buy box — so this rule and the
   `.summary .price` block further down never apply to the same product.

   Valery, 2026-10-02: "במחשבים מוכנים ברגע שאתה נכנס לדף מוצר יש מחיר למעלה מתחת
   לשם בקטן". Small is the whole instruction, and it is the right one here: the
   number is a fact about the machine, not the page's headline, and the price
   that has to feel important is the total of the build down in the extras.

   It takes a full row like the title, so it sits on the image side in RTL as
   well, directly under the name rather than beside it. The sum is the accent
   colour on every theme, so it is legible on the light palettes as well as the
   dark one, and it is the only other place a price of this product appears. */
.single-product div.product > .product-price {
	grid-column: 1 / -1;
	margin: 0;
	color: var(--accent-text);
	font-size: clamp(1rem, 1.4vw, 1.15rem);
	font-weight: 700;
	line-height: 1.3;
	font-variant-numeric: tabular-nums;
}

/* A discount, at the size this line actually is. WooCommerce prints the struck
   original and the new price inside its own `<del>`/`<ins>`; the theme's other
   price rules are sized for the buy box's much larger number, so these are
   written here rather than inherited. */
.single-product div.product > .product-price del {
	margin-inline-end: 0.45em;
	color: var(--text-dim);
	font-size: 0.85em;
	font-weight: 500;
}

.single-product div.product > .product-price ins {
	background: none;
	text-decoration: none;
}

/* Tabs, up-sells and related products are grid children only because
   WooCommerce prints them in this container. They are page-level blocks,
   not columns, so they always take the full width.

   THE LEAD-IN IS TWO VALUES AND WHICH BLOCK GETS WHICH CHANGED ON 2026-09-30.
   The tab bar now opens the page's lower half — Valery moved it to sit directly
   under the image/summary row — so it takes the SMALL gap: it belongs to the row
   above it, and the grid's row-gap is already air between the two. The two card
   rails keep the large one, because each of them opens a genuinely different
   band rather than continuing the product's own block. */
.single-product div.product > .woocommerce-tabs {
	grid-column: 1 / -1;
	margin-block-start: clamp(1rem, 2.5vw, 1.75rem);
}

.single-product div.product > .up-sells,
.single-product div.product > .related {
	grid-column: 1 / -1;
	margin-block-start: clamp(2rem, 4vw, 3.25rem);
}

/* The extras came down with the tab bar on 2026-09-30: they are printed at
   priority 12 on `woocommerce_after_single_product_summary`
   (inc/product-addons.php), so they are now BELOW the tab bar rather than above
   it — Valery: "תוספות תוזיז זה צריך להיות ככה מתחת והליד תוריד למתחת לתוספות".
   They take the larger lead-in, because what follows them is the enquiry form
   and the two have to read as two separate statements rather than one list. */
.single-product div.product > .nx-addons {
	grid-column: 1 / -1;
	margin-block-start: clamp(2rem, 4vw, 3.25rem);
}

/* A product with no images has nothing to put in the first column. Without
   this the buy box would sit in an empty second column with the whole
   right half of the page blank. Asked of the gallery rather than read off the
   markup's shape: the rule here used to be `.summary:first-child`, which was
   only true because the summary WAS the grid's first child, and since
   2026-09-29 the title is. `:has()` is already a dependency of this theme
   (checkout.css, whatsapp.css) and it states the condition being tested — no
   gallery — instead of a side effect of it. */
.single-product div.product:not(:has(.woocommerce-product-gallery)) > .summary {
	grid-column: 1 / -1;
	max-width: 46rem;
}

/* ---------- Gallery --------------------------------------------------- */
.single-product .woocommerce-product-gallery {
	position: relative;
	grid-column: 1;
	padding: clamp(0.75rem, 2vw, 1.25rem);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	background: var(--surface);
}

.single-product .woocommerce-product-gallery .woocommerce-product-gallery__wrapper {
	margin: 0;
}

.single-product .woocommerce-product-gallery .flex-viewport {
	border-radius: var(--radius-sm);
	background: var(--surface-2);
	overflow: hidden;
	/* flexslider writes the slide height onto this element as an inline style,
	   and the equal-height block below lets the viewport be stretched taller
	   than the slides. That pairing is a feedback loop rather than a
	   measurement: on the next resize flexslider reads back the stretched
	   height, writes it in as the new inline height, and the viewport is then
	   pinned at it — it can never shrink again, so a product whose
	   specification got shorter keeps a gallery that does not, and a window
	   narrowed below 992px keeps a tall 879px matte around a 412px picture
	   after the columns stack. Declining the inline height breaks the loop at
	   the one place it can be broken. It is not a fight with flexslider's
	   number: with no height declared the content already resolves to the
	   same 3:2 the number was, so nothing moves on load, and the stretch is
	   carried by `flex-grow` below instead of by that number. */
	height: auto !important;
}

.single-product .woocommerce-product-gallery__image > a {
	display: block;
}

/* Fixed 3:2 frame, image contained inside it. Not a free height: a tower
   shot is roughly 2:1 and a component shot is square, so letting each one
   size itself makes the buy box jump up and down as you move between
   products. The --surface-2 matte behind the letterboxing is what makes
   the empty margin read as deliberate rather than broken. */
.single-product .woocommerce-product-gallery .flex-viewport img {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: contain;
}

/* THE CARD GROWS TO THE COLUMN BESIDE IT, SO NEITHER ONE ENDS SHORT.
   Valery, 2026-10-04, with the pictures and the specification side by side:
   "בעל החנות לא אוהב שזה [התמונות] יותר קצר מזה [המפרט] … הוא רוצה שהם יהיו שווים
   באורך שלהם … ואם המפרט פתאום ממש ארוך אז צריך להגדיל את הקוביה של התמונות
   שתהיה שווה לאורך."

   The two boxes are the same row of the shell grid, and a grid row is as tall as
   its taller child — but a grid item is only as tall as its own content unless
   it is told to stretch, and `align-items: start` in this file is deliberate (it
   is what keeps a full-width row from being dragged around by a neighbour). So
   the gallery is told, on its own, to take the whole row: it follows the
   specification down however long the bill of materials gets, and the two
   bottom edges always land level.

   A FLEX COLUMN, WHICH IS THE WHOLE TRICK. The card has to grow but the
   thumbnail rail must not: the rail belongs at the bottom edge, and it is the
   picture that should take the space freed between them. Making the card a flex
   column and giving the viewport `flex: 1 1 auto` does exactly that — the
   viewport grows, the `ol` stays put, and `min-height: 0` lets the shrunken case
   shrink instead of overflowing.

   THE VIEWPORT'S OWN HEIGHT IS DECLINED, UP AT THE RULE ABOVE, and this is the
   one place the two changes have to be read together: an inline height is the
   flex BASIS, and flexslider rewrites that inline height from whatever the
   slides currently measure — which, once they are stretched, is this stretch
   reading itself back. The `height: auto !important` there is what keeps the
   basis at the picture's natural 3:2 and lets `flex-grow` below be the only
   thing that adds height.

   THE IMAGE IS THEN STRETCHED THROUGH FOUR LEVELS, AND IT HAS TO BE ALL FOUR.
   `.flex-viewport` > `.woocommerce-product-gallery__wrapper` > the slide > the
   `<a>` > the `<img>`. Every link in that chain is `height: auto` in
   WooCommerce's markup, so a percentage on the image alone would resolve against
   an auto height and collapse to the image's natural size. The chain resolves
   because the viewport's height was just made definite by the flex layout, and
   the wrapper is what has to resolve first. `object-fit: contain` is what keeps
   the picture undistorted once the frame is no longer its shape — the frame gets
   taller, the product does not get stretched. The 3:2 rule above is left alone
   and is not in conflict with this: when both width and height are definite
   `aspect-ratio` is ignored, and below 992px — this block's own guard — the
   height is not definite and 3:2 is still what sizes the picture.

   NO MATCHING RULE ON THE SPECIFICATION CARD, and that is a decision rather than
   an omission. It was built the other way round first: stretching the card keeps
   its bottom edge level with the pictures too, but a short bill of materials
   stretched into a 540px column paints one card of rows and one card of nothing,
   which reads worse than an honest short card. The gallery is the side that can
   absorb a mismatch without anyone noticing, because what it has to put in the
   space is a larger picture. The one thing this deliberately cannot do is make
   the pair equal when the PICTURES are the taller side — the card would have to
   push the image below its own natural frame to fix that, and a smaller picture
   is not worth an even edge. */
@media (min-width: 992px) {
	.single-product div.product > .woocommerce-product-gallery {
		align-self: stretch;
		display: flex;
		flex-direction: column;
	}

	.single-product .woocommerce-product-gallery .flex-viewport {
		flex: 1 1 auto;
		min-height: 0;
	}

	.single-product .woocommerce-product-gallery__wrapper,
	.single-product .woocommerce-product-gallery__image,
	.single-product .woocommerce-product-gallery__image > a {
		height: 100%;
	}

	.single-product .woocommerce-product-gallery .flex-viewport img {
		height: 100%;
	}
}

/* The zoom control. WooCommerce leaves it in normal flow, so it lands on
   top of the first slide as a stray glyph. */
.single-product .woocommerce-product-gallery__trigger {
	position: absolute;
	inset-block-start: clamp(1.25rem, 2.6vw, 1.75rem);
	inset-inline-end: clamp(1.25rem, 2.6vw, 1.75rem);
	z-index: 3;
	display: grid;
	place-items: center;
	width: 2.6rem;
	height: 2.6rem;
	border: 1px solid var(--border);
	border-radius: 999px;
	background: color-mix(in srgb, var(--surface) 88%, transparent);
	backdrop-filter: blur(6px);
	font-size: 0.95rem;
	line-height: 1;
	text-decoration: none;
	transition: border-color 0.2s var(--ease), transform 0.2s var(--ease);
}

.single-product .woocommerce-product-gallery__trigger:hover,
.single-product .woocommerce-product-gallery__trigger:focus-visible {
	border-color: var(--accent);
	transform: scale(1.05);
}

/* The thumbnail rail is an <ol>, so it renders as "1." and "2." each on
   its own full-width line. */
.single-product .flex-control-nav.flex-control-thumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.625rem;
	margin: 1rem 0 0;
	padding: 0;
	list-style: none;
}

.single-product .flex-control-nav.flex-control-thumbs li {
	width: 4.5rem;
	margin: 0;
	padding: 0;
}

/* Border for the selected state, outline for the idle one: the 2px border
   would otherwise resize the thumbnail every time it is picked. */
.single-product .flex-control-nav.flex-control-thumbs img {
	display: block;
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	border: 2px solid transparent;
	border-radius: var(--radius-sm);
	outline: 1px solid var(--border);
	opacity: 0.65;
	cursor: pointer;
	transition: opacity 0.2s var(--ease), border-color 0.2s var(--ease);
}

.single-product .flex-control-nav.flex-control-thumbs img:hover,
.single-product .flex-control-nav.flex-control-thumbs img.flex-active {
	opacity: 1;
}

.single-product .flex-control-nav.flex-control-thumbs img.flex-active {
	border-color: var(--accent-ring);
	outline-color: var(--accent-ring);
}

/* ---------- Buy box ---------------------------------------------------
   The title used to be the first line of this box; it is above the images
   since 2026-09-29. The enquiry form used to open the box; it is a page-level
   band under the extras since 2026-09-30 (inc/shop-mode.php), on Valery's
   instruction that the lead follows the add-ons. The price left it too, but
   only for a machine: it is printed under the product's name since 2026-10-02
   (`.product-price` above). What is left inside the box is the brand strip and
   the meta rows — the product's own facts — plus the price of anything that is
   not a machine, plus the specification card, which is printed in here at
   priority 15 rather than into a column of its own (see the shell comment). */
.single-product div.product > .summary {
	grid-column: 2;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

/* NO position: sticky on the buy box.
   It is the obvious thing to want here — a tall gallery beside a short buy
   box — and it was tried. It cannot be bounded in this markup. WooCommerce
   prints the tabs as a SIBLING of .summary inside the same grid container,
   so the sticky containing block is the whole product container rather than
   the summary's grid row: the buy box stayed pinned from the top of the
   page all the way down to the bottom of the related-products rail, and
   from roughly 400px of scroll onward it sat underneath .woocommerce-tabs,
   whose panel is opaque and paints later in the DOM. The tab bar owns the
   full width, so the buy box disappeared behind it.
   Fixing it properly needs a wrapper element around just the two columns,
   which means a template override; the buy box scrolling with the page is
   the normal WooCommerce behaviour and costs nothing worth that.

   RE-CHECKED AFTER THE TAB BAR MOVED (2026-09-30) and the note still holds.
   What changed is WHERE the tab bar sits, not the fact that it is a sibling of
   .summary in the same grid: it is now printed at priority 10 on
   `woocommerce_after_single_product_summary` and therefore still paints after
   the summary, and it still spans the full width. The bad scroll window simply
   opens one block earlier, because the extras were pushed below the tab bar
   with it (priority 12). A sticky buy box would be hidden by the panel either
   way, so it stays off. */

/* AN EMPTY PRICE HOLDS A GAP OPEN, SO IT IS TAKEN OUT OF THE COLUMN.
   `.summary` is a flex column with a 1rem gap, and WooCommerce's price template
   prints its wrapper whether or not there is anything to put in it — so a
   product whose price the switch hides (inc/price-visibility.php) leaves an
   empty `<p class="price">` behind, and that element is a flex child: it costs a
   full gap slot, one 1rem of dead space between the brand strip and the meta
   rows. It paints nothing and it is not a leak, which is why it survived the
   release that hid the prices; what it is, is the same thing
   inc/product-layout.php removes the machine's price hook to avoid.
   display: none rather than height: 0 because a flex child that is display:none
   stops taking part in the layout altogether and its gap goes with it. The
   variation wrapper is here for the same reason: WooCommerce's variation script
   fills it from `get_price_html()`, which returns nothing while prices are
   hidden, so on a variable product it is empty on arrival too. */
.single-product div.product > .summary .price:empty,
.single-product div.product > .summary .woocommerce-variation-price:empty {
	display: none;
}

/* THE BUY BOX'S PRICE, WHICH IS NOW THE PART'S AND THE SOFTWARE'S ONLY.
   A machine's price is printed under its name instead (see `.product-price`
   above and inc/product-layout.php), because Valery asked for it there on
   2026-10-02. This block is not dead: every product that is not a machine still
   has WooCommerce's own price in the buy box, exactly where it has always been,
   and it still needs to be the largest number on its page. */
.single-product .summary .price {
	margin: 0;
	color: var(--accent-text);
	font-size: clamp(1.5rem, 2.6vw, 1.95rem);
	font-weight: 800;
	line-height: 1.2;
}

.single-product .summary .price del {
	margin-inline-end: 0.4em;
	color: var(--text-dim);
	font-size: 0.72em;
	font-weight: 500;
}

.single-product .summary .price ins {
	background: none;
	text-decoration: none;
}

/* ---------- Short description ----------------------------------------
   A brand strip in practice: three or four vendor marks dropped into the
   editor at upload size. Left alone they stack as full-width images and
   push the buy button below the fold, so each one is capped and laid out
   as a row of badges. The text still wraps normally around them. */
.single-product .woocommerce-product-details__short-description {
	color: var(--text-dim);
	line-height: 1.8;
}

.single-product .woocommerce-product-details__short-description p {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 0.9rem;
	margin: 0 0 0.9rem;
}

.single-product .woocommerce-product-details__short-description p:last-child {
	margin-block-end: 0;
}

/* Both caps matter. The vendor marks are wildly different shapes - a 3:1
   wordmark next to a near-square chip - so a height cap alone still lets the
   wordmark run to 245px and push the third badge onto a second line. Capping
   the width as well keeps every badge inside ~55px tall and the whole strip
   on one row at the 489px the buy box gives them. */
.single-product .woocommerce-product-details__short-description img {
	width: auto;
	height: auto;
	max-width: min(100%, 10rem);
	max-height: 3.5rem;
	object-fit: contain;
	margin: 0;
	border-radius: var(--radius-sm);
}

/* ---------- Buy form -------------------------------------------------- */
.single-product .summary form.cart {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 0.75rem;
	margin: 0;
	padding-block-start: 1.25rem;
	border-block-start: 1px solid var(--border);
}

.single-product .summary form.cart .quantity {
	display: flex;
	align-items: center;
	overflow: hidden;
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	background: var(--surface);
}

.single-product .summary form.cart .quantity .qty {
	width: 4.25rem;
	min-height: 3.1rem;
	padding: 0 0.5rem;
	border: 0;
	background: transparent;
	color: var(--text);
	font-family: var(--font-mono);
	font-size: 1rem;
	font-weight: 600;
	text-align: center;
	appearance: textfield;
}

/* The spinners belong to the browser, not to the design, and no two
   engines draw them the same way. */
.single-product .summary form.cart .quantity .qty::-webkit-outer-spin-button,
.single-product .summary form.cart .quantity .qty::-webkit-inner-spin-button {
	margin: 0;
	-webkit-appearance: none;
}

.single-product .summary .single_add_to_cart_button {
	flex: 1 1 12rem;
	min-height: 3.1rem;
	padding: 0.75rem 1.75rem;
	border: 1px solid transparent;
	border-radius: var(--radius-sm);
	background: var(--accent);
	color: var(--on-accent);
	font-family: var(--font-body);
	font-size: 1.05rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	cursor: pointer;
	box-shadow: 0 4px 16px var(--accent-glow);
	transition: background 0.15s var(--ease), transform 0.15s var(--ease), box-shadow 0.15s var(--ease);
}

.single-product .summary .single_add_to_cart_button:hover {
	background: var(--accent-2);
	transform: translateY(-2px);
	box-shadow: 0 6px 20px var(--accent-glow);
}

.single-product .summary .single_add_to_cart_button:disabled,
.single-product .summary .single_add_to_cart_button.disabled {
	background: var(--surface-2);
	color: var(--text-dim);
	box-shadow: none;
	cursor: not-allowed;
	transform: none;
}

/* ---------- Variable products ----------------------------------------
   The same page, one dropdown per attribute. Only reachable on products
   with options, so it is kept to what the default markup needs. */
.single-product .summary table.variations {
	width: 100%;
	margin: 0;
	border-collapse: collapse;
}

.single-product .summary table.variations th,
.single-product .summary table.variations td {
	padding: 0.5rem 0;
	border: 0;
	text-align: start;
	vertical-align: middle;
}

.single-product .summary table.variations th.label label {
	color: var(--text-dim);
	font-size: 0.9rem;
	font-weight: 600;
}

.single-product .summary table.variations select {
	width: 100%;
	min-height: 2.75rem;
	padding: 0.5rem 0.75rem;
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	background: var(--surface);
	color: var(--text);
	font-family: var(--font-body);
	font-size: 0.95rem;
}

.single-product .summary .woocommerce-variation-price .price {
	font-size: 1.35rem;
}

.single-product .summary .reset_variations {
	color: var(--text-dim);
	font-size: 0.85rem;
}

/* ---------- Meta ------------------------------------------------------ */
.single-product .summary .product_meta {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	margin: 0;
	padding-block-start: 1.25rem;
	border-block-start: 1px solid var(--border);
	color: var(--text-dim);
	font-size: 0.875rem;
}

.single-product .summary .product_meta a {
	display: inline-block;
	margin-inline-end: 0.35rem;
	padding: 0.15rem 0.65rem;
	border: 1px solid var(--border);
	border-radius: 999px;
	background: var(--surface-2);
	color: var(--text);
	font-size: 0.8rem;
	text-decoration: none;
	transition: border-color 0.2s var(--ease), color 0.2s var(--ease);
}

.single-product .summary .product_meta a:hover,
.single-product .summary .product_meta a:focus-visible {
	border-color: var(--accent);
	color: var(--accent-text);
}

/* ---------- Notices ---------------------------------------------------
   "Added to your cart", stock warnings, the WC error list. Scoped to this
   template: cart.css and checkout.css already carry their own. */
.single-product .woocommerce-notices-wrapper:empty {
	display: none;
}

.single-product .woocommerce-message,
.single-product .woocommerce-info,
.single-product .woocommerce-error {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
	margin-block-end: 1.5rem;
	padding: 0.9rem 1.15rem;
	border: 1px solid var(--border);
	border-inline-start: 3px solid var(--accent);
	border-radius: var(--radius-sm);
	background: var(--surface);
	color: var(--text);
	list-style: none;
}

.single-product .woocommerce-error {
	border-inline-start-color: var(--danger);
}

.single-product .woocommerce-message .button,
.single-product .woocommerce-info .button {
	margin-inline-start: auto;
	padding: 0.45rem 1rem;
	border-radius: var(--radius-sm);
	background: var(--accent);
	color: var(--on-accent);
	font-size: 0.875rem;
	font-weight: 600;
	text-decoration: none;
}

/* ---------- Responsive ------------------------------------------------
   Below 992px the two columns become one. Order matters: the buy box has
   to follow the gallery, and it already does in the markup, so only the
   sticky offset has to go. */
@media (max-width: 991px) {
	.single-product div.product {
		grid-template-columns: minmax(0, 1fr);
		gap: 1.75rem;
	}

	.single-product div.product > .summary,
	.single-product div.product > .woocommerce-product-gallery {
		grid-column: 1;
	}

	.single-product div.product > .woocommerce-tabs,
	.single-product div.product > .nx-addons,
	.single-product div.product > .product-lead,
	.single-product div.product > .up-sells,
	.single-product div.product > .related {
		margin-block-start: 2.25rem;
	}
}

@media (max-width: 560px) {
	.single-product .summary .single_add_to_cart_button {
		flex: 1 1 100%;
	}

	.single-product .summary form.cart .quantity {
		flex: 1 1 100%;
		justify-content: center;
	}
}

/* ---------- Product enquiry form (shop mode: leave details) ---------- */

/*
 * What stands in the cart form's place while the shop collects details instead
 * of selling (inc/shop-mode.php → template-parts/product-lead-form.php).
 *
 * The look is deliberately the contact form's: same .contact-form surface, same
 * .form-field inputs, same status line. It IS the same form posting to the same
 * endpoint, and a visitor who has already met one of them should recognise the
 * other instead of wondering whether he is on a different site.
 *
 * The only additions here are the heading and the row that holds the submit
 * button and the WhatsApp hand-off.
 *
 * There was a fifth rule, `.product-lead__intro`, for a paragraph that told the
 * visitor the site had no direct buying. The paragraph is gone
 * (template-parts/product-lead-form.php) and the rule went with it rather than
 * being left as a class nothing writes; the heading now carries the full gap
 * down to the first field.
 *
 * A PAGE-LEVEL BAND SINCE 2026-09-30, AND IT HAS A LEAD-IN AGAIN. Until then the
 * form was the first thing in the buy box (inc/shop-mode.php, priority 1 on
 * `woocommerce_single_product_summary`) and the rule below deliberately carried
 * NO top margin, because its top edge had to sit level with the top of the
 * images: "השאירו פרטים צריך לעלות למעלה להיות בדיוק בגובה של הטאב של התמונות".
 * He re-placed the block — "הליד תוריד למתחת לתוספות" — so it is now printed at
 * priority 13 on `woocommerce_after_single_product_summary`, a direct child of
 * `div.product` exactly one place under the extras. It therefore takes the same
 * full width and the same lead-in as the other page-level rows, and it needs
 * them: what stands above it is a list of things to add and this is the thing to
 * do about it, which is two statements rather than one running block.
 *
 * The measure moved from `.product-lead__form` to the section on the same day.
 * The form is no longer inside a buy-box column that was already narrow, so
 * something has to hold it: at 1240px a two-field form is a wall of inputs with
 * a submit button at the far end of it. Keeping the cap on the section rather
 * than on the form also means the heading lines up with the fields under it
 * instead of starting over the empty half.
 */
.product-lead {
	grid-column: 1 / -1;
	margin-block: clamp(2rem, 4vw, 3.25rem) 1.75rem;
	max-width: 30rem;
}

.product-lead__title {
	margin: 0 0 1.25rem;
	font-size: 1.2rem;
}

.product-lead__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
}

.product-lead__actions .btn {
	margin: 0;
}