/* ============================================================
   SHOP VIVA HUB — Single product page
   Loaded only on product pages (see inc/enqueue.php).

   Layout (WooCommerce's own markup, no template override):
     div.product
       ├─ span.onsale                  (positioned over the gallery)
       ├─ .woocommerce-product-gallery (left column)
       ├─ .summary                     (right column: title, price, buy buttons)
       ├─ .woocommerce-tabs            (full width, directly below)
       └─ section.related / .upsells   (full width)

   Root cause of the old "image pushed to the right" bug: span.onsale was a
   grid item, so it took the first column and shoved the gallery into the
   second. It is now absolutely positioned, so only the gallery and the
   summary occupy the two columns.
   ============================================================ */

/* ---------- Page grid ---------- */
.single-product div.product {
	--svh-pt: 16px;
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 28px;
	align-items: start;
	padding: var(--svh-pt) 0 40px;
}

@media (min-width: 900px) {
	.single-product div.product {
		--svh-pt: 28px;
		grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
		column-gap: clamp(32px, 4vw, 56px);
		row-gap: 44px;
	}
	.single-product div.product > .woocommerce-product-gallery { grid-column: 1; grid-row: 1; }
	.single-product div.product > .summary { grid-column: 2; grid-row: 1; }
}

.single-product div.product > .woocommerce-tabs,
.single-product div.product > .related,
.single-product div.product > .upsells {
	grid-column: 1 / -1;
	min-width: 0;
}

/* ---------- Sale badge ---------- */
.single-product div.product > .onsale {
	position: absolute;
	top: calc(var(--svh-pt) + 14px);
	left: 14px;
	z-index: 6;
	background: var(--svh-sale);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	line-height: 1;
	padding: 7px 13px;
	border-radius: 999px;
	min-width: 0;
	min-height: 0;
	margin: 0;
}

/* ---------- Gallery ---------- */
.single-product .woocommerce-product-gallery {
	position: relative;
	margin: 0;
	padding: 0;
	background: var(--svh-surface);
	border: 1px solid var(--svh-border);
	border-radius: 20px;
	overflow: hidden;
	/* WooCommerce renders the gallery with inline opacity:0 and reveals it
	   with JS; force it visible so a slow/failed script never hides it. */
	opacity: 1 !important;
}
.single-product .woocommerce-product-gallery__wrapper { margin: 0; padding: 0; }
.single-product .woocommerce-product-gallery__image { margin: 0; background: var(--svh-bg-alt); }
.single-product .woocommerce-product-gallery__image img {
	display: block;
	width: 100%;
	height: auto;
	margin: 0;
}

/* Zoom button (WooCommerce prints a 🔍 emoji; replace with a clean icon) */
.single-product .woocommerce-product-gallery__trigger {
	position: absolute;
	top: 14px;
	right: 14px;
	z-index: 6;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	font-size: 0;
	line-height: 0;
	text-indent: 0;
	background: var(--svh-surface);
	border: 1px solid var(--svh-border);
	border-radius: 50%;
	box-shadow: 0 4px 14px rgba(15, 42, 32, 0.12);
	transition: transform 0.15s ease, box-shadow 0.2s ease;
}
.single-product .woocommerce-product-gallery__trigger::before {
	content: "";
	width: 18px;
	height: 18px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f5f47' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5M11 8v6M8 11h6'/%3E%3C/svg%3E") center / contain no-repeat;
}
.single-product .woocommerce-product-gallery__trigger:hover { transform: scale(1.06); }

/* Thumbnail strip (appears when a product has several images) */
.single-product .flex-control-thumbs {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 10px;
	list-style: none;
	margin: 0;
	padding: 12px;
	border-top: 1px solid var(--svh-border);
	background: var(--svh-surface);
}
.single-product .flex-control-thumbs li { margin: 0; padding: 0; float: none; width: auto; }
.single-product .flex-control-thumbs img {
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 10px;
	border: 2px solid transparent;
	opacity: 0.6;
	cursor: pointer;
	transition: opacity 0.2s ease, border-color 0.2s ease;
}
.single-product .flex-control-thumbs img:hover,
.single-product .flex-control-thumbs img.flex-active {
	opacity: 1;
	border-color: var(--svh-green);
}

