/* ==========================================================================
   Onyx Renewal — site-wide theming
   Loads on every page alongside onyx-home.css, which supplies the design
   tokens, the header/footer/flyout components and the button styles.
   This sheet dresses everything WordPress and WooCommerce render themselves:
   the shop, single product, cart, checkout and account screens.

   1  Page shell + typography
   2  Breadcrumbs + notices
   3  Single product
   4  Product details / tabs
   5  Product grids (shop, related)
   6  Cart
   7  Checkout
   8  My account
   9  Forms, buttons, tables
   ========================================================================== */

/* --------------------------------------------------------------------------
   1 Page shell + typography
   -------------------------------------------------------------------------- */

/* onyx-home.css strips the theme's root padding so the home sections can run
   full-bleed. Inner pages need that gutter back, on the same rhythm. */
body:not(.home) main.wp-block-group,
body:not(.home) main.wp-block-template-part {
	box-sizing: border-box;
	max-width: calc(var(--onyx-max) + 2 * var(--onyx-pad));
	margin-inline: auto;
	padding: clamp(32px, 4vw, 56px) var(--onyx-pad) clamp(72px, 9vw, 120px);
}

/* The theme constrains inner content to a reading measure, which is far too
   narrow for a product layout. Our own container does the constraining. */
body:not(.home) {
	--wp--style--global--content-size: 100%;
	--wp--style--global--wide-size: 100%;
}

body:not(.home) main a {
	color: var(--onyx-accent);
	text-decoration: none;
}

body:not(.home) main a:hover {
	color: #8cc4f0;
}

body:not(.home) main h1,
body:not(.home) main h2,
body:not(.home) main h3,
body:not(.home) main h4 {
	font-family: "Montserrat", sans-serif;
	font-weight: 300;
	letter-spacing: -0.01em;
	color: #fff;
}

body:not(.home) main h1,
body:not(.home) main .wp-block-post-title {
	margin: 0;
	font-size: clamp(30px, 3.6vw, 52px);
	line-height: 1.06;
}

body:not(.home) main h2 {
	font-size: clamp(24px, 2.6vw, 34px);
	line-height: 1.15;
}

body:not(.home) main h3 {
	font-size: 19px;
	font-weight: 500;
	line-height: 1.3;
}

body:not(.home) main p,
body:not(.home) main li {
	color: var(--onyx-muted);
	font-size: 15.5px;
	line-height: 1.75;
}

/* --------------------------------------------------------------------------
   2 Breadcrumbs + notices
   -------------------------------------------------------------------------- */

.wc-block-breadcrumbs,
.woocommerce-breadcrumb {
	margin: 0 0 clamp(24px, 3vw, 40px);
	font-family: "Inter", sans-serif;
	font-size: 11.5px;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	color: #6b7887;
}

.wc-block-breadcrumbs a,
.woocommerce-breadcrumb a {
	color: #98a2ae;
}

.wc-block-breadcrumbs a:hover,
.woocommerce-breadcrumb a:hover {
	color: var(--onyx-accent);
}

.woocommerce-notices-wrapper .woocommerce-message,
.woocommerce-notices-wrapper .woocommerce-info,
.woocommerce-notices-wrapper .woocommerce-error,
.wc-block-components-notice-banner {
	margin: 0 0 24px;
	padding: 16px 20px;
	border: 1px solid rgba(88, 168, 232, 0.3);
	border-radius: 12px;
	background: rgba(88, 168, 232, 0.08);
	color: #d9e0e8;
	font-size: 14.5px;
}

.wc-block-components-notice-banner.is-error,
.woocommerce-notices-wrapper .woocommerce-error {
	border-color: rgba(224, 123, 123, 0.35);
	background: rgba(224, 123, 123, 0.1);
	color: #f0a8a8;
}

/* --------------------------------------------------------------------------
   3 Single product
   -------------------------------------------------------------------------- */

.wp-block-woocommerce-product-image-gallery,
.woocommerce-product-gallery {
	margin: 0;
}

/* Same treatment as the catalogue cards on the home page: a soft radial
   panel behind the vial, hairline border, 20px radius. */
.woocommerce-product-gallery__wrapper,
.woocommerce-product-gallery__image,
.wp-block-woocommerce-product-image img,
.woocommerce-product-gallery img {
	border-radius: 20px;
}

.woocommerce-product-gallery__image {
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, 0.09);
	background: radial-gradient(
		ellipse 45.45% 45.45% at 50% 61.82%,
		#1a2636 0%,
		#121a24 27.5%,
		#0b0e12 55%,
		#030405 100%
	);
}

.woocommerce-product-gallery img {
	display: block;
	width: 100%;
	height: auto;
}

/* Summary column */
.wp-block-woocommerce-product-price,
.woocommerce-product-price,
.wc-block-components-product-price {
	display: block;
	font-family: "Montserrat", sans-serif;
	font-weight: 300;
	font-size: 34px;
	letter-spacing: -0.01em;
	color: #fff;
}

.wc-block-components-product-price__value,
.woocommerce-Price-amount {
	color: #fff;
}

.wp-block-post-excerpt,
.wp-block-post-excerpt__excerpt {
	margin-block: 20px 0;
	font-size: 16px;
	line-height: 1.75;
	color: var(--onyx-muted);
}

.wp-block-woocommerce-product-meta,
.wp-block-woocommerce-product-sku,
.product_meta {
	margin-top: 26px;
	padding-top: 22px;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 10.5px;
	letter-spacing: 0.7px;
	color: #6b7887;
}

.wp-block-post-terms a,
.product_meta a {
	color: var(--onyx-accent);
}

/* --------------------------------------------------------------------------
   4 Product details / tabs
   -------------------------------------------------------------------------- */

.wp-block-woocommerce-product-details,
.woocommerce-tabs {
	margin-top: clamp(56px, 7vw, 96px);
	padding-top: clamp(32px, 4vw, 48px);
	border-top: 1px solid rgba(255, 255, 255, 0.09);
}

.woocommerce-tabs ul.tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0 0 28px;
	padding: 0;
	list-style: none;
}

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

.woocommerce-tabs ul.tabs li a {
	display: inline-flex;
	padding: 11px 20px;
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 100px;
	background: rgba(255, 255, 255, 0.03);
	font-family: "Montserrat", sans-serif;
	font-weight: 600;
	font-size: 11px;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	color: #b8c2cc;
}

.woocommerce-tabs ul.tabs li.active a,
.woocommerce-tabs ul.tabs li a:hover {
	border-color: rgba(88, 168, 232, 0.45);
	background: rgba(88, 168, 232, 0.12);
	color: var(--onyx-accent);
}

.woocommerce-Tabs-panel h2 {
	margin-top: 0;
}

/* --------------------------------------------------------------------------
   5 Product grids (shop archive + related products)
   -------------------------------------------------------------------------- */

.wp-block-woocommerce-product-collection,
.wc-block-grid,
.woocommerce ul.products {
	margin-top: clamp(40px, 5vw, 64px);
}

.wc-block-product-template,
.wp-block-post-template,
.wc-block-grid__products,
.woocommerce ul.products {
	display: grid !important;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 26px 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.wc-block-product-template li,
.wp-block-post-template li,
.wc-block-grid__product,
.woocommerce ul.products li.product {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, 0.09);
	border-radius: 20px;
	background: #0a0c0f;
	overflow: hidden;
	list-style: none;
	transition: transform 0.28s cubic-bezier(0.22, 0.61, 0.36, 1),
		box-shadow 0.28s ease, border-color 0.28s ease;
}

.wc-block-product-template li:hover,
.wp-block-post-template li:hover,
.wc-block-grid__product:hover,
.woocommerce ul.products li.product:hover {
	transform: scale(1.03);
	border-color: rgba(88, 168, 232, 0.28);
	box-shadow: 0 0 38px rgba(88, 168, 232, 0.28);
}

.wc-block-components-product-image,
.wc-block-grid__product-image,
.woocommerce ul.products li.product a img {
	display: block;
	margin: 0;
	border-radius: 0;
	background: radial-gradient(
		ellipse 45.45% 45.45% at 50% 61.82%,
		#1a2636 0%,
		#121a24 27.5%,
		#0b0e12 55%,
		#030405 100%
	);
}

.wc-block-components-product-image img,
.woocommerce ul.products li.product img {
	width: 100%;
	height: auto;
	border-radius: 0;
}

.wc-block-components-product-title,
.wc-block-grid__product-title,
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	margin: 0;
	padding: 22px 22px 0;
	font-family: "Montserrat", sans-serif;
	font-weight: 500;
	font-size: 16px;
	line-height: 1.35;
	color: #fff;
}

.wc-block-product-template .wc-block-components-product-price,
.wc-block-grid__product-price,
.woocommerce ul.products li.product .price {
	display: block;
	padding: 12px 22px 0;
	font-size: 24px;
}

.wc-block-product-template .wp-block-woocommerce-product-button,
.wc-block-grid__product-add-to-cart,
.woocommerce ul.products li.product .button {
	margin: 18px 22px 22px;
}

/* --------------------------------------------------------------------------
   6 Cart
   -------------------------------------------------------------------------- */

.wc-block-cart,
.woocommerce-cart-form {
	color: #d9e0e8;
}

.wc-block-cart-items,
.woocommerce-cart-form table.shop_table {
	width: 100%;
	border-collapse: collapse;
}

.wc-block-cart-items th,
.woocommerce-cart-form table.shop_table th {
	padding: 0 0 16px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
	font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
	font-weight: 500;
	font-size: 10px;
	letter-spacing: 0.8px;
	text-transform: uppercase;
	color: #6b7887;
	text-align: left;
}

.wc-block-cart-items td,
.woocommerce-cart-form table.shop_table td {
	padding: 22px 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.07);
	vertical-align: middle;
}

.wc-block-cart-item__image img,
.woocommerce-cart-form .product-thumbnail img {
	width: 76px;
	height: 76px;
	object-fit: cover;
	border: 1px solid rgba(255, 255, 255, 0.07);
	border-radius: 12px;
	background: #0b0e12;
}

.wc-block-components-product-name {
	font-family: "Montserrat", sans-serif;
	font-weight: 500;
	font-size: 15px;
	color: #fff;
}

.wc-block-cart__totals-title,
.wc-block-components-totals-wrapper,
.cart_totals {
	border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.wc-block-components-totals-item {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	padding: 12px 0;
	font-size: 14.5px;
	color: var(--onyx-muted);
}

.wc-block-components-totals-footer-item {
	font-family: "Montserrat", sans-serif;
	font-size: 20px;
	color: #fff;
}

/* --------------------------------------------------------------------------
   7 Checkout
   -------------------------------------------------------------------------- */

.wc-block-checkout__form,
.woocommerce-checkout .col2-set,
.wc-block-components-checkout-step {
	color: #d9e0e8;
}

.wc-block-components-checkout-step__title,
.woocommerce-checkout h3 {
	font-family: "Montserrat", sans-serif;
	font-weight: 600;
	font-size: 14px;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	color: #fff;
}

.wc-block-components-checkout-step__description {
	color: #6b7887;
	font-size: 13.5px;
}

.wc-block-checkout__sidebar,
.woocommerce-checkout-review-order {
	padding: 26px;
	border: 1px solid rgba(255, 255, 255, 0.09);
	border-radius: 20px;
	background: #0a0c0f;
}

/* --------------------------------------------------------------------------
   8 My account
   -------------------------------------------------------------------------- */

.woocommerce-MyAccount-navigation ul {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0 0 32px;
	padding: 0;
	list-style: none;
}

.woocommerce-MyAccount-navigation li a {
	display: inline-flex;
	padding: 11px 20px;
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 100px;
	background: rgba(255, 255, 255, 0.03);
	font-family: "Montserrat", sans-serif;
	font-weight: 600;
	font-size: 11px;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	color: #b8c2cc;
}

.woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-MyAccount-navigation li a:hover {
	border-color: rgba(88, 168, 232, 0.45);
	background: rgba(88, 168, 232, 0.12);
	color: var(--onyx-accent);
}

/* --------------------------------------------------------------------------
   9 Forms, buttons, tables
   -------------------------------------------------------------------------- */

body:not(.home) input[type="text"],
body:not(.home) input[type="email"],
body:not(.home) input[type="tel"],
body:not(.home) input[type="password"],
body:not(.home) input[type="number"],
body:not(.home) input[type="search"],
body:not(.home) select,
body:not(.home) textarea,
.wc-block-components-text-input input,
.wc-block-components-select__container {
	width: 100%;
	padding: 14px 16px;
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.03);
	font-family: "Inter", sans-serif;
	font-size: 15px;
	color: #fff;
}

