/* ==================================================================
   Catalog filter UI: the trigger chips row on category archives
   (Розмір / Колір dropbars + "Усі Фільтри" button), the dropbar
   dropdown panels, and the JetSmartFilters controls that appear both
   in those panels and in the "Усі Фільтри" popup (2547).

   The widgets' base styles live in DB-stored Elementor template CSS
   with .elementor-<post> .elementor-element.elementor-element-<id>
   specificity, so overrides here lean on !important — same pattern
   as the header/cart overrides in style.css. Square corners
   throughout, per the site design.
   ================================================================== */

/* ------------------------------------------------------------------
   Trigger buttons: Розмір / Колір (JetElements dropbar). The
   template's old hover was translucent #202020CC with the text left
   black — unreadable. Solid invert instead, also while open.
   ------------------------------------------------------------------ */
/* One size and one look for all three triggers — the template gave
   each box its own padding (three mismatched rectangles) and framed
   them with the same hard 1px black border the shop's CTA buttons
   wear, which read as dated form controls. Quiet soft-gray squares
   instead; the filters also stop competing with real CTAs. States:
   idle gray → hover darker gray → open/applied solid black. */
.elementor-widget-jet-dropbar .jet-dropbar__button,
.elementor-element-e2ea394 .elementor-button {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;

	min-height: 48px;
	padding: 0 20px !important;
	box-sizing: border-box;

	background-color: #F4F4F4 !important;
	border: 1px solid transparent !important;
	color: #101011 !important;
}

.elementor-widget-jet-dropbar .jet-dropbar__button {
	transition:
		background-color 0.2s ease,
		color 0.2s ease,
		border-color 0.2s ease;
}

/* A trigger whose filter is applied stays inverted, with a small
   rose dot after the label — applied filters are visible without
   opening anything. (:has() is baseline in all current browsers;
   without it the box simply stays white.) */
.elementor-widget-jet-dropbar .jet-dropbar:has(input:checked) .jet-dropbar__button {
	background-color: #101011 !important;
	border-color: #101011 !important;
	color: #FFFFFF !important;
}

.elementor-widget-jet-dropbar .jet-dropbar:has(input:checked) .jet-dropbar__button-icon {
	color: #FFFFFF !important;
}

.elementor-widget-jet-dropbar .jet-dropbar:has(input:checked) .jet-dropbar__button-text::after {
	content: "";

	display: inline-block;
	width: 6px;
	height: 6px;
	margin-left: 8px;

	border-radius: 50%;
	background-color: #B79F9F;

	vertical-align: middle;
}

.elementor-widget-jet-dropbar .jet-dropbar__button:hover {
	background-color: #E7E7EA !important;
	color: #101011 !important;
}

.elementor-widget-jet-dropbar .jet-dropbar__button:hover .jet-dropbar__button-icon {
	color: #101011 !important;
}

.elementor-widget-jet-dropbar .jet-dropbar.jet-dropbar-open .jet-dropbar__button {
	background-color: #101011 !important;
	border-color: #101011 !important;
	color: #FFFFFF !important;
}

.elementor-widget-jet-dropbar .jet-dropbar.jet-dropbar-open .jet-dropbar__button-icon {
	color: #FFFFFF !important;
}

/* The chevron flips while the dropdown is open (.jet-dropbar-open is
   toggled by jet-elements.js). */
.jet-dropbar__button-icon svg {
	transition: transform 0.25s ease;
}

.jet-dropbar.jet-dropbar-open .jet-dropbar__button-icon svg {
	transform: rotate(180deg);
}

/* --- "Усі Фільтри" (Elementor button e2ea394 in the archive
   template): same soft chip, darker on hover, black while pressed. --- */
.elementor-element-e2ea394 .elementor-button {
	transition:
		background-color 0.2s ease,
		color 0.2s ease,
		border-color 0.2s ease;
}

.elementor-element-e2ea394 .elementor-button svg {
	fill: #101011 !important;
}

.elementor-element-e2ea394 .elementor-button:hover,
.elementor-element-e2ea394 .elementor-button:focus {
	background-color: #E7E7EA !important;
	color: #101011 !important;
}

.elementor-element-e2ea394 .elementor-button:active {
	background-color: #101011 !important;
	color: #FFFFFF !important;
}

.elementor-element-e2ea394 .elementor-button:active svg {
	fill: #FFFFFF !important;
}

/* ------------------------------------------------------------------
   Dropdown panels under the trigger buttons: crisper card, square
   corners per the design.
   ------------------------------------------------------------------ */
