/*
 * Visual layer that matches the product page mockup Bob approved
 * (https://claude.ai/artifact/5gNR2K2Laa1DZeqSHfLt4N), with his 2026-11-04 changes:
 * smaller product title (like ADI), part numbers right under it, coloured section bar
 * and specification headers, orange buy buttons, Inter font. Font sizes follow the ADI
 * product page (measured 2026-11-04): title 24/28 w600, model line 16/24, body 16/24,
 * specification cells 14px. No brand name above the title; Share and Print at the top.
 * Loaded after product.css and gallery.css, product pages only. Selectors start with
 * body.single-product so the shop's other plugins (Commerce Toolkit) cannot override them.
 */

/* ---------- Fonts ---------- */
body.single-product div.product,
body.single-product .nxc-sections,
body.single-product .nxc-mbar,
body.single-product .nxc-recent {
	font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	color: var(--nxc-text);
}
body.single-product div.product button,
body.single-product div.product input,
body.single-product .nxc-sections button,
body.single-product .nxc-sections input { font-family: inherit; }

/* ---------- Page width: 1216 px content like the mockup (comparison item 3) ---------- */
@media (min-width: 1280px) {
	body.single-product #primary { max-width: 1216px; margin-left: auto !important; margin-right: auto !important; float: none; }
}

