/**
 * Products feed styling — loaded automatically by FS_Assets wherever the
 * feed appears (CPT archive template or the [formulary_product_grid]
 * element). Built to visually match the reference design; adjust the
 * variables below first if your brand colors/fonts differ.
 *
 * Selectors are deliberately specific (and a handful of properties use
 * !important) because page-builder themes like Salient ship broad global
 * heading/form styles (e.g. ".row .col h3", "h1,h2,h3,h4,h5,h6") that
 * otherwise win the cascade against a lightly-scoped stylesheet — without
 * this, fonts/sizes silently fall back to the theme's defaults.
 */

.formulary-product-grid,
#products-feed {
	--fs-ink: #16232b;
	--fs-muted: #6b7680;
	--fs-border: #e3e1db;
	--fs-image-bg: #f5f3ee;
	--fs-radius: 16px;

	/* Design-tab overrides — the WPBakery element sets these per-instance via
	   its own #uid { ... } style block; these are just the fallback defaults
	   used when nothing overrides them (e.g. the plain archive template). */
	--fs-grid-gap: 24px;
	--fs-card-padding: 0 16px 0 16px;
	--fs-image-padding: 0;
	--fs-banner-padding: 10px 15px 24px 15px;
	--fs-body-padding: 6px 16px 20px 16px;
	--fs-filters-padding: 0 16px 0 16px;
	--fs-card-radius: 16px;
	--fs-card-border-width: 1px;
	--fs-card-bg: #ffffff;
	--fs-card-border-color: #e3e1db;
	--fs-card-shadow: 0 10px 28px rgba(22, 35, 43, 0.08);
	--fs-title-color: #16232b;
	--fs-title-size: 18px;
	--fs-title-weight: 600;
	--fs-title-line-height: 1.3;
	--fs-pill-text-color: #16232b; /* Meta row (Form/THC/CBD line) text color. */
	--fs-filter-bg: #ffffff;
	--fs-filter-border-color: #e3e1db;
	--fs-filter-text-color: #16232b;
	--fs-filter-chevron-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2316232b' stroke-width='1.5' fill='none' fill-rule='evenodd'/%3E%3C/svg%3E");
	--fs-filter-search-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Ccircle cx='7' cy='7' r='5.5' stroke='%2316232b' stroke-width='1.4' fill='none'/%3E%3Cpath d='M11 11l4 4' stroke='%2316232b' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");
	--fs-search-max-width: 830px;
	--fs-image-radius: 10px;
	--fs-image-ratio: 1 / 1;
	--fs-image-fit: contain;
	--fs-image-scale: 1.4;
	--fs-pill-font-size: 13px; /* Meta row font size. */
	--fs-pill-font-weight: 400; /* Meta row font weight. */

	/* Filter dropdowns (Brands/Form checkbox panels, THC/CBD range sliders) */
	--fs-filter-panel-bg: #fefdfd;
	--fs-filter-panel-border: #d6d9da;
	--fs-checkbox-fill: #061e21;
	--fs-checkbox-border: #d6d9da;

	/* Card banner + meta row */
	--fs-card-meta-icon-size: 16px;
}

/* Only the standalone archive template needs its own container sizing —
   the WPBakery element (.formulary-product-grid) intentionally has no
   padding/max-width/width/margin of its own, so it just fills whatever
   space the surrounding WPBakery row/column gives it. */
#products-feed {
	max-width: 1280px;
	margin: 0 auto;
	padding: 48px 24px;
	box-sizing: border-box;
}

.formulary-product-grid *,
#products-feed * {
	box-sizing: border-box;
}

.products-feed-header h1 {
	font-weight: 400 !important;
	font-size: clamp(40px, 6vw, 64px) !important;
	line-height: 1.05 !important;
	color: var(--fs-ink) !important;
	margin: 0 0 4px !important;
}

.products-feed-header h2 {
	font-weight: 400 !important;
	font-size: clamp(26px, 4vw, 40px) !important;
	line-height: 1.15 !important;
	color: var(--fs-muted) !important;
	margin: 0 0 32px !important;
}

/* Filter bar */
.products-feed-filters {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	gap: 10px;
	align-items: flex-start;
	margin-bottom: 40px;
	padding: var(--fs-filters-padding, 0 16px 0 16px);
	position: relative;
}

