/**
 * Single product — two-column buy layout, gallery, price box, version dialog, FAQs.
 *
 * Marker class: .nou-catalog-product  (on the page wrapper, beside .nou-catalog-home)
 * Companion files: inc/catalog-product.php        (blocks)
 *                  templates/single-product.html  (layout)
 *
 * Ported from design-lab/css/wf-c-product.css, LIGHT MODE ONLY, with every
 * `--nou-*` lab placeholder resolved to a theme.json token — the same mapping
 * table documented at the head of assets/css/catalog.css.
 *
 * WHAT IS *NOT* HERE, ON PURPOSE
 *   - prose, deflist, pathbar, button  → assets/css/catalog-page.css
 *   - card, grid, chip                 → assets/css/catalog-home.css + catalog.css
 *   - shell width, page head, secthead → assets/css/catalog.css
 * The handle depends on `nouthemes-catalog-page` and `nouthemes-catalog-home`,
 * so all three have printed before this file.
 *
 * ═══════════════════════════════════════════════════════════════════
 * SPECIFICITY: WHY THE `.nou-catalog-product` PREFIX IS ON EVERY OVERRIDE
 *
 * The purchase column, the gallery and the version dialog are markup from
 * `[noumarket_sidebar]`, `[noumarket_gallery]` and `[noumarket_faqs]`. That
 * markup is already styled by assets/css/woocommerce.css using
 * `.woocommerce-page .noumarketplace-*` — 107 rules, all at specificity
 * (0,2,0).
 *
 * Matching that at (0,2,0) and relying on source order would work only as long
 * as this file prints last. It does not reliably: `nouthemes-woocommerce` is
 * enqueued from inc/integrations/woocommerce.php, whose `add_action()` runs
 * during `after_setup_theme` (priority 20) — i.e. later than inc/enqueue.php's
 * — and the measured print order on /product/…/ is
 * style → animations → catalog → sticky → **woocommerce**, with woocommerce.css
 * last of the theme's own files.
 *
 * So every rule that competes with woocommerce.css carries three classes,
 * (0,3,0), and wins regardless of order. Rules for classes woocommerce.css has
 * never heard of stay at one or two.
 * ═══════════════════════════════════════════════════════════════════
 *
 * DELIBERATE DIFFERENCES FROM assets/css/woocommerce.css, each measured:
 *
 * [1] COLUMN WIDTHS. woocommerce.css:138-146 lays the page out with flex and
 *     the old template asked for `60%` + `340px` with a 40px gap. At the
 *     1120px content column that is 672 + 340 + 40 = 1052 — 68px unclaimed,
 *     and a main column narrower than it is allowed to be. `minmax(0, 1fr)
 *     340px` has no arithmetic left to get wrong.
 *
 * [2] STICKY NEVER WORKED. woocommerce.css:152 sets `top: 32px` on
 *     `.noumarketplace-sidebar-sticky` and :147 sets `position: relative` on
 *     the sidebar — `top` on a relatively positioned box is an offset, not a
 *     pin, so the price box scrolled away with the page. `position: sticky` is
 *     declared here, on `.nou-catalog-buy`.
 *
 * [3] GALLERY ASPECT RATIO. woocommerce.css:234 crops the main image 4:3 and
 *     :261 sizes thumbs 80×60 (also 4:3), while the home page and the category
 *     page crop product shots 16:10. Same image, two crops. 16:10 wins here,
 *     for both, because it is the ratio used on the two pages a visitor sees
 *     before this one.
 *
 * [4] CHANGE TYPE BY COLOUR ALONE. woocommerce.css:745-750 gives the six
 *     change types six background colours on an empty `::before` circle —
 *     `content: attr(data-type)` at :731 resolves to nothing, because
 *     sidebar.php never writes a `data-type`. So today the dialog shows six
 *     silent coloured dots: WCAG 1.4.1. inc/catalog-product.php injects a mono
 *     text label; the circle is switched off below.
 *
 * [5] QUANTITY FIELD HIDDEN. woocommerce.css:209 sets
 *     `.noumarketplace-pricing-box .quantity { display: none }`. That is kept:
 *     these are single-licence digital products. The field is hidden, NOT
 *     removed — the input still posts `quantity=1` with the form, which is why
 *     this is a display rule and not a change to the cart markup.
 */

/* ================================================================== *
 * PAGE HEAD
 * ================================================================== */

/*
 * The product head needs to sit closer to the body than any other page head.
 *
 * `.nou-catalog-pagehead` (catalog.css:630) pads clamp(40px, 6vw, 88px) below,
 * sized for a mono h1 of ~58px — a block with real mass, which earns the room.
 * Here the head is one 56px row of icon + name, so 88px underneath reads as a
 * hole. And the lead paragraph is a CONTINUATION of the product name, not a
 * new block, so the two belong near each other.
 */
.nou-catalog-product .nou-catalog-product__head {
	padding-bottom: clamp(18px, 2.2vw, 30px);
}

