/*
 * CWS Filters Pro — custom panel, Stole's Race Shop "Trgovina" design.
 * Tokens live on the widget root (.cws-fpro.cws-fpro--panel-custom) so the
 * sidebar, the toolbar above the products, the pager and the mobile drawer all
 * share them. Every rule is at least (0,2,0), so it beats the Elementor kit's
 * bare-button rule (0,1,1) without !important.
 * Square corners everywhere except range thumbs and category dots (boxy storefront).
 * No web fonts: everything inherits the theme's typography.
 */

/* ---------- tokens ---------- */
.cws-fpro.cws-fpro--panel-custom {
	--srs-bg: #f3f4f6;
	--srs-sf: #fff;
	--srs-sf2: #f7f8fa;
	--srs-sunk: #eceef1;
	--srs-line: #e4e7eb;
	--srs-line2: #d3d8de;
	--srs-ink: #16181c;
	--srs-ink2: #4f565f;
	--srs-ink3: #737a84;
	--srs-y: oklch(0.86 0.17 92);
	--srs-y-h: oklch(0.81 0.17 86);
	--srs-y-soft: oklch(0.97 0.05 95);
	--srs-y-line: oklch(0.88 0.11 92);
	--srs-y-ink: oklch(0.45 0.1 78);
	--srs-e1: 0 1px 2px rgba(22, 24, 28, .05);
	--srs-e4: 0 18px 50px rgba(22, 24, 28, .24);
	--srs-ease: cubic-bezier(.2, 0, 0, 1);
	--srs-dec: cubic-bezier(.05, .7, .1, 1);

	/* The plugin's own tokens, mapped onto the design. The accent is the
	   design's link colour (the plugin also uses it for text); surfaces that
	   are yellow in the design are set explicitly further down. */
	--cws-fpro-bg: var(--srs-sf);
	--cws-fpro-panel-2: var(--srs-sf2);
	--cws-fpro-panel-3: var(--srs-sunk);
	--cws-fpro-line: var(--srs-line);
	--cws-fpro-line-strong: var(--srs-line2);
	--cws-fpro-ink: var(--srs-ink);
	--cws-fpro-ink-2: var(--srs-ink2);
	--cws-fpro-ink-3: var(--srs-ink3);
	--cws-fpro-accent: var(--srs-y-ink);
	--cws-fpro-accent-hover: oklch(0.38 0.09 78);
	--cws-fpro-accent-soft: var(--srs-y-soft);
	--cws-fpro-accent-line: var(--srs-y-line);
	--cws-fpro-accent-ink: #fff;
	--cws-fpro-cta: var(--srs-ink);
	--cws-fpro-cta-hover: #2b2e33;
	--cws-fpro-r-sm: 0;
	--cws-fpro-r: 0;
	--cws-fpro-r-lg: 0;
	--cws-fpro-r-pill: 0;
	--cws-fpro-panel-w: 264px;
	--cws-fpro-gap: 24px;
	--cws-fpro-grid-gap: 16px;
}

/* ---------- widget layout: sidebar left of the products ----------
 * In "Custom" mode the plugin drops to one column (panel above the products)
 * and leaves the layout to the theme. Put the sidebar back from 768px up;
 * below that the plugin turns the panel into the mobile sheet anyway.
 */
@media (min-width: 768px) {
	.cws-fpro.cws-fpro--panel-custom { grid-template-columns: var(--cws-fpro-panel-w) minmax(0, 1fr); }
}

/* ---------- panel base ---------- */
.cws-fpro-panel.is-custom {
	font-size: 14px;
	font-weight: 400;
	line-height: 1.5;
	color: var(--srs-ink);
	-webkit-font-smoothing: antialiased;
}
.cws-fpro-panel.is-custom *,
.cws-fpro-panel.is-custom *::before,
.cws-fpro-panel.is-custom *::after { box-sizing: border-box; }
.cws-fpro-panel.is-custom [hidden] { display: none !important; }
.cws-fpro-panel.is-custom button { font: inherit; color: inherit; cursor: pointer; letter-spacing: normal; text-transform: none; }
.cws-fpro-panel.is-custom h2 { margin: 0; font-family: inherit; color: var(--srs-ink); }
.cws-fpro-panel.is-custom :focus-visible { outline: 2px solid var(--srs-ink); outline-offset: 2px; }
.cws-fpro-panel.is-custom svg { flex: 0 0 auto; }

