/* Domased Book Filters — the sidebar to the left of a product listing.

   Self-contained on purpose: the theme's own form styling is spread across
   several skin stylesheets and is tuned for the checkout, so the controls are
   dressed here rather than inherited. Colours are the site's own — #FFBC00 and
   #121212, the pair used by the homepage buttons and the header menu.

   Specificity note, which applies to several rules below.
   The theme dresses form controls with selectors that outrank a single class:
   `form button:not(.components-button)` is (0,2,1) and `[class*=scheme_] button`
   (0,2,0), against (0,1,0) here. Rather than escalate the selector and have the
   next theme update outrank it again, the contested properties are marked —
   the same approach, and the same reasoning, as the child theme's style.css.
   Only properties that actually lost are marked; layout is left to cascade. */

/* ------------------------------------------------------------------ layout */

/* The two columns. Opened at woocommerce_before_shop_loop and closed at
   woocommerce_after_main_content, so the sidebar sits beside the result count,
   the sort control, the products and the pagination — but below the archive
   H1, which the theme prints in .list_products_header above all of them. */
.domased-filter-layout {
	display: flex;
	align-items: flex-start;
	gap: 44px;
}

/* min-width:0 on the results column, or a wide product title stretches the
   flex item past its share and the sidebar is squeezed. */
.domased-filter-results {
	flex: 1 1 auto;
	min-width: 0;
}

.domased-filter {
	flex: 0 0 268px;
	max-width: 268px;
	margin: 0 0 28px;
	font-size: 15px;
	line-height: 1.45;
}

/* -------------------------------------------------------------------- head */

.domased-filter__head {
	margin: 0 0 14px;
}

.domased-filter__title {
	margin: 0;
	font-size: 20px !important;
	line-height: 1.2;
	letter-spacing: .02em;
	color: #121212;
}

/* `hidden` is how both the markup and filter.js take these two out of play, and
   an author `display` further down would quietly beat the UA stylesheet's
   `[hidden] { display: none }` — which is exactly what happened: the phone's
   "Filtre" button turned up on a 1440px desktop, sitting under the heading it
   is meant to replace. Anything given a `display` below needs its own
   `[hidden]` rule, and these two have one. */
.domased-filter__toggle[hidden],
.domased-filter__body[hidden] {
	display: none !important;
}

/* Revealed by filter.js on a narrow viewport only — see the comment on the
   button in the PHP. */
.domased-filter__toggle {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	padding: 12px 16px;
	border: 2px solid #121212 !important;
	border-radius: 1.2em !important;
	background: #FFBC00 !important;
	color: #121212 !important;
	font-size: 15px !important;
	font-weight: 700;
	letter-spacing: .06em;
	cursor: pointer;
}

.domased-filter__toggle::after {
	content: "";
	width: 8px;
	height: 8px;
	margin-left: auto;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	transform-origin: 60% 60%;
}

.domased-filter__toggle[aria-expanded="true"]::after {
	transform: rotate(225deg);
}

/* -------------------------------------------------------------------- body */

.domased-filter__body {
	border: 1px solid #e2e2e0;
	border-radius: 14px;
	background: #fafaf9;
}

.domased-filter__facets {
	padding: 18px 18px 4px;
}

/* ------------------------------------------------------------------ facets */

/* Each facet folds behind its heading — a <details>, closed unless it holds a
   ticked box (see render_facet()). Inside, a real fieldset with a hidden
   legend names the group of boxes to a screen reader; the browser default
   border and padding have to go before it can be styled. */
.domased-filter__facet {
	margin: 0 0 14px;
	padding: 0;
	border: 0;
}

.domased-filter__group {
	margin: 0 0 6px;
	padding: 0;
	border: 0;
	min-width: 0;
}

/* The heading is the disclosure control: the whole row is clickable, with a
   caret at the right drawn the same way as the subcategory carets. */
.domased-filter__legend {
	position: relative;
	display: block;
	margin: 0;
	padding: 4px 30px 4px 0;
	font-size: 13px !important;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #121212;
	cursor: pointer;
	list-style: none;
}

