/**
 * Beers and breweries archives (Elementor archive templates 1678 and 1660,
 * Figma Beers Landing 15:433): the title and search, the filter column with
 * its collapsible groups, the chips of the chosen filters next to the result
 * count and the sorting, and the grid. On tablets and phones (Beers Landing -
 * Mobile 848:17484) the groups and the sorting are in a full-screen sheet
 * instead (Filters - Mobile 859:9846), opened by the "Φίλτρα" button. The
 * JetSmartFilters widgets keep their markup; only their look changes here.
 * Collapsing the groups and the sheet in custom.js.
 *
 * Also beyond the two archives: Yoast's breadcrumb (every page), the
 * pagination (with the producer archive 1702) and the single beer and
 * brewery titles on phones.
 *
 * Loaded on every front-end request, including the Elementor preview.
 */

/* --- Layout ------------------------------------------------------------- */

/* Yoast's breadcrumb is a paragraph, which the kit gives a bottom margin. */
.tgbp-archive-breadcrumb #breadcrumbs {
	margin: 0;
}

/* Every page with Yoast's breadcrumb (archives, single beers and breweries):
   Figma's chevron instead of the separator's text (tgbp_breadcrumb_separator()
   in functions.php). With the spaces around it, 8px on each side. */
.tgbp-breadcrumb-sep {
	display: inline-block;
	width: 14px;
	height: 14px;
	margin: 0 4px;
	overflow: hidden;
	background: url("../img/archive/chevron-right.svg") center / 14px no-repeat;
	font-size: 0;
	vertical-align: -1px;
}

/* Tablets and phones: one line (long brewery and producer names), which
   scrolls sideways from one edge of the screen to the other (the page's side
   padding), like the chips. The widget takes the whole row, so it doesn't
   grow with the line. */
@media (max-width: 1024px) {
	.e-con > .elementor-widget.elementor-widget-breadcrumbs {
		flex: 1 1 100%;
		min-width: 0;
		max-width: 100%;
	}

	.elementor-widget-breadcrumbs #breadcrumbs {
		margin-inline: calc(-1 * var(--tgbp-breadcrumb-gutter, 40px));
		padding-inline: var(--tgbp-breadcrumb-gutter, 40px);
		overflow-x: auto;
		white-space: nowrap;
		scrollbar-width: none;
	}

	.elementor-widget-breadcrumbs #breadcrumbs::-webkit-scrollbar {
		display: none;
	}
}

@media (max-width: 767px) {
	.elementor-widget-breadcrumbs {
		--tgbp-breadcrumb-gutter: 20px;
	}
}

/* Single brewery (179) and beer (126) titles. The kit's "Title MD 80" has no
   phone size; Figma's phone beer page (848:17224) sets it at 60/54, where
   "Μικροζυθοποιία" and "Μονοποικιλιακή" fit the line. A word still longer than
   the line (narrow phones) breaks instead of making the page wider than the
   screen; other words wrap as before. As strong as Elementor's own rule for
   the title (0,4,0), which comes first. */
.elementor-179 .elementor-element.elementor-element-f4b5e95 .elementor-heading-title,
.elementor-126 .elementor-element.elementor-element-d905832 .elementor-heading-title {
	overflow-wrap: anywhere;
}

@media (max-width: 767px) {
	.elementor-179 .elementor-element.elementor-element-f4b5e95 .elementor-heading-title,
	.elementor-126 .elementor-element.elementor-element-d905832 .elementor-heading-title {
		font-size: 60px;
		line-height: 54px;
	}
}

/* Desktop: the filter column on the left, level with the search ("Φίλτρα")
   and the chips row (the groups), the rest on the right. */
@media (min-width: 1025px) {
	.tgbp-archive.e-con > .e-con-inner {
		display: grid;
		grid-template-columns: 230px minmax(0, 1fr);
		grid-template-areas:
			".       title"
			"fhead   search"
			"filters toolbar"
			"filters grid"
			"filters pagination"
			"filters .";
		grid-template-rows: auto auto auto auto auto 1fr;
		column-gap: 32px;
		row-gap: 0;
		align-items: start;
	}

	.tgbp-archive__title {
		grid-area: title;
	}

	/* The column stays in view while the results scroll: "Φίλτρα" with
	   "Καθαρισμός" sticks 24px from the top of the screen, the groups under
	   it, until the end of the listing. Its area runs from the search's row to
	   the end (overlapping the groups' area), so it sticks that far; level with
	   the search by the same top margin. The groups scroll on their own when
	   taller than the screen, and slide under the heading at the very end.
	   Lower while the header shows (header.css). */
	.tgbp-archive__filters-head.e-con {
		grid-area: 2 / 1 / -1 / 2;
		align-self: start;
		position: sticky;
		top: calc(24px + var(--tgbp-header-offset, 0px));
		transition: top 0.3s ease;
		z-index: 1;
		min-height: 56px;
		margin-top: 24px;
		background: #fff;
	}

	.tgbp-archive__search {
		grid-area: search;
		margin-top: 24px;
	}

	/* Side padding: room for the boxes' focus outline inside the scrolling. */
	.tgbp-archive__filters.e-con {
		grid-area: filters;
		position: sticky;
		top: calc(96px + var(--tgbp-header-offset, 0px));
		max-height: calc(100vh - 120px - var(--tgbp-header-offset, 0px));
		transition: top 0.3s ease, max-height 0.3s ease;
		margin: 45px -4px 0;
		padding: 0 4px;
		overflow-y: auto;
		scrollbar-width: thin;
		scrollbar-color: #d6d6d6 transparent;
	}

	.tgbp-archive__toolbar.e-con {
		grid-area: toolbar;
		margin-top: 48px;
	}

	.tgbp-archive__grid {
		grid-area: grid;
		margin-top: 48px;
	}

	.tgbp-archive__pagination {
		grid-area: pagination;
	}

	/* The sheet's button and the sheet: tablets and phones only. */
	.tgbp-archive__open,
	.tgbp-archive__sheet.e-con {
		display: none;
	}
}

