/*
 * Single Product styles — NPM Refinery
 *
 * Uses the theme's own design tokens (theme.json presets + the
 * conventions already established in assets/css/custom.css) rather than
 * one-off values, so this stays in sync if the palette/type scale ever
 * changes:
 *   --wp--preset--color--primary     Deep Green  #182B0F
 *   --wp--preset--color--accent      Bronze      #BA9A52
 *   --wp--preset--color--secondary   Gray        #ACAEAF
 *   --wp--preset--color--contrast    Charcoal    #3D3D3C
 *   --wp--preset--color--background  Cream       #EDEDEB
 *   --wp--preset--color--base        White       #FFFFFF
 *   --wp--preset--font-family--heading  'Baskervville Bold', Georgia, serif
 *   --wp--preset--font-family--body     Metropolis, sans-serif
 *   --wp--preset--font-size--{small,medium,large,x-large,xx-large}
 */

/* ---- Layout ---- */

.npm-single-product {
	display: grid;
	grid-template-columns: minmax(280px, 440px) 1fr;
	gap: 3rem;
	max-width: var(--wp--style--global--wide-size, 1240px);
	margin: 0 auto;
	padding: 3rem 1.5rem 4rem;
}

@media (max-width: 782px) {
	.npm-single-product {
		grid-template-columns: 1fr;
		padding: 2rem 1rem 3rem;
		gap: 2rem;
	}
}

/* ---- Gallery ---- */

.npm-single-product__gallery {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.npm-single-product__main-image {
	/* Fixed square box regardless of source photo's aspect ratio —
	   otherwise swapping thumbnails resized the box and shifted the
	   page layout on every click. contain + padding keeps each photo
	   fully visible and consistently sized, same fix as the thumbs. */
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	box-sizing: border-box;
	padding: 1.5rem;
	object-fit: contain;
	background-color: var(--wp--preset--color--base);
	border: 1px solid rgba(23, 38, 17, 0.12); /* matches .card in style.css */
	border-radius: 6px; /* matches .card in style.css */
}

.npm-single-product__thumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

.npm-single-product__thumb {
	/* Product photos come in mixed orientations with their own white
	   margins, so cover crops unevenly between them — contain plus a
	   solid background shows each photo whole and consistently framed. */
	flex: 0 0 auto;
	width: 84px;
	height: 84px;
	box-sizing: border-box;
	padding: 0.4rem;
	object-fit: contain;
	background-color: var(--wp--preset--color--base);
	border-radius: 6px; /* matches .card in style.css */
	cursor: pointer;
	border: 1px solid rgba(23, 38, 17, 0.12); /* matches .card in style.css */
	opacity: 0.7;
	transition: all ease 0.25s; /* site-wide hover transition */
}

.npm-single-product__thumb:hover,
.npm-single-product__thumb.is-active {
	opacity: 1;
	border-color: var(--wp--preset--color--accent);
}

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

.npm-single-product__title {
	font-family: var(--wp--preset--font-family--body);
	font-weight: 600;
	color: var(--wp--preset--color--primary);
	font-size: var(--wp--preset--font-size--x-large);
	line-height: 1.2;
	margin: 0 0 1rem;
}

@media (max-width: 782px) {
	.npm-single-product__title {
		font-size: var(--wp--preset--font-size--large);
	}
}

.npm-single-product__short-description {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--medium);
	color: var(--wp--preset--color--contrast);
	line-height: 1.65;
	margin-bottom: 1.75rem;
}

.npm-single-product__short-description p {
	margin: 0 0 0.75rem;
}

.npm-single-product__specs {
	list-style: none;
	margin: 0 0 2rem;
	padding: 0;
	border-top: 1px solid var(--wp--preset--color--secondary);
}

.npm-single-product__spec {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.7rem 0;
	border-bottom: 1px solid var(--wp--preset--color--secondary);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--contrast);
}

.npm-single-product__spec-label {
	font-weight: 400;
	color: var(--wp--preset--color--primary);
}

.npm-single-product__description {
	font-family: var(--wp--preset--font-family--body);
	line-height: 1.75;
	color: var(--wp--preset--color--contrast);
	margin-bottom: 2rem;
}