/* ---------- boxes ---------- */
.cws-fpro-panel.is-custom .srs-fp { display: flex; flex-direction: column; gap: 16px; }
.cws-fpro-panel.is-custom .srs-box { background: var(--srs-sf); border: 1px solid var(--srs-line); }
.cws-fpro-panel.is-custom .srs-box-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 16px 18px; border-bottom: 1px solid var(--srs-line); }
.cws-fpro-panel.is-custom .srs-box-h h2 { display: flex; align-items: center; gap: 6px; font-size: 16px; line-height: 1.3; font-weight: 600; }
/* The design only shows "Očisti sve" while something is active. */
.cws-fpro-panel.is-custom .srs-box-h .cws-fpro-clear-all[disabled] { visibility: hidden; }

.cws-fpro.cws-fpro--panel-custom .srs-badge { font-style: normal; font-weight: 700; font-size: 11px; line-height: 1; min-width: 18px; height: 18px; padding: 0 5px; background: var(--srs-y); color: var(--srs-ink); display: inline-grid; place-items: center; margin-left: 6px; font-variant-numeric: tabular-nums; border-radius: 0; }
.cws-fpro.cws-fpro--panel-custom .srs-badge[hidden] { display: none; }

.cws-fpro-panel.is-custom .srs-link { background: none; border: 0; padding: 4px 2px; font-size: 13px; font-weight: 500; color: var(--srs-y-ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--srs-y-line); box-shadow: none; height: auto; min-height: 0; border-radius: 0; }
.cws-fpro-panel.is-custom .srs-link:hover,
.cws-fpro.cws-fpro--panel-custom .cws-fpro-panel.is-custom .cws-fpro-clear-all:hover:not([disabled]) { background: none; color: var(--srs-y-ink); text-decoration-color: currentColor; }

/* ---------- toolbar above the products (moved there by filters-panel.js) ---------- */
.cws-fpro.cws-fpro--panel-custom .cws-fpro-aside [data-srs-top] { display: none; }
.cws-fpro.cws-fpro--panel-custom .srs-top { margin-bottom: 16px; font-size: 14px; line-height: 1.5; color: var(--srs-ink); }
.cws-fpro.cws-fpro--panel-custom .srs-bar { position: relative; display: flex; align-items: center; flex-wrap: wrap; gap: 12px 16px; padding: 10px 12px; background: var(--srs-sf); border: 1px solid var(--srs-line); }
.cws-fpro.cws-fpro--panel-custom .srs-count { display: flex; align-items: center; min-height: 20px; font-size: 13px; color: var(--srs-ink2); font-variant-numeric: tabular-nums; }
.cws-fpro.cws-fpro--panel-custom .srs-count b,
.cws-fpro.cws-fpro--panel-custom .srs-count strong { color: var(--srs-ink); font-weight: 600; }
.cws-fpro.cws-fpro--panel-custom .srs-sort { display: flex; align-items: center; gap: 8px; margin: 0 0 0 auto; font-size: 13px; font-weight: 400; color: var(--srs-ink2); }
.cws-fpro.cws-fpro--panel-custom .srs-sel {
	width: auto; height: 36px; margin: 0; border: 1px solid var(--srs-line2); border-radius: 0;
	background: var(--srs-sf) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23737a84' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center;
	padding: 0 30px 0 12px; font: inherit; font-size: 13.5px; font-weight: 500; color: var(--srs-ink);
	-webkit-appearance: none; appearance: none; cursor: pointer; box-shadow: none;
	transition: border-color .12s var(--srs-ease);
}
.cws-fpro.cws-fpro--panel-custom .srs-sel:hover { border-color: var(--srs-ink3); }
.cws-fpro.cws-fpro--panel-custom .srs-sel:focus-visible { outline: 2px solid var(--srs-ink); outline-offset: 2px; }
.cws-fpro.cws-fpro--panel-custom .srs-fbtn { display: none; align-items: center; gap: 8px; height: 38px; margin: 0; padding: 0 14px; border: 1px solid var(--srs-line2); border-radius: 0; background: var(--srs-sf); color: var(--srs-ink); font: inherit; font-size: 13.5px; font-weight: 600; box-shadow: none; cursor: pointer; }
.cws-fpro.cws-fpro--panel-custom .srs-fbtn:hover { background: var(--srs-sf2); border-color: var(--srs-ink3); color: var(--srs-ink); }
.cws-fpro.cws-fpro--panel-custom .srs-fbtn .srs-badge { margin-left: 0; min-width: 20px; height: 20px; font-size: 11.5px; }

