/*
 * SECTION:  Product page: hero (cover stage, title, price, buy box)
 * File:     assets/css/pages/product/sol-product-hero.css
 * Used by:  template-parts/product/sol-product-hero.php
 * To remove: delete this file and its line in inc/assets.php (handle "sol-product-hero").
 */

.sol-pdp__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 28px;
	align-items: start;
}

/* Cover stage: soft warm panel with two thin rings behind the book. */
.sol-pdp__stage {
	position: relative;
	display: grid;
	place-items: center;
	padding: clamp(28px, 6vw, 64px) clamp(20px, 5vw, 56px) clamp(24px, 4vw, 40px);
	overflow: hidden;
	border-radius: var(--sol-radius-lg);
	background: var(--sol-surface-alt);
	background:
		radial-gradient(110% 80% at 85% 0%, color-mix(in srgb, var(--sol-accent) 24%, transparent), transparent 62%),
		var(--sol-surface-alt);
}

.sol-pdp__stage::before,
.sol-pdp__stage::after {
	content: "";
	position: absolute;
	border: 1.5px solid color-mix(in srgb, var(--sol-accent) 55%, transparent);
	border-radius: 50%;
	pointer-events: none;
}

.sol-pdp__stage::before {
	width: 420px;
	height: 420px;
	top: -170px;
	right: -150px;
}

.sol-pdp__stage::after {
	width: 220px;
	height: 220px;
	bottom: -90px;
	left: -70px;
	opacity: 0.6;
}

.sol-pdp__stage .woocommerce-product-gallery {
	position: relative;
	z-index: 1;
	width: 100%;
	margin: 0;
}

.sol-pdp__stage .woocommerce-product-gallery__wrapper {
	margin: 0;
	padding: 0;
}

.sol-pdp__stage .woocommerce-product-gallery__image {
	display: grid;
	place-items: center;
}

.sol-pdp__stage .woocommerce-product-gallery__image img {
	width: auto;
	max-width: 100%;
	max-height: min(54vh, 420px);
	height: auto;
	border-radius: 3px 9px 9px 3px;
	box-shadow:
		0 2px 0 rgba(0, 0, 0, 0.08),
		0 30px 50px -24px rgba(0, 0, 0, 0.55),
		0 10px 20px -12px rgba(0, 0, 0, 0.35);
}

.sol-pdp__stage .flex-control-thumbs {
	display: flex;
	justify-content: center;
	gap: 10px;
	margin: 22px 0 0;
	padding: 0;
	list-style: none;
}

.sol-pdp__stage .flex-control-thumbs li {
	flex: 0 0 56px;
}

.sol-pdp__stage .flex-control-thumbs img {
	width: 100%;
	border: 2px solid transparent;
	border-radius: 5px;
	opacity: 0.65;
	cursor: pointer;
	transition: opacity var(--sol-fast) ease;
}

.sol-pdp__stage .flex-control-thumbs img.flex-active,
.sol-pdp__stage .flex-control-thumbs img:hover {
	border-color: var(--sol-accent);
	opacity: 1;
}

/* Zoom button. WooCommerce prints an empty link; the icon is drawn here. */
.sol-pdp__stage .woocommerce-product-gallery__trigger {
	position: absolute;
	top: 0;
	right: 0;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border: 1px solid var(--sol-line);
	border-radius: 50%;
	background: var(--sol-surface);
	color: var(--sol-text);
	font-size: 0;
	text-decoration: none;
}

.sol-pdp__stage .woocommerce-product-gallery__trigger::before {
	content: "";
	width: 18px;
	height: 18px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4-4'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4-4'/%3E%3C/svg%3E") center / contain no-repeat;
}

.sol-pdp__stage .woocommerce-product-gallery__trigger:hover {
	border-color: var(--sol-gold-text);
	color: var(--sol-gold-text);
}

/* Right column */
.sol-pdp__tags {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-bottom: 14px;
}

.sol-pdp__title {
	margin: 0 0 10px;
	font-size: clamp(2rem, 1.4rem + 2.6vw, 3.5rem);
	line-height: 1.08;
	overflow-wrap: anywhere;
}

.sol-pdp__author {
	margin: 0 0 14px;
	color: var(--sol-muted);
	font-size: 1.0625rem;
}

.sol-pdp__author a {
	color: var(--sol-gold-text);
	font-weight: 600;
	text-decoration-color: color-mix(in srgb, var(--sol-gold-text) 40%, transparent);
}

.sol-pdp__rating {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 14px;
	font-size: var(--sol-text-sm);
	text-decoration: none;
}

.sol-pdp__lead {
	max-width: 54ch;
	margin-bottom: 26px;
	color: var(--sol-muted);
	font-size: 1.0625rem;
	line-height: 1.7;
}

/* Buy box */
.sol-buy {
	padding: clamp(20px, 3vw, 30px);
	background: var(--sol-surface);
	border: 1px solid var(--sol-line);
	border-radius: var(--sol-radius-lg);
	box-shadow: 0 28px 50px -36px var(--sol-shadow);
}

.sol-buy__price-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 14px;
	margin-bottom: 20px;
}

.sol-buy__price {
	margin: 0;
	font: 600 clamp(2rem, 1.6rem + 1.4vw, 2.75rem)/1 var(--sol-font-serif);
	color: var(--sol-text);
}