/* ---------- Cards: white, no border, 16px corners (mockup) ---------- */
body.single-product .nxc-card,
body.single-product div.product .woocommerce-product-gallery { border: 0; border-radius: 16px; }
body.single-product div.product > .nx-product-visual { background: #fff; border-radius: 16px; padding: 20px; }
body.single-product div.product > .nx-product-visual > .woocommerce-product-gallery { padding: 0; }

/* ---------- Photo size (Bob 08:53: far too big) ----------
   The main photo is at most 460 px tall (320 px on phones) and is never stretched
   above its own pixel size, so small supplier images stay sharp. Centred on white. */
body.single-product div.product div.images .woocommerce-product-gallery__image {
	display: flex !important; align-items: center; justify-content: center; background: #fff;
}
body.single-product div.product div.images .woocommerce-product-gallery__image img,
body.single-product div.product div.images .woocommerce-product-gallery__image a > img {
	width: auto !important; max-width: 100% !important; height: auto !important; max-height: 460px !important;
	object-fit: contain; margin: 0 auto;
}
@media (max-width: 767px) {
	body.single-product div.product div.images .woocommerce-product-gallery__image img { max-height: 320px !important; }
}

/* ---------- Info card: brand, title, part numbers ---------- */
body.single-product .nxc-brand__name,
body.single-product .nxc-brand a { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--nxc-accent); text-decoration: none; }
body.single-product div.product .summary .nxc-info h1.product_title {
	font-family: inherit !important;
	font-size: 24px !important;
	line-height: 28px !important;
	font-weight: 600 !important;
	letter-spacing: 0 !important;
	color: var(--nxc-text) !important;
	margin: 0 0 6px !important;
}
/* Part number line right under the title, plain text like ADI's "Model" line. */
body.single-product .nxc-info .nxc-code,
body.single-product .nxc-info .npi-codes {
	display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px;
	font-family: inherit; font-size: 14px; line-height: 22px; font-weight: 400; color: var(--nxc-muted);
	background: none; padding: 0; border-radius: 0; margin: 0 0 14px;
}
body.single-product .nxc-info .nxc-code__label { font-size: 12px; font-weight: 600; color: var(--nxc-muted); margin-inline-end: 4px; }
body.single-product .nxc-info .nxc-code__item { color: var(--nxc-text); }
body.single-product .nxc-info .nxc-code__sep { color: #C9D2DE; }
/* Share / Print row at the top of the info card, on the right. */
body.single-product .nxc-info .nxc-brand-row { justify-content: flex-end; margin-bottom: 4px; }
body.single-product .nxc-info .nxc-brand:empty { display: none; }
body.single-product .nxc-info .nx-product-tools { margin: 0 0 6px; }
/* Text under the title: small and short (Bob 08:51). Every element inside gets the same size,
   so headings or big fonts pasted into a description cannot make it large. */
body.single-product .nxc-info .woocommerce-product-details__short-description,
body.single-product .nxc-info .woocommerce-product-details__short-description * {
	font-size: 14px !important; line-height: 22px !important; font-family: inherit !important;
}
body.single-product .nxc-info .woocommerce-product-details__short-description { color: #33414F; margin-bottom: 8px; }
body.single-product .nxc-info .woocommerce-product-details__short-description :is(h1, h2, h3, h4, h5, h6) { font-weight: 600; margin: 0 0 4px; }
body.single-product .nxc-info .woocommerce-product-details__short-description p { margin: 0 0 6px; }
body.single-product .nxc-info .woocommerce-product-details__short-description ul { margin: 0 0 6px 1.2em; }
body.single-product .nxc-info .nxc-overview-link { font-size: 14px; font-weight: 600; }

/* ---------- Buy card ---------- */
body.single-product .nxc-buybox { border: 2px solid var(--nxc-dark); padding: 20px 22px !important; }
/* Availability text from the Product Importer: normal text size in the buy card (it was ~22 px). */
body.single-product .nxc-buybox .npi-stock,
body.single-product .nxc-buybox .npi-stock p { font-size: 14px !important; line-height: 20px !important; margin: 0 0 8px !important; }
body.single-product .nxc-buybox .npi-stock .button,
body.single-product .nxc-buybox .npi-stock summary { font-size: 14px !important; }
/* Commerce Toolkit's "Customer Price" label: small and close to the price. */
body.single-product .nxc-buybox .nx-price-label { font-size: 12px !important; margin: 0 0 2px !important; }
body.single-product .nxc-buybox .nxc-price-block { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
body.single-product .nxc-buybox .nxc-price-block > * { margin: 0; }
body.single-product .nxc-buybox .nxc-price-block .nx-price-label,
body.single-product .nxc-buybox .nxc-price-block .nx-pricing-gate,
body.single-product .nxc-buybox .nxc-price-block .nxc-price-note { flex-basis: 100%; }
body.single-product .nxc-buybox .price { font-size: 30px !important; line-height: 1.15 !important; font-weight: 800 !important; }
body.single-product .nxc-buybox .nxc-price-extras { font-size: 14px; color: var(--nxc-muted); }
body.single-product .nxc-buybox .nxc-price-note { font-size: 13px; color: var(--nxc-muted); }

/* Volume prices: one joined strip, like the mockup. */
body.single-product .nxc-tiers { gap: 0; border: 1px solid var(--nxc-line); border-radius: 10px; overflow: hidden; }
body.single-product .nxc-tier { border: 0; border-radius: 0; border-right: 1px solid var(--nxc-line); background: var(--nxc-soft); padding: 8px; font-size: 13px; }
body.single-product .nxc-tier:last-child { border-right: 0; }
body.single-product .nxc-tier.is-active { border: 0; border-right: 1px solid var(--nxc-line); background: var(--nxc-tint); box-shadow: inset 0 -3px 0 var(--nxc-accent); padding: 8px; }
body.single-product .nxc-tier.is-active:last-child { border-right: 0; }
body.rtl.single-product .nxc-tier { border-right: 0; border-left: 1px solid var(--nxc-line); }
body.rtl.single-product .nxc-tier:last-child { border-left: 0; }

/* Quantity stepper (buttons added by product.js). Astra adds its own - / + links
   (class buttons_added); they are hidden here so only one pair shows (found on staging). */
body.single-product .nxc-buybox .quantity.nxc-stepper > a.minus,
body.single-product .nxc-buybox .quantity.nxc-stepper > a.plus { display: none !important; }
body.single-product .nxc-buybox form.cart .quantity.nxc-stepper { display: flex; align-items: stretch; border: 1px solid #C9D2DE; border-radius: 10px; overflow: hidden; background: #fff; }
body.single-product .nxc-buybox .nxc-stepper .qty { border: 0 !important; border-radius: 0 !important; width: 48px; min-width: 48px !important; height: 50px !important; -moz-appearance: textfield; }
body.single-product .nxc-buybox .nxc-stepper .qty::-webkit-outer-spin-button,
body.single-product .nxc-buybox .nxc-stepper .qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
body.single-product .nxc-stepper__btn {
	width: 44px; border: 0 !important; background: #fff !important; color: var(--nxc-text) !important;
	font-size: 18px; line-height: 1; cursor: pointer; padding: 0 !important; box-shadow: none !important;
}
body.single-product .nxc-stepper__btn:hover { background: var(--nxc-soft) !important; }

/* Add to List / Add to Quote (other plugins): two outlined buttons side by side. */
body.single-product .nxc-buybox .ns-product-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 10px; }
body.single-product .nxc-buybox .ns-product-actions > * { margin: 0 !important; }
body.single-product .nxc-buybox .ns-product-actions .button,
body.single-product .nxc-buybox .ns-product-actions button,
body.single-product .nxc-buybox .ns-product-actions a {
	display: flex; align-items: center; justify-content: center; width: 100%; min-height: 46px; padding: 0 12px !important;
	border: 1.5px solid #C9D2DE !important; border-radius: 10px !important; background: #fff !important;
	color: var(--nxc-text) !important; font: 600 14px/1.2 Inter, system-ui, sans-serif !important; text-decoration: none !important; box-shadow: none !important;
}
body.single-product .nxc-buybox .ns-product-actions > :first-child .button,
body.single-product .nxc-buybox .ns-product-actions > .button:first-child,
body.single-product .nxc-buybox .ns-product-actions > button:first-child,
body.single-product .nxc-buybox .ns-product-actions > a:first-child { border-color: var(--nxc-dark) !important; color: var(--nxc-dark) !important; }

/* ---------- Buy buttons: one height, a bit smaller (Bob 09:10) ----------
   Quantity box, Add to cart, Add to List and Add to Quote are all 44 px tall and
   line up; Add to cart no longer sits 2 px lower (its bottom shadow is removed). */
body.single-product .nxc-buybox form.cart { align-items: center !important; gap: 8px !important; margin-top: 12px !important; }
body.single-product .nxc-buybox form.cart .quantity.nxc-stepper { height: 44px; }
body.single-product .nxc-buybox .nxc-stepper .qty { height: 42px !important; width: 40px; min-width: 40px !important; font-size: 15px !important; }
body.single-product .nxc-stepper__btn { width: 34px; font-size: 16px; }
body.single-product .summary .nxc-buybox form.cart .single_add_to_cart_button {
	min-height: 44px !important; height: 44px; font-size: 15px !important; box-shadow: none !important; margin: 0 !important;
}
body.single-product .nxc-buybox .ns-product-actions { gap: 8px; margin-top: 8px; }
body.single-product .nxc-buybox .ns-product-actions .button,
body.single-product .nxc-buybox .ns-product-actions button,
body.single-product .nxc-buybox .ns-product-actions a { min-height: 44px; height: 44px; font-size: 14px !important; }

/* Slot for prompts from other plugins (project pricing, installation): under the buttons. */
body.single-product .nxc-buybox .nexsaver-buybox-prompt { margin-top: 10px; }

/* Trust row: 2 x 2 grid. */
body.single-product .nxc-trust { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; font-size: 12px; color: #33414F; }

/* ---------- Section bar: pill tabs, active tab dark navy ---------- */
body.single-product .nxc-secbar { border: 0; border-radius: 14px; padding: 6px; gap: 8px; }
body.single-product .nxc-secbar__links { gap: 4px; align-items: center; }
body.single-product .nxc-secbar__links a {
	padding: 12px 18px !important; border: 0 !important; border-radius: 10px; margin: 0;
	font-size: 16px; font-weight: 700; color: var(--nxc-text); text-decoration: none; white-space: nowrap;
}
body.single-product .nxc-secbar__links a:hover { background: var(--nxc-tint); color: var(--nxc-text); }
body.single-product .nxc-secbar__links a.is-active { background: var(--nxc-dark); color: #fff; }
/* No dotted box after a click (Astra's a:focus outline, Bob 09:29). Keyboard users still
   get a clear solid ring through :focus-visible. */
body.single-product .nxc-secbar__links a:focus { outline: none !important; }
body.single-product .nxc-secbar__links a:focus-visible { outline: 2px solid var(--nxc-accent) !important; outline-offset: 2px; }
body.single-product .nxc-secbar__price { font-size: 16px; font-weight: 800; color: var(--nxc-text); }
body.single-product .nxc-secbar__price .price,
body.single-product .nxc-secbar__price ins,
body.single-product .nxc-secbar__price .amount { color: var(--nxc-text); }

/* ---------- Sections: white cards with the heading inside ---------- */
body.single-product #nxc-specs,
body.single-product #nxc-docs,
body.single-product #nxc-system,
body.single-product #nxc-reviews { background: #fff; border-radius: 16px; padding: 28px; }
body.single-product .nxc-sec h2 { font-size: 24px; font-weight: 700; color: var(--nxc-text); }
body.single-product .nxc-overview__main,
body.single-product .nxc-inbox,
body.single-product .nxc-faq,
body.single-product .nxc-project { padding: 28px; }
body.single-product #nxc-reviews > .nxc-card { padding: 0; }

/* Specifications: each group a box with a coloured header (Bob: give the white headers a colour). */
body.single-product #nxc-specs .nxc-specs { background: transparent; padding: 0; display: flex; flex-direction: column; gap: 14px; }
body.single-product .nxc-spec-group { border: 1px solid #D5E2F2; border-radius: 12px; overflow: hidden; background: #fff; }
body.single-product .nxc-spec-group:first-child { border-top: 1px solid #D5E2F2; }
body.single-product .nxc-spec-group__title { background: var(--nxc-tint); border-bottom: 1px solid #D5E2F2; padding: 12px 16px; }
body.single-product .nxc-spec-group:not([open]) > .nxc-spec-group__title { border-bottom: 0; }
body.single-product .nxc-spec-group__title h3 { font-size: 18px; font-weight: 600; color: var(--nxc-text); }
body.single-product .nxc-spec-group__title .nxc-chev { color: var(--nxc-accent); }
body.single-product .nxc-spec-list { margin: 0; border-top: 0; border-left: 0; }
body.single-product .nxc-spec-row dt,
body.single-product .nxc-spec-row dd { border-right: 1px solid var(--nxc-line); border-bottom: 1px solid var(--nxc-line); }
body.single-product .nxc-spec-row dt { background: #F7F7F7; }
body.rtl.single-product .nxc-spec-row dt,
body.rtl.single-product .nxc-spec-row dd { border-right: 0; border-left: 1px solid var(--nxc-line); }

/* Overview: long descriptions fold to about 12 lines with "Read more" (product.js). */
body.single-product .nxc-overview__text.is-folded { max-height: 300px; overflow: hidden; position: relative; }
body.single-product .nxc-overview__text.is-folded::after {
	content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 80px;
	background: linear-gradient(rgba(255, 255, 255, 0), #fff); pointer-events: none;
}
body.single-product .nxc-readmore {
	margin-top: 12px; padding: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important;
	color: var(--nxc-accent) !important; font: 600 14px/1.4 inherit; cursor: pointer;
}

/* Phone bar: compact − qty + next to Add to cart (product.js). */
body.single-product .nxc-mbar__qty { display: flex; align-items: center; border: 1px solid #C9D2DE; border-radius: 10px; overflow: hidden; flex: 0 0 auto; }
body.single-product .nxc-mbar__qty button { width: 32px; height: 44px; border: 0 !important; background: #fff !important; color: var(--nxc-text) !important; font-size: 18px; line-height: 1; padding: 0 !important; box-shadow: none !important; }
body.single-product .nxc-mbar__qty span { min-width: 24px; text-align: center; font-weight: 700; }
@media (max-width: 360px) { body.single-product .nxc-mbar__stock { display: none; } }

/* Documents: dark PDF badges, tinted "Download all". */
body.single-product #nxc-docs .nxc-sec__head .nxc-btn-outline { border: 0 !important; background: var(--nxc-tint) !important; color: var(--nxc-accent) !important; }

@media (max-width: 767px) {
	body.single-product div.product .summary .nxc-info h1.product_title { font-size: 20px !important; }
	body.single-product #nxc-specs,
	body.single-product #nxc-docs,
	body.single-product #nxc-system,
	body.single-product #nxc-reviews,
	body.single-product .nxc-overview__main,
	body.single-product .nxc-inbox,
	body.single-product .nxc-faq,
	body.single-product .nxc-project { padding: 18px; }
	body.single-product div.product > .nx-product-visual { padding: 12px; }
	body.single-product .nxc-secbar { border-radius: 0; padding: 4px 12px; }
	body.single-product .nxc-secbar__links a { padding: 10px 14px !important; font-size: 15px; }
	body.single-product .nxc-buybox .price { font-size: 26px !important; }
}