@media (max-width: 1024px) {
	.products-feed-filters { flex-wrap: wrap !important; }

	/* Fixed to the bottom of the viewport, not sticky to the top — this
	   behaves like a persistent bottom action bar (the kind mobile apps
	   use), always visible regardless of scroll position, rather than a
	   header-style bar that only appears once scrolled past. position:
	   fixed removes it from the page's own document flow entirely, so
	   .products-feed-results gets bottom padding further down to stop
	   the last row of product cards being hidden underneath it —
	   without that, the fixed bar would simply overlap whatever content
	   happened to end up behind it. background-color is necessary, not
	   decorative — with a transparent background the product grid would
	   be visible scrolling underneath the gaps around the search input
	   and filter icon. */
	.products-feed-filters {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 50;
		background-color: #fff;
		margin: 0;
		padding: 12px 16px;
		box-shadow: 0 -4px 12px rgba(22, 35, 43, 0.08);
	}
}

/* --- Filter drawer (Brands/Form/THC/CBD collapse into this at tablet
   and below) and its icon toggle, matching the reference "sliders" icon.
   Above the breakpoint, .fs-filter-drawer is display:contents — it isn't
   a real box at all, so Brand/Form/THC/CBD sit directly in
   .products-feed-filters' flex row exactly as if this wrapper didn't
   exist. Below the breakpoint it becomes the actual sliding panel. */
.fs-filter-drawer {
	display: contents;
}

.fs-filter-drawer-header,
.fs-filter-drawer-backdrop {
	display: none;
}

.fs-filter-drawer-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	flex: none;
	background-color: var(--fs-filter-bg, #ffffff) !important;
	border: 1px solid #061E2129 !important;
	border-radius: 6px !important;
	color: #061E21;
	cursor: pointer;
	padding: 0 !important;
}

