/* Store-side product addon buttons, styled after the SFLumber
   Surfacing addon buttons (.surfacing_radio_buttons /
   .product-addon-checkbox). */

.sfl-pa-addon-label {
	display: flex;
	justify-content: space-between;
	margin: 0px 18px 5px 2px;
}
.sfl-pa-addon-label label {
	font-weight: 700;
}
.sfl-pa-addon-label p {
	font-size: 16px;
	font-weight: 400;
}
.sfl-pa-buttons {
	display: grid;
	justify-content: space-between;
	grid-template-columns: 1fr 1fr 1fr 1fr;
}
.sfl-pa-buttons input {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance:    none;
}
.sfl-pa-button-checkbox {
	height: 50px;
	display: grid;
	align-content: center;
	max-width: 132px;
	border-radius: 6px;
	font-family: sans;
	font-size: 13px;
	background: #f3f6f7;
	color: #354153;
	border: 1px solid #baced3;
	margin-right: 12px;
	margin-bottom: 12px;
}
.sfl-pa-button-checkbox > label {
	display: flex;
	flex-direction: column;
	text-align: center;
	width: 100%;
	height: 50px;
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
	justify-content: center;
	cursor: pointer;
}
.sfl-pa-button-checkbox strong {
	font-size: 15px !important;
	color: #2d3748;
}
.sfl-pa-button-checkbox:hover {
	background: #e1e3e4;
	border: 1px solid #baced3;
}
.sfl-pa-button-checkbox input:checked + label {
	background: #007178;
	border: none;
	border-radius: 6px;
	color: #ffffffe0;
}
.sfl-pa-button-checkbox input:checked + label strong {
	color: #fff !important;
}

@media only screen and (max-width: 866px) {
	.sfl-pa-buttons {
		grid-template-columns: 1fr 1fr;
	}
	.sfl-pa-button-checkbox {
		max-width: 172px;
	}
}
@media only screen and (max-width: 719px) {
	.sfl-pa-buttons {
		grid-template-columns: 1fr 1fr 1fr 1fr;
	}
	.sfl-pa-button-checkbox {
		max-width: 132px;
	}
}
@media only screen and (max-width: 440px) {
	.sfl-pa-buttons {
		grid-template-columns: 1fr 1fr;
	}
	.sfl-pa-button-checkbox {
		max-width: 172px;
	}
}

/* ------------------------------------------------------------------
Slider addons: one noUiSlider per addon, the items as its stops. The
track, handle, tooltip and pip base styling comes from the plugin's
shared noUiSlider overrides (AJAX_product_page.css, scoped to
.noUiSlider); this file only adds what the addon's two-line pips need
on top.
------------------------------------------------------------------ */

.sfl-pa-slider-addon {
	margin: 16px 0;
}

/* Left/right: room for the 32px round handle at each end of the
   track. Bottom: the noUiSlider pips are positioned absolutely
   below the 14px track (top: 100%), so they are out of flow -
   without this the 56px two-line pips hang over the quantity
   input and the add-to-cart button that follow in the layout
   (the same trick .wrap_slider uses for the double slider).
   Padding, not margin: it cannot collapse through the wrapper. */
.sfl-pa-slider-wrap {
	padding: 0 16px 64px;
}

/* The pips are two lines (value name over its price), taller than
   the double slider's single-line pips (the shared stylesheet's
   40px is !important, so match it with one). */
.sfl-pa-slider .noUi-pips-horizontal {
	height: 56px !important;
}

/* Color with a fallback in case the theme's palette variable is
   missing; sizes stay with the shared stylesheet's rules. */
.sfl-pa-slider .noUi-value {
	color: var(--global-palette4, #1C6C79);
}

.sfl-pa-slider .noUi-value .sfl-pa-pip-price {
	display: block;
	font-size: 13px;
	color: #5b8088;
}

/* ------------------------------------------------------------------
Range slider addons: one two-handle noUiSlider per addon, the addon's
values as its stops (the handles select the min/max of the range).
Track, handle, tooltip and pip base styling comes from the plugin's
shared noUiSlider overrides (AJAX_product_page.css, scoped to
.noUiSlider). The pips are single-line value names (a range addon's
prices belong to min/max pairs, not values), so the shared
stylesheet's 40px pip row already fits.
------------------------------------------------------------------ */

.sfl-pa-range-slider-addon {
	margin: 16px 0;
}

/* Same as the slider's wrap: left/right room for the 32px round
   handles at each end of the track, and bottom room for the
   absolute-positioned pips below the 14px track (top: 100%), so
   they cannot hang over the quantity input and the add-to-cart
   button that follow in the layout. */
.sfl-pa-range-slider-wrap {
	padding: 0 16px 48px;
}

/* Color with a fallback in case the theme's palette variable is
   missing; sizes stay with the shared stylesheet's rules. */
.sfl-pa-range-slider .noUi-value {
	color: var(--global-palette4, #1C6C79);
}

/* The connect (the bar between the handles) takes the gray-blue
   tint only while a slider with a Minimum Range set selects the
   narrowest allowed pair: the handles exactly gap stops
   apart (initRangeSliderAddons toggles the class on the target,
   live on every move); without it the shared stylesheet's
   palette color applies. The tint eases over 150ms. Only the
   background eases on a plain drag - the connect is moved by a
   transform the library updates every frame, so it must not
   transition that. On a tap (and animated set) the library
   adds its state class; this more specific rule then restores
   the transform transition for the connect, kept at the
   library's 300ms so bar and handles stay in sync with each
   other. */
.sfl-pa-range-slider .noUi-connect {
	transition: background-color 0.15s ease;
}
.sfl-pa-range-slider.noUi-state-tap .noUi-connect {
	transition: background-color 0.15s ease, transform 0.3s;
}
.sfl-pa-range-slider.sfl-pa-min-reached .noUi-connect {
	background: #9AA6BA;
}

/* The merged tooltip: the single node that stands in for the two
   per-handle tooltips while the selected values are close - the
   no-gap scale's same-or-next values, a Minimum Range scale's
   minimum span or one past it (makeMergedTip) - showing one value
   (4") or the "min - max" pair (4" - 6"). It is a child of the
   track's base and takes
   the same below-the-line placement as the per-handle tooltips:
   its top edge aligns with theirs, on the handles' bottom edge
   (handle top -10px + 32px height = 22px below the track's top
   edge, -9px + 25px = 16px on the compact layout), its inline
   left centers it between the handles (the shared .noUi-tooltip
   translate(-50%) applies to it as well), and z-index keeps it
   over the track and pip layers. */
.sfl-pa-range-slider .noUi-tooltip.sfl-pa-tip-merged {
	top: 22px;
	z-index: 3;
	pointer-events: none;
}
@media (max-width: 1150px) {
	.sfl-pa-range-slider .noUi-tooltip.sfl-pa-tip-merged {
		top: 16px;
	}
}