body:not(.home) input:focus,
body:not(.home) select:focus,
body:not(.home) textarea:focus,
.wc-block-components-text-input input:focus {
	outline: none;
	border-color: rgba(88, 168, 232, 0.6);
	box-shadow: 0 0 0 3px rgba(88, 168, 232, 0.15);
}

body:not(.home) label,
.wc-block-components-text-input label {
	font-family: "Inter", sans-serif;
	font-size: 13px;
	color: #98a2ae;
}

/* Every Woo call to action picks up the catalogue's solid blue pill. */
body:not(.home) .wp-block-button__link,
body:not(.home) .wc-block-components-button,
body:not(.home) button.button,
body:not(.home) a.button,
body:not(.home) input[type="submit"],
body:not(.home) button[type="submit"],
.wp-block-woocommerce-product-button a,
.wc-block-components-product-button a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 15px 26px;
	border: 0;
	border-radius: 100px;
	background: var(--onyx-accent);
	box-shadow: 0 6px 22px rgba(88, 168, 232, 0.35);
	font-family: "Montserrat", sans-serif;
	font-weight: 600;
	font-size: 11.5px;
	letter-spacing: 1.3px;
	text-transform: uppercase;
	color: #050d14 !important;
	cursor: pointer;
	transition: background-color 0.18s ease, box-shadow 0.18s ease;
}

body:not(.home) .wp-block-button__link:hover,
body:not(.home) .wc-block-components-button:hover,
body:not(.home) button.button:hover,
body:not(.home) a.button:hover,
.wp-block-woocommerce-product-button a:hover,
.wc-block-components-product-button a:hover {
	background: #74b8ee;
	box-shadow: 0 8px 28px rgba(88, 168, 232, 0.5);
	color: #050d14 !important;
}

/* Secondary/outline variants stay quiet. */
body:not(.home) .wc-block-components-button.outlined,
body:not(.home) a.button.wc-forward:not(.checkout-button),
body:not(.home) .woocommerce-MyAccount-content a.button.view {
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.18);
	box-shadow: none;
	color: #fff !important;
}

.wc-block-components-quantity-selector {
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 100px;
	background: rgba(255, 255, 255, 0.03);
	overflow: hidden;
}

.wc-block-components-quantity-selector input,
.quantity input.qty {
	width: 54px;
	padding: 10px 0;
	border: 0;
	background: none;
	text-align: center;
	font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 12px;
	color: #fff;
}

.wc-block-components-quantity-selector__button {
	border: 0;
	background: none;
	color: #98a2ae;
	cursor: pointer;
}

body:not(.home) table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14.5px;
	color: #d9e0e8;
}