.domased-filter__legend::-webkit-details-marker {
	display: none;
}

.domased-filter__legend::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 9px;
	width: 7px;
	height: 7px;
	margin-top: -6px;
	border-right: 2px solid #121212;
	border-bottom: 2px solid #121212;
	transform: rotate(45deg);
	transform-origin: 60% 60%;
}

.domased-filter__facet[open] > .domased-filter__legend {
	margin-bottom: 8px;
}

.domased-filter__facet[open] > .domased-filter__legend::after {
	transform: rotate(225deg);
}

.domased-filter__legend:hover {
	color: #DE3241;
}

.domased-filter__legend:focus-visible {
	outline: 3px solid #FFBC00;
	outline-offset: 2px;
}

.domased-filter__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.domased-filter__list--sub {
	margin: 4px 0 6px 9px;
	padding-left: 12px;
	border-left: 1px solid #e2e2e0;
}

.domased-filter__item {
	position: relative;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* ---------------------------------------------------------------- one box */

.domased-filter__opt {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	/* Room at the right for the disclosure caret of a branch. Held on every
	   row, branch or not, so the labels of siblings line up. */
	padding: 4px 30px 4px 0;
	cursor: pointer;
	color: #121212;
}

.domased-filter__opt:hover .domased-filter__optname {
	color: #DE3241;
}

.domased-filter__box {
	flex: 0 0 auto;
	width: 17px !important;
	height: 17px !important;
	/* The row's line-height is 1.45 on 15px ≈ 21.75px; this drops the box onto
	   the first line's optical centre instead of its top. */
	margin: 3px 0 0 !important;
	accent-color: #FFBC00;
	cursor: pointer;
}

.domased-filter__box:focus-visible {
	outline: 3px solid #FFBC00;
	outline-offset: 2px;
}

.domased-filter__optname {
	min-width: 0;
	/* Long category names — "Knihy pre deti a mládež" — wrap rather than push
	   the caret off the edge. */
	overflow-wrap: break-word;
}

.domased-filter__box:checked + .domased-filter__optname {
	font-weight: 700;
}

/* --------------------------------------------------- the disclosure caret */

/* <details> rather than a script: see the comment on render_options().
   The summary is lifted out of the flow and parked at the right end of its
   parent's label row, so a closed branch costs no vertical space at all. */
.domased-filter__sub > summary {
	position: absolute;
	top: 2px;
	right: 0;
	display: block;
	width: 26px;
	height: 26px;
	border-radius: 6px;
	cursor: pointer;
	list-style: none;
}

.domased-filter__sub > summary::-webkit-details-marker {
	display: none;
}

.domased-filter__sub > summary::after {
	content: "";
	position: absolute;
	top: 9px;
	left: 9px;
	width: 7px;
	height: 7px;
	border-right: 2px solid #121212;
	border-bottom: 2px solid #121212;
	transform: rotate(45deg);
	transform-origin: 60% 60%;
}

.domased-filter__sub[open] > summary::after {
	transform: rotate(225deg);
}

.domased-filter__sub > summary:hover {
	background: #f0efec;
}

.domased-filter__sub > summary:focus-visible {
	outline: 3px solid #FFBC00;
	outline-offset: 1px;
}

/* The caret is a graphic; this is what it says. */
.domased-filter__sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

/* -------------------------------------------------------------------- note */

.domased-filter__note {
	margin: 0 0 18px;
	font-size: 13px;
	line-height: 1.5;
	color: #5c5c58;
}

.domased-filter__note a {
	color: #121212;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.domased-filter__note a:hover,
.domased-filter__note a:focus {
	color: #DE3241;
}

/* ----------------------------------------------------------------- actions */

.domased-filter__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 16px;
	margin: 0;
	padding: 16px 18px;
	border-top: 1px solid #e2e2e0;
	/* Opaque, because on a wide screen this strip is pinned below a scrolling
	   list of categories — see the media query at the foot of the file. */
	background: #fafaf9;
	border-radius: 0 0 14px 14px;
}

/* Same treatment as the homepage "more" buttons and the loop's add-to-cart:
   yellow fill, black 2px outline, black label, inverting on hover. The outline
   is held through both states so nothing shifts.

   "Zrušiť filtre" wears the same button (2026-09-29, on request) — it was an
   underlined text link. It stays an <a>, because it is a navigation to the
   unfiltered listing, not a form action; the flex box and line-height make
   the link sit exactly like the button. The metrics are pinned with
   !important on both, because the skin's `form button` rule (also
   !important) was quietly overriding the submit's: measured 2026-09-29 it
   rendered at 59px tall, 17px 40px padding, 21px line-height and 2px
   letter-spacing, not the 44px written here. Those measured values are now
   the declared ones, so the submit looks as it did and the link matches it. */
.domased-filter__submit,
.domased-filter__reset {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: auto !important;
	padding: 17px 40px !important;
	border: 2px solid #121212 !important;
	border-radius: 1.2em !important;
	background: #FFBC00 !important;
	color: #121212 !important;
	font-size: 15px !important;
	font-weight: 600 !important;
	line-height: 21px !important;
	letter-spacing: 2px !important;
	text-decoration: none !important;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease;
}

.domased-filter__submit:hover,
.domased-filter__submit:focus,
.domased-filter__reset:hover,
.domased-filter__reset:focus {
	border-color: #121212 !important;
	background: #121212 !important;
	color: #ffffff !important;
}

/* ------------------------------------------------------- wide screens only */

/* Sticky, and capped to the viewport with the category list taking the scroll
   and the submit button pinned under it. Without the cap the panel is taller
   than the screen on /obchod/ and the reader has to scroll back up to submit.
   `top` clears the theme's fixed header row (sc_layouts_row_fixed_on).

   2026-09-29: `top` was 110px, but the fixed header row is 177px tall —
   measured at 900, 1100, 1280, 1440 and 1920px, the same at every width — so
   once stuck, the "Filtre" heading sat hidden under the header. Now 177 + 20px
   of air; logged in, the 32px admin bar pushes the header down by as much.
   The height cap keeps 40px free under the panel either way. */
@media (min-width: 900px) {
	.domased-filter {
		--domased-filter-top: 197px;
		position: sticky;
		top: var(--domased-filter-top);
		align-self: flex-start;
	}

	body.admin-bar .domased-filter {
		--domased-filter-top: 229px;
	}

	.domased-filter__form {
		display: flex;
		flex-direction: column;
		max-height: calc(100vh - var(--domased-filter-top) - 40px);
	}

	.domased-filter__body {
		display: flex;
		flex-direction: column;
		/* A flex item will not shrink below its content unless told to, which
		   is what lets the facets scroll instead of the panel overflowing. */
		min-height: 0;
	}

	.domased-filter__facets {
		flex: 1 1 auto;
		min-height: 0;
		overflow-y: auto;
	}

	.domased-filter__actions {
		flex: 0 0 auto;
	}
}

/* ----------------------------------------------------- narrow screens only */

@media (max-width: 899px) {
	.domased-filter-layout {
		display: block;
	}

	.domased-filter {
		max-width: none;
		margin-bottom: 32px;
	}

	.domased-filter__title {
		/* The toggle button carries the name here; keeping both would say
		   "Filtre" twice in a row. filter.js reveals the button. */
		display: none;
	}

	.domased-filter__facets {
		/* Two facets side by side while there is width for it; the categories
		   scroll rather than push the products a screen and a half down. */
		display: flex;
		flex-wrap: wrap;
		gap: 0 32px;
		max-height: 60vh;
		overflow-y: auto;
	}

	.domased-filter__facet {
		flex: 1 1 220px;
		min-width: 0;
	}

	.domased-filter__note,
	.domased-filter__actions {
		flex-basis: 100%;
	}
}

@media (max-width: 480px) {
	.domased-filter__facets {
		display: block;
	}

	.domased-filter__submit,
	.domased-filter__reset {
		flex: 1 1 auto;
	}
}