/**
 * Search & Filter Pro block enhancements. Paired with assets/js/search-filter.js.
 */

/* Hide the empty choice in the Flavors checkbox field (field 8). */
.wp-block-search-filter-choice-checkbox[data-search-filter-id="8"] .search-filter-input-checkbox[data-option-value=""] {
	display: none !important;
}

/* S&F checkbox labels are flex, which made the ® <sup> its own flex item and
   floated it well above the name (MT-179). Block keeps it inline. */
.search-filter-input-checkbox__label:has(> sup.mt-reg) {
	display: block;
}

/* Flavor Archive: Active is the Status default (field 29), so only a Retired
   selection gets a chip in Flavor Selections. */
.wp-block-search-filter-control-selection .search-filter-input-button[data-option-value="29/active"] {
	display: none !important;
}

/* Dropdowns fade/slide shut instead of snapping. */
.wp-block-search-filter-choice .search-filter-input-group {
	transition:
		opacity 0.22s ease,
		transform 0.22s ease;
	transform-origin: top;
}

.wp-block-search-filter-choice .search-filter-input-group:not(.search-filter-field__input--hidden) {
	opacity: 1;
	transform: translateY(0);
}

.wp-block-search-filter-choice .search-filter-input-group.search-filter-field__input--hidden {
	opacity: 0;
	transform: translateY(-6px);
	pointer-events: none;
}

/* Choice buttons: icon stacked over the label. */
.wp-block-search-filter-choice-button .search-filter-input-button {
	display: inline-flex !important;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	flex: 0 0 auto !important; /* Don't squish inside the carousel. */
	white-space: normal;
}

.wp-block-search-filter-choice-button .search-filter-input-button .product-type-icon {
	max-width: 56px;
	height: auto;
	pointer-events: none;
}

/* Choice buttons: single horizontally scrolling row with arrows. */
.wp-block-search-filter-choice-button {
	position: relative;
}

.wp-block-search-filter-choice-button .search-filter-input-button-group {
	display: flex !important;
	flex-wrap: nowrap !important;
	overflow-x: auto !important;
	scroll-behavior: smooth;
	scrollbar-width: none;
	gap: 12px;
	padding: 5px 0;
}

.wp-block-search-filter-choice-button .search-filter-input-button-group::-webkit-scrollbar {
	display: none;
}

.sf-carousel-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: #ffffff;
	border: 1px solid #dddddd;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
	cursor: pointer;
	z-index: 10;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	line-height: 1;
	color: #333333;
	transition: all 0.2s ease;
}

.sf-carousel-arrow:hover {
	background: #f5f5f5;
}

.sf-carousel-arrow.sf-prev {
	left: -16px;
}

.sf-carousel-arrow.sf-next {
	right: -16px;
}

.sf-carousel-arrow.is-hidden {
	display: none;
}

/* Treat tiles keep focus after a click, and the focus styles painted an
   unselected tile green until reload (MT-160). The ring is inset because the
   scrolling row clipped it on the first and last tiles (MT-161). */
.wp-block-search-filter-choice-button .search-filter-input-button:focus:not(.search-filter-input-button--is-selected) {
	background: #fff;
}

.wp-block-search-filter-choice-button .search-filter-input-button:focus {
	box-shadow: none;
}

.wp-block-search-filter-choice-button .search-filter-input-button:focus-visible {
	box-shadow: inset 0 0 0 2px #016BAE;
}

/* Selection chips + Clear All share one wrapping row; as inline-blocks a long
   pair pushed Clear All onto its own line and its top offset ran it into the
   chips (MT-164). The offsets keep the one-line look as it was.
   Only for filter-only columns: The Scoop keeps its heading, intro and filters
   in one column, and turning that into a row broke its stacked, centred header. */
.kt-inside-inner-col:has(> .wp-block-search-filter-control-reset):not(:has(> .wp-block-kadence-advancedheading)) {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: wrap;
	align-items: center !important;
	justify-content: flex-start !important;
	column-gap: 20px;
	row-gap: 14px;
}

.kt-inside-inner-col:has(> .wp-block-search-filter-control-reset):not(:has(> .wp-block-kadence-advancedheading)) > .wp-block-search-filter-control-selection,
.kt-inside-inner-col:has(> .wp-block-search-filter-control-reset):not(:has(> .wp-block-kadence-advancedheading)) > .wp-block-search-filter-control-reset {
	margin: 0 !important;
}

/* Chips and Clear All on the same centre line as the Search box and dropdowns.

   Flavors: search, dropdowns, chips and Clear All share one column. The Search
   field reserves room for its (invisible) label, so the row is bottom-aligned
   to put the search box level with the dropdowns. Every field there keeps S&F's
   25px bottom margin while the chips have none, hence the chip offsets. */
