/*
 * The single product page.
 *
 * Reference: work/pic7/pic9.jpeg for the shape, and the 2026-08-06 brief for the geometry, which it
 * calls non-negotiable: the strength control, the quantity control, the CTA, the shipping pill and
 * the research-use panel all share one left edge, and the pill and the panel are exactly the CTA's
 * width.
 *
 * Layout is Blocksy's. It puts the gallery and the summary side by side inside
 * .product-entry-wrapper and constrains the width itself. An earlier version added a grid here,
 * which fought that and stretched the product across the whole viewport. Nothing in this file lays
 * anything out; it sets type, spacing and controls.
 */

/* The information column ---------------------------------------------------- */

.woocommerce div.product .product_title {
	margin: 0 0 var(--akem-space-2);
	font-size: var(--akem-size-micro);
	font-weight: 600;
	letter-spacing: var(--akem-tracking-wide);
	line-height: var(--akem-leading-tight);
	text-transform: uppercase;
	color: var(--akem-ink);
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
	margin: 0 0 var(--akem-space-4);
	font-size: var(--akem-size-small);
	font-weight: 400;
	color: var(--akem-ink);
}

.woocommerce div.product .woocommerce-product-details__short-description {
	margin: 0 0 var(--akem-space-3);
	font-size: var(--akem-size-small);
	line-height: var(--akem-leading-body);
	color: var(--akem-grey);
}

/* Strength selector. The brief's grouping: small grey label, then the control. */

.woocommerce div.product form.variations_form table.variations {
	margin: 0 0 var(--akem-space-3);
	border: 0;
}

.woocommerce div.product table.variations th,
.woocommerce div.product table.variations td {
	padding: 0 0 var(--akem-space-2);
	border: 0;
	text-align: left;
	vertical-align: middle;
}

.woocommerce div.product table.variations th.label label {
	margin: 0;
	font-size: 13px;
	line-height: 18px;
	font-weight: 500;
	color: var(--akem-grey);
}

.woocommerce div.product table.variations select {
	width: 100%;
	height: var(--akem-control-height);
	padding-inline: var(--akem-space-2);
	font-size: var(--akem-size-small);
	color: var(--akem-ink);
	background: var(--akem-surface);
	border: 1px solid var(--akem-line);
	border-radius: 0;
}

.woocommerce div.product table.variations select:focus-visible {
	outline: 3px solid var(--akem-blue-focus);
	outline-offset: 2px;
}

.woocommerce div.product .woocommerce-variation-price {
	margin-block-end: var(--akem-space-3);
}

/* Shipping pill and research-use panel -------------------------------------- */

.akem-buy {
	margin-block-start: var(--akem-space-3);
}

/* A lighter hue of the brand blue, as Michael asked, rather than the outlined pill the brief
   first described. Same width as the CTA above it, and it may not protrude on either side. */
.akem-buy__pill {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--akem-space-3);
	width: 100%;
	min-height: var(--akem-control-height);
	padding-inline: var(--akem-space-4);
	background: var(--akem-blue-soft);
	border-radius: var(--akem-radius-pill);
}

.akem-buy__pill-item {
	font-size: var(--akem-size-nano);
	line-height: var(--akem-leading-tight);
	color: var(--akem-ink);
}

.akem-buy__notice {
	width: 100%;
	margin-block: var(--akem-space-3) 0;
	padding: 20px;
	font-size: var(--akem-size-nano);
	line-height: var(--akem-leading-body);
	color: var(--akem-grey);
	background: var(--akem-canvas);
	border-radius: var(--akem-radius);
}

@media (max-width: 480px) {
	.akem-buy__pill {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--akem-space-1);
		padding-block: var(--akem-space-3);
		border-radius: var(--akem-radius);
	}
}

/* The reserved media well ---------------------------------------------------
   With no photograph the gallery has nothing in it and collapses to zero height, which drops the
   information column to the top of the page. The brief asks for a reserved blank well, so the
   space is held and left empty. It gives way the moment a real image is attached. */

.woocommerce div.product .woocommerce-product-gallery {
	position: relative;
	aspect-ratio: var(--akem-tile-ratio);
	background: var(--akem-well);
}

.woocommerce div.product .woocommerce-product-gallery:has(img) {
	aspect-ratio: auto;
	background: none;
}

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