/* "Research use only" compliance notice, injected near the top of every
   product summary via woocommerce_single_product_summary. */

.pp-research-notice {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0 0 20px;
	padding: 12px 16px;
	background: #fdf8ee;
	border: 1px solid #e8d9b0;
	border-radius: 10px;
}

.pp-research-notice__icon {
	flex: none;
	width: 18px;
	height: 18px;
	margin-top: 1px;
	color: #b8860b;
}

.pp-research-notice p {
	margin: 0;
	font-size: 13px;
	line-height: 1.5;
	color: #5a4a1f;
	font-weight: 600;
}

/* Trust badges row, injected via woocommerce_after_add_to_cart_button —
   directly below the Add to Cart button (and below any other buttons
   later added to the same form, since that hook fires last). */

.pp-trust-badges {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	column-gap: 28px;
	row-gap: 14px;
	margin-top: 22px;
}

/* Blocksy's own <span class="ct-product-divider"> normally separates the
   add-to-cart area from the payment-method icons below it; since the
   badges are now the last thing inside .ct-product-add-to-cart, that
   divider lands directly under them, reading as a second "bottom" line
   sandwiching the badges. Hidden here rather than left alone, since it's
   only ever adjacent to this block on this template. */
.ct-product-add-to-cart + .ct-product-divider {
	display: none;
}

.pp-trust-badges__item {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 13.5px;
	font-weight: 700;
	color: #132040;
}

.pp-trust-badges__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: #132040;
	color: #fff;
}

.pp-trust-badges__icon svg {
	width: 13px;
	height: 13px;
}

.pp-trust-badges__text--short {
	display: none;
}

/* Mobile: always a single line. Shorter labels (not just smaller type)
   keep this legible instead of shrinking text past readable size. */
@media ( max-width: 480px ) {
	.pp-trust-badges {
		flex-wrap: nowrap;
		column-gap: 10px;
	}

	.pp-trust-badges__item {
		gap: 5px;
		font-size: 11px;
		white-space: nowrap;
	}

	.pp-trust-badges__icon {
		width: 18px;
		height: 18px;
	}

	.pp-trust-badges__icon svg {
		width: 9px;
		height: 9px;
	}

	.pp-trust-badges__text--full {
		display: none;
	}

	.pp-trust-badges__text--short {
		display: inline;
	}
}

/* Per-product USP block, injected after the Add to Cart button via
   blocksy:woocommerce:product-single:add_to_cart:after. Content comes from
   the ACF "Product USP" fields (usp_1/usp_2/usp_3) on each product. */

.pp-usp {
	margin: 24px 0 0;
	padding: 20px 22px;
	background: #f7f6f2;
	border: 1px solid #e4e1d8;
	border-radius: 14px;
}

.pp-usp__heading {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #c9a24b;
	margin: 0 0 14px;
}

.pp-usp__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.pp-usp__list li {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 14.5px;
	font-weight: 600;
	line-height: 1.4;
	color: #1c1c1a;
}

.pp-usp__icon {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: #132040;
	color: #fff;
}

.pp-usp__icon svg {
	width: 13px;
	height: 13px;
}

/* ── Related / upsell products — same card fixes proven on the shop page:
   Blocksy wraps the image in a.ct-media-container (not the WC default
   a.woocommerce-loop-product__link, which wraps the title instead), and
   wraps the button in a flex .ct-woo-card-actions container that ignores
   width/margin set on the button alone. ──────────────────────────────── */

.related.products,
.upsells.products {
	margin-top: 56px;
	padding-top: 40px;
	border-top: 1px solid #e4e1d8;
}

.related.products > h2,
.upsells.products > h2 {
	font-size: 20px;
	font-weight: 700;
	color: #1c1c1a;
	margin: 0 0 24px;
}

.related.products ul.products,
.upsells.products ul.products {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 220px, 1fr ) );
	gap: 24px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.related.products ul.products li.product,
.upsells.products ul.products li.product {
	background: #fff;
	border: 1px solid #e4e1d8;
	border-radius: 16px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	margin: 0;
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.related.products ul.products li.product:hover,
.upsells.products ul.products li.product:hover {
	transform: translateY( -4px );
	border-color: transparent;
	box-shadow: 0 16px 32px rgba( 28, 28, 26, 0.1 );
}

.related.products ul.products li.product a.ct-media-container,
.upsells.products ul.products li.product a.ct-media-container {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1 / 1;
	background: linear-gradient( 165deg, #f1efe8, #fff );
	padding: 20px;
	overflow: hidden;
}

.related.products ul.products li.product img,
.upsells.products ul.products li.product img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	transition: transform 0.3s ease;
}

.related.products ul.products li.product:hover img,
.upsells.products ul.products li.product:hover img {
	transform: scale( 1.05 );
}

.related.products ul.products li.product .woocommerce-loop-product__title,
.related.products ul.products li.product a.woocommerce-loop-product__link,
.upsells.products ul.products li.product .woocommerce-loop-product__title,
.upsells.products ul.products li.product a.woocommerce-loop-product__link {
	display: block;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
	margin: 0 0 6px;
	padding: 18px 18px 0;
	color: #1c1c1a;
	text-decoration: none;
}

.related.products ul.products li.product .price,
.upsells.products ul.products li.product .price {
	font-size: 15px;
	font-weight: 700;
	color: #132040;
	padding: 0 18px 14px;
	display: block;
}

.related.products ul.products li.product .price del,
.upsells.products ul.products li.product .price del {
	color: #6b6b64;
	font-weight: 400;
	opacity: 0.7;
	margin-inline-end: 6px;
	font-size: 13px;
}

.related.products ul.products li.product .onsale,
.upsells.products ul.products li.product .onsale {
	background: #132040;
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.04em;
	border-radius: 999px;
	padding: 5px 12px;
	top: 14px;
	inset-inline-start: 14px;
	margin: 0;
}

.related.products ul.products li.product .ct-woo-card-actions,
.upsells.products ul.products li.product .ct-woo-card-actions {
	display: block;
	width: auto;
	padding: 0 18px 18px;
	margin-top: auto;
}

.related.products ul.products li.product .button,
.upsells.products ul.products li.product .button {
	display: block;
	width: 100%;
	box-sizing: border-box;
	margin: 0;
	text-align: center;
	background: #1c1c1a;
	color: #fff;
	font-weight: 600;
	font-size: 13px;
	padding: 11px 18px;
	border-radius: 999px;
	text-decoration: none;
	border: none;
	cursor: pointer;
	transition: opacity 0.15s ease;
}

.related.products ul.products li.product .button:hover,
.upsells.products ul.products li.product .button:hover {
	opacity: 0.85;
	color: #fff;
}

.related.products ul.products li.product .added_to_cart,
.upsells.products ul.products li.product .added_to_cart {
	display: block;
	text-align: center;
	margin: 8px 0 0;
	font-size: 12px;
	font-weight: 600;
	color: #132040;
	text-decoration: none;
}

@media ( max-width: 700px ) {
	.related.products ul.products,
	.upsells.products ul.products {
		grid-template-columns: repeat( 2, 1fr );
	}
}

/* Hides the "X in stock" quantity text that WooCommerce core injects below
   the variation swatches once a variation is selected — this is WooCommerce's
   own .woocommerce-variation-availability markup (add-to-cart/variation.php),
   not a Blocksy customizer setting, so there's no toggle for it in the
   Variation Swatches panel. A CSS hide here is sitewide and avoids having
   to disable "Manage stock" on every variation of every product. */
.woocommerce-variation-availability {
	display: none;
}