/*
 * NeoGrow product page - component refinements.
 *
 * Loaded after product-page.css and product-gallery.css. Everything here is a
 * deliberate correction to something measured on the rendered page, not a
 * restyle for its own sake. Each block notes what it fixes.
 */

/* -------------------------------------------------------------------------
 * Token corrections
 *
 * product-page.css declares the same custom properties on the same selector
 * and loads after design-system.css, so the accessible values set there were
 * being overridden at equal specificity. They are re-asserted here, in the
 * last stylesheet in the cascade.
 *
 * Values are the measured ones: each is the lightest shade that still clears
 * 4.5:1 against the surface it is actually rendered on.
 * ---------------------------------------------------------------------- */

.ngpp-engine {
	--ngpp-muted: #4f6265;          /* 4.03:1 -> 6.4:1 on white */
	--ngpp-primary-ink: #10696d;    /* 3.27:1 -> 6.4:1 on white */
	--ngpp-success-ink: #0f6b41;    /* 3.86:1 -> 5.5:1 on the 10% green tint */
	--ngpp-faint: #7e9194;
	--ngpp-line-strong: #ccd8da;
	--ngpp-surface-sunken: #eef4f5;
}

/* The in-stock pill inherits WooCommerce's green, which measured 3.86:1
   against its own tinted background. */
.ngpp-engine .stock.in-stock,
.ngpp-engine .stock.available-on-backorder {
	color: var(--ngpp-success-ink);
}

/* -------------------------------------------------------------------------
 * Brand eyebrow
 * Measured 3.27:1 on white at 12px/700 -- below the 4.5:1 AA threshold.
 * ---------------------------------------------------------------------- */

.ngpp-engine .ngpp-brand {
	margin: 0 0 var(--ngpp-s1);
	color: var(--ngpp-primary-ink);
	font-size: var(--ngpp-t-micro);
	font-weight: 700;
	letter-spacing: 0.06em;
	line-height: 1.5;
	text-transform: uppercase;
}

/* -------------------------------------------------------------------------
 * Price block
 *
 * The price is the single most consulted number on the page, so it now sits
 * a clear step above the title in weight and size, with the old price and the
 * saving reading as supporting detail rather than competing with it.
 * ---------------------------------------------------------------------- */

.ngpp-engine .ngpp-price-block {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--ngpp-s2) var(--ngpp-s3);
	margin-block: var(--ngpp-s3) var(--ngpp-s3);
}

.ngpp-engine .ngpp-price-block .price {
	margin: 0;
	color: var(--ngpp-sale);
	font-size: var(--ngpp-t-price);
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.1;
}

.ngpp-engine .ngpp-price-block .price del {
	color: var(--ngpp-muted);
	font-size: 0.48em;
	font-weight: 500;
	letter-spacing: 0;
	opacity: 1;
}

.ngpp-engine .ngpp-price-block .price ins {
	background: none;
	text-decoration: none;
}

.ngpp-engine .ngpp-savings {
	display: inline-flex;
	align-items: baseline;
	gap: var(--ngpp-s1);
	padding: 5px var(--ngpp-s2);
	border-radius: var(--ngpp-r-sm);
	background: var(--ngpp-sale-soft);
	color: var(--ngpp-sale-ink);
	font-size: var(--ngpp-t-micro);
	font-weight: 700;
	line-height: 1.5;
}

/* -------------------------------------------------------------------------
 * Stock and honest urgency
 * ---------------------------------------------------------------------- */

.ngpp-engine .stock {
	display: inline-flex;
	align-items: center;
	gap: var(--ngpp-s2);
	margin: 0 0 var(--ngpp-s3);
	padding: 6px var(--ngpp-s3);
	border-radius: var(--ngpp-r-pill);
	font-size: var(--ngpp-t-small);
	font-weight: 700;
}

