/**
 * Single product page — styles native WooCommerce/Storefront markup into
 * the product-reta.html reference layout. No template override: WooCommerce's
 * native single-product.php still renders (images + summary, all the usual
 * hooks), this only restyles it. The variation <select> itself is still
 * native WooCommerce markup, just visually replaced by radio pills — see
 * assets/js/variation-pills.js, which hides it and is the only thing that
 * adds .altitude-variation-table-hidden (so a no-JS visitor still gets the
 * functional native dropdown, styled below).
 */

.single-product div.product {
	display: grid;
	grid-template-columns: .85fr 1fr;
	gap: 40px 56px;
	align-items: start;
	padding: 28px 0 72px;
}
/* Storefront clearfixes div.product with ::before/::after { content: "";
   display: table }. Inside a grid container a generated box is a GRID ITEM,
   so ::before silently took cell 1: the gallery landed in column 2, the
   summary in column 1 of the NEXT row, and the tabs beside it -- the
   "image floating above a half-width summary" layout, with Add to cart
   pushed below the fold. Identical to the shop-grid bug fixed 2026-08-31
   (ul.products::before), same fix. */
.single-product div.product::before,
.single-product div.product::after {
	content: none !important;
}
/* Storefront also floats the gallery (41%) and summary (53%) for its own
   two-column layout. Percentages inside a grid cell just shrink the cell's
   content, so the gallery rendered 213px wide in a 460px column. Grid
   places them; the floats and widths are noise here. */
.single-product div.product .woocommerce-product-gallery,
.single-product div.product .summary.entry-summary {
	float: none !important;
	width: 100% !important;
	margin: 0 !important;
}
/* Everything after the two-column top -- tabs, related products, the
   notices wrapper -- spans the full width below it. */
.single-product div.product .woocommerce-tabs,
.single-product div.product .related,
.single-product div.product .upsells,
.single-product div.product > .woocommerce-notices-wrapper {
	grid-column: 1 / -1;
	width: 100% !important;
	float: none !important;
}
/* An empty notices wrapper would still be a grid item, and an empty item
   with a row gap is a blank band above the product. */
.single-product div.product > .woocommerce-notices-wrapper:empty {
	display: none;
}

/* === Image panel === */
.single-product div.product .woocommerce-product-gallery {
	aspect-ratio: 1 / 1;
	border-radius: 24px;
	background: radial-gradient(120% 140% at 20% 0%, var(--blue-600), var(--navy-950));
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 60px;
	position: relative;
	overflow: hidden;
}
.single-product div.product .woocommerce-product-gallery img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}
.single-product div.product span.onsale {
	position: absolute;
	top: 20px; left: 20px;
	background: var(--cyan-400);
	color: var(--navy-950);
	font-family: var(--font-mono);
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: .03em;
	padding: 4px 10px;
	border-radius: 999px;
	margin: 0;
}

/* === Info panel === */
.single-product div.product .summary.entry-summary .kicker {
	font-family: var(--font-mono);
	font-size: 12px;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--cyan-400);
	margin-bottom: 10px;
}
.single-product div.product .summary.entry-summary .product_title {
	font-size: clamp(30px,4vw,44px);
	margin-bottom: 14px;
}
.single-product div.product .summary.entry-summary .altitude-ruo-notice {
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: .04em;
	color: var(--slate-500);
	margin-bottom: 18px;
}
.single-product div.product .summary.entry-summary .woocommerce-product-details__short-description {
	color: var(--slate-700);
	font-size: 15.5px;
	max-width: 520px;
	margin-bottom: 24px;
}
.single-product div.product .summary.entry-summary .woocommerce-product-details__short-description p:last-child {
	margin-bottom: 0;
}

/* Price — native .woocommerce-Price-amount inside .price */
.single-product div.product .summary.entry-summary p.price,
.single-product div.product .summary.entry-summary .price {
	font-family: var(--font-mono);
	font-size: 28px;
	font-weight: 600;
	color: var(--ice-100);
	margin: 18px 0 22px;
}

/* Native variation <select> — styled as a fallback for when JS doesn't run;
   hidden by variation-pills.js once the radio-pill UI below it is built. */
.single-product table.variations {
	margin-bottom: 16px;
}
.single-product table.variations select {
	font-family: var(--font-body);
	font-size: 14px;
	padding: 10px 14px;
	border-radius: 8px;
	border: 1px solid rgba(255,255,255,.12);
	background: var(--navy-800);
	color: var(--ice-200);
	min-width: 200px;
}
.single-product table.variations select:focus-visible {
	outline: 2px solid var(--cyan-400);
	outline-offset: 2px;
}
.single-product table.variations.altitude-variation-table-hidden {
	display: none;
}

/* Radio-pill variation selector — built by assets/js/variation-pills.js
   from the native <select>'s own options, matching product-reta.html. */
