/**
 * Savvy Posts Grid for Elementor — front-end styles.
 *
 * Uses CSS custom properties so Elementor responsive controls (columns/gap)
 * can drive layout without per-breakpoint rule duplication.
 *
 * @package Spgrid
 */

.spgrid-wrap {
	/* Design tokens. */
	--spgrid-columns: 3;
	--spgrid-gap: 24px;
	--spgrid-card-bg: #ffffff;
	--spgrid-card-fg: #1a1a1a;
	--spgrid-muted: #6b7280;
	--spgrid-border: #e5e7eb;
	--spgrid-accent: #1fa4dd;
	--spgrid-link: #1fa4dd;
	--spgrid-panel-bg: #ffffff;
	--spgrid-input-bg: #ffffff;
	--spgrid-radius: 10px;
	--spgrid-shadow: 0 1px 3px rgba( 0, 0, 0, 0.08 );
	position: relative;
}

/* Critical: author `display` declarations (e.g. .spgrid-loader{display:flex})
   override the user-agent `[hidden]{display:none}` rule because author styles
   win over UA styles in the cascade. Without this, every element we toggle via
   the `hidden` attribute (loader overlay, count badge, load-more button) would
   stay permanently visible — which is what made the card loader spin forever. */
.spgrid-wrap [hidden] {
	display: none !important;
}

/* ---------------------------------------------------------------- Toolbar */
.spgrid-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 14px;
	margin-bottom: 32px;
}

/* Optional heading on the left of the toolbar (custom text or page title). */
.spgrid-toolbar__title {
	flex: 0 0 auto;
	align-self: center;
	margin: 0 14px 0 0;
	font-size: 28px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.01em;
	color: var( --spgrid-card-fg );
}

.spgrid-search {
	flex: 1 1 340px;
	min-width: 220px;
	/* Set to `auto` by the "Position: Right" control to group the (width-capped)
	   search box with the icon buttons on the right. */
	margin-left: var( --spgrid-search-ml, 0 );
}

/* Keep the icon buttons pinned right even when search is disabled. */
.spgrid-toolbar__controls {
	margin-left: var( --spgrid-controls-ml, auto );
}

.spgrid-search__label {
	display: block;
	margin-bottom: 7px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var( --spgrid-muted );
}

.spgrid-search__field {
	position: relative;
	display: flex;
	align-items: center;
}

.spgrid-search__field .spgrid-icon {
	position: absolute;
	left: 15px;
	color: var( --spgrid-muted );
	pointer-events: none;
}