/* Tablets and phones: one column, without the filter column (its groups are
   in the sheet). The "Φίλτρα" button and the count in a row, the chips under
   them; the sorting is in the sheet too. */
@media (max-width: 1024px) {
	.tgbp-archive.e-con > .e-con-inner {
		display: flex;
		flex-direction: column;
		gap: 0;
	}

	.tgbp-archive__filters-head.e-con,
	.tgbp-archive__filters.e-con,
	.tgbp-archive__sort {
		display: none;
	}

	.tgbp-archive__search {
		margin-top: 24px;
	}

	.tgbp-archive__toolbar.e-con {
		margin-top: 24px;
		row-gap: 18px;
	}

	.tgbp-archive__count.e-con {
		order: 1;
		margin-inline-start: auto;
	}

	.tgbp-archive__chips {
		order: 2;
		flex: 1 0 100%;
		min-width: 0;
	}

	.tgbp-archive__grid {
		margin-top: 24px;
	}
}

@media (max-width: 767px) {
	.tgbp-archive__search .jet-search-filter {
		height: 50px;
	}

	.tgbp-archive__search .jet-search-filter__input.jet-search-filter__input {
		height: 48px;
	}

	.tgbp-archive__search .jet-search-filter__submit.jet-search-filter__submit {
		width: 42px;
		height: 42px;
		margin-inline-end: 8px;
		background-size: 20px;
	}
}

/* --- "Φίλτρα" and "Καθαρισμός" ------------------------------------------ */

.tgbp-archive__filters-head.e-con {
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}

.tgbp-archive__filters-head .elementor-heading-title {
	color: #000;
}

/* Class names doubled: the kit and the theme style every button. The widget
   class: to win over the widget's own styles. */
.tgbp-archive .elementor-widget-jet-smart-filters-remove-filters .jet-remove-all-filters__button.jet-remove-all-filters__button {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	color: #000;
	font-family: "Roboto", sans-serif;
	font-size: 15px;
	font-weight: 400;
	line-height: 20px;
	text-transform: none;
	cursor: pointer;
}

.tgbp-archive .elementor-widget-jet-smart-filters-remove-filters .jet-remove-all-filters__button.jet-remove-all-filters__button:is(:hover, :focus, :active) {
	background: none;
	color: #000;
}

.tgbp-archive .elementor-widget-jet-smart-filters-remove-filters .jet-remove-all-filters__button.jet-remove-all-filters__button:hover {
	text-decoration: underline;
}

.tgbp-archive .elementor-widget-jet-smart-filters-remove-filters .jet-remove-all-filters__button.jet-remove-all-filters__button:focus-visible {
	outline: 2px solid #000;
	outline-offset: 2px;
}

.tgbp-archive .elementor-widget-jet-smart-filters-remove-filters .jet-remove-all-filters__button::before {
	content: "";
	flex: none;
	width: 20px;
	height: 20px;
	background: url("../img/archive/refresh.svg") center / 20px no-repeat;
}

/* --- Search ------------------------------------------------------------- */

/* Like the header search: the magnifier on the left, an italic placeholder. */
.tgbp-archive__search .jet-search-filter {
	display: flex;
	align-items: center;
	height: 56px;
	padding: 0 24px 0 8px;
	border: 1px solid #d2d6db;
	border-radius: 50px;
	background: #fff;
	box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05), 0 3px 10px 4px rgba(152, 162, 179, 0.14);
	transition: border-color 0.2s;
}

.tgbp-archive__search .jet-search-filter:focus-within {
	border-color: #98a2b3;
}

.tgbp-archive__search .jet-search-filter__input-wrapper {
	order: 2;
	flex: 1;
	min-width: 0;
}

.tgbp-archive__search .jet-search-filter__input.jet-search-filter__input {
	transition: none;
	width: 100%;
	height: 54px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	outline: none;
	background: none;
	box-shadow: none;
	color: #000;
	font-family: "Roboto", sans-serif;
	font-size: 17px;
	font-weight: 400;
	line-height: 24px;
	text-overflow: ellipsis;
}

.tgbp-archive__search .jet-search-filter__input::placeholder {
	color: #5b5b5b;
	font-style: italic;
	opacity: 1;
}

.tgbp-archive__search .jet-search-filter__submit.jet-search-filter__submit {
	order: 1;
	flex: none;
	width: 56px;
	height: 54px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: url("../img/archive/search.svg") center / 24px no-repeat;
	box-shadow: none;
	cursor: pointer;
}

.tgbp-archive__search .jet-search-filter__submit.jet-search-filter__submit:is(:hover, :focus, :active) {
	background-color: transparent;
}

