/* ==========================================================================
   Savoidakis Archive

   Selectors are written as `.savo .savo-x` (or `.savo.savo-x` for the widget
   roots) on purpose: that beats the theme/kit element selectors such as
   `.elementor-kit-1740 button` while staying below Elementor's own per-widget
   rules, so every control in the panel still overrides this file.

   Colours, radii and sizes all come from --savo-* custom properties, which is
   what the Elementor controls write.
   ========================================================================== */

.savo {
	--savo-ink: #252324;
	--savo-muted: #6E6A67;
	--savo-accent: #CC3262;
	--savo-dark: #252324;
	--savo-panel: #FFFFFF;
	--savo-card: #FFFFFF;
	--savo-soft: #F6F0F2;
	--savo-soft-alt: #FBF0F4;
	--savo-pill: #F2F0ED;
	--savo-border: #E8E4E0;
	--savo-radius: 14px;
	--savo-radius-field: 10px;

	font-family: "Comfortaa", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	/* Elementor writes `"Comfortaa", Comfortaa` with no real fallback, so pin one. */
	--savo-font: "Comfortaa", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	color: var(--savo-ink);
	-webkit-font-smoothing: antialiased;
}

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

/* ---------------------------------------------------------------- Isolation */

.savo ul,
.savo ol {
	list-style: none;
	margin: 0;
	padding: 0;
}

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

.savo h1,
.savo h2,
.savo h3,
.savo h4,
.savo h5,
.savo h6,
.savo p {
	margin: 0;
	font-family: inherit;
	letter-spacing: normal;
	text-transform: none;
}

.savo button,
.savo input,
.savo select,
.savo textarea {
	font-family: inherit;
	letter-spacing: normal;
	text-transform: none;
}