.nou-catalog-prodhead {
	display: flex;
	align-items: center;
	gap: clamp(12px, 1.6vw, 18px);
}

/*
 * 56×56, overriding the 60×60 that woocommerce.css:216 puts on
 * `.noumarketplace-product-icon` (the shortcode also hardcodes width/height
 * 60 as HTML attributes, which CSS wins against). 56 is the measured height of
 * the two-line text block beside it — the h1 plus the byline — so the icon
 * aligns with the block instead of standing 4px taller than it.
 */
.nou-catalog-product .nou-catalog-prodhead .nou-catalog-prodhead__icon {
	flex-shrink: 0;
	width: 56px;
	height: 56px;
	border: 1px solid var(--wp--custom--line--soft);
	border-radius: var(--wp--custom--radius--sm);
	background: var(--wp--custom--neutral--50);
	object-fit: cover;
}

.nou-catalog-prodhead__text {
	min-width: 0;
}

.nou-catalog-prodhead__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--mono);
	font-size: clamp(26px, 3.2vw, 38px);
	font-weight: var(--wp--custom--font-weight--medium);
	letter-spacing: var(--wp--custom--tracking--snug);
	line-height: 1.1;
	color: var(--wp--custom--neutral--900);
}

.nou-catalog-prodhead__by {
	margin: 4px 0 0;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 11px;
	letter-spacing: var(--wp--custom--tracking--wide);
	text-transform: uppercase;
	color: var(--wp--custom--neutral--600);
}

.nou-catalog-prodhead__by a {
	color: var(--wp--custom--neutral--700);
	text-decoration: none;
	transition: color 160ms var(--wp--custom--easing--base);
}

.nou-catalog-prodhead__by a:hover,
.nou-catalog-prodhead__by a:focus-visible {
	color: var(--wp--custom--accent--strong);
}

/* ================================================================== *
 * TWO-COLUMN LAYOUT — see [1] and [2]
 * ================================================================== */

.nou-catalog-product__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 340px;
	gap: clamp(28px, 3.4vw, 48px);
	align-items: start;
}

.nou-catalog-product__main {
	min-width: 0;
}

/*
 * The main column is a flow of unrelated sections, and block layout gives it
 * no gap here (the wrapper uses `layout: default`). Spacing is owned by the
 * sections themselves so each can carry the distance its own weight asks for.
 */
.nou-catalog-product__main > * {
	margin-block: 0;
}

.nou-catalog-product__lead {
	max-width: 62ch;
	font-size: var(--wp--preset--font-size--small);
	line-height: var(--wp--custom--line-height--medium);
	color: var(--wp--custom--neutral--800);
}

.nou-catalog-product__lead > * {
	margin-block: 0;
}

.nou-catalog-product__lead > * + * {
	margin-block-start: 0.8em;
}

/* ================================================================== *
 * GALLERY — see [3]
 *
 * The markup is `[noumarket_gallery]`, kept because assets/js/woocommerce.js
 * is already bound to these class names. Note it tracks the current thumb with
 * an `is-active` CLASS, not `aria-current`, so that is what is styled — a
 * selector on `[aria-current]` would go stale on the first click.
 * ================================================================== */

.nou-catalog-gallery {
	margin-top: clamp(20px, 2.4vw, 28px);
}

.nou-catalog-product .nou-catalog-gallery .noumarketplace-gallery__main {
	width: 100%;
	margin-bottom: 10px;
	border: 1px solid var(--wp--custom--line--soft);
	border-radius: var(--wp--custom--radius--md);
	background: var(--wp--custom--neutral--50);
	overflow: hidden;
}

/*
 * 16:10 and `object-position: top`, the same crop `.nou-catalog-card__media`
 * uses in catalog-home.css. A screenshot's information is at the top; centring
 * the crop throws away the header of whatever is being shown.
 */
.nou-catalog-product .nou-catalog-gallery .noumarketplace-gallery__main-img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	object-position: top;
}

/*
 * The video frame keeps 16:9. That is the REAL ratio of the material, not a
 * design choice: forcing it to 16:10 gives either letterboxing or a crop
 * through the picture.
 */
.nou-catalog-product .nou-catalog-gallery .noumarketplace-featured-media--video {
	border-radius: var(--wp--custom--radius--md);
	background: var(--wp--custom--neutral--900);
}

.nou-catalog-product .nou-catalog-gallery .noumarketplace-gallery__thumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

/*
 * The wrap is restored. woocommerce.css:248 sets `flex-wrap: nowrap` +
 * `overflow: hidden` on the un-expanded strip, which silently clips thumbs 5
 * and 6 at this column width even though they are not marked `is-overflow`
 * (only index >= 6 is). A wrapped second row shows them.
 */
.nou-catalog-product .nou-catalog-gallery .noumarketplace-gallery__thumbs:not(.is-expanded) {
	flex-wrap: wrap;
	overflow: visible;
}

