/**
 * CWS Filters Pro — "Shop Filters" custom panel (design 1a).
 *
 * Everything is scoped under .shopf, which only ever exists inside a
 * .cws-fpro-panel rendered by filters-panel.php. The design's prototype used
 * generic names (.card, .chip, .field); those would collide with any theme, so
 * every class here carries the shopf- prefix.
 *
 * Radius is 0 throughout — the squared brand look is the point of the design,
 * not an oversight.
 *
 * Manrope is what the design uses. Loading a web font is the theme's call, so
 * the @import is commented out and the panel inherits the theme's font until
 * you turn it on.
 */

/* @import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap'); */

/* Two selectors here render with no .shopf ancestor and would otherwise resolve
   every token to nothing:

   .shopf-sortbar  filters-panel.js parks the sort control in it outside the
                   panel card.
   .cws-fpro       the widget's mobile sheet chrome — head, close button, foot —
                   is the plugin's own markup wrapped around the panel, never
                   inside it, and the blocks near the end of this file restyle it.

   Only the custom properties are shared. `color` stays on this design's own two
   roots: inherited onto .cws-fpro it would repaint every product card in the
   listing, which is not this stylesheet's to touch. */
.shopf,
.shopf-sortbar,
.cws-fpro {
	--shopf-ink:        #16333f;
	--shopf-ink-2:      #33525d;
	--shopf-ink-3:      #7c8d95;
	--shopf-ink-4:      #8a9aa1;
	--shopf-ph:         #9bacb4;

	--shopf-accent:     #0b7da9;
	--shopf-accent-dk:  #096a90;
	--shopf-accent-sf:  #eaf4f8;
	--shopf-accent-hv:  #eef7fb;
	--shopf-accent-bg:  #f2f8fb;

	--shopf-green:      #7cb342;
	--shopf-green-dk:   #6aa236;
	--shopf-green-lbl:  #6f9e34;
	--shopf-green-badge:#9fd94b;

	--shopf-line:       #e2e9ec;
	--shopf-line-2:     #dbe6ea;
	--shopf-line-3:     #eef2f4;
	--shopf-line-4:     #f2f5f7;
	--shopf-box:        #cbd8dd;

	--shopf-surface:    #f7fafb;
	--shopf-surface-2:  #f4f8fb;
	--shopf-surface-3:  #fbfdfe;

	--shopf-danger:     #d0453b;

	--shopf-card-shadow: 0 30px 70px -34px rgba(18, 48, 60, .38);
	--shopf-pop-shadow:  0 24px 50px -26px rgba(18, 48, 60, .4);
	--shopf-glow:        0 6px 16px -10px rgba(11, 125, 169, .5);
}

/* Kept off .cws-fpro deliberately. The widget root wraps the product grid as
   well as the panel, and the plugin sets `color: var(--cws-fpro-ink)` on it at
   the same (0,1,0) — this stylesheet loads later, so listing it here would
   repaint every product card in the listing on the way past. */
.shopf,
.shopf-sortbar {
	/* font-family: 'Manrope', system-ui, sans-serif; */
	color: var(--shopf-ink-2);
}

.shopf *,
.shopf *::before,
.shopf *::after,
.shopf-sortbar,
.shopf-sortbar *,
.shopf-sortbar *::before,
.shopf-sortbar *::after {
	box-sizing: border-box;
}

@keyframes shopf-drop {
	from { opacity: 0; transform: translateY(-6px); }
	to   { opacity: 1; transform: none; }
}

/* The mobile picker arrives as a screen, not as a dropdown. */
@keyframes shopf-screen {
	from { opacity: 0; transform: scale(1.015); }
	to   { opacity: 1; transform: none; }
}

/* ---------- the card ---------- */

.shopf-card {
	background: #fff;
	border: 1px solid var(--shopf-line);
	padding: 30px 32px 26px;
}

.shopf-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
}

/* ---------- a field ---------- */

.shopf-field {
	position: relative;
	min-width: 0;
}

.shopf-field__label {
	display: block;
	margin-bottom: 9px;
	font-size: 11.5px;
	font-weight: 800;
	letter-spacing: .7px;
	text-transform: uppercase;
	color: var(--shopf-green-lbl);
}