.savo button,
.savo [type="button"],
.savo [type="submit"] {
	width: auto;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	color: inherit;
	line-height: normal;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.savo input[type="text"],
.savo input[type="search"],
.savo input[type="number"],
.savo input[type="range"] {
	width: auto;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	color: inherit;
	line-height: normal;
	outline: 0;
}

.savo a {
	text-decoration: none;
	box-shadow: none;
}

.savo svg {
	display: block;
	flex: none;
}

.savo .savo-link {
	display: inline-flex;
	align-items: center;
	color: var(--savo-accent);
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
	transition: opacity .18s ease;
}

.savo .savo-link:hover {
	opacity: .7;
	text-decoration: none;
	color: var(--savo-accent);
}

/* ------------------------------------------- Archive shell (Elementor rows) */

.savo-archive__row {
	align-items: flex-start;
}

/* The sidebar width stays the Elementor width control (--width); the main
   column simply takes whatever is left. */
.e-con.savo-archive__sidebar {
	flex: 0 0 auto;
}

.e-con.savo-archive__main {
	flex: 1 1 0;
	min-width: 0;
}

@media (max-width: 1024px) {
	/* The panel becomes a drawer, so its column must stop reserving space —
	   without display:none, because the drawer lives inside it. */
	.e-con.savo-archive__sidebar {
		width: 0 !important;
		flex: 0 0 0 !important;
		padding: 0 !important;
	}

	/* A zero-width column still earns the row's column gap, which pushed the
	   grid 20px right of the title and the toolbar. The gap is an Elementor
	   value at (0,3,0), so the longhand has to be forced. */
	.e-con.savo-archive__row {
		column-gap: 0 !important;
	}
}

/* ------------------------------------------------- Sticky filters (desktop)
   The panel follows the page while scrolling. For `position: sticky` to have
   room, the column it lives in has to be as tall as the row, so the sidebar
   container stretches and the widget itself sticks inside it.

   --savo-header-h is written by archive.js from the live height of the sticky
   site header (it shrinks as you scroll), --savo-sticky-gap and
   --savo-sticky-bottom come from the widget's Elementor controls. */

@media (min-width: 1025px) {
	.e-con.savo-archive__row,
	.e-con.savo-archive__sidebar,
	.e-con.savo-archive__main {
		overflow: visible;
	}

	.e-con.savo-archive__sidebar {
		align-self: stretch;
	}

	.elementor-element.savo-fsticky-yes {
		position: sticky;
		top: calc( var(--savo-header-h, 0px) + var(--savo-sticky-gap, 20px) );
		z-index: 4;
	}

	.elementor-element.savo-fsticky-yes.savo-fscroll-yes .savo.savo-filters {
		max-height: calc(
			100vh
			- var(--savo-header-h, 0px)
			- var(--savo-sticky-gap, 20px)
			- var(--savo-sticky-bottom, 24px)
		);
		overflow-y: auto;
		overscroll-behavior: contain;
		scrollbar-width: thin;
		scrollbar-color: var(--savo-border) transparent;
	}

	.elementor-element.savo-fsticky-yes.savo-fscroll-yes .savo.savo-filters::-webkit-scrollbar {
		width: 6px;
	}

	.elementor-element.savo-fsticky-yes.savo-fscroll-yes .savo.savo-filters::-webkit-scrollbar-thumb {
		border-radius: 3px;
		background: var(--savo-border);
	}

	.elementor-element.savo-fsticky-yes.savo-fscroll-yes .savo.savo-filters::-webkit-scrollbar-track {
		background: transparent;
	}
}

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

.savo.savo-toolbar {
	--savo-control-h: 45px;
	display: flex;
	align-items: center;
	gap: 24px;
	flex-wrap: wrap;
}

.savo .savo-toolbar__search {
	position: relative;
	display: flex;
	align-items: center;
	gap: 12px;
	flex: 0 1 780px;
	max-width: 780px;
	min-width: 220px;
	height: var(--savo-control-h);
	margin: 0;
	padding: 0 22px;
	background: #fff;
	border: 0;
	border-radius: calc(var(--savo-control-h) / 2);
	box-shadow: 0 2px 12px rgba(37, 35, 36, .05);
}

.savo .savo-toolbar__search-icon {
	width: 20px;
	height: 20px;
	color: var(--savo-ink);
}

.savo .savo-toolbar__search input[type="search"] {
	flex: 1;
	width: 100%;
	min-width: 0;
	height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	font-size: 15px;
	line-height: normal;
	color: var(--savo-ink);
}

.savo .savo-toolbar__search input[type="search"]::placeholder {
	color: #8A8A8A;
	opacity: 1;
}

.savo .savo-toolbar__search input[type="search"]::-webkit-search-cancel-button {
	-webkit-appearance: none;
	appearance: none;
}

.savo .savo-toolbar__count {
	margin: 0;
	font-size: 15px;
	font-weight: 500;
	color: var(--savo-ink);
	white-space: nowrap;
}

.savo .savo-toolbar__actions {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 20px;
	flex-wrap: wrap;
	justify-content: flex-end;
}

/* The pill row needs room; let it push the search down a line rather than
   squeezing itself when the viewport is narrow. */
.savo .savo-toolbar__actions .savo-sort--inline {
	flex: 0 1 auto;
	min-width: 0;
}

.savo .savo-toolbar__filters {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	height: var(--savo-control-h);
	padding: 0 22px;
	border: 1px solid var(--savo-border);
	border-radius: 12px;
	background: #FFFFFF;
	color: var(--savo-ink);
	font-size: 15px;
	font-weight: 600;
	transition: background .18s ease;
}

.savo .savo-toolbar__filters:hover {
	background: var(--savo-soft-alt);
}

.savo .savo-toolbar__filters-icon {
	width: 20px;
	height: 20px;
}

.savo .savo-toolbar__divider {
	width: 1px;
	height: 26px;
	background: var(--savo-border);
}

.savo .savo-sort {
	position: relative;
}

.savo .savo-sort__trigger {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	height: var(--savo-control-h);
	padding: 0 18px;
	border: 1px solid var(--savo-border);
	border-radius: 12px;
	background: #fff;
	color: var(--savo-ink);
	font-size: 15px;
	font-weight: 500;
	white-space: nowrap;
	transition: border-color .18s ease, background .18s ease;
}

.savo .savo-sort__trigger-icon {
	width: 19px;
	height: 19px;
	color: var(--savo-accent);
}

.savo .savo-sort__chevron {
	width: 16px;
	height: 16px;
	margin-left: 2px;
	transition: transform .2s ease;
}

.savo .savo-sort__panel {
	position: absolute;
	z-index: 30;
	top: calc(100% + 8px);
	right: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 248px;
	padding: 8px;
	border: 1px solid var(--savo-border);
	border-radius: 16px;
	background: #fff;
	box-shadow: 0 14px 34px rgba(37, 35, 36, .12);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity .18s ease, transform .18s ease, visibility .18s;
}

/* Opens on hover, and on click for touch devices. */
.savo .savo-sort:hover .savo-sort__panel,
.savo .savo-sort:focus-within .savo-sort__panel,
.savo .savo-sort.is-open .savo-sort__panel {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.savo .savo-sort:hover .savo-sort__chevron,
.savo .savo-sort.is-open .savo-sort__chevron {
	transform: rotate(180deg);
}

.savo .savo-sort:hover .savo-sort__trigger,
.savo .savo-sort.is-open .savo-sort__trigger {
	border-color: var(--savo-accent);
}

.savo .savo-sort__option {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 40px;
	padding: 0 14px;
	border-radius: 11px;
	background: transparent;
	color: var(--savo-ink);
	font-size: 15px;
	font-weight: 500;
	white-space: nowrap;
	transition: background .16s ease, color .16s ease;
}

.savo .savo-sort__option:hover {
	background: var(--savo-soft-alt);
	color: var(--savo-ink);
}

.savo .savo-sort__option.is-active {
	background: var(--savo-accent);
	color: #fff;
}

.savo .savo-sort__icon {
	width: 19px;
	height: 19px;
	flex: none;
	color: var(--savo-accent);
}

.savo .savo-sort__option.is-active .savo-sort__icon {
	color: #fff;
}

/* Inline variant: every option is a pill sitting on one row. */
.savo .savo-sort--inline .savo-sort__panel {
	position: static;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 7px;
	min-width: 0;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
	opacity: 1;
	visibility: visible;
	transform: none;
}

.savo .savo-sort--inline .savo-sort__option {
	gap: 7px;
	min-height: 40px;
	padding: 0 12px;
	border: 1px solid var(--savo-border);
	border-radius: 20px;
	background: #fff;
	font-size: 14px;
	white-space: nowrap;
}

.savo .savo-sort--inline .savo-sort__option:hover {
	border-color: var(--savo-accent);
	background: var(--savo-soft-alt);
}

.savo .savo-sort--inline .savo-sort__option.is-active {
	border-color: var(--savo-accent);
	background: var(--savo-accent);
	color: #fff;
}

.savo .savo-sort--inline .savo-sort__icon {
	width: 17px;
	height: 17px;
}

/* ------------------------------------------------------------ Filters panel */

.savo.savo-filters {
	position: relative;
	background: var(--savo-panel);
	border: 1px solid var(--savo-border);
	border-radius: 18px;
	padding: 22px;
}

.savo .savo-filters__form {
	display: flex;
	flex-direction: column;
	gap: 18px;
	margin: 0;
}

.savo .savo-filters__head {
	display: flex;
	align-items: center;
	gap: 10px;
}

.savo .savo-filters__head-icon {
	width: 26px;
	height: 26px;
	color: var(--savo-ink);
}

.savo .savo-filters__title {
	margin: 0;
	font-size: 24px;
	font-weight: 700;
	line-height: 1.1;
	color: var(--savo-ink);
}

.savo .savo-filters__clear {
	margin-left: auto;
}

.savo .savo-filters__group {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.savo .savo-filters__label {
	font-size: 15px;
	font-weight: 600;
	color: var(--savo-ink);
}

.savo .savo-filters__group--active {
	border-top: 1px solid var(--savo-border);
	padding-top: 16px;
}

.savo .savo-filters__group--active.is-empty {
	display: none;
}

.savo .savo-filters__reset {
	justify-content: center;
}

.savo .savo-filters__close {
	position: absolute;
	top: 18px;
	right: 18px;
	z-index: 2;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--savo-soft-alt);
	color: var(--savo-ink);
	display: none;
	place-items: center;
}

.savo .savo-filters__close-icon {
	width: 16px;
	height: 16px;
}

/* Fields ------------------------------------------------------------------ */

.savo .savo-field {
	display: flex;
	align-items: center;
	gap: 10px;
	height: 36px;
	margin: 0;
	padding: 0 14px;
	background: #fff;
	border: 1px solid var(--savo-border);
	border-radius: var(--savo-radius-field);
}

.savo .savo-field__icon {
	width: 18px;
	height: 18px;
	color: var(--savo-ink);
}

.savo .savo-field .savo-field__input:not([type="button"]),
.savo .savo-toolbar__search .savo-field__input:not([type="button"]),
.savo .savo-field input:not([type="button"]) {
	flex: 1;
	width: 100%;
	min-width: 0;
	height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	font-size: 15px;
	line-height: normal;
	color: var(--savo-ink);
}

.savo .savo-field .savo-field__input::placeholder,
.savo .savo-field input:not([type="button"])::placeholder {
	color: #9B9B9B;
	opacity: 1;
}

.savo .savo-field--price {
	flex: 1;
	height: 34px;
	padding: 0 12px;
	gap: 6px;
	cursor: text;
}

.savo .savo-field__prefix {
	flex: none;
	font-size: 14px;
	color: var(--savo-muted);
}

.savo .savo-field__currency {
	flex: none;
	font-size: 14px;
	color: var(--savo-ink);
}

.savo .savo-field input[type="number"]::-webkit-outer-spin-button,
.savo .savo-field input[type="number"]::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.savo .savo-field input[type="number"] {
	-moz-appearance: textfield;
}

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

.savo .savo-range {
	position: relative;
	height: 20px;
	margin: 6px 10px 2px;
}

.savo .savo-range__track {
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	height: 6px;
	margin-top: -3px;
	border-radius: 3px;
	background: var(--savo-border);
}

.savo .savo-range__fill {
	position: absolute;
	top: 0;
	bottom: 0;
	border-radius: 3px;
	background: var(--savo-dark);
}

.savo .savo-range input.savo-range__input {
	-webkit-appearance: none;
	appearance: none;
	position: absolute;
	left: -10px;
	top: 0;
	width: calc(100% + 20px);
	height: 20px;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
	pointer-events: none;
	outline: 0;
}

.savo .savo-range input.savo-range__input::-webkit-slider-runnable-track {
	background: none;
	border: 0;
	height: 20px;
}

.savo .savo-range input.savo-range__input::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: #fff;
	border: 3px solid var(--savo-dark);
	cursor: grab;
	pointer-events: auto;
}

.savo .savo-range input.savo-range__input::-moz-range-thumb {
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: #fff;
	border: 3px solid var(--savo-dark);
	cursor: grab;
	pointer-events: auto;
}

.savo .savo-range input.savo-range__input::-moz-range-track {
	background: none;
	border: 0;
}

.savo .savo-range__fields {
	display: flex;
	gap: 15px;
}

/* Categories -------------------------------------------------------------- */

.savo .savo-cats {
	--savo-row-h: 36px;
	--savo-row-radius: 12px;
	--savo-cat-icon-size: 26px;
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.savo .savo-cat {
	--savo-row-bg: #FFFFFF;
}

.savo .savo-cat[hidden] {
	display: none;
}

.savo .savo-cat__label {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: var(--savo-row-h);
	margin: 0;
	padding: 0 12px;
	border-radius: var(--savo-row-radius);
	background: var(--savo-row-bg);
	cursor: pointer;
	transition: background .18s ease;
}

.savo .savo-cat__label:hover {
	background: var(--savo-soft-alt);
}

.savo .savo-cat__input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.savo .savo-cat__check {
	flex: none;
	width: 26px;
	height: 26px;
	border: 1.5px solid var(--savo-border);
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: #fff;
	color: transparent;
	transition: background .18s ease, color .18s ease, border-color .18s ease;
}

/* The design only shows the marker on the selected row; keep that available. */
.savo .savo-cats--check-selected .savo-cat__check {
	border-color: transparent;
	background: transparent;
}

.savo .savo-cat__label:hover .savo-cat__check {
	border-color: var(--savo-muted);
}

.savo .savo-cat__check-icon {
	width: 13px;
	height: 13px;
}

.savo .savo-cat.is-active .savo-cat__check,
.savo .savo-cats--check-selected .savo-cat.is-active .savo-cat__check {
	border-color: var(--savo-dark);
	background: var(--savo-dark);
	color: #fff;
}

.savo .savo-cat__icon {
	flex: none;
	width: var(--savo-cat-icon-size);
	height: var(--savo-cat-icon-size);
	display: grid;
	place-items: center;
	color: var(--savo-accent);
}

.savo .savo-cat__icon svg,
.savo .savo-cat__icon img {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: contain;
}

.savo .savo-cat__name {
	flex: 1;
	min-width: 0;
	font-size: 15px;
	font-weight: 500;
	color: var(--savo-ink);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.savo .savo-cat__count {
	flex: none;
	min-width: 45px;
	height: 26px;
	padding: 0 8px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 13px;
	background: var(--savo-pill);
	color: var(--savo-muted);
	font-size: 14px;
	font-weight: 500;
}

.savo .savo-cat.is-active .savo-cat__count {
	background: var(--savo-soft-alt);
}

.savo .savo-cats__more {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	align-self: flex-start;
	margin-top: 4px;
	background: none;
	color: var(--savo-accent);
	font-size: 15px;
	font-weight: 600;
}

.savo .savo-cats__more-icon {
	width: 15px;
	height: 15px;
	transition: transform .2s ease;
}

/* Chips ------------------------------------------------------------------- */

.savo .savo-chips {
	--savo-chip-h: 30px;
	--savo-chip-radius: 15px;
	display: flex;
	flex-wrap: wrap;
	gap: 11px;
}

.savo .savo-chip {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	height: var(--savo-chip-h);
	padding: 0 14px;
	border-radius: var(--savo-chip-radius);
	background: var(--savo-soft);
	color: var(--savo-ink);
	font-size: 14px;
	font-weight: 500;
}

.savo .savo-chip__remove {
	display: inline-grid;
	place-items: center;
	width: 16px;
	height: 16px;
	color: var(--savo-muted);
	transition: color .18s ease;
}

.savo .savo-chip__remove:hover {
	color: var(--savo-accent);
}

.savo .savo-chip__remove-icon {
	width: 12px;
	height: 12px;
}

.savo.savo-active {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
}

.savo.savo-active.is-empty {
	display: none;
}

.savo .savo-active__label {
	font-size: 14px;
	font-weight: 600;
	color: var(--savo-muted);
}

/* Buttons ----------------------------------------------------------------- */

.savo .savo-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	transition: filter .18s ease;
}

.savo .savo-btn--primary {
	width: 100%;
	min-height: 52px;
	padding: 0 22px;
	border-radius: 14px;
	background: var(--savo-accent);
	color: #fff;
	font-size: 17px;
	font-weight: 600;
}

.savo .savo-btn--primary:hover {
	filter: brightness(1.14);
	color: #fff;
}

.savo .savo-btn__icon {
	width: 20px;
	height: 20px;
}

/* --------------------------------------------------------------------- Grid */

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

.savo .savo-card {
	--savo-media-ratio: 1.66;
	position: relative;
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	background: var(--savo-card);
	border: 0;
	border-radius: 14px;
	overflow: hidden;
	transition: transform .25s ease, box-shadow .25s ease;
}

.savo.savo-grid-wrap--lift .savo-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 16px 38px rgba(37, 35, 36, .12);
}

.savo .savo-card__media {
	position: relative;
	display: block;
	aspect-ratio: var(--savo-media-ratio);
	background: var(--savo-soft-alt);
	overflow: hidden;
}

.savo .savo-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .6s ease;
}