.sol-buy__price del {
	margin-right: 6px;
	font: 400 1rem var(--sol-font-sans);
	color: var(--sol-muted);
}

.sol-buy__price ins {
	text-decoration: none;
}

.sol-stock {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 0 auto;
	font-size: 0.8125rem;
	font-weight: 600;
}

.sol-stock::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: currentColor;
}

.sol-stock.is-in  { color: var(--sol-success); }
.sol-stock.is-out { color: var(--sol-danger); }

/* Format buttons (made from the variation select by sol-product-variations.js) */
.sol-buy__form form.cart {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 12px;
	margin: 0;
}

.sol-buy__form form.cart.variations_form {
	display: block;
}

.sol-buy__form .variations {
	width: 100%;
	margin: 0 0 16px;
	border: 0;
}

.sol-buy__form .variations th,
.sol-buy__form .variations td {
	display: block;
	padding: 0 0 8px;
	border: 0;
	background: none;
	text-align: left;
}

.sol-buy__form .variations th label {
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--sol-muted);
}

.sol-buy__form .reset_variations {
	display: inline-block;
	margin-top: 6px;
	font-size: 0.8125rem;
}

.sol-buy__form select {
	width: 100%;
	min-height: 46px;
	padding: 0 12px;
	border: 1.5px solid var(--sol-line);
	border-radius: 10px;
	background: var(--sol-surface);
	color: var(--sol-text);
	font: inherit;
}

.sol-has-pills select {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

.sol-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.sol-pill {
	min-height: 46px;
	padding: 0 18px;
	border: 1.5px solid var(--sol-line);
	border-radius: 10px;
	background: var(--sol-surface);
	color: var(--sol-text);
	font: 600 0.875rem var(--sol-font-sans);
	cursor: pointer;
	transition: border-color var(--sol-fast) ease, box-shadow var(--sol-fast) ease;
}

.sol-pill:hover {
	border-color: var(--sol-gold-text);
}

.sol-pill[aria-pressed="true"] {
	border-color: var(--sol-accent);
	box-shadow: 0 0 0 1px var(--sol-accent);
}

.sol-buy__form .woocommerce-variation-add-to-cart {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 12px;
}

.sol-buy__form .woocommerce-variation-price {
	margin-bottom: 12px;
}

.sol-buy__form .quantity input.qty {
	width: 78px;
	height: 54px;
	border: 1.5px solid var(--sol-line);
	border-radius: 10px;
	background: var(--sol-surface);
	color: var(--sol-text);
	font: 600 1rem var(--sol-font-sans);
	text-align: center;
}

.sol-buy__form .single_add_to_cart_button {
	min-height: 54px;
	border: 0;
	border-radius: 10px;
	background: var(--sol-accent);
	color: var(--sol-accent-ink);
	font: 700 1rem var(--sol-font-sans);
	cursor: pointer;
	transition: transform var(--sol-fast) ease, filter var(--sol-fast) ease;
}

.sol-buy__form .single_add_to_cart_button::after {
	content: "\2192";
	margin-left: 10px;
}

.sol-buy__form .single_add_to_cart_button:hover {
	filter: brightness(0.95);
	transform: translateY(-1px);
}

.sol-buy__form .single_add_to_cart_button.disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

/* Promises */
.sol-assure {
	display: grid;
	gap: 0;
	margin: 22px 0 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--sol-line);
}

.sol-assure li {
	display: flex;
	gap: 14px;
	align-items: center;
	padding: 12px 0;
	border-bottom: 1px solid var(--sol-line);
	font-size: 0.8125rem;
	color: var(--sol-muted);
}

.sol-assure strong {
	display: block;
	color: var(--sol-text);
}

.sol-icon {
	flex: none;
	fill: none;
	stroke: var(--sol-gold-text);
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* Seller */
.sol-seller-card {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 18px;
	font-size: var(--sol-text-sm);
}

.sol-avatar--sm {
	width: 42px;
	height: 42px;
	font-size: 1.125rem;
}

.sol-seller-card__text {
	display: flex;
	flex-direction: column;
	min-width: 0;
	line-height: 1.3;
}

.sol-seller-card__link {
	margin-left: auto;
	color: var(--sol-gold-text);
	font-weight: 600;
	white-space: nowrap;
}

/* Two columns from tablet landscape up. The cover stays in view while the
   right column scrolls. --sol-sticky-top is set in sol-tokens.css. */
@media (min-width: 900px) {
	.sol-pdp__grid {
		grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
		gap: clamp(36px, 5vw, 72px);
	}

	.sol-pdp__media {
		position: sticky;
		top: var(--sol-sticky-top);
	}

	.sol-pdp__stage .woocommerce-product-gallery__image img {
		max-height: min(64vh, 560px);
	}

	.sol-assure {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 16px;
		border-top: 0;
	}

	.sol-assure li {
		flex-direction: column;
		align-items: flex-start;
		gap: 8px;
		padding: 16px 0 0;
		border-top: 1px solid var(--sol-line);
		border-bottom: 0;
	}
}

/* The seller and the author must follow the theme colors in light and dark mode. */
.sol-seller-card.sol-seller-card,
.sol-seller-card.sol-seller-card strong {
	color: var(--sol-text);
}

.sol-seller-card__text.sol-seller-card__text span {
	color: var(--sol-muted);
}