/* JBA-26 attended visual edit: reproduction note sizing/position, swatch-style
   Size/Paper selectors in place of native dropdowns, and two corrections.
   This whole stylesheet is only enqueued on the 20 approved-catalog product
   pages (see JbaProductPagePresentation::enqueueAssets), so nothing here
   needs its own extra scoping selector. */

/* The "View cart" link in the added-to-cart success notice carries a
   `.button` class but renders as plain, low-contrast grey text (no fill,
   no border) — functionally the only way to reach the cart from this page
   (JBA-26: no cart link in the header nav, confirmed intentional/by
   design, not something this fixes). Scoped to the approved-catalog
   product pages only, same as everything else in this stylesheet — not a
   site-wide theme change. */
.wc-block-components-notice-banner .button.wc-forward {
	display: inline-block;
	padding: 0.4rem 1rem;
	/* !important: border applied fine at this specificity, but a more
	   specific WooCommerce/theme rule still won on background-color and
	   color specifically (confirmed live — computed background stayed
	   transparent and text stayed grey even with the border showing). */
	background-color: #281c5c !important;
	border: 1px solid #281c5c;
	border-radius: 2px;
	color: #fff !important;
	text-decoration: none;
}

.wc-block-components-notice-banner .button.wc-forward:hover {
	background-color: #3a2a80 !important;
}

/* This theme mixes three typefaces on the product page: Cardo (serif — body
   text, labels, price) inherited from the theme's global styles, Montserrat
   (headings — the product title) and Jost (buttons, nav). Approved pairing
   (JBA-26, attended visual-edit correction): Montserrat stays on the title;
   everything else on this page moves from Cardo to Jost, matching what the
   buttons and nav already use, instead of introducing a third face. Both
   fonts are already loaded site-wide — only font-family changes here, no
   new @font-face/stylesheet. Button/input elements don't inherit
   font-family by default, so .jba-swatch needs its own rule even though
   the rest can just cascade from a shared one. */
.jba-artist,
.variations th.label,
.jba-production-note,
.jba-reproduction-note,
.woocommerce-Price-amount {
	font-family: "Jost", sans-serif;
}

.jba-swatch {
	font-family: "Jost", sans-serif;
}

/* SKU and category are internal/fulfillment details, not something a
   customer needs on the product page — they still appear on the order
   receipt (a separate template this stylesheet never touches), just not
   here (JBA-26). These are two independent blocks, not one shared
   container: the SKU block carries a `product_meta` class (legacy
   WooCommerce convention) but Category is its own separate
   `wp:post-terms` block with no such class — hiding .product_meta alone
   left "Category: Uncategorized" still showing (confirmed live). Both
   share `.wp-block-post-terms`, so that's the real common selector. */
.wp-block-post-terms {
	display: none;
}

/* The top price range duplicates the per-variation price already shown once
   a Size/Paper combination is selected, and reads as a retail price tag
   above the artist's name on what is presented as a museum/gallery
   description — omitted entirely, not just repositioned. */
.wp-block-woocommerce-product-price {
	display: none;
}

/* The default paragraph margin left "Joe Barrett" reading as disconnected
   from the title above it (JBA-26). Secondary accent color instead of the
   inherited near-black body text. */
.jba-artist {
	margin-top: 0.2rem;
	color: #e33a04;
}

/* The per-variation price (moved above the Size/Material swatches by
   product-page.js, which relocates the real .single_variation node rather
   than duplicating it) needs its own spacing now that it isn't sandwiched
   between the swatches and the Add to Cart button. */
.single_variation_wrap .single_variation {
	margin-bottom: 0.75rem;
}

/* Theme bug, not something introduced here: .single_add_to_cart_button has
   no explicit resting-state text color, so it inherits the page's ambient
   heading color (a dark maroon) against its own dark button background —
   unreadable until :hover, where the theme's own global button style does
   set an explicit (readable) color. Giving the resting state that same
   color is the minimal fix. */
.single_add_to_cart_button {
	color: #fff;
	/* Back to Jost (font wasn't the issue — width/negative space was,
	   JBA-26). Semibold alone still read too soft — all caps with a touch
	   of letter-spacing gives it real presence without going heavier. */
	font-family: "Jost", sans-serif;
	font-weight: 600;
	font-size: 16px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	min-width: 325px;
	background-color: #281c5c;
	/* Ties the navy button back to the page's one recurring accent color
	   (the heading maroon, also the active-swatch border) rather than
	   leaving it a flat, disconnected block. */
	border: 1px solid #812c2c;
}