/* product layout switcher (grid ×4, grid ×3, list, compact) */
.cws-fpro.cws-fpro--panel-custom .srs-views { display: flex; gap: 2px; padding: 2px; background: var(--srs-sf2); }
.cws-fpro.cws-fpro--panel-custom .srs-views button { width: 32px; height: 32px; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; display: grid; place-items: center; color: var(--srs-ink3); cursor: pointer; transition: background .12s, color .12s; }
.cws-fpro.cws-fpro--panel-custom .srs-views button:hover { background: none; color: var(--srs-ink); }
.cws-fpro.cws-fpro--panel-custom .srs-views button[aria-pressed="true"] { background: var(--srs-sf); color: var(--srs-ink); box-shadow: var(--srs-e1), 0 0 0 1px var(--srs-line); }
.cws-fpro.cws-fpro--panel-custom .srs-views button[aria-pressed="true"] svg { color: var(--srs-y-h); }
.cws-fpro.cws-fpro--panel-custom .srs-views button:focus-visible { outline: 2px solid var(--srs-ink); outline-offset: 1px; }

/* thin progress line under the toolbar while results reload */
.cws-fpro.cws-fpro--panel-custom .srs-bar-prog { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; overflow: hidden; opacity: 0; transition: opacity .2s; pointer-events: none; }
.cws-fpro.cws-fpro--panel-custom .srs-bar-prog i { display: block; height: 100%; width: 35%; background: var(--srs-y-h); animation: srs-ind 1.2s var(--srs-ease) infinite; }
.cws-fpro.cws-fpro--panel-custom .srs-top:has(~ .cws-fpro-results[aria-busy="true"]) .srs-bar-prog { opacity: 1; }
@keyframes srs-ind { from { transform: translateX(-100%); } to { transform: translateX(300%); } }

/* ---------- active chips (markup from cws_fpro_render_chips) ---------- */
.cws-fpro.cws-fpro--panel-custom .srs-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 12px 0 0; }
.cws-fpro.cws-fpro--panel-custom .srs-chips:empty { display: none; }
.cws-fpro.cws-fpro--panel-custom .srs-chips .cws-fpro-chip {
	display: inline-flex; align-items: center; gap: 6px; height: 30px; margin: 0; padding: 0 6px 0 12px;
	border: 1px solid var(--srs-y-line); border-radius: 0; background: var(--srs-y-soft);
	color: var(--srs-ink); font-size: 13px; font-weight: 500; line-height: 1;
	animation: srs-pop .2s cubic-bezier(.34, 1.4, .64, 1);
}
.cws-fpro.cws-fpro--panel-custom .srs-chips .cws-fpro-chip button {
	width: 18px; height: 18px; min-height: 0; margin: 0; padding: 3px; border: 0; border-radius: 0;
	background: none; color: var(--srs-ink2); display: grid; place-items: center; box-shadow: none; cursor: pointer;
}
.cws-fpro.cws-fpro--panel-custom .srs-chips .cws-fpro-chip button:hover { background: rgba(22, 24, 28, .08); color: var(--srs-ink); }
.cws-fpro.cws-fpro--panel-custom .srs-chips .cws-fpro-chip svg { width: 12px; height: 12px; }
.cws-fpro.cws-fpro--panel-custom .srs-chips .cws-fpro-chip-clear,
.cws-fpro.cws-fpro--panel-custom .srs-chips .cws-fpro-chip-clear:hover {
	height: auto; margin: 0; padding: 4px 2px; border: 0; border-radius: 0; background: none; box-shadow: none;
	color: var(--srs-y-ink); font-size: 13px; font-weight: 500;
	text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--srs-y-line);
}
.cws-fpro.cws-fpro--panel-custom .srs-chips .cws-fpro-chip-clear:hover { text-decoration-color: currentColor; }
@keyframes srs-pop { from { transform: scale(.85); opacity: 0; } }

/* ---------- sections ---------- */
.cws-fpro-panel.is-custom .srs-sec { border-bottom: 1px solid var(--srs-line); }
.cws-fpro-panel.is-custom .srs-sec:last-child { border-bottom: 0; }
.cws-fpro-panel.is-custom .srs-sec-h {
	width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0;
	padding: 14px 18px; background: none; border: 0; border-radius: 0; box-shadow: none;
	font-size: 13.5px; font-weight: 600; line-height: 1.4; color: var(--srs-ink); text-align: left;
}
.cws-fpro-panel.is-custom .srs-sec-h:hover { background: none; color: var(--srs-ink); }
.cws-fpro-panel.is-custom .srs-sec-h > span { display: inline-flex; align-items: center; }
.cws-fpro-panel.is-custom .srs-chev { color: var(--srs-ink3); transition: transform .2s var(--srs-ease); }
.cws-fpro-panel.is-custom .srs-sec[data-open="false"] .srs-chev { transform: rotate(-90deg); }
.cws-fpro-panel.is-custom .srs-sec-b { padding: 0 18px 16px; display: flex; flex-direction: column; gap: 10px; }
.cws-fpro-panel.is-custom .srs-sec[data-open="false"] > .srs-sec-b { display: none; }

