/* -------------------------------------------*\
    Oreneta Site Search

    One field, two states. At rest it is a pill in the header. Open, a dialog
    lands exactly on top of it — same width, same corner — and the results fall
    out underneath, so nothing appears to move: the field grows, it is not
    replaced by a panel somewhere else. The desktop geometry is written by the
    script as inline top/left/width, because only it knows where the header put
    the field; everything else lives here.

    Below the tablet breakpoint the same dialog fills the screen. A 400px panel
    with the on-screen keyboard about to cover half of it is not a search.

    The prefix is `oreneta-sitesearch`. `oreneta-search` is the plain field the
    components bundle ships for the blog and the shop, styled there with
    `!important`, and the two names on one element is exactly why this widget
    used to arrive on the page wearing someone else's clothes.
\*------------------------------------------- */

/* stylelint-disable no-descending-specificity -- the open and resting search
   fields share controls, with state-specific rules deliberately following. */

.oreneta-sitesearch {
	--oreneta-sitesearch-height: 44px;
	--oreneta-sitesearch-radius: var(--oreneta-semantic-border-radius-pill, 999px);

	/* The field is a filled shape, not an outlined one: a hairline border in a
     header is the first thing to look cheap, and the site already has a
     secondary surface for exactly this. The panel behind it keeps the canvas,
     so the field stays legible as a separate thing while it is open. */
	--oreneta-sitesearch-field: var(--oreneta-semantic-color-background-subtle, #f5f5f5);
	--oreneta-sitesearch-field-hover: var(--oreneta-semantic-color-background-muted, #ebebeb);
	--oreneta-sitesearch-surface: var(--oreneta-semantic-color-background-canvas, #fff);
	--oreneta-sitesearch-focus: var(--oreneta-semantic-color-border-focus, var(--oreneta-semantic-color-action-primary, #3643ba));
	--oreneta-sitesearch-line: var(--oreneta-semantic-color-border-soft, #dedede);
	--oreneta-sitesearch-color: var(--oreneta-semantic-color-content-primary, #101010);
	--oreneta-sitesearch-muted: var(--oreneta-semantic-color-content-muted, #666);
	--oreneta-sitesearch-panel-width: 34rem;

	/* One inset for the whole component: the magnifier in the field, every
     thumbnail, every heading and every message start on the same vertical
     line, whichever state the panel is in. */
	--oreneta-sitesearch-inset: var(--oreneta-semantic-spacing-md, 16px);
	--oreneta-sitesearch-gap: 12px;
	--oreneta-sitesearch-duration: var(--oreneta-semantic-motion-duration-panel, 320ms);
	--oreneta-sitesearch-easing: cubic-bezier(0.32, 0.72, 0, 1);

	display: block;
	width: 100%;
	max-width: 100%;
}

/* Stated rather than assumed: with a theme that leaves inputs on the default
   content-box, the padded field measures 32px wider than the panel it sits in,
   spills past the sheet's clip, and takes the clear button with it — which is
   exactly how this widget lost its X. */

.oreneta-sitesearch,
.oreneta-sitesearch *,
.oreneta-sitesearch *::before,
.oreneta-sitesearch *::after {
	box-sizing: border-box;
}

.oreneta-sitesearch--icon {
	width: auto;
}

/* ── The field, at rest and open: the same object ── */

.oreneta-sitesearch__field {
	display: flex;
	align-items: center;
	gap: var(--oreneta-sitesearch-gap);
	width: 100%;
	min-height: var(--oreneta-sitesearch-height);
	padding-inline: var(--oreneta-sitesearch-inset);
	border: 0;
	border-radius: var(--oreneta-sitesearch-radius);
	background: var(--oreneta-sitesearch-field);
	color: var(--oreneta-sitesearch-color);
	cursor: text;
	transition: background-color var(--oreneta-semantic-motion-duration-quick, 160ms) var(--oreneta-sitesearch-easing);
}

.oreneta-sitesearch__field:hover {
	background: var(--oreneta-sitesearch-field-hover);
}

/* Keyboard users need to see where they are; a pointer user clicking into the
   field does not need a ring around it to know. */

.oreneta-sitesearch__field:has(.oreneta-sitesearch__control:focus-visible) {
	outline: 2px solid var(--oreneta-sitesearch-focus);
	outline-offset: 2px;
}

.oreneta-sitesearch__icon {
	display: inline-flex;
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	color: var(--oreneta-sitesearch-muted);
}

.oreneta-sitesearch__icon svg {
	display: block;
	width: 100%;
	height: 100%;
}

.oreneta-sitesearch__control {
	flex: 1 1 auto;
	min-width: 0;

	/* Height comes from the row, never from the input: give the input its own
     and the resting field and the open one disagree by a few pixels, which is
     the whole illusion — the text appears to hop the moment the panel opens. */
	height: auto;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	color: inherit;
	font: inherit;

	/* Never below 16px: iOS zooms the whole page into any smaller field it is
     asked to focus, and the header goes with it. */
	font-size: max(1rem, 16px);
	appearance: none;
}

.oreneta-sitesearch__control:focus {
	outline: none;
}

.oreneta-sitesearch__control::placeholder {
	color: var(--oreneta-sitesearch-muted);
	opacity: 1;
}

.oreneta-sitesearch__control::-webkit-search-cancel-button,
.oreneta-sitesearch__control::-webkit-search-decoration {
	display: none;
}

/* ── Icon-only trigger, for headers with no room for a field ── */

.oreneta-sitesearch__trigger {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: var(--oreneta-sitesearch-height);
	padding-inline: 12px;
	border: 0;
	border-radius: var(--oreneta-sitesearch-radius);
	background: none;
	color: inherit;
	font: inherit;
	cursor: pointer;
}

.oreneta-sitesearch__trigger:hover .oreneta-sitesearch__icon,
.oreneta-sitesearch__trigger:focus-visible .oreneta-sitesearch__icon {
	color: var(--oreneta-sitesearch-color);
}

.oreneta-sitesearch__trigger:focus-visible {
	outline: 2px solid var(--oreneta-sitesearch-focus);
	outline-offset: 2px;
}

/* ── The dialog ── */

.oreneta-sitesearch__dialog {
	position: fixed;
	width: min(var(--oreneta-sitesearch-panel-width), 100dvw - 2rem);
	max-width: none;
	max-height: calc(100dvh - 2rem);
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	overflow: visible;

	/* Replaced by the script with the resting field's own rectangle. Until then
     the panel is at least somewhere sane rather than in a corner. */
	inset: 5rem auto auto 50%;
	translate: -50% 0;
}

.oreneta-sitesearch__dialog:not([open]) {
	display: none;
}

.oreneta-sitesearch__dialog::backdrop {
	background: var(--oreneta-semantic-color-overlay-default, rgb(0 0 0 / 25%));
	opacity: 0;
	transition: opacity var(--oreneta-sitesearch-duration, 320ms) var(--oreneta-sitesearch-easing, ease);
}

.oreneta-sitesearch__dialog[open]::backdrop {
	opacity: 1;
}

.oreneta-sitesearch__dialog.is-closing::backdrop {
	opacity: 0;
}

.oreneta-sitesearch__sheet {
	display: flex;
	flex-direction: column;
	width: 100%;
	max-height: inherit;
	border-radius: var(--oreneta-semantic-border-radius-lg, 16px);
	background: var(--oreneta-sitesearch-surface);
	box-shadow: 0 24px 64px rgb(0 0 0 / 18%);
	overflow: hidden;
}

/* Opening is a short settle, not a slide: the panel is already where the field
   was, so anything longer would read as the field jumping. The transform is
   transient — one left on a settled dialog stops iOS scrolling its content. */

.oreneta-sitesearch__dialog.is-opening .oreneta-sitesearch__sheet {
	animation: oreneta-sitesearch-in var(--oreneta-sitesearch-duration) var(--oreneta-sitesearch-easing) both;
}

.oreneta-sitesearch__dialog.is-closing .oreneta-sitesearch__sheet {
	animation: oreneta-sitesearch-out var(--oreneta-sitesearch-duration) var(--oreneta-sitesearch-easing) both;
}

@keyframes oreneta-sitesearch-in {

	from {
		opacity: 0;
		scale: 1 0.97;
	}

	to {
		opacity: 1;
		scale: 1 1;
	}
}

@keyframes oreneta-sitesearch-out {

	from {
		opacity: 1;
	}

	to {
		opacity: 0;
	}
}

@media (prefers-reduced-motion: reduce) {

	.oreneta-sitesearch__dialog.is-opening .oreneta-sitesearch__sheet,
	.oreneta-sitesearch__dialog.is-closing .oreneta-sitesearch__sheet {
		animation-duration: 1ms;
	}
}

/* Open, the field gives up its pill and spans the head of the sheet: a rounded
   field floating inside a rounded panel is two shapes fighting for the same
   corner. The fill stays, so it still reads as the field that was clicked. */

.oreneta-sitesearch__field--open {
	flex-shrink: 0;
	border-bottom: 1px solid var(--oreneta-sitesearch-line);
	border-radius: 0;
	background: var(--oreneta-sitesearch-surface);
}

.oreneta-sitesearch__field--open:hover {
	background: var(--oreneta-sitesearch-surface);
}

/* No ring on the open one: the panel is already the thing that has focus, and
   the ring only ever shows as a stray line where the sheet clips it. */

.oreneta-sitesearch__field--open:has(.oreneta-sitesearch__control:focus-visible) {
	outline: 0;
}

body .oreneta-sitesearch button.oreneta-sitesearch__clear,
body .oreneta-sitesearch button.oreneta-sitesearch__cancel {
	flex-shrink: 0;
	appearance: none !important;
	border: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	color: var(--oreneta-sitesearch-muted) !important;
	font: inherit;
	letter-spacing: 0 !important;
	text-shadow: none !important;
	text-transform: none !important;
	-webkit-text-fill-color: currentcolor;
	cursor: pointer;
}

body .oreneta-sitesearch button.oreneta-sitesearch__clear {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	padding: 0;
	border-radius: var(--oreneta-semantic-border-radius-pill, 999px);
}

body .oreneta-sitesearch button.oreneta-sitesearch__clear[hidden] {
	display: none !important;
}

/* In the resting field the X has to clear the space the round pill leaves at
   its end, so it does not sit on top of the corner. */

.oreneta-sitesearch__field:not(.oreneta-sitesearch__field--open) .oreneta-sitesearch__clear {
	margin-inline-end: calc(var(--oreneta-sitesearch-inset) * -0.25);
}

body .oreneta-sitesearch button.oreneta-sitesearch__clear:hover,
body .oreneta-sitesearch button.oreneta-sitesearch__clear:focus-visible {
	background: var(--oreneta-semantic-color-background-subtle, #f5f5f5) !important;
	color: var(--oreneta-sitesearch-color) !important;
}

.oreneta-sitesearch__clear .oreneta-sitesearch__icon {
	width: 16px;
	height: 16px;
	color: currentcolor;
}

.oreneta-sitesearch__clear svg,
.oreneta-sitesearch__clear svg * {
	stroke: currentcolor !important;
}

/* The one control on the phone panel that is nothing but a word, so it has to
   read as a control: full text colour rather than the muted grey the icons use,
   and a target you can actually hit with a thumb. */

body .oreneta-sitesearch button.oreneta-sitesearch__cancel {
	display: none;
	min-height: 44px;
	padding: 8px 4px;
	color: var(--oreneta-sitesearch-color) !important;
	font-size: 0.9375rem;
	font-weight: var(--oreneta-core-font-weight-medium, 500);
	white-space: nowrap;
}

/* ── Results ──

   Rows run the full width of the sheet, so the line that separates two groups
   can run the full width too: an inset row with a divider that stops short of
   the edge leaves the panel looking like it was cut out of something bigger.
   The breathing room comes from the padding inside each row instead.
*/

.oreneta-sitesearch__results {
	flex: 1 1 auto;
	min-height: 0;
	padding-block: var(--oreneta-semantic-spacing-sm, 8px);
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
}

.oreneta-sitesearch__results:empty {
	display: none;
}

.oreneta-sitesearch__message {
	margin: 0;
	padding: var(--oreneta-semantic-spacing-lg, 24px) var(--oreneta-sitesearch-inset);
	color: var(--oreneta-sitesearch-muted);
	font-size: 0.9375rem;
}

.oreneta-sitesearch__group + .oreneta-sitesearch__group {
	margin-top: var(--oreneta-semantic-spacing-sm, 8px);
	border-top: 1px solid var(--oreneta-sitesearch-line);
}

.oreneta-sitesearch__group-title {
	margin: 0;
	padding: var(--oreneta-semantic-spacing-sm, 8px) var(--oreneta-sitesearch-inset) var(--oreneta-semantic-spacing-xs, 4px);
	color: var(--oreneta-sitesearch-muted);
	font-size: 0.75rem;
	font-weight: var(--oreneta-core-font-weight-semibold, 600);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.oreneta-sitesearch__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.oreneta-sitesearch__option {
	display: flex;
	align-items: center;
	gap: var(--oreneta-sitesearch-gap);
	padding: var(--oreneta-semantic-spacing-sm, 8px) var(--oreneta-sitesearch-inset);
	color: inherit;
	text-decoration: none;
}

/* Hover and keyboard selection are one highlight on purpose: with two, the
   pointer and the arrow keys appear to disagree about which row is next. */

.oreneta-sitesearch__option:hover,
.oreneta-sitesearch__option:focus-visible,
.oreneta-sitesearch__option[aria-selected="true"] {
	background: var(--oreneta-semantic-color-background-subtle, #f5f5f5);
	outline: none;
}

.oreneta-sitesearch__thumb {
	flex-shrink: 0;
	width: 48px;
	height: 48px;

	/* Square, like every other product image on the site. */
	border-radius: 0;
	background: var(--oreneta-semantic-color-background-muted, #ebebeb);
	object-fit: cover;
}

.oreneta-sitesearch__body {
	display: flex;
	flex-direction: column;
	gap: var(--oreneta-semantic-spacing-2xs, 2px);
	min-width: 0;
}

.oreneta-sitesearch__title {
	overflow: hidden;
	color: var(--oreneta-sitesearch-color);
	font-size: 0.9375rem;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* The part that was typed is picked out with weight, not with a colour or a
   highlighter: semibold is enough to find the word at a glance and keeps the
   line reading as one title. */

.oreneta-sitesearch__title mark {
	background: none;
	color: inherit;
	font-weight: var(--oreneta-core-font-weight-semibold, 600);
}

.oreneta-sitesearch__meta {
	overflow: hidden;
	color: var(--oreneta-sitesearch-muted);
	font-size: 0.8125rem;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Prices arrive as the shop's own markup, so they are painted the way the shop
   paints them: the yellow block belongs to the amount alone. A prefix like
   «Desde», and the struck-through half of a sale price, stay outside it — the
   chip swallowing the whole line is what made these rows read as
   «Desde 4,50 €» in one solid highlighter stroke. */

.oreneta-sitesearch__price {
	display: flex;
	align-items: baseline;
	gap: 6px;
	align-self: flex-start;
	font-size: 0.8125rem;
	line-height: 1.4;
	white-space: nowrap;
}

.oreneta-sitesearch__price .price {
	display: inline-flex;
	align-items: baseline;
	gap: 6px;
}

.oreneta-sitesearch__price .oreneta-price-prefix {
	color: var(--oreneta-sitesearch-muted);
}

.oreneta-sitesearch__price .woocommerce-Price-amount,
.oreneta-sitesearch__price .amount {
	padding:
		var(--oreneta-component-price-chip-padding-y, 2px)
		var(--oreneta-component-price-chip-padding-x, 8px);
	border-radius: var(--oreneta-component-price-chip-border-radius, 0);
	background: var(--oreneta-component-price-chip-background, var(--oreneta-core-color-price-yellow-400, #ffcd4f));
	color: var(--oreneta-component-price-chip-content, var(--oreneta-semantic-color-content-primary, #101010));
	font-weight: var(--oreneta-core-font-weight-medium, 500);
}

/* The old price on a sale keeps its rule and stays out of the chip. */

.oreneta-sitesearch__price del,
.oreneta-sitesearch__price del .woocommerce-Price-amount,
.oreneta-sitesearch__price del .amount {
	padding: 0;
	background: none;
	color: var(--oreneta-sitesearch-muted);
	font-weight: var(--oreneta-core-font-weight-normal, 400);
	text-decoration: line-through;
}

.oreneta-sitesearch__price ins {
	text-decoration: none;
}

/* The last row of the list, not a footer bolted under it: same inset, same
   highlight, so arrowing onto it does not look like the selection left the
   panel. */

.oreneta-sitesearch__all {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--oreneta-sitesearch-gap);
	margin-top: var(--oreneta-semantic-spacing-sm, 8px);

	/* Pulled down over the panel's own bottom padding so the row ends where the
     sheet ends: highlighted, it fills the rounded corner instead of floating
     above a strip of leftover white. */
	margin-bottom: calc(-1 * var(--oreneta-semantic-spacing-sm, 8px));
	padding: var(--oreneta-semantic-spacing-md, 16px) var(--oreneta-sitesearch-inset);
	border-top: 1px solid var(--oreneta-sitesearch-line);
	color: var(--oreneta-sitesearch-color);
	font-size: 0.9375rem;
	font-weight: var(--oreneta-core-font-weight-semibold, 600);
	text-decoration: none;
}

.oreneta-sitesearch__all:hover,
.oreneta-sitesearch__all:focus-visible,
.oreneta-sitesearch__all[aria-selected="true"] {
	background: var(--oreneta-semantic-color-background-subtle, #f5f5f5);
	outline: none;
}

.oreneta-sitesearch__all-count {
	color: var(--oreneta-sitesearch-muted);
	font-weight: var(--oreneta-core-font-weight-normal, 400);
}

/* ── Recent searches ── */

.oreneta-sitesearch__recent-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--oreneta-sitesearch-gap);
	padding-inline: var(--oreneta-sitesearch-inset);
}

.oreneta-sitesearch__recent-head .oreneta-sitesearch__group-title {
	padding-inline: 0;
}

body .oreneta-sitesearch button.oreneta-sitesearch__forget {
	appearance: none !important;
	border: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	color: var(--oreneta-sitesearch-muted) !important;
	font: inherit;
	font-size: 0.8125rem;
	letter-spacing: 0 !important;
	text-decoration: underline;
	text-shadow: none !important;
	text-transform: none !important;
	-webkit-text-fill-color: currentcolor;
	cursor: pointer;
}

body .oreneta-sitesearch button.oreneta-sitesearch__forget:hover,
body .oreneta-sitesearch button.oreneta-sitesearch__forget:focus-visible {
	color: var(--oreneta-sitesearch-color) !important;
}

/* ── Waiting ── */

.oreneta-sitesearch__results[aria-busy="true"] .oreneta-sitesearch__group,
.oreneta-sitesearch__results[aria-busy="true"] .oreneta-sitesearch__all {
	opacity: 0.5;
}

.oreneta-sitesearch__skeleton {
	display: flex;
	align-items: center;
	gap: var(--oreneta-sitesearch-gap);
	padding: var(--oreneta-semantic-spacing-sm, 8px) var(--oreneta-sitesearch-inset);
}

.oreneta-sitesearch__skeleton::before,
.oreneta-sitesearch__skeleton::after {
	content: "";
	height: 48px;
	background: var(--oreneta-semantic-color-background-muted, #ebebeb);
	animation: oreneta-sitesearch-pulse 1.2s ease-in-out infinite;
}

.oreneta-sitesearch__skeleton::before {
	width: 48px;
	flex-shrink: 0;
}

.oreneta-sitesearch__skeleton::after {
	flex: 1 1 auto;
	height: 12px;
}

@keyframes oreneta-sitesearch-pulse {

	50% {
		opacity: 0.45;
	}
}

@media (prefers-reduced-motion: reduce) {

	.oreneta-sitesearch__skeleton::before,
	.oreneta-sitesearch__skeleton::after {
		animation: none;
	}
}

/* ── Phones: the dialog is the screen ── */

@media (max-width: 767px) {

	.oreneta-sitesearch__dialog {

		/* Beats the geometry the script measured for the desktop panel, which is
       meaningless once the sheet is the whole screen. */
		inset: 0 !important;
		width: 100% !important;
		max-width: none !important;
		height: 100dvh !important;
		max-height: 100dvh !important;
		translate: none !important;
	}

	.oreneta-sitesearch__sheet {
		height: 100%;
		max-height: none;
		border-radius: 0;
		box-shadow: none;
	}

	.oreneta-sitesearch__field--open {
		padding-block: max(8px, env(safe-area-inset-top, 0px)) 8px;
	}

	body .oreneta-sitesearch button.oreneta-sitesearch__cancel {
		display: inline-flex !important;
		align-items: center;
	}

	.oreneta-sitesearch__results {
		padding-bottom: max(16px, env(safe-area-inset-bottom, 0px));
	}

	.oreneta-sitesearch__dialog.is-opening .oreneta-sitesearch__sheet {
		animation-name: oreneta-sitesearch-sheet-in;
	}

	@keyframes oreneta-sitesearch-sheet-in {

		from {
			opacity: 0;
			transform: translateY(12px);
		}

		to {
			opacity: 1;
			transform: translateY(0);
		}
	}
}

/* stylelint-enable no-descending-specificity */