.spgrid-search__input {
	width: 100%;
	padding: 12px 40px;
	border: 1px solid var( --spgrid-border );
	border-radius: 12px;
	background: var( --spgrid-input-bg );
	color: var( --spgrid-card-fg );
	font-size: 16px;
	line-height: 1.4;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.spgrid-search__input:focus {
	border-color: var( --spgrid-accent );
	box-shadow: 0 0 0 3px rgba( 31, 164, 221, 0.18 );
	outline: none;
}

.spgrid-search__spinner {
	position: absolute;
	top: 50%;
	right: 15px;
	width: 16px;
	height: 16px;
	margin-top: -8px;
	border: 2px solid var( --spgrid-border );
	border-top-color: var( --spgrid-accent );
	border-radius: 50%;
	opacity: 0;
	transition: opacity 0.2s ease;
}

.spgrid-search__spinner.is-active {
	opacity: 1;
	animation: spgrid-spin 0.7s linear infinite;
}

/* ----------------------------------------------------- Toolbar icon buttons */
.spgrid-toolbar__controls {
	display: flex;
	align-items: center;
	gap: 10px;
}

.spgrid-iconbtn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 1px solid var( --spgrid-border );
	border-radius: 12px;
	background: var( --spgrid-input-bg );
	color: var( --spgrid-card-fg );
	cursor: pointer;
	transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.spgrid-iconbtn:hover {
	border-color: var( --spgrid-accent );
	color: var( --spgrid-accent );
}

.spgrid-iconbtn.is-active {
	background: var( --spgrid-accent );
	border-color: var( --spgrid-accent );
	color: #fff;
}

/* Text label inside the filters toggle — hidden on desktop where the button
   is a compact icon square; revealed on mobile where the button stretches. */
.spgrid-filters__toggle-label {
	display: none;
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
}

.spgrid-filters__count {
	position: absolute;
	top: -6px;
	right: -6px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	border-radius: 999px;
	background: var( --spgrid-accent );
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
}

/* ------------------------------------------------------------------- Grid */
.spgrid-results {
	position: relative;
	min-height: 60px;
}

.spgrid-grid {
	display: grid;
	grid-template-columns: repeat( var( --spgrid-columns ), minmax( 0, 1fr ) );
	gap: var( --spgrid-gap );
	align-items: start;
}

/* Equal-height: stretch items in a row so featured images line up at the
   bottom (the default, matching the reference layout). */
.spgrid-equal-height-yes .spgrid-grid {
	align-items: stretch;
}

.spgrid-equal-height-yes .spgrid-grid__item,
.spgrid-equal-height-yes .spgrid-card {
	height: 100%;
}

/* List layout — image to the side, text beside it. */
.spgrid-layout--list .spgrid-grid {
	grid-template-columns: 1fr;
}

.spgrid-layout--list .spgrid-card {
	display: grid;
	grid-template-columns: minmax( 200px, 320px ) 1fr;
	align-items: stretch;
}

.spgrid-layout--list .spgrid-card__thumb {
	order: -1;
	margin-top: 0;
	aspect-ratio: auto;
	min-height: 100%;
}

/* Thumb sits in the left column here, so the glyph's divider moves to its inner
   edge (logical property keeps it correct under RTL). */
.spgrid-layout--list .spgrid-card__thumb--placeholder:has( img[src$=".svg"] ) {
	border-top: 0;
	border-inline-end: 1px solid var( --spgrid-border );
}

.spgrid-layout--list .spgrid-card__body {
	justify-content: center;
}

/* No featured image? Let the text span the full card width instead of
   sitting alone in the (empty) image column. */
.spgrid-layout--list .spgrid-card__body:only-child {
	grid-column: 1 / -1;
}

/* Masonry (CSS columns based) */
.spgrid-layout--masonry .spgrid-grid {
	display: block;
	column-count: var( --spgrid-columns );
	column-gap: var( --spgrid-gap );
}

.spgrid-layout--masonry .spgrid-grid__item {
	break-inside: avoid;
	margin-bottom: var( --spgrid-gap );
}

/* --------------------------------------------------------- Built-in card */
/* Reference layout: meta + title at the TOP, featured image at the BOTTOM. */
.spgrid-card {
	display: flex;
	flex-direction: column;
	background: var( --spgrid-card-bg );
	color: var( --spgrid-card-fg );
	border: 1px solid var( --spgrid-border );
	border-radius: var( --spgrid-radius );
	box-shadow: var( --spgrid-shadow );
	overflow: hidden;
	transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.spgrid-card__body {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 24px 24px 22px;
}

.spgrid-card__meta {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 8px;
	font-size: 14px;
}

.spgrid-card__terms {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

.spgrid-card__terms a {
	color: var( --spgrid-link );
	text-decoration: none;
	font-weight: 500;
}

.spgrid-card__terms a:hover {
	text-decoration: underline;
}

.spgrid-card__sep {
	color: var( --spgrid-border );
}

/*
 * Category badge floated over the featured image. Falls back to the meta row
 * when the card has no image slot (see card-default.php), so the categories
 * never simply disappear.
 */
.spgrid-card__terms--badge {
	/* Drives every corner offset so the Badge Corner control only has to switch
	   which edges are pinned, and Badge Offset only has to set this one value. */
	--spgrid-badge-offset: 10px;
	position: absolute;
	top: var( --spgrid-badge-offset );
	left: var( --spgrid-badge-offset );
	z-index: 1;
	max-width: calc( 100% - ( var( --spgrid-badge-offset ) * 2 ) );
	padding: 5px 11px;
	border-radius: 999px;
	background: var( --spgrid-card-bg );
	box-shadow: var( --spgrid-shadow );
	font-size: 12px;
	line-height: 1.25;
	font-weight: 600;
	/* Not inherited from the card: a centred or right-aligned card would
	   otherwise shift the badge text away from its anchored corner. */
	text-align: left;
}

.spgrid-card__author {
	color: var( --spgrid-muted );
}

.spgrid-card__author a {
	color: inherit;
	text-decoration: none;
	font-weight: 500;
}

.spgrid-card__author a:hover {
	color: var( --spgrid-accent );
}

.spgrid-card__author-prefix {
	opacity: 0.75;
	margin-right: 2px;
}

.spgrid-card__date {
	color: var( --spgrid-muted );
	letter-spacing: 0.02em;
	white-space: nowrap;
}

.spgrid-card__title {
	margin: 0;
	font-size: 23px;
	font-weight: 600;
	line-height: 1.28;
}

.spgrid-card__title a {
	color: var( --spgrid-card-fg );
	text-decoration: none;
}

.spgrid-card__title a:hover {
	color: var( --spgrid-accent );
}

.spgrid-card__excerpt {
	margin: 0;
	font-size: 15px;
	line-height: 1.6;
	color: var( --spgrid-muted );
}

.spgrid-card__acf {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
	font-size: 14px;
}

.spgrid-card__acf-item {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px;
}

.spgrid-card__acf-label {
	font-weight: 600;
	color: var( --spgrid-card-fg );
}

.spgrid-card__acf-value {
	color: var( --spgrid-muted );
}

.spgrid-card__more {
	align-self: flex-start;
	color: var( --spgrid-accent );
	font-weight: 600;
	text-decoration: none;
	transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

.spgrid-card__more:hover {
	text-decoration: underline;
}

/*
 * The thumb is markup-ordered after the body so that "bottom" needs no
 * reordering; the Image Position control flips it with `order` and defaults to
 * top. This base rule matches that default, so a card still reads correctly in
 * the brief window before Elementor's generated CSS lands.
 */
.spgrid-card__thumb {
	display: block;
	position: relative; /* anchors the category badge */
	order: -1;
	overflow: hidden;
	aspect-ratio: 16 / 10;
}

/* The image's own link. Separate from the badge's links, which must not be
   nested inside it — nested anchors are invalid, and this one is aria-hidden. */
.spgrid-card__thumb-link {
	display: block;
	width: 100%;
	height: 100%;
}

.spgrid-card__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}

.spgrid-card:hover .spgrid-card__thumb img {
	transform: scale( 1.05 );
}

/* Fallback thumb for posts with no featured image. Supplies the surface the
   transparent glyph sits on, and centres it. */
.spgrid-card__thumb--placeholder {
	background: var( --spgrid-input-bg );
}

.spgrid-card__thumb--placeholder .spgrid-card__thumb-link {
	display: flex;
	align-items: center;
	justify-content: center;
}

/* The bundled glyph is contained and centred rather than cropped to fill. Keyed
   off the extension so that filtering in a photo via `spgrid/placeholder_image`
   falls through to the `cover` rule above with no CSS edit. */
.spgrid-card__thumb--placeholder img[src$=".svg"] {
	width: 34%;
	height: auto;
	max-height: 60%;
	object-fit: contain;
	opacity: 0.55;
}

/* Only the glyph needs a divider — a real featured image, or a photo filtered in
   to replace the glyph, reads as a thumbnail on its own. */
.spgrid-card__thumb--placeholder:has( img[src$=".svg"] ) {
	border-top: 1px solid var( --spgrid-border );
}

/* The zoom reads as a broken image on a static glyph. */
.spgrid-card:hover .spgrid-card__thumb--placeholder img[src$=".svg"] {
	transform: none;
}

.spgrid-empty {
	grid-column: 1 / -1; /* grid / list layouts */
	column-span: all; /* masonry layout (CSS columns) */
	width: 100%;
	padding: 40px 0;
	text-align: center;
	color: var( --spgrid-muted );
}

/* Custom Elementor empty-state template — the template brings its own
   design, so the wrapper stays neutral (no forced padding/centering). */
.spgrid-empty--custom {
	padding: 0;
	text-align: initial;
	color: inherit;
}

.spgrid-error {
	color: #dc2626;
}

/* ----------------------------------------------------------- Loader */
.spgrid-loader {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding-top: 40px;
	background: color-mix( in srgb, var( --spgrid-card-bg ) 60%, transparent );
	z-index: 2;
}

.spgrid-loader__spinner {
	width: 34px;
	height: 34px;
	border: 3px solid var( --spgrid-border );
	border-top-color: var( --spgrid-accent );
	border-radius: 50%;
	animation: spgrid-spin 0.7s linear infinite;
}

.spgrid-is-loading .spgrid-grid {
	opacity: 0.55;
	transition: opacity 0.2s ease;
}

@keyframes spgrid-spin {
	to {
		transform: rotate( 360deg );
	}
}

/* ----------------------------------------------------- Off-canvas filters */
.spgrid-filters {
	position: fixed;
	inset: 0;
	z-index: 99999;
	visibility: hidden;
	pointer-events: none;
	/* Keep the drawer visible while the panel slides out / overlay fades,
	   then hide it. Without the delay, closing snaps shut instantly. */
	transition: visibility 0s linear 0.35s;
}

.spgrid-filters.is-open {
	visibility: visible;
	pointer-events: auto;
	transition-delay: 0s;
}

.spgrid-filters__overlay {
	position: absolute;
	inset: 0;
	background: rgba( 0, 0, 0, 0.45 );
	opacity: 0;
	transition: opacity 0.3s ease;
}

.spgrid-filters.is-open .spgrid-filters__overlay {
	opacity: 1;
}

.spgrid-filters__panel {
	position: absolute;
	top: 0;
	bottom: 0;
	width: min( 380px, 90vw );
	display: flex;
	flex-direction: column;
	background: var( --spgrid-panel-bg );
	color: var( --spgrid-card-fg );
	box-shadow: 0 0 40px rgba( 0, 0, 0, 0.25 );
	transition: transform 0.32s cubic-bezier( 0.22, 1, 0.36, 1 );
}

.spgrid-filters--left .spgrid-filters__panel {
	left: 0;
	transform: translateX( -100% );
}

.spgrid-filters--right .spgrid-filters__panel {
	right: 0;
	transform: translateX( 100% );
}

.spgrid-filters.is-open .spgrid-filters__panel {
	transform: translateX( 0 );
}

.spgrid-filters__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 22px 24px 18px;
}

.spgrid-filters__title {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font-weight: 700;
	font-size: 26px;
	letter-spacing: -0.01em;
}

.spgrid-filters__title .spgrid-icon {
	width: 26px;
	height: 26px;
}

.spgrid-filters__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border: 0;
	background: transparent;
	color: inherit;
	cursor: pointer;
	border-radius: 8px;
}

.spgrid-filters__close:hover {
	background: color-mix( in srgb, var( --spgrid-border ) 60%, transparent );
}

.spgrid-filters__close .spgrid-icon {
	width: 22px;
	height: 22px;
}

.spgrid-filters__scroll {
	flex: 1 1 auto;
	overflow-y: auto;
	padding: 0 24px 20px;
}

/* ----- Active filter chips ----- */
/*
 * Rules above and below fence the chips off from the drawer header and the
 * first filter group, so the active selection reads as its own band rather
 * than floating between them. Both live on this element (not as separate
 * elements) so they disappear with it via the :empty rule below.
 */
.spgrid-filters__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 18px;
	padding: 18px 0;
	border-top: 1px solid var( --spgrid-border );
	border-bottom: 1px solid var( --spgrid-border );
}

