/*
 * Solvagio Product Details: the product page template, drawn to look as the hand-typed block
 * did (drinkforlife's CHARACTERISTICS / PRODUCT SHORT DESC styles). Every rule is scoped to
 * .spd or .spd-awards, so nothing here styles anything else on the site. The colour is the
 * theme's (--primary), falling back to the block's own blue.
 */
.spd {
	--spd-line: var(--primary, #21648b);
}
.spd-sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}
.spd > dl,
.spd dd {
	margin: 0;
	padding: 0;
}
.spd__heading {
	margin: 0 0 0.35rem;
	font-size: 1rem;
	font-weight: 700;
	text-transform: uppercase;
	line-height: 1.1;
}

/* The grid: two cells a row on a wide screen, a line under each row and between the two. */
.spd__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
}
.spd__cell {
	display: flex;
	flex-direction: column;
	/* Every cell starts at the top, so the two cells of a row begin on the same line. */
	justify-content: flex-start;
	padding: 1rem 10px;
	border-bottom: 2px solid var(--spd-line);
	text-align: center;
}
@media (min-width: 768px) {
	.spd__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.spd__cell:nth-child(odd):not(:last-child) {
		border-right: 2px solid var(--spd-line);
	}
}

/* No line under the grid's last row when the grid ends the block; a flavours or pairing row
   keeps its closing line. Below 1024px the awards come after the details, so there the line
   stays to separate them; on a wide screen they sit under the image instead. */
.spd > .spd__grid:not(:has(~ .spd__row, ~ .spd__ratings, ~ .spd-awards)) > .spd__cell:last-child {
	border-bottom: 0;
}
@media (min-width: 768px) {
	.spd > .spd__grid:not(:has(~ .spd__row, ~ .spd__ratings, ~ .spd-awards)) > .spd__cell:nth-last-child(2):nth-child(odd) {
		border-bottom: 0;
	}
}
@media (min-width: 1024px) {
	.spd > .spd__grid:not(:has(~ .spd__row, ~ .spd__ratings)) > .spd__cell:last-child,
	.spd > .spd__grid:not(:has(~ .spd__row, ~ .spd__ratings)) > .spd__cell:nth-last-child(2):nth-child(odd) {
		border-bottom: 0;
	}
}

/* Origin and colour: the picture over its words. */
.spd__pic {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
}
.spd__flag,
.spd__swatch {
	display: block;
	width: 70px;
	height: auto;
	border-radius: 8px;
}

/* A detail: its icon and title over its text; every icon gets the same box, so the titles in a
   row line up. */
.spd__detail-title {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	padding-bottom: 10px;
	font-weight: 700;
	text-transform: uppercase;
	line-height: 1.1;
}
.spd__detail-icon {
	width: 70px;
	height: 70px;
	object-fit: contain;
}

/* A fact: the value over its label (the label comes first for a screen reader, hence the reversed
   column, whose top is its end). */
.spd__cell--fact {
	flex-direction: column-reverse;
	justify-content: flex-end;
}
.spd__fact-value {
	padding-bottom: 10px;
	font-weight: 700;
	text-transform: uppercase;
	line-height: 1.1;
}
.spd__fact-label {
	font-weight: 400;
}
.spd__fact-note {
	display: block;
}

/* Flavours and pairings: the icons beside the heading and the names. */
.spd__row {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 2rem;
	padding: 2rem 0;
	border-bottom: 2px solid var(--spd-line);
}
.spd__icons {
	display: grid;
	grid-template-columns: repeat(3, auto);
	gap: 10px;
	align-items: center;
	justify-items: center;
}
.spd__term-icon {
	width: 40px;
	height: 40px;
	object-fit: contain;
}
.spd__row-text {
	/* As wide as the names need (wrapping only when the row is full), so icons and text stay
	   centred together. */
	flex: 0 1 auto;
	line-height: 1.1;
	text-align: center;
}
.spd__names {
	margin: 0;
}
@media (max-width: 767px) {
	.spd__term-icon {
		width: 30px;
		height: 30px;
	}
}

/* Ratings: two to a row, the label and five dots; the value is read out as text. */
.spd > .spd__ratings {
	display: grid;
	grid-template-columns: 1fr;
	gap: 40px;
	padding: 20px;
}
@media (min-width: 768px) {
	.spd > .spd__ratings {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 40px;
	}
}
.spd__rating {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}
.spd__rating-label {
	font-weight: 700;
	white-space: nowrap;
}
.spd__dots {
	display: flex;
	gap: 5px;
}
.spd__dot {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: rgba(33, 100, 139, 0.2);
	background: color-mix(in srgb, var(--spd-line) 20%, transparent);
}
.spd__dot--on {
	background: var(--spd-line);
}

/* Awards: centred, up to four to a row (a short last row stays centred), each in the same square
   box of at most 96px, whatever the image's shape. On a phone they come after the details; on a
   wide screen they sit under the product image, and the copy inside the details is hidden. */
.spd-awards {
	margin-top: 2rem;
	text-align: center;
}
.spd-awards__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.75rem;
	max-width: calc(4 * 96px + 3 * 0.75rem);
	margin: 0 auto;
	padding: 0;
	list-style: none;
}
.spd-awards__item {
	width: min(96px, calc((100% - 3 * 0.75rem) / 4));
}
.spd-awards__img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: contain;
}
.spd-awards--desktop {
	display: none;
}
@media (min-width: 1024px) {
	.spd-awards--mobile {
		display: none;
	}
	/* As wide as the product image (WooCommerce's single-image width, 600px on this site), so the
	   awards centre under the bottle, not under the wider gallery column. */
	.spd-awards--desktop {
		display: block;
		max-width: 600px;
		margin-top: 1rem;
	}
	/* The theme floats the gallery left and the summary right, each half the width (the site's
	   Additional CSS sets 50% with !important, hence the !important here). With awards present
	   the three are placed on a grid of two equal columns instead, so the awards sit under the
	   image whatever the summary's height. A browser without :has() shows them between the two,
	   still readable. */
	.single-product div.product .content-single-wrapper:has(> .spd-awards--desktop) {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		/* The first row is only as tall as the image, so the awards start right under it; the
		   summary's extra height goes to the second row. */
		grid-template-rows: auto 1fr;
		align-items: start;
	}
	.single-product div.product .content-single-wrapper:has(> .spd-awards--desktop) > .woocommerce-product-gallery {
		grid-column: 1;
		grid-row: 1;
		width: auto !important;
		float: none;
		/* WooCommerce's own space under the gallery; the awards bring their own. */
		margin-bottom: 0;
	}
	.single-product div.product .content-single-wrapper:has(> .spd-awards--desktop) > .spd-awards--desktop {
		grid-column: 1;
		grid-row: 2;
	}
	.single-product div.product .content-single-wrapper:has(> .spd-awards--desktop) > .summary {
		grid-column: 2;
		grid-row: 1 / span 2;
		width: auto !important;
		float: none;
	}
	.single-product div.product .content-single-wrapper:has(> .spd-awards--desktop)::after {
		display: none;
	}
}