.cws-fpro-panel.is-custom .srs-n { font-style: normal; font-size: 12px; color: var(--srs-ink3); font-variant-numeric: tabular-nums; margin-left: auto; padding-left: 8px; }

/* term search */
.cws-fpro-panel.is-custom .srs-tsearch { width: 100%; height: 34px; margin: 0; padding: 0 10px; border: 1px solid var(--srs-line2); border-radius: 0; background: var(--srs-sf); font: inherit; font-size: 13px; font-weight: 400; color: var(--srs-ink); box-shadow: none; }
.cws-fpro-panel.is-custom .srs-tsearch:focus { border-color: var(--srs-ink3); outline: 0; }

/* ---------- categories: dot rows ---------- */
.cws-fpro-panel.is-custom .srs-cats,
.cws-fpro-panel.is-custom .srs-checks { display: flex; flex-direction: column; gap: 1px; margin: 0 -8px; }
.cws-fpro-panel.is-custom .srs-cat {
	position: relative; display: flex; align-items: center; gap: 10px; min-height: 32px; margin: 0;
	padding: 0 8px 0 calc(8px + var(--depth, 0) * 14px); font-size: 13.5px; font-weight: 400; line-height: 1.3;
	color: var(--srs-ink); cursor: pointer; transition: background .12s var(--srs-ease);
}
.cws-fpro-panel.is-custom .srs-cat::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--srs-line2); flex: 0 0 auto; transition: background .14s var(--srs-ease), transform .2s var(--srs-ease); }
.cws-fpro-panel.is-custom .srs-cat:hover { background: var(--srs-sf2); }
.cws-fpro-panel.is-custom .srs-cat:has(input:checked) { background: var(--srs-y-soft); font-weight: 600; }
.cws-fpro-panel.is-custom .srs-cat:has(input:checked)::before { background: var(--srs-y-h); transform: scale(1.35); }
.cws-fpro-panel.is-custom .srs-cat:has(input:focus-visible) { outline: 2px solid var(--srs-ink); outline-offset: -2px; }

/* collapsible subcategories (toggle set by filters-panel.js); a term search shows every match */
.cws-fpro-panel.is-custom .srs-sec:not(.is-searching) .srs-cat.is-collapsed { display: none; }
.cws-fpro-panel.is-custom .srs-cat-tg,
.cws-fpro-panel.is-custom .srs-cat-sp { flex: 0 0 24px; width: 24px; height: 24px; margin: 0 -4px 0 2px; }
.cws-fpro-panel.is-custom .srs-cat-tg { min-height: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; display: grid; place-items: center; color: var(--srs-ink3); cursor: pointer; }
.cws-fpro-panel.is-custom .srs-cat-tg:hover { background: var(--srs-sunk); color: var(--srs-ink); }
.cws-fpro-panel.is-custom .srs-cat-tg svg { transform: rotate(-90deg); transition: transform .2s var(--srs-ease); }
.cws-fpro-panel.is-custom .srs-cat-tg[aria-expanded="true"] svg { transform: none; }

/* real checkbox stays in the DOM (filtering hangs off its change event), just visually hidden */
.cws-fpro-panel.is-custom .srs-cat input,
.cws-fpro-panel.is-custom .srs-cb input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }

/* ---------- checkbox rows (brand, attributes, stock, sale) + rating rows ---------- */
.cws-fpro-panel.is-custom .srs-cb,
.cws-fpro-panel.is-custom .srs-rate {
	position: relative; display: flex; align-items: center; gap: 10px; width: 100%; min-height: 30px; margin: 0;
	padding: 0 8px 0 calc(8px + var(--depth, 0) * 14px); border: 0; border-radius: 0; background: none; box-shadow: none;
	font-size: 13.5px; font-weight: 400; line-height: 1.3; color: var(--srs-ink); text-align: left; cursor: pointer;
	transition: background .12s var(--srs-ease);
}
.cws-fpro-panel.is-custom .srs-cb:hover,
.cws-fpro-panel.is-custom .srs-rate:hover { background: var(--srs-sf2); color: var(--srs-ink); }
.cws-fpro-panel.is-custom .srs-box-i {
	width: 16px; height: 16px; border: 1.5px solid var(--srs-line2); background: var(--srs-sf);
	display: grid; place-items: center; flex: 0 0 auto; color: var(--srs-ink);
	transition: background .12s var(--srs-ease), border-color .12s var(--srs-ease);
}
.cws-fpro-panel.is-custom .srs-box-i svg { opacity: 0; transform: scale(.6); transition: opacity .12s, transform .2s cubic-bezier(.34, 1.4, .64, 1); }
.cws-fpro-panel.is-custom .srs-cb input:checked + .srs-box-i,
.cws-fpro-panel.is-custom .srs-rate[aria-pressed="true"] .srs-box-i { background: var(--srs-y); border-color: var(--srs-y-h); }
.cws-fpro-panel.is-custom .srs-cb input:checked + .srs-box-i svg,
.cws-fpro-panel.is-custom .srs-rate[aria-pressed="true"] .srs-box-i svg { opacity: 1; transform: none; }
.cws-fpro-panel.is-custom .srs-cb input:focus-visible + .srs-box-i { outline: 2px solid var(--srs-ink); outline-offset: 2px; }
.cws-fpro-panel.is-custom .srs-rate[aria-pressed="true"] { font-weight: 600; }

