/* Product Layout Tweaker: product layout */

/* ============================================
	FRONTEND INSERTS
	============================================ */
/* Ensure inserts render below Add to cart even when form uses flex/inline layouts */
.single-product form.cart .plt-insert-below-cart-button {
	display: block !important;
	width: 100% !important;
	clear: both !important;
	flex: 0 0 100% !important;
	margin-top: 1em;
}

/* Reviews: price left, stars right (single product title area) */
.plt-price-rating-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
}

.plt-price-rating-row__price {
	flex: 1 1 auto;
	min-width: 0;
}

/* Woo price output is usually a <p class="price"> with margins; neutralize for centering */
.plt-price-rating-row__price .price,
.plt-price-rating-row__price p.price {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
	line-height: 1.2;
}

.plt-price-rating-row__rating {
	flex: 0 0 auto;
	align-self: center;
}

/* Desktop: keep stars closer to the price (not far right) */
@media (min-width: 769px) {
	.plt-price-rating-row {
		justify-content: flex-start;
		gap: 18px;
	}

	.plt-price-rating-row__price {
		flex: 0 0 auto;
	}
}

.plt-reviews-link {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
}

.plt-reviews-link:hover {
	text-decoration: none;
}

.plt-stars {
	--plt-stars-fill: 0%;
	position: relative;
	display: inline-block;
	white-space: nowrap;
	font-size: 14px;
	line-height: 1;
	letter-spacing: 1px;
}

.plt-stars::before {
	content: '★★★★★';
	color: #cfcfcf;
}

.plt-stars::after {
	content: '★★★★★';
	position: absolute;
	left: 0;
	top: 0;
	width: var(--plt-stars-fill);
	overflow: hidden;
	color: #f5a623;
}

.plt-reviews-count {
	margin-left: 6px;
	font-size: 12px;
	line-height: 1;
	color: #666;
}

/* Etsy availability link: inline when possible, wraps below when needed */
.single-product form.cart .plt-etsy-availability {
	display: inline-flex;
	align-items: center;
	margin-left: 12px;
	margin-top: 6px;
	vertical-align: middle;
}

/* When cart form wraps/flexes, keep this as a “small line” item */
.single-product form.cart .plt-etsy-availability {
	flex: 0 0 auto;
}

.single-product form.cart .plt-etsy-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	line-height: 1.2;
	text-decoration: none;
}

.single-product form.cart .plt-etsy-link:hover {
	text-decoration: underline;
}

.single-product form.cart .plt-etsy-logo {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 18px;
	padding: 0 6px;
	border-radius: 3px;
	background: #f1641e;
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.2px;
	text-transform: uppercase;
}

@media (max-width: 480px) {
	.single-product form.cart .plt-etsy-availability {
		display: block;
		width: 100%;
		margin-left: 0;
		margin-top: 10px;
	}
}

/* ============================================
	MOBILE TITLE POSITIONING (Hook-based approach)
	============================================ */

/* Mobile: Show title at top, hide in summary */
@media (max-width: 768px) {
	/* Show title at top */
	.plt-mobile-title-top {
		display: block !important;
		margin-bottom: 20px;
	}

	/* Ensure title elements inside top wrapper are visible */
	.plt-mobile-title-top h1,
	.plt-mobile-title-top .product_title,
	.plt-mobile-title-top .entry-title {
		display: block !important;
		visibility: visible !important;
	}

	/* Hide title in summary section on mobile - be specific to avoid affecting other elements */
	.summary .plt-title-section,
	.summary .plt-title-section * {
		display: none !important;
		visibility: hidden !important;
	}

	/* Hide any title elements directly in summary (fallback) */
	.summary > .product_title,
	.summary > h1.product_title,
	.summary > .entry-title,
	.summary > h1.entry-title,
	.summary > .product-title {
		display: none !important;
		visibility: hidden !important;
	}
}

/* Mobile: Show title/price before gallery, hide in summary */
@media (max-width: 768px) {
	.plt-mobile-title-price-top {
		display: block !important;
		margin-bottom: 20px;
	}

	/* Put short description directly below the title on mobile */
	.plt-mobile-short-desc {
		display: block !important;
		margin: 10px 0 0 0;
	}

	/* Reduce default excerpt spacing on mobile */
	.plt-mobile-short-desc .woocommerce-product-details__short-description {
		margin-bottom: 8px;
	}

	.plt-mobile-short-desc .woocommerce-product-details__short-description > *:last-child,
	.plt-mobile-short-desc .woocommerce-product-details__short-description p:last-child {
		margin-bottom: 0;
	}

	/* Avoid duplicate excerpts on mobile (summary excerpt is re-added at priority 45 in PHP) */
	.plt-short-desc-section {
		display: none !important;
	}

	.plt-desktop-title-price {
		display: none !important;
	}

	/* Hide the old mobile title if it still exists (backward compatibility) */
	.plt-mobile-title-top {
		display: none !important;
	}
}