/* ---------- Summary (purchase panel) ---------- */
.single-product .summary {
	min-width: 0;
	float: none;
	width: auto;
}

.single-product .svh-digital-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0 0 12px;
	padding: 6px 12px;
	font-size: 0.78rem;
	font-weight: 700;
	color: var(--svh-green);
	background: var(--svh-bg-alt);
	border-radius: 999px;
}

.single-product .summary .product_title {
	font-size: clamp(1.5rem, 2.6vw, 2.25rem);
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: var(--svh-ink);
	margin: 0 0 12px;
	overflow-wrap: anywhere;
}

/* Rating (CSS-drawn stars — WooCommerce's star font isn't loaded) */
.single-product .woocommerce-product-rating {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 14px;
	font-size: 0.9rem;
	color: var(--svh-muted);
}
.star-rating {
	position: relative;
	display: inline-block;
	overflow: hidden;
	width: 5.5em;
	height: 1.1em;
	font-size: 1rem;
	line-height: 1.1em;
	margin: 0;
}
.star-rating::before {
	content: "\2605\2605\2605\2605\2605";
	position: absolute;
	top: 0;
	left: 0;
	color: #d9e0dc;
	letter-spacing: 0;
}
.star-rating span {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	overflow: hidden;
	font-size: 0; /* hides the "Rated x out of 5" text visually */
}
.star-rating span::before {
	content: "\2605\2605\2605\2605\2605";
	position: absolute;
	top: 0;
	left: 0;
	font-size: 1rem;
	white-space: nowrap;
	color: var(--svh-star);
}
.single-product .woocommerce-review-link { color: var(--svh-ink-soft); text-decoration: underline; }

/* Price */
.single-product .summary .price {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 4px 12px;
	margin: 0 0 6px;
	font-size: clamp(1.7rem, 3.2vw, 2.25rem);
	font-weight: 800;
	line-height: 1.1;
	color: var(--svh-green);
}
.single-product .summary .price ins { order: 1; text-decoration: none; color: var(--svh-green); }
.single-product .summary .price del {
	order: 2;
	font-size: 0.55em;
	font-weight: 500;
	color: var(--svh-muted);
	opacity: 1;
}
.svh-price-extras {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px 12px;
	margin: 0 0 20px;
}
.svh-save-badge {
	display: inline-block;
	padding: 4px 10px;
	font-size: 0.78rem;
	font-weight: 700;
	color: #fff;
	background: var(--svh-sale);
	border-radius: 999px;
}
.svh-price-note { font-size: 0.85rem; color: var(--svh-muted); }

/* Short description: clamp paragraphs, keep the "read more" link visible */
.single-product .woocommerce-product-details__short-description {
	margin: 0 0 22px;
	font-size: 1rem;
	line-height: 1.7;
	color: var(--svh-ink-soft);
}
.single-product .woocommerce-product-details__short-description p {
	margin: 0 0 8px;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 4;
	overflow: hidden;
}
.svh-read-more-link {
	display: inline-block;
	font-size: 0.88rem;
	font-weight: 700;
	color: var(--svh-green) !important;
}
.svh-read-more-link:hover { text-decoration: underline; }

/* ---------- Purchase buttons ---------- */
.single-product form.cart {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 12px;
	margin: 0 0 22px;
}
.single-product form.cart .quantity { margin: 0; }
.single-product form.cart .quantity input.qty {
	width: 84px;
	height: 100%;
	min-height: 54px;
	padding: 0 12px;
	text-align: center;
	font: inherit;
	font-weight: 600;
	color: var(--svh-ink);
	background: var(--svh-surface);
	border: 1.5px solid var(--svh-border);
	border-radius: 12px;
}

.single-product .single_add_to_cart_button,
.single-product .svh-buy-now--single {
	flex: 1 1 180px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 54px;
	padding: 14px 24px;
	font-family: inherit;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	border-radius: 12px;
	cursor: pointer;
	box-sizing: border-box;
	transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease, filter 0.2s ease;
}