.cws-fpro-panel.is-custom .srs-stars { display: inline-flex; gap: 1px; color: var(--srs-line2); }
.cws-fpro-panel.is-custom .srs-stars .on { color: var(--srs-y-h); }
.cws-fpro-panel.is-custom .srs-stars span { display: inline-flex; }
.cws-fpro-panel.is-custom .srs-rate-l { font-size: 12.5px; color: var(--srs-ink3); }

/* zero-result rows are dimmed (class set server-side, kept in sync by filters-panel.js) */
.cws-fpro-panel.is-custom .is-zero { color: var(--srs-ink3); }
.cws-fpro-panel.is-custom .srs-cb.is-zero .srs-box-i { background: var(--srs-sf2); border-color: var(--srs-line); }

.cws-fpro-panel.is-custom .srs-more { align-self: flex-start; }

/* ---------- price (markup from cws_fpro_render_price) ---------- */
.cws-fpro-panel.is-custom .srs-price { font-size: 13px; color: var(--srs-ink2); }
.cws-fpro-panel.is-custom .cws-fpro-rng { height: 24px; margin: 4px 0 2px; }
.cws-fpro-panel.is-custom .cws-fpro-rng-track,
.cws-fpro-panel.is-custom .cws-fpro-rng-fill { top: 10px; height: 4px; border-radius: 0; }
.cws-fpro-panel.is-custom .cws-fpro-rng-track { left: 9px; right: 9px; background: var(--srs-line2); }
.cws-fpro-panel.is-custom .cws-fpro-rng-fill { background: var(--srs-y-h); }
.cws-fpro-panel.is-custom .cws-fpro-rng input[type="range"] { top: 3px; height: 18px; }
.cws-fpro-panel.is-custom .cws-fpro-rng input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%;
	background: var(--srs-ink); border: 5px solid var(--srs-y); box-shadow: 0 0 0 1px var(--srs-y-h), var(--srs-e1);
}
.cws-fpro-panel.is-custom .cws-fpro-rng input[type="range"]::-moz-range-thumb {
	box-sizing: content-box; width: 8px; height: 8px; border-radius: 50%;
	background: var(--srs-ink); border: 5px solid var(--srs-y); box-shadow: 0 0 0 1px var(--srs-y-h);
}
.cws-fpro-panel.is-custom .cws-fpro-rng input[type="range"]:active::-webkit-slider-thumb { cursor: grabbing; transform: scale(1.12); }
.cws-fpro-panel.is-custom .cws-fpro-rng input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px var(--srs-ink); }
.cws-fpro-panel.is-custom .cws-fpro-dash { background: var(--srs-line2); }
.cws-fpro-panel.is-custom .cws-fpro-pin input {
	height: 34px; margin: 0; padding: 0 26px 0 10px; border: 1px solid var(--srs-line2); border-radius: 0; background: var(--srs-sf);
	font: inherit; font-size: 13px; font-weight: 500; color: var(--srs-ink); font-variant-numeric: tabular-nums; box-shadow: none;
}
.cws-fpro-panel.is-custom .cws-fpro-pin input:focus { border-color: var(--srs-ink3); outline: 0; box-shadow: none; }
.cws-fpro-panel.is-custom .cws-fpro-pin > span { color: var(--srs-ink3); }
.cws-fpro-panel.is-custom .cws-fpro-preset {
	height: 30px; margin: 0; padding: 0 12px; border: 1px solid var(--srs-line2); border-radius: 0; background: var(--srs-sf);
	font-size: 12.5px; font-weight: 600; color: var(--srs-ink); box-shadow: none;
	transition: background .14s var(--srs-ease), border-color .14s var(--srs-ease);
}
.cws-fpro.cws-fpro--panel-custom .cws-fpro-panel.is-custom .cws-fpro-preset:hover,
.cws-fpro.cws-fpro--panel-custom .cws-fpro-panel.is-custom .cws-fpro-preset[aria-pressed="true"] { background: var(--srs-y); border-color: var(--srs-y-h); color: var(--srs-ink); }