body:not(.home) table th,
body:not(.home) table td {
	padding: 14px 12px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	text-align: left;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1400px) {
	.wc-block-product-template,
	.wp-block-post-template,
	.wc-block-grid__products,
	.woocommerce ul.products {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 960px) {
	.wc-block-product-template,
	.wp-block-post-template,
	.wc-block-grid__products,
	.woocommerce ul.products {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 781px) {
	/* The product columns stack; keep the gallery from eating the fold. */
	.wp-block-columns.alignwide > .wp-block-column:first-child {
		margin-bottom: 28px;
	}
}

@media (max-width: 560px) {
	.wc-block-product-template,
	.wp-block-post-template,
	.wc-block-grid__products,
	.woocommerce ul.products {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 14px 12px;
	}

	.wc-block-components-product-title,
	.wc-block-grid__product-title,
	.woocommerce ul.products li.product .woocommerce-loop-product__title {
		padding: 15px 15px 0;
		font-size: 13px;
	}

	.wc-block-product-template .wc-block-components-product-price,
	.wc-block-grid__product-price,
	.woocommerce ul.products li.product .price {
		padding: 8px 15px 0;
		font-size: 20px;
	}

	.wc-block-product-template .wp-block-woocommerce-product-button,
	.wc-block-grid__product-add-to-cart,
	.woocommerce ul.products li.product .button {
		margin: 14px 15px 15px;
	}
}

/* --------------------------------------------------------------------------
   10 Chrome outside .onyx-page

   onyx-home.css scopes its resets to .onyx-page / .onyx-drawer / .onyx-mnav,
   which is all the home page needed. Now that the header and footer render
   from template parts on every other page, they sit outside that wrapper and
   need the same treatment — otherwise links pick the browser's underline back
   up and Twenty Twenty-Five's white :focus outline returns.
   -------------------------------------------------------------------------- */

.onyx-nav,
.onyx-nav *,
.onyx-footer,
.onyx-footer * {
	box-sizing: border-box;
}

:where(.onyx-nav, .onyx-footer) a {
	color: inherit;
	text-decoration: none;
}

.onyx-nav img,
.onyx-nav svg,
.onyx-footer img,
.onyx-footer svg {
	display: block;
}

.onyx-nav,
.onyx-footer {
	-webkit-tap-highlight-color: transparent;
}

/* Pointer focus draws nothing; keyboard focus keeps the accent ring. */
body:not(.home) :focus:not(:focus-visible) {
	outline: none;
}

.onyx-nav a:focus-visible,
.onyx-nav button:focus-visible,
.onyx-footer a:focus-visible,
.onyx-footer button:focus-visible,
body:not(.home) main :focus-visible {
	outline: 2px solid var(--onyx-accent);
	outline-offset: 3px;
}

/* The SKU block sits inside the meta block, so both were drawing a rule. */
.wp-block-woocommerce-product-meta .wp-block-woocommerce-product-sku,
.wp-block-woocommerce-product-meta .wp-block-post-terms {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

/* WooCommerce's gallery ships a zoom trigger that inherits the button styling
   above; keep it as the small round control it is meant to be. */
.woocommerce-product-gallery__trigger {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	padding: 0 !important;
	border-radius: 50% !important;
	background: rgba(10, 12, 15, 0.9) !important;
	border: 1px solid rgba(255, 255, 255, 0.14) !important;
	box-shadow: none !important;
}

/* --------------------------------------------------------------------------
   11 Product Collection layout reset

   WooCommerce's Product Collection ships its own flex layout and stamps
   `is-flex-container columns-N` on the list, which sets an explicit width on
   each item. Laying the list out as a grid (section 5) left those widths in
   place and every card collapsed to ~49px. The grid cell should decide the
   width, so the item-level sizing is released here.
   -------------------------------------------------------------------------- */

.wc-block-product-template > li,
.wp-block-post-template > li,
.wc-block-grid__products > li {
	width: auto !important;
	max-width: none !important;
	margin: 0 !important;
	flex: 1 1 auto;
}

/* The card is a column: image, then title/price/button stacked beneath. */
.wc-block-product-template > li > *,
.wp-block-post-template > li > * {
	width: 100%;
}

/* Push the add-to-cart to the bottom so uneven titles still line up. */
.wc-block-product-template > li .wp-block-woocommerce-product-button,
.wp-block-post-template > li .wp-block-woocommerce-product-button {
	margin-top: auto;
}

.wc-block-product-template > li .wc-block-components-product-image,
.wp-block-post-template > li .wc-block-components-product-image {
	margin: 0;
}

.wc-block-product-template > li img,
.wp-block-post-template > li img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 366 / 272;
	object-fit: cover;
}

/* --------------------------------------------------------------------------
   12 Product Collection card typography

   The real markup uses h3.wp-block-post-title with a link inside, and Woo
   stamps has-text-align-center on the block. Section 5 aimed at
   .wc-block-components-product-title, which this collection never renders.
   These target what is actually on the page and match the home catalogue:
   left aligned, white product name, price beneath.
   -------------------------------------------------------------------------- */

.wc-block-product-template > li .wp-block-post-title,
.wc-block-product-template > li .wp-block-woocommerce-product-price,
.wc-block-product-template > li .wp-block-woocommerce-product-button,
.wp-block-post-template > li .wp-block-post-title,
.wp-block-post-template > li .wp-block-woocommerce-product-price {
	text-align: left !important;
}

.wc-block-product-template > li .wp-block-post-title,
.wp-block-post-template > li .wp-block-post-title {
	margin: 0;
	padding: 22px 22px 0;
	font-family: "Montserrat", sans-serif;
	font-weight: 500;
	font-size: 16px !important;
	line-height: 1.35;
	color: #fff;
}

.wc-block-product-template > li .wp-block-post-title a,
.wp-block-post-template > li .wp-block-post-title a {
	color: #fff;
	transition: color 0.18s ease;
}

.wc-block-product-template > li .wp-block-post-title a:hover,
.wp-block-post-template > li .wp-block-post-title a:hover {
	color: var(--onyx-accent);
}

.wc-block-product-template > li .wp-block-woocommerce-product-price,
.wp-block-post-template > li .wp-block-woocommerce-product-price {
	padding: 12px 22px 0;
	font-size: 24px !important;
}

.wc-block-product-template > li .wp-block-woocommerce-product-button,
.wp-block-post-template > li .wp-block-woocommerce-product-button {
	margin: 18px 22px 22px;
}

/* Heading that sits above a collection ("Related products"). */
.wp-block-woocommerce-product-collection > h2,
.wp-block-woocommerce-product-collection > h3,
.wp-block-woocommerce-product-collection > .wp-block-heading {
	margin: 0;
	font-family: "Montserrat", sans-serif;
	font-weight: 300;
	font-size: clamp(24px, 2.6vw, 34px) !important;
	line-height: 1.15;
	letter-spacing: -0.01em;
	color: #fff;
}

/* --------------------------------------------------------------------------
   13 Grid column count

   The shop's collection carries `wc-block-product-template__responsive`, whose
   own grid-template-columns outranks section 5 and resolved to two 642px
   columns. The column count is forced here so shop, related products and any
   other collection all read as the same 4-up catalogue as the home page.
   -------------------------------------------------------------------------- */

.wc-block-product-template,
.wc-block-product-template__responsive,
.wp-block-post-template,
.wc-block-grid__products {
	grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

@media (max-width: 1400px) {
	.wc-block-product-template,
	.wc-block-product-template__responsive,
	.wp-block-post-template,
	.wc-block-grid__products {
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	}
}

@media (max-width: 960px) {
	.wc-block-product-template,
	.wc-block-product-template__responsive,
	.wp-block-post-template,
	.wc-block-grid__products {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
}

/* Shop toolbar: result count and the sort control. */
.woocommerce-result-count {
	margin: 0;
	font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 11px;
	letter-spacing: 0.7px;
	text-transform: uppercase;
	color: #6b7887;
}

.woocommerce-ordering select,
.wc-block-product-sort-select select {
	width: auto;
	min-width: 200px;
	padding: 12px 16px;
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 100px;
	background: rgba(255, 255, 255, 0.03);
	font-family: "Inter", sans-serif;
	font-size: 13.5px;
	color: #fff;
}

/* --------------------------------------------------------------------------
   14 Editorial pages (Wholesale, Contact Us)
   -------------------------------------------------------------------------- */

body:not(.home) main .onyx-eyebrow {
	margin: 0 0 18px;
}

body:not(.home) main .onyx-lede {
	max-width: 720px;
	margin: 22px 0 0;
	font-size: clamp(17px, 1.6vw, 20px);
	line-height: 1.65;
	color: var(--onyx-muted);
}

body:not(.home) main .onyx-prose {
	max-width: 760px;
	margin-top: clamp(40px, 5vw, 64px);
}

body:not(.home) main .onyx-prose h2 {
	margin: clamp(34px, 4vw, 52px) 0 14px;
	padding-top: clamp(28px, 3.5vw, 40px);
	border-top: 1px solid rgba(255, 255, 255, 0.09);
	font-family: "Montserrat", sans-serif;
	font-weight: 600;
	font-size: 14px;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	color: #fff;
}

body:not(.home) main .onyx-prose h2:first-child {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

body:not(.home) main .onyx-prose ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

body:not(.home) main .onyx-prose li {
	position: relative;
	padding: 0 0 12px 22px;
}

body:not(.home) main .onyx-prose li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 11px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--onyx-accent);
}

body:not(.home) main .onyx-prose .onyx-btn {
	margin-top: 8px;
}

/* Details that still need supplying — deliberately obvious so they are not
   shipped by accident. */
body:not(.home) main .onyx-placeholder {
	padding: 14px 18px;
	border: 1px dashed rgba(88, 168, 232, 0.45);
	border-radius: 12px;
	background: rgba(88, 168, 232, 0.07);
	color: #d9e0e8;
}

body:not(.home) main .onyx-placeholder strong {
	color: var(--onyx-accent);
}


/* ==========================================================================
   15. SHARED TEMPLATE-PART WRAPPERS
   --------------------------------------------------------------------------
   The header and footer now live in wp_template_part records so every
   template renders the same chrome. WordPress wraps each part in its own
   <header>/<footer class="wp-block-template-part"> element, and that box is
   only as tall as the bar inside it — a position: sticky child cannot travel
   beyond its parent's box, so the wrapper (not the stylesheet) was killing
   the sticky nav.

   display: contents drops the wrapper from the box tree entirely and hands
   .onyx-nav straight back to .wp-site-blocks as its containing block, which
   is the full document height. The parts carry no styling of their own, so
   nothing is lost by removing their boxes.
   ========================================================================== */

header.wp-block-template-part,
footer.wp-block-template-part {
	display: contents;
}


/* ==========================================================================
   16. SHOP CARD = HOME CARD
   --------------------------------------------------------------------------
   The Shop archive now renders through a wp_template (slug archive-product)
   whose Product Collection is built to the same shape as the home catalogue:

       image  ->  info { name, spec, buy { price, add-to-cart } }

   Everything below restates the .onyx-card rules from onyx-home.css against
   the block classes Woo actually outputs, so the two grids are the same card.
   Values are copied from sections 7 and 17 of onyx-home.css — if that card is
   retuned, retune it here too.

   Sections 5, 11, 12 and 13 above styled the previous (unstructured) shop
   grid. They still apply to any other collection on the site — related
   products on a single product page — so they are left in place, and the
   rules here are written to win on the shop's .onyx-collection.
   ========================================================================== */

/* --- Grid ---------------------------------------------------------------- */

.onyx-collection .wc-block-product-template,
.onyx-collection .wc-block-product-template__responsive {
	display: grid !important;
	grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
	gap: 26px 24px !important;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* --- The card ------------------------------------------------------------ */

/* No overflow:hidden — it would clip the neon ring. The image corners are
   clipped on the media block instead, exactly as on the home card. */
.onyx-collection .wc-block-product-template > li {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0;
	margin: 0 !important;
	padding: 0;
	width: auto !important;
	max-width: none !important;
	border: 1px solid rgba(255, 255, 255, 0.09);
	border-radius: 20px;
	background: #0a0c0f;
	box-shadow: none;
	overflow: visible;
	list-style: none;
	transition: transform 0.28s cubic-bezier(0.22, 0.61, 0.36, 1),
		box-shadow 0.28s ease, border-color 0.28s ease;
}

/* The rotating stroke. --onyx-spin and the keyframes are registered in
   onyx-home.css, which loads on every page. Paused until hover so twelve
   conic gradients never animate at once. */
.onyx-collection .wc-block-product-template > li::before {
	content: "";
	position: absolute;
	inset: -1px;
	padding: 2px;
	border-radius: 21px;
	background: conic-gradient(
		from var(--onyx-spin),
		rgba(88, 168, 232, 0) 0deg,
		rgba(88, 168, 232, 0) 45deg,
		#58a8e8 100deg,
		#dcefff 125deg,
		#58a8e8 150deg,
		rgba(88, 168, 232, 0) 205deg,
		rgba(88, 168, 232, 0) 360deg
	);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	mask-composite: exclude;
	animation: onyx-spin 4s linear infinite;
	animation-play-state: paused;
	opacity: 0;
	transition: opacity 0.28s ease;
	pointer-events: none;
	z-index: 1;
}

.onyx-collection .wc-block-product-template > li:hover,
.onyx-collection .wc-block-product-template > li:focus-within {
	z-index: 2;
	transform: scale(1.035);
	border-color: rgba(88, 168, 232, 0.28);
	box-shadow: 0 0 38px rgba(88, 168, 232, 0.28);
}

.onyx-collection .wc-block-product-template > li:hover::before,
.onyx-collection .wc-block-product-template > li:focus-within::before {
	opacity: 0.9;
	animation-play-state: running;
}

/* --- Media --------------------------------------------------------------- */

.onyx-collection .onyx-c-media,
.onyx-collection .wc-block-components-product-image {
	position: relative;
	display: block;
	margin: 0 !important;
	overflow: hidden;
	aspect-ratio: 366 / 272;
	border-radius: 19px 19px 0 0;
	background: radial-gradient(
		ellipse 45.45% 45.45% at 50% 61.82%,
		#1a2636 0%,
		#121a24 27.5%,
		#0b0e12 55%,
		#030405 100%
	);
}

.onyx-collection .wc-block-components-product-image a,
.onyx-collection .wc-block-components-product-image picture {
	display: block;
	height: 100%;
}

.onyx-collection .wc-block-components-product-image img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border-radius: 0;
	object-fit: cover;
	aspect-ratio: auto;
}

/* --- Info column --------------------------------------------------------- */

.onyx-collection .onyx-c-info {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	gap: 0;
	padding: 26px;
}

.onyx-collection .onyx-c-name {
	margin: 0 !important;
	padding: 0 !important;
	font-family: "Montserrat", sans-serif;
	font-weight: 500;
	font-size: 16.5px !important;
	line-height: 1.35;
	letter-spacing: 0.165px;
	text-align: left !important;
	color: #fff;
}

.onyx-collection .onyx-c-name a {
	color: #fff;
	text-decoration: none;
	transition: color 0.18s ease;
}

.onyx-collection .onyx-c-name a:hover {
	color: var(--onyx-accent);
}

/* Stands in for the home card's "30 MG · LYOPHILISED VIAL" line. The Woo
   product title already carries the dosage, so this shows the category —
   same mono treatment, real data behind it. */
.onyx-collection .onyx-c-spec {
	margin: 9px 0 0 !important;
	padding: 0 !important;
	font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
	font-weight: 500;
	font-size: 10px;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	line-height: 1.4;
	color: #6b7887;
}

.onyx-collection .onyx-c-spec a {
	color: inherit;
	text-decoration: none;
}

.onyx-collection .onyx-c-spec a:hover {
	color: var(--onyx-accent);
}

/* --- Buy row ------------------------------------------------------------- */

.onyx-collection .onyx-c-buy {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin: 0;
	margin-top: auto;
	padding: 22px 0 0;
}

.onyx-collection .onyx-c-price,
.onyx-collection .onyx-c-price .wc-block-components-product-price__value {
	margin: 0 !important;
	padding: 0 !important;
	font-family: "Montserrat", sans-serif;
	font-weight: 300;
	font-size: 27px !important;
	line-height: 1.1;
	letter-spacing: -0.01em;
	text-align: left !important;
	color: #fff;
}

.onyx-collection .onyx-c-add {
	margin: 0 !important;
	padding: 0 !important;
}

.onyx-collection .onyx-c-add a,
.onyx-collection .onyx-c-add button,
.onyx-collection .onyx-c-add .wc-block-components-product-button__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: auto;
	padding: 14px 22px;
	border: 0;
	border-radius: 100px;
	background: var(--onyx-accent);
	box-shadow: 0 6px 22px rgba(88, 168, 232, 0.35);
	font-family: "Montserrat", sans-serif;
	font-weight: 600;
	font-size: 10.5px !important;
	letter-spacing: 1.26px;
	line-height: 1;
	text-transform: uppercase;
	white-space: nowrap;
	color: #050d14 !important;
	transition: background-color 0.18s ease, box-shadow 0.18s ease;
}

.onyx-collection .onyx-c-add a:hover,
.onyx-collection .onyx-c-add button:hover {
	background: #74b8ee;
	box-shadow: 0 8px 28px rgba(88, 168, 232, 0.5);
}

/* --- Shop toolbar + pagination ------------------------------------------- */

.onyx-shopbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	margin: clamp(28px, 3.5vw, 44px) 0 0;
}

.onyx-collection {
	margin-top: clamp(40px, 5vw, 54px);
}

.onyx-collection .wp-block-query-pagination {
	margin-top: 48px;
	gap: 8px;
}

.onyx-collection .wp-block-query-pagination a,
.onyx-collection .wp-block-query-pagination span {
	padding: 9px 14px;
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 100px;
	font-family: "Inter", sans-serif;
	font-size: 12.5px;
	color: #b8c2cc;
}

.onyx-collection .wp-block-query-pagination .current {
	border-color: rgba(88, 168, 232, 0.45);
	background: rgba(88, 168, 232, 0.12);
	color: var(--onyx-accent);
}

/* --- Responsive: mirrors onyx-home.css sections 17 and the 560px block --- */

@media (max-width: 1400px) {
	.onyx-collection .wc-block-product-template,
	.onyx-collection .wc-block-product-template__responsive {
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	}
}

@media (max-width: 960px) {
	.onyx-collection .wc-block-product-template,
	.onyx-collection .wc-block-product-template__responsive {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
}

@media (max-width: 560px) {
	.onyx-collection .wc-block-product-template,
	.onyx-collection .wc-block-product-template__responsive {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 14px 12px !important;
	}

	.onyx-collection .onyx-c-info {
		padding: 15px;
	}

	.onyx-collection .onyx-c-name {
		font-size: 13px !important;
		line-height: 1.3;
	}

	.onyx-collection .onyx-c-spec {
		margin-top: 7px !important;
		font-size: 8.5px;
		letter-spacing: 0.4px;
	}

	.onyx-collection .onyx-c-buy {
		flex-direction: column;
		align-items: stretch;
		gap: 12px;
		padding-top: 16px;
	}

	.onyx-collection .onyx-c-price,
	.onyx-collection .onyx-c-price .wc-block-components-product-price__value {
		font-size: 21px !important;
	}

	.onyx-collection .onyx-c-add a,
	.onyx-collection .onyx-c-add button {
		width: 100%;
		padding: 12px 14px;
		font-size: 9.5px !important;
		letter-spacing: 1px;
	}

	.onyx-shopbar {
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.onyx-collection .wc-block-product-template > li:hover,
	.onyx-collection .wc-block-product-template > li:focus-within {
		transform: none;
	}

	.onyx-collection .wc-block-product-template > li::before {
		animation: none;
	}
}


/* ==========================================================================
   17. SHOP CARD — SPECIFICITY CORRECTIONS
   --------------------------------------------------------------------------
   Sections 5, 12 and 13 style every product collection on the site and reach
   the same elements through `.wc-block-product-template > li ...`, which
   out-specifies section 16's `.onyx-collection ...` selectors — several of
   them with !important. The result was a 16px name instead of 16.5px, a 24px
   price carrying section 12's 12px/22px padding (hence the indent under the
   product name), and a stray top margin on the add-to-cart button that broke
   the baseline against the price.

   These restate the shop card's values at a weight that wins. Fold sections
   5/12/13 down to non-shop collections next time this sheet is re-cut.
   ========================================================================== */

body .onyx-collection .wc-block-product-template > li .onyx-c-name,
body .onyx-collection .wc-block-product-template > li .wp-block-post-title {
	margin: 0 !important;
	padding: 0 !important;
	font-size: 16.5px !important;
	line-height: 1.35;
	letter-spacing: 0.165px;
	text-align: left !important;
}

body .onyx-collection .wc-block-product-template > li .onyx-c-spec {
	margin: 9px 0 0 !important;
	padding: 0 !important;
	font-size: 10px !important;
	text-align: left !important;
}

body .onyx-collection .wc-block-product-template > li .wp-block-woocommerce-product-price,
body .onyx-collection .wc-block-product-template > li .wc-block-components-product-price {
	display: block;
	margin: 0 !important;
	padding: 0 !important;
	font-family: "Montserrat", sans-serif;
	font-weight: 300;
	font-size: 27px !important;
	line-height: 1.1;
	letter-spacing: -0.01em;
	text-align: left !important;
	color: #fff;
}

body .onyx-collection .wc-block-product-template > li .woocommerce-Price-amount,
body .onyx-collection .wc-block-product-template > li .wc-block-components-product-price__value {
	font: inherit;
	color: inherit;
}

body .onyx-collection .wc-block-product-template > li .wp-block-woocommerce-product-button {
	margin: 0 !important;
	padding: 0 !important;
	line-height: 1;
}

body .onyx-collection .wc-block-product-template > li .wp-block-woocommerce-product-button a,
body .onyx-collection .wc-block-product-template > li .wc-block-components-product-button__button {
	margin: 0 !important;
	padding: 14px 22px !important;
	font-size: 10.5px !important;
	line-height: 1 !important;
}

/* The buy row is the card's baseline: price left, pill right, both centred
   on the same axis — matching .onyx-card__buy on the home page. */
body .onyx-collection .wc-block-product-template > li .onyx-c-buy {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: auto;
	padding: 22px 0 0;
}

@media (max-width: 560px) {
	body .onyx-collection .wc-block-product-template > li .onyx-c-name,
	body .onyx-collection .wc-block-product-template > li .wp-block-post-title {
		font-size: 13px !important;
		line-height: 1.3;
	}

	body .onyx-collection .wc-block-product-template > li .onyx-c-spec {
		margin-top: 7px !important;
		font-size: 8.5px !important;
		letter-spacing: 0.4px;
	}

	body .onyx-collection .wc-block-product-template > li .wp-block-woocommerce-product-price,
	body .onyx-collection .wc-block-product-template > li .wc-block-components-product-price {
		font-size: 21px !important;
	}

	body .onyx-collection .wc-block-product-template > li .onyx-c-buy {
		flex-direction: column;
		align-items: stretch;
		padding-top: 16px;
	}

	body .onyx-collection .wc-block-product-template > li .wp-block-woocommerce-product-button a,
	body .onyx-collection .wc-block-product-template > li .wc-block-components-product-button__button {
		width: 100%;
		padding: 12px 14px !important;
		font-size: 9.5px !important;
		letter-spacing: 1px;
	}
}


/* ==========================================================================
   18. FLUENT FORMS — ONYX TREATMENT
   --------------------------------------------------------------------------
   The Wholesale and Contact Us forms are Fluent Forms shortcodes wrapped in
   .onyx-formcard. Fluent Forms ships its own light-theme stylesheet, so this
   section overrides it rather than adding to it: the panel matches the tiles
   on the home page, the fields match the checkout/account inputs from
   section 9, and the submit button is the catalogue's solid blue pill.

   Scoped to .onyx-formcard so nothing here leaks into the Fluent Forms admin
   preview or any form embedded elsewhere later.
   ========================================================================== */

.onyx-formcard {
	box-sizing: border-box;
	max-width: 760px;
	margin: clamp(36px, 4.5vw, 56px) 0 clamp(40px, 5vw, 64px);
	padding: clamp(26px, 3.2vw, 40px);
	border: 1px solid rgba(255, 255, 255, 0.09);
	border-radius: 20px;
	background: #0a0c0f;
}

.onyx-formcard * {
	box-sizing: border-box;
}

/* Fluent Forms lays groups out with its own margins; reset to one rhythm. */
.onyx-formcard .ff-el-group {
	margin: 0 0 22px;
}

.onyx-formcard .ff-el-group:last-of-type {
	margin-bottom: 0;
}

.onyx-formcard .ff-el-input--label {
	margin: 0 0 9px;
	padding: 0;
}

.onyx-formcard .ff-el-input--label label {
	font-family: "Inter", sans-serif;
	font-weight: 500;
	font-size: 12.5px;
	letter-spacing: 0.2px;
	color: #98a2ae;
}

/* The required marker reads as an accent cue, not an error. */
.onyx-formcard .ff-el-is-required.asterisk-right label:after,
.onyx-formcard .ff-el-is-required.asterisk-left label:before {
	color: var(--onyx-accent);
	opacity: 0.9;
}

.onyx-formcard .ff-el-form-control {
	width: 100%;
	padding: 14px 16px;
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.03);
	box-shadow: none;
	font-family: "Inter", sans-serif;
	font-size: 15px;
	line-height: 1.5;
	color: #fff;
	transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.onyx-formcard textarea.ff-el-form-control {
	min-height: 150px;
	resize: vertical;
}

.onyx-formcard .ff-el-form-control::placeholder {
	color: #5d6875;
}

.onyx-formcard .ff-el-form-control:focus {
	outline: none;
	border-color: rgba(88, 168, 232, 0.6);
	box-shadow: 0 0 0 3px rgba(88, 168, 232, 0.15);
}

/* Chrome paints a light autofill background that wrecks the panel. */
.onyx-formcard .ff-el-form-control:-webkit-autofill,
.onyx-formcard .ff-el-form-control:-webkit-autofill:focus {
	-webkit-text-fill-color: #fff;
	-webkit-box-shadow: 0 0 0 1000px #10161d inset;
	caret-color: #fff;
}

.onyx-formcard .ff-el-help-message {
	margin-top: 7px;
	font-family: "Inter", sans-serif;
	font-size: 12.5px;
	color: #6b7887;
}

/* Validation */
.onyx-formcard .ff-el-is-error .ff-el-form-control,
.onyx-formcard .ff-el-form-control.ff-el-is-error {
	border-color: rgba(224, 123, 123, 0.55);
	background: rgba(224, 123, 123, 0.06);
}

.onyx-formcard .error.text-danger,
.onyx-formcard .ff-el-is-error .error {
	margin-top: 7px;
	font-family: "Inter", sans-serif;
	font-size: 12.5px;
	color: #f0a8a8;
}

/* Submit — the catalogue pill, matching .onyx-add exactly. */
.onyx-formcard .ff_submit_btn_wrapper {
	margin: 30px 0 0;
	padding-top: 26px;
	border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.onyx-formcard .ff-btn-submit,
.onyx-formcard button.ff-btn-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: auto;
	padding: 15px 26px !important;
	border: 0 !important;
	border-radius: 100px !important;
	background: var(--onyx-accent) !important;
	box-shadow: 0 6px 22px rgba(88, 168, 232, 0.35);
	font-family: "Montserrat", sans-serif !important;
	font-weight: 600 !important;
	font-size: 11.5px !important;
	letter-spacing: 1.3px !important;
	line-height: 1 !important;
	text-transform: uppercase;
	color: #050d14 !important;
	cursor: pointer;
	transition: background-color 0.18s ease, box-shadow 0.18s ease;
}

.onyx-formcard .ff-btn-submit:hover {
	background: #74b8ee !important;
	box-shadow: 0 8px 28px rgba(88, 168, 232, 0.5);
}

.onyx-formcard .ff-btn-submit:disabled,
.onyx-formcard .ff-btn-submit.ff_working {
	opacity: 0.55;
	pointer-events: none;
}

/* Success / failure banners after submit. */
.onyx-formcard .ff-message-success,
.onyx-formcard .ff_submit_success {
	padding: 18px 20px;
	border: 1px solid rgba(88, 168, 232, 0.35);
	border-radius: 14px;
	background: rgba(88, 168, 232, 0.08);
	font-family: "Inter", sans-serif;
	font-size: 15px;
	line-height: 1.6;
	color: #d9e0e8;
}

.onyx-formcard .ff-errors-in-stack,
.onyx-formcard .ff_submit_failed {
	padding: 16px 20px;
	border: 1px solid rgba(224, 123, 123, 0.4);
	border-radius: 14px;
	background: rgba(224, 123, 123, 0.09);
	font-family: "Inter", sans-serif;
	font-size: 14.5px;
	color: #f0a8a8;
}

/* Fluent Forms' own two-column rows, if any are added later. */
.onyx-formcard .ff-t-cell {
	padding: 0 10px;
}

.onyx-formcard .ff-t-container {
	margin: 0 -10px;
}

@media (max-width: 560px) {
	.onyx-formcard {
		padding: 20px;
		border-radius: 16px;
	}

	.onyx-formcard .ff-btn-submit {
		width: 100%;
	}
}


/* ==========================================================================
   19. FLUENT FORMS — FOCUS STATE CORRECTION
   --------------------------------------------------------------------------
   Fluent Forms' own sheet carries a :focus rule that repaints the control
   white with #606266 text. Section 18's focus rule only set the border and
   ring, so a focused field flashed to a white box on this dark panel — the
   same failure mode as the search field on the home page.

   Restating background and colour here holds the field dark while it is
   being typed in. The asterisk selector is also widened: Fluent Forms puts
   `asterisk-right` on the label wrapper on some field types and on the label
   itself on others.
   ========================================================================== */

.onyx-formcard .ff-el-form-control:focus,
.onyx-formcard .ff-el-form-control:focus-visible,
.onyx-formcard input.ff-el-form-control:focus,
.onyx-formcard textarea.ff-el-form-control:focus,
.onyx-formcard select.ff-el-form-control:focus {
	background: #10161d !important;
	color: #fff !important;
	border-color: rgba(88, 168, 232, 0.6) !important;
	box-shadow: 0 0 0 3px rgba(88, 168, 232, 0.15) !important;
	outline: none !important;
}

.onyx-formcard .ff-el-form-control:hover:not(:focus) {
	border-color: rgba(255, 255, 255, 0.22);
}

.onyx-formcard .asterisk-right label:after,
.onyx-formcard .asterisk-left label:before,
.onyx-formcard label.asterisk-right:after,
.onyx-formcard label.asterisk-left:before,
.onyx-formcard .ff-el-is-required label:after {
	color: var(--onyx-accent) !important;
}


/* ==========================================================================
   20. CHECKOUT
   --------------------------------------------------------------------------
   WooCommerce's checkout template renders its own `checkout-header` part from
   the woocommerce theme and no footer at all, so the page never loaded these
   stylesheets and sat outside the Onyx chrome entirely. A wp_template with
   slug page-checkout now renders the shared header and footer around it and
   tags <main> with .onyx-checkout, which everything below is scoped to — the
   cart, account and order-confirmation screens keep section 7's lighter
   treatment.

   The block checkout ships an opinionated light theme at a higher specificity
   than section 9, which is why the fields were still white on black. These
   rules are written to win on their own terms rather than by piling on
   !important: .onyx-checkout adds a class to every selector.

   Layout:  form column + sticky order summary
   Fields:  same 12px radius and accent focus ring as the rest of the site
   Summary: one panel, not the block's nested pair
   ========================================================================== */

/* --- Shell --------------------------------------------------------------- */

.onyx-checkout {
	box-sizing: border-box;
	max-width: calc(var(--onyx-max) + 2 * var(--onyx-pad));
	margin-inline: auto;
	padding: clamp(28px, 3.5vw, 48px) var(--onyx-pad) clamp(72px, 9vw, 120px);
}

.onyx-checkout * {
	box-sizing: border-box;
}

.onyx-checkout .wc-block-checkout__main {
	padding-right: 0;
}

.onyx-checkout .wc-block-components-sidebar-layout {
	gap: clamp(28px, 3vw, 48px);
}

/* --- Step headings ------------------------------------------------------- */

.onyx-checkout .wc-block-components-checkout-step {
	margin-bottom: clamp(30px, 3.4vw, 44px);
	padding-bottom: 0;
	border: 0;
}

.onyx-checkout .wc-block-components-checkout-step__heading {
	margin: 0 0 18px;
}

.onyx-checkout .wc-block-components-checkout-step__title,
.onyx-checkout .wc-block-components-title {
	margin: 0;
	font-family: "Montserrat", sans-serif;
	font-weight: 600;
	font-size: 13px;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: #fff;
}

.onyx-checkout .wc-block-components-checkout-step__description {
	margin-top: 6px;
	font-family: "Inter", sans-serif;
	font-size: 13.5px;
	color: #6b7887;
}

/* Hairline above each step after the first, echoing the prose rules. */
.onyx-checkout .wc-block-components-checkout-step + .wc-block-components-checkout-step {
	padding-top: clamp(28px, 3.2vw, 40px);
	border-top: 1px solid rgba(255, 255, 255, 0.09);
}

/* --- Fields -------------------------------------------------------------- */

.onyx-checkout .wc-block-components-text-input,
.onyx-checkout .wc-block-components-country-input,
.onyx-checkout .wc-block-components-state-input {
	margin-top: 14px;
}

.onyx-checkout .wc-block-components-text-input input[type="text"],
.onyx-checkout .wc-block-components-text-input input[type="email"],
.onyx-checkout .wc-block-components-text-input input[type="tel"],
.onyx-checkout .wc-block-components-text-input input[type="number"],
.onyx-checkout .wc-block-components-text-input input,
.onyx-checkout .wc-block-components-form input,
.onyx-checkout select,
.onyx-checkout .wc-block-components-combobox-control input {
	height: auto;
	padding: 22px 16px 8px;
	border: 1px solid rgba(255, 255, 255, 0.14) !important;
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.03) !important;
	box-shadow: none;
	font-family: "Inter", sans-serif;
	font-size: 15px;
	color: #fff !important;
}

.onyx-checkout select {
	padding: 22px 40px 8px 16px;
	appearance: none;
	background-image: linear-gradient(45deg, transparent 50%, #98a2ae 50%),
		linear-gradient(135deg, #98a2ae 50%, transparent 50%);
	background-position: calc(100% - 20px) 55%, calc(100% - 14px) 55%;
	background-size: 6px 6px, 6px 6px;
	background-repeat: no-repeat;
}

.onyx-checkout select option {
	background: #10161d;
	color: #fff;
}

/* Floating label sits inside the control. */
.onyx-checkout .wc-block-components-text-input label,
.onyx-checkout .wc-block-components-country-input label,
.onyx-checkout .wc-block-components-state-input label {
	left: 16px;
	font-family: "Inter", sans-serif;
	font-size: 15px;
	color: #6b7887;
}

.onyx-checkout .wc-block-components-text-input.is-active label,
.onyx-checkout .wc-block-components-country-input label,
.onyx-checkout .wc-block-components-state-input label {
	font-size: 11.5px;
	letter-spacing: 0.4px;
	color: #98a2ae;
}

.onyx-checkout .wc-block-components-text-input input:focus,
.onyx-checkout .wc-block-components-form input:focus,
.onyx-checkout select:focus {
	outline: none;
	border-color: rgba(88, 168, 232, 0.6) !important;
	background: #10161d !important;
	box-shadow: 0 0 0 3px rgba(88, 168, 232, 0.15);
}

.onyx-checkout .wc-block-components-text-input input:-webkit-autofill {
	-webkit-text-fill-color: #fff;
	-webkit-box-shadow: 0 0 0 1000px #10161d inset;
}

.onyx-checkout .has-error input,
.onyx-checkout .has-error select {
	border-color: rgba(224, 123, 123, 0.55) !important;
	background: rgba(224, 123, 123, 0.06) !important;
}

.onyx-checkout .wc-block-components-validation-error {
	margin-top: 6px;
	font-family: "Inter", sans-serif;
	font-size: 12.5px;
	color: #f0a8a8;
}

.onyx-checkout .wc-block-components-address-form__address_2-toggle {
	margin-top: 10px;
	font-family: "Inter", sans-serif;
	font-size: 13.5px;
	color: var(--onyx-accent);
	background: none;
	border: 0;
	cursor: pointer;
}

/* Saved-address card shown once details are entered. */
.onyx-checkout .wc-block-components-address-card {
	padding: 18px 20px;
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 14px;
	background: rgba(255, 255, 255, 0.02);
	font-family: "Inter", sans-serif;
	font-size: 14.5px;
	color: #d9e0e8;
}

.onyx-checkout .wc-block-components-address-card__edit {
	color: var(--onyx-accent);
	background: none;
	border: 0;
	font-family: "Inter", sans-serif;
	font-size: 13px;
	cursor: pointer;
}

/* --- Checkboxes ---------------------------------------------------------- */

.onyx-checkout .wc-block-components-checkbox__label {
	font-family: "Inter", sans-serif;
	font-size: 14px;
	color: #b8c2cc;
}

.onyx-checkout .wc-block-components-checkbox__input {
	width: 18px;
	height: 18px;
	border: 1px solid rgba(255, 255, 255, 0.24);
	border-radius: 4px;
	background: rgba(255, 255, 255, 0.03);
}

.onyx-checkout .wc-block-components-checkbox__input:checked {
	border-color: var(--onyx-accent);
	background: var(--onyx-accent);
}

.onyx-checkout .wc-block-components-checkbox__mark {
	fill: #050d14;
}

/* --- Order summary ------------------------------------------------------- */

.onyx-checkout .wc-block-checkout__sidebar {
	position: sticky;
	top: 108px;
	padding: 0;
	border: 0;
	background: none;
}

/* The block nests a panel inside a panel; only the outer one is kept. */
.onyx-checkout .wc-block-components-order-summary,
.onyx-checkout .wc-block-components-order-summary__content {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
}

.onyx-checkout .wc-block-components-sidebar .wc-block-components-panel,
.onyx-checkout .wc-block-checkout__sidebar > * {
	border-radius: 20px;
}

.onyx-checkout .wc-block-components-sidebar {
	padding: clamp(22px, 2.4vw, 30px);
	border: 1px solid rgba(255, 255, 255, 0.09);
	border-radius: 20px;
	background: #0a0c0f;
}

.onyx-checkout .wc-block-components-checkout-order-summary__title {
	margin: 0 0 20px;
	padding: 0;
}

.onyx-checkout .wc-block-components-checkout-order-summary__title-text {
	font-family: "Montserrat", sans-serif;
	font-weight: 600;
	font-size: 12px;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: #fff;
}

.onyx-checkout .wc-block-components-order-summary-item {
	padding: 18px 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.onyx-checkout .wc-block-components-order-summary-item:first-child {
	padding-top: 0;
}

.onyx-checkout .wc-block-components-order-summary-item__image img {
	width: 56px;
	height: 56px;
	object-fit: cover;
	border: 1px solid rgba(255, 255, 255, 0.07);
	border-radius: 10px;
	background: #0b0e12;
}

.onyx-checkout .wc-block-components-order-summary-item__quantity {
	border: 0;
	border-radius: 100px;
	background: var(--onyx-accent);
	box-shadow: 0 0 0 3px #0a0c0f;
	font-family: "Inter", sans-serif;
	font-weight: 600;
	font-size: 11px;
	color: #050d14;
}

.onyx-checkout .wc-block-components-product-name {
	font-family: "Montserrat", sans-serif;
	font-weight: 500;
	font-size: 14.5px;
	line-height: 1.35;
	letter-spacing: 0;
	text-transform: none;
	color: #fff;
}

.onyx-checkout .wc-block-components-product-metadata__description {
	margin-top: 4px;
	font-family: "Inter", sans-serif;
	font-size: 12.5px;
	line-height: 1.5;
	color: #6b7887;
}

/* Section 3 sizes the product price for a single-product page (34px); inside
   the summary it is a line item, not a headline. */
.onyx-checkout .wc-block-components-order-summary-item .wc-block-components-product-price,
.onyx-checkout .wc-block-components-order-summary-item .wc-block-components-product-price__value,
.onyx-checkout .wc-block-components-order-summary-item__individual-price,
.onyx-checkout .wc-block-components-order-summary-item__total-price {
	font-family: "Inter", sans-serif;
	font-weight: 400;
	font-size: 13.5px;
	line-height: 1.5;
	letter-spacing: 0;
	color: #b8c2cc;
}

.onyx-checkout .wc-block-components-order-summary-item__total-price {
	font-family: "Montserrat", sans-serif;
	font-size: 15px;
	color: #fff;
}

/* --- Coupons + totals ---------------------------------------------------- */

.onyx-checkout .wc-block-components-panel__button {
	padding: 16px 0;
	background: none;
	border: 0;
	font-family: "Inter", sans-serif;
	font-size: 14px;
	color: var(--onyx-accent);
	cursor: pointer;
}

.onyx-checkout .wc-block-components-totals-wrapper {
	padding: 16px 0;
	border-top: 1px solid rgba(255, 255, 255, 0.09);
}

.onyx-checkout .wc-block-components-totals-item {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	padding: 6px 0;
	font-family: "Inter", sans-serif;
	font-size: 14.5px;
	color: var(--onyx-muted);
}

.onyx-checkout .wc-block-components-totals-item__label {
	color: #98a2ae;
}

.onyx-checkout .wc-block-components-totals-item__value {
	color: #d9e0e8;
}

.onyx-checkout .wc-block-components-totals-footer-item {
	padding-top: 16px;
	border-top: 1px solid rgba(255, 255, 255, 0.09);
}

.onyx-checkout .wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
	font-family: "Montserrat", sans-serif;
	font-weight: 600;
	font-size: 12px;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	color: #fff;
}

.onyx-checkout .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	font-family: "Montserrat", sans-serif;
	font-weight: 300;
	font-size: 28px;
	letter-spacing: -0.01em;
	color: #fff;
}

/* --- Place order + notices ----------------------------------------------- */

.onyx-checkout .wc-block-components-checkout-place-order-button {
	width: 100%;
	height: auto;
	padding: 18px 26px;
	border: 0;
	border-radius: 100px;
	background: var(--onyx-accent);
	box-shadow: 0 6px 22px rgba(88, 168, 232, 0.35);
	font-family: "Montserrat", sans-serif;
	font-weight: 600;
	font-size: 12px;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	color: #050d14;
	transition: background-color 0.18s ease, box-shadow 0.18s ease;
}

.onyx-checkout .wc-block-components-checkout-place-order-button:hover:not(:disabled) {
	background: #74b8ee;
	box-shadow: 0 8px 28px rgba(88, 168, 232, 0.5);
}

.onyx-checkout .wc-block-components-checkout-place-order-button:disabled {
	opacity: 0.5;
}

.onyx-checkout .wc-block-checkout__actions_row {
	margin-top: 26px;
}

.onyx-checkout .wc-block-checkout__terms,
.onyx-checkout .wc-block-components-checkout-return-to-cart-button {
	font-family: "Inter", sans-serif;
	font-size: 13px;
	color: #6b7887;
}

.onyx-checkout .wc-block-components-checkout-return-to-cart-button {
	color: var(--onyx-accent);
}

.onyx-checkout .wc-block-components-notice-banner {
	border-radius: 14px;
	font-family: "Inter", sans-serif;
}

.onyx-checkout .wc-block-checkout__no-payment-methods-notice {
	border: 1px solid rgba(224, 123, 123, 0.4);
	border-radius: 14px;
	background: rgba(224, 123, 123, 0.09);
	color: #f0a8a8;
}

/* --- Responsive ---------------------------------------------------------- */

@media (max-width: 1000px) {
	.onyx-checkout .wc-block-checkout__sidebar {
		position: static;
	}
}

@media (max-width: 560px) {
	.onyx-checkout .wc-block-components-sidebar {
		padding: 18px;
		border-radius: 16px;
	}

	.onyx-checkout .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
		font-size: 23px;
	}
}


/* ==========================================================================
   21. CHECKOUT — LAYOUT AND SELECT CORRECTIONS
   --------------------------------------------------------------------------
   Two faults in section 20, both measured on the live page:

   1. The sidebar dropped below the form. Woo builds the two-column gutter
      from padding-right on .wc-block-checkout__main, not from a flex gap.
      Section 20 zeroed that padding and added a 46px gap instead, so the
      columns needed 885 + 46 + 476 = 1407px inside a 1361px row and wrapped.
      The gutter goes back on main and the gap returns to zero.

   2. The country and state controls still rendered white. The fill is not on
      the <select> — that was already dark — but on the wrapper, whose class
      is .wc-blocks-components-select__container ("blocks", plural), which no
      earlier section targeted. The border and radius live on the select, so
      the wrapper only needs to get out of the way.

   Woo also draws its own chevron on these controls, so section 20's
   background-image arrow is removed rather than doubled up.
   ========================================================================== */

.onyx-checkout .wc-block-components-sidebar-layout {
	gap: 0;
}

.onyx-checkout .wc-block-checkout__main {
	padding-right: clamp(28px, 3vw, 48px);
}

.onyx-checkout .wc-blocks-components-select,
.onyx-checkout .wc-blocks-components-select__container,
.onyx-checkout .wc-block-components-select__container {
	border: 0;
	background: transparent;
	border-radius: 12px;
}

.onyx-checkout .wc-blocks-components-select__label,
.onyx-checkout .wc-block-components-select__label {
	left: 16px;
	font-family: "Inter", sans-serif;
	font-size: 11.5px;
	letter-spacing: 0.4px;
	color: #98a2ae;
}

/* Woo supplies the chevron; drop the one section 20 painted. */
.onyx-checkout select,
.onyx-checkout .wc-blocks-components-select__select {
	background-image: none;
	padding-right: 40px;
}

.onyx-checkout .wc-blocks-components-select__expand {
	filter: invert(1) brightness(1.6);
	opacity: 0.7;
}

@media (max-width: 1000px) {
	.onyx-checkout .wc-block-checkout__main {
		padding-right: 0;
	}
}


/* ==========================================================================
   22. CHECKOUT — SUMMARY PANEL, EMPTY ROWS, CHECKBOX
   --------------------------------------------------------------------------
   Three more faults measured on the rendered page:

   1. The order summary still drew a panel inside a panel. Section 20 flattened
      .wc-block-components-order-summary, but the visible border belongs to
      .wp-block-woocommerce-checkout-order-summary-block, one level out.

   2. Two empty .wc-block-components-totals-wrapper elements sat between
      Subtotal and Total as blank 33px bands — the shipping and tax rows, which
      render as empty containers while neither is configured. They are hidden
      with :empty, so they reappear on their own the moment either is switched
      on rather than being permanently suppressed.

   3. The order-note checkbox rendered 34x32. Section 20's field rule reaches
      every input inside .wc-block-components-form, so the checkbox inherited
      the 22px/16px/8px text padding. Checkboxes and radios are excluded here
      and given their own box.
   ========================================================================== */

.onyx-checkout .wp-block-woocommerce-checkout-order-summary-block {
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
}

.onyx-checkout .wc-block-components-totals-wrapper:empty {
	display: none;
}

/* The first wrapper holds the line items and needs no rule above them. */
.onyx-checkout .wc-block-components-totals-wrapper:first-child {
	padding-top: 0;
	border-top: 0;
}

.onyx-checkout .wc-block-components-form input[type="checkbox"],
.onyx-checkout .wc-block-components-form input[type="radio"],
.onyx-checkout input[type="checkbox"],
.onyx-checkout input[type="radio"] {
	width: 18px;
	height: 18px;
	min-width: 18px;
	padding: 0 !important;
	border: 1px solid rgba(255, 255, 255, 0.24) !important;
	background: rgba(255, 255, 255, 0.03) !important;
	cursor: pointer;
}

.onyx-checkout input[type="checkbox"] {
	border-radius: 4px;
}

.onyx-checkout input[type="radio"] {
	border-radius: 50%;
}

.onyx-checkout input[type="checkbox"]:checked,
.onyx-checkout input[type="radio"]:checked {
	border-color: var(--onyx-accent) !important;
	background: var(--onyx-accent) !important;
}

.onyx-checkout .wc-block-components-checkbox__mark {
	top: 0;
	width: 18px;
	height: 18px;
	fill: #050d14;
}

.onyx-checkout .wc-block-components-checkbox {
	display: flex;
	align-items: center;
	gap: 10px;
}

/* Terms line: quiet copy, accent links. */
.onyx-checkout .wc-block-checkout__terms a {
	color: var(--onyx-accent);
	text-decoration: none;
}

.onyx-checkout .wc-block-checkout__terms a:hover {
	color: #8cc4f0;
}


/* ==========================================================================
   23. COMPLIANCE TICKER
   --------------------------------------------------------------------------
   A marquee band above the header, on every page, carrying the research-use
   disclaimer. It sits in normal flow rather than sticking, so it scrolls away
   and leaves the nav to stick on its own.

   The loop is seamless rather than a restart: the track holds the same run of
   items twice and travels exactly -50%, so the moment it wraps, item 1 of the
   second copy is sitting where item 1 of the first copy began. Ten items per
   copy covers a viewport up to ~2600px before a gap could appear.

   The animated copy is aria-hidden and a single static sentence is exposed to
   screen readers instead — a moving, endlessly repeating string is hostile to
   read aloud, and the disclaimer only needs saying once. Reduced motion stops
   the travel and leaves the band legible.
   ========================================================================== */

.onyx-ticker {
	position: relative;
	overflow: hidden;
	padding: 9px 0;
	border-bottom: 1px solid rgba(88, 168, 232, 0.18);
	background: rgba(88, 168, 232, 0.06);
	-webkit-user-select: none;
	user-select: none;
}

.onyx-ticker__track {
	display: flex;
	width: max-content;
	animation: onyx-ticker 44s linear infinite;
}

.onyx-ticker__group {
	display: flex;
	flex: none;
}

.onyx-ticker__item {
	display: inline-flex;
	align-items: center;
	gap: 18px;
	padding-right: 18px;
	font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
	font-weight: 500;
	font-size: 10.5px;
	letter-spacing: 1.7px;
	text-transform: uppercase;
	white-space: nowrap;
	color: #9fb4c8;
}

.onyx-ticker__item::after {
	content: "";
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: var(--onyx-accent);
	opacity: 0.85;
}

@keyframes onyx-ticker {
	from {
		transform: translate3d(0, 0, 0);
	}

	to {
		transform: translate3d(-50%, 0, 0);
	}
}

/* Fade the band into the page edges so items enter and leave rather than
   being sliced off mid-letter. */
.onyx-ticker::before,
.onyx-ticker::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	width: clamp(40px, 8vw, 110px);
	pointer-events: none;
	z-index: 1;
}

.onyx-ticker::before {
	left: 0;
	background: linear-gradient(to right, #05080b, rgba(5, 8, 11, 0));
}

.onyx-ticker::after {
	right: 0;
	background: linear-gradient(to left, #05080b, rgba(5, 8, 11, 0));
}

@media (max-width: 560px) {
	.onyx-ticker {
		padding: 7px 0;
	}

	.onyx-ticker__item {
		gap: 14px;
		padding-right: 14px;
		font-size: 9.5px;
		letter-spacing: 1.3px;
	}

	.onyx-ticker__track {
		animation-duration: 30s;
	}
}

@media (prefers-reduced-motion: reduce) {
	.onyx-ticker__track {
		animation: none;
	}
}


/* ==========================================================================
   24. SINGLE PRODUCT — THE ONYX PDP
   --------------------------------------------------------------------------
   The product page used to fall through to WooCommerce's legacy template,
   which is what made it read as broken: an oversized title above a 34px
   price, a 150px dead band between two stray hairlines where the classic
   template's empty upsell hook sits, unstyled tab pills, and a related-
   products grid that put five cards into a four-column row.

   It now renders from a wp_template (slug single-product) built out of the
   same vocabulary as the home page — eyebrow, .onyx-h2, .onyx-tile,
   .onyx-faq__item, .onyx-collection — so the strongest page on the site and
   the product page are demonstrably the same design.

   Everything is prefixed `body:not(.home) main.onyx-pdp` because sections 1
   and 3 reach these same elements at (0,2,2) and would otherwise win.

   Layout:
     hero      gallery (sticky) | summary
     detail    description | specification table
     standard  the four Onyx tiles, on the hexagon field
     faq       intro | accordion
     related   four cards, always a full row
   ========================================================================== */

/* --- Shell ---------------------------------------------------------------- */

body:not(.home) main.onyx-pdp {
	position: relative;
}

body:not(.home) main.onyx-pdp .onyx-eyebrow {
	margin: 0;
}

/* .onyx-h2 is a home-page helper; section 1 restyles every main h2 at a
   higher weight, so the display size is restated here. */
body:not(.home) main.onyx-pdp .onyx-pdp__h2 {
	margin: 16px 0 0;
	font-family: "Montserrat", sans-serif;
	font-weight: 300;
	font-size: clamp(30px, 3.1vw, 50px) !important;
	line-height: 1.06;
	letter-spacing: -0.01em;
	color: #fff;
}

body:not(.home) main.onyx-pdp .onyx-pdp__h2 b {
	font-weight: 300;
	color: var(--onyx-accent);
}

/* --- Hero ----------------------------------------------------------------- */

body:not(.home) main.onyx-pdp .onyx-pdp__hero {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(36px, 4.6vw, 78px);
	align-items: start;
}

/* The home hero's brand glow, behind the vial. Sits under both columns and
   is clipped by the hero box so it never bleeds into the header. */
body:not(.home) main.onyx-pdp .onyx-pdp__hero::before {
	content: "";
	position: absolute;
	top: -12%;
	left: -6%;
	width: 62%;
	aspect-ratio: 1;
	border-radius: 50%;
	background: radial-gradient(
		circle,
		rgba(88, 168, 232, 0.28) 0%,
		rgba(46, 115, 199, 0.13) 38%,
		rgba(20, 56, 107, 0.05) 72%,
		rgba(0, 0, 0, 0) 100%
	);
	pointer-events: none;
	z-index: 0;
}

body:not(.home) main.onyx-pdp .onyx-pdp__hero > * {
	position: relative;
	z-index: 1;
}

/* --- Hero: media ---------------------------------------------------------- */

/* The nav is sticky and ~78px tall; 104px keeps the vial clear of it while
   the long summary column scrolls. */
body:not(.home) main.onyx-pdp .onyx-pdp__media {
	position: sticky;
	top: 104px;
}

body:not(.home) main.onyx-pdp .onyx-pdp__media .woocommerce-product-gallery__image,
body:not(.home) main.onyx-pdp .onyx-pdp__media .wp-block-woocommerce-product-image-gallery {
	border-radius: 22px;
}

body:not(.home) main.onyx-pdp .onyx-pdp__media .woocommerce-product-gallery__image {
	box-shadow: 0 0 60px rgba(88, 168, 232, 0.18);
}

body:not(.home) main.onyx-pdp .onyx-pdp__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 18px 0 0;
}

body:not(.home) main.onyx-pdp .onyx-pdp__chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 16px 10px 12px;
	border: 1px solid rgba(88, 168, 232, 0.28);
	border-radius: 100px;
	background: rgba(10, 14, 20, 0.72);
	backdrop-filter: blur(6px);
	font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
	font-weight: 500;
	font-size: 10px;
	letter-spacing: 0.8px;
	line-height: 1;
	white-space: nowrap;
	color: #cfd8e2;
}

body:not(.home) main.onyx-pdp .onyx-pdp__chipdot {
	display: block;
	flex: none;
	width: 16px;
	height: 16px;
}

body:not(.home) main.onyx-pdp .onyx-pdp__chipdot svg {
	display: block;
	width: 16px;
	height: 16px;
}

/* --- Hero: summary -------------------------------------------------------- */

body:not(.home) main.onyx-pdp .onyx-pdp__title,
body:not(.home) main.onyx-pdp h1.onyx-pdp__title {
	margin: 20px 0 0 !important;
	font-family: "Montserrat", sans-serif;
	font-weight: 300;
	font-size: clamp(34px, 3.5vw, 54px) !important;
	line-height: 1.04;
	letter-spacing: -0.015em;
	color: #fff;
}

body:not(.home) main.onyx-pdp .onyx-pdp__specline {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
	margin: 16px 0 0;
}

body:not(.home) main.onyx-pdp .onyx-pdp__strength,
body:not(.home) main.onyx-pdp .onyx-pdp__presentation {
	margin: 0;
	font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
	font-weight: 500;
	font-size: 11px;
	letter-spacing: 1px;
	text-transform: uppercase;
	line-height: 1;
	color: #8b97a4;
}

body:not(.home) main.onyx-pdp .onyx-pdp__strength a {
	color: var(--onyx-accent);
}

body:not(.home) main.onyx-pdp .onyx-pdp__sep {
	display: block;
	flex: none;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: rgba(88, 168, 232, 0.85);
}

/* The price is the loudest thing in the column — it was previously smaller
   than the product title's descenders and read as an afterthought. */
body:not(.home) main.onyx-pdp .onyx-pdp__price,
body:not(.home) main.onyx-pdp .onyx-pdp__price .woocommerce-Price-amount,
body:not(.home) main.onyx-pdp .onyx-pdp__price .wc-block-components-product-price__value {
	display: inline-block;
	margin: 0;
	font-family: "Montserrat", sans-serif;
	font-weight: 300;
	font-size: clamp(40px, 4.2vw, 60px) !important;
	line-height: 1;
	letter-spacing: -0.02em;
	color: #fff;
}

body:not(.home) main.onyx-pdp .onyx-pdp__price {
	margin: 30px 0 0 !important;
}

body:not(.home) main.onyx-pdp .onyx-pdp__price::after {
	content: "PER VIAL";
	margin-left: 14px;
	font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
	font-weight: 500;
	font-size: 10px;
	letter-spacing: 0.9px;
	vertical-align: middle;
	color: #6b7887;
}

body:not(.home) main.onyx-pdp .onyx-pdp__lede,
body:not(.home) main.onyx-pdp .onyx-pdp__lede p {
	max-width: 50ch;
	margin: 22px 0 0;
	font-size: 16.5px;
	line-height: 1.7;
	color: #b8c2cc;
}

/* --- Hero: add to cart ---------------------------------------------------- */

body:not(.home) main.onyx-pdp .wp-block-woocommerce-add-to-cart-form {
	margin: 32px 0 0;
}

body:not(.home) main.onyx-pdp form.cart {
	display: flex;
	align-items: stretch;
	gap: 14px;
	margin: 0;
}

body:not(.home) main.onyx-pdp form.cart .quantity {
	display: flex;
	align-items: center;
	flex: none;
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 100px;
	background: rgba(255, 255, 255, 0.03);
	overflow: hidden;
}

body:not(.home) main.onyx-pdp form.cart .quantity input.qty,
body:not(.home) main.onyx-pdp form.cart input.qty {
	width: 74px;
	height: 100%;
	min-height: 58px;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	text-align: center;
	font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 14px;
	color: #fff;
}

body:not(.home) main.onyx-pdp form.cart input.qty:focus {
	box-shadow: none;
	border: 0;
}

/* The single call to action on the page: full-width pill, brand glow. */
body:not(.home) main.onyx-pdp form.cart button.single_add_to_cart_button,
body:not(.home) main.onyx-pdp form.cart button[type="submit"] {
	flex: 1 1 auto;
	min-height: 58px;
	padding: 18px 34px;
	border: 0;
	border-radius: 100px;
	background: var(--onyx-accent);
	box-shadow: 0 10px 34px rgba(88, 168, 232, 0.4);
	font-family: "Montserrat", sans-serif;
	font-weight: 600;
	font-size: 12.5px;
	letter-spacing: 1.6px;
	text-transform: uppercase;
	color: #050d14 !important;
	cursor: pointer;
	transition: background-color 0.18s ease, box-shadow 0.18s ease,
		transform 0.18s cubic-bezier(0.22, 0.61, 0.36, 1);
}

body:not(.home) main.onyx-pdp form.cart button.single_add_to_cart_button:hover,
body:not(.home) main.onyx-pdp form.cart button[type="submit"]:hover {
	background: #74b8ee;
	box-shadow: 0 12px 44px rgba(88, 168, 232, 0.55);
	transform: translateY(-1px);
}

/* Out of stock replaces the form with this paragraph. */
body:not(.home) main.onyx-pdp .stock.out-of-stock {
	margin: 32px 0 0;
	padding: 16px 22px;
	border: 1px solid rgba(224, 123, 123, 0.35);
	border-radius: 100px;
	background: rgba(224, 123, 123, 0.1);
	font-family: "Montserrat", sans-serif;
	font-weight: 600;
	font-size: 11.5px;
	letter-spacing: 1.3px;
	text-transform: uppercase;
	color: #f0a8a8;
}

/* --- Hero: assurances ----------------------------------------------------- */

body:not(.home) main.onyx-pdp .onyx-pdp__assure {
	margin: 28px 0 0;
	padding: 0;
	list-style: none;
}

body:not(.home) main.onyx-pdp .onyx-pdp__assure li {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin: 0;
	padding: 9px 0;
	font-size: 14px;
	line-height: 1.5;
	color: #a9b4c0;
}

body:not(.home) main.onyx-pdp .onyx-pdp__tick {
	position: relative;
	flex: none;
	width: 17px;
	height: 17px;
	margin-top: 2px;
	border: 1px solid rgba(88, 168, 232, 0.42);
	border-radius: 50%;
	background: rgba(88, 168, 232, 0.14);
}

body:not(.home) main.onyx-pdp .onyx-pdp__tick::after {
	content: "";
	position: absolute;
	left: 5.5px;
	top: 2.5px;
	width: 3.5px;
	height: 7.5px;
	border: solid var(--onyx-accent);
	border-width: 0 1.5px 1.5px 0;
	transform: rotate(45deg);
}

/* --- Detail: description + specification ---------------------------------- */

body:not(.home) main.onyx-pdp .onyx-pdp__detail {
	margin-top: clamp(64px, 8vw, 118px);
	padding-top: clamp(40px, 5vw, 64px);
	border-top: 1px solid rgba(255, 255, 255, 0.09);
}

body:not(.home) main.onyx-pdp .onyx-pdp__detailgrid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 480px);
	gap: clamp(40px, 5vw, 84px);
	align-items: start;
	margin-top: clamp(34px, 4vw, 52px);
}