/* 80×50 = 16:10, matching the main image. */
.nou-catalog-product .nou-catalog-gallery .noumarketplace-gallery__thumb,
.nou-catalog-product .nou-catalog-gallery .noumarketplace-gallery__more {
	box-sizing: border-box;
	flex-shrink: 0;
	width: 80px;
	height: 50px;
	padding: 0;
	border: 1px solid var(--wp--custom--line--strong);
	border-radius: var(--wp--custom--radius--xs);
	background: var(--wp--custom--neutral--50);
	overflow: hidden;
	cursor: pointer;
	transition: border-color 160ms var(--wp--custom--easing--base);
}

.nou-catalog-product .nou-catalog-gallery .noumarketplace-gallery__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top;
}

.nou-catalog-product .nou-catalog-gallery .noumarketplace-gallery__thumb:hover,
.nou-catalog-product .nou-catalog-gallery .noumarketplace-gallery__more:hover {
	border-color: var(--wp--custom--accent--strong);
}

/*
 * Current thumb: 2px accent border, pulled back by a 1px negative margin so
 * the outer box does not change size. Without the margin the strip shifts 1px
 * on every click and the whole row twitches.
 */
.nou-catalog-product .nou-catalog-gallery .noumarketplace-gallery__thumb.is-active {
	border-width: 2px;
	border-color: var(--wp--custom--accent--strong);
	margin: -1px;
}

/*
 * The focus ring the original never had. These are real `<button>` elements so
 * Enter and Space already worked; a keyboard user simply could not see where
 * they were.
 */
.nou-catalog-product .nou-catalog-gallery .noumarketplace-gallery__thumb:focus-visible,
.nou-catalog-product .nou-catalog-gallery .noumarketplace-gallery__more:focus-visible {
	outline: 2px solid var(--wp--custom--accent--strong);
	outline-offset: 2px;
}

.nou-catalog-product .nou-catalog-gallery .noumarketplace-gallery__thumb--video {
	display: grid;
	place-items: center;
	background: color-mix(in srgb, var(--wp--custom--accent--strong) 12%, var(--wp--custom--neutral--0));
}

.nou-catalog-product .nou-catalog-gallery .noumarketplace-gallery__play {
	font-size: 13px;
	line-height: 1;
	color: var(--wp--custom--accent--strong);
}

/* The "+N" overflow control, now a real button (see inc/catalog-product.php). */
.nou-catalog-product .nou-catalog-gallery .noumarketplace-gallery__more {
	display: grid;
	place-content: center;
	row-gap: 2px;
	text-align: center;
	background: var(--wp--custom--surface--page);
}

.nou-catalog-product .nou-catalog-gallery .noumarketplace-gallery__more-count {
	display: block;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 12px;
	font-weight: var(--wp--custom--font-weight--medium);
	line-height: 1;
	color: var(--wp--custom--neutral--900);
}

.nou-catalog-product .nou-catalog-gallery .noumarketplace-gallery__more::after {
	content: "";
	display: none;
}

/* ================================================================== *
 * DETAILS TABLE
 *
 * Reuses `.nou-catalog-deflist` from catalog-page.css: mono label left, fact
 * right, one hairline per row. Only the section heading and the two list
 * shapes inside a `dd` are new.
 * ================================================================== */

.nou-catalog-specs {
	margin-top: clamp(28px, 3.4vw, 44px);
}

.nou-catalog-specs__title {
	margin: 0 0 clamp(14px, 1.8vw, 18px);
	font-family: var(--wp--preset--font-family--mono);
	font-size: clamp(16px, 1.8vw, 19px);
	font-weight: var(--wp--custom--font-weight--medium);
	letter-spacing: var(--wp--custom--tracking--tight);
	color: var(--wp--custom--neutral--900);
}

/* The release date beside a version number: same row, lower rank. */
.nou-catalog-specs__sub {
	color: var(--wp--custom--neutral--600);
}

/*
 * A list inside a definition row, not a comma-joined sentence: these are
 * discrete facts the shop owner typed on separate lines, and a screen reader
 * announcing "list, 4 items" carries that structure. No bullet glyph — the
 * row is already inside a labelled cell, so a marker would only add noise.
 */
.nou-catalog-specs__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.nou-catalog-specs__list li + li {
	margin-top: 3px;
}

/* ================================================================== *
 * FAQS
 *
 * Native `<details>`/`<summary>` from `[noumarket_faqs]`, kept as-is. The
 * element already gives keyboard open/close, a state a screen reader can read,
 * and Ctrl+F finding text inside a closed panel. A hand-rolled accordion has
 * to rebuild all three and usually misses the last.
 * ================================================================== */

.nou-catalog-faqs {
	margin-top: clamp(34px, 4vw, 52px);
}