.tgbp-archive__search .jet-search-filter__submit.jet-search-filter__submit:focus-visible {
	outline: 2px solid #000;
	outline-offset: -6px;
}

.tgbp-archive__search .jet-search-filter__submit-text {
	display: none;
}

/* --- Chips, result count, sorting --------------------------------------- */

/* JetSmartFilters' own styles load after this file, Elementor's before it:
   these selectors outrank the first and match the second. */

.tgbp-archive__toolbar.e-con {
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 16px;
	min-height: 44px;
}

.tgbp-archive__sort {
	margin-inline-start: auto;
}

.tgbp-archive .tgbp-archive__chips .jet-active-tags__list {
	flex-wrap: wrap;
	gap: 8px;
}

.tgbp-archive .tgbp-archive__chips .jet-active-tag {
	align-items: center;
	gap: 4px;
	margin: 0;
	padding: 7px 11px 7px 13px;
	border: 1px solid rgba(0, 0, 0, 0.06);
	border-radius: 50px;
	background: rgba(0, 0, 0, 0.06);
	box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
	color: #000;
	font-family: "Roboto", sans-serif;
	font-size: 15px;
	font-weight: 400;
	line-height: 20px;
	transition: background-color 0.2s;
}

.tgbp-archive .tgbp-archive__chips .jet-active-tag:hover {
	background: rgba(0, 0, 0, 0.1);
}

.tgbp-archive .tgbp-archive__chips .jet-active-tag:focus-visible {
	outline: 2px solid #000;
	outline-offset: 2px;
}

/* The filter's name isn't shown, only the value. */
.tgbp-archive .tgbp-archive__chips .jet-active-tag .jet-active-tag__label {
	display: none;
}

.tgbp-archive .tgbp-archive__chips .jet-active-tag .jet-active-tag__remove {
	position: static;
	flex: none;
	width: 20px;
	height: 20px;
	overflow: hidden;
	background: url("../img/archive/close.svg") center / 20px no-repeat;
	color: transparent;
	font-size: 0;
}

/* Tablets and phones: one row that scrolls sideways, from one edge of the
   screen to the other (the archive's side padding). */
@media (max-width: 1024px) {
	.tgbp-archive .tgbp-archive__chips .jet-active-tags__list {
		flex-wrap: nowrap;
		margin-inline: calc(-1 * var(--tgbp-archive-gutter, 40px));
		padding-inline: var(--tgbp-archive-gutter, 40px);
		overflow-x: auto;
		scrollbar-width: none;
	}

	.tgbp-archive .tgbp-archive__chips .jet-active-tags__list::-webkit-scrollbar {
		display: none;
	}

	.tgbp-archive .tgbp-archive__chips .jet-active-tag {
		flex: none;
		white-space: nowrap;
	}
}

@media (max-width: 767px) {
	.tgbp-archive .tgbp-archive__chips {
		--tgbp-archive-gutter: 20px;
	}
}

.tgbp-archive__count.e-con {
	--width: auto;
	flex: none;
}

.tgbp-archive__count .elementor-heading-title {
	color: #000;
	white-space: nowrap;
}

/* Its right margin spaces it from the sorting, which is in the sheet here. */
@media (max-width: 1024px) {
	.tgbp-archive .tgbp-archive__count .elementor-widget:last-child > .elementor-widget-container {
		margin-inline-end: 0;
	}
}

/* Phones: "24 από 1379", without "Αποτελέσματα" (it's text after the number,
   which only CSS can't pick out: the heading's text is hidden, the number not). */
@media (max-width: 767px) {
	.tgbp-archive .tgbp-archive__count .elementor-widget:last-child .elementor-heading-title {
		font-size: 0;
		line-height: 0;
	}

	.tgbp-archive .tgbp-archive__count .elementor-widget:last-child .jet-engine-query-count {
		display: block;
		font-size: 15px;
		line-height: 23px;
	}
}