.spgrid-filters__chips:empty {
	display: none;
}

.spgrid-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 16px 8px 12px;
	border: 1px solid var( --spgrid-border );
	border-radius: 999px;
	background: var( --spgrid-input-bg );
	color: var( --spgrid-card-fg );
	font-size: 14px;
	cursor: pointer;
	transition: border-color 0.15s ease, background 0.15s ease;
}

.spgrid-chip:hover {
	border-color: var( --spgrid-accent );
}

.spgrid-chip__x {
	font-size: 16px;
	line-height: 1;
	color: var( --spgrid-muted );
}

/* ----- Accordion section ----- */
.spgrid-filter {
	border-top: 1px solid var( --spgrid-border );
}

.spgrid-filter:first-of-type {
	border-top: 0;
}

.spgrid-filter__head {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	padding: 20px 2px;
	border: 0;
	background: transparent;
	color: inherit;
	cursor: pointer;
	text-align: left;
}

.spgrid-filter__label {
	font-weight: 700;
	font-size: 21px;
	letter-spacing: -0.01em;
}

.spgrid-filter__count {
	font-size: 14px;
	font-weight: 500;
	color: var( --spgrid-muted );
}

.spgrid-filter__chevron {
	margin-left: auto;
	width: 12px;
	height: 12px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate( -135deg );
	transition: transform 0.2s ease;
}