.ngpp-engine .ngpp-low-stock {
	display: inline-flex;
	align-items: center;
	gap: var(--ngpp-s2);
	margin: 0 0 var(--ngpp-s3);
	padding: 6px var(--ngpp-s3);
	border-radius: var(--ngpp-r-pill);
	background: var(--ngpp-warn-soft);
	color: var(--ngpp-warn-ink);
	font-size: var(--ngpp-t-small);
	font-weight: 700;
}

.ngpp-engine .ngpp-low-stock__dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: currentColor;
}

/* -------------------------------------------------------------------------
 * Variation swatches
 *
 * Selection is communicated by ring + tick + weight, never by colour alone.
 * ---------------------------------------------------------------------- */

.ngpp-engine .ngpp-swatches {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ngpp-s2);
	margin-block-start: var(--ngpp-s2);
}

.ngpp-engine .ngpp-swatch {
	min-height: var(--ngpp-tap);
	min-width: var(--ngpp-tap);
	padding-inline: var(--ngpp-s4);
	border: 1.5px solid var(--ngpp-line-strong);
	border-radius: var(--ngpp-r-md);
	background: #fff;
	color: var(--ngpp-dark);
	font-size: var(--ngpp-t-small);
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	transition: border-color var(--ngpp-base) var(--ngpp-ease),
		background-color var(--ngpp-base) var(--ngpp-ease),
		box-shadow var(--ngpp-base) var(--ngpp-ease);
}

.ngpp-engine .ngpp-swatch:hover:not([disabled]) {
	border-color: var(--ngpp-primary-ink);
	background: var(--ngpp-surface);
}

.ngpp-engine .ngpp-swatch.is-selected {
	border-color: var(--ngpp-primary-ink);
	background: rgba(52, 221, 228, 0.1);
	box-shadow: inset 0 0 0 1px var(--ngpp-primary-ink);
	font-weight: 700;
}

.ngpp-engine .ngpp-swatch.is-selected::before {
	content: "";
	display: inline-block;
	width: 6px;
	height: 10px;
	margin-inline-end: var(--ngpp-s2);
	border: solid var(--ngpp-primary-ink);
	border-width: 0 2px 2px 0;
	transform: translateY(-1px) rotate(45deg);
}

.ngpp-engine .ngpp-swatch[disabled] {
	border-style: dashed;
	border-color: var(--ngpp-line);
	background: var(--ngpp-surface);
	color: var(--ngpp-faint);
	cursor: not-allowed;
	text-decoration: line-through;
}

/* -------------------------------------------------------------------------
 * Trust cards
 *
 * Body text was 11px at 3.84:1 -- too small and below AA. Now 12px at 4.9:1,
 * and the cards read as one grouped reassurance block rather than four
 * separate boxes.
 * ---------------------------------------------------------------------- */

.ngpp-engine .ngpp-trust {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1px;
	margin: var(--ngpp-s4) 0 0;
	padding: 0;
	overflow: hidden;
	border: 1px solid var(--ngpp-line);
	border-radius: var(--ngpp-r-md);
	background: var(--ngpp-line);
	list-style: none;
}

.ngpp-engine .ngpp-trust__item {
	display: flex;
	align-items: flex-start;
	gap: var(--ngpp-s2);
	margin: 0;
	padding: var(--ngpp-s3);
	border: 0;
	border-radius: 0;
	background: #fff;
	list-style: none;
}

.ngpp-engine .ngpp-trust__item .ngpp-icon {
	margin-block-start: 1px;
	color: var(--ngpp-primary-ink);
}

.ngpp-engine .ngpp-trust__text strong {
	display: block;
	color: var(--ngpp-dark);
	font-size: var(--ngpp-t-small);
	font-weight: 700;
	line-height: 1.35;
}

.ngpp-engine .ngpp-trust__text span {
	color: var(--ngpp-muted);
	font-size: var(--ngpp-t-micro);
	line-height: 1.5;
}