.jet-dropbar__content {
	border: 1px solid #ECECEF !important;
	border-radius: 0 !important;
	box-shadow: 0 16px 40px rgba(16, 16, 17, 0.14) !important;
	padding: 20px !important;

	/* Long option lists scroll inside the panel instead of growing it
	   past the viewport. */
	max-height: min(480px, 70vh);
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
}

@media (max-width: 767px) {
	.jet-dropbar__content {
		max-height: 60vh;
		max-height: 60dvh;
	}

	/* The trigger row wraps on narrow screens — keep the gaps even
	   instead of the widgets' ad-hoc margins. */
	.elementor-element-944f04b {
		gap: 8px !important;
		flex-wrap: wrap;
	}
}

/* --- "Усі Фільтри" popup (2547): the panel must scroll as one
   column. Without this, expanding a long section (Сезон) pushes the
   rest of the content past the viewport and the visitor sees only the
   popup's blank background. --- */
#elementor-popup-modal-2547 .dialog-message {
	max-height: 100vh;
	max-height: 100dvh;
	overflow-y: auto !important;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
}

/* The per-filter reset buttons inside the panels ("Скинути Розмір" /
   "Скинути Колір") are secondary actions — quiet text links, not
   another pair of framed buttons. */
.jet-dropbar__content .elementor-widget-button .elementor-button {
	background-color: transparent !important;
	border: none !important;
	border-radius: 0 !important;
	padding: 8px 0 !important;

	color: #101011 !important;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.jet-dropbar__content .elementor-widget-button .elementor-button:hover {
	color: #9196A8 !important;
}

/* ------------------------------------------------------------------
   Section titles in the "Усі Фільтри" popup (JetTabs accordion).
   The templates set the hover/active title and icon color to
   #55002211 — a 7%-alpha color — so an opened section's title all
   but disappears. Keep every state readable.
   ------------------------------------------------------------------ */
.jet-toggle .jet-toggle__label-text,
.jet-toggle .jet-toggle__control:hover .jet-toggle__label-text,
.jet-toggle.active-toggle > .jet-toggle__control .jet-toggle__label-text {
	color: #101011 !important;
}

.jet-toggle .jet-toggle__icon,
.jet-toggle .jet-toggle__control:hover .jet-toggle__icon,
.jet-toggle.active-toggle .jet-toggle__icon {
	color: #101011 !important;
}

/* ------------------------------------------------------------------
   Option blocks (JetSmartFilters checkbox lists) — in the dropdowns
   and in the popup alike. The templates painted them as white pills
   with a WHITE border and gray text on a white panel: invisible
   frames, unreadable labels, ragged inline-block layout. Rebuild as
   an aligned grid of square, clearly bordered toggle blocks.
   ------------------------------------------------------------------ */
/* The whole layout chain (wrapper → row → label → button) needs
   !important: the templates set the rows to inline-block and the
   plugin sizes the labels to their content, which left narrow blocks
   rattling around with ragged gaps between them.

   Flex wrap, NOT grid: these wrappers are <fieldset>s, and a fieldset
   as a grid container miscomputes its height in Chromium — the parent
   widget ends up hundreds of px taller than the content (the giant
   white dropdowns/popup sections). Rows stretch to share each line,
   so the blocks still read aligned. */
.jet-checkboxes-list-wrapper {
	display: flex !important;
	flex-wrap: wrap;
	gap: 8px !important;

	margin: 0 !important;
	padding: 0 !important;
	border: none;
}

/* No display here: a forced display would outrank the plugin's
   .jet-filter-row-hide { display:none !important } that hides
   zero-result options. */