.tgbp-archive__sort .jet-sorting-select,
.tgbp-sheet__sort .jet-sorting-select,
.tgbp-sort .jet-sorting-select {
	height: 44px;
	padding: 0 40px 0 14px;
	box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
	background: #fff url("../img/archive/select-chevron.svg") right 14px center / 20px no-repeat;
	color: #000;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

/* Next to the count, the box fits the chosen sorting (custom.js sets its
   width), at least Figma's 211px: the longer labels, like "Ανά βαθμούς
   αλκοόλ (ABV): (υψηλότερο-χαμηλότερο)", were cut. */
.elementor-element.elementor-widget.tgbp-archive__sort.tgbp-archive__sort,
.elementor-element.elementor-widget.tgbp-sort.tgbp-sort {
	--container-widget-width: auto;
	width: auto;
	max-width: 100%;
}

.tgbp-archive__sort .jet-sorting-select {
	width: 211px;
	min-width: 211px;
	max-width: 100%;
}

/* The kit's custom CSS draws a chevron of its own on every sorting. */
.tgbp-archive__sort .jet-sorting::after,
.tgbp-sheet__sort .jet-sorting::after,
.tgbp-sort .jet-sorting::after {
	content: none;
}

/* Single brewery (179): each beer list's sorting on the right of its heading
   (Figma Frame 57, 137:6077), 40px high and at least Figma's 193px wide, also
   fitted to the chosen label. On phones it's under the heading, full width
   (custom.js leaves the width alone there). */
.tgbp-sort .jet-sorting-select {
	height: 40px;
	width: 193px;
	min-width: 193px;
	max-width: 100%;
}

@media (max-width: 767px) {
	.elementor-element.elementor-widget.tgbp-sort.tgbp-sort,
	.tgbp-sort .jet-sorting-select {
		width: 100%;
	}
}

/* Its heading is 48/52 in Figma (the kit's title is 48/56). As strong as
   Elementor's global typography rule for the heading (0,4,0), which comes
   first. */
.tgbp-brewer-list__head.tgbp-brewer-list__head.tgbp-brewer-list__head .elementor-heading-title {
	line-height: 52px;
}

/* "Φόρτωση περισσότερων": 24px below the cards. On the link, which JetEngine
   hides (display: none) once every beer is shown, so the space goes with it
   and the cards end 48px above the next section's line, as in Figma. */
.tgbp-brewer-list__more .elementor-button {
	margin-top: 24px;
}

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

/* Each group: an uppercase heading with a chevron and a grey line above,
   which opens and closes it (custom.js). Open at first: the groups with a
   choice, or the first one when there's none (before custom.js takes over,
   the same rule in CSS). */
.tgbp-filter .jet-filter-label {
	margin: 0;
	padding: 0;
	border-top: 1px solid #d6d6d6;
}

.tgbp-filter__toggle.tgbp-filter__toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	width: 100%;
	margin: 0;
	padding: 10px 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	color: #000;
	font-family: "Roboto Mono", monospace;
	font-size: 14px;
	font-weight: 700;
	line-height: 24px;
	letter-spacing: 0.04em;
	text-align: start;
	text-transform: uppercase;
	cursor: pointer;
}

.tgbp-filter__toggle.tgbp-filter__toggle:is(:hover, :focus, :active) {
	background: none;
	color: #000;
}

.tgbp-filter__toggle.tgbp-filter__toggle:focus-visible {
	outline: 2px solid #000;
	outline-offset: -2px;
}

.tgbp-filter__toggle::after {
	content: "";
	flex: none;
	width: 20px;
	height: 20px;
	background: url("../img/archive/chevron-down.svg") center / 20px no-repeat;
	transition: transform 0.2s;
}

.tgbp-filter.is-open .tgbp-filter__toggle::after {
	transform: rotate(180deg);
}