.kt-inside-inner-col:has(> .wp-block-search-filter-control-reset):has(> .wp-block-search-filter-search-text):not(:has(> .wp-block-kadence-advancedheading)) {
	align-items: flex-end !important;
	/* 16px between fields, as on Recipes and the Shop. style.css gives these
	   fields a 20px right margin too, which doubled the gap; it's zeroed below. */
	column-gap: 16px !important;
}

.kt-inside-inner-col:has(> .wp-block-search-filter-control-reset):has(> .wp-block-search-filter-search-text):not(:has(> .wp-block-kadence-advancedheading)) > .search-filter-field {
	margin-right: 0 !important;
}

.kt-inside-inner-col:has(> .wp-block-search-filter-control-reset):has(> .wp-block-search-filter-search-text):not(:has(> .wp-block-kadence-advancedheading)) > .wp-block-search-filter-control-selection {
	top: -35px !important;
}

.kt-inside-inner-col:has(> .wp-block-search-filter-control-reset):has(> .wp-block-search-filter-search-text):not(:has(> .wp-block-kadence-advancedheading)) > .wp-block-search-filter-control-reset.wp-block-search-filter-control-reset {
	top: -38px !important;
}

/* Recipes: chips and Clear All have a column of their own beside the dropdown
   column, whose controls sit at its bottom. Bottom-align the chip column too,
   at the dropdowns' 51px height, so both share a centre line. */
.wp-block-kadence-column:has(> .kt-inside-inner-col > .wp-block-search-filter-control-reset):not(:has(> .kt-inside-inner-col > .wp-block-search-filter-search-text)):not(:has(> .kt-inside-inner-col > .wp-block-kadence-advancedheading)) {
	justify-content: flex-end !important;
}

.kt-inside-inner-col:has(> .wp-block-search-filter-control-reset):not(:has(> .wp-block-search-filter-search-text)):not(:has(> .wp-block-kadence-advancedheading)) {
	min-height: 51px;
}

/* Also the Shop, whose .flavor-archive row would otherwise lift the chips 5px. */
.kt-inside-inner-col:has(> .wp-block-search-filter-control-reset):not(:has(> .wp-block-search-filter-search-text)):not(:has(> .wp-block-kadence-advancedheading)) > .wp-block-search-filter-control-selection,
.kt-inside-inner-col:has(> .wp-block-search-filter-control-reset):not(:has(> .wp-block-search-filter-search-text)):not(:has(> .wp-block-kadence-advancedheading)) > .wp-block-search-filter-control-reset {
	top: 0 !important;
}

/* The Scoop: inline filters under the stacked header; Clear All level with the
   Search box and Categories dropdown. */
.flavor-archive .kt-inside-inner-col:has(> .wp-block-search-filter-control-reset):has(> .wp-block-kadence-advancedheading) > .wp-block-search-filter-control-reset {
	top: -13px !important;
}

.flavor-archive .kt-inside-inner-col:has(> .wp-block-search-filter-control-reset):has(> .wp-block-kadence-advancedheading) > .wp-block-search-filter-control-selection {
	top: -9px !important;
}

/* Flavors on phones: the filters stack, so drop the desktop alignment nudges and
   S&F's 25px field margins (they spaced the stacked dropdowns ~42px apart and
   pulled the chips and Clear All up against the last dropdown). The Search
   field's hidden label stops reserving space above the box. */
@media (max-width: 767px) {
	.kt-inside-inner-col:has(> .wp-block-search-filter-control-reset):has(> .wp-block-search-filter-search-text):not(:has(> .wp-block-kadence-advancedheading)) {
		row-gap: 12px !important;
		align-items: center !important;
	}
	.kt-inside-inner-col:has(> .wp-block-search-filter-control-reset):has(> .wp-block-search-filter-search-text):not(:has(> .wp-block-kadence-advancedheading)) > .search-filter-field {
		margin-bottom: 0 !important;
	}
	.kt-inside-inner-col:has(> .wp-block-search-filter-control-reset):has(> .wp-block-search-filter-search-text):not(:has(> .wp-block-kadence-advancedheading)) > .wp-block-search-filter-search-text .search-filter-label {
		display: none !important;
	}
	.kt-inside-inner-col:has(> .wp-block-search-filter-control-reset):has(> .wp-block-search-filter-search-text):not(:has(> .wp-block-kadence-advancedheading)) > .wp-block-search-filter-control-selection,
	.kt-inside-inner-col:has(> .wp-block-search-filter-control-reset):has(> .wp-block-search-filter-search-text):not(:has(> .wp-block-kadence-advancedheading)) > .wp-block-search-filter-control-reset.wp-block-search-filter-control-reset {
		top: 0 !important;
	}
}