/**
 * Forest Remedy — product page.
 * Loaded on single product pages only, versioned by filemtime.
 *
 * Colours reuse the theme's own custom properties where Flatsome exposes them and fall back to
 * the palette set in the Customiser (primary #9ea89d, secondary #3a4932, text #3a3a3a).
 */

/* -------------------------------------------------------------
 * Variant buttons
 * ---------------------------------------------------------- */

/* The <select> stays in the DOM because WooCommerce's variation form reads it. Hidden the
   accessible way rather than display:none, so a screen reader and the form both still work. */
.fr-variants-select {
	position: absolute;
	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;
}

.fr-variants {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 6px;
}

.fr-variants .fr-variant {
	min-width: 72px;
	margin: 0;
	padding: 9px 16px;
	font-size: 0.95em;
	font-weight: 600;
	line-height: 1.2;
	color: var(--fr-ink);
	text-transform: none;
	letter-spacing: 0;
	background: var(--fr-white);
	border: 2px solid var(--fr-line-grey);
	border-radius: 4px;
	cursor: pointer;
	transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}

.fr-variants .fr-variant:hover {
	border-color: var(--fr-soft);
	color: var(--fr-deep);
}

.fr-variants .fr-variant.is-selected {
	color: var(--fr-white);
	background: var(--fr-deep);
	border-color: var(--fr-deep);
}

.fr-variants .fr-variant:focus-visible {
	outline: 2px solid var(--fr-mid);
	outline-offset: 2px;
}

/* The variations table has no job left once the buttons are showing — drop the label column's
   padding so the buttons sit directly under the price. */
.fr-variants ~ .reset_variations,
.variations .fr-variants {
	margin-top: 0;
}

.product-info .variations td,
.product-info .variations th {
	padding-bottom: 6px;
	border: 0;
}

/* -------------------------------------------------------------
 * Reassurance line
 * ---------------------------------------------------------- */

ul.fr-reassurance {
	margin: 14px 0 0;
	padding: 0;
	list-style: none;
	font-size: 0.88em;
	line-height: 1.55;
	color: var(--fr-ink-3);
}

ul.fr-reassurance li {
	position: relative;
	margin: 0 0 3px;
	padding-left: 22px;
}

ul.fr-reassurance li::before {
	content: "";
	position: absolute;
	left: 2px;
	top: 0.42em;
	width: 10px;
	height: 5px;
	border-left: 2px solid var(--fr-mid);
	border-bottom: 2px solid var(--fr-mid);
	transform: rotate(-45deg);
}

/* -------------------------------------------------------------
 * Sticky add to cart
 * ---------------------------------------------------------- */

/* Mobile and tablet only. 7 of the last 11 orders were on a phone, and that is also where the
   buy button scrolls out of view; on desktop it is usually still on screen and the bar just
   takes space. To show it everywhere, delete this block. */
@media (min-width: 850px) {
	.sticky-add-to-cart-wrapper {
		display: none;
	}
}

/* FunnelKit's floating cart bubble is pinned bottom-right sitewide and would otherwise sit on
   top of the sticky bar's button. Flatsome adds .has-sticky-product-cart to <body> while the
   bar is showing, so lift the bubble only for as long as they overlap.

   Scoped to the widths where the bar actually shows, rather than lifting everywhere and
   overriding it back above 850px: Flatsome still adds the body class on desktop even though
   the bar is display:none, and the obvious override (bottom:auto) resolves a position:fixed
   element to its static position — measured at bottom:-1550px, i.e. the bubble vanishes off
   the bottom of the page. Never hand the plugin's own positioning back with a guess.

   The offset is the bar's MEASURED height (fr-product-page.js publishes --fr-sticky-h), not a
   number typed once and hoped for: the bar is 58px on a variable product and was 175px on a
   simple one until the duplicate reassurance list was fixed. */
@media (max-width: 849px) {
	body.has-sticky-product-cart #fkcart-floating-toggler {
		bottom: calc(var(--fr-sticky-h, 60px) + 16px);
		transition: bottom 0.2s ease;
	}
}

/* -------------------------------------------------------------
 * "Save with sets" — the single-or-bundle line above the button
 * ---------------------------------------------------------- */

.fr-save-with-sets {
	margin: 0 0 16px;
}

.fr-save-with-sets .fr-set-offer {
	display: block;
	padding: 10px 14px;
	margin-bottom: 6px;
	font-size: 0.9em;
	line-height: 1.4;
	color: var(--fr-deep);
	background: var(--fr-mist);
	border: 1px solid var(--fr-line-3);
	border-left: 3px solid var(--fr-mid);
	border-radius: 4px;
	text-decoration: none;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.fr-save-with-sets .fr-set-offer:hover {
	background: var(--fr-mist-2);
	border-color: var(--fr-soft);
	border-left-color: var(--fr-deep);
}

.fr-save-with-sets .fr-set-saving {
	display: inline-block;
	margin-left: 4px;
	padding: 1px 7px;
	font-size: 0.88em;
	font-weight: 600;
	color: var(--fr-white);
	background: var(--fr-mid);
	border-radius: 10px;
	white-space: nowrap;
}