/* Add to Cart = secondary (outlined) */
.single-product .single_add_to_cart_button {
	color: var(--svh-ink);
	background: var(--svh-surface);
	border: 1.5px solid var(--svh-ink);
}
.single-product .single_add_to_cart_button:hover {
	color: #fff;
	background: var(--svh-ink);
	transform: translateY(-1px);
}

/* Buy Now = primary (filled) */
.single-product .svh-buy-now--single {
	color: #fff !important;
	background: var(--svh-gradient-cta);
	border: 1.5px solid transparent;
	box-shadow: var(--svh-shadow-glow);
}
.single-product .svh-buy-now--single:hover {
	transform: translateY(-1px);
	filter: brightness(1.06);
	box-shadow: 0 14px 30px -10px rgba(31, 95, 71, 0.7);
}
.single-product .single_add_to_cart_button:focus-visible,
.single-product .svh-buy-now--single:focus-visible {
	outline: 3px solid rgba(31, 95, 71, 0.35);
	outline-offset: 2px;
}

/* Phones: buttons go full width, Buy Now first (primary action on top) */
@media (max-width: 599px) {
	.single-product form.cart { flex-direction: column; }
	.single-product form.cart .quantity { width: 100%; }
	.single-product form.cart .quantity input.qty { width: 100%; }
	.single-product .svh-buy-now--single { order: -1; }
	.single-product .single_add_to_cart_button,
	.single-product .svh-buy-now--single { flex: 0 0 auto; width: 100%; }
}

/* ---------- Trust list ---------- */
.svh-trust-list {
	list-style: none;
	margin: 0 0 22px;
	padding: 16px;
	display: grid;
	gap: 14px;
	background: var(--svh-bg-alt);
	border-radius: 14px;
}
.svh-trust-list li { display: flex; align-items: flex-start; gap: 12px; margin: 0; }
.svh-trust-list svg { flex-shrink: 0; margin-top: 2px; color: var(--svh-green); }
.svh-trust-list div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.svh-trust-list strong { font-size: 0.92rem; color: var(--svh-ink); line-height: 1.3; }
.svh-trust-list span { font-size: 0.85rem; color: var(--svh-ink-soft); line-height: 1.45; }

/* ---------- Product meta ---------- */
.single-product .product_meta {
	display: grid;
	gap: 6px;
	padding-top: 18px;
	margin-top: 4px;
	font-size: 0.85rem;
	color: var(--svh-muted);
	border-top: 1px solid var(--svh-border);
}
.single-product .product_meta > span { display: block; overflow-wrap: anywhere; }
.single-product .product_meta a { color: var(--svh-green); font-weight: 600; }
.single-product .product_meta a:hover { text-decoration: underline; }

