/* Hoku redesign — dark "lab specimen" styling for single-product pages.
 * Scoped under body.hoku-redesign so it never touches other pages.
 * Styles the product module as a dark panel that sits on the existing theme.
 */

body.hoku-redesign {
	--ink: #0a0a0b;
	--graphite: #161619;
	--panel: #1c1c20;
	--line: #2a2a30;
	--orange: #e5811c;
	--orange-hi: #f59a2e;
	--gold: #c9a24b;
	--paper: #f3f1ec;
	--muted: #8b8b93;
	--mono: 'IBM Plex Mono', ui-monospace, monospace;
}

/* --- the product module becomes a dark stage --- */
body.hoku-redesign .single-product div.product,
body.hoku-redesign div.product.type-product {
	background:
		radial-gradient(120% 80% at 20% 0%, rgba(229, 129, 28, .08), transparent 55%),
		linear-gradient(180deg, #121215, #0c0c0e) !important;
	color: var(--paper) !important;
	padding: 40px !important;
	border: 1px solid var(--line);
	border-radius: 6px;
}

/* image side: dark stage with a faint grid + glow */
body.hoku-redesign div.product .woocommerce-product-gallery {
	position: relative;
	background:
		radial-gradient(120% 90% at 50% 30%, rgba(229, 129, 28, .14), transparent 60%),
		#0e0e10;
	border: 1px solid var(--line);
	border-radius: 4px;
	padding: 22px;
}
body.hoku-redesign div.product .woocommerce-product-gallery::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(var(--line) 1px, transparent 1px),
		linear-gradient(90deg, var(--line) 1px, transparent 1px);
	background-size: 44px 44px;
	opacity: .12;
	pointer-events: none;
}

/* --- eyebrow above the title --- */
body.hoku-redesign .hoku-eyebrow {
	font-family: var(--mono);
	font-size: 12px;
	letter-spacing: .16em;
	color: var(--orange);
	margin-bottom: 12px;
	display: flex;
	align-items: center;
	gap: 8px;
}
body.hoku-redesign .hoku-eyebrow-star { color: var(--gold); }

/* --- title & price --- */
body.hoku-redesign div.product .product_title {
	color: var(--paper) !important;
	font-size: 40px !important;
	line-height: 1.05 !important;
	font-weight: 700 !important;
	letter-spacing: -.02em;
	margin-bottom: 12px !important;
}
body.hoku-redesign div.product p.price,
body.hoku-redesign div.product span.price {
	color: var(--paper) !important;
	font-size: 30px !important;
	font-weight: 600 !important;
}
body.hoku-redesign div.product p.price del { color: var(--muted) !important; }
body.hoku-redesign div.product p.price ins { text-decoration: none; }
body.hoku-redesign div.product .woocommerce-product-details__short-description {
	color: #c4c4cc !important;
	max-width: 46ch;
}

/* --- variations area / chips --- */
/* flatten WooCommerce's variations table so the SIZE label and chips stack
   and align with the title/price instead of sitting in an indented box */
body.hoku-redesign div.product form.cart,
body.hoku-redesign div.product table.variations,
body.hoku-redesign div.product table.variations tbody,
body.hoku-redesign div.product table.variations tr,
body.hoku-redesign div.product table.variations td,
body.hoku-redesign div.product table.variations th {
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
	background: transparent !important;
	border: none !important;
	padding: 0 !important;
	margin: 0 !important;
	text-align: left !important;
}
body.hoku-redesign div.product .variations th,
body.hoku-redesign div.product .variations label {
	color: var(--muted) !important;
	font-family: var(--mono);
	font-size: 12px;
	letter-spacing: .12em;
	text-transform: uppercase;
	display: block !important;
	margin-bottom: 6px !important;
}
body.hoku-redesign div.product .woocommerce-variation-add-to-cart { margin-top: 18px !important; }
body.hoku-redesign div.product .single_variation .price { margin: 14px 0 4px !important; }
body.hoku-redesign .hoku-hidden-select {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden; clip: rect(0 0 0 0);
	white-space: nowrap;
}
body.hoku-redesign .hoku-chips {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	margin: 8px 0 4px;
}
body.hoku-redesign .hoku-chip {
	border: 1px solid #3a3a42;
	background: linear-gradient(180deg, #1a1a1e, #141417);
	color: #e8e8ec;
	border-radius: 10px;
	padding: 14px 24px;
	min-width: 100px;
	font-family: var(--mono);
	font-size: 14px;
	letter-spacing: .04em;
	cursor: pointer;
	position: relative;
	transition: border-color .18s, transform .18s, background .18s, box-shadow .18s, color .18s;
}
body.hoku-redesign .hoku-chip:hover {
	transform: translateY(-2px);
	border-color: var(--orange);
	color: #ffffff;
}
body.hoku-redesign .hoku-chip.sel {
	border-color: var(--orange);
	background: linear-gradient(180deg, rgba(229, 129, 28, .22), rgba(229, 129, 28, .05));
	color: var(--orange-hi);
	box-shadow: 0 0 0 1px rgba(229, 129, 28, .35), 0 8px 20px -8px rgba(229, 129, 28, .55);
}
body.hoku-redesign .hoku-chip.sel::after {
	content: "";
	position: absolute;
	top: 8px;
	right: 8px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--orange-hi);
	box-shadow: 0 0 6px rgba(245, 154, 46, .9);
}
body.hoku-redesign .hoku-chip:active { transform: translateY(0); }
body.hoku-redesign .hoku-chip:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }

/* the reset/clear link */
body.hoku-redesign div.product .reset_variations { color: var(--gold) !important; font-family: var(--mono); font-size: 12px; }

/* --- spec strip --- */
body.hoku-redesign .hoku-specs {
	border: 1px solid var(--line);
	border-radius: 4px;
	margin-top: 26px;
	overflow: hidden;
}
body.hoku-redesign .hoku-spec-row {
	display: flex;
	justify-content: space-between;
	padding: 11px 16px;
	font-family: var(--mono);
	font-size: 13px;
	border-bottom: 1px solid var(--line);
}
body.hoku-redesign .hoku-spec-row:last-child { border-bottom: none; }
body.hoku-redesign .hoku-spec-row .k { color: var(--muted); letter-spacing: .05em; }
body.hoku-redesign .hoku-spec-row .v { color: var(--paper); }
body.hoku-redesign .hoku-spec-row .v.hl { color: var(--orange-hi); }

body.hoku-redesign .hoku-trust {
	display: flex;
	gap: 20px;
	flex-wrap: wrap;
	margin-top: 16px;
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: .05em;
	color: var(--muted);
}
body.hoku-redesign .hoku-trust span::before {
	content: "";
	display: inline-block;
	width: 5px; height: 5px;
	border-radius: 50%;
	background: var(--gold);
	margin-right: 7px;
	vertical-align: middle;
}