/* The disabled ("choose a size/material first") state dims the whole
   button via opacity, which blends the white text and navy background
   together into a washed-out grey against the page's white ground —
   reading as illegible, not just "disabled" (JBA-26, attended visual-edit
   correction). An opaque, lighter background keeps the same disabled
   signal without alpha-blending the text into the page. */
.single_add_to_cart_button.disabled {
	opacity: 1;
	background-color: #7972a0;
	border-color: #7972a0;
	color: #fff;
}

/* Now stacked directly beneath the production note rather than appearing
   much further down the page (JBA-26, attended visual-edit correction). */
.jba-reproduction-note {
	margin-top: 0.6rem;
	max-width: 46em;
	font-size: 0.78rem;
	line-height: 1.5;
	color: #6b5c4e;
}

/* The table default (vertical-align: middle) centers "Material" against the
   combined height of the swatch buttons plus the two disclaimers beneath
   them, making the label appear well below the buttons instead of beside
   them — align it to the top of the row instead, matching Size. A prior
   attempt at this used `.variations th.label` alone, which WooCommerce's
   own woocommerce-blocktheme.css silently overrode: its
   `.woocommerce div.product form.cart table.variations th` rule sets
   vertical-align: middle at specificity (0,4,4), well above that one-class
   selector's (0,2,1) — confirmed live by checking matched CSS rules
   directly (JBA-26, attended visual-edit correction). Matching that same
   selector shape, plus .label, wins on specificity without needing
   !important. */
.woocommerce div.product form.cart table.variations th.label {
	vertical-align: top;
	padding-top: 0.6rem;
}

/* Visually hide the native <select> while keeping it in the DOM and
   operable — WooCommerce's own variation-matching script still reads and
   writes it directly; the swatch buttons only relay clicks into it. */
.jba-select-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.variations td.value {
	padding-top: 0.35rem;
	padding-bottom: 0.35rem;
}

.jba-swatches {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.jba-swatch {
	font-size: 0.95rem;
	line-height: 1;
	padding: 0.6rem 1.1rem;
	border: 1px solid #d8cdbb;
	background: #fff;
	color: #3d2b1f;
	border-radius: 2px;
	cursor: pointer;
	transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

/* Material swatches carry two lines (brand, then material) instead of
   plain text — Size swatches are unaffected, since they never get spans. */
.jba-swatch:has(.jba-swatch-brand) {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.15rem;
	line-height: 1.2;
}

.jba-swatch-brand {
	font-size: 0.72rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	opacity: 0.75;
}

.jba-swatch-material {
	font-size: 0.98rem;
}

.jba-swatch:hover {
	border-color: #812c2c;
}

.jba-swatch:focus-visible {
	outline: 2px solid #812c2c;
	outline-offset: 2px;
}

.jba-swatch.is-active {
	background: #812c2c;
	border-color: #812c2c;
	color: #fdf9f4;
}

.jba-production-note {
	margin-top: 0.6rem;
	max-width: 46em;
	font-size: 0.8rem;
	line-height: 1.5;
	color: #6b5c4e;
}

/* Stock count is an internal fulfillment detail, not something a customer
   needs — every approved-catalog listing is treated as available on demand
   (JBA-26, attended visual-edit correction). Hides the display only; actual
   stock management/gating is untouched, including the fail-closed
   draft/hidden/out-of-stock safety state this whole catalog still relies on
   pre-launch. */
.variations_form.cart .stock {
	display: none;
}

/* Informational only — never styled to look clickable/selectable, unlike
   the real PayPal buttons/messaging it sits above (JBA-26, attended
   visual-edit correction). No label text ("We Accept" removed as
   redundant, JBA-26 follow-up correction) — just the icon row. */
.jba-payment-methods {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin: 0.75rem 0;
}

.jba-payment-icon {
	display: inline-block;
	width: 40px;
	line-height: 0;
}

.jba-payment-icon svg {
	width: 100%;
	height: auto;
	display: block;
}

/* Hover-zoom is kept for the main artwork image only, not the
   room-placement images (JBA-26, attended visual-edit correction — an
   earlier version hid it everywhere). jQuery.zoom (the plugin WooCommerce's
   gallery script binds on hover) inserts this overlay on mouseenter;
   product-page.js toggles `jba-not-main-image` on the gallery based on
   which image is currently active, so this only suppresses the overlay
   there — never touching `zoom_enabled` itself, which the click-to-zoom
   trigger icon's very existence depends on (see
   class-product-page-presentation.php). */
.jba-not-main-image .zoomImg {
	display: none !important;
}