/**
 * Love Pharm · Product search — the masthead trigger, the dialog, the results page.
 *
 * Markup: inc/search/search.php. Behaviour: inc/search/search.js. Loaded on every
 * page (the trigger is in the masthead). Every value that repeats or that another
 * file also owns is a token below; the colour tokens read the site's own
 * (--plp-* from plp.css, --brand/--border/--black from style.css) so the panel is
 * the PLP's visual system: product photos on the studio grey, ink type, black CTA, 0 radius.
 *
 * Breakpoint is the theme's: 993px desktop / ≤992px mobile.
 * Design checks for this file: tests/styles/search.json.
 */

:root {
	--lp-search-ink: var(--plp-ink, #1A1A1A);
	--lp-search-muted: var(--plp-muted, #6B6560);
	--lp-search-tile: var(--plp-tile, #F4F1EC);
	--lp-search-shadow: var(--plp-shadow, rgba(60, 45, 30, 0.16));
	--lp-search-tile-pad: var(--plp-tile-pad, 14%);
	--lp-search-photo-bg: var(--plp-photo-bg, #F3F3F3);  /* product tiles: the card's studio grey */
	--lp-search-panel-bg: var(--white, #FFFFFF);
	--lp-search-scrim: rgba(26, 26, 26, 0.42);   /* ink at 42% — dims the page, keeps it legible */
	--lp-search-cta: var(--black, #000000);
	--lp-search-cta-hover: #222222;              /* the site's primary-button hover shade */
	--lp-search-focus: var(--brand, #C4878A);    /* keyboard focus ring — rose, accent only */
	--lp-search-sale: var(--red, #B12704);
	--lp-search-z: 100000;                       /* above the sticky header (21) */
	--lp-search-motion: 220ms;
	--lp-search-input-size: 28px;                /* the big field, desktop */
	--lp-search-input-size-m: 18px;              /* …mobile */
	--lp-search-icon: 20px;                      /* masthead magnifier; the cart's bag (inc/cart-icon) reads it. 20px everywhere: the luxury references' icons (Mytheresa, SSENSE: 20–22px, thin); 24px was tried on the phone and rejected as big and clumsy (owner, 2026-10-12) */
	--lp-search-side-w: 240px;                   /* desktop side column: suggestions / recent / popular */
	--lp-search-col-gap: 48px;
	--lp-search-row-gap: 32px;
	--lp-search-pad-y: 28px;                     /* panel top padding, desktop */
	--lp-search-trigger-gap: 28px;               /* trigger ↔ cart, desktop */
	/* Mobile: the magnifier's distance from the inline end — the second icon slot of the masthead
	 * (assets/css/masthead.css: the slots, Mango's geometry), the glyph centred in it: 10 + 36 + 8 = 54px. */
	--lp-search-trigger-offset: calc(var(--lp-mast-edge, 10px) + var(--lp-mast-slot-w, 36px) + (var(--lp-mast-slot-w, 36px) - var(--lp-search-icon)) / 2);
	--lp-search-tile-m: 72px;                    /* mobile result row thumbnail width (4:5) */
}


/* ---------- masthead trigger */
.lp-search-trigger {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	min-height: 0;
	color: var(--lp-search-ink) !important;
	font: inherit;
	line-height: 1;
	cursor: pointer;
}
.lp-search-trigger__icon {   /* the masthead's icon language: a 16-unit glyph, a 1-unit (1.25px) line, square ends (search.php) */
	display: block;
	width: var(--lp-search-icon);
	height: var(--lp-search-icon);
	fill: none;
	stroke: currentColor;
	stroke-width: 1;
	stroke-linecap: butt;
	stroke-linejoin: miter;
}
.lp-search-trigger__label {
	position: relative;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.4px;
}
/* The site's hover cue: a 1px underline growing from the start edge. */
.lp-search-trigger__label::after {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	bottom: -4px;
	width: 0;
	height: 1px;
	background: currentColor;
	transition: width 0.2s ease;
}
.lp-search-trigger:hover .lp-search-trigger__label::after,
.lp-search-trigger[aria-expanded="true"] .lp-search-trigger__label::after {
	width: 100%;
}
.lp-search-trigger:focus-visible {
	outline: 2px solid var(--lp-search-focus);
	outline-offset: 4px;
}
@media (min-width: 993px) {
	/* Left group of the RTL masthead: [cart][trigger] — the trigger takes the
	 * auto margin that pushes the group to the far side, the cart follows it. */
	.main-header > .lp-search-trigger {
		order: 98;
		margin-inline-start: auto;
		margin-inline-end: var(--lp-search-trigger-gap);
	}
	.site-header .main-header .site-header-cart {
		margin-inline-start: 0 !important; /* the theme's auto margin now lives on the trigger */
	}
}
@media (max-width: 992px) {
	.main-header > .lp-search-trigger {
		position: absolute;
		/* the masthead's second icon slot (assets/css/masthead.css), the magnifier centred in it — flush with the bag's slot */
		top: calc((var(--lp-mast-h-m, 60px) - var(--lp-mast-slot-h, 48px)) / 2);
		height: var(--lp-mast-slot-h, 48px);
		width: var(--lp-mast-slot-w, 36px);
		justify-content: center;
		inset-inline-end: calc(var(--lp-mast-edge, 10px) + var(--lp-mast-slot-w, 36px));
		color: var(--lp-mast-icon-ink, #131313) !important;
		z-index: 2;
	}
	.lp-search-trigger__label {
		display: none;
	}
}

/* ---------- dialog shell */
/* Page scroll is locked while the dialog is open; the scrollbar's width is kept
 * as padding (JS measures it into --lp-search-scrollbar) so nothing shifts. */
html.lp-search-open {
	overflow: hidden;
	padding-inline-end: var(--lp-search-scrollbar, 0px);
}
.lp-search {
	position: fixed;
	inset: 0;
	top: var(--lp-search-top, 0px); /* JS: the masthead's bottom edge on desktop, 0 on mobile */
	z-index: var(--lp-search-z);
}
.lp-search[hidden] {
	display: none;
}
.lp-search__scrim {
	position: absolute;
	inset: 0;
	background: var(--lp-search-scrim);
	opacity: 0;
	transition: opacity var(--lp-search-motion) ease;
}
.lp-search__panel {
	position: absolute;
	top: 0;
	inset-inline: 0;
	max-height: 100%;
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	background: var(--lp-search-panel-bg);
	color: var(--lp-search-ink);
	opacity: 0;
	transform: translateY(-8px);
	transition: opacity var(--lp-search-motion) ease, transform var(--lp-search-motion) ease;
}
.lp-search.is-open .lp-search__scrim {
	opacity: 1;
}
.lp-search.is-open .lp-search__panel {
	opacity: 1;
	transform: none;
}
.lp-search__inner {
	max-width: var(--lp-content-width, 1200px);
	margin-inline: auto;
	padding: var(--lp-search-pad-y) var(--lp-gutter) 40px;
}

/* ---------- the field row */
.lp-search__form {
	display: flex;
	align-items: center;
	gap: 16px;
	margin: 0;
	padding: 0 0 12px;
	border-bottom: 1px solid var(--lp-search-ink);
}
.lp-search__magnifier {
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.lp-search .lp-search__input {
	flex: 1 1 auto;
	min-width: 0;
	height: auto;
	margin: 0;
	padding: 6px 0;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	outline: none;
	color: var(--lp-search-ink);
	font-size: var(--lp-search-input-size);
	font-weight: 400;
	line-height: 1.3;
	letter-spacing: 0;
	-webkit-appearance: none;
	appearance: none;
}
.lp-search__input::placeholder {
	color: var(--lp-search-muted);
	opacity: 1;
}
.lp-search__input::-webkit-search-cancel-button,
.lp-search__input::-webkit-search-decoration {
	-webkit-appearance: none;
	display: none;
}
.lp-search__clear,
.lp-search__close {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	min-height: 0;
	color: var(--lp-search-ink) !important;
	font: inherit;
	line-height: 1;
	cursor: pointer;
}
/* Clear = a small bone disc inside the field row; close = a bare ink × apart from it. */
.lp-search__clear {
	width: 28px;
	height: 28px;
	border-radius: 50% !important;
	background: var(--lp-search-tile) !important;
	color: var(--lp-search-ink) !important;
}
.lp-search__close {
	margin-inline-start: 16px;
}
.lp-search__clear[hidden] {
	display: none;
}
.lp-search__close {
	width: 40px;
	height: 40px;
}
.lp-search__clear-icon,
.lp-search__close-icon {
	width: 22px;
	height: 22px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.5;
	stroke-linecap: round;
}
.lp-search__clear-icon {
	width: 12px;
	height: 12px;
	stroke-width: 2;
}
.lp-search__close-text {
	display: none;
	font-size: 15px;
	font-weight: 500;
}
.lp-search :is(a, button):focus-visible {
	outline: 2px solid var(--lp-search-focus);
	outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
	.lp-search__scrim,
	.lp-search__panel,
	.lp-search-trigger__label::after {
		transition: none;
	}
}
@media (max-width: 992px) {
	/* Full-screen takeover: the field row at the top, "ביטול" as text. */
	.lp-search__panel {
		bottom: 0;
		max-height: none;
		height: 100%;
		transform: none;
	}
	.lp-search__inner {
		padding: 12px var(--lp-gutter-narrow) 24px;
	}
	.lp-search__form {
		gap: 12px;
		padding-bottom: 10px;
	}
	.lp-search__magnifier {
		width: 20px;
		height: 20px;
	}
	.lp-search .lp-search__input {
		padding: 8px 0;
		font-size: var(--lp-search-input-size-m);
	}
	.lp-search__close {
		width: auto;
		height: 36px;
		margin-inline-start: 4px;
		padding-inline: 4px !important;
	}
	.lp-search__close-text {
		display: inline;
	}
	.lp-search__close-icon {
		display: none;
	}
}

/* ---------- dialog body: side column + main column */
.lp-search__body {
	margin-top: var(--lp-search-row-gap);
}
/* Desktop: side column (suggestions, then matching categories) beside the
 * products; on phones the DOM order reads top-down: suggestions · products ·
 * categories, so products stay within reach. */
.lp-search__cols {
	display: grid;
	grid-template-columns: var(--lp-search-side-w) minmax(0, 1fr);
	grid-template-areas: "side main" "after main";
	grid-template-rows: auto 1fr; /* the second side row hugs the first — the spanning main column must not split the rows */
	gap: var(--lp-search-row-gap) var(--lp-search-col-gap);
	align-items: start;
	align-content: start;
}
.lp-search__cols--single {
	grid-template-columns: minmax(0, 1fr);
	grid-template-areas: "main";
}
.lp-search__side {
	grid-area: side;
	display: flex;
	flex-direction: column;
	gap: var(--lp-search-row-gap);
	min-width: 0;
}
.lp-search__side--after {
	grid-area: after;
}
.lp-search__main {
	grid-area: main;
	min-width: 0;
}
.lp-search__group {
	margin: 0;
}
.lp-search__label {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin: 0 0 12px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.04em;
	line-height: 1.2;
	color: var(--lp-search-muted);
}
.lp-search__count {
	margin-inline-start: 4px;
	font-weight: 400;
}
.lp-search__textbtn {
	min-height: 0;
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	color: var(--lp-search-muted) !important;
	font: inherit;
	font-size: 12px;
	font-weight: 400;
	letter-spacing: 0;
	line-height: 1.2;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}
.lp-search__textbtn:hover {
	color: var(--lp-search-ink) !important;
}
.lp-search__list,
.lp-search__links,
.lp-search__products,
.lp-search__chips,
.lp-search__cats,
.lp-search__catkids {
	list-style: none;
	margin: 0;
	padding: 0;
}
.lp-search__list li,
.lp-search__links li,
.lp-search__products li,
.lp-search__chips li,
.lp-search__catkids li {
	margin: 0;
	padding: 0;
}
/* Options (recent / popular / suggestions): quiet rows, bone wash on hover + keyboard focus. */
.lp-search__option {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-inline: -8px;
	padding: 7px 8px;
	color: var(--lp-search-ink);
	font-size: 15px;
	line-height: 1.3;
	cursor: pointer;
}
.lp-search__option:hover,
.lp-search__option.is-active {
	background: var(--lp-search-tile);
}
.lp-search__icon {
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	fill: none;
	stroke: var(--lp-search-muted);
	stroke-width: 1.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.lp-search__text {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
/* Matched words: weight, never a highlighter colour. */
.lp-search mark {
	padding: 0;
	background: transparent;
	color: inherit;
	font-weight: 700;
}
.lp-search__links {
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.lp-search__catlink {
	color: var(--lp-search-ink);
	font-size: 15px;
	line-height: 1.3;
	text-decoration: none;
}
.lp-search__catlink:hover {
	color: var(--lp-search-ink);
	text-decoration: underline;
	text-underline-offset: 4px;
}
.lp-search__cats {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: 24px 32px;
}
.lp-search__catlink--parent {
	display: block;
	margin-bottom: 8px;
	font-weight: 600;
}
.lp-search__catkids {
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.lp-search__catkids .lp-search__catlink {
	color: var(--lp-search-muted);
	font-size: 14px;
}
.lp-search__catkids .lp-search__catlink:hover {
	color: var(--lp-search-ink);
}

/* ---------- products in the dialog: the PLP tile, smaller */
.lp-search__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 12px;
}
.lp-search__head .lp-search__label {
	margin: 0;
}
.lp-search__all {
	color: var(--lp-search-ink);
	font-size: 13px;
	font-weight: 500;
	text-decoration: underline;
	text-underline-offset: 4px;
}
.lp-search__all:hover {
	color: var(--lp-search-ink);
}
.lp-search__products {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 28px 16px;
}
.lp-search__products .lp-search__option {
	display: block;
	margin: 0;
	padding: 0;
	background: transparent;
}
.lp-search__product {
	display: block;
	color: var(--lp-search-ink);
	text-decoration: none;
}
.lp-search__tile {
	display: block;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background: var(--lp-search-photo-bg);
}
.lp-search__tile img {
	display: block;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	padding: var(--lp-search-tile-pad);
	object-fit: contain;
	filter: drop-shadow(0 14px 16px var(--lp-search-shadow));
	will-change: filter; /* own compositor layer, as plp.css does, so the shadow paints right away */
}
.lp-search__tile img[src*="-lpcard"] {   /* a processed card photo carries its own placement and shadow */
	padding: 0;
	filter: none;
	will-change: auto;
}
.lp-search__products .is-active .lp-search__tile {
	box-shadow: inset 0 0 0 1px var(--lp-search-ink);
}
.lp-search__ptext {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding-top: 12px;
}
.lp-search__ptitle {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.35;
}
.lp-search__product:hover .lp-search__ptitle {
	text-decoration: underline;
	text-underline-offset: 3px;
}
.lp-search__psub {
	overflow: hidden;
	color: var(--lp-search-muted);
	font-size: 13px;
	line-height: 1.35;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.lp-search__pprice {
	font-size: 14px;
	font-weight: 500;
	font-variant-numeric: tabular-nums;
}
.lp-search__pprice del {
	margin-inline-end: 6px;
	color: var(--lp-search-muted);
	font-weight: 400;
}
.lp-search__pprice ins {
	color: var(--lp-search-sale);
	text-decoration: none;
}
.lp-search__foot {
	display: flex;
	justify-content: flex-start; /* the CTA sits at the start edge, under the first column */
	margin-top: 28px;
}

/* ---------- buttons: black square CTA, outlined square chips */
.lp-search__cta,
.lp-search__chip {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 0 28px;
	border-radius: 0;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease;
}
.lp-search__cta {
	background: var(--lp-search-cta);
	color: #fff;
}
.lp-search__cta:hover {
	background: var(--lp-search-cta-hover);
	color: #fff;
}
.lp-search__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}
.lp-search__chip {
	min-height: 40px;
	padding: 0 18px;
	border: 1px solid var(--lp-search-ink);
	color: var(--lp-search-ink);
	font-weight: 500;
}
.lp-search__chip:hover {
	background: var(--lp-search-ink);
	color: #fff;
}

/* ---------- states inside the dialog */
.lp-search__notice {
	margin: 0 0 16px;
	color: var(--lp-search-muted);
	font-size: 15px;
}
.lp-search__notice b {
	color: var(--lp-search-ink);
	font-weight: 600;
}
.lp-search__none {
	max-width: 560px;
}
.lp-search__none-title {
	margin: 0 0 8px;
	font-size: 20px;
	font-weight: 400;
	line-height: 1.3;
}
.lp-search__none-title b {
	font-weight: 600;
}
.lp-search__none-hint {
	margin: 0 0 24px;
	color: var(--lp-search-muted);
	font-size: 15px;
}
.lp-search__none-label {
	margin: 0 0 12px;
	color: var(--lp-search-muted);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.04em;
}
.lp-search__loading,
.lp-search__unavailable {
	margin: 0;
	color: var(--lp-search-muted);
	font-size: 15px;
}

@media (max-width: 992px) {
	.lp-search__body {
		margin-top: 20px;
	}
	.lp-search__cols {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas: "side" "main" "after";
		grid-template-rows: auto;
		gap: 24px 0;
	}
	.lp-search__side {
		gap: 24px;
	}
	.lp-search__cats {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 20px 16px;
	}
	/* Result rows: thumbnail + text, no dividers. */
	.lp-search__products {
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
	}
	.lp-search__product {
		display: grid;
		grid-template-columns: var(--lp-search-tile-m) minmax(0, 1fr);
		gap: 14px;
		align-items: center;
		padding: 8px 0;
	}
	.lp-search__ptext {
		gap: 2px;
		padding-top: 0;
	}
	.lp-search__psub {
		font-size: 12px;
	}
	/* "All results" stays reachable at the bottom while the list scrolls. */
	.lp-search__foot {
		position: sticky;
		bottom: 0;
		margin: 16px calc(-1 * var(--lp-gutter-narrow)) 0;
		padding: 12px var(--lp-gutter-narrow) calc(12px + env(safe-area-inset-bottom));
		background: var(--lp-search-panel-bg);
	}
	.lp-search__cta {
		width: 100%;
	}
}

/* ---------- results page (/?s=…&post_type=product) */
/* Nothing matched: no filter column, no sort/count toolbar — the no-results block
 * and the best sellers take the full width. (Filter Everything's column is the
 * Elementor child container carrying its own class; class-only selectors.) */
body.lp-search-empty .lp-filters,
body.lp-search-empty .lp-filters-chips,
body.lp-search-empty .lp-filters-trigger,
body.lp-search-empty .shoptimizer-sorting,
body.lp-search-empty .woocommerce-result-count,
body.lp-search-empty .woocommerce-ordering {
	display: none !important;
}
.lp-search-notice {
	margin: 0 0 16px;
	color: var(--lp-search-muted);
	font-size: 15px;
}
.lp-search-notice b {
	color: var(--lp-search-ink);
	font-weight: 600;
}
.lp-search-noresults {
	padding: 8px 0 48px;
}
.lp-search-noresults__title {
	margin: 0 0 8px;
	color: var(--lp-search-ink);
	font-size: 22px;
	font-weight: 400;
	line-height: 1.3;
}
.lp-search-noresults__hint {
	margin: 0 0 16px;
	color: var(--lp-search-muted);
	font-size: 15px;
}
.lp-search-noresults__label {
	margin: 48px 0 20px;
	color: var(--lp-search-muted);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.04em;
}
@media (max-width: 992px) {
	.lp-search-noresults__title {
		font-size: 18px;
	}
	.lp-search-noresults__label {
		margin-top: 36px;
	}
}