.nou-catalog-product .nou-catalog-faqs .noumarketplace-faqs {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

.nou-catalog-product .nou-catalog-faqs .noumarketplace-faqs__title {
	margin: 0 0 clamp(14px, 1.8vw, 20px);
	font-family: var(--wp--preset--font-family--mono);
	font-size: clamp(16px, 1.8vw, 19px);
	font-weight: var(--wp--custom--font-weight--medium);
	letter-spacing: var(--wp--custom--tracking--tight);
	color: var(--wp--custom--neutral--900);
}

.nou-catalog-product .nou-catalog-faqs .noumarketplace-faqs__item {
	padding: 0;
	border-top: 1px solid var(--wp--custom--line--soft);
	border-bottom: 0;
}

.nou-catalog-product .nou-catalog-faqs .noumarketplace-faqs__item:last-child {
	border-bottom: 1px solid var(--wp--custom--line--soft);
}

.nou-catalog-product .nou-catalog-faqs .noumarketplace-faqs__question {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	padding-block: clamp(14px, 1.8vw, 18px);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 13px;
	font-weight: var(--wp--custom--font-weight--regular);
	letter-spacing: var(--wp--custom--tracking--snug);
	color: var(--wp--custom--neutral--900);
	list-style: none;
	cursor: pointer;
}

.nou-catalog-product .nou-catalog-faqs .noumarketplace-faqs__question::-webkit-details-marker {
	display: none;
}

/* `+` / real minus sign, replacing the chevron woocommerce.css:800 rotates. */
.nou-catalog-product .nou-catalog-faqs .noumarketplace-faqs__question::after {
	content: "+";
	flex-shrink: 0;
	font-size: 15px;
	line-height: 1;
	color: var(--wp--custom--neutral--600);
	transform: none;
}

.nou-catalog-product .nou-catalog-faqs .noumarketplace-faqs__item[open] .noumarketplace-faqs__question::after {
	content: "\2212"; /* U+2212 MINUS SIGN, not a hyphen. */
}

.nou-catalog-product .nou-catalog-faqs .noumarketplace-faqs__item[open] .noumarketplace-faqs__question {
	color: var(--wp--custom--accent--strong);
}

.nou-catalog-product .nou-catalog-faqs .noumarketplace-faqs__question:focus-visible {
	outline: 2px solid var(--wp--custom--accent--strong);
	outline-offset: 2px;
}

.nou-catalog-product .nou-catalog-faqs .noumarketplace-faqs__answer {
	max-width: 62ch;
	margin-top: 0;
	padding-bottom: clamp(16px, 2vw, 20px);
	font-size: var(--wp--preset--font-size--x-small);
	line-height: var(--wp--custom--line-height--medium);
	color: var(--wp--custom--neutral--700);
}

/* ================================================================== *
 * PURCHASE COLUMN
 *
 * All of this is `[noumarket_sidebar]` output. Every rule below is a display
 * rule. Nothing here alters the form, its `name`, its `value` or its action —
 * see the split in nouthemes_catalog_product_purchase_block().
 * ================================================================== */

.nou-catalog-buy {
	position: sticky; /* See [2]. */
	top: 88px;
	display: grid;
	gap: clamp(16px, 2vw, 20px);
}

/*
 * The shortcode's own wrappers are flattened into the grid above. Both are
 * plain containers in the markup, so `display: contents` lets their children
 * become grid items and the column spaces itself with one `gap` instead of the
 * mix of margins woocommerce.css:480 applies per section.
 */
.nou-catalog-product .nou-catalog-buy .noumarketplace-sidebar-content,
.nou-catalog-product .nou-catalog-buy .noumarketplace-sidebar-sticky {
	display: contents;
}

/* ------------------------------------------------------------------ *
 * PRICE BOX
 * ------------------------------------------------------------------ */

.nou-catalog-product .nou-catalog-buy .noumarketplace-pricing-box {
	padding: clamp(18px, 2.2vw, 24px);
	border: 1px solid var(--wp--custom--line--strong);
	border-radius: var(--wp--custom--radius--md);
	background: var(--wp--custom--surface--page);
}

.nou-catalog-product .nou-catalog-buy .noumarketplace-sidebar__label {
	margin: 0 0 12px;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 10px;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--wp--custom--neutral--600);
}

/* --- The `plans` shape: two radio rows ---------------------------- */

.nou-catalog-product .nou-catalog-buy .noumarketplace-billing-options {
	margin-bottom: 16px;
}

.nou-catalog-product .nou-catalog-buy .noumarketplace-billing-option {
	display: flex;
	align-items: center;
	gap: 9px;
	padding-block: 12px;
	border-bottom: 1px solid var(--wp--custom--line--soft);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 12px;
	color: var(--wp--custom--neutral--700);
	cursor: pointer;
}

.nou-catalog-product .nou-catalog-buy .noumarketplace-billing-option:last-child {
	border-bottom: 0;
}

.nou-catalog-product .nou-catalog-buy .noumarketplace-billing-option input[type="radio"] {
	flex-shrink: 0;
	width: 14px;
	height: 14px;
	margin: 0;
	accent-color: var(--wp--custom--accent--strong);
}