.single-product .altitude-variation-pills-label {
	font-family: var(--font-mono);
	font-size: 10.5px;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--slate-500);
	margin-bottom: 8px;
}
.single-product .altitude-variation-pills-group {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	margin-bottom: 16px;
}
.single-product .altitude-variation-pills-group input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
	pointer-events: none;
}
.single-product .altitude-variation-pills-group label {
	font-family: var(--font-mono);
	font-size: 12px;
	font-weight: 600;
	padding: 7px 13px;
	border-radius: 8px;
	border: 1px solid rgba(255,255,255,.12);
	background: var(--navy-800);
	color: var(--ice-200);
	cursor: pointer;
	transition: all .15s ease;
	white-space: nowrap;
}
.single-product .altitude-variation-pills-group label:hover {
	border-color: var(--cyan-400);
}
.single-product .altitude-variation-pills-group input:checked + label {
	background: var(--cyan-400);
	border-color: var(--cyan-400);
	color: var(--navy-950);
}
.single-product .altitude-variation-pills-group input:focus-visible + label {
	outline: 2px solid var(--cyan-400);
	outline-offset: 2px;
}

.single-product .woocommerce-variation-price {
	font-family: var(--font-mono);
	font-size: 20px;
	font-weight: 600;
	margin-bottom: 14px;
}

.single-product div.product form.cart {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
	margin-top: 24px;
}
.single-product div.product .quantity input {
	width: 64px;
	padding: 13px 10px;
	border-radius: 8px;
	border: 1px solid rgba(255,255,255,.15);
	background: var(--navy-800);
	color: var(--ice-100);
	font-family: var(--font-mono);
	text-align: center;
	/* The up/down arrows are drawn by the browser, not by us, and default to
	   the light colour scheme — dark arrows on this dark field, i.e. invisible.
	   color-scheme tells the browser to render its native controls for a dark
	   surface, which is the only way to restyle a spin button. */
	color-scheme: dark;
}
/* Chrome and Safari also hide the spinner until the field is hovered or
   focused. On a dark field that reads as "there are no arrows" rather than
   "the arrows are waiting" — so keep them permanently visible. */
.single-product div.product .quantity input::-webkit-inner-spin-button,
.single-product div.product .quantity input::-webkit-outer-spin-button {
	opacity: 1;
}
.single-product div.product button.single_add_to_cart_button {
	background: var(--cyan-400);
	color: var(--navy-950);
	border: none;
	border-radius: 999px;
	padding: 14px 28px;
	font-size: 14px;
	font-weight: 600;
	transition: background .15s ease, color .15s ease;
}
.single-product div.product button.single_add_to_cart_button:hover { background: var(--blue-600); color: #fff; }
.single-product div.product p.stock {
	font-family: var(--font-mono);
	font-size: 12px;
	color: var(--slate-500);
}

/* COA callout — output by altitude_coa_callout() in inc/woocommerce.php */
.single-product .altitude-coa-callout {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 28px;
	padding: 16px 18px;
	border-radius: 14px;
	background: var(--navy-800);
	border: 1px solid rgba(255,255,255,.08);
}
.single-product .altitude-coa-callout .icon-wrap {
	width: 38px; height: 38px;
	border-radius: 10px;
	background: var(--navy-950);
	color: var(--cyan-400);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
.single-product .altitude-coa-callout .icon-wrap svg { width: 18px; height: 18px; }
.single-product .altitude-coa-callout p { font-size: 13.5px; color: var(--slate-700); }
.single-product .altitude-coa-callout a {
	font-weight: 600;
	color: var(--cyan-400);
}
.single-product .altitude-coa-callout a:hover { text-decoration: underline; }

/* Spec table — output by altitude_product_spec_table() in inc/woocommerce.php */
.single-product .spec-table {
	margin-top: 36px;
	border-top: 1px solid rgba(255,255,255,.1);
}
.single-product .spec-row {
	display: flex;
	justify-content: space-between;
	padding: 13px 0;
	border-bottom: 1px solid rgba(255,255,255,.08);
	font-size: 14px;
}
.single-product .spec-row span:first-child { color: var(--slate-500); }
.single-product .spec-row span:last-child { font-family: var(--font-mono); font-weight: 500; color: var(--ice-100); }

/* Product meta (SKU, categories, tags) — native, tucked below the fold */
.single-product div.product .product_meta {
	margin-top: 32px;
	padding-top: 20px;
	border-top: 1px solid rgba(255,255,255,.1);
	font-family: var(--font-mono);
	font-size: 12px;
	color: var(--slate-500);
}

@media (max-width: 980px) {
	.single-product div.product { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
	.single-product div.product { padding: 20px 0 56px; }
	.single-product div.product .woocommerce-product-gallery { padding: 36px; }
}