/**
 * Finzo Product Search — storefront panel.
 * Every token here is set from the plugin settings via wp_add_inline_style().
 */

.finzo-ps-root[hidden] {
	display: none !important;
}

.finzo-ps-root {
	position: fixed;
	inset: 0;
	z-index: 999999;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	font-family: var(--finzo-font, inherit);
	font-weight: var(--finzo-weight, 500);
}

.finzo-ps-backdrop {
	position: absolute;
	inset: 0;
	background: var(--finzo-overlay, #14161a);
	opacity: var(--finzo-overlay-alpha, 0.55);
	backdrop-filter: blur(var(--finzo-blur, 8px));
	-webkit-backdrop-filter: blur(var(--finzo-blur, 8px));
}

.finzo-ps-root[data-blur="0"] .finzo-ps-backdrop {
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}

.finzo-ps-panel {
	position: relative;
	width: min(var(--finzo-panel-w, 640px), calc(100vw - 32px));
	max-height: var(--finzo-panel-h, 520px);
	margin-top: 12vh;
	display: flex;
	flex-direction: column;
	background: var(--finzo-panel-bg, #fff);
	color: var(--finzo-text, #14161a);
	border: 1px solid var(--finzo-border, #e7e3dc);
	border-radius: calc(var(--finzo-radius, 14px) * var(--finzo-radius-scale, 1));
	box-shadow: 0 24px 60px rgba(20, 22, 26, 0.24);
	overflow: hidden;
	animation: var(--finzo-anim, finzo-ps-in) var(--finzo-dur, 180ms) ease;
}

/* Spotlight — centred, page dimmed. */

/* Anchored under the field.
   JS sets position, width, top and left, and marks the root as anchored. A
   fixed panel is out of flow, so the root stays flex and still centres the
   panel when there is nothing to anchor to. */

.finzo-ps-root[data-anchored] .finzo-ps-backdrop {
	background: transparent;
	opacity: 1;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}

/* Width, position and max height for the anchored look are set in JS from the
   field's own box, so nothing is forced to the viewport here. */

.finzo-ps-root[data-anchored] .finzo-ps-panel {
	max-width: none;
}

@keyframes finzo-ps-in {
	from {
		opacity: 0;
		transform: translateY(-8px) scale(0.985);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.finzo-ps-panel {
		animation: none;
	}
}

/* Input */

.finzo-ps-search {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: calc(var(--finzo-pad, 16px) * 0.9) var(--finzo-pad, 16px);
	border-bottom: 1px solid var(--finzo-border, #e7e3dc);
	background: var(--finzo-panel-bg, #fff);
}

.finzo-ps-input {
	flex: 1;
	min-width: 0;
	border: 0;
	outline: 0;
	background: transparent;
	font-family: inherit;
	font-size: var(--finzo-fs-query, 17px);
	font-weight: 600;
	color: var(--finzo-text, #14161a);
}

.finzo-ps-input::placeholder {
	color: var(--finzo-meta, #6d6862);
	font-weight: 500;
}

.finzo-ps-close {
	flex: none;
	border: 1px solid var(--finzo-border, #e7e3dc);
	background: var(--finzo-input-bg, #f7f5f1);
	color: var(--finzo-meta, #6d6862);
	border-radius: 8px;
	padding: 4px 8px;
	font: inherit;
	font-size: var(--finzo-fs-meta, 12.5px);
	cursor: pointer;
}

/* Results */

.finzo-ps-results {
	flex: 1;
	overflow-y: auto;
	padding: calc(var(--finzo-pad, 16px) * 0.5) 0;
	margin: 0;
	list-style: none;
}

.finzo-ps-group-label {
	padding: 8px var(--finzo-pad, 16px) 4px;
	margin: 0;
	font-size: var(--finzo-fs-meta, 12.5px);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--finzo-meta, #6d6862);
}

.finzo-ps-item {
	margin: 0 calc(var(--finzo-pad, 16px) * 0.5);
}

/* The results size themselves against the box they are in, not the window:
   the same panel is a full-width spotlight on one page and a 300px sidebar
   box on another, and only the box knows which. Declared on the parent of
   the list rather than the list, so the list itself can be restyled too — a
   container query cannot reach the container it is asking about. */
.finzo-ps-panel,
.finzo-ps-inline-results {
	container: finzo-results / inline-size;
}

.finzo-ps-link {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: calc(var(--finzo-gap, 10px) + 2px);
	padding: calc(var(--finzo-gap, 10px) * var(--finzo-density, 1)) calc(var(--finzo-pad, 16px) * 0.6);
	border-radius: calc(var(--finzo-radius, 14px) * 0.6);
	text-decoration: none;
	color: inherit;
}

/* Too narrow for three columns. The price never shrinks — it is one
   unbreakable line — so given its own column it starves the title until the
   words break one per line. Below this it goes under the title instead. */
@container finzo-results ( max-width: 400px ) {
	.finzo-ps-link {
		grid-template-columns: auto minmax(0, 1fr);
		align-items: start;
	}

	.finzo-ps-thumb {
		grid-column: 1;
		grid-row: 1 / span 2;
		align-self: start;
	}

	.finzo-ps-body {
		grid-column: 2;
		grid-row: 1;
	}

	.finzo-ps-price {
		grid-column: 2;
		grid-row: 2;
		margin-top: 3px;
		text-align: left;
	}

	.finzo-ps-price .sale-price {
		justify-content: flex-start;
	}
}

.finzo-ps-item.is-active .finzo-ps-link,
.finzo-ps-link:hover,
.finzo-ps-link:focus-visible {
	background: var(--finzo-hover-bg, #f2f0ff);
	outline: none;
}

.finzo-ps-thumb {
	width: var(--finzo-img, 56px);
	height: var(--finzo-img, 56px);
	object-fit: cover;
	border-radius: calc(var(--finzo-radius, 14px) * 0.5);
	background: var(--finzo-input-bg, #f7f5f1);
	flex: none;
}

.finzo-ps-root[data-ratio="portrait"] .finzo-ps-thumb,
.finzo-ps-inline[data-ratio="portrait"] .finzo-ps-thumb {
	height: calc(var(--finzo-img, 56px) * 1.333);
}

.finzo-ps-root[data-ratio="landscape"] .finzo-ps-thumb,
.finzo-ps-inline[data-ratio="landscape"] .finzo-ps-thumb {
	height: calc(var(--finzo-img, 56px) * 0.75);
}

.finzo-ps-title {
	margin: 0;
	font-size: var(--finzo-fs-title, 15px);
	font-weight: 600;
	line-height: 1.35;
	color: var(--finzo-text, #14161a);
}

.finzo-ps-root[data-clamp="1"] .finzo-ps-title,
.finzo-ps-root[data-clamp="2"] .finzo-ps-title,
.finzo-ps-inline[data-clamp="1"] .finzo-ps-title,
.finzo-ps-inline[data-clamp="2"] .finzo-ps-title {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.finzo-ps-root[data-clamp="1"] .finzo-ps-title,
.finzo-ps-inline[data-clamp="1"] .finzo-ps-title {
	-webkit-line-clamp: 1;
	line-clamp: 1;
}

.finzo-ps-root[data-clamp="2"] .finzo-ps-title,
.finzo-ps-inline[data-clamp="2"] .finzo-ps-title {
	-webkit-line-clamp: 2;
	line-clamp: 2;
}

.finzo-ps-title mark {
	background: transparent;
	color: var(--finzo-accent, #5b4bff);
	font-weight: 700;
}

.finzo-ps-meta {
	margin: 3px 0 0;
	font-size: var(--finzo-fs-meta, 12.5px);
	color: var(--finzo-meta, #6d6862);
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
}

.finzo-ps-price {
	font-size: var(--finzo-fs-price, 15px);
	font-weight: 700;
	color: var(--finzo-price, #14161a);
	white-space: nowrap;
}

.finzo-ps-price del {
	opacity: 0.5;
	font-weight: 500;
	margin-right: 4px;
}

.finzo-ps-price ins {
	text-decoration: none;
	color: var(--finzo-sale, #c0553f);
}

.finzo-ps-badge {
	font-size: calc(var(--finzo-fs-meta, 12.5px) * 0.85);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	background: var(--finzo-badge-bg, #c8f04a);
	color: #14161a;
	border-radius: 999px;
	padding: 2px 8px;
}

.finzo-ps-oos {
	color: var(--finzo-sale, #c0553f);
}

/* States */

.finzo-ps-state {
	padding: 28px var(--finzo-pad, 16px);
	margin: 0;
	text-align: center;
	font-size: var(--finzo-fs-meta, 12.5px);
	color: var(--finzo-meta, #6d6862);
}

.finzo-ps-relaxed {
	margin: 0;
	padding: 8px var(--finzo-pad, 16px);
	font-size: var(--finzo-fs-meta, 12.5px);
	color: var(--finzo-meta, #6d6862);
}

.finzo-ps-recent {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	padding: 8px var(--finzo-pad, 16px);
	margin: 0;
	list-style: none;
}

.finzo-ps-recent button {
	border: 1px solid var(--finzo-border, #e7e3dc);
	background: var(--finzo-input-bg, #f7f5f1);
	color: var(--finzo-meta, #6d6862);
	border-radius: 999px;
	padding: 4px 11px;
	font: inherit;
	font-size: var(--finzo-fs-meta, 12.5px);
	cursor: pointer;
}

/* Footer */

.finzo-ps-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 10px var(--finzo-pad, 16px);
	border-top: 1px solid var(--finzo-border, #e7e3dc);
	background: var(--finzo-input-bg, #f7f5f1);
	font-size: var(--finzo-fs-meta, 12.5px);
	color: var(--finzo-meta, #6d6862);
}

.finzo-ps-seeall {
	color: var(--finzo-accent, #5b4bff);
	font-weight: 700;
	text-decoration: none;
}

/* Triggers */

/* Inline looks — a real search box in the flow of the page. */

.finzo-ps-inline {
	position: relative;
	font-family: var(--finzo-font, inherit);
	max-width: 100%;
}

.finzo-ps-inline-form {
	display: flex;
	margin: 0;
}

.finzo-ps-inline-input {
	width: 100%;
	padding: 11px 15px;
	border: 1px solid var(--finzo-border, #e7e3dc);
	border-radius: calc(var(--finzo-radius, 14px) * 0.6);
	background: var(--finzo-input-bg, #f7f5f1);
	color: var(--finzo-text, #14161a);
	font: inherit;
	font-size: var(--finzo-fs-query, 17px);
}

.finzo-ps-inline-input:focus {
	outline: 2px solid var(--finzo-accent, #5b4bff);
	outline-offset: 1px;
}

.finzo-ps-inline-results {
	margin-top: 8px;
}

.finzo-ps-inline-results .finzo-ps-results {
	max-height: none;
	padding: 0;
}

/* Dropdown variant floats its results over the page below the box. */

.finzo-ps-inline[data-look="inline_dropdown"] .finzo-ps-inline-results {
	position: absolute;
	z-index: 60;
	left: 0;
	right: 0;
	margin-top: 6px;
	background: var(--finzo-panel-bg, #fff);
	border: 1px solid var(--finzo-border, #e7e3dc);
	border-radius: calc(var(--finzo-radius, 14px) * 0.7);
	box-shadow: 0 14px 34px rgba(20, 22, 26, 0.16);
	overflow: hidden;
}

.finzo-ps-inline[data-look="inline_dropdown"] .finzo-ps-results {
	max-height: var(--finzo-panel-h, 520px);
	overflow-y: auto;
	padding: 6px 0;
}

/* Results-below variant stays in the document flow. */

.finzo-ps-inline[data-look="inline_results"] .finzo-ps-inline-results .finzo-ps-item {
	margin: 0;
	border-bottom: 1px solid var(--finzo-border, #e7e3dc);
}

.finzo-ps-inline[data-look="inline_results"] .finzo-ps-link {
	border-radius: 0;
	padding-left: 0;
	padding-right: 0;
}

/* Mobile */

@media screen and ( max-width: 767px ) {

	.finzo-ps-footer {
		display: none;
	}

	.finzo-ps-root[data-anchored] .finzo-ps-panel {
		width: calc(100vw - 16px) !important;
		left: 8px !important;
	}
}

/* =====================================================================
   Spotlight: opening motion and ready-made designs.

   Both are driven by attributes the script only sets for the spotlight
   type, so nothing here can reach the theme search box, the shortcode or
   the mobile panel. The designs decorate — the colours and sizes they
   imply are real settings the merchant can edit afterwards.
   ===================================================================== */

/* Minimal — nothing floats, nothing glows. */

/* Paper — a warm, printed drop shadow. */

/* Glass — the page shows through the panel itself, not just the backdrop.
   Browsers without color-mix() keep the solid panel background. */

/* Midnight — depth from a hard shadow, focus from an accent ring. */

/* Aurora — a gradient that lives in the border itself. The panel background
   is painted over the gradient with background-clip, so the colour token
   still controls the surface while the edge keeps moving. */

/* WooCommerce's price markup carries assistive-only text ("Original price
   was: …"). Themes normally hide .screen-reader-text globally, but the panel
   must not depend on that — without this rule the sentence prints inside the
   result row and pushes the product title out of view. */

.finzo-ps-panel .screen-reader-text,
.finzo-ps-inline .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* ------------------------------------------------- more opening motion */

/* --------------------------------------------------- more designs

   The looping decoration below is painted into the panel's own background
   layers rather than into a pseudo-element. Nothing is stacked over the
   results, so no z-index has to be invented and the results stay clickable
   wherever the animation happens to be. */

/* Frost — a slow shimmer crossing a cool, pale surface. */

/* Noir — no shadow, no rounding, just a hard white rule. */

/* Terminal — a monospaced command line with a caret that blinks in the
   search field. The typeface is part of the design, not a setting. */

/* Sunset — a warm wash over the top of the panel that drifts sideways. */

/* Prism — an iridescent band travelling across the surface. */

/* Neon — a glow that breathes rather than sits still. */

/* Anything that loops must stop for a visitor who asked for less motion.
   The panel still opens — it simply arrives already settled. */

/* Blueprint — graph paper that drifts one square at a time underneath the
   results. The grid is a repeating gradient, so it costs no image request. */

/* Halo — a ring of light that widens and settles, over and over. */

/* Mesh — three coloured blooms sliding past each other. Because the three
   layers move at different rates the surface never repeats exactly. */

/* Beam — a stage light crossing a dark panel. */

/* =====================================================================
   The panel owns its own form fields.

   Themes style search inputs globally, and they do it with selectors that
   outrank a single class: Blocksy, for one, uses
   `input:is([type="search"], …)` — specificity (0,1,1) against our (0,1,0)
   — to set colour, border, radius, padding, height and a focus outline.
   The result was a search field wearing the theme's colours and a theme
   focus ring inside a panel the merchant had painted themselves, with no
   Finzo setting able to change it.

   Two classes deep (0,2,0) wins that contest without !important, so every
   property a theme is likely to inject is restated here from the tokens.
   ===================================================================== */

.finzo-ps-panel .finzo-ps-input,
.finzo-ps-panel .finzo-ps-input:focus,
.finzo-ps-panel .finzo-ps-input:focus-visible {
	appearance: none;
	-webkit-appearance: none;
	width: auto;
	height: auto;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	outline: 0;
	outline-offset: 0;
	color: var(--finzo-text, #14161a);
	font-family: inherit;
	font-size: var(--finzo-fs-query, 17px);
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: normal;
	text-transform: none;
	transition: none;
}

.finzo-ps-panel .finzo-ps-input::placeholder {
	color: var(--finzo-meta, #6d6862);
	font-weight: 500;
	opacity: 1;
}

/* Chrome draws its own clear button on a search field, in its own colour. */

.finzo-ps-panel .finzo-ps-input::-webkit-search-cancel-button,
.finzo-ps-inline .finzo-ps-inline-input::-webkit-search-cancel-button {
	appearance: none;
	-webkit-appearance: none;
}

.finzo-ps-panel .finzo-ps-close {
	appearance: none;
	-webkit-appearance: none;
	width: auto;
	height: auto;
	min-height: 0;
	border: 1px solid var(--finzo-border, #e7e3dc);
	border-radius: 8px;
	background: var(--finzo-input-bg, #f7f5f1);
	color: var(--finzo-meta, #6d6862);
	text-transform: none;
	letter-spacing: normal;
}

/* The shortcode box is a real box, so it keeps its border and background —
   they just have to be the merchant's, not the theme's. */

.finzo-ps-inline .finzo-ps-inline-input {
	appearance: none;
	-webkit-appearance: none;
	width: 100%;
	height: auto;
	min-height: 0;
	margin: 0;
	padding: 11px 15px;
	border: 1px solid var(--finzo-border, #e7e3dc);
	border-radius: calc(var(--finzo-radius, 14px) * 0.6);
	background: var(--finzo-input-bg, #f7f5f1);
	box-shadow: none;
	color: var(--finzo-text, #14161a);
	font-family: inherit;
	font-size: var(--finzo-fs-query, 17px);
	line-height: 1.3;
	letter-spacing: normal;
	text-transform: none;
}

.finzo-ps-inline .finzo-ps-inline-input::placeholder {
	color: var(--finzo-meta, #6d6862);
	opacity: 1;
}

.finzo-ps-inline .finzo-ps-inline-input:focus,
.finzo-ps-inline .finzo-ps-inline-input:focus-visible {
	border-color: var(--finzo-accent, #5b4bff);
	outline: 2px solid var(--finzo-accent, #5b4bff);
	outline-offset: 1px;
}

/* =====================================================================
   Result card layout.

   The Result card screen offers a grid, a price under the title and an
   add-to-cart button; each of those is an attribute on the panel or the
   inline box, set from the same setting on both.
   ===================================================================== */

/* Price under the title rather than in its own column. */

.finzo-ps-root[data-price="under"] .finzo-ps-price,
.finzo-ps-inline[data-price="under"] .finzo-ps-price {
	display: block;
	margin-top: 3px;
	text-align: left;
}

/* Grid — cards stack their image above the text instead of beside it. */

.finzo-ps-root[data-layout="grid"] .finzo-ps-results,
.finzo-ps-inline[data-layout="grid"] .finzo-ps-results {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
	gap: var(--finzo-gap, 10px);
	padding: 0 var(--finzo-pad, 16px) var(--finzo-pad, 16px);
}

/* Headings and empty states are full-width rows inside that grid. */

.finzo-ps-root[data-layout="grid"] .finzo-ps-results > li:not(.finzo-ps-item),
.finzo-ps-inline[data-layout="grid"] .finzo-ps-results > li:not(.finzo-ps-item) {
	grid-column: 1 / -1;
}

/* The row is a three-column grid, so flex-direction alone did nothing here
   and the text column collapsed to zero width. A card stacks, so it has to
   become a flex column outright. */

.finzo-ps-root[data-layout="grid"] .finzo-ps-link,
.finzo-ps-inline[data-layout="grid"] .finzo-ps-link {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	justify-content: flex-start;
	gap: 8px;
	height: 100%;
}

.finzo-ps-root[data-layout="grid"] .finzo-ps-body,
.finzo-ps-inline[data-layout="grid"] .finzo-ps-body {
	width: 100%;
	min-width: 0;
}

.finzo-ps-root[data-layout="grid"] .finzo-ps-thumb,
.finzo-ps-inline[data-layout="grid"] .finzo-ps-thumb {
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
}

.finzo-ps-root[data-layout="grid"][data-ratio="portrait"] .finzo-ps-thumb,
.finzo-ps-inline[data-layout="grid"][data-ratio="portrait"] .finzo-ps-thumb {
	aspect-ratio: 3 / 4;
}

.finzo-ps-root[data-layout="grid"][data-ratio="landscape"] .finzo-ps-thumb,
.finzo-ps-inline[data-layout="grid"][data-ratio="landscape"] .finzo-ps-thumb {
	aspect-ratio: 4 / 3;
}

/* Too narrow to fill a row with 160px cards: auto-fill drops to a single
   column and the card becomes a full-width square. Two fixed columns keep
   the cards card-sized. */
@container finzo-results ( max-width: 400px ) {
	.finzo-ps-root[data-layout="grid"] .finzo-ps-results,
	.finzo-ps-inline[data-layout="grid"] .finzo-ps-results {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 8px;
		padding: 0 calc(var(--finzo-pad, 16px) * 0.6) calc(var(--finzo-pad, 16px) * 0.6);
	}
}

/* In a grid the price always sits under the title — there is no column to
   the right to put it in. */

.finzo-ps-root[data-layout="grid"] .finzo-ps-price,
.finzo-ps-inline[data-layout="grid"] .finzo-ps-price {
	/*
	 * Pushed to the foot of the card. Cards in a row are the same height but
	 * their titles and descriptions are not, so without this the prices land
	 * wherever each card's text happens to end and the row reads as ragged.
	 */
	margin-top: auto;
	display: block;
	text-align: left;

	/* A card is too narrow to hold a sale price and the price it replaced on
	   one line, so let them wrap onto two rather than overflow the card. */
	white-space: normal;
}

/* WooCommerce wraps the two prices in one element, and themes commonly make
   that a centred flex row. Left over in a card it centres each wrapped line
   on its own, so the two prices sit at different indents. */
.finzo-ps-root[data-layout="grid"] .finzo-ps-price .sale-price,
.finzo-ps-inline[data-layout="grid"] .finzo-ps-price .sale-price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: flex-start;
	gap: 0 6px;
}

.finzo-ps-root[data-layout="grid"] .finzo-ps-item,
.finzo-ps-inline[data-layout="grid"] .finzo-ps-item {
	display: flex;
	flex-direction: column;
}