/*
 * The selected row darkens. `:has()` and not the plugin's
 * `--active` class: that class is printed once, server side, on the first
 * option and never updated, so after a click it points at the wrong row.
 * `:has(input:checked)` follows the actual control.
 */
.nou-catalog-product .nou-catalog-buy .noumarketplace-billing-option:has(input:checked) {
	color: var(--wp--custom--neutral--900);
}

.nou-catalog-product .nou-catalog-buy .noumarketplace-billing-option__text {
	display: flex;
	align-items: center;
	gap: 7px;
	min-width: 0;
	white-space: normal;
}

.nou-catalog-product .nou-catalog-buy .noumarketplace-billing-option__price {
	margin-left: auto;
	flex-shrink: 0;
	font-weight: var(--wp--custom--font-weight--medium);
	font-variant-numeric: tabular-nums;
}

/* `<del>` is kept, so a screen reader also hears that this price is struck. */
.nou-catalog-product .nou-catalog-buy .noumarketplace-billing-option__price del {
	margin-right: 5px;
	color: var(--wp--custom--neutral--600);
	text-decoration-thickness: 1px;
}

/*
 * "Save 20%" as an outlined accent pill, not a filled dark chip.
 *
 * Border AND text, never colour alone — the same WCAG 1.4.1 rule the version
 * dialog breaks at [4]. The saving is also stated numerically in the struck
 * price beside it, so the badge is reinforcement, not the only signal.
 */
.nou-catalog-product .nou-catalog-buy .noumarketplace-badge {
	padding: 2px 6px;
	border: 1px solid var(--wp--custom--accent--strong);
	border-radius: var(--wp--custom--radius--xs);
	background: transparent;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 9px;
	font-weight: var(--wp--custom--font-weight--medium);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--custom--accent--strong);
	white-space: nowrap;
}

/* --- The `lifetime` / `yearly` / free shapes: one number ---------- */

.nou-catalog-product .nou-catalog-buy .noumarketplace-price-simple,
.nou-catalog-product .nou-catalog-buy .noumarketplace-free-price {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 16px;
	padding: 0 0 14px;
	border-bottom: 1px solid var(--wp--custom--line--soft);
}

.nou-catalog-product .nou-catalog-buy .noumarketplace-price-simple__label,
.nou-catalog-product .nou-catalog-buy .noumarketplace-free-price__label {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 10px;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--wp--custom--neutral--600);
}

.nou-catalog-product .nou-catalog-buy .noumarketplace-price-simple__value,
.nou-catalog-product .nou-catalog-buy .noumarketplace-free-price__value {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 25px;
	font-weight: var(--wp--custom--font-weight--medium);
	letter-spacing: var(--wp--custom--tracking--snug);
	line-height: 1.1;
	color: var(--wp--custom--neutral--900);
	font-variant-numeric: tabular-nums;
}

.nou-catalog-product .nou-catalog-buy .noumarketplace-price-simple__period {
	margin-left: 3px;
	font-size: 11px;
	letter-spacing: var(--wp--custom--tracking--wide);
	text-transform: uppercase;
	color: var(--wp--custom--neutral--600);
}

/* --- The buttons -------------------------------------------------- */

/*
 * WooCommerce's own submit button and the external "Buy now" link get the same
 * treatment, because to a customer they are the same control. White on accent
 * measures 4.83:1; dark text on the same accent is 3.90:1 and fails.
 *
 * `.single_add_to_cart_button` is styled, never replaced. It is still the
 * `<button type="submit" name="add-to-cart" value="{id}">` that
 * woocommerce_template_single_add_to_cart() printed.
 */
.nou-catalog-product .nou-catalog-buy .single_add_to_cart_button,
.nou-catalog-product .nou-catalog-buy .noumarketplace-btn-buy {
	display: block;
	box-sizing: border-box;
	width: 100%;
	margin: 0;
	padding: 13px 18px;
	border: 1px solid var(--wp--custom--accent--strong);
	border-radius: var(--wp--custom--radius--sm);
	background: var(--wp--custom--accent--strong);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 12px;
	font-weight: var(--wp--custom--font-weight--medium);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #ffffff;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 180ms var(--wp--custom--easing--base), border-color 180ms var(--wp--custom--easing--base);
}

.nou-catalog-product .nou-catalog-buy .single_add_to_cart_button:hover,
.nou-catalog-product .nou-catalog-buy .noumarketplace-btn-buy:hover,
.nou-catalog-product .nou-catalog-buy .single_add_to_cart_button:focus-visible,
.nou-catalog-product .nou-catalog-buy .noumarketplace-btn-buy:focus-visible {
	background: var(--wp--custom--accent--stronger);
	border-color: var(--wp--custom--accent--stronger);
	color: #ffffff;
	opacity: 1;
}

/*
 * The cart form is one full-width block. `form.cart` also holds the quantity
 * field, which stays hidden — see [5]: hidden, so it still posts `quantity=1`.
 */
.nou-catalog-product .nou-catalog-buy form.cart {
	margin: 16px 0 0;
}

