/**
 * Ingresso faceted catalog.
 *
 * Same palette as the predictive search (css/search-autocomplete.css): the
 * theme's cyan as accent, the header-notice mint as the soft highlight. All
 * rules are scoped under .igf — nothing here restyles the old catalog, which
 * must keep looking exactly as it did when the switch is off.
 */

.igf {
	--igf-accent: #2ea2cc;
	--igf-accent-dark: #2e8cb0;
	--igf-mint: #eef9f7;
	--igf-field: #f6f7fa;
	--igf-line: #e3e6ee;
	--igf-muted: #8a90a2;
	--igf-ink: #191919;
	--igf-radius: 14px;

	clear: both;
	margin: 0 0 48px;
	color: var( --igf-ink );
	font-size: 15px;
	line-height: 1.4;
	text-align: left;
}

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

/* ---------------------------------------------------------------------------
   Type pills
   --------------------------------------------------------------------------- */

.igf-types {
	display: flex;
	margin: 0 0 24px;
	padding-bottom: 2px;
	overflow-x: auto;
	gap: 8px;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.igf-types::-webkit-scrollbar {
	display: none;
}

.igf .igf-type {
	flex: 0 0 auto;
	padding: 9px 18px;
	border: 1px solid var( --igf-line );
	border-radius: 999px;
	background: #fff;
	color: var( --igf-ink );
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
	transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.igf .igf-type:hover {
	border-color: var( --igf-accent );
	color: var( --igf-accent-dark );
}

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

/* ---------------------------------------------------------------------------
   Layout: sidebar left of the grid; stacked, filters first, on small screens
   --------------------------------------------------------------------------- */

.igf-layout {
	display: grid;
	align-items: start;
	gap: 20px 36px;
	grid-template-areas:
		"side bar"
		"side main";
	grid-template-columns: 264px minmax( 0, 1fr );
}

.igf-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	grid-area: bar;
	gap: 12px;
}

.igf-sidebar {
	position: sticky;
	top: 16px;
	max-height: calc( 100vh - 32px );
	overflow-y: auto;
	grid-area: side;
	overscroll-behavior: contain;
	scrollbar-color: #d3d8e4 transparent;
	scrollbar-gutter: stable;
	scrollbar-width: thin;
}

/* The sidebar scrolls on its own when it is taller than the window. The bar
   gets a lane of its own (the form's right padding) so it never sits on top of
   the counts, whether the system draws it as an overlay or a classic bar. */
.igf-sidebar::-webkit-scrollbar {
	width: 6px;
}

.igf-sidebar::-webkit-scrollbar-track {
	background: transparent;
}

.igf-sidebar::-webkit-scrollbar-thumb {
	border-radius: 3px;
	background: #d3d8e4;
}

.igf-sidebar::-webkit-scrollbar-thumb:hover {
	background: var( --igf-muted );
}

.igf-main {
	position: relative;
	min-width: 0;
	grid-area: main;
}

.igf .igf-count {
	margin: 0;
	padding: 0;
	color: var( --igf-muted );
	font-size: 14px;
}

/* ---------------------------------------------------------------------------
   Toolbar controls
   --------------------------------------------------------------------------- */

.igf .igf-toggle {
	display: none;
	align-items: center;
	height: 42px;
	margin: 0;
	padding: 0 16px;
	border: 1px solid var( --igf-line );
	border-radius: 999px;
	background: #fff;
	box-shadow: none;
	color: var( --igf-ink );
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	text-transform: none;
	cursor: pointer;
	gap: 8px;
}

.igf .igf-toggle[aria-expanded="true"] {
	border-color: var( --igf-accent );
	background: var( --igf-mint );
}

.igf-toggle-n,
.igf-group-n {
	display: inline-flex;
	min-width: 20px;
	height: 20px;
	align-items: center;
	justify-content: center;
	padding: 0 6px;
	border-radius: 999px;
	background: var( --igf-accent );
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
}

.igf-toggle-n[hidden] {
	display: none;
}

.igf-sort {
	display: block;
	margin: 0;
}

.igf .igf-sort select {
	width: auto;
	max-width: 100%;
	height: 42px;
	margin: 0;
	padding: 0 38px 0 16px;
	border: 1px solid var( --igf-line );
	border-radius: 999px;
	background: var( --igf-field ) url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238a90a2' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6,9 12,15 18,9'/%3E%3C/svg%3E" ) no-repeat right 14px center;
	box-shadow: none;
	color: var( --igf-ink );
	font: inherit;
	font-size: 14px;
	line-height: 40px;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.igf .igf-sort select:focus,
.igf .igf-toggle:focus-visible,
.igf .igf-type:focus-visible {
	border-color: var( --igf-accent );
	outline: none;
	box-shadow: 0 0 0 3px rgba( 46, 162, 204, 0.15 );
}

/* ---------------------------------------------------------------------------
   Filter groups
   --------------------------------------------------------------------------- */

.igf .igf-form {
	margin: 0;
	padding: 0 16px 0 0;
}

.igf-group {
	border-bottom: 1px solid var( --igf-line );
}

.igf-group:first-child {
	border-top: 1px solid var( --igf-line );
}

.igf-group > summary {
	display: flex;
	align-items: center;
	padding: 16px 2px;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.02em;
	list-style: none;
	cursor: pointer;
	gap: 8px;
	user-select: none;
}

.igf-group > summary::-webkit-details-marker {
	display: none;
}

.igf-group > summary:focus-visible {
	border-radius: 6px;
	outline: 2px solid var( --igf-accent );
	outline-offset: -2px;
}

.igf-group-title {
	flex: 1;
}

.igf-chevron {
	flex: 0 0 auto;
	color: var( --igf-muted );
	transition: transform 0.18s ease;
}

.igf-group[open] .igf-chevron {
	transform: rotate( 180deg );
}

.igf .igf-options {
	margin: 0;
	padding: 0 0 12px;
	list-style: none;
}

.igf .igf-options li {
	margin: 0;
	padding: 0;
	list-style: none;
}

.igf .igf-options li::before {
	content: none;
}

.igf-options li.is-extra {
	display: none;
}

.igf-group.is-expanded .igf-options li.is-extra {
	display: block;
}

.igf .igf-opt {
	position: relative;
	display: flex;
	align-items: center;
	margin: 0 -8px;
	padding: 7px 8px;
	border-radius: 8px;
	color: var( --igf-ink );
	font-size: 14px;
	font-weight: 400;
	line-height: 1.3;
	cursor: pointer;
	gap: 10px;
	transition: background-color 0.12s ease;
}

.igf .igf-opt:hover {
	background: var( --igf-mint );
}

/* The real checkbox stays in the tree for keyboard and screen readers; the
   visible box is the sibling span. */
.igf .igf-opt input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	opacity: 0;
	pointer-events: none;
}

.igf-check {
	position: relative;
	display: block;
	width: 18px;
	height: 18px;
	flex: 0 0 18px;
	border: 1.5px solid #c9cfdc;
	border-radius: 5px;
	background: #fff;
	transition: border-color 0.12s ease, background-color 0.12s ease;
}

.igf-check::after {
	position: absolute;
	top: 1.5px;
	left: 5px;
	width: 5px;
	height: 9px;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	content: "";
	opacity: 0;
	transform: rotate( 45deg );
}

.igf-opt:hover .igf-check {
	border-color: var( --igf-accent );
}

.igf-opt input:checked + .igf-check {
	border-color: var( --igf-accent );
	background: var( --igf-accent );
}

.igf-opt input:checked + .igf-check::after {
	opacity: 1;
}

.igf-opt input:focus-visible + .igf-check {
	box-shadow: 0 0 0 3px rgba( 46, 162, 204, 0.25 );
}

.igf-opt input:checked ~ .igf-opt-label {
	font-weight: 600;
}

.igf-opt-label {
	min-width: 0;
	flex: 1;
}

.igf-opt-count {
	flex: 0 0 auto;
	color: var( --igf-muted );
	font-size: 12px;
	font-variant-numeric: tabular-nums;
}

/* Would return nothing: visible, so the list does not jump, but inert. */
.igf .igf-opt.is-disabled {
	color: #b9bdc9;
	cursor: default;
}

.igf .igf-opt.is-disabled:hover {
	background: none;
}

.igf-opt.is-disabled .igf-check {
	border-color: #e3e6ee;
	background: var( --igf-field );
}

.igf-opt.is-disabled .igf-opt-count {
	color: #c9cdd8;
}

.igf .igf-expand {
	display: inline-block;
	margin: -4px 0 14px;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
	color: var( --igf-accent-dark );
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	text-transform: none;
	cursor: pointer;
}

.igf .igf-expand:hover {
	background: none;
	color: var( --igf-accent );
	text-decoration: underline;
}

.igf .igf-apply {
	width: 100%;
	height: 44px;
	margin: 16px 0 0;
	border: 0;
	border-radius: 999px;
	background: var( --igf-accent );
	color: #fff;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

/* ---------------------------------------------------------------------------
   Price
   --------------------------------------------------------------------------- */

.igf-price {
	padding: 6px 2px 18px;
}

.igf-range {
	position: relative;
	height: 22px;
	margin: 0 0 14px;
}

.igf-range-track {
	position: absolute;
	top: 9px;
	right: 0;
	left: 0;
	height: 4px;
	border-radius: 2px;
	background: var( --igf-line );
}

.igf-range-fill {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	border-radius: 2px;
	background: var( --igf-accent );
}

/* Two native sliders stacked on one track. Only the thumbs take pointer
   events, otherwise the upper input would swallow every click. */
.igf .igf-range input[type="range"] {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 22px;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
	pointer-events: none;
	-webkit-appearance: none;
	appearance: none;
}

.igf .igf-range input[type="range"]:focus {
	outline: none;
}

.igf-range input[type="range"]::-webkit-slider-runnable-track {
	height: 22px;
	background: none;
}

.igf-range input[type="range"]::-moz-range-track {
	height: 22px;
	background: none;
}

.igf-range input[type="range"]::-webkit-slider-thumb {
	width: 20px;
	height: 20px;
	margin-top: 1px;
	border: 2px solid var( --igf-accent );
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 1px 3px rgba( 25, 25, 25, 0.18 );
	cursor: grab;
	pointer-events: auto;
	-webkit-appearance: none;
	appearance: none;
}

.igf-range input[type="range"]::-moz-range-thumb {
	width: 16px;
	height: 16px;
	border: 2px solid var( --igf-accent );
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 1px 3px rgba( 25, 25, 25, 0.18 );
	cursor: grab;
	pointer-events: auto;
}

.igf-range input[type="range"]:focus-visible::-webkit-slider-thumb {
	box-shadow: 0 0 0 4px rgba( 46, 162, 204, 0.25 );
}

.igf-range input[type="range"]:focus-visible::-moz-range-thumb {
	box-shadow: 0 0 0 4px rgba( 46, 162, 204, 0.25 );
}

.igf-price-fields {
	display: flex;
	gap: 10px;
}

.igf .igf-price-fields label {
	display: flex;
	min-width: 0;
	flex: 1;
	align-items: center;
	margin: 0;
	padding: 0 12px;
	border: 1px solid var( --igf-line );
	border-radius: 999px;
	background: var( --igf-field );
	color: var( --igf-muted );
	font-size: 13px;
	font-weight: 400;
	gap: 6px;
	transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

.igf .igf-price-fields label:focus-within {
	border-color: var( --igf-accent );
	background: #fff;
	box-shadow: 0 0 0 3px rgba( 46, 162, 204, 0.15 );
}

.igf .igf-price-fields input {
	width: 100%;
	min-width: 0;
	height: 38px;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
	color: var( --igf-ink );
	font: inherit;
	font-size: 14px;
	-moz-appearance: textfield;
	appearance: textfield;
}

.igf .igf-price-fields input:focus {
	outline: none;
}

.igf-price-fields input::-webkit-outer-spin-button,
.igf-price-fields input::-webkit-inner-spin-button {
	margin: 0;
	-webkit-appearance: none;
}

/* ---------------------------------------------------------------------------
   Active filter chips
   --------------------------------------------------------------------------- */

.igf-chips {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	margin: 0 0 18px;
	gap: 8px;
}

.igf-chips:empty {
	display: none;
}

.igf .igf-chip {
	display: inline-flex;
	align-items: center;
	height: 32px;
	margin: 0;
	padding: 0 12px;
	border: 1px solid #cfeae4;
	border-radius: 999px;
	background: var( --igf-mint );
	box-shadow: none;
	color: var( --igf-ink );
	font: inherit;
	font-size: 13px;
	font-weight: 500;
	text-transform: none;
	white-space: nowrap;
	cursor: pointer;
	gap: 8px;
	transition: border-color 0.12s ease, background-color 0.12s ease;
}

.igf .igf-chip svg {
	color: var( --igf-muted );
}

.igf .igf-chip:hover {
	border-color: var( --igf-accent );
	background: #fff;
	color: var( --igf-ink );
}

.igf .igf-chip:hover svg {
	color: var( --igf-accent-dark );
}

.igf .igf-reset {
	height: 32px;
	margin: 0;
	padding: 0 6px;
	border: 0;
	background: none;
	box-shadow: none;
	color: var( --igf-accent-dark );
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	text-transform: none;
	white-space: nowrap;
	cursor: pointer;
}

.igf .igf-reset:hover {
	background: none;
	color: var( --igf-accent );
	text-decoration: underline;
}

/* ---------------------------------------------------------------------------
   Product grid and cards
   --------------------------------------------------------------------------- */

.igf .igf-grid {
	display: grid;
	margin: 0;
	padding: 0;
	gap: 20px;
	grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	list-style: none;
	transition: opacity 0.15s ease;
}

.igf.is-loading .igf-grid,
.igf.is-loading .igf-chips {
	opacity: 0.35;
	pointer-events: none;
}

/* Loading spinner. The overlay spans the whole results column and the spinner
   is sticky inside it, so it stays in view however far down the grid the user
   has scrolled when they tick a box. */
.igf-loader {
	position: absolute;
	z-index: 2;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	visibility: hidden;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.15s ease, visibility 0s linear 0.15s;
}

.igf.is-loading .igf-loader {
	visibility: visible;
	opacity: 1;
	transition: opacity 0.15s ease;
}

.igf-spinner {
	position: sticky;
	top: 38vh;
	display: block;
	width: 52px;
	height: 52px;
	margin: 96px auto;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 6px 22px rgba( 25, 40, 60, 0.16 );
}

.igf-spinner::after {
	position: absolute;
	top: 13px;
	left: 13px;
	width: 26px;
	height: 26px;
	border: 3px solid var( --igf-line );
	border-top-color: var( --igf-accent );
	border-radius: 50%;
	content: "";
	animation: igf-spin 0.7s linear infinite;
}

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

/* The card is the list item itself: the link covers the image and text, and
   the buying controls sit beneath it as siblings. */
.igf .igf-card {
	display: flex;
	width: auto;
	flex-direction: column;
	margin: 0;
	padding: 0;
	float: none;
	overflow: hidden;
	border: 1px solid var( --igf-line );
	border-radius: var( --igf-radius );
	background: #fff;
	list-style: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.igf .igf-card:hover,
.igf .igf-card:focus-within {
	border-color: var( --igf-accent );
	box-shadow: 0 10px 28px rgba( 25, 40, 60, 0.1 );
	transform: translateY( -2px );
}

.igf .igf-card::before {
	content: none;
}

.igf .igf-card-link {
	display: flex;
	flex: 1;
	flex-direction: column;
	color: var( --igf-ink );
	text-decoration: none;
}

.igf .igf-card-link:hover,
.igf .igf-card-link:focus-visible {
	outline: none;
	color: var( --igf-ink );
	text-decoration: none;
}

.igf .igf-card-link:hover .igf-card-title,
.igf .igf-card-link:focus-visible .igf-card-title {
	color: var( --igf-accent-dark );
}

.igf-card-media {
	position: relative;
	display: block;
	overflow: hidden;
	background: var( --igf-field );
	aspect-ratio: 1 / 1;
}

.igf .igf-card-media img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	object-fit: contain;
	mix-blend-mode: multiply;
	transition: transform 0.3s ease;
}

.igf-card-link:hover .igf-card-media img {
	transform: scale( 1.04 );
}

.igf-badges {
	position: absolute;
	top: 12px;
	left: 12px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
}

.igf-badge {
	padding: 5px 10px;
	border-radius: 999px;
	background: var( --igf-ink );
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.03em;
	line-height: 1;
	text-transform: uppercase;
}

.igf-badge--novinka {
	background: var( --igf-accent );
}

.igf-badge--hit-prodazh,
.igf-badge--sort-nedeli {
	background: #e4572e;
}

.igf-badge--oos {
	background: #fff;
	box-shadow: inset 0 0 0 1px var( --igf-line );
	color: var( --igf-muted );
}

.igf-card-body {
	display: flex;
	flex: 1;
	flex-direction: column;
	padding: 14px 16px 12px;
	gap: 6px;
}

/* Buying controls: weight pills, grind, then price and button on one line. */
.igf-card-buy {
	display: flex;
	flex-direction: column;
	padding: 0 16px 16px;
	gap: 10px;
}

.igf-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.igf .igf-pill {
	height: 30px;
	margin: 0;
	padding: 0 12px;
	border: 1px solid var( --igf-line );
	border-radius: 999px;
	background: #fff;
	box-shadow: none;
	color: var( --igf-ink );
	font: inherit;
	font-size: 13px;
	font-weight: 500;
	line-height: 1;
	text-transform: none;
	white-space: nowrap;
	cursor: pointer;
	transition: border-color 0.12s ease, background-color 0.12s ease, color 0.12s ease;
}

.igf .igf-pill:hover {
	border-color: var( --igf-accent );
	background: #fff;
	color: var( --igf-accent-dark );
}

.igf .igf-pill.is-active {
	border-color: var( --igf-accent );
	background: var( --igf-mint );
	color: var( --igf-accent-dark );
	font-weight: 700;
}

.igf .igf-pill:focus-visible,
.igf .igf-add:focus-visible,
.igf .igf-details:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px rgba( 46, 162, 204, 0.25 );
}

.igf .igf-grind {
	display: flex;
	align-items: center;
	margin: 0;
	padding: 0 0 0 12px;
	border: 1px solid var( --igf-line );
	border-radius: 999px;
	background: var( --igf-field );
	font-weight: 400;
	gap: 6px;
	transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

.igf .igf-grind:focus-within {
	border-color: var( --igf-accent );
	background: #fff;
	box-shadow: 0 0 0 3px rgba( 46, 162, 204, 0.15 );
}

.igf-grind-label {
	flex: 0 0 auto;
	color: var( --igf-muted );
	font-size: 12px;
}

.igf .igf-grind select {
	width: 100%;
	min-width: 0;
	height: 34px;
	flex: 1;
	margin: 0;
	padding: 0 30px 0 0;
	border: 0;
	background: 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='%238a90a2' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6,9 12,15 18,9'/%3E%3C/svg%3E" ) no-repeat right 12px center;
	box-shadow: none;
	color: var( --igf-ink );
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	line-height: 32px;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.igf .igf-grind select:focus {
	outline: none;
}

.igf .igf-add,
.igf .igf-details {
	display: inline-flex;
	height: 38px;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 0 16px;
	border: 1px solid var( --igf-accent );
	border-radius: 999px;
	box-shadow: none;
	font: inherit;
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
	text-transform: none;
	white-space: nowrap;
	cursor: pointer;
	gap: 7px;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.igf .igf-add {
	background: var( --igf-accent );
	color: #fff;
}

.igf .igf-add:hover {
	border-color: var( --igf-accent-dark );
	background: var( --igf-accent-dark );
	color: #fff;
}

.igf .igf-details {
	background: #fff;
	color: var( --igf-accent-dark );
}

.igf .igf-details:hover {
	background: var( --igf-mint );
	color: var( --igf-accent-dark );
	text-decoration: none;
}

/* Adding takes a full WordPress request (~2s): the icon becomes a spinner so
   the wait reads as work in progress, not as a dead click. */
.igf .igf-add.is-busy {
	cursor: progress;
	opacity: 0.85;
}

.igf-add.is-busy .igf-add-icon {
	display: none;
}

.igf-add.is-busy::before {
	width: 14px;
	height: 14px;
	border: 2px solid rgba( 255, 255, 255, 0.45 );
	border-top-color: #fff;
	border-radius: 50%;
	content: "";
	animation: igf-spin 0.7s linear infinite;
}

.igf .igf-add.is-done,
.igf .igf-add.is-done:hover {
	border-color: #2a9d6f;
	background: #2a9d6f;
}

.igf-add.is-done .igf-add-icon {
	display: none;
}

.igf-add.is-done::before {
	width: 5px;
	height: 10px;
	margin: -3px 3px 0;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	content: "";
	transform: rotate( 45deg );
}

.igf-card-mark {
	display: -webkit-box;
	overflow: hidden;
	color: var( --igf-accent-dark );
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.05em;
	line-height: 1.3;
	text-transform: uppercase;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 1;
}

.igf-card-title {
	display: -webkit-box;
	overflow: hidden;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.3;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

.igf-card-notes {
	display: -webkit-box;
	overflow: hidden;
	color: var( --igf-muted );
	font-size: 13px;
	line-height: 1.35;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

.igf-card-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}

.igf-card-price {
	font-size: 18px;
	font-weight: 700;
	white-space: nowrap;
}

.igf-card-price small {
	color: var( --igf-muted );
	font-size: 13px;
	font-weight: 400;
}

.igf-card-rating {
	display: inline-flex;
	align-items: center;
	margin-top: 2px;
	color: var( --igf-ink );
	font-size: 13px;
	font-weight: 600;
	white-space: nowrap;
	gap: 4px;
}

.igf-card-rating svg {
	color: #f5b301;
}

.igf-card-rating small {
	color: var( --igf-muted );
	font-size: 12px;
	font-weight: 400;
}

.igf-card.is-oos .igf-card-media img {
	filter: grayscale( 1 );
	opacity: 0.55;
}

.igf-card.is-oos .igf-card-title,
.igf-card.is-oos .igf-card-price {
	color: var( --igf-muted );
}

.igf .igf-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin: 0;
	padding: 56px 20px;
	border: 1px dashed var( --igf-line );
	border-radius: var( --igf-radius );
	color: var( --igf-muted );
	text-align: center;
	gap: 8px;
	grid-column: 1 / -1;
	list-style: none;
}

.igf .igf-empty::before {
	content: none;
}

.igf-empty strong {
	color: var( --igf-ink );
	font-size: 18px;
}

.igf .igf-more {
	display: block;
	min-width: 220px;
	height: 48px;
	margin: 28px auto 0;
	padding: 0 28px;
	border: 1px solid var( --igf-accent );
	border-radius: 999px;
	background: #fff;
	box-shadow: none;
	color: var( --igf-accent-dark );
	font: inherit;
	font-size: 15px;
	font-weight: 600;
	text-transform: none;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.igf .igf-more:hover {
	background: var( --igf-accent );
	color: #fff;
}

.igf .igf-more[hidden] {
	display: none;
}

/* ---------------------------------------------------------------------------
   Narrower screens
   --------------------------------------------------------------------------- */

@media ( max-width: 1199px ) {
	.igf-layout {
		gap: 20px 28px;
		grid-template-columns: 240px minmax( 0, 1fr );
	}

	.igf .igf-grid {
		gap: 16px;
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}
}

/* Filters move above the grid, folded behind a button so the products are
   still on the first screen. */
@media ( max-width: 991px ) {
	.igf-layout {
		gap: 14px;
		grid-template-areas:
			"bar"
			"side"
			"main";
		grid-template-columns: minmax( 0, 1fr );
	}

	.igf .igf-toggle {
		display: inline-flex;
	}

	.igf .igf-count {
		margin-left: auto;
	}

	.igf-sidebar {
		position: static;
		display: none;
		max-height: none;
		padding: 4px 16px 8px;
		overflow: visible;
		border: 1px solid var( --igf-line );
		border-radius: var( --igf-radius );
		background: #fff;
	}

	.igf.is-filters-open .igf-sidebar {
		display: block;
	}

	/* Without JavaScript there is no button to open it with. */
	.igf:not( .is-ready ) .igf-sidebar {
		display: block;
	}

	.igf:not( .is-ready ) .igf-toggle {
		display: none;
	}

	.igf .igf-form {
		padding: 0;
	}

	.igf-group:first-child {
		border-top: 0;
	}

	.igf-group:last-of-type {
		border-bottom: 0;
	}

	.igf .igf-opt {
		padding: 9px 8px;
	}

	.igf-chips {
		flex-wrap: nowrap;
		margin-right: -16px;
		padding-right: 16px;
		overflow-x: auto;
		scrollbar-width: none;
	}

	.igf-chips::-webkit-scrollbar {
		display: none;
	}

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

@media ( max-width: 767px ) {
	.igf-types {
		margin-bottom: 16px;
	}

	.igf .igf-type {
		padding: 8px 14px;
		font-size: 13px;
	}

	.igf .igf-grid {
		gap: 12px;
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}

	.igf-card-body {
		padding: 10px 12px 12px;
		gap: 4px;
	}

	.igf-card-title {
		font-size: 14px;
	}

	.igf-card-notes {
		font-size: 12px;
	}

	.igf-card-price {
		font-size: 16px;
	}

	.igf-card-buy {
		padding: 0 12px 12px;
		gap: 8px;
	}

	/* Two narrow columns: price above, button the full width below. */
	.igf-card-foot {
		flex-direction: column;
		align-items: stretch;
		gap: 8px;
	}

	.igf .igf-pill {
		height: 28px;
		padding: 0 10px;
		font-size: 12px;
	}

	/* No room for the caption beside the value in a two-column card; the
	   select keeps its aria-label. */
	.igf-grind-label {
		display: none;
	}

	.igf-badges {
		top: 8px;
		left: 8px;
	}

	.igf-badge {
		padding: 4px 8px;
		font-size: 10px;
	}
}

@media ( max-width: 479px ) {
	.igf .igf-count {
		display: none;
	}

	.igf-bar {
		gap: 8px;
	}

	.igf .igf-toggle,
	.igf .igf-sort select {
		height: 40px;
		font-size: 13px;
	}

	.igf-sort {
		min-width: 0;
		flex: 1;
	}

	.igf .igf-sort select {
		width: 100%;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.igf *,
	.igf *::before,
	.igf *::after {
		transition: none !important;
	}

	.igf-spinner::after {
		animation-duration: 2s;
	}
}