body:not(.home) main.onyx-pdp .onyx-pdp__prose p,
body:not(.home) main.onyx-pdp .onyx-pdp__prose li {
	margin: 0 0 18px;
	font-size: 16.5px;
	line-height: 1.8;
	color: var(--onyx-muted);
}

body:not(.home) main.onyx-pdp .onyx-pdp__prose > *:last-child {
	margin-bottom: 0;
}

body:not(.home) main.onyx-pdp .onyx-pdp__table {
	padding: 8px 30px 12px;
	border: 1px solid rgba(255, 255, 255, 0.09);
	border-radius: 20px;
	background: #0a0c0f;
}

body:not(.home) main.onyx-pdp .onyx-pdp__row {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 26px;
	margin: 0;
	padding: 17px 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

body:not(.home) main.onyx-pdp .onyx-pdp__row:last-child {
	border-bottom: 0;
}

body:not(.home) main.onyx-pdp .onyx-pdp__k {
	flex: none;
	padding-top: 2px;
	font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
	font-weight: 500;
	font-size: 10px;
	letter-spacing: 0.85px;
	text-transform: uppercase;
	line-height: 1.4;
	color: #6b7887;
}

body:not(.home) main.onyx-pdp .onyx-pdp__v,
body:not(.home) main.onyx-pdp .onyx-pdp__row .wp-block-post-terms {
	margin: 0;
	font-family: "Inter", sans-serif;
	font-size: 14px;
	line-height: 1.5;
	text-align: right;
	color: #d9e0e8;
}

body:not(.home) main.onyx-pdp .onyx-pdp__row .wp-block-post-terms a {
	color: #d9e0e8;
}

body:not(.home) main.onyx-pdp .onyx-pdp__row .wp-block-post-terms a:hover {
	color: var(--onyx-accent);
}

/* --- The Onyx standard ---------------------------------------------------- */

/* The home page runs this band full-bleed against the hexagon field. Inside
   the PDP's centred container a full-bleed would need viewport maths that
   fights the scrollbar, so it is a panel instead — same field, same tiles. */
body:not(.home) main.onyx-pdp .onyx-pdp__standard {
	position: relative;
	margin-top: clamp(64px, 8vw, 118px);
	padding: clamp(44px, 5.5vw, 84px) clamp(28px, 4vw, 68px) clamp(48px, 6vw, 88px);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 24px;
	background: #060709;
	overflow: hidden;
	text-align: center;
}

body:not(.home) main.onyx-pdp .onyx-pdp__standard::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: var(--onyx-hex-alt);
	background-size: cover;
	background-position: center;
	opacity: 0.2;
	pointer-events: none;
}