.spgrid-filter.is-collapsed .spgrid-filter__chevron {
	transform: rotate( 45deg );
}

.spgrid-filter__body {
	padding: 0 2px 22px;
	overflow: hidden;
}

.spgrid-filter.is-collapsed .spgrid-filter__body {
	display: none;
}

.spgrid-filter__select {
	width: 100%;
	padding: 9px 12px;
	border: 1px solid var( --spgrid-border );
	border-radius: 8px;
	background: var( --spgrid-input-bg );
	color: var( --spgrid-card-fg );
}

.spgrid-filter__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 18px;
	max-height: 320px;
	overflow-y: auto;
}

.spgrid-filter__list label {
	display: flex;
	align-items: center;
	gap: 14px;
	cursor: pointer;
	font-size: 18px;
}

/* Circular check / radio indicators (match reference). */
.spgrid-filter__list input[type="checkbox"],
.spgrid-filter__list input[type="radio"] {
	appearance: none;
	-webkit-appearance: none;
	position: relative;
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	margin: 0;
	border: 2px solid var( --spgrid-border );
	border-radius: 50%;
	background: transparent;
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease;
}

.spgrid-filter__list input[type="checkbox"]:checked,
.spgrid-filter__list input[type="radio"]:checked {
	background: var( --spgrid-accent );
	border-color: var( --spgrid-accent );
}