@media (max-width: 1024px) {
	.fs-filter-drawer-toggle {
		display: inline-flex;
	}

	.fs-filter-drawer {
		display: flex;
		flex-direction: column;
		gap: 12px;
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		width: min(340px, 85vw);
		background: var(--fs-filter-panel-bg, #fefdfd);
		box-shadow: -12px 0 32px rgba(6, 30, 33, 0.18);
		padding: 20px;
		overflow-y: auto;
		/* Deliberately very high — needs to sit above whatever the theme's
		   own sticky nav/announcement-bar stack is using, not just above
		   this plugin's own content. A "reasonable" value like 1001 lost
		   to Salient's own header chrome in practice. */
		z-index: 999999;
		transform: translateX(100%);
		transition: transform 0.25s ease;
	}

	.fs-filter-drawer.is-open {
		transform: translateX(0);
	}

	.fs-filter-drawer-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-bottom: 12px;
		margin-bottom: 4px;
		border-bottom: 1px solid #061E2129;
	}

	.fs-filter-drawer-title {
		font-family: 'Biennale', sans-serif;
		font-weight: 600;
		font-size: 18px;
		color: #061E21;
	}

	.fs-filter-drawer-close {
		display: flex;
		background: none;
		border: none;
		padding: 4px;
		margin: -4px;
		color: #061E21;
		cursor: pointer;
	}

	.fs-filter-drawer-backdrop {
		display: block;
		position: fixed;
		inset: 0;
		background: rgba(6, 30, 33, 0.4);
		z-index: 999998; /* one below the drawer itself, same reasoning as above */
		opacity: 0;
		pointer-events: none;
		transition: opacity 0.25s ease;
	}

	.fs-filter-drawer-backdrop.is-open {
		opacity: 1;
		pointer-events: auto;
	}

	/* Each filter becomes a full-width accordion section — closed by
	   default, tap the heading to expand. (An earlier version forced
	   these permanently open, which meant scrolling through every Brand
	   and Form checkbox just to reach THC/CBD — closed-by-default with
	   expand-on-tap is both the more standard mobile filter pattern and a
	   shorter drawer.) The click-to-toggle behavior itself is unchanged
	   from the desktop dropdowns — same .fs-filter-toggle click handler,
	   same .is-open class — this block only removes the drawer-specific
	   overrides that were disabling it. */
	.fs-filter-drawer .fs-filter-dropdown {
		width: 100%;
	}

	.fs-filter-drawer .fs-filter-toggle {
		width: 100%;
		justify-content: space-between;
	}

	.fs-filter-drawer .fs-filter-dropdown.is-open .fs-filter-toggle {
		border-radius: 6px 6px 0 0 !important;
		border-bottom-color: transparent !important;
		/* No box-shadow here — see .fs-filter-dropdown.is-open below for
		   why. A shadow directly on this button would wrap all four of
		   its own sides, including the bottom edge shared with the panel
		   — visible as a highlighted line cutting across exactly where
		   the two are meant to look joined, regardless of the
		   border-bottom-color:transparent set above (a box-shadow is a
		   separate effect from border and isn't affected by making the
		   border itself transparent). */
		box-shadow: none !important;
	}

	/* The browser's own default focus outline only ever appeared on the
	   toggle button itself, never extending onto the panel below it —
	   exactly the kind of mismatch that made them read as two separate
	   things rather than one box. Suppressed here in favour of the
	   shared-parent box-shadow below, which is the same fix applied
	   consistently rather than something narrower that only addresses
	   the focus-outline case specifically. */
	.fs-filter-drawer .fs-filter-toggle:focus {
		outline: none;
	}

	/* Applied to .fs-filter-dropdown itself — the shared parent
	   wrapping both the toggle and its panel — rather than to the two
	   pieces individually. A shadow on the parent draws one continuous
	   shape around its whole bounding box (button and expanded panel
	   together), with no seam at the point where they meet the way two
	   separately-shadowed pieces would have. This is what actually
	   makes "one container" rather than "two adjacent containers that
	   happen to line up." */
	.fs-filter-drawer .fs-filter-dropdown.is-open {
		box-shadow: 0 0 0 3px rgba(22, 35, 43, 0.08);
		border-radius: 6px;
	}

	/* Matches the toggle's own border color/width exactly (rather than
	   the --fs-filter-panel-border variable used for the desktop
	   floating-dropdown version of this panel) specifically so the two
	   read as one continuous box rather than two separately-bordered
	   pieces that happen to be stacked — which is what made them look
	   detached from each other once expanded. Rounded only at the
	   bottom, and pulled up 1px to sit flush against the toggle's own
	   bottom edge, since that edge's border was just made transparent
	   above rather than removed outright — removing it entirely would
	   have shifted the button's height by a pixel when toggled open. */
	.fs-filter-drawer .fs-filter-panel {
		display: none;
		position: static !important;
		box-shadow: none;
		/* Matches .fs-filter-dropdown.is-open .fs-filter-toggle's own
		   active-state border-color exactly (var(--fs-filter-text-color,
		   #16232b)) rather than the toggle's default/inactive border
		   color (#061E2129) — the panel is only ever visible while the
		   toggle is in that active state, so it should share that
		   state's color, not the toggle's resting one. */
		border: 1px solid var(--fs-filter-text-color, #16232b);
		border-top: none;
		border-radius: 0 0 6px 6px;
		margin: -1px 0 0;
		padding: 8px 12px 12px;
		max-height: none;
	}

	.fs-filter-drawer .fs-filter-dropdown.is-open .fs-filter-panel {
		display: block;
	}
}

body.fs-filter-drawer-open {
	overflow: hidden;
}

/* --- Checkbox / range dropdowns (Brands, Form, THC, CBD) --- */
.fs-filter-dropdown {
	position: relative;
	flex: 0 0 auto;
}

.fs-filter-toggle {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background-color: var(--fs-filter-bg, #ffffff) !important;
	border: 1px solid #061E2129 !important;
	border-width: 1px !important;
	border-radius: 6px !important;
	padding: 8px 16px 8px 16px !important;
	font-family: 'Biennale', sans-serif !important;
	font-weight: 400 !important;
	font-style: normal !important;
	font-size: 16px !important;
	line-height: 22px !important;
	color: var(--fs-filter-text-color, #16232b) !important;
	cursor: pointer;
	box-shadow: 0 1px 2px rgba(22, 35, 43, 0.04) !important;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
	white-space: nowrap;
}

.fs-filter-toggle:hover {
	border-color: var(--fs-filter-text-color, #16232b) !important;
}

.fs-filter-dropdown.is-open .fs-filter-toggle {
	border-color: var(--fs-filter-text-color, #16232b) !important;
	box-shadow: 0 0 0 3px rgba(22, 35, 43, 0.08) !important;
}

.fs-filter-chevron {
	color: #061E21;
	transition: transform 0.15s ease;
	flex: none;
}

.fs-filter-dropdown.is-open .fs-filter-chevron {
	transform: rotate(180deg);
}

.fs-filter-panel {
	display: none;
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	z-index: 20;
	min-width: 260px;
	background: var(--fs-filter-panel-bg, #fefdfd);
	border: 1px solid var(--fs-filter-panel-border, #d6d9da);
	border-radius: 10px;
	box-shadow: 0 12px 32px rgba(22, 35, 43, 0.12);
	padding: 8px;
	max-height: 340px;
	overflow-y: auto;
}

.fs-filter-dropdown.is-open .fs-filter-panel {
	display: block;
}

.fs-filter-row {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 8px;
	border-radius: 6px;
	cursor: pointer;
	margin: 0 !important;
}

.fs-filter-row:hover {
	background: var(--fs-image-bg);
}

.fs-filter-row-main {
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 0;
}

.fs-filter-row-label {
	font-family: 'Biennale', sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: 16px;
	line-height: 22px;
	color: var(--fs-ink);
	white-space: nowrap;
}

.fs-filter-dot {
	width: 22px;
	height: 22px;
	border-radius: 50%;
	flex: none;
}

.fs-filter-icon {
	width: 20px;
	height: 20px;
	flex: none;
	object-fit: contain;
}

/* Checkbox: the real input is visually hidden but stays focusable/clickable
   (label wraps it) — .fs-filter-checkbox-box is the painted square, matching
   the reference design's dark-fill-with-checkmark / empty-outline states. */
.fs-filter-checkbox {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}

.fs-filter-checkbox-box {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: 6px;
	border: 1.5px solid var(--fs-checkbox-border, #d6d9da);
	background: #fff;
	flex: none;
}

.fs-filter-checkbox-box svg {
	opacity: 0;
	transition: opacity 0.1s ease;
}

.fs-filter-checkbox:checked + .fs-filter-checkbox-box {
	background: var(--fs-checkbox-fill, #061e21);
	border-color: var(--fs-checkbox-fill, #061e21);
}

.fs-filter-checkbox:checked + .fs-filter-checkbox-box svg {
	opacity: 1;
}

.fs-filter-checkbox:focus-visible + .fs-filter-checkbox-box {
	box-shadow: 0 0 0 3px rgba(22, 35, 43, 0.15);
}

/* Radio (Sort): same hidden-input-plus-painted-indicator pattern as the
   checkboxes above, just a filled dot instead of a filled square+check. */
.fs-sort-radio {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}

.fs-filter-radio-dot {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	border: 1.5px solid var(--fs-checkbox-border, #d6d9da);
	background: #fff;
	flex: none;
}

.fs-filter-radio-dot::after {
	content: "";
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--fs-checkbox-fill, #061e21);
	opacity: 0;
	transition: opacity 0.1s ease;
}

.fs-sort-radio:checked + .fs-filter-radio-dot {
	border-color: var(--fs-checkbox-fill, #061e21);
}

.fs-sort-radio:checked + .fs-filter-radio-dot::after {
	opacity: 1;
}

.fs-sort-radio:focus-visible + .fs-filter-radio-dot {
	box-shadow: 0 0 0 3px rgba(22, 35, 43, 0.15);
}

/* --- Range sliders (THC, CBD) --- */
.fs-filter-panel--range {
	min-width: 240px;
	padding: 20px 16px 16px;
}

.fs-range-slider {
	position: relative;
	height: 4px;
	margin: 16px 4px 24px;
	background: none;
}

.fs-range-track {
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 4px;
	border-radius: 2px;
	background: var(--fs-checkbox-border, #d6d9da);
}

.fs-range-fill {
	position: absolute;
	top: 0;
	height: 4px;
	border-radius: 2px;
	background: var(--fs-checkbox-fill, #061e21);
}

.fs-range-handle {
	position: absolute;
	top: 50%;
	width: 18px;
	height: 18px;
	margin-left: -9px;
	border-radius: 50%;
	background: var(--fs-checkbox-fill, #061e21);
	border: 2px solid #fff;
	box-shadow: 0 1px 4px rgba(22, 35, 43, 0.3);
	transform: translateY(-50%);
	cursor: grab;
	padding: 0;
}

.fs-range-handle:active {
	cursor: grabbing;
}

.fs-range-inputs {
	display: flex;
	gap: 12px;
}

.fs-range-input-group {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 4px;
	font-family: 'Biennale', sans-serif;
	font-size: 12px;
	color: var(--fs-muted);
}

.fs-range-input {
	width: 100%;
	box-sizing: border-box;
	border: 1px solid var(--fs-filter-panel-border, #d6d9da);
	border-radius: 6px;
	padding: 8px 10px;
	font-family: 'Biennale', sans-serif;
	font-size: 14px;
	color: var(--fs-ink);
}

.fs-range-input:focus {
	outline: none;
	border-color: var(--fs-ink);
}

/* --- Search field --- */
.products-feed-search {
	position: relative;
	display: flex;
	align-items: center;
	flex: 1 1 var(--fs-search-max-width, 830px);
	max-width: var(--fs-search-max-width, 830px);
}

.products-feed-search-icon {
	position: absolute;
	left: 16px;
	color: var(--fs-filter-text-color, #16232b);
	pointer-events: none;
}

.products-feed-search input[type="search"] {
	appearance: none !important;
	-webkit-appearance: textfield !important;
	width: 100% !important;
	background-color: var(--fs-filter-bg, #ffffff) !important;
	border: 1px solid #061E2129 !important;
	border-width: 1px !important;
	border-radius: 6px !important;
	padding: 8px 16px 8px 42px !important;
	font-family: 'Biennale', sans-serif !important;
	font-weight: 400 !important;
	font-style: normal !important;
	font-size: 16px !important;
	line-height: 22px !important;
	color: var(--fs-filter-text-color, #16232b) !important;
	margin: 0 !important;
	box-shadow: 0 1px 2px rgba(22, 35, 43, 0.04) !important;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.products-feed-search input[type="search"]::placeholder {
	color: var(--fs-filter-text-color, #16232b);
	opacity: 0.55;
}

.products-feed-search input[type="search"]::-webkit-search-decoration,
.products-feed-search input[type="search"]::-webkit-search-cancel-button,
.products-feed-search input[type="search"]::-webkit-search-results-button,
.products-feed-search input[type="search"]::-webkit-search-results-decoration {
	-webkit-appearance: none !important;
}

.products-feed-search input[type="search"]:focus {
	outline: none;
	border-color: var(--fs-filter-text-color, #16232b) !important;
	box-shadow: 0 0 0 3px rgba(22, 35, 43, 0.08) !important;
}

.products-feed-search-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	flex: none;
	background-color: var(--fs-filter-bg, #ffffff) !important;
	border: 1px solid #061E2129 !important;
	border-radius: 6px !important;
	color: #061E21;
	cursor: pointer;
	padding: 0 !important;
}

.products-feed-search-close {
	display: none;
}

@media (max-width: 1024px) {
	/* Collapsed to an icon by default; .is-open (added on click, or
	   server-rendered when a search term is already active) expands it
	   to a full-width row instead of nowrap fighting the drawer toggle
	   and count text for space. */
	.products-feed-search-toggle {
		display: inline-flex;
	}

	.products-feed-search {
		display: none;
	}

	.products-feed-search.is-open {
		display: flex;
		flex: 1 1 100%;
		max-width: 100%;
		order: -1; /* full-width row, ahead of whatever else is on this line */
	}

	.products-feed-search.is-open input[type="search"] {
		padding-right: 42px; /* room for the close (×) button on the right */
	}

	.products-feed-search-close {
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		right: 10px;
		top: 50%;
		transform: translateY(-50%);
		width: 24px;
		height: 24px;
		background: none;
		border: none;
		padding: 0;
		color: #061E21;
		cursor: pointer;
	}
}

@media (max-width: 640px) {
	/* True mobile drops the tap-to-expand behavior entirely — the search
	   field just sits open by default, sharing its row with the filter
	   drawer icon, matching the reference layout. The 1024px rules above
	   still apply at this width too (that's how CSS cascades), so this
	   block exists purely to override the specific bits that don't apply
	   here: no toggle icon, no collapsed state, no reserved space for a
	   close button that no longer shows. */
	.products-feed-search-toggle {
		display: none !important;
	}

	.products-feed-search {
		display: flex !important;
		flex: 1 1 auto !important;
		max-width: none !important;
		order: 0 !important;
	}

	.products-feed-search.is-open input[type="search"],
	.products-feed-search input[type="search"] {
		padding-right: 16px !important;
	}

	.products-feed-search-close {
		display: none !important;
	}
}

/* Matches .fs-filter-drawer-toggle's own background, border, border-radius,
   and padding exactly (rather than approximating similar-looking values)
   so the two read as a matched pair sitting side by side, not two
   separately-styled buttons that happen to be near each other. Sized to
   the same 40x40 for the same reason.

   margin stays at 0 deliberately, on both states — .products-feed-filters
   already has its own gap:10px spacing every flex child consistently, an
   earlier version of this also added margin-left:8px on top of that gap
   specifically for the visible state, which doesn't replace the gap but
   stacks with it (10px + 8px = 18px), leaving a visibly wider gap here
   than everywhere else in the same row. */
.products-feed-filters-clear {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 0;
	height: 40px;
	overflow: hidden;
	opacity: 0;
	background-color: var(--fs-filter-bg, #ffffff) !important;
	border: 1px solid #061E2129 !important;
	border-radius: 6px !important;
	color: #061E21;
	cursor: pointer;
	padding: 0 !important;
	margin: 0;
	flex: 0 0 auto;
	transition: width 0.25s ease, opacity 0.2s ease;
}

.products-feed-filters-clear.is-visible {
	width: 40px;
	opacity: 1;
}

.products-feed-filters-clear:hover {
	border-color: var(--fs-filter-text-color, #16232b) !important;
}

.products-feed-filters-clear svg {
	flex: none;
}

.products-feed-count {
	margin-left: auto;
	font-family: 'Biennale', sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: 16px;
	line-height: 22px;
	color: #061E21;
	white-space: nowrap;
	flex: 0 0 auto;
}

@media (max-width: 640px) {
	.products-feed-count {
		margin-left: 0;
		flex: 1 1 100%;
		text-align: left;
	}
}

@media (max-width: 1024px) {
	/* The original inline copy now lives inside the fixed-to-bottom
	   .products-feed-filters bar — fine on desktop, where there's no
	   fixed bar and it sits inline with Brands/Form/Sort/Search exactly
	   where it should, but not the right home for it on mobile once
	   that whole bar detaches from the page's normal flow and pins
	   itself to the bottom of the screen. Hidden here in favour of
	   .products-feed-count--top instead, which has its own fixed home
	   near the top of the page regardless of where the search/filter
	   bar itself ends up. */
	.products-feed-count {
		display: none;
	}
}

.products-feed-count--top {
	display: none;
}

@media (max-width: 1024px) {
	.products-feed-count--top {
		display: block;
		font-family: 'Biennale', sans-serif;
		font-weight: 400;
		font-size: 16px;
		color: #061E21;
		margin: 0 0 16px;
	}
}

/* Kept hidden everywhere now, including within the drawer itself. This
   used to be shown at max-width:1024px, replacing the original inline
   copy next to the search bar, because that original copy would wrap
   onto its own orphaned-looking line once search and the filter icon
   were also competing for space there. That crowding no longer applies
   now that the whole bar is fixed to the bottom of the screen instead of
   sitting inline at the top, so the original position works again and
   this drawer-specific copy is unused — left in place (markup and
   translation string both) rather than removed outright, in case the
   inline copy ever needs to move again in the future. */
.products-feed-count--drawer {
	display: none;
}

/* Results wrapper — fades slightly while an AJAX filter request is in flight */
.products-feed-results {
	transition: opacity 0.15s ease;
}

@media (max-width: 1024px) {
	/* Matches the fixed bar's own height (padding + content) roughly —
	   exact to the pixel isn't critical here, a little extra breathing
	   room below the last product card is harmless, while too little
	   would leave it visibly tucked under the bar. */
	.products-feed-results {
		padding-bottom: 88px;
	}
}

/* Grid — the archive template (#products-feed) auto-fits based on
   container width. The WPBakery element instead gets its exact
   large-desktop/desktop/tablet/phone column counts from its own
   per-instance <style> block (see FS_Grid_Element::render()), driven by
   the Columns setting in the Layout tab — nothing static to set here for it. */
.products-feed-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: var(--fs-grid-gap);
}

@media (max-width: 900px) {
	#products-feed .products-feed-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

@media (max-width: 600px) {
	#products-feed .products-feed-grid { grid-template-columns: 1fr !important; }
}

@media (max-width: 600px) {
	/* grid_gap is one fixed value across every breakpoint, not a
	   responsive setting — its default (24px) is sized with desktop's
	   wider columns in mind. Left as-is on a phone screen, that same
	   24px would eat noticeably into each card's own width whenever two
	   narrow columns are sharing that screen, on top of whatever the
	   columns themselves already need to shrink for. Applied
	   unconditionally here rather than only when 2 columns are active,
	   since a tighter gap reads fine at any column count on a small
	   screen and there's no reliable way to detect "2 columns
	   specifically" from CSS alone — column count is a per-instance
	   admin setting, not a fixed breakpoint. */
	.products-feed-grid {
		gap: min(var(--fs-grid-gap), 12px);
	}
}

/* Card */
.product-card {
	display: block;
	background: var(--fs-card-bg);
	border: var(--fs-card-border-width) solid var(--fs-card-border-color);
	border-radius: var(--fs-card-radius);
	overflow: hidden; /* keeps the banner's corners matching the card's own radius */
	text-decoration: none !important;
	color: inherit !important;
	transition: box-shadow 0.15s ease, transform 0.15s ease, background 0.15s ease, border-color 0.15s ease;
	/* Makes the card itself a query container, sized by its own actual
	   rendered width (not the viewport's) — see the @container rules
	   below. This is what lets a 2-column mobile layout (or any other
	   column count that happens to produce a similarly narrow card)
	   scale its content down correctly without needing its own
	   dedicated viewport-width media query for every possible
	   columns/viewport combination. */
	container-type: inline-size;
	container-name: fs-product-card;
}


.formulary-product-grid[data-card-background="transparent"] .product-card,
#products-feed.card-background-transparent .product-card {
	background: transparent;
}

.formulary-product-grid[data-card-border="hide"] .product-card,
#products-feed.card-border-hide .product-card {
	border-color: transparent;
}

.product-card:hover {
	box-shadow: var(--fs-card-shadow);
	transform: translateY(-2px);
}

/* Brand banner — background color comes from the Brand term's own color
   (Products > Brands), inline per-card since it varies by brand; layout
   spacing stays in this stylesheet. No border-radius of its own — the
   notch effect at its bottom corners comes from .product-card-image
   overlapping it from below (see that rule's comment), not from rounding
   the banner itself. Its top corners still get the correct rounding for
   free from .product-card's own overflow:hidden clip. */
.product-card-banner {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--fs-banner-padding, 10px 15px 24px 15px);
	min-height: 64px;
}

.product-card-banner-logo {
	max-height: 28px !important;
	width: auto;
	object-fit: contain;
}

.product-card-banner-name {
	font-family: 'Biennale', sans-serif;
	font-size: 20px;
	font-weight: 700;
	color: #ffffff;
	text-align: center;
	/* A light text-shadow keeps the wordmark readable against light brand
	   colors (e.g. Find's yellow) without needing a per-brand text-color
	   setting of its own. */
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

/* Rounded top corners + a negative top margin pull this box up over the
   banner's bottom edge. Where the corner is rounded away, the banner
   (sitting behind, still a plain rectangle) shows through underneath —
   that's the "notch" in the reference design, not a radius on the banner
   itself. The overlap amount matches the card's own radius so the curve
   reads as one continuous arc rather than a mismatched double-curve. */
.product-card-image {
	aspect-ratio: var(--fs-image-ratio, 1 / 1);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	background: var(--fs-image-bg);
	position: relative;
	margin-top: calc(-1 * var(--fs-card-radius));
	border-top-left-radius: var(--fs-card-radius);
	border-top-right-radius: var(--fs-card-radius);
	padding: var(--fs-image-padding, 0);
}

.product-card-image img {
	/* No padding here — the container above already insets the image via
	   its own padding. Stacking a second padding on the <img> itself was
	   shrinking every product photo by an extra 24px on top of that,
	   independent of the "Image zoom" setting meant to be the one lever
	   for sizing. */
	width: 100%;
	height: 100%;
	object-fit: var(--fs-image-fit, contain);
	transform: scale(var(--fs-image-scale, 1));
}

.product-card-image-placeholder {
	width: 100%;
	height: 100%;
}

/* Meta row — inline icon+label items (Form/THC/CBD), replacing the old
   pill badges. The Form label is uppercased here as a display-only
   transform; the dropdown/filter list elsewhere still shows title case. */
.product-card-meta {
	display: flex !important;
	align-items: center !important;
	gap: 16px;
	flex-wrap: wrap;
	padding: var(--fs-card-padding, 0 16px 0 16px);
	margin-top: 0;
	font-family: 'Biennale', sans-serif;
	font-size: var(--fs-pill-font-size, 12px);
	font-weight: var(--fs-pill-font-weight, 400);
	color: var(--fs-pill-text-color, var(--fs-muted));
}

.product-card-meta-item {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px;
    white-space: nowrap;
    border: 1px solid #061E2129;
    padding: 4px 10px;
    border-radius: 50px;
    line-height: initial;
	background: rgb(6 30 33 / 2%);
}

.product-card-meta-form {
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.product-card-meta-icon {
	width: var(--fs-card-meta-icon-size) !important;
	height: var(--fs-card-meta-icon-size) !important;
	flex: none;
	object-fit: contain;
}

.product-card-body {
	min-width: 0;
	padding: var(--fs-body-padding, 6px 16px 20px 16px);
}

.formulary-product-grid .product-card-title,
#products-feed .product-card-title {
	font-size: var(--fs-title-size) !important;
	font-weight: var(--fs-title-weight) !important;
	line-height: var(--fs-title-line-height, 1.3) !important;
	color: var(--fs-title-color) !important;
	margin: 0 !important;
}

/* Pagination */
.products-feed-pagination {
	margin-top: 48px;
	display: flex;
	gap: 8px;
	justify-content: center;
}

.products-feed-pagination .page-numbers {
	padding: 8px 14px;
	border: 1px solid var(--fs-border);
	border-radius: 8px;
	text-decoration: none;
	color: var(--fs-ink);
	font-size: 14px;
}

.products-feed-pagination .page-numbers.current {
	background: var(--fs-ink);
	color: #fff;
	border-color: var(--fs-ink);
}

.products-feed-pagination .page-numbers.dots {
	border: none;
}

.products-feed-empty {
	color: var(--fs-muted);
}

.products-feed-load-sentinel {
	height: 1px;
}

.products-feed-loading-more {
	text-align: center;
	color: var(--fs-muted);
	font-size: 14px;
	margin: 24px 0 0;
}

/* Moved to the end of this file deliberately — see the comment
   above the @container rule below for why. These override several
   .product-card-* base rules (banner, logo, meta items/icons, title)
   using equal-specificity !important declarations on the same
   properties. CSS resolves ties between equal-specificity !important
   rules by source order alone — being inside a media or container
   query does not give a rule any extra priority over one that isn't.
   Previously these blocks sat earlier in the file than the base
   .product-card-banner-logo / .product-card-meta-icon rules they were
   meant to override, so the later base rules silently won regardless
   of viewport width — the mobile-specific values were being correctly
   computed and then immediately overridden by rules appearing after
   them. Keeping this section last in the file guarantees it always
   wins against anything defined earlier, regardless of what future
   edits add above it. */
/* Threshold picked to match a typical 2-column mobile card (roughly a
   375–414px phone width, minus grid gap and card padding, split two
   ways lands around 160–190px) without also catching a normal
   single-column mobile card or a 3-column tablet layout, both of which
   are comfortably wider than this. Overrides the underlying CSS
   variables directly (rather than each individual element's own
   property) so this correctly scales down whatever the admin has this
   instance's own sizes configured to, not just this stylesheet's
   defaults. */
@container fs-product-card (max-width: 200px) {
	.product-card {
		--fs-title-size: 14px;
		--fs-pill-font-size: 10px;
		--fs-banner-padding: 8px 10px 14px 10px;
		--fs-body-padding: 4px 10px 14px 10px;
		--fs-card-padding: 0 10px 0 10px;
		--fs-image-scale: 1.1;
	}
	.product-card-banner {
		min-height: 42px !important;
		padding: 0px 0px 15px 0 !important;
	}
	.product-card-banner-logo {
		max-height: 16px !important;
		max-width: 80px !important;
		width: auto;
		object-fit: contain;
	}
	.product-card-banner-name {
		font-size: 14px;
	}
	.product-card-meta {
		gap: 6px;
	}
	.product-card-meta-item {
		display: inline-flex !important;
		align-items: center !important;
		gap: 4px;
		white-space: nowrap;
		border: 1px solid #061E2129;
		padding: 2px 4px;
		border-radius: 50px;
		line-height: initial;
		background: rgb(6 30 33 / 2%);
	}
	.product-card-meta-icon {
		width: 12px !important;
		height: 12px !important;
	}
	.product-card-title {
		display: -webkit-box;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}
}

/* Guaranteed fallback at the exact breakpoint the mobile column count
   itself switches at (see class-fs-grid-element.php's own
   @media(max-width:600px) block for columns_responsive) — same scaled
   values as the @container rule above, applied directly by viewport
   width instead. A container query needs the browser to correctly
   establish container-type:inline-size on a CSS grid item and then
   evaluate its resolved track width, which is a comparatively new and
   more failure-prone mechanism than a plain viewport media query — one
   that's worked identically in every browser for over a decade. Kept
   as a second layer alongside the @container rule rather than a
   replacement for it, since this specific breakpoint only covers the
   "mobile" device tab specifically — a 3-column tablet layout landing
   at a similarly narrow card width wouldn't be caught by this media
   query alone, only by the container query. */
@media (max-width: 600px) {
	.product-card {
		--fs-title-size: 14px;
		--fs-pill-font-size: 10px;
		--fs-banner-padding: 8px 10px 14px 10px;
		--fs-body-padding: 4px 10px 14px 10px;
		--fs-card-padding: 0 10px 0 10px;
		--fs-image-scale: 1.1;
	}
	.product-card-banner {
		min-height: 42px !important;
		padding: 0px 0px 15px 0 !important;
	}
	.product-card-banner-logo {
		max-height: 16px !important;
		max-width: 80px !important;
		width: auto;
		object-fit: contain;
	}
	.product-card-banner-name {
		font-size: 14px;
	}
	.product-card-meta {
		gap: 6px;
	}
	.product-card-meta-item {
		display: inline-flex !important;
		align-items: center !important;
		gap: 4px;
		white-space: nowrap;
		border: 1px solid #061E2129;
		padding: 2px 4px;
		border-radius: 50px;
		line-height: initial;
		background: rgb(6 30 33 / 2%);
	}
	.product-card-meta-icon {
		width: 12px !important;
		height: 12px !important;
	}
	.product-card-title {
		display: -webkit-box;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}
}