/* --- research band --- */
body.hoku-redesign .hoku-research-band {
	margin: 30px 0 10px;
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
	background: repeating-linear-gradient(45deg, #101012, #101012 22px, #0d0d0f 22px, #0d0d0f 44px);
	padding: 18px 20px;
	text-align: center;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
}
body.hoku-redesign .hoku-research-band span {
	font-family: var(--mono);
	font-size: 13px;
	letter-spacing: .08em;
	color: var(--gold);
}

/* --- tabs / related, keep readable on dark --- */
body.hoku-redesign .woocommerce-tabs,
body.hoku-redesign .related.products { color: inherit; }

@media (max-width: 900px) {
	body.hoku-redesign .single-product div.product,
	body.hoku-redesign div.product.type-product { padding: 24px !important; }
	body.hoku-redesign div.product .product_title { font-size: 32px !important; }
}

@media (prefers-reduced-motion: reduce) {
	body.hoku-redesign .hoku-chip { transition: none; }
}

/* =========================================================
   Whole-page darkening for product pages + tabs / related /
   additional-info styling. Loaded only on product pages and
   only when the redesign toggle is on.
   ========================================================= */

body.hoku-redesign { background: #0a0a0b !important; overflow-x: hidden; }
body.hoku-redesign .hoku-specs,
body.hoku-redesign .hoku-cart-table,
body.hoku-redesign img { max-width: 100%; box-sizing: border-box; }

body.hoku-redesign #content,
body.hoku-redesign .site-content,
body.hoku-redesign .content-area,
body.hoku-redesign main,
body.hoku-redesign .site-main,
body.hoku-redesign .entry-content,
body.hoku-redesign .page-content,
body.hoku-redesign .elementor,
body.hoku-redesign .elementor-section,
body.hoku-redesign .elementor-container,
body.hoku-redesign .elementor-widget-wrap,
body.hoku-redesign .e-con,
body.hoku-redesign .e-con-inner { background: transparent !important; }

/* breadcrumb */
body.hoku-redesign .woocommerce-breadcrumb { color: #8b8b93 !important; }
body.hoku-redesign .woocommerce-breadcrumb a { color: #c9a24b !important; }

/* product tabs */
body.hoku-redesign .woocommerce-tabs ul.tabs { border-bottom-color: #2a2a30 !important; }
body.hoku-redesign .woocommerce-tabs ul.tabs li {
	background: #161619 !important;
	border-color: #2a2a30 !important;
}
body.hoku-redesign .woocommerce-tabs ul.tabs li.active { background: #1c1c20 !important; }
body.hoku-redesign .woocommerce-tabs ul.tabs li a { color: #f3f1ec !important; }
body.hoku-redesign .woocommerce-tabs .panel,
body.hoku-redesign .woocommerce-Tabs-panel { color: #d7d7dd !important; }
body.hoku-redesign .woocommerce-tabs .panel h2 { color: #f3f1ec !important; }

/* additional information table */
body.hoku-redesign table.shop_attributes th,
body.hoku-redesign table.shop_attributes td {
	color: #f3f1ec !important;
	border-color: #2a2a30 !important;
}
body.hoku-redesign table.shop_attributes tr:nth-child(even) th,
body.hoku-redesign table.shop_attributes tr:nth-child(even) td { background: #141416 !important; }

/* related products */
body.hoku-redesign .related.products > h2,
body.hoku-redesign .upsells.products > h2 { color: #f3f1ec !important; }
body.hoku-redesign ul.products li.product .woocommerce-loop-product__title { color: #f3f1ec !important; }
body.hoku-redesign ul.products li.product .price { color: #f59a2e !important; }
body.hoku-redesign ul.products li.product .price del { color: #8b8b93 !important; }

/* =========================================================
   Fixes: stop low-res images upscaling (reduces pixelation)
   and clean up the default WooCommerce tab borders on dark.
   ========================================================= */

/* main product image: render at natural size (never upscale) */
body.hoku-redesign .woocommerce-product-gallery {
	max-width: 440px;
	margin-left: auto;
	margin-right: auto;
}
body.hoku-redesign .woocommerce-product-gallery img,
body.hoku-redesign .woocommerce-product-gallery__image img,
body.hoku-redesign figure img.wp-post-image,
body.hoku-redesign img.wp-post-image {
	width: auto !important;
	height: auto !important;
	max-width: 100% !important;
	max-height: 440px !important;
	margin: 0 auto !important;
	display: block !important;
	image-rendering: auto;
}

/* related-product thumbnails: natural size, capped, never upscaled */
body.hoku-redesign ul.products li.product img {
	width: auto !important;
	height: auto !important;
	max-width: 100% !important;
	max-height: 220px !important;
	margin: 0 auto 12px !important;
	display: block !important;
}
body.hoku-redesign ul.products li.product {
	text-align: center;
}

/* tabs: remove the stray light underline and tidy the active tab */
body.hoku-redesign .woocommerce-tabs ul.tabs::before {
	border-bottom-color: #2a2a30 !important;
}
body.hoku-redesign .woocommerce-tabs ul.tabs li {
	border-radius: 4px 4px 0 0;
	margin: 0 4px -1px 0;
}
body.hoku-redesign .woocommerce-tabs ul.tabs li.active {
	border-bottom-color: #1c1c20 !important;
}
body.hoku-redesign .woocommerce-tabs ul.tabs li.active a { color: #f59a2e !important; }
body.hoku-redesign .woocommerce-tabs ul.tabs li::before,
body.hoku-redesign .woocommerce-tabs ul.tabs li::after {
	border-color: #2a2a30 !important;
}

/* =========================================================
   Attractive related-product cards
   ========================================================= */

body.hoku-redesign ul.products li.product {
	background: linear-gradient(180deg, #161619, #0f0f11);
	border: 1px solid #26262c;
	border-radius: 12px;
	padding: 22px 16px 24px !important;
	transition: transform .2s, border-color .2s, box-shadow .2s;
}
body.hoku-redesign ul.products li.product:hover {
	transform: translateY(-4px);
	border-color: #e5811c;
	box-shadow: 0 16px 34px -16px rgba(229, 129, 28, .55);
}
body.hoku-redesign ul.products li.product img {
	height: 190px !important;
	width: auto !important;
	max-width: 100% !important;
	object-fit: contain !important;
	margin: 0 auto 14px !important;
}
body.hoku-redesign ul.products li.product .woocommerce-loop-product__title {
	font-size: 15px !important;
	letter-spacing: .08em;
	text-transform: uppercase;
	font-weight: 600;
	margin: 4px 0 8px !important;
}
body.hoku-redesign ul.products li.product .price {
	font-size: 20px !important;
	margin-bottom: 14px;
	display: block;
}
body.hoku-redesign ul.products li.product .button,
body.hoku-redesign ul.products li.product a.add_to_cart_button,
body.hoku-redesign ul.products li.product a.button {
	background: transparent !important;
	color: #e5811c !important;
	border: 1px solid #e5811c !important;
	border-radius: 8px !important;
	padding: 10px 20px !important;
	font-family: var(--mono) !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	letter-spacing: .04em !important;
	transition: background .18s, color .18s !important;
}
body.hoku-redesign ul.products li.product .button:hover,
body.hoku-redesign ul.products li.product a.add_to_cart_button:hover,
body.hoku-redesign ul.products li.product a.button:hover {
	background: #e5811c !important;
	color: #120a02 !important;
}