/* ---- CTA button — same accent/base hover swap as the header
   "Contact Us" button so the two read as the same component. */

.npm-single-product__cta {
	display: inline-block;
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--body);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--medium);
	text-decoration: none;
	padding: 0.9em 2em;
	border-radius: 5px;
	transition: all ease 0.25s;
}

.npm-single-product__cta:hover,
.npm-single-product__cta:focus-visible {
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--primary);
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--primary);
}

/* ---- Specifications — purity + weight/shape availability, same
   two-column label/value table for every category, pasted in via the
   specifications WYSIWYG field. Sits under the specs list rather than
   as its own section, keeping the same table shape across products. */

.npm-specifications {
	margin: 1.5rem 0 2rem;
}

.npm-specifications__title {
	font-family: var(--wp--preset--font-family--heading);
	color: var(--wp--preset--color--primary);
	font-size: var(--wp--preset--font-size--medium);
	margin: 0 0 0.75rem;
}

.npm-specifications__content {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--contrast);
}

/* Same row style as .npm-single-product__specs above rather than a
   boxed table — reads as a continuation of the Metal/Category rows. */

.npm-specifications__content table {
	display: block;
	width: 100%;
	border-collapse: collapse;
	border-top: 1px solid var(--wp--preset--color--secondary);
}

.npm-specifications__content tbody {
	display: block;
	width: 100%;
}

.npm-specifications__content tr {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	width: 100%;
	padding: 0.7rem 0;
	border-bottom: 1px solid var(--wp--preset--color--secondary);
}

.npm-specifications__content tr:last-child {
	border-bottom: none;
}

.npm-specifications__content td {
	display: block;
	padding: 0;
	border: none;
}

.npm-specifications__content td:first-child {
	font-weight: 400;
	color: var(--wp--preset--color--primary);
	white-space: nowrap;
}

.npm-specifications__content td:last-child {
	text-align: right;
	color: var(--wp--preset--color--contrast);
}

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

.npm-related-products {
	max-width: var(--wp--style--global--wide-size, 1240px);
	margin: 0 auto;
	padding: 0 1.5rem 4rem;
}

.npm-related-products__title {
	font-family: var(--wp--preset--font-family--heading);
	color: var(--wp--preset--color--primary);
	font-size: var(--wp--preset--font-size--large);
	margin: 0 0 1.5rem;
	text-align: center;
}

.npm-grid[data-post-type="product"] {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
	gap: 1.75rem;
}

.npm-grid[data-post-type="product"] .npm-grid__item {
	display: block;
	text-decoration: none;
	color: inherit;
	text-align: center;
	background-color: var(--wp--preset--color--base);
	border: 1px solid rgba(23, 38, 17, 0.12); /* matches .card in style.css */
	border-radius: 6px; /* matches .card in style.css */
	padding: 1.25rem 1rem 1.5rem;
	transition: all ease 0.25s; /* site-wide hover transition */
}

.npm-grid[data-post-type="product"] .npm-grid__item:hover {
	border-color: var(--wp--preset--color--accent);
	box-shadow: 0 6px 16px rgba(23, 38, 17, 0.08);
	transform: translateY(-2px);
}

.npm-grid[data-post-type="product"] .npm-grid__image {
	/* Wraps an <img>, so object-fit has to go on the <img> itself below
	   — a no-op on a div. Fixing the box to a set ratio and forcing the
	   image to fill + contain matches the single-product thumbs/main
	   image treatment, keeping cards from looking mismatched. */
	width: 100%;
	aspect-ratio: 1;
	overflow: hidden;
	margin-bottom: 0.9rem;
	object-fit: contain;
}

.npm-grid[data-post-type="product"] .npm-grid__image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.npm-grid[data-post-type="product"] .npm-grid__title {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	color: var(--wp--preset--color--primary);
}

.npm-grid[data-post-type="product"] .npm-grid__item:hover .npm-grid__title {
	color: var(--wp--preset--color--accent);
}

@media (max-width: 600px) {
	.npm-grid[data-post-type="product"] .npm-grid__title {
		font-size: var(--wp--preset--font-size--medium);
	}
}