.spgrid-filter__list input[type="checkbox"]:checked::after,
.spgrid-filter__list input[type="radio"]:checked::after {
	content: "";
	position: absolute;
	left: 8px;
	top: 4px;
	width: 6px;
	height: 11px;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: rotate( 45deg );
}

.spgrid-filter__list input:focus-visible {
	outline: 2px solid var( --spgrid-accent );
	outline-offset: 2px;
}

.spgrid-filter__text,
.spgrid-filter__num,
.spgrid-filter__date {
	width: 100%;
	padding: 9px 12px;
	border: 1px solid var( --spgrid-border );
	border-radius: 8px;
	background: var( --spgrid-input-bg );
	color: var( --spgrid-card-fg );
	font-size: 14px;
}

.spgrid-filter__text:focus,
.spgrid-filter__num:focus,
.spgrid-filter__date:focus {
	border-color: var( --spgrid-accent );
	outline: none;
}

.spgrid-filter__range {
	display: flex;
	align-items: center;
	gap: 8px;
}

.spgrid-filter__range-sep {
	color: var( --spgrid-muted );
}

/* ----- Date range (From / To) ----- */
.spgrid-daterange {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}

.spgrid-daterange__col {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.spgrid-daterange__label {
	font-size: 15px;
	font-weight: 500;
}

.spgrid-daterange .spgrid-filter__date {
	padding: 12px 14px;
	font-size: 15px;
}

/* ----- Sticky footer (appears only when filters are selected) ----- */
.spgrid-filters__footer {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	padding: 16px 24px;
	border-top: 1px solid var( --spgrid-border );
	background: var( --spgrid-panel-bg );
}

.spgrid-filters__reset,
.spgrid-filters__apply {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 14px 30px;
	border-radius: 999px;
	cursor: pointer;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	transition: background 0.18s ease, border-color 0.18s ease, opacity 0.18s ease;
}

.spgrid-filters__reset {
	background: transparent;
	border: 1px solid var( --spgrid-border );
	color: var( --spgrid-card-fg );
}

.spgrid-filters__reset:hover {
	border-color: var( --spgrid-accent );
}

.spgrid-filters__reset .spgrid-icon {
	width: 16px;
	height: 16px;
}

.spgrid-filters__apply {
	background: var( --spgrid-accent );
	border: 1px solid var( --spgrid-accent );
	color: #fff;
}

.spgrid-filters__apply:hover {
	opacity: 0.92;
}

body.spgrid-noscroll {
	overflow: hidden;
}

/* -------------------------------------------------------------- Pagination */
.spgrid-pagination {
	margin-top: 28px;
}

.spgrid-pagination__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.spgrid-page {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 10px;
	border: 1px solid var( --spgrid-border );
	border-radius: 8px;
	background: var( --spgrid-input-bg );
	color: var( --spgrid-card-fg );
	font-size: 14.5px;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease;
}

.spgrid-page:hover {
	background: var( --spgrid-border );
}

.spgrid-page.is-active {
	background: var( --spgrid-accent );
	border-color: var( --spgrid-accent );
	color: #fff;
	cursor: default;
}

.spgrid-page--dots {
	border-color: transparent;
	background: transparent;
	cursor: default;
}

.spgrid-loadmore,
.spgrid-infinite {
	margin-top: 28px;
	text-align: center;
}

.spgrid-loadmore__btn {
	padding: 12px 28px;
	border: 1px solid var( --spgrid-accent );
	border-radius: var( --spgrid-radius );
	background: var( --spgrid-accent );
	color: #fff;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	transition: opacity 0.2s ease;
}

.spgrid-loadmore__btn:hover {
	opacity: 0.9;
}

.spgrid-loadmore__btn[disabled] {
	opacity: 0.4;
	cursor: not-allowed;
}

.spgrid-infinite__sentinel {
	display: block;
	height: 1px;
}

/* ------------------------------------------------------------- Responsive */
@media ( max-width: 1024px ) {
	.spgrid-layout--list .spgrid-card {
		grid-template-columns: 200px 1fr;
	}

	/* Restack the toolbar: heading + icon buttons share the first row,
	   the search box drops to its own full-width row below. The !important
	   flags override the widget's "Width" / "Position" desktop settings,
	   which assume a single-row toolbar. */
	.spgrid-toolbar {
		align-items: center;
	}

	.spgrid-toolbar__title {
		margin-right: 0;
	}

	.spgrid-toolbar__controls {
		margin-left: auto !important;
	}

	.spgrid-search {
		order: 3;
		flex: 1 1 100% !important;
		max-width: none !important;
		margin-left: 0 !important;
	}
}

@media ( max-width: 767px ) {
	.spgrid-layout--list .spgrid-card {
		grid-template-columns: 1fr;
	}

	/* The button row spans the full width; the filters toggle stretches into
	   the remaining space on the left while the other buttons keep their size
	   pinned to the right. */
	.spgrid-toolbar__controls {
		width: 100%;
		justify-content: flex-end;
	}

	.spgrid-toolbar__controls .spgrid-filters__toggle {
		flex: 1 1 auto;
		width: auto !important;
		gap: 9px;
	}

	/* Show the "Filters" text inside the stretched button. */
	.spgrid-toolbar__controls .spgrid-filters__toggle .spgrid-filters__toggle-label {
		display: inline;
	}
}