/* Until custom.js has made the heading a button. */
.tgbp-filter .jet-filter-label:not(:has(.tgbp-filter__toggle)) {
	padding: 10px 0;
	font-family: "Roboto Mono", monospace;
	font-size: 14px;
	font-weight: 700;
	line-height: 24px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.tgbp-filter .jet-checkboxes-list,
.tgbp-filter .jet-radio-list {
	display: none;
	margin-top: 4px;
	padding-bottom: 10px;
}

/* JetSmartFilters renders the radios' "Όλες" as value "all", then makes it "". */
.tgbp-filter.is-open .jet-checkboxes-list,
.tgbp-filter.is-open .jet-radio-list,
.tgbp-filter-groups:not(.is-ready) .tgbp-filter:has(input:checked:not([value="all"], [value=""])) :is(.jet-checkboxes-list, .jet-radio-list),
.tgbp-filter-groups:not(.is-ready):not(:has(input:checked:not([value="all"], [value=""]))) .tgbp-filter:first-child :is(.jet-checkboxes-list, .jet-radio-list) {
	display: block;
}

.tgbp-filter .jet-checkboxes-list-wrapper,
.tgbp-filter .jet-radio-list-wrapper fieldset {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0;
	padding: 0;
	border: 0;
}

.tgbp-filter .jet-radio-list-wrapper {
	margin: 0;
}

.tgbp-filter .jet-filter-row.jet-filter-row {
	margin: 0;
	padding: 0;
}

.tgbp-filter .jet-checkboxes-list .jet-checkboxes-list__item,
.tgbp-filter .jet-radio-list .jet-radio-list__item {
	align-items: flex-start;
}

.tgbp-filter .jet-checkboxes-list .jet-checkboxes-list__item .jet-checkboxes-list__button,
.tgbp-filter .jet-radio-list .jet-radio-list__item .jet-radio-list__button {
	align-items: flex-start;
	gap: 8px;
}

.tgbp-filter .jet-checkboxes-list .jet-checkboxes-list__item .jet-checkboxes-list__label,
.tgbp-filter .jet-radio-list .jet-radio-list__item .jet-radio-list__label {
	align-self: auto;
	color: #000;
	font-family: "Roboto", sans-serif;
	font-size: 15px;
	font-weight: 400;
	line-height: 18px;
}

/* The real inputs stay focusable (JetSmartFilters hides them), invisible;
   the box or circle next to the label shows their state and focus. */
.tgbp-filter .jet-checkboxes-list .jet-checkboxes-list__item .jet-checkboxes-list__input,
.tgbp-filter .jet-radio-list .jet-radio-list__item .jet-radio-list__input {
	display: block;
	visibility: visible;
	position: absolute;
	top: 2px;
	left: 0;
	width: 16px;
	height: 16px;
	margin: 0;
	opacity: 0;
	pointer-events: none;
}

.tgbp-filter .jet-checkboxes-list .jet-checkboxes-list__item .jet-checkboxes-list__decorator,
.tgbp-filter .jet-radio-list .jet-radio-list__item .jet-radio-list__decorator {
	box-sizing: border-box;
	width: 16px;
	height: 16px;
	min-width: 16px;
	min-height: 16px;
	margin: 2px 0 0;
	border: 1px solid #d6d6d6;
	border-radius: 4px;
	background: #fff;
	transition: background-color 0.15s, border-color 0.15s;
}

.tgbp-filter .jet-radio-list .jet-radio-list__item .jet-radio-list__decorator {
	border-radius: 50%;
}

.tgbp-filter .jet-checkboxes-list__item:hover .jet-checkboxes-list__decorator,
.tgbp-filter .jet-radio-list__item:hover .jet-radio-list__decorator {
	border-color: #000;
}

.tgbp-filter .jet-checkboxes-list .jet-checkboxes-list__item .jet-checkboxes-list__input:checked + .jet-checkboxes-list__button .jet-checkboxes-list__decorator,
.tgbp-filter .jet-radio-list .jet-radio-list__item .jet-radio-list__input:checked + .jet-radio-list__button .jet-radio-list__decorator {
	border-color: #000;
	background: #000;
}

.tgbp-filter .jet-checkboxes-list__input:focus-visible + .jet-checkboxes-list__button .jet-checkboxes-list__decorator,
.tgbp-filter .jet-radio-list__input:focus-visible + .jet-radio-list__button .jet-radio-list__decorator {
	outline: 2px solid #000;
	outline-offset: 2px;
}

/* The tick (Figma's 12px check) and the radio's white dot. */
.tgbp-filter .jet-checkboxes-list .jet-checkboxes-list__item .jet-checkboxes-list__checked-icon {
	width: 12px;
	height: 12px;
	background: url("../img/archive/check.svg") center / 12px no-repeat;
}

.tgbp-filter .jet-radio-list .jet-radio-list__item .jet-radio-list__checked-icon {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #fff;
}

.tgbp-filter .jet-checkboxes-list__checked-icon svg,
.tgbp-filter .jet-radio-list__checked-icon svg {
	display: none;
}

/* "Δες περισσότερα" after 8 options. */
.tgbp-filter .jet-filter-items-moreless {
	padding-top: 12px;
}

.tgbp-filter .jet-filter-items-moreless__toggle {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding-bottom: 4px;
	color: #000;
	font-family: "Roboto", sans-serif;
	font-size: 15px;
	font-weight: 700;
	line-height: 20px;
}

.tgbp-filter .jet-filter-items-moreless__toggle::after {
	content: "";
	width: 20px;
	height: 20px;
	background: url("../img/archive/chevron-down.svg") center / 20px no-repeat;
}

.tgbp-filter .jet-filter-items-moreless__toggle.jet-less-btn::after {
	transform: rotate(180deg);
}

.tgbp-filter .jet-filter-items-moreless__toggle:hover {
	text-decoration: underline;
}

.tgbp-filter .jet-filter-items-moreless__toggle:focus-visible,
.tgbp-filter .jet-filter-items-moreless:focus-visible {
	outline: 2px solid #000;
	outline-offset: 2px;
}

/* Long lists (Τύπος μπίρας, Χρώμα, Οι άνθρωποι): with all the options shown,
   a search above them, and they scroll (max-height set by the widget). */
.tgbp-filter .jet-filter-items-search {
	display: none;
	margin: 0 0 12px;
}

.tgbp-filter .jet-checkboxes-list:has(.jet-less-btn) .jet-filter-items-search {
	display: block;
}

.tgbp-filter .jet-filter-items-search__input.jet-filter-items-search__input {
	transition: none;
	height: 36px;
	margin: 0;
	padding: 0 32px 0 12px;
	border: 1px solid #d6d6d6;
	border-radius: 8px;
	background: #fff;
	box-shadow: none;
	color: #000;
	font-family: "Roboto", sans-serif;
	font-size: 15px;
	line-height: 20px;
}

.tgbp-filter .jet-filter-items-search__input.jet-filter-items-search__input:focus {
	border-color: #000;
	outline: none;
}

.tgbp-filter .jet-filter-items-search__clear {
	right: 6px;
	font-size: 12px;
}

/* The padding leaves room for the boxes' focus outline. */
.tgbp-filter .jet-filter-items-scroll {
	margin: -4px;
	padding: 4px;
	scrollbar-width: thin;
	scrollbar-color: #d6d6d6 transparent;
}

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

/* Beers, breweries and producer archives (.tgbp-pagination, set by the
   2026-10-28 migration): "← Προηγούμενη" on the left, greyed out on the first
   page, the pages in the middle with the current one in a black circle, and
   "Επόμενη →" on the right, under a grey line. JetSmartFilters renders it in
   script: prev/next are links with .prev-next, the inactive one [disabled].
   Class doubled: Elementor still writes the widget's default gaps and
   padding (its controls' defaults), with selectors of (0,4,0). */
.tgbp-pagination {
	padding-top: 20px;
	border-top: 1px solid #d0d5dd;
}

/* A single page of results: no pagination, so no line either. */
.tgbp-pagination:not(:has(.jet-filters-pagination__item)) {
	padding-top: 0;
	border-top: 0;
}

.tgbp-pagination.tgbp-pagination .jet-smart-filters-pagination .jet-filters-pagination {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 2px;
}

.tgbp-pagination.tgbp-pagination .jet-smart-filters-pagination .jet-filters-pagination .jet-filters-pagination__item {
	margin: 0;
	padding: 0;
	border: 0;
	text-decoration: none;
}

.tgbp-pagination.tgbp-pagination .jet-smart-filters-pagination .jet-filters-pagination .jet-filters-pagination__link,
.tgbp-pagination.tgbp-pagination .jet-smart-filters-pagination .jet-filters-pagination .jet-filters-pagination__dots {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-width: 40px;
	height: 40px;
	padding: 0 8px;
	border: 0;
	border-radius: 8px;
	background: none;
	color: #000;
	font-family: "Roboto", sans-serif;
	font-size: 17px;
	font-weight: 400;
	line-height: 24px;
	transition: background-color 0.15s;
}

.tgbp-pagination.tgbp-pagination .jet-smart-filters-pagination .jet-filters-pagination a.jet-filters-pagination__item:not(.prev-next):hover .jet-filters-pagination__link {
	background: #f2f4f7;
}

.tgbp-pagination.tgbp-pagination .jet-smart-filters-pagination .jet-filters-pagination a.jet-filters-pagination__item:focus-visible {
	outline: none;
}

.tgbp-pagination.tgbp-pagination .jet-smart-filters-pagination .jet-filters-pagination a.jet-filters-pagination__item:focus-visible .jet-filters-pagination__link {
	outline: 2px solid #000;
	outline-offset: 2px;
}

.tgbp-pagination.tgbp-pagination .jet-smart-filters-pagination .jet-filters-pagination .jet-filters-pagination__current .jet-filters-pagination__link {
	border-radius: 20px;
	background: #000;
	color: #fff;
}

/* Figma's "..." in Roboto Mono, in place of JetSmartFilters' "…". */
.tgbp-pagination.tgbp-pagination .jet-smart-filters-pagination .jet-filters-pagination .jet-filters-pagination__dots {
	font-size: 0;
}

.tgbp-pagination.tgbp-pagination .jet-smart-filters-pagination .jet-filters-pagination .jet-filters-pagination__dots::before {
	content: "...";
	color: #475467;
	font-family: "Roboto Mono", monospace;
	font-size: 16px;
	letter-spacing: 0.02em;
}

/* Prev and next take the same room on either side, so the pages stay in
   the middle. */
.tgbp-pagination.tgbp-pagination .jet-smart-filters-pagination .jet-filters-pagination .jet-filters-pagination__item.prev-next {
	display: flex;
	flex: 1 0 0;
	min-width: max-content;
}

.tgbp-pagination.tgbp-pagination .jet-smart-filters-pagination .jet-filters-pagination .jet-filters-pagination__item.next {
	justify-content: flex-end;
}

.tgbp-pagination.tgbp-pagination .jet-smart-filters-pagination .jet-filters-pagination .prev-next .jet-filters-pagination__link {
	gap: 6px;
	min-width: 0;
	padding: 0;
	white-space: nowrap;
}

.tgbp-pagination.tgbp-pagination .jet-smart-filters-pagination .jet-filters-pagination .prev-next .jet-filters-pagination__link::before,
.tgbp-pagination.tgbp-pagination .jet-smart-filters-pagination .jet-filters-pagination .prev-next .jet-filters-pagination__link::after {
	flex: none;
	width: 20px;
	height: 20px;
	background-color: currentColor;
	-webkit-mask: url("../img/archive/arrow-right.svg") center / 20px no-repeat;
	mask: url("../img/archive/arrow-right.svg") center / 20px no-repeat;
}

.tgbp-pagination.tgbp-pagination .jet-smart-filters-pagination .jet-filters-pagination .prev .jet-filters-pagination__link::before {
	content: "";
	transform: scaleX(-1);
}

.tgbp-pagination.tgbp-pagination .jet-smart-filters-pagination .jet-filters-pagination .next .jet-filters-pagination__link::after {
	content: "";
}

.tgbp-pagination.tgbp-pagination .jet-smart-filters-pagination .jet-filters-pagination a.prev-next:not([disabled]):hover .jet-filters-pagination__link {
	text-decoration: underline;
}

.tgbp-pagination.tgbp-pagination .jet-smart-filters-pagination .jet-filters-pagination .prev-next[disabled] {
	pointer-events: none;
}

.tgbp-pagination.tgbp-pagination .jet-smart-filters-pagination .jet-filters-pagination .prev-next[disabled] .jet-filters-pagination__link {
	color: #98a2b3;
}

/* Phones: arrows without their text, smaller pages, and fewer of them: by
   the "...", only the first and last pages and those next to the current
   one stay (1 ... 6 7 8 ... 55). */
@media (max-width: 767px) {
	.tgbp-pagination.tgbp-pagination .jet-smart-filters-pagination .jet-filters-pagination {
		gap: 0;
	}

	.tgbp-pagination.tgbp-pagination .jet-smart-filters-pagination .jet-filters-pagination .jet-filters-pagination__link,
	.tgbp-pagination.tgbp-pagination .jet-smart-filters-pagination .jet-filters-pagination .jet-filters-pagination__dots {
		min-width: 32px;
		height: 32px;
		padding: 0 4px;
	}

	.tgbp-pagination.tgbp-pagination .jet-smart-filters-pagination .jet-filters-pagination .jet-filters-pagination__link {
		font-size: 15px;
	}

	.tgbp-pagination.tgbp-pagination .jet-smart-filters-pagination .jet-filters-pagination .jet-filters-pagination__dots::before {
		font-size: 14px;
		letter-spacing: 0;
	}

	.tgbp-pagination.tgbp-pagination .jet-smart-filters-pagination .jet-filters-pagination .jet-filters-pagination__current .jet-filters-pagination__link {
		border-radius: 16px;
	}

	.tgbp-pagination.tgbp-pagination .jet-smart-filters-pagination .jet-filters-pagination .jet-filters-pagination__item.prev-next {
		min-width: 20px;
	}

	.tgbp-pagination.tgbp-pagination .jet-smart-filters-pagination .jet-filters-pagination .prev-next .jet-filters-pagination__link {
		gap: 0;
		font-size: 0;
	}

	.tgbp-pagination.tgbp-pagination .jet-smart-filters-pagination .jet-filters-pagination .jet-filters-pagination__item:has(+ .jet-filters-pagination__item > .jet-filters-pagination__dots):not(.jet-filters-pagination__current, .jet-filters-pagination__current + *),
	.tgbp-pagination.tgbp-pagination .jet-smart-filters-pagination .jet-filters-pagination .jet-filters-pagination__item:has(+ * + .jet-filters-pagination__item > .jet-filters-pagination__dots):not(.jet-filters-pagination__current, .jet-filters-pagination__current + *),
	.tgbp-pagination.tgbp-pagination .jet-smart-filters-pagination .jet-filters-pagination .jet-filters-pagination__item:has(> .jet-filters-pagination__dots) + .jet-filters-pagination__item:not(.jet-filters-pagination__current, :has(+ .jet-filters-pagination__current)),
	.tgbp-pagination.tgbp-pagination .jet-smart-filters-pagination .jet-filters-pagination .jet-filters-pagination__item:has(> .jet-filters-pagination__dots) + * + .jet-filters-pagination__item:not(.jet-filters-pagination__current, :has(+ .jet-filters-pagination__current)) {
		display: none;
	}
}

/* --- "Φίλτρα" button (tablets and phones) ------------------------------- */

/* Orange, with the number of chosen options in a black circle (custom.js). */
.tgbp-sheet-open.tgbp-sheet-open {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin: 0;
	padding: 10px 14px;
	border: 1px solid #faa92c;
	border-radius: 40px;
	background: #faa92c;
	box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
	color: #000;
	font-family: "Roboto Mono", monospace;
	font-size: 16px;
	font-weight: 700;
	line-height: 22px;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	cursor: pointer;
}

.tgbp-sheet-open.tgbp-sheet-open:is(:hover, :focus, :active) {
	border-color: #faa92c;
	background: #faa92c;
	color: #000;
}

@media (hover: hover) {
	.tgbp-sheet-open.tgbp-sheet-open:hover {
		border-color: #f39c12;
		background: #f39c12;
	}
}

.tgbp-sheet-open.tgbp-sheet-open:focus-visible {
	outline: 2px solid #000;
	outline-offset: 2px;
}

.tgbp-sheet-open::before {
	content: "";
	flex: none;
	width: 20px;
	height: 20px;
	margin-inline-end: 2px;
	background: url("../img/archive/filter-lines.svg") center / 20px no-repeat;
}

.tgbp-sheet-open__badge:not([hidden]) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-width: 22px;
	height: 22px;
	margin: 1px 1px 1px 2px;
	padding: 0 6px;
	border-radius: 11px;
	background: #000;
	color: #fff;
	font-size: 14px;
	line-height: 1;
	letter-spacing: 0;
}

