/* Domased Live Search
 *
 * Booklovers reassembles <head> and can emit this file before its own styles, so
 * source order is not something we can rely on. Selectors are therefore scoped
 * through the .domased-search wrapper for specificity, and the properties the
 * theme actually clobbers (the dark button fill, the stripped input border) are
 * marked !important — the theme has no competing !important on these elements.
 * Everything else is left at normal weight so it stays easy to override.
 */

.domased-search {
	position: relative;
	width: 100%;
	max-width: 340px;
	font-family: 'Inter', sans-serif;
}

/* Input and button are flex siblings — not an overlay on top of the field —
   so the two can never overlap, whatever the theme does to their sizing. */
.domased-search .domased-search__form {
	position: relative;
	display: flex !important;
	align-items: stretch;
	width: 100%;
	height: 48px;
	margin: 0 !important;
	padding: 0 !important;
	/* One border around the whole control rather than one per child: input and
	   button are flex siblings, so a border on each would double up into a 2px
	   line where they meet. box-sizing keeps the outside at the comp's 48px
	   instead of growing to 50px. */
	border: 1px solid #000;
	border-radius: 0;
	background: #FDF6E6;   /* lightened from the comp's #FCF1D5 (2026-08-06) */
	box-sizing: border-box;
}

/* ---- input ----
   Values below come from the domased-home.png design comp, measured off the
   pixels rather than eyeballed: field 48px tall, fill #FCF1D5, square corners
   (the fill reaches the very corner pixel — radius 0), text #292929.
   The magnifier sits INSIDE the field on the left; see the button block. */
.domased-search .domased-search__input {
	flex: 1 1 auto !important;
	width: auto !important;
	min-width: 0 !important;      /* lets the field shrink inside the header */
	height: 46px !important;      /* 48px control minus its 1px border top+bottom */
	margin: 0 !important;
	padding: 0 0 0 16px !important;
	border: 0 !important;         /* the form supplies the outline */
	border-radius: 0 !important;
	background: transparent !important;   /* form paints the fill */
	color: #292929 !important;
	font-family: inherit !important;
	font-size: 15px !important;
	line-height: normal !important;
	text-transform: none !important;
	box-shadow: none !important;
	box-sizing: border-box !important;
	-webkit-appearance: none;
	appearance: none;
	transition: box-shadow .15s ease;
}

/* Darkened from #7d7468 (2026-08-06). That was 4.09:1 on the field — under the
   4.5:1 WCAG 1.4.3 wants for text this size. #5F584E on #FDF6E6 is 6.52:1. */
.domased-search .domased-search__input::placeholder {
	color: #5F584E;
	opacity: 1;
}

/* Pointer focus gets the subtle inset ring. Keyboard focus is deliberately left
   alone so the theme's global :focus-visible ring shows — don't add
   `outline: none` here without reading booklovers-child/style.css first. */
.domased-search .domased-search__input:focus:not(:focus-visible) {
	outline: none !important;
	box-shadow: inset 0 0 0 2px rgba(255, 188, 0, .55) !important;
}

/* hide native clear/search decorations for consistency */
.domased-search .domased-search__input::-webkit-search-decoration,
.domased-search .domased-search__input::-webkit-search-cancel-button {
	-webkit-appearance: none;
}

/* ---- button ----
   At the right-hand end of the field. The 24px glyph and #292929 fill are the
   comp's; only its position differs, so DOM order (input then button) once again
   matches the painting order and no `order` juggling is needed. */
.domased-search .domased-search__btn {
	position: static !important;  /* was absolute — that caused the overlap */
	flex: 0 0 56px !important;
	width: 56px !important;
	min-width: 0 !important;
	height: 46px !important;      /* matches the input inside the 48px control */
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	margin: 0 !important;
	padding: 0 !important;
	/* Only a left edge: the form draws the outer box, so a full border here
	   would double up along the top, right and bottom. This one line separates
	   the button from the input. */
	border: 0 !important;
	border-left: 1px solid #000 !important;
	border-radius: 0 !important;
	/* #9B7747 — a darker take on the #B08751 used for the active main-menu
	   underline in booklovers-child/style.css.
	   The glyph strokes with currentColor, so `color` alone turns it white.
	   White on this is 4.10:1, comfortably past the 3:1 WCAG 1.4.11 asks for a
	   graphical control (the lighter #B08751 was only 3.27:1). Don't lighten it
	   without rechecking. */
	background: #9B7747 !important;
	color: #fff !important;
	font-size: 0 !important;      /* kills any inherited text/icon-font glyph */
	line-height: normal !important;
	text-transform: none !important;
	box-shadow: none !important;
	transform: none !important;
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease;
}

/* The theme attaches fontello glyphs to header buttons via pseudo-elements —
   that black block was one of them rendering over our icon. */
.domased-search .domased-search__btn::before,
.domased-search .domased-search__btn::after {
	content: none !important;
	display: none !important;
}

/* Hover darkens further and keeps the glyph white — white on #85643A is 5.41:1,
   so the state change never drops below the resting contrast. */
.domased-search .domased-search__btn:hover,
.domased-search .domased-search__btn:focus {
	background: #85643A !important;
	color: #fff !important;
}
/* Only pointer focus loses the outline — see the note on the input above. */
.domased-search .domased-search__btn:focus:not(:focus-visible) {
	outline: none !important;
}

.domased-search .domased-search__icon {
	display: block !important;
	width: 28px !important;    /* comp had 24; enlarged on request (2026-08-06) */
	height: 28px !important;
	flex: 0 0 auto;
}