/* ---------- Description / reviews (tabs) — directly below ---------- */
.single-product .woocommerce-tabs {
	margin: 0;
	padding: clamp(18px, 3.2vw, 36px);
	background: var(--svh-surface);
	border: 1px solid var(--svh-border);
	border-radius: 20px;
}
.single-product .woocommerce-tabs ul.tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	list-style: none;
	margin: 0 0 24px;
	padding: 0 0 18px;
	border: 0;
	border-bottom: 1px solid var(--svh-border);
}
.single-product .woocommerce-tabs ul.tabs::before,
.single-product .woocommerce-tabs ul.tabs::after { display: none; }
.single-product .woocommerce-tabs ul.tabs li {
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	border-radius: 0;
}
.single-product .woocommerce-tabs ul.tabs li::before,
.single-product .woocommerce-tabs ul.tabs li::after { display: none; }
.single-product .woocommerce-tabs ul.tabs li a {
	display: block;
	padding: 10px 20px;
	font-size: 0.92rem;
	font-weight: 700;
	color: var(--svh-ink-soft);
	border-radius: 999px;
	transition: background 0.2s ease, color 0.2s ease;
}
.single-product .woocommerce-tabs ul.tabs li a:hover { background: var(--svh-bg-alt); color: var(--svh-ink); }
.single-product .woocommerce-tabs ul.tabs li.active a,
.single-product .woocommerce-tabs ul.tabs li.active a:hover { background: var(--svh-ink); color: #fff; }

.single-product .woocommerce-Tabs-panel {
	font-size: 1rem;
	line-height: 1.75;
	color: var(--svh-ink-soft);
	overflow-wrap: anywhere;
}
.single-product .woocommerce-Tabs-panel > h2 {
	margin: 0 0 14px;
	font-size: 1.25rem;
	font-weight: 800;
	color: var(--svh-ink);
}
.single-product .woocommerce-Tabs-panel p,
.single-product .woocommerce-Tabs-panel li { max-width: 78ch; }
.single-product .woocommerce-Tabs-panel img { border-radius: 12px; }

.single-product table.shop_attributes { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.single-product table.shop_attributes th,
.single-product table.shop_attributes td { padding: 10px 8px; text-align: left; border-bottom: 1px solid var(--svh-border); }
.single-product table.shop_attributes th { width: 35%; color: var(--svh-ink); }

/* Reviews */
.single-product #reviews .commentlist { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 16px; }
.single-product #reviews .commentlist li { padding: 16px; border: 1px solid var(--svh-border); border-radius: 14px; }
.single-product #reviews .comment_container { display: flex; gap: 14px; }
.single-product #reviews .avatar { width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0; }
.single-product #reviews .comment-text { min-width: 0; flex: 1; }
.single-product #review_form input[type="text"],
.single-product #review_form input[type="email"],
.single-product #review_form textarea {
	width: 100%;
	padding: 12px 14px;
	font: inherit;
	border: 1.5px solid var(--svh-border);
	border-radius: 10px;
	background: var(--svh-surface);
}
.single-product #review_form .submit {
	padding: 13px 26px;
	font: inherit;
	font-weight: 700;
	color: #fff;
	background: var(--svh-gradient-cta);
	border: 0;
	border-radius: 12px;
	cursor: pointer;
}
/* Star picker */
.single-product p.stars { margin: 0 0 12px; }
.single-product p.stars span { display: inline-flex; }
.single-product p.stars a { font-size: 0; width: 1.5rem; text-decoration: none; }
.single-product p.stars a::before { content: "\2605"; font-size: 1.6rem; line-height: 1; color: #d9e0dc; }
.single-product p.stars:hover a::before { color: var(--svh-star); }
.single-product p.stars a:hover ~ a::before { color: #d9e0dc; }
.single-product p.stars.selected a::before { color: var(--svh-star); }
.single-product p.stars.selected a.active ~ a::before { color: #d9e0dc; }

/* ---------- Related / upsell products ---------- */
.single-product .related.products,
.single-product .upsells.products { margin: 0; padding: 0; border: 0; }
.single-product .related.products > h2,
.single-product .upsells.products > h2 {
	margin: 0 0 22px;
	font-size: clamp(1.25rem, 2.4vw, 1.6rem);
	font-weight: 800;
	color: var(--svh-ink);
}

/* ---------- Sticky mobile buy bar ---------- */
.svh-sticky-buy { display: none; }

@media (max-width: 767px) {
	body.svh-has-sticky-buy { padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }

	.svh-sticky-buy {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 90;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 14px;
		padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
		background: var(--svh-surface);
		border-top: 1px solid var(--svh-border);
		box-shadow: 0 -8px 24px rgba(15, 42, 32, 0.1);
	}
	.svh-sticky-buy__price {
		min-width: 0;
		font-size: 1.15rem;
		font-weight: 800;
		line-height: 1.15;
		color: var(--svh-green);
	}
	.svh-sticky-buy__price del { display: block; font-size: 0.78rem; font-weight: 500; color: var(--svh-muted); }
	.svh-sticky-buy__price ins { text-decoration: none; }
	.svh-sticky-buy__btn {
		flex: 0 0 auto;
		width: auto;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-height: 48px;
		padding: 12px 28px;
		font-size: 1rem;
		font-weight: 700;
		color: #fff !important;
		background: var(--svh-gradient-cta);
		border-radius: 12px;
		box-shadow: var(--svh-shadow-glow);
	}
}

/* ---------- Small-phone polish ---------- */
@media (max-width: 380px) {
	.single-product div.product { gap: 22px; }
	.svh-trust-list { padding: 14px; }
	.single-product .woocommerce-tabs ul.tabs li a { padding: 9px 14px; }
}