body:not(.home) main.onyx-pdp .onyx-pdp__standard > * {
	position: relative;
	z-index: 1;
}

body:not(.home) main.onyx-pdp .onyx-pdp__standardsub {
	max-width: 640px;
	margin: 20px auto 0;
	font-size: 16.5px;
	line-height: 1.7;
	color: var(--onyx-muted);
}

body:not(.home) main.onyx-pdp .onyx-pdp__tiles {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 20px;
	margin-top: clamp(40px, 5vw, 62px);
	text-align: left;
}

body:not(.home) main.onyx-pdp .onyx-pdp__tiles .onyx-tile {
	display: flex;
	flex-direction: column;
	padding: 30px 28px 34px;
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 18px;
	background: rgba(255, 255, 255, 0.03);
}

body:not(.home) main.onyx-pdp .onyx-pdp__tiles .onyx-tile__num {
	margin: 24px 0 0;
	font-size: 11px;
	color: #5c6978;
}

body:not(.home) main.onyx-pdp .onyx-pdp__tiles .onyx-tile__title {
	margin: 14px 0 0;
	font-family: "Montserrat", sans-serif;
	font-weight: 600;
	font-size: 15.5px !important;
	line-height: 1.3;
	letter-spacing: 0.62px;
	color: #fff;
}