/* ---- results dropdown ---- */
.domased-search .domased-search__results {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	right: 0;
	z-index: 100000;
	max-height: 70vh;
	overflow-y: auto;
	background: #fff;
	border: 1px solid #e6e2db;
	border-radius: 10px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, .14);
	padding: 6px;
	text-align: left;
}
.domased-search .domased-search__results[hidden] { display: none; }

/* ---- result groups (Produkty / Autori / Kategórie) ---- */
.domased-search .domased-search__group + .domased-search__group {
	margin-top: 4px;
	padding-top: 6px;
	border-top: 1px solid #eee;
}

/* An h2 since 2026-10-12, so the theme's heading face, size and margins are
   reset. 30% larger than the former 11px label and black (#121212, the site's
   text colour) instead of #6b6259, on request. */
.domased-search .domased-search__group-title {
	margin: 0 !important;
	padding: 8px 10px 4px;
	font-family: inherit !important;
	font-size: 14.3px !important;
	font-weight: 700 !important;
	font-style: normal !important;
	line-height: 1.3 !important;
	letter-spacing: .1em !important;
	text-transform: none !important;
	color: #121212 !important;
}

/* The typed characters, highlighted inside each result.

   These must read as the SAME text as their neighbours — just bold and
   highlighted. Two things worked against that:

   1. The theme's __custom.css puts bare `mark` in a long selector list set to
      `font-family: var(--theme-font-h5_font-family)` — the heading face. So the
      matched characters were rendering in Playfair Display inside a line of
      Inter. Every inherited text property is therefore restored explicitly
      rather than trusting the <mark> default.
   2. Horizontal padding on an inline element adds to its inline box, nudging
      the rest of the line along. Zero padding keeps the glyphs in exactly the
      position they occupy when unhighlighted. */
.domased-search .domased-search__hl {
	background: rgba(255, 188, 0, .55) !important;
	color: inherit !important;
	font-family: inherit !important;
	font-size: inherit !important;
	font-style: inherit !important;
	line-height: inherit !important;
	letter-spacing: inherit !important;
	text-transform: inherit !important;
	padding: 0;
	border-radius: 2px;
	font-weight: 700;
}

/* Author and category rows have no thumbnail, so they sit tighter than the
   product rows and indent to line up with the product titles. */
.domased-search .domased-search__item--term {
	padding-top: 7px;
	padding-bottom: 7px;
}

.domased-search .domased-search__item {
	display: flex;
	align-items: stretch;   /* lets the cover match the text block's height */
	gap: 12px;
	padding: 8px 10px;
	border: 0 !important;
	border-radius: 8px;
	text-decoration: none !important;
	color: #14110e !important;
}
.domased-search .domased-search__item:hover,
.domased-search .domased-search__item:focus { background: #f6f4f0; }

/* The cover spans the full height of the three text lines beside it.
   `align-self: stretch` against the row's `align-items: stretch` does the work,
   so no height is hardcoded here — a title that wraps to two lines simply makes
   both taller together.
   The width IS fixed, and deliberately: an <img> with auto width in a flex row
   takes its intrinsic width as the flex base size, which would be the full 300px
   of the source file.
   58x72 is 0.806 — effectively the 4:5 that 13,547 of this catalogue's images
   use — so `cover` neither crops nor leaves the grey bars that letterboxing
   would produce. */
.domased-search .domased-search__thumb {
	width: 58px;
	flex: 0 0 58px;
	height: auto;
	align-self: stretch;
	object-fit: cover;
	border-radius: 6px;
	background: #f2f0ec;
}

/* 72px ≈ title (2 lines max) + author + price, so every row is the same height
   whether its title wraps or not, and the covers line up down the list. */
.domased-search .domased-search__meta {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-width: 0;
	min-height: 72px;
}
.domased-search .domased-search__title {
	font-size: 14px;
	line-height: 1.3;
	font-weight: 500;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
/* Author sits between title and price. One line with an ellipsis — a book can
   carry several pa_autor terms and must not push the row taller than the 44px
   thumbnail beside it. #6b6259 on #fff is 5.97:1, so it stays readable. */
.domased-search .domased-search__author {
	font-size: 12px;
	line-height: 1.3;
	color: #6b6259;
	margin-top: 2px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Black and bold so the price stands out in the row (2026-10-12, on request;
   was #6b6259, normal weight). The struck old price below keeps its grey. */
.domased-search .domased-search__price {
	font-size: 13px;
	font-weight: 700;
	color: #121212 !important;
	margin-top: 2px;
}

/* Superseded price. !important because trx_addons ships
   `.woocommerce del, .woocommerce del > span.amount * { color: text_light !important }`,
   and body carries the `woocommerce` class on shop pages — that light grey was
   the same near-invisible del we already fixed in the Zlacnené section.
   #6b6259 on #fff is 5.97:1. */
.domased-search .domased-search__price-old {
	color: #6b6259 !important;
	font-weight: 400;
	text-decoration: line-through;
	margin-right: 4px;
}

/* The price that actually applies, so it reads first. */
.domased-search .domased-search__price-now {
	color: #14110e !important;
	font-weight: 700;
}

.domased-search .domased-search__all {
	display: block;
	text-align: center;
	padding: 10px;
	margin-top: 4px;
	border-top: 1px solid #e6e2db;
	font-size: 13px;
	font-weight: 700;
	text-decoration: none !important;
	color: #14110e !important;
}
.domased-search .domased-search__all:hover { color: #a37800 !important; }

.domased-search .domased-search__empty {
	padding: 16px;
	text-align: center;
	color: #9a938a;
	font-size: 14px;
}