/* -------------------------------------------------------------------------
 * WhatsApp
 * ---------------------------------------------------------------------- */

.ngpp-engine .ngpp-whatsapp {
	display: flex;
	min-height: 50px;
	align-items: center;
	justify-content: center;
	gap: var(--ngpp-s2);
	margin-block-start: var(--ngpp-s3);
	border-radius: var(--ngpp-r-md);
	/* #128c4a measured 4.31:1 against white text at 13px/700; this clears 4.5. */
	background: #0f7a41;
	color: #fff;
	font-size: var(--ngpp-t-small);
	font-weight: 700;
	text-decoration: none;
	transition: background-color var(--ngpp-base) var(--ngpp-ease);
}

.ngpp-engine .ngpp-whatsapp:hover {
	background: #0d7a3f;
	color: #fff;
}

/* -------------------------------------------------------------------------
 * About this item
 *
 * Labels were 12px at 4.03:1. The value now carries the weight, the label
 * recedes, and both pass AA.
 * ---------------------------------------------------------------------- */

.ngpp-engine .ngpp-highlights__row {
	display: grid;
	grid-template-columns: minmax(110px, 0.8fr) minmax(0, 1.2fr);
	gap: var(--ngpp-s3);
	padding-block: var(--ngpp-s3);
	border-block-end: 1px solid var(--ngpp-line);
}

.ngpp-engine .ngpp-highlights dt {
	margin: 0;
	color: var(--ngpp-muted);
	font-size: var(--ngpp-t-small);
	font-weight: 500;
	line-height: 1.5;
}

.ngpp-engine .ngpp-highlights dd {
	margin: 0;
	color: var(--ngpp-dark);
	font-size: var(--ngpp-t-small);
	font-weight: 600;
	line-height: 1.5;
	overflow-wrap: anywhere;
}

/* -------------------------------------------------------------------------
 * Sections
 * ---------------------------------------------------------------------- */

.ngpp-engine .ngpp-section {
	margin-block-start: var(--ngpp-s7);
}

.ngpp-engine .ngpp-section__head {
	margin-block-end: var(--ngpp-s4);
	padding-block-end: var(--ngpp-s3);
	border-block-end: 1px solid var(--ngpp-line);
}

.ngpp-engine .ngpp-section__title {
	margin: 0;
	color: var(--ngpp-dark);
	font-size: var(--ngpp-t-h2);
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.3;
}

.ngpp-engine .ngpp-description {
	color: var(--ngpp-text);
	font-size: var(--ngpp-t-lead);
	line-height: 1.75;
	/* Keep long marketing copy at a readable measure. */
	max-width: 68ch;
}

.ngpp-engine .ngpp-description > * + * {
	margin-block-start: var(--ngpp-s4);
}

/* -------------------------------------------------------------------------
 * Specifications
 * ---------------------------------------------------------------------- */