/* Desktop: Hide title/price before gallery, show in summary */
@media (min-width: 769px) {
	.plt-mobile-title-price-top {
		display: none !important;
	}

	.plt-desktop-title-price {
		display: block !important;
	}

	/* Reduce gap after the price range on desktop */
	.plt-desktop-title-price p.price,
	.plt-desktop-title-price .price {
		margin-bottom: 0px !important;
	}

	.plt-desktop-short-desc {
		display: block !important;
		margin: 10px 0 0 0;
	}

	/* Reduce default excerpt spacing on desktop */
	.plt-desktop-short-desc .woocommerce-product-details__short-description {
		margin-bottom: 8px;
	}

	.plt-desktop-short-desc .woocommerce-product-details__short-description > *:last-child,
	.plt-desktop-short-desc .woocommerce-product-details__short-description p:last-child {
		margin-bottom: 0;
	}
}

/* Use WooCommerce's default variation price location - no manipulation needed */
/* Ensure variation price displays properly in its default location */
.woocommerce-variation-price {
	display: block !important;
	margin-bottom: 15px;
}

/* ============================================
	MOBILE LAYOUT SPACING
	============================================ */

@media (max-width: 768px) {
	/* Remove bottom padding from product images */
	.woocommerce div.product div.images,
	.woocommerce-product-gallery {
		padding-bottom: 0 !important;
	}

	/* Add extra spacing between variation selectors (between color and size) */
	.plt-variation-selector-wrapper + .plt-variation-selector-wrapper {
		margin-top: 20px; /* Base 10px + 3px extra spacing to separate from scrollbar */
	}

	/* Ensure price appears right before add to cart with proper spacing */
	.plt-price-section + .plt-add-to-cart-section,
	.price + form.cart,
	.price + .plt-add-to-cart-section {
		margin-top: 10px;
	}

	.plt-price-section {
		margin-bottom: 0;
	}

	.plt-add-to-cart-section {
		margin-top: 0;
	}

	/* Hide price range when variation price is visible (class is set by JS) */
	html.plt-has-variation-price .plt-price-section {
		display: none !important;
	}

	/* Hide default Clear link on mobile - we'll move it next to price */
	.reset_variations:not(.plt-clear-link) {
		display: none !important;
		visibility: hidden !important;
	}

	/* Style for Clear link when moved next to final price */
	.plt-clear-link {
		display: inline-block !important;
		visibility: visible !important;
		margin-left: 10px;
		font-size: 12px;
		color: #666;
		text-decoration: underline;
		vertical-align: middle;
	}

	.plt-clear-link:hover {
		color: #000;
	}

	/* Make final price container flex to accommodate Clear link inline */
	.woocommerce-variation-price.plt-has-clear {
		display: flex !important;
		align-items: center;
		justify-content: flex-start;
		flex-wrap: wrap;
		gap: 10px;
	}

	.woocommerce-variation-price.plt-has-clear .price {
		margin: 0;
	}

	/* Ensure Clear link appears inline with price, not below */
	.woocommerce-variation-price.plt-has-clear .plt-clear-link {
		margin-left: 10px;
		margin-top: 0;
		margin-bottom: 0;
	}

	/* Sale badge positioning - inline with price range on mobile */
	.plt-mobile-title-price-top span.onsale {
		position: static !important;
		display: inline-block !important;
		margin: 0 10px 0 0 !important;
		vertical-align: middle;
		top: auto !important;
		left: auto !important;
		right: auto !important;
		bottom: auto !important;
		transform: none !important;
	}

	/* Sale badge positioning - anchor over main product media (mobile) */
	.plt-media-wrap {
		position: relative;
	}

	.plt-media-wrap > span.onsale {
		position: absolute !important;
		top: 12px !important;
		left: 12px !important;
		right: auto !important;
		bottom: auto !important;
		z-index: 5 !important;
		margin: 0 !important;
		transform: none !important;
	}

	/* Ensure price displays inline with badge */
	.plt-mobile-title-price-top .price,
	.plt-mobile-title-price-top p.price {
		display: inline !important;
		margin: 0 !important;
	}

	/* Price wrapper area to align badge and price horizontally */
	.plt-mobile-title-price-top {
		display: block !important;
	}

	/* When badge is before price, ensure they display inline */
	.plt-mobile-title-price-top span.onsale + .price,
	.plt-mobile-title-price-top span.onsale + p.price,
	.plt-mobile-title-price-top span.onsale + * .price {
		display: inline !important;
	}
}