.nou-catalog-product .nou-catalog-buy form.cart .quantity {
	display: none;
}

/*
 * `render_block_core_shortcode()` is gone, so nothing wraps the button in a
 * `<p>` any more — but WooCommerce's own simple.php template does put the
 * button inside one. Zero its margins so the box does not gain a stray 1em.
 */
.nou-catalog-product .nou-catalog-buy form.cart > p {
	margin: 0;
}

/* Secondary action: outline only. Rank without spending another colour. */
.nou-catalog-product .nou-catalog-buy .noumarketplace-sidebar__actions {
	margin-top: 8px;
}

.nou-catalog-product .nou-catalog-buy .noumarketplace-btn-demo {
	display: block;
	box-sizing: border-box;
	width: 100%;
	margin: 0;
	padding: 12px 18px;
	border: 1px solid var(--wp--custom--line--strong);
	border-radius: var(--wp--custom--radius--sm);
	background: transparent;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 12px;
	font-weight: var(--wp--custom--font-weight--medium);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--custom--neutral--900);
	text-align: center;
	text-decoration: none;
	transition: border-color 180ms var(--wp--custom--easing--base), background-color 180ms var(--wp--custom--easing--base);
}

.nou-catalog-product .nou-catalog-buy .noumarketplace-btn-demo:hover,
.nou-catalog-product .nou-catalog-buy .noumarketplace-btn-demo:focus-visible {
	border-color: var(--wp--custom--accent--strong);
	background: color-mix(in srgb, var(--wp--custom--accent--strong) 8%, transparent);
	color: var(--wp--custom--neutral--900);
}

/* The monthly equivalence line. Left-aligned: it is a note, not a headline. */
.nou-catalog-product .nou-catalog-buy .noumarketplace-sidebar__monthly {
	margin: 12px 0 0;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 10.5px;
	line-height: 1.5;
	letter-spacing: 0.02em;
	text-align: left;
	color: var(--wp--custom--neutral--600);
}

/* ------------------------------------------------------------------ *
 * VERSION ROW
 * ------------------------------------------------------------------ */

.nou-catalog-product .nou-catalog-buy .noumarketplace-sidebar__version-box {
	margin: 0;
	border: 1px solid var(--wp--custom--line--soft);
	border-radius: var(--wp--custom--radius--sm);
	transition: border-color 160ms var(--wp--custom--easing--base);
}

.nou-catalog-product .nou-catalog-buy .noumarketplace-sidebar__version-box:hover {
	border-color: var(--wp--custom--line--strong);
}

.nou-catalog-product .nou-catalog-buy .noumarketplace-version-trigger {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	padding: 13px 16px;
	border: 0;
	background: transparent;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 11px;
	letter-spacing: var(--wp--custom--tracking--wide);
	cursor: pointer;
}

.nou-catalog-product .nou-catalog-buy .noumarketplace-version-trigger:focus-visible {
	outline: 2px solid var(--wp--custom--accent--strong);
	outline-offset: 2px;
}

.nou-catalog-product .nou-catalog-buy .noumarketplace-version-trigger__label {
	font-size: 11px;
	text-transform: uppercase;
	color: var(--wp--custom--neutral--600);
}

/*
 * The version number reads neutral 900, not accent. woocommerce.css:614 makes
 * it accent blue, which on this page is the colour of a link and of the buy
 * button — three meanings for one colour inside 340px. The number is a fact,
 * so it takes the plain ink.
 */
.nou-catalog-product .nou-catalog-buy .noumarketplace-version-trigger__number {
	font-size: 11px;
	font-weight: var(--wp--custom--font-weight--medium);
	color: var(--wp--custom--neutral--900);
	font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------------ *
 * INFORMATION GROUPS
 * ------------------------------------------------------------------ */

.nou-catalog-product .nou-catalog-buy .noumarketplace-sidebar__section {
	margin: 0;
	padding-top: clamp(14px, 1.8vw, 18px);
	border-top: 1px solid var(--wp--custom--line--soft);
}

.nou-catalog-product .nou-catalog-buy .noumarketplace-sidebar__section-title {
	margin: 0 0 10px;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 10px;
	font-weight: var(--wp--custom--font-weight--medium);
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--wp--custom--neutral--600);
}

.nou-catalog-product .nou-catalog-buy .noumarketplace-check-list,
.nou-catalog-product .nou-catalog-buy .noumarketplace-support-list {
	display: grid;
	gap: 7px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 13px;
	line-height: var(--wp--custom--line-height--medium);
	color: var(--wp--custom--neutral--700);
}

.nou-catalog-product .nou-catalog-buy .noumarketplace-support-list li {
	padding: 0;
}

/*
 * The tick is drawn with `::before` and stays out of the DOM on purpose. Being
 * inside a list headed "Subscription includes" already means "included", so a
 * tick in the markup would have a screen reader say "check mark" before every
 * line — three to nine times in a row for no added meaning.
 */