/* ---------- Vozilo: vehicle section + picker modal ---------- */
.cws-fpro-panel.is-custom .srs-hint { margin: 0; font-size: 13px; line-height: 1.45; color: var(--srs-ink2); }
.cws-fpro-panel.is-custom .srs-veh-on,
.cws-fpro-panel.is-custom .srs-veh-off { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.cws-fpro-panel.is-custom .srs-veh-card { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 10px 10px 12px; border: 1px solid var(--srs-y-line); background: var(--srs-y-soft); }
.cws-fpro-panel.is-custom .srs-veh-card > div { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cws-fpro-panel.is-custom .srs-veh-card b { font-size: 13.5px; font-weight: 600; color: var(--srs-ink); }
.cws-fpro-panel.is-custom .srs-veh-card small { font-size: 12px; color: var(--srs-ink2); }
.cws-fpro-panel.is-custom .srs-veh-x,
.cws-fpro-panel.is-custom .srs-vm-x { width: 28px; height: 28px; min-height: 0; flex: 0 0 auto; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; display: grid; place-items: center; color: var(--srs-ink2); }
.cws-fpro-panel.is-custom .srs-veh-x:hover,
.cws-fpro-panel.is-custom .srs-vm-x:hover { background: rgba(22, 24, 28, .07); color: var(--srs-ink); }

.cws-fpro-panel.is-custom .srs-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 30px; min-height: 0; margin: 0; padding: 0 12px; border: 1px solid transparent; border-radius: 0; box-shadow: none; font-size: 12.5px; font-weight: 600; line-height: 1; white-space: nowrap; color: var(--srs-ink); transition: background .14s var(--srs-ease), border-color .14s var(--srs-ease); }
.cws-fpro-panel.is-custom .srs-btn-y { background: var(--srs-y); border-color: var(--srs-y-h); }
.cws-fpro-panel.is-custom .srs-btn-y:hover { background: var(--srs-y-h); color: var(--srs-ink); }
.cws-fpro-panel.is-custom .srs-btn-out { background: var(--srs-sf); border-color: var(--srs-line2); }
.cws-fpro-panel.is-custom .srs-btn-out:hover { background: var(--srs-sf2); border-color: var(--srs-ink3); color: var(--srs-ink); }
.cws-fpro-panel.is-custom .srs-btn-ghost { background: none; }
.cws-fpro-panel.is-custom .srs-btn-ghost:hover { background: var(--srs-sunk); color: var(--srs-ink); }
.cws-fpro-panel.is-custom .srs-btn[disabled] { background: var(--srs-sunk); border-color: transparent; color: var(--srs-ink3); cursor: not-allowed; }
.cws-fpro-panel.is-custom .srs-btn.is-loading { cursor: progress; opacity: .7; }
.cws-fpro-panel.is-custom .srs-veh-off .srs-btn-y { white-space: normal; height: auto; min-height: 30px; padding: 6px 12px; text-align: left; }

.cws-fpro-panel.is-custom .srs-vm { width: min(520px, calc(100% - 32px)); max-height: calc(100% - 48px); margin: auto; padding: 0; border: 0; border-radius: 0; background: var(--srs-sf); color: var(--srs-ink); box-shadow: var(--srs-e4); overflow: auto; }
.cws-fpro-panel.is-custom .srs-vm::backdrop { background: rgba(22, 24, 28, .48); }
.cws-fpro-panel.is-custom .srs-vm[open] { animation: srs-vm-in .28s var(--srs-dec); }
@keyframes srs-vm-in { from { opacity: 0; transform: translateY(14px) scale(.97); } }
.cws-fpro-panel.is-custom .srs-vm-in { display: flex; flex-direction: column; margin: 0; }
.cws-fpro-panel.is-custom .srs-vm-h { display: flex; align-items: flex-start; gap: 12px; padding: 20px 20px 12px; }
.cws-fpro-panel.is-custom .srs-vm-h > div { flex: 1; min-width: 0; }
.cws-fpro-panel.is-custom .srs-vm-h h3 { margin: 0; font-family: inherit; font-size: 18px; font-weight: 600; line-height: 1.3; color: var(--srs-ink); }
.cws-fpro-panel.is-custom .srs-vm-h p { margin: 3px 0 0; font-size: 13px; color: var(--srs-ink2); }
.cws-fpro-panel.is-custom .srs-vm-h .srs-vm-x { width: 34px; height: 34px; margin-top: -4px; }
.cws-fpro-panel.is-custom .srs-vm-b { display: flex; flex-direction: column; gap: 14px; padding: 4px 20px 20px; }
.cws-fpro-panel.is-custom .srs-vm-f { display: flex; flex-direction: column; gap: 6px; margin: 0; font-size: 13px; font-weight: 500; color: var(--srs-ink2); }
.cws-fpro.cws-fpro--panel-custom .cws-fpro-panel.is-custom .srs-vm-f .srs-sel { width: 100%; height: 44px; font-size: 14px; }
.cws-fpro-panel.is-custom .srs-vm-count { padding: 10px 12px; background: var(--srs-sf2); font-size: 13px; color: var(--srs-ink2); }
.cws-fpro-panel.is-custom .srs-vm-count b { color: var(--srs-ink); font-variant-numeric: tabular-nums; }
.cws-fpro-panel.is-custom .srs-vm-foot { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 14px 20px; border-top: 1px solid var(--srs-line); background: var(--srs-sf2); }
.cws-fpro-panel.is-custom .srs-vm-foot .srs-btn { height: 36px; padding: 0 16px; font-size: 13.5px; }

/* ---------- Najnoviji proizvodi ---------- */
.cws-fpro-panel.is-custom .srs-new { padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; }
.cws-fpro-panel.is-custom .srs-new h2 { font-size: 16px; line-height: 1.3; font-weight: 600; }
.cws-fpro-panel.is-custom .srs-new-i { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 12px; align-items: center; color: var(--srs-ink); text-decoration: none; }
.cws-fpro-panel.is-custom .srs-new-m { display: block; aspect-ratio: 1 / 1; overflow: hidden; border: 1px solid var(--srs-line); background: var(--srs-sf2); }
.cws-fpro-panel.is-custom .srs-new-m img { display: block; width: 100%; height: 100%; object-fit: cover; margin: 0; }
.cws-fpro-panel.is-custom .srs-new-t { min-width: 0; }
.cws-fpro-panel.is-custom .srs-new-n { font-size: 12.5px; font-weight: 500; line-height: 1.35; text-transform: uppercase; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cws-fpro-panel.is-custom .srs-new-p { display: block; margin-top: 2px; font-size: 12.5px; font-weight: 600; color: var(--srs-ink); font-variant-numeric: tabular-nums; }
.cws-fpro-panel.is-custom .srs-new-p del { color: var(--srs-ink3); font-weight: 400; margin-right: 4px; }
.cws-fpro-panel.is-custom .srs-new-p ins { text-decoration: none; }
.cws-fpro-panel.is-custom .srs-new-i:hover .srs-new-n { text-decoration: underline; }

/* ---------- pagination (markup from the plugin) ---------- */
.cws-fpro.cws-fpro--panel-custom .cws-fpro-pager { justify-content: space-between; gap: 12px; margin-top: 16px; padding: 10px 12px; background: var(--srs-sf); border: 1px solid var(--srs-line); }
.cws-fpro.cws-fpro--panel-custom .cws-fpro-pages { order: -1; margin-left: 0; gap: 4px; }
.cws-fpro.cws-fpro--panel-custom .cws-fpro-pager-info { font-size: 13px; color: var(--srs-ink2); font-variant-numeric: tabular-nums; }
.cws-fpro.cws-fpro--panel-custom .cws-fpro-pg { min-width: 34px; height: 34px; margin: 0; padding: 0 8px; border: 1px solid var(--srs-line); border-radius: 0; background: var(--srs-sf); color: var(--srs-ink); font-size: 13px; font-weight: 500; font-variant-numeric: tabular-nums; box-shadow: none; transition: background .12s, border-color .12s; }
.cws-fpro.cws-fpro--panel-custom .cws-fpro-pg:hover:not([disabled]):not([aria-current="page"]) { border-color: var(--srs-line2); background: var(--srs-sf2); color: var(--srs-ink); }
.cws-fpro.cws-fpro--panel-custom .cws-fpro-pg[aria-current="page"] { background: var(--srs-y); border-color: var(--srs-y-h); color: var(--srs-ink); font-weight: 700; cursor: default; }
.cws-fpro.cws-fpro--panel-custom .cws-fpro-pg.is-dots { min-width: 22px; border: 0; background: none; color: var(--srs-ink3); }

/* ---------- empty state, skeletons, buttons, floating trigger ---------- */
.cws-fpro.cws-fpro--panel-custom .cws-fpro-empty { background: var(--srs-sf); border: 1px dashed var(--srs-line2); padding: 56px 24px; }
.cws-fpro.cws-fpro--panel-custom .cws-fpro-empty h4 { font-size: 17px; font-weight: 600; }
.cws-fpro.cws-fpro--panel-custom .cws-fpro-sk { border-radius: 0; background-color: var(--srs-sf2); background-image: linear-gradient(90deg, var(--srs-sf2) 0, var(--srs-sunk) 45%, var(--srs-sf2) 90%); }
.cws-fpro.cws-fpro--panel-custom .cws-fpro-btn { border-radius: 0; }
.cws-fpro.cws-fpro--panel-custom .cws-fpro-btn.is-primary { background: var(--srs-y); border-color: var(--srs-y-h); color: var(--srs-ink); }
.cws-fpro.cws-fpro--panel-custom .cws-fpro-btn.is-primary:hover { background: var(--srs-y-h); border-color: var(--srs-y-h); color: var(--srs-ink); }
.cws-fpro.cws-fpro--panel-custom .cws-fpro-fab-n { background: var(--srs-y); color: var(--srs-ink); }

/* ---------- mobile (< 768px): toolbar, pager, filter drawer ---------- */
@media (max-width: 767px) {
	.cws-fpro.cws-fpro--panel-custom .srs-fbtn { display: inline-flex; }
	.cws-fpro.cws-fpro--panel-custom .srs-views { display: none; }
	.cws-fpro.cws-fpro--panel-custom .srs-bar { padding: 8px; }
	.cws-fpro.cws-fpro--panel-custom .srs-sort > span { display: none; }
	.cws-fpro.cws-fpro--panel-custom .srs-count { order: 5; width: 100%; padding: 0 4px; }

	.cws-fpro.cws-fpro--panel-custom .cws-fpro-pager { justify-content: center; }
	.cws-fpro.cws-fpro--panel-custom .cws-fpro-pg:not(.is-arrow):not([aria-current="page"]) { display: none; }
	.cws-fpro.cws-fpro--panel-custom .cws-fpro-pg.is-arrow { min-width: 44px; height: 44px; }
	.cws-fpro.cws-fpro--panel-custom .cws-fpro-pg[aria-current="page"] { height: 44px; min-width: 44px; }
	.cws-fpro.cws-fpro--panel-custom .cws-fpro-pager-info { width: 100%; text-align: center; }

	/* The vehicle modal becomes a bottom sheet, as in the design. */
	.cws-fpro-panel.is-custom .srs-vm { width: 100%; max-width: 100%; max-height: 92%; margin: auto auto 0; }

	/* The plugin's full-screen sheet becomes the design's drawer from the left. */
	.cws-fpro.cws-fpro--panel-custom .cws-fpro-sheet { right: auto; width: min(360px, 88vw); background: var(--srs-bg); box-shadow: var(--srs-e4); transform: translateX(-102%); transition: transform .28s var(--srs-dec); }
	.cws-fpro.cws-fpro--panel-custom.is-sheet-open .cws-fpro-sheet { transform: none; }
}
.cws-fpro.cws-fpro--panel-custom .cws-fpro-sheet-head { padding: 12px 12px 12px 18px; background: var(--srs-sf); border-bottom: 1px solid var(--srs-line); }
.cws-fpro.cws-fpro--panel-custom .cws-fpro-sheet-head h3 { font-size: 17px; font-weight: 700; color: var(--srs-ink); }
.cws-fpro.cws-fpro--panel-custom .cws-fpro-round-x { width: 40px; height: 40px; border-radius: 0; background: none; color: var(--srs-ink2); }
.cws-fpro.cws-fpro--panel-custom .cws-fpro-round-x:hover { background: rgba(22, 24, 28, .07); color: var(--srs-ink); }
.cws-fpro.cws-fpro--panel-custom .cws-fpro-sheet-body { padding: 12px; background: var(--srs-bg); }
.cws-fpro.cws-fpro--panel-custom .cws-fpro-sheet-foot { background: var(--srs-sf); border-top: 1px solid var(--srs-line); }

/* inside the drawer: the drawer has its own header, and no "newest" box */
.cws-fpro-sheet-body .cws-fpro-panel.is-custom .srs-box-h,
.cws-fpro-sheet-body .cws-fpro-panel.is-custom .srs-new { display: none; }
.cws-fpro-sheet-body .cws-fpro-panel.is-custom .srs-cat,
.cws-fpro-sheet-body .cws-fpro-panel.is-custom .srs-cb,
.cws-fpro-sheet-body .cws-fpro-panel.is-custom .srs-rate { min-height: 40px; }

@media (prefers-reduced-motion: reduce) {
	.cws-fpro.cws-fpro--panel-custom .srs-chips .cws-fpro-chip,
	.cws-fpro.cws-fpro--panel-custom .srs-bar-prog i { animation: none; }
	.cws-fpro.cws-fpro--panel-custom .cws-fpro-sheet { transition: none; }
	.cws-fpro-panel.is-custom .srs-vm[open] { animation: none; }
}