.jet-checkboxes-list__row.jet-filter-row {
	flex: 1 1 auto;
	min-width: 96px;
	width: auto !important;
	max-width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* Phones: three columns squeeze the longer labels into two lines and
   uneven rows — two roomy columns instead. */
@media (max-width: 480px) {
	.jet-checkboxes-list__row.jet-filter-row {
		flex-basis: calc(50% - 4px);
	}
}

.jet-checkboxes-list__item {
	display: block !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
}

.jet-checkboxes-list__button {
	display: flex !important;
	align-items: center;
	justify-content: center;
	gap: 6px;

	width: 100% !important;
	box-sizing: border-box !important;
	margin: 0 !important;

	padding: 11px 12px !important;

	background-color: #FFFFFF !important;
	border: 1px solid #101011 !important;
	border-radius: 0 !important;

	font-size: 13px;
	line-height: 16px;
	letter-spacing: 0.26px;
	color: #101011 !important;

	cursor: pointer;

	transition:
		background-color 0.2s ease,
		border-color 0.2s ease,
		color 0.2s ease;
}

/* One-line labels; anything truly too long ellipsizes instead of
   breaking the row height. Typography needs !important — the
   templates put their own (larger) font-size and a cramped
   line-height directly on the label span, which otherwise outranks
   the chip's inherited text style. */
.jet-checkboxes-list__button {
	min-width: 0;
}

.jet-checkboxes-list__label {
	color: inherit !important;
	font-size: 13px !important;
	line-height: 16px !important;
	font-weight: 500 !important;
	letter-spacing: 0.26px !important;

	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.jet-checkboxes-list__button:hover {
	background-color: #F4F4F4 !important;
	border-color: #101011 !important;
	color: #101011 !important;
}

.jet-checkboxes-list__input:checked ~ .jet-checkboxes-list__button,
.jet-checkboxes-list__input:checked ~ .jet-checkboxes-list__button:hover {
	background-color: #101011 !important;
	border-color: #101011 !important;
	color: #FFFFFF !important;
}

/* Availability counters: quiet meta text that follows the block state.
   !important for the same reason as the labels — the templates set
   their own (Montserrat 14px/160%) counter typography. */
.jet-filter .jet-filters-counter {
	font-family: inherit !important;
	font-size: 12px !important;
	line-height: 16px !important;
	color: #9196A8;
	padding-left: 0 !important;
}

.jet-checkboxes-list__input:checked ~ .jet-checkboxes-list__button .jet-filters-counter {
	color: rgba(255, 255, 255, 0.7);
}

/* ------------------------------------------------------------------
   Radio filters (e.g. "Товари зі знижкою" with its switch control):
   no frame — the switch already carries the state, the label is just
   a label.
   ------------------------------------------------------------------ */
.jet-radio-list__button {
	background-color: transparent !important;
	border: none !important;
	border-radius: 0 !important;
	padding: 0 !important;

	font-size: 14px;
	color: #101011 !important;

	cursor: pointer;
}

/* ------------------------------------------------------------------
   Color filter: bigger swatches with a hairline so white/light tones
   don't vanish, and an offset ring when selected.
   ------------------------------------------------------------------ */
/* Same treatment as the checkbox lists (and the same fieldset-grid
   Chromium bug, hence flex): rows were inline-blocks with template
   margins, which scattered the swatches and glued the "(9)" counters
   to the circles' edges. */
.jet-color-image-list-wrapper fieldset {
	display: flex !important;
	flex-wrap: wrap;
	gap: 14px 12px !important;

	margin: 0 !important;
	padding: 0 !important;
	border: none;
}

/* No display here — see the checkbox rows note (.jet-filter-row-hide
   must keep working). */
.jet-color-image-list__row.jet-filter-row {
	flex: 0 0 auto;
	width: auto !important;
	margin: 0 !important;
	padding: 0 !important;
}

.jet-color-image-list__item {
	display: block !important;
	margin: 0 !important;
}

.jet-color-image-list__button {
	display: flex !important;
	align-items: center;
	justify-content: center;
	gap: 6px;

	cursor: pointer;
}

.jet-color-image-list__decorator {
	display: flex;
	margin: 0 !important;
}

.jet-color-image-list__color {
	display: block;
	width: 28px !important;
	height: 28px !important;
	border-radius: 50%;

	box-shadow: inset 0 0 0 1px rgba(16, 16, 17, 0.18);

	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.jet-color-image-list__button:hover .jet-color-image-list__color {
	transform: scale(1.1);
}

.jet-color-image-list__input:checked ~ .jet-color-image-list__button .jet-color-image-list__color {
	box-shadow:
		inset 0 0 0 1px rgba(16, 16, 17, 0.18),
		0 0 0 2px #FFFFFF,
		0 0 0 4px #101011;
}

/* ------------------------------------------------------------------
   Price range slider (in the popup): plugin defaults are gray; bring
   it onto the brand palette. The filled segment paints with
   currentColor on the track.
   ------------------------------------------------------------------ */
.jet-range__slider__track {
	color: #101011 !important;
	background: #ECECEF !important;
}

.jet-range__slider .jet-range__slider__input::-webkit-slider-thumb {
	background-color: #101011 !important;
	border: 2px solid #FFFFFF !important;
	box-shadow: 0 1px 4px rgba(16, 16, 17, 0.3);
}

.jet-range__slider .jet-range__slider__input::-moz-range-thumb {
	background-color: #101011 !important;
	border: 2px solid #FFFFFF !important;
	box-shadow: 0 1px 4px rgba(16, 16, 17, 0.3);
}

/* Any remaining native inputs inside filters follow the brand. */
.jet-filter input {
	accent-color: #101011;
}

/* Options with zero results are hidden by js/catalog-filters.js
   (checked ones stay visible so they can be un-checked). */
.jet-filter-row--empty {
	display: none !important;
}