.savo.savo-grid-wrap--lift .savo-card:hover .savo-card__img {
	transform: scale(1.05);
}

.savo .savo-card__placeholder {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	background: linear-gradient(180deg, #FCF8F9 0%, #F3EBEE 100%);
	color: #D2A9B8;
}

.savo .savo-card__placeholder-icon {
	width: 64px;
	height: 64px;
}

/* The heart and the eye share one column in the corner of the photo. */
.savo .savo-card__tools {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 2;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.savo .savo-card__wish,
.savo .savo-card__view {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: #fff;
	color: var(--savo-ink);
	display: grid;
	place-items: center;
	box-shadow: 0 2px 8px rgba(37, 35, 36, .14);
	transition: color .18s ease, transform .18s ease;
}

.savo .savo-card__wish:hover {
	transform: scale(1.08);
	background: #fff;
}

.savo .savo-card__wish-icon {
	width: 17px;
	height: 17px;
}

.savo .savo-card__wish.is-active {
	color: var(--savo-accent);
}

.savo .savo-card__wish.is-active .savo-card__wish-icon path {
	fill: currentColor;
}

.savo .savo-card__badge {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 2;
	height: 26px;
	padding: 0 12px;
	display: inline-flex;
	align-items: center;
	border-radius: 13px;
	background: var(--savo-accent);
	color: #fff;
	font-size: 12px;
	font-weight: 600;
}

.savo .savo-card__body {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 16px 18px 18px;
}

.savo .savo-card__cat {
	font-size: 13px;
	font-weight: 500;
	color: var(--savo-muted);
	line-height: 1.2;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.savo .savo-card__row {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
}

.savo .savo-card__text {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.savo .savo-card__title {
	--savo-title-lines: 2;
	margin: 0;
	font-size: 20px;
	font-weight: 500;
	line-height: 1.22;
	color: var(--savo-ink);
	/*
	 * `anywhere` also shrinks the column's min-content to a single letter, so
	 * the flex row squeezed the title until ordinary names broke mid-word
	 * ("Emeral d"). `break-word` keeps the longest word as the minimum and
	 * still breaks a genuinely unbreakable token like BANOFFE(ΣΟΚ.ΥΓΕΙΑΣ,ΠΡΑΛΙ.
	 */
	overflow-wrap: break-word;
	hyphens: none;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: var(--savo-title-lines);
	line-clamp: var(--savo-title-lines);
	overflow: hidden;
}

.savo .savo-card__title--unclamped {
	display: block;
	overflow: visible;
}

.savo .savo-card__title a {
	color: inherit;
}

.savo .savo-card__price {
	font-size: 21px;
	font-weight: 500;
	line-height: 1.1;
	color: var(--savo-ink);
}

.savo .savo-card__price del {
	opacity: .45;
	font-size: .75em;
	margin-right: 6px;
}

.savo .savo-card__price ins {
	text-decoration: none;
	background: none;
}

.savo .savo-card__cart {
	position: relative;
	z-index: 1;
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 40px;
	padding: 0 18px;
	border-radius: 12px;
	background: var(--savo-dark);
	color: #fff;
	font-size: 15px;
	font-weight: 500;
	white-space: nowrap;
	transition: filter .18s ease;
}

.savo .savo-card__cart:hover {
	filter: brightness(1.16);
	color: #fff;
}

.savo .savo-card__cart--ghost {
	background: var(--savo-soft-alt);
	color: var(--savo-ink);
}

.savo .savo-card__cart--ghost:hover {
	color: var(--savo-ink);
}

.savo .savo-card__cart-icon {
	width: 18px;
	height: 18px;
}

.savo .savo-card__cart.loading {
	opacity: .55;
	pointer-events: none;
}

.savo .added_to_cart {
	display: none;
}

.savo .savo-grid__empty {
	margin: 0;
	padding: 48px 24px;
	text-align: center;
	font-size: 16px;
	color: var(--savo-muted);
	background: var(--savo-card);
	border-radius: 14px;
}

/* Pagination -------------------------------------------------------------- */

.savo .savo-pagination {
	margin-top: 28px;
	display: flex;
	justify-content: center;
}

.savo .savo-pagination ul {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.savo .savo-pagination a,
.savo .savo-pagination span {
	display: inline-grid;
	place-items: center;
	min-width: 40px;
	height: 40px;
	padding: 0 12px;
	border-radius: 12px;
	background: var(--savo-card);
	color: var(--savo-ink);
	font-size: 15px;
	font-weight: 500;
	transition: background .18s ease, color .18s ease;
}

.savo .savo-pagination a:hover {
	background: var(--savo-soft-alt);
}

.savo .savo-pagination .current {
	background: var(--savo-dark);
	color: #fff;
}

/* Loading state ----------------------------------------------------------- */

.savo.savo-grid-wrap.is-loading {
	opacity: .45;
	pointer-events: none;
	transition: opacity .2s ease;
}

/* --------------------------------------------------------------- Responsive */

@media (max-width: 1024px) {
	.savo.savo-filters {
		position: fixed;
		z-index: 9999;
		top: 0;
		right: 0;
		bottom: 0;
		width: min(400px, 92vw);
		max-width: none;
		border-radius: 0;
		overflow-y: auto;
		transform: translateX(102%);
		transition: transform .32s cubic-bezier(.4, 0, .2, 1);
		box-shadow: -18px 0 46px rgba(37, 35, 36, .16);
	}

	body.savo-filters-open .savo.savo-filters {
		transform: none;
	}

	body.savo-filters-open::after {
		content: "";
		position: fixed;
		inset: 0;
		z-index: 9998;
		background: rgba(37, 35, 36, .38);
	}

	body.savo-filters-open {
		overflow: hidden;
	}

	.savo .savo-filters__close {
		display: grid;
	}

	.savo .savo-filters__head {
		padding-right: 42px;
	}
}

@media (min-width: 1025px) {
	.savo.savo-toolbar--filters-mobile .savo-toolbar__filters {
		display: none;
	}
}

/* The site's floating action buttons sit over the right edge on mid-size
   screens; keep the last sort pill clickable. */
@media (min-width: 1025px) and (max-width: 1520px) {
	.savo.savo-toolbar {
		padding-right: 64px;
	}
}

@media (max-width: 767px) {
	.savo.savo-toolbar {
		gap: 14px;
	}

	.savo .savo-toolbar__search {
		flex: 1 1 100%;
		max-width: none;
	}

	.savo .savo-toolbar__actions {
		width: 100%;
		margin-left: 0;
		gap: 12px;
	}

	.savo .savo-toolbar__orderby form {
		width: 100%;
	}

	.savo .savo-toolbar__orderby select:not([multiple]) {
		width: 100%;
		min-width: 0;
	}

	.savo .savo-card__row {
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
	}

	.savo .savo-card__cart {
		width: 100%;
	}
}

/* ------------------------------------------------- Sort sheet (mobile only)

   On a wide screen the sort options are pills on one row and the trigger is
   not needed. On a phone that row either wraps or turns into a sideways
   scroller nobody finds, so the trigger comes back and the options move into
   a bottom sheet - the same gesture as the filters drawer next to it. */

.savo .savo-sort__scrim,
.savo .savo-sort__sheet-head {
	display: none;
}

.savo .savo-sort--inline .savo-sort__trigger {
	display: none;
}

@media (max-width: 1024px) {
	/* Φίλτρα first, on the left, with the sort button beside it. */
	.savo .savo-toolbar__actions {
		width: 100%;
		margin-left: 0;
		justify-content: flex-start;
		gap: 10px;
	}

	.savo .savo-toolbar__actions .savo-sort--inline {
		flex: 0 0 auto;
	}

	.savo .savo-sort--inline .savo-sort__trigger {
		display: inline-flex;
		border-radius: 999px;
	}

	.savo .savo-toolbar__filters {
		order: -1;
		margin-right: auto;
	}

	.savo .savo-toolbar__divider {
		display: none;
	}

	/* ---------------------------------------------------------- the sheet */

	.savo .savo-sort__scrim {
		position: fixed;
		inset: 0;
		z-index: 9998;
		display: block;
		background: rgba(37, 35, 36, .38);
		opacity: 0;
		visibility: hidden;
		transition: opacity .24s ease, visibility .24s;
	}

	.savo .savo-sort.is-open .savo-sort__scrim {
		opacity: 1;
		visibility: visible;
	}

	.savo .savo-sort--inline .savo-sort__panel,
	.savo .savo-sort .savo-sort__panel {
		position: fixed;
		z-index: 9999;
		top: auto;
		right: 0;
		bottom: 0;
		left: 0;
		display: flex;
		flex-direction: column;
		flex-wrap: nowrap;
		justify-content: flex-start;
		gap: 8px;
		width: 100%;
		min-width: 0;
		max-height: 78vh;
		padding: 0 16px calc(20px + env(safe-area-inset-bottom, 0px));
		overflow-y: auto;
		border: 0;
		border-radius: 22px 22px 0 0;
		background: var(--savo-panel, #fff);
		box-shadow: 0 -18px 44px rgba(37, 35, 36, .18);
		opacity: 0;
		visibility: hidden;
		transform: translateY(101%);
		transition: transform .3s cubic-bezier(.22, .61, .36, 1), opacity .2s ease, visibility .3s;
	}

	/* Hover must not open a sheet; only an explicit tap does. */
	.savo .savo-sort:hover .savo-sort__panel,
	.savo .savo-sort:focus-within .savo-sort__panel {
		opacity: 0;
		visibility: hidden;
		transform: translateY(101%);
	}

	.savo .savo-sort.is-open .savo-sort__panel {
		opacity: 1;
		visibility: visible;
		transform: none;
	}

	.savo .savo-sort__sheet-head {
		position: sticky;
		top: 0;
		z-index: 1;
		display: grid;
		grid-template-columns: 1fr auto;
		align-items: center;
		gap: 12px;
		padding: 14px 0 12px;
		background: var(--savo-panel, #fff);
	}

	.savo .savo-sort__handle {
		position: absolute;
		top: 7px;
		left: 50%;
		width: 42px;
		height: 4px;
		transform: translateX(-50%);
		border-radius: 2px;
		background: var(--savo-border);
	}

	.savo .savo-sort__sheet-title {
		font-size: 17px;
		font-weight: 600;
		color: var(--savo-ink);
	}

	.savo .savo-sort__sheet-close {
		display: grid;
		place-items: center;
		width: 34px;
		height: 34px;
		padding: 0;
		border: 0;
		border-radius: 50%;
		background: var(--savo-pill);
		color: var(--savo-ink);
	}

	.savo .savo-sort__sheet-close-icon {
		width: 17px;
		height: 17px;
	}

	/* Full-width rows read better than pills inside a sheet. */
	.savo .savo-sort--inline .savo-sort__option,
	.savo .savo-sort .savo-sort__option {
		justify-content: flex-start;
		gap: 12px;
		width: 100%;
		min-height: 52px;
		padding: 0 16px;
		border: 1px solid var(--savo-border);
		border-radius: 14px;
		background: #fff;
		font-size: 15px;
		white-space: normal;
	}

	body.savo-sort-open {
		overflow: hidden;
	}
}

@media (prefers-reduced-motion: reduce) {
	.savo .savo-sort__panel,
	.savo .savo-sort__scrim {
		transition-duration: .01ms;
	}
}

/* ---------------------------------------------- WooCommerce's own leftovers

   After an AJAX add, WooCommerce appends a "View cart" link beside the button.
   This shop already answers an add with the drawer and the bottom bar, so the
   link is both redundant and in English, and it pushed the card's row apart. */

.savo .savo-card .added_to_cart,
.savo .savo-card__cart + .added_to_cart {
	display: none !important;
}

/* ------------------------------------------------------------ view button */

.savo .savo-card__view {
	border: 0;
	text-decoration: none;
}

.savo .savo-card__view:hover,
.savo .savo-card__view:focus-visible {
	color: var(--savo-accent);
	transform: scale(1.06);
}

.savo .savo-card__tool-icon {
	width: 18px;
	height: 18px;
}

/* The cart control is a <button> for AJAX-capable products (see the grid
   widget), so the kit's bare-button rules have to be cleared the same way the
   anchor never needed. */
.savo button.savo-card__cart,
.savo a.savo-card__cart {
	border: 0;
	box-shadow: none;
	text-shadow: none;
	font-family: inherit;
	text-transform: none;
	letter-spacing: normal;
	cursor: pointer;
}