body:not(.home) main.onyx-pdp .onyx-pdp__tiles .onyx-tile p {
	margin: 14px 0 0;
	font-size: 13.5px;
	line-height: 1.7;
	color: var(--onyx-muted);
}

/* --- FAQ ------------------------------------------------------------------ */

body:not(.home) main.onyx-pdp .onyx-pdp__faq {
	display: grid;
	grid-template-columns: minmax(0, 400px) minmax(0, 1fr);
	gap: clamp(36px, 5vw, 96px);
	align-items: start;
	margin-top: clamp(64px, 8vw, 118px);
	padding-top: clamp(40px, 5vw, 64px);
	border-top: 1px solid rgba(255, 255, 255, 0.09);
}

body:not(.home) main.onyx-pdp .onyx-pdp__faqintro p:not(.onyx-eyebrow) {
	max-width: 380px;
	margin: 24px 0 0;
	font-size: 15.5px;
	line-height: 1.75;
	color: var(--onyx-muted);
}

body:not(.home) main.onyx-pdp .onyx-pdp__faqcontact {
	margin-top: 32px;
	padding: 18px 30px;
	color: #fff !important;
	background: rgba(255, 255, 255, 0.03) !important;
	border: 1px solid rgba(255, 255, 255, 0.18) !important;
	box-shadow: none !important;
}