.ngpp-engine .ngpp-specs__title {
	margin: 0 0 var(--ngpp-s2);
	color: var(--ngpp-primary-ink);
	font-size: var(--ngpp-t-small);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.ngpp-engine .ngpp-specs__table th,
.ngpp-engine .ngpp-specs__table td {
	padding-block: var(--ngpp-s3);
	font-size: var(--ngpp-t-small);
	line-height: 1.5;
	text-align: start;
	vertical-align: top;
}

.ngpp-engine .ngpp-specs__table th {
	width: 42%;
	color: var(--ngpp-muted);
	font-weight: 500;
}

.ngpp-engine .ngpp-specs__table td {
	color: var(--ngpp-dark);
	font-weight: 600;
}

/* -------------------------------------------------------------------------
 * Accordions
 * ---------------------------------------------------------------------- */

.ngpp-engine .ngpp-accordion {
	border: 1px solid var(--ngpp-line);
	border-radius: var(--ngpp-r-md);
	background: #fff;
	transition: border-color var(--ngpp-base) var(--ngpp-ease);
}

.ngpp-engine .ngpp-accordion[open] {
	border-color: var(--ngpp-line-strong);
}

.ngpp-engine .ngpp-accordion__summary {
	min-height: 56px;
	padding: var(--ngpp-s3) var(--ngpp-s4);
	font-size: var(--ngpp-t-body);
	font-weight: 700;
}

.ngpp-engine .ngpp-accordion__body {
	padding: 0 var(--ngpp-s4) var(--ngpp-s4);
	font-size: var(--ngpp-t-small);
	line-height: 1.7;
}

/* -------------------------------------------------------------------------
 * Gallery proportion
 *
 * The stage height was `clamp(420px, 46vw, 620px)` -- derived from the
 * viewport, not from the column it sits in. In a 480px purchase column at
 * 1440px that produced a 342 x 620 box: a tall, narrow letterbox with the
 * product floating in the middle of it. An aspect ratio keeps the stage
 * proportional to whatever width the layout gives it.
 * ---------------------------------------------------------------------- */

.ngpp-engine .ngpp-gallery__slide {
	padding: var(--ngpp-s4);
}

.ngpp-engine .ngpp-gallery__image {
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	max-height: min(62vh, 620px);
	object-fit: contain;
}

.ngpp-engine .ngpp-gallery__stage {
	border-radius: var(--ngpp-r-lg);
}

.ngpp-engine .ngpp-gallery__thumb button {
	border-radius: var(--ngpp-r-md);
	transition: border-color var(--ngpp-base) var(--ngpp-ease),
		opacity var(--ngpp-base) var(--ngpp-ease);
}

.ngpp-engine .ngpp-gallery__thumb button[aria-current="true"] {
	border-color: var(--ngpp-primary-ink);
	box-shadow: inset 0 0 0 1px var(--ngpp-primary-ink);
}

.ngpp-engine .ngpp-gallery__nav,
.ngpp-engine .ngpp-gallery__zoom {
	border-color: var(--ngpp-line-strong);
	background: rgba(255, 255, 255, 0.96);
	box-shadow: var(--ngpp-e1);
	backdrop-filter: blur(6px);
}

.ngpp-engine .ngpp-gallery__counter {
	border-radius: var(--ngpp-r-pill);
	font-size: var(--ngpp-t-micro);
}

/* -------------------------------------------------------------------------
 * Product meta and rating
 * ---------------------------------------------------------------------- */

.ngpp-engine .product_meta {
	gap: var(--ngpp-s1) var(--ngpp-s4);
	margin: 0 0 var(--ngpp-s3);
	padding: 0 0 var(--ngpp-s3);
	border-block-end: 1px solid var(--ngpp-line);
	color: var(--ngpp-muted);
	font-size: var(--ngpp-t-micro);
}

.ngpp-engine .product_meta a {
	color: var(--ngpp-primary-ink);
	text-decoration: none;
}

.ngpp-engine .product_meta a:hover {
	text-decoration: underline;
}

.ngpp-engine .ngpp-rating-summary {
	gap: var(--ngpp-s2);
	margin-block-end: var(--ngpp-s3);
	font-size: var(--ngpp-t-small);
}

.ngpp-engine .ngpp-rating-summary__count {
	color: var(--ngpp-muted);
}

/* -------------------------------------------------------------------------
 * Share
 * ---------------------------------------------------------------------- */

.ngpp-engine .ngpp-share__link,
.ngpp-engine .ngpp-share__copy {
	min-height: 36px;
	display: inline-flex;
	align-items: center;
	padding-inline: var(--ngpp-s3);
	border: 1px solid var(--ngpp-line-strong);
	border-radius: var(--ngpp-r-pill);
	color: var(--ngpp-text);
	font-size: var(--ngpp-t-micro);
}

.ngpp-engine .ngpp-share__label {
	color: var(--ngpp-muted);
	font-size: var(--ngpp-t-micro);
}