.nou-catalog-product .nou-catalog-buy .noumarketplace-check-list li {
	position: relative;
	padding-left: 20px;
}

.nou-catalog-product .nou-catalog-buy .noumarketplace-check-list li::before {
	content: "\2713";
	position: absolute;
	top: 0;
	left: 0;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 11px;
	font-weight: var(--wp--custom--font-weight--regular);
	line-height: 1.7;
	color: var(--wp--custom--accent--strong);
}

.nou-catalog-product .nou-catalog-buy .noumarketplace-support-list a {
	color: var(--wp--custom--neutral--700);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	transition: color 160ms var(--wp--custom--easing--base);
}

.nou-catalog-product .nou-catalog-buy .noumarketplace-support-list a:hover,
.nou-catalog-product .nou-catalog-buy .noumarketplace-support-list a:focus-visible {
	color: var(--wp--custom--accent--strong);
}

/* Category links get the catalog chip, the shape used on every card. */
.nou-catalog-product .nou-catalog-buy .noumarketplace-sidebar__categories {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.nou-catalog-product .nou-catalog-buy .noumarketplace-sidebar__categories a {
	display: inline-block;
	margin: 0;
	padding: 3px 9px;
	border: 1px solid var(--wp--custom--line--strong);
	border-radius: var(--wp--custom--radius--pill);
	background: transparent;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 10px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--wp--custom--neutral--700);
	text-decoration: none;
	white-space: nowrap;
	transition: border-color 160ms var(--wp--custom--easing--base), color 160ms var(--wp--custom--easing--base);
}

.nou-catalog-product .nou-catalog-buy .noumarketplace-sidebar__categories a:hover,
.nou-catalog-product .nou-catalog-buy .noumarketplace-sidebar__categories a:focus-visible {
	border-color: var(--wp--custom--accent--strong);
	background: transparent;
	color: var(--wp--custom--accent--strong);
}

/* ================================================================== *
 * VERSION HISTORY DIALOG — see [4]
 *
 * Native `<dialog>` + `showModal()`, already wired in assets/js/woocommerce.js.
 * It brings the focus trap, Escape, the inert background and the right
 * `aria-modal` for free. A div-based modal has to rebuild all of that.
 * ================================================================== */

.nou-catalog-product .nou-catalog-buy .noumarketplace-version-dialog {
	width: min(560px, 92vw);
	max-width: min(560px, 92vw);
	max-height: 82vh;
	padding: 0;
	border: 1px solid var(--wp--custom--line--strong);
	border-radius: var(--wp--custom--radius--md);
	background: var(--wp--custom--surface--page);
	color: var(--wp--custom--neutral--800);
	overflow: hidden;
}

.nou-catalog-product .nou-catalog-buy .noumarketplace-version-dialog::backdrop {
	background: color-mix(in srgb, var(--wp--custom--neutral--900) 46%, transparent);
}

.nou-catalog-product .nou-catalog-buy .noumarketplace-version-dialog__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin: 0;
	padding: 16px clamp(16px, 2.2vw, 22px);
	border-bottom: 1px solid var(--wp--custom--line--soft);
}

.nou-catalog-product .nou-catalog-buy .noumarketplace-version-dialog__header h3 {
	margin: 0;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 14px;
	font-weight: var(--wp--custom--font-weight--medium);
	letter-spacing: var(--wp--custom--tracking--snug);
	color: var(--wp--custom--neutral--900);
}

.nou-catalog-product .nou-catalog-buy .noumarketplace-version-dialog__close {
	display: grid;
	place-items: center;
	flex-shrink: 0;
	width: 30px;
	height: 30px;
	padding: 0;
	border: 1px solid var(--wp--custom--line--soft);
	border-radius: var(--wp--custom--radius--xs);
	background: transparent;
	font-size: 15px;
	line-height: 1;
	color: var(--wp--custom--neutral--700);
	cursor: pointer;
}

.nou-catalog-product .nou-catalog-buy .noumarketplace-version-dialog__close:hover {
	border-color: var(--wp--custom--line--strong);
	color: var(--wp--custom--neutral--900);
}

.nou-catalog-product .nou-catalog-buy .noumarketplace-version-dialog__close:focus-visible {
	outline: 2px solid var(--wp--custom--accent--strong);
	outline-offset: 2px;
}

.nou-catalog-product .nou-catalog-buy .noumarketplace-version-dialog__content {
	max-height: calc(82vh - 63px);
	padding: clamp(16px, 2.2vw, 22px);
	overflow-y: auto;
}

.nou-catalog-product .nou-catalog-buy .noumarketplace-version-dialog__entry {
	margin: 0;
	padding: 0;
	border-bottom: 0;
}

.nou-catalog-product .nou-catalog-buy .noumarketplace-version-dialog__entry + .noumarketplace-version-dialog__entry {
	margin-top: clamp(18px, 2.2vw, 24px);
	padding-top: clamp(18px, 2.2vw, 24px);
	border-top: 1px solid var(--wp--custom--line--soft);
}