/*
 * Scoped under .shopf, not because the panel needs the extra nesting but
 * because the trigger is a <button>: the Elementor kit ships
 * ".elementor-kit-9 button { background-color: #72A82C; color: #373737 }" on
 * the body, which is (0,1,1) and beats a bare ".shopf-trig" (0,1,0) — the
 * triggers would render green. Two classes outrank one class plus one element.
 * Same reason for .shopf-more below. Do not flatten these back.
 */
.shopf .shopf-trig {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	min-height: 50px;
	padding: 7px 16px;
	margin: 0;
	background: #fff;
	border: 1.5px solid var(--shopf-line);
	border-radius: 0;
	text-align: left;
	font: inherit;
	color: var(--shopf-ink);
	cursor: pointer;
	transition: border-color .15s, box-shadow .15s;
}

.shopf .shopf-trig:hover,
.shopf .shopf-trig:focus-visible {
	border-color: var(--shopf-accent);
	box-shadow: var(--shopf-glow);
	outline: none;
}

.shopf .shopf-field[data-open="true"] .shopf-trig {
	border-color: var(--shopf-accent);
	box-shadow: var(--shopf-glow);
}

.shopf-trig__val {
	flex: 1;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	min-width: 0;
}

.shopf-ph {
	font-size: 14.5px;
	font-weight: 600;
	color: var(--shopf-ph);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.shopf-chip {
	display: inline-flex;
	align-items: center;
	padding: 5px 8px;
	background: var(--shopf-accent-sf);
	color: var(--shopf-accent);
	font-size: 12.5px;
	font-weight: 700;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.shopf-chip.is-more {
	background: var(--shopf-line-4);
	color: var(--shopf-ink-3);
}

.shopf-n {
	display: none;
}

.shopf .shopf-trig .shopf-chev {
	flex: 0 0 auto;
	color: var(--shopf-accent);
	transition: transform .18s;
}

.shopf-field[data-open="true"] .shopf-chev {
	transform: rotate(180deg);
}

/* ---------- the dropdown ---------- */

/* The element also carries the plugin's .cws-fpro-sec-body, which ships
   "padding: 0 16px 16px" — an inset the accordion wanted and this popover does
   not: every row inside already brings its own padding and its borders are
   meant to run edge to edge. Both selectors are (0,1,0), so the winner would be
   decided by which stylesheet loads last; the .shopf prefix settles it. */
.shopf .shopf-pop {
	position: absolute;
	z-index: 30;
	top: calc(100% + 8px);
	left: 0;
	right: 0;
	padding: 0;
	background: #fff;
	border: 1.5px solid var(--shopf-line);
	box-shadow: var(--shopf-pop-shadow);
	animation: shopf-drop .18s ease;
}

.shopf-field[data-open="false"] .shopf-pop {
	display: none;
}

.shopf-popsearch {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 16px;
	background: var(--shopf-surface-2);
	border-bottom: 1px solid var(--shopf-line-3);
	color: var(--shopf-ph);
}

.shopf-popsearch input {
	flex: 1;
	min-width: 0;
	height: 24px;
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	color: var(--shopf-ink);
	outline: none;
}

.shopf-opts {
	max-height: 258px;
	overflow: auto;
}

.shopf-opt {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 11px 16px;
	margin: 0;
	border-bottom: 1px solid var(--shopf-line-4);
	cursor: pointer;
	transition: background .12s;
}

.shopf-opt:hover {
	background: var(--shopf-accent-hv);
}

.shopf-opt.is-child {
	padding-left: 34px;
}

.shopf-opt input[type="checkbox"] {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.shopf-box {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	background: #fff;
	border: 2px solid var(--shopf-box);
	color: transparent;
	transition: background .12s, border-color .12s;
}

.shopf-opt input:checked ~ .shopf-box {
	background: var(--shopf-green);
	border-color: var(--shopf-green);
	color: #fff;
}

.shopf-opt input:focus-visible ~ .shopf-box {
	outline: 2px solid var(--shopf-accent);
	outline-offset: 2px;
}

.shopf-opt input:checked ~ .shopf-optlbl {
	color: var(--shopf-ink);
	font-weight: 700;
}

.shopf-optlbl {
	flex: 1;
	min-width: 0;
	font-size: 14px;
	font-weight: 600;
	color: var(--shopf-ink-2);
}

.shopf-optn {
	flex: 0 0 auto;
	font-size: 12px;
	font-weight: 700;
	color: var(--shopf-ph);
}

.shopf-opt.is-disabled,
.shopf-opt:has(input:disabled) {
	opacity: .45;
	cursor: default;
}

.shopf .shopf-more {
	display: block;
	width: 100%;
	padding: 11px 16px;
	border: 0;
	border-top: 1px solid var(--shopf-line-4);
	background: none;
	font: inherit;
	font-size: 13px;
	font-weight: 800;
	color: var(--shopf-accent);
	cursor: pointer;
}

.shopf-native {
	padding: 14px 16px;
}

.shopf-popfoot {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 14px;
	border-top: 1px solid var(--shopf-line-3);
	background: var(--shopf-surface-3);
}

/* Both of these belong to the mobile picker only; the sheet block at the foot of
   this file turns them on. Kept in the markup rather than rendered conditionally
   because the same panel node travels between the aside and the sheet — there is
   no server round-trip to re-render it at the breakpoint.

   .shopf .shopf-popfoot .shopf-done, not .shopf .shopf-done: the confirm also
   carries .shopf-btn, and ".shopf .shopf-btn" in the buttons block below is
   (0,2,0) too — a tie the later rule wins, which put the green button back in
   the desktop dropdown. Three classes settle it, and the sheet block's
   ".cws-fpro.is-shopf-picking .shopf .shopf-done" is (0,4,0), so the picker
   still shows it. */
.shopf-pophead,
.shopf .shopf-popfoot .shopf-done {
	display: none;
}

/* ---------- buttons ----------
   Two classes / a descendant on every button rule: the Elementor kit styles
   bare <button> at (0,1,1), which beats a single class. */

.shopf .shopf-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 40px;
	padding: 0 18px;
	border: 0;
	border-radius: 0;
	background: var(--shopf-green);
	color: #fff;
	font: inherit;
	font-size: 13.5px;
	font-weight: 800;
	cursor: pointer;
	transition: background .15s;
}

.shopf .shopf-btn:hover,
.shopf .shopf-btn:focus-visible {
	background: var(--shopf-green-dk);
	color: #fff;
}

.shopf .shopf-ghost {
	padding: 4px;
	border: 0;
	background: none;
	font: inherit;
	font-size: 13px;
	font-weight: 800;
	color: var(--shopf-ink-4);
	cursor: pointer;
}

.shopf .shopf-ghost:hover {
	color: var(--shopf-ink-2);
}

/* ---------- search row ---------- */

.shopf-field--search {
	margin-top: 20px;
}

.shopf-search {
	position: relative;
	display: flex;
	align-items: center;
	gap: 12px;
	height: 54px;
	padding: 0 8px 0 50px;
	background: var(--shopf-surface);
	border: 1.5px solid var(--shopf-line);
	transition: border-color .15s, background .15s;
}

.shopf-search:hover,
.shopf-search:focus-within {
	border-color: var(--shopf-accent);
	background: #fff;
}

.shopf-search > svg {
	position: absolute;
	left: 16px;
	color: var(--shopf-accent);
	pointer-events: none;
}

.shopf-search input {
	flex: 1;
	min-width: 0;
	height: 100%;
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	font-size: 14.5px;
	font-weight: 500;
	color: var(--shopf-ink);
	outline: none;
}

.shopf-search input::placeholder {
	color: var(--shopf-ph);
}

.shopf .shopf-search .shopf-btn {
	flex: 0 0 auto;
	height: 38px;
	padding: 0 16px;
	font-size: 12px;
}

/* ---------- rule + footer ---------- */

.shopf-rule {
	height: 1px;
	margin: 24px 0 18px;
	background: var(--shopf-line-3);
}

.shopf-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
}

.shopf-foot__left {
	display: flex;
	align-items: center;
	gap: 18px;
	flex-wrap: wrap;
}

.shopf-sortgroup {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
}

.shopf-sortlbl {
	flex: 0 0 auto;
	font-size: 13px;
	font-weight: 700;
	color: var(--shopf-ink-3);
}

/* ---------- the mobile sort bar ----------
   Created by filters-panel.js between the panel and the product grid, and left
   empty on desktop — where the sort control belongs to the card footer instead.
   :empty rather than a toggled [hidden], so the bar has no state to keep in
   step with the media query. */

.shopf-sortbar {
	display: flex;
	align-items: center;
	margin: 0 0 16px;
}

.shopf-sortbar:empty {
	display: none;
}

.shopf-sortbar .shopf-sortgroup,
.shopf-sortbar .shopf-sel {
	flex: 1;
}

.shopf-sortbar .shopf-sel select {
	width: 100%;
}

.shopf-sel {
	position: relative;
	display: inline-flex;
	align-items: center;
	height: 40px;
	background: var(--shopf-accent-bg);
	border: 1px solid var(--shopf-line-2);
	transition: border-color .15s;
}

.shopf-sel:hover,
.shopf-sel:focus-within {
	border-color: var(--shopf-accent);
}

.shopf-sel select {
	height: 100%;
	padding: 0 34px 0 14px;
	border: 0;
	border-radius: 0;
	background: none;
	font: inherit;
	font-size: 13.5px;
	font-weight: 700;
	color: var(--shopf-ink-2);
	cursor: pointer;
	outline: none;
	appearance: none;
	-webkit-appearance: none;
}

.shopf-sel .shopf-chev {
	position: absolute;
	right: 10px;
	width: 15px;
	height: 15px;
	color: var(--shopf-accent);
	pointer-events: none;
}

.shopf .shopf-clear {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	font-size: 13px;
	font-weight: 700;
	color: var(--shopf-ink-4);
	cursor: pointer;
	transition: color .15s;
}

.shopf .shopf-clear:hover:not(:disabled) {
	color: var(--shopf-danger);
}

.shopf .shopf-clear:disabled {
	opacity: .45;
	cursor: default;
}

/* ---------- the two mobile triggers ----------
   "Filtriraj proizvode" above the grid and the floating "Filteri" pill are the
   same component in two placements, so they share one look: the brand green of
   the sheet's own "Primijeni", with the design's light-green count badge. Both
   are rendered inside the card by filters-panel.php and moved into the widget
   by filters-panel.js — see relocateTriggers() for why they cannot stay there.

   .cws-fpro .shopf-mobtrig, not .shopf .shopf-mobtrig: after the move neither
   button has a .shopf ancestor any more, and one class alone loses to the
   Elementor kit's ".elementor-kit-9 button" at (0,1,1). The widget root is the
   one ancestor both new homes share. */

.shopf-trigs {
	display: none;
}

.cws-fpro .shopf-mobtrig {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin: 0;
	border: 0;
	border-radius: 0;
	background: var(--shopf-green);
	color: #fff;
	font: inherit;
	font-size: 14px;
	font-weight: 800;
	cursor: pointer;
	transition: background .15s;
}

.cws-fpro .shopf-mobtrig:hover,
.cws-fpro .shopf-mobtrig:focus-visible {
	background: var(--shopf-green-dk);
	color: #fff;
}

.cws-fpro .shopf-mobtrig svg {
	flex: 0 0 auto;
}

/* ---------- the inline trigger ----------
   Created by filters-panel.js immediately before .shopf-sortbar, so the order
   down the page is: filter button, sort, results. Hidden above the phone
   breakpoint, where the whole card is on screen and a button that only opens it
   would be noise. 767px and not the 782px the sort bar uses: this is the width
   at which the plugin drops .cws-fpro-aside, i.e. the exact width at which the
   card stops being reachable. Between the two the card is still there. */

.shopf-mobbar {
	display: none;
	margin: 0 0 12px;
}

.shopf-mobbar .shopf-mobtrig {
	width: 100%;
	height: 52px;
	padding: 0 18px;
	font-size: 15px;
}

/* ---------- the floating pill ----------
   Bottom-right, above the grid, and revealed only once .shopf-mobbar has
   scrolled off the top — filters-panel.js carries that decision and sets
   .is-shopf-fab on the widget root.

   Hidden with visibility + opacity rather than display, so the entrance can
   actually animate and so the button is out of the tab order while it is away.
   position:fixed is safe here because the pill is a direct child of the widget
   root, which is a plain grid container: the plugin's own floating button lives
   in the same place for the same reason. */

.cws-fpro .shopf-mobtrig--fab {
	display: none;
	position: fixed;
	right: 16px;
	bottom: calc(16px + env(safe-area-inset-bottom, 0px));
	z-index: 95;
	height: 48px;
	padding: 0 20px;
	border-radius: 999px;
	box-shadow: 0 10px 26px rgba(20, 24, 30, .3);
	opacity: 0;
	visibility: hidden;
	transform: translateY(12px);
	pointer-events: none;
	transition: opacity .2s ease, transform .2s ease, visibility .2s;
}

.cws-fpro.is-shopf-fab .shopf-mobtrig--fab {
	opacity: 1;
	visibility: visible;
	transform: none;
	pointer-events: auto;
}

/* Last, so it beats .is-shopf-fab above at the same (0,2,0): with the sheet up
   the pill would be a button to open what is already open, floating over the
   scrim. Same behaviour the plugin gives its own. */
.cws-fpro.is-sheet-open .shopf-mobtrig--fab {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

@media (max-width: 767px) {
	.shopf-mobbar {
		display: block;
	}

	.cws-fpro .shopf-mobtrig--fab {
		display: inline-flex;
	}
}

@media (prefers-reduced-motion: reduce) {
	.cws-fpro .shopf-mobtrig--fab {
		transition: none;
		transform: none;
	}
}

.shopf-mobn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 18px;
	height: 18px;
	padding: 0 4px;
	background: var(--shopf-green-badge);
	color: var(--shopf-ink);
	font-size: 11px;
	font-weight: 800;
}

.shopf-res {
	font-size: 13.5px;
	font-weight: 600;
	color: var(--shopf-ink-3);
}

.shopf-res strong,
.shopf-res b {
	font-weight: 800;
	color: var(--shopf-ink);
}

/* No .shopf-chipbar rule: filters-panel.php does not render the active-filter
   chipbar. See the comment where it used to be for why, and for what to restore
   here alongside it. */

/* ---------- price / rating, borrowed from the plugin ---------- */

.shopf-native .cws-fpro-rng-fill,
.shopf-native .cws-fpro-preset[aria-pressed="true"],
.shopf-native .cws-fpro-rating[aria-pressed="true"] {
	background: var(--shopf-accent-sf);
	color: var(--shopf-accent);
}

.shopf-native .cws-fpro-pin input,
.shopf-native .cws-fpro-preset {
	border-radius: 0;
}

/* ---------- responsive ---------- */

@media (max-width: 1024px) {
	.shopf-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 782px) {
	.shopf-card {
		padding: 20px 18px 18px;
	}

	.shopf-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.shopf-foot {
		align-items: flex-start;
		flex-direction: column;
		gap: 14px;
	}
}

/* ---------- the plugin's mobile trigger ----------
   Now the fallback, not the way in. filters-panel.js puts this theme's own two
   triggers on the page and then sets .is-shopf-trigs on the widget root, which
   stands this one down — otherwise the phone would carry two floating pills
   that do the same thing. The class is set from the script rather than assumed
   here on purpose: if the script is missing or throws, nothing is stood down
   and the plugin's button is still there to open the sheet with.

   That fallback has to look right, so the repaint below stays. The button ships
   near-black (#241d17, --cws-fpro-cta) against a green brand, so repaint the
   token rather than the button: --cws-fpro-cta feeds nothing else, and the
   plugin's own armour rule .cws-fpro .cws-fpro-fab reads it, so overriding it
   here wins without having to out-specify anything. The same knob exists as the
   widget's "Filter button background" control if you would rather set it in
   Elementor.

   The badge is the design's own — a blue count on a green pill reads as a
   different component.

   Note the widget's "Mobile trigger" setting no longer decides anything on a
   phone: this theme renders both triggers whatever it is set to. It still
   decides whether the button below exists at all to be the fallback — the
   plugin only prints it for `fab` and `bar`, not for `inline`. */

.cws-fpro.is-shopf-trigs .cws-fpro-fab {
	display: none;
}

.cws-fpro {
	--cws-fpro-cta:       #7cb342;
	--cws-fpro-cta-hover: #6aa236;
}

.cws-fpro .cws-fpro-fab:hover,
.cws-fpro .cws-fpro-fab:focus-visible {
	background: var(--cws-fpro-cta-hover);
	color: #fff;
}

.cws-fpro .cws-fpro-fab .cws-fpro-fab-n {
	background: #9fd94b;
	color: #16333f;
}

/* ---------- sheet stacking ----------
   The plugin ships the sheet at z-index 100, which loses to theme and third-party
   fixed chrome that reaches for the usual five-nines. Raised here so the open
   sheet sits above all of it.

   This does not fight the mobile menu: the rule below stops painting the sheet
   entirely while the menu is open, so no z-index it carries can matter there.

   .cws-fpro .cws-fpro-sheet is (0,2,0), one step above the plugin's own
   .cws-fpro-sheet at (0,1,0). */
.cws-fpro .cws-fpro-sheet {
	z-index: 99999;
}

/* ---------- standing down for the mobile menu ----------
   The widget's three fixed layers — the floating "Filteri" button (z-index 90),
   the scrim (99) and the sheet (100) — are positioned against the viewport, and
   so is the menu panel. The panel ships no z-index of its own, so it stacked by
   source order and lost: on a shop page the "Filteri" pill floated on top of the
   open menu.

   menu.css now gives the panel a z-index above all three, which fixes the common
   case. This is the belt to that braces, and it is the part that cannot fail:
   z-index only ranks siblings within a stacking context, and the panel lives
   inside an Elementor header that may well be one (a sticky header, a transform,
   an opacity — any of them is enough). Whatever the header does to the panel's
   ranking, a layer that is not painted cannot cover it.

   `visibility` rather than `display`: it is inherited-through and fully
   reversible, so nothing here has to know whether the sheet was mid-transition
   when the menu opened. In practice only the button is reachable — the sheet
   covers the viewport, hamburger included — but all three are named so the rule
   states the whole intent rather than today's reachable subset.

   Specificity: `:has()` takes the weight of its heaviest argument, so this is
   (0,3,1) and clears the plugin's own `.cws-fpro.is-sheet-open .cws-fpro-fab`
   at (0,3,0) — and this theme's own `.cws-fpro.is-shopf-fab .shopf-mobtrig--fab`
   at (0,2,0), which is the rule that would otherwise float our pill over the
   open menu exactly the way the plugin's used to. */
body:has(.mobile-menu-content.active) .cws-fpro-fab,
body:has(.mobile-menu-content.active) .shopf-mobtrig--fab,
body:has(.mobile-menu-content.active) .cws-fpro-scrim,
body:has(.mobile-menu-content.active) .cws-fpro-sheet {
	visibility: hidden;
}

/* ---------- the mobile sheet's own chrome ----------
   The head, the close button and the Apply/Clear foot are the plugin's markup
   wrapped AROUND the panel, so no .shopf selector can reach them — but on a
   phone they are the filter UI as much as the panel is, and they ship rounded
   and in the plugin's blue. Repainted here rather than by overriding
   --cws-fpro-accent, which also feeds pagination, the rating buttons and the
   price presets out in the listing; this is meant to move the sheet only.

   .cws-fpro + .cws-fpro-sheet-foot + .cws-fpro-btn + .is-primary is (0,4,0),
   one step above the plugin's own Elementor-kit armour rule at (0,3,0). */

.cws-fpro .cws-fpro-sheet-head,
.cws-fpro .cws-fpro-sheet-foot {
	border-color: var(--shopf-line-3);
}

.cws-fpro .cws-fpro-sheet-head h3 {
	font-size: 18px;
	font-weight: 800;
	color: var(--shopf-ink);
}

.cws-fpro .cws-fpro-sheet-n {
	font-size: 13px;
	font-weight: 700;
	color: var(--shopf-ink-3);
}

/* Squared and grey, the same control as the picker's own .shopf-popx.
 *
 * padding and border are restated, not inherited from the plugin. The plugin's
 * own armour block deliberately re-asserts background and colour only, on the
 * grounds that those are "the two properties the kit sets" — but Elementor's
 * Site Settings › Buttons group also compiles padding, border and border-radius
 * into the same `.elementor-kit-N button` selector at (0,1,1), which outranks
 * the plugin's unarmoured (0,1,0) geometry. Whatever this kit has in that group
 * lands on a 36px box that cannot absorb it: the × ends up padded off its own
 * centre, or pushed out of the button entirely. */
.cws-fpro .cws-fpro-round-x {
	width: 36px;
	height: 36px;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: var(--shopf-line-4);
	color: #5c727b;
}

.cws-fpro .cws-fpro-round-x:hover,
.cws-fpro .cws-fpro-round-x:focus-visible {
	background: var(--shopf-accent-sf);
	color: var(--shopf-accent);
}

/* The glyph carries width/height attributes, which a theme or kit rule as broad
   as `svg { width: 100% }` overrides — and inside a 36px grid cell that reads as
   a close icon that has swallowed its own button. Pin both. */
.cws-fpro .cws-fpro-round-x svg,
.shopf .shopf-popx svg {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
}

.cws-fpro .cws-fpro-sheet-foot .cws-fpro-btn {
	border-radius: 0;
	font-size: 15px;
	font-weight: 800;
}

.cws-fpro .cws-fpro-sheet-foot .cws-fpro-btn.is-primary {
	background: var(--shopf-green);
	color: #fff;
}

.cws-fpro .cws-fpro-sheet-foot .cws-fpro-btn.is-primary:hover,
.cws-fpro .cws-fpro-sheet-foot .cws-fpro-btn.is-primary:focus-visible {
	background: var(--shopf-green-dk);
	color: #fff;
}

.cws-fpro .cws-fpro-sheet-foot .cws-fpro-btn.is-ghost {
	background: none;
	color: var(--shopf-ink-4);
}

/* ---------- inside the mobile sheet ----------
   The panel node is MOVED here by the widget, so the same markup has to work in
   a narrow, scrolling column. */

/* The plugin's .cws-fpro-sheet-body carries no padding of its own — it is a
   bare scroll container — so the card has to keep some, or every field runs
   into the screen edge. Only the frame is dropped, not the inset. */
.cws-fpro-sheet-body .shopf-card {
	border: 0;
	box-shadow: none;
	padding: 18px 16px 24px;
}

.cws-fpro-sheet-body .shopf-grid {
	grid-template-columns: minmax(0, 1fr);
	gap: 16px;
}

/* The trigger is a 52px tap target here, and its text goes up a notch — the
   design's phone column, not the desktop card shrunk down. */
.cws-fpro-sheet-body .shopf .shopf-trig {
	min-height: 52px;
	padding: 7px 14px;
}

.cws-fpro-sheet-body .shopf-ph {
	font-size: 15px;
}

.cws-fpro-sheet-body .shopf-chip {
	padding: 5px 9px;
	font-size: 13px;
}

/* The plugin's own .cws-fpro-sheet-body .cws-fpro-opt rule is (0,2,0) and our
   rows carry both classes, so restate the padding at the same weight. */
.cws-fpro-sheet-body .shopf-opt {
	padding: 15px 18px;
	gap: 14px;
}

.cws-fpro-sheet-body .shopf-box {
	width: 24px;
	height: 24px;
}

.cws-fpro-sheet-body .shopf-optlbl {
	font-size: 15.5px;
}

/* The selected row is tinted, the way the design's picker marks a choice — on a
   phone the checkbox alone is easy to miss while scrolling. */
.cws-fpro-sheet-body .shopf-opt:has(input:checked) {
	background: var(--shopf-accent-sf);
}

.cws-fpro-sheet-body .shopf-opt.is-child {
	padding-left: 40px;
}

/* ---------- the mobile picker ----------
   On a phone a facet is not a dropdown: tapping it opens a full-screen
   selection screen with its own title, its own Očisti, a close button and a
   full-width confirm. See the "Select" component in the design project.

   It is built by promoting the already-open .shopf-pop to fill the sheet and
   hiding everything else, rather than by lifting the node out to the sheet
   root. That is not squeamishness about moving DOM: .shopf-pop carries the
   plugin's .cws-fpro-sec-body, and the plugin resolves a term-search box's rows
   with input.closest('.cws-fpro-sec') and counts a section's ticks with
   sec.querySelectorAll(':checked') — both walk UP past this node, so moving it
   out of its .cws-fpro-sec silently kills term search and the section badge.
   position:fixed is out for the same reason it is out everywhere in this panel:
   .cws-fpro-sheet is transformed, so a fixed child is still clipped by the
   scrolling .cws-fpro-sheet-body between them.

   .is-shopf-picking is set on the widget root by filters-panel.js whenever a
   facet is open INSIDE the sheet, so none of this can reach the desktop card. */

.cws-fpro.is-shopf-picking .cws-fpro-sheet-head,
.cws-fpro.is-shopf-picking .cws-fpro-sheet-foot {
	display: none;
}

.cws-fpro.is-shopf-picking .cws-fpro-sheet-body {
	display: flex;
	overflow: hidden;
}

/* The sheet body down to the open field is one flex column, so the option list
   is the only thing that scrolls and the confirm button stays on screen.
   min-height: 0 on every rung — without it a flex item refuses to shrink below
   its content and the list pushes the footer off the bottom. */
.cws-fpro.is-shopf-picking .cws-fpro-sheet-body .cws-fpro-panel,
.cws-fpro.is-shopf-picking .cws-fpro-sheet-body .shopf,
.cws-fpro.is-shopf-picking .cws-fpro-sheet-body .shopf-card,
.cws-fpro.is-shopf-picking .cws-fpro-sheet-body .shopf-grid,
.cws-fpro.is-shopf-picking .cws-fpro-sheet-body .shopf-field[data-open="true"] {
	display: flex;
	flex: 1;
	flex-direction: column;
	min-width: 0;
	min-height: 0;
	margin: 0;
	padding: 0;
	gap: 0;
	border: 0;
}

/* Everything that is not the open facet: the other fields, the product search
   row, the rule and the card footer. */
.cws-fpro.is-shopf-picking .cws-fpro-sheet-body .shopf-card > :not(.shopf-grid),
.cws-fpro.is-shopf-picking .cws-fpro-sheet-body .shopf-grid > :not([data-open="true"]),
.cws-fpro.is-shopf-picking .cws-fpro-sheet-body .shopf-field[data-open="true"] > .shopf-field__label,
.cws-fpro.is-shopf-picking .cws-fpro-sheet-body .shopf-field[data-open="true"] > .shopf-trig {
	display: none;
}

.cws-fpro.is-shopf-picking .cws-fpro-sheet-body .shopf-pop {
	position: static;
	display: flex;
	flex: 1;
	flex-direction: column;
	min-height: 0;
	border: 0;
	box-shadow: none;
	animation: shopf-screen .2s ease;
}

.cws-fpro.is-shopf-picking .shopf-pophead,
.cws-fpro.is-shopf-picking .shopf-popsearch,
.cws-fpro.is-shopf-picking .shopf-popfoot,
.cws-fpro.is-shopf-picking .shopf .shopf-more {
	flex: 0 0 auto;
}

.cws-fpro.is-shopf-picking .shopf-opts,
.cws-fpro.is-shopf-picking .shopf-native {
	flex: 1;
	min-height: 0;
	max-height: none;
	overflow: auto;
}

/* ---------- the picker's header ---------- */

.cws-fpro.is-shopf-picking .shopf-pophead {
	display: block;
	padding: 12px 18px 14px;
	border-bottom: 1px solid var(--shopf-line-3);
}

.shopf-pophead__grab {
	display: block;
	width: 44px;
	height: 5px;
	margin: 0 auto 14px;
	background: #dbe4e8;
}

.shopf-pophead__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.shopf-pophead__title {
	min-width: 0;
	font-size: 18px;
	font-weight: 800;
	color: var(--shopf-ink);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.shopf-pophead__acts {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	flex: 0 0 auto;
}

/* In the picker Očisti sits in the header, so the copy of it in the footer —
   which is the desktop dropdown's only control — steps aside. */
.cws-fpro.is-shopf-picking .shopf-popfoot .shopf-ghost {
	display: none;
}

.shopf .shopf-link {
	font-size: 13px;
	font-weight: 800;
	color: var(--shopf-accent);
}

.shopf .shopf-link:hover {
	color: var(--shopf-accent-dk);
}

.shopf .shopf-popx {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: var(--shopf-line-4);
	color: #5c727b;
	cursor: pointer;
}

/* Matches the sheet's own close, which is the same control one screen up. */
.shopf .shopf-popx:hover,
.shopf .shopf-popx:focus-visible {
	background: var(--shopf-accent-sf);
	color: var(--shopf-accent);
}

/* ---------- the picker's search row and footer ---------- */

.cws-fpro.is-shopf-picking .shopf-popsearch {
	padding: 12px 18px;
}

.cws-fpro.is-shopf-picking .shopf-popsearch input {
	height: 26px;
	font-size: 15px;
}

.cws-fpro.is-shopf-picking .shopf-popfoot {
	padding: 14px 18px calc(14px + env(safe-area-inset-bottom, 0px));
	background: #fff;
}

.cws-fpro.is-shopf-picking .shopf .shopf-done {
	display: inline-flex;
	width: 100%;
	height: 52px;
	font-size: 15px;
}

.cws-fpro-sheet-body .shopf-foot {
	align-items: flex-start;
	flex-direction: column;
	gap: 12px;
}

/* The sort group and the two mobile triggers are lifted out of the card by
   filters-panel.js before the sheet can ever open. This is the belt to that
   braces: if the script is missing or has not run yet, neither sorting nor a
   button that opens this very dialog may appear inside it. */
.cws-fpro-sheet-body .shopf-res,
.cws-fpro-sheet-body .shopf-sortgroup,
.cws-fpro-sheet-body .shopf-trigs {
	display: none;
}

@media (prefers-reduced-motion: reduce) {
	.shopf .shopf-pop,
	.cws-fpro.is-shopf-picking .cws-fpro-sheet-body .shopf-pop {
		animation: none;
	}
}