body:not(.home) main.onyx-pdp .onyx-pdp__faqcontact:hover {
	background: rgba(255, 255, 255, 0.08) !important;
	border-color: rgba(255, 255, 255, 0.32) !important;
}

body:not(.home) main.onyx-pdp .onyx-pdp__faqcontact svg {
	width: 16px;
	height: 11px;
	flex: none;
}

body:not(.home) main.onyx-pdp .onyx-faq__item summary {
	font-size: 17px;
	padding: 26px 0;
}

body:not(.home) main.onyx-pdp .onyx-faq__item p {
	max-width: 780px;
	margin: 16px 0 26px;
	font-size: 15px;
	line-height: 1.8;
	color: var(--onyx-muted);
}

/* --- Related -------------------------------------------------------------- */

body:not(.home) main.onyx-pdp .onyx-pdp__related {
	margin-top: clamp(64px, 8vw, 118px);
	padding-top: clamp(40px, 5vw, 64px);
	border-top: 1px solid rgba(255, 255, 255, 0.09);
}

/* Four related products. Section 13's breakpoints drop every collection to
   three columns at 1400px, which would leave a single orphan card on a
   second row — the exact thing that made the old page look broken. This
   collection goes 4 -> 2 so the grid is always full. */
body:not(.home) main.onyx-pdp .onyx-pdp__related .wc-block-product-template,
body:not(.home) main.onyx-pdp .onyx-pdp__related .wc-block-product-template__responsive {
	grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

@media (max-width: 1400px) {
	body:not(.home) main.onyx-pdp .onyx-pdp__related .wc-block-product-template,
	body:not(.home) main.onyx-pdp .onyx-pdp__related .wc-block-product-template__responsive {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
}

/* --- Compliance ----------------------------------------------------------- */

body:not(.home) main.onyx-pdp .onyx-pdp__compliance {
	max-width: 780px;
	margin: clamp(56px, 7vw, 96px) auto 0;
	padding-top: clamp(28px, 3.5vw, 40px);
	border-top: 1px solid rgba(255, 255, 255, 0.09);
	font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 10.5px;
	letter-spacing: 0.5px;
	line-height: 1.9;
	text-align: center;
	text-transform: uppercase;
	color: #5c6978;
}

/* --- Responsive ----------------------------------------------------------- */

@media (max-width: 1100px) {
	body:not(.home) main.onyx-pdp .onyx-pdp__hero {
		grid-template-columns: minmax(0, 1fr);
		gap: 34px;
	}

	/* Sticky only makes sense beside a scrolling column. */
	body:not(.home) main.onyx-pdp .onyx-pdp__media {
		position: static;
	}

	body:not(.home) main.onyx-pdp .onyx-pdp__hero::before {
		width: 90%;
		top: -6%;
	}

	body:not(.home) main.onyx-pdp .onyx-pdp__detailgrid,
	body:not(.home) main.onyx-pdp .onyx-pdp__faq {
		grid-template-columns: minmax(0, 1fr);
	}

	body:not(.home) main.onyx-pdp .onyx-pdp__tiles {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	body:not(.home) main.onyx-pdp .onyx-pdp__faqintro p:not(.onyx-eyebrow) {
		max-width: none;
	}
}

@media (max-width: 560px) {
	body:not(.home) main.onyx-pdp .onyx-pdp__title,
	body:not(.home) main.onyx-pdp h1.onyx-pdp__title {
		font-size: 30px !important;
	}

	body:not(.home) main.onyx-pdp .onyx-pdp__price,
	body:not(.home) main.onyx-pdp .onyx-pdp__price .woocommerce-Price-amount {
		font-size: 36px !important;
	}

	body:not(.home) main.onyx-pdp form.cart {
		flex-wrap: wrap;
	}

	body:not(.home) main.onyx-pdp form.cart .quantity {
		flex: none;
	}

	body:not(.home) main.onyx-pdp form.cart button.single_add_to_cart_button,
	body:not(.home) main.onyx-pdp form.cart button[type="submit"] {
		flex: 1 1 180px;
		padding: 18px 20px;
		font-size: 11px;
		letter-spacing: 1.2px;
	}

	body:not(.home) main.onyx-pdp .onyx-pdp__tiles {
		grid-template-columns: minmax(0, 1fr);
	}

	body:not(.home) main.onyx-pdp .onyx-pdp__table {
		padding: 6px 20px 10px;
	}

	body:not(.home) main.onyx-pdp .onyx-pdp__row {
		flex-direction: column;
		gap: 7px;
	}

	body:not(.home) main.onyx-pdp .onyx-pdp__v,
	body:not(.home) main.onyx-pdp .onyx-pdp__row .wp-block-post-terms {
		text-align: left;
	}

	body:not(.home) main.onyx-pdp .onyx-pdp__chip {
		font-size: 9px;
		letter-spacing: 0.6px;
		padding: 8px 13px 8px 10px;
	}
}

@media (prefers-reduced-motion: reduce) {
	body:not(.home) main.onyx-pdp form.cart button.single_add_to_cart_button:hover,
	body:not(.home) main.onyx-pdp form.cart button[type="submit"]:hover {
		transform: none;
	}
}


/* ==========================================================================
   25. SINGLE PRODUCT — CORRECTIONS
   --------------------------------------------------------------------------
   Three fixes against section 24, after seeing it render:

   1. "PER VIAL" dropped onto its own line. Woo wraps the amount in a block
      <p class="price"> inside the block wrapper, so an inline-block wrapper
      could not keep the ::after label alongside it. The wrapper is a
      baseline flex row now, which holds regardless of Woo's inner markup.

   2. The detail section was gallery-column thinking applied to prose: a
      one-line product description sat alone in a half-width column beside a
      tall specification panel. Description and panel are stacked now, and
      the panel lays its rows out two-up so it reads as a spec sheet rather
      than a long list.

   3. The STRENGTH row rendered empty. core/post-terms bails on any taxonomy
      that fails is_taxonomy_viewable(), and pa_strength is registered
      non-public because "Enable archives" is off for that attribute. The row
      is gone; the strength is in the product title either way. Turning
      archives on in Products > Attributes would make the block resolve, at
      the cost of a public /strength/30-mg/ archive.
   ========================================================================== */

/* --- 1 Price + unit label ------------------------------------------------- */

body:not(.home) main.onyx-pdp .onyx-pdp__price {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 0 14px;
	margin: 30px 0 0 !important;
}

body:not(.home) main.onyx-pdp .onyx-pdp__price > *,
body:not(.home) main.onyx-pdp .onyx-pdp__price p.price {
	margin: 0 !important;
	padding: 0 !important;
}

body:not(.home) main.onyx-pdp .onyx-pdp__price,
body:not(.home) main.onyx-pdp .onyx-pdp__price p.price,
body:not(.home) main.onyx-pdp .onyx-pdp__price .woocommerce-Price-amount,
body:not(.home) main.onyx-pdp .onyx-pdp__price .wc-block-components-product-price__value {
	font-family: "Montserrat", sans-serif;
	font-weight: 300;
	font-size: clamp(40px, 4.2vw, 60px) !important;
	line-height: 1;
	letter-spacing: -0.02em;
	color: #fff;
}

body:not(.home) main.onyx-pdp .onyx-pdp__price::after {
	align-self: baseline;
	margin-left: 0;
	font-size: 10px !important;
	letter-spacing: 0.9px;
	color: #6b7887;
}

/* --- 2 Detail: stacked prose, two-up specification ----------------------- */

body:not(.home) main.onyx-pdp .onyx-pdp__prose {
	max-width: 760px;
	margin-top: clamp(24px, 3vw, 34px);
}

body:not(.home) main.onyx-pdp .onyx-pdp__table {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: clamp(32px, 4vw, 64px);
	margin-top: clamp(32px, 4vw, 48px);
	padding: 10px clamp(24px, 3vw, 38px) 14px;
}

/* Row-major fill, so the two columns share a baseline grid of hairlines.
   Only the final pair drops its rule. */
body:not(.home) main.onyx-pdp .onyx-pdp__table .onyx-pdp__row:nth-last-child(-n + 2) {
	border-bottom: 0;
}

body:not(.home) main.onyx-pdp .onyx-pdp__table .onyx-pdp__row:last-child {
	border-bottom: 0;
}

/* --- 3 Specline ---------------------------------------------------------- */

body:not(.home) main.onyx-pdp p.onyx-pdp__specline {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
	margin: 16px 0 0;
	font-size: 11px;
	color: #8b97a4;
}

@media (max-width: 860px) {
	body:not(.home) main.onyx-pdp .onyx-pdp__table {
		grid-template-columns: minmax(0, 1fr);
		column-gap: 0;
	}

	body:not(.home) main.onyx-pdp .onyx-pdp__table .onyx-pdp__row:nth-last-child(-n + 2) {
		border-bottom: 1px solid rgba(255, 255, 255, 0.07);
	}

	body:not(.home) main.onyx-pdp .onyx-pdp__table .onyx-pdp__row:last-child {
		border-bottom: 0;
	}
}


/* ==========================================================================
   26. SINGLE PRODUCT — WRAPPING POLISH
   --------------------------------------------------------------------------
   Both fixes are about what happens when a line breaks on a narrow screen.

   1. .onyx-eyebrow centres its dot against the whole flex box, so once the
      label wrapped to two lines the dot floated to the middle and read as a
      bullet for the second line. It is pinned to the first line instead.

   2. The spec line separated its items with standalone dot spans, which are
      flex items in their own right — a wrap could leave one stranded at the
      end of a line with nothing after it. The dots are drawn as ::before on
      each label now, so a dot can never be separated from its own text.
   ========================================================================== */

body:not(.home) main.onyx-pdp .onyx-eyebrow {
	align-items: flex-start;
	line-height: 1.5;
}

body:not(.home) main.onyx-pdp .onyx-eyebrow svg {
	margin-top: 6px;
}

body:not(.home) main.onyx-pdp p.onyx-pdp__specline {
	gap: 6px 14px;
}

body:not(.home) main.onyx-pdp .onyx-pdp__specline .onyx-pdp__sep {
	display: none;
}

body:not(.home) main.onyx-pdp .onyx-pdp__specline .onyx-pdp__presentation::before {
	content: "";
	display: inline-block;
	width: 4px;
	height: 4px;
	margin-right: 11px;
	border-radius: 50%;
	background: rgba(88, 168, 232, 0.85);
	vertical-align: middle;
	position: relative;
	top: -1px;
}

@media (max-width: 560px) {
	body:not(.home) main.onyx-pdp .onyx-eyebrow {
		font-size: 10.5px;
		letter-spacing: 0.8px;
	}

	body:not(.home) main.onyx-pdp .onyx-eyebrow svg {
		margin-top: 5px;
	}

	body:not(.home) main.onyx-pdp .onyx-pdp__specline .onyx-pdp__presentation {
		font-size: 10px;
	}
}


/* ==========================================================================
   27. SINGLE PRODUCT — RELATED GRID BREAKPOINT
   --------------------------------------------------------------------------
   Section 25 dropped the related collection from four columns to two at
   1400px to avoid an orphan card. That is the right pair of column counts —
   four products divide evenly into both — but 1400px was too early: between
   960 and 1400 the shop archive runs three-up, so the product page was
   showing two enormous cards where the rest of the site shows a dense row.

   The switch happens at 1100px instead, which is where the hero stacks. Wide
   enough for the side-by-side hero means wide enough for four cards.
   ========================================================================== */

@media (max-width: 1400px) {
	body:not(.home) main.onyx-pdp .onyx-pdp__related .wc-block-product-template,
	body:not(.home) main.onyx-pdp .onyx-pdp__related .wc-block-product-template__responsive {
		grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
	}
}

@media (max-width: 1100px) {
	body:not(.home) main.onyx-pdp .onyx-pdp__related .wc-block-product-template,
	body:not(.home) main.onyx-pdp .onyx-pdp__related .wc-block-product-template__responsive {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
}


/* ==========================================================================
   Cash App thank-you panel — legibility on the dark order-received page
   ==========================================================================
   The gateway plugin prints its confirmation markup with hardcoded inline
   colours intended for a light page. Two of its blocks have no background of
   their own, so their dark text lands directly on the site's black
   background: the "Cash App Payment Information" panel (Send Payment To,
   Username, Amount, Note) and the closing reminder paragraph.

   The plugin's other two blocks — the pale green "Pay with Cash App" box and
   the yellow disclaimer — carry their own light backgrounds and must keep
   their dark text, so these rules are anchored to the exact inline-style
   prefixes of the two transparent blocks rather than to colour values.

   Inline styles can only be overridden with !important. If the plugin's
   markup ever changes, update these prefixes to match (or better, set the
   colours in the plugin itself and delete this block).
   ========================================================================== */

[style^="border:1px solid #e0e0e0;border-radius:8px;margin-top:16px;overflow:hidden"],
[style^="border:1px solid #e0e0e0;border-radius:8px;margin-top:16px;overflow:hidden"] * {
	color: #fff !important;
}

p[style^="margin-top:14px;font-size:13px;color:#777"] {
	color: rgba(255, 255, 255, .72) !important;
}