.nou-catalog-product .nou-catalog-buy .noumarketplace-version-dialog__entry-header {
	display: flex;
	align-items: baseline;
	justify-content: flex-start;
	gap: 10px;
	margin-bottom: 10px;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 12px;
	letter-spacing: var(--wp--custom--tracking--wide);
}

.nou-catalog-product .nou-catalog-buy .noumarketplace-version-dialog__entry-header strong {
	font-weight: var(--wp--custom--font-weight--medium);
	color: var(--wp--custom--neutral--900);
	font-variant-numeric: tabular-nums;
}

.nou-catalog-product .nou-catalog-buy .noumarketplace-version-dialog__date {
	padding: 0;
	border-radius: 0;
	background: transparent;
	font-size: 10px;
	letter-spacing: var(--wp--custom--tracking--wide);
	text-transform: uppercase;
	color: var(--wp--custom--neutral--600);
}

.nou-catalog-product .nou-catalog-buy .noumarketplace-version-dialog__changes {
	display: grid;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.nou-catalog-product .nou-catalog-buy .noumarketplace-version-dialog__changes li {
	display: flex;
	align-items: baseline;
	gap: 10px;
	margin: 0;
	padding: 0;
	font-size: 13px;
	line-height: var(--wp--custom--line-height--medium);
	color: var(--wp--custom--neutral--700);
}

/*
 * The six coloured circles are switched off. They carried the change type with
 * nothing but hue, and `content: attr(data-type)` resolved to an empty string
 * because sidebar.php writes no `data-type` — so they were literally silent
 * dots. inc/catalog-product.php puts a text label in the markup instead.
 */
.nou-catalog-product .nou-catalog-buy .noumarketplace-version-dialog__changes li::before {
	content: none;
	display: none;
}

.nou-catalog-release__type {
	flex-shrink: 0;
	width: 62px;
	padding: 2px 0;
	border: 1px solid var(--wp--custom--line--strong);
	border-radius: var(--wp--custom--radius--xs);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 9px;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	text-align: center;
	color: var(--wp--custom--neutral--600);
}

/*
 * "New" is the one type that gets accent, because it is the only one a
 * returning customer is looking for. Border and text, so it still reads with
 * colour off.
 */
.nou-catalog-product .nou-catalog-buy .entry-type__n .nou-catalog-release__type {
	border-color: var(--wp--custom--accent--strong);
	color: var(--wp--custom--accent--strong);
}

/* ================================================================== *
 * RELATED PRODUCTS
 *
 * Cards and grid come from catalog-home.css, section head from catalog.css.
 * Only the rule above the section is new: it separates the related block from
 * the buy column without adding another heading weight.
 * ================================================================== */

.nou-catalog-product-related {
	padding-top: clamp(34px, 4vw, 56px);
	border-top: 1px solid var(--wp--custom--line--soft);
}

/* ================================================================== *
 * NARROW
 * ================================================================== */

@media (max-width: 1000px) {
	/*
	 * One column, and the purchase column goes FIRST.
	 *
	 * On a narrow screen people scroll far less; leaving the price under a
	 * gallery, a spec table and the whole body copy buries the one thing this
	 * page exists to do. `order` moves it visually while the DOM order keeps
	 * the story before the sidebar for a screen reader.
	 */
	.nou-catalog-product__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.nou-catalog-product__aside {
		order: -1;
	}

	.nou-catalog-buy {
		position: static;
	}
}

@media (max-width: 560px) {
	.nou-catalog-prodhead {
		align-items: flex-start;
	}

	.nou-catalog-product .nou-catalog-gallery .noumarketplace-gallery__thumb,
	.nou-catalog-product .nou-catalog-gallery .noumarketplace-gallery__more {
		width: 64px;
		height: 40px;
	}
}

/* ================================================================== *
 * REDUCED MOTION
 *
 * Every transition here is a colour change, which is exactly the class of
 * animation `prefers-reduced-motion` is meant to leave alone — but the setting
 * is also used by people who want no state change to animate at all, and
 * nothing on this page depends on the fade to be understood.
 * ================================================================== */

@media (prefers-reduced-motion: reduce) {
	.nou-catalog-prodhead__by a,
	.nou-catalog-product .nou-catalog-gallery .noumarketplace-gallery__thumb,
	.nou-catalog-product .nou-catalog-gallery .noumarketplace-gallery__more,
	.nou-catalog-product .nou-catalog-buy .single_add_to_cart_button,
	.nou-catalog-product .nou-catalog-buy .noumarketplace-btn-buy,
	.nou-catalog-product .nou-catalog-buy .noumarketplace-btn-demo,
	.nou-catalog-product .nou-catalog-buy .noumarketplace-sidebar__version-box,
	.nou-catalog-product .nou-catalog-buy .noumarketplace-support-list a,
	.nou-catalog-product .nou-catalog-buy .noumarketplace-sidebar__categories a {
		transition: none;
	}
}