/* --- Filter sheet (tablets and phones) ---------------------------------- */

/* Phones: full screen, above the header: the heading and ×, the sorting and
   the groups (which scroll), and a bar with "Καθαρισμός" and the button that
   applies the choice. Closed until the "Φίλτρα" button opens it. */
@media (max-width: 1024px) {
	.tgbp-archive__sheet.e-con {
		display: none;
	}

	.tgbp-archive__sheet.e-con.is-open {
		--width: 100%;
		display: flex;
		position: fixed;
		inset: 0;
		z-index: 10010;
		flex-direction: column;
		flex-wrap: nowrap;
		gap: 0;
		max-width: none;
		margin: 0;
		padding: 0;
		overflow: hidden;
		background: #fff;
	}

	html.tgbp-filter-sheet-open {
		overflow: hidden;
	}
}

/* Tablets: a panel on the right instead, over the dimmed page (a click there
   closes it, custom.js). */
@media (min-width: 768px) and (max-width: 1024px) {
	.tgbp-archive__sheet.e-con.is-open {
		--width: 420px;
		left: auto;
		width: 420px;
		box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.4);
	}
}

@media (max-width: 1024px) and (prefers-reduced-motion: no-preference) {
	.tgbp-archive__sheet.e-con.is-open {
		animation: tgbp-sheet-in 0.2s ease-out;
	}
}

@media (min-width: 768px) and (max-width: 1024px) and (prefers-reduced-motion: no-preference) {
	.tgbp-archive__sheet.e-con.is-open {
		animation-name: tgbp-sheet-in-side;
	}
}

@keyframes tgbp-sheet-in {
	from {
		opacity: 0;
		transform: translateY(24px);
	}
}

@keyframes tgbp-sheet-in-side {
	from {
		transform: translateX(100%);
	}
}

.tgbp-sheet__head.e-con {
	flex: none;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 15px 10px 24px 20px;
}

.tgbp-sheet__head .elementor-heading-title {
	color: #000;
}

.tgbp-sheet__close.tgbp-sheet__close {
	display: block;
	width: 40px;
	height: 40px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 8px;
	background: url("../img/archive/x-close.svg") center / 20px no-repeat;
	box-shadow: none;
	cursor: pointer;
}

.tgbp-sheet__close.tgbp-sheet__close:is(:hover, :focus, :active) {
	background-color: transparent;
}

@media (hover: hover) {
	.tgbp-sheet__close.tgbp-sheet__close:hover {
		background-color: rgba(0, 0, 0, 0.06);
	}
}

.tgbp-sheet__close.tgbp-sheet__close:focus-visible {
	outline: 2px solid #000;
	outline-offset: -2px;
}

/* Only this part scrolls, not the page behind. */
.tgbp-sheet__body.e-con {
	flex: 1 1 auto;
	flex-direction: column;
	flex-wrap: nowrap;
	gap: 18px;
	min-height: 0;
	padding: 0 20px 24px;
	overflow-y: auto;
	overscroll-behavior: contain;
}

.tgbp-sheet__body.e-con > * {
	flex-shrink: 0;
}

.tgbp-sheet__sort .jet-sorting-label {
	margin: 0 0 8px;
	color: #000;
	font-family: "Roboto Mono", monospace;
	font-size: 14px;
	font-weight: 700;
	line-height: 24px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.tgbp-sheet__sort .jet-sorting-select {
	width: 100%;
}

.tgbp-sheet__bar.e-con {
	flex: none;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 12px 20px calc(12px + env(safe-area-inset-bottom, 0px));
	background: #fff;
	box-shadow: 0 -4px 4.45px rgba(54, 54, 54, 0.1);
}

.tgbp-sheet__bar > .elementor-widget {
	flex: none;
}

/* The button gives way, rather than the bar getting wider than the screen
   (4-digit counts on narrow phones). */
.tgbp-sheet__bar > .tgbp-sheet__apply {
	flex: 0 1 auto;
	min-width: 0;
}

.tgbp-sheet__clear.tgbp-sheet__clear {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	padding: 8px 12px;
	border: 0;
	border-radius: 8px;
	background: none;
	box-shadow: none;
	color: #525252;
	font-family: "Roboto", sans-serif;
	font-size: 14px;
	font-weight: 500;
	line-height: 20px;
	text-transform: none;
	cursor: pointer;
}

.tgbp-sheet__clear.tgbp-sheet__clear:is(:hover, :focus, :active) {
	background: none;
	color: #525252;
}

@media (hover: hover) {
	.tgbp-sheet__clear.tgbp-sheet__clear:hover {
		background: rgba(0, 0, 0, 0.06);
		color: #000;
	}
}

.tgbp-sheet__clear.tgbp-sheet__clear:focus-visible {
	outline: 2px solid #000;
	outline-offset: 2px;
}

.tgbp-sheet__clear::before {
	content: "";
	flex: none;
	width: 20px;
	height: 20px;
	background: url("../img/archive/refresh.svg") center / 20px no-repeat;
}

/* "18 αποτελέσματα →": black, its count from custom.js. */
.tgbp-archive .tgbp-sheet__apply .apply-filters__button.apply-filters__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	height: 50px;
	margin: 0;
	padding: 0 24px;
	border: 1px solid #141414;
	border-radius: 50px;
	background: #141414;
	box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
	color: #fff;
	font-family: "Roboto Mono", monospace;
	font-size: 14px;
	font-weight: 700;
	line-height: 24px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	white-space: nowrap;
	cursor: pointer;
	max-width: 100%;
	overflow: hidden;
}

@media (max-width: 400px) {
	.tgbp-sheet__bar.e-con {
		padding-inline: 16px;
	}

	.tgbp-sheet__clear.tgbp-sheet__clear {
		padding-inline: 6px;
	}

	.tgbp-archive .tgbp-sheet__apply .apply-filters__button.apply-filters__button {
		padding-inline: 16px;
		letter-spacing: 0.02em;
	}
}

/* Orange with black text and arrow, like every button (css/buttons.css). */
.tgbp-archive .tgbp-sheet__apply .apply-filters__button.apply-filters__button:is(:hover, :focus, :active) {
	border-color: #faa92c;
	background: #faa92c;
	color: #000;
}

.tgbp-archive .tgbp-sheet__apply .apply-filters__button:is(:hover, :focus, :active)::after {
	filter: invert(1);
}

.tgbp-archive .tgbp-sheet__apply .apply-filters__button.apply-filters__button:focus-visible {
	outline: 2px solid #000;
	outline-offset: 2px;
}

.tgbp-archive .tgbp-sheet__apply .apply-filters__button::after {
	content: "";
	flex: none;
	width: 20px;
	height: 20px;
	background: url("../img/archive/arrow-right.svg") center / 20px no-repeat;
}

/* While the count of a new choice is on its way. */
.tgbp-archive .tgbp-sheet__apply .apply-filters__button.is-counting {
	color: rgba(255, 255, 255, 0.7);
}

/* In the Elementor editor: the sheet under the page, so it can be edited. */
@media (max-width: 1024px) {
	.elementor-editor-active .tgbp-archive__sheet.e-con {
		display: flex;
		flex-direction: column;
		margin-top: 48px;
		outline: 1px dashed #d6d6d6;
	}
}