/**
 * search.css — the predictive search field, its dropdown, and the phone overlay.
 *
 * WHAT THIS PASS CHANGED
 *
 * Skin only. The structure, the combobox semantics, the focus handling, the
 * scroll lock and the phone overlay concept are all untouched. What changed is
 * that the component was dark frosted glass and is now the original
 * bedishop.ge identity: a #FFFFFF field with an #E5E5E5 outline, #777777
 * placeholder and idle icon, #252531 text, and the kit's #2D81FF submit.
 *
 * The phone overlay is STILL a full-screen dialog — it has not been turned back
 * into a shrunken desktop widget. It is simply a white one.
 *
 * THE PALETTE IS DECLARED HERE, AND THAT IS ON PURPOSE
 *
 * The values in section 1 are the same extracted kit values header.css section 1
 * carries, restated rather than inherited. search.js REPARENTS the phone panel
 * to <body>, so at the moment that overlay is painted it is not a descendant of
 * .bedi-header and could not inherit a palette scoped to it. Scoping the block
 * to .bedi-search AND .bedi-search__panel covers the component wherever it
 * lands.
 *
 * They are also not read bare from base.css. base.css's :root has SINCE been
 * flipped to the light kit, so its tokens now agree with these values exactly on
 * a normal request; what section 1 still does is keep <html data-theme="dark">
 * from reaching this component, which is deliberate and is documented in full at
 * the top of header.css. Change one of the three blocks, change all three.
 *
 * .bedi-glass AND .bedi-glow ARE NEUTRALISED FROM HERE
 *
 * template-parts/header/search.php still writes both classes onto the field and
 * .bedi-glass onto the results list. That template belongs to another module and
 * is not edited in this pass, so section 2 below cancels both recipes on exactly
 * those two elements. The cancellation is written at a higher specificity than
 * motion.css's own rules, so it does not depend on load order.
 *
 * MOTION TOKENS are the five names motion.css actually declares —
 * --bedi-dur-micro / --bedi-dur / --bedi-dur-lg and --bedi-ease-in /
 * --bedi-ease-out — each with the design system's value as a literal fallback.
 * (This file once spelled them --bedi-dur-standard / --bedi-ease-entrance, which
 * are declared nowhere, so 29 of 39 var() references silently ran on their
 * fallbacks for ever and the component was decoupled from the shared scale.)
 *
 * BREAKPOINTS, and they must stay in step with the matchMedia query in
 * search.js — `(max-width: 767px)`:
 *   <= 767px   phone: the field collapses to an icon that opens a full-screen
 *              dialog. Enhanced-only; see .is-enhanced below.
 *   >= 768px   tablet and desktop: inline field with an absolute dropdown.
 *
 * @package Bedi\Theme
 */

/* =========================================================================
 * 1. THE PALETTE — the extracted values
 *
 * From the Elementor global kit (post 9378) and header template 4148. See
 * header.css section 1 for the frequency counts and the full provenance.
 *
 * --bedi-sch-alert is #D50045, the kit's alert red, and NOT the #F50000 alert
 * badge from the header template. The distinction is contrast, not taste:
 * #F50000 on white is 4.3:1 and fails the 4.5:1 that body text needs, while
 * #D50045 is 5.4:1 and passes. #F50000 stays correct as a badge FILL, where
 * only the 3:1 non-text threshold applies; the error message below is text.
 * ====================================================================== */

.bedi-search,
.bedi-search__panel {
	--bedi-sch-surface: #ffffff;
	--bedi-sch-surface-2: #f9f9f9;
	--bedi-sch-wash: #f2f5f9;
	--bedi-sch-skeleton: #ececec;

	--bedi-sch-ink: #252531;
	--bedi-sch-ink-muted: #777777;

	--bedi-sch-line: #e5e5e5;
	--bedi-sch-line-strong: #d5d5db;

	--bedi-sch-accent: #2d81ff;
	--bedi-sch-accent-deep: #0668fc;
	--bedi-sch-ink-on-accent: #ffffff;

	--bedi-sch-alert: #d50045;

	--bedi-sch-shadow: 0 1px 0 0 rgba(41, 43, 46, 0.1), 0 12px 28px -18px rgba(41, 43, 46, 0.1);

	/* 3.69:1 against #FFFFFF, so it clears the 3:1 WCAG 1.4.11 asks of a focus
	   indicator. --bedi-accent is #4FB3E8 under base.css's dark palette — 2.35:1
	   on white, a ring nobody can see — and #2D81FF under its light :root. Stated
	   here so it is 3.69:1 either way. See header.css section 16. */
	--bedi-sch-focus: var(--bedi-sch-accent);
}

/* =========================================================================
 * 2. OVERRIDING .bedi-glass AND .bedi-glow — HOW, AND WHY IT LOOKS LIKE THIS
 *
 * search.php writes `class="bedi-search__field bedi-glass bedi-glow"` and
 * `class="bedi-search__results bedi-glass"`. Both recipes belong to the dark
 * pass and both have to go, but that template is another module's file in this
 * pass, so they are overridden from here.
 *
 * THE MECHANISM, stated once and used throughout sections 4 and 6:
 *
 * Every property .bedi-glass declares — background, border, box-shadow and
 * backdrop-filter — is written on a selector carrying the .bedi-search__box
 * ancestor, which makes it (0,2,0) against .bedi-glass's (0,1,0). Everything
 * else stays on the plain class. The split is deliberate and it is not
 * cosmetic:
 *
 *   1. A bare `.bedi-search__field` is (0,1,0), exactly TYING .bedi-glass. The
 *      winner would then be whichever stylesheet the enqueue order printed
 *      last — a transparent, borderless search field on a coin toss.
 *
 *   2. Raising the specificity of the WHOLE rule instead would silently break
 *      every lower-specificity override already in this file. The reduced-motion
 *      block's `.bedi-search__results { transform: none }` is (0,1,0); if the
 *      dropdown's base `transform` moved up to (0,2,0) that rule would lose and
 *      a closed dropdown would keep its 0.5rem offset for a visitor who asked
 *      for no motion. So `transform` stays down at (0,1,0) with it.
 *
 *   3. The selectors never NAME .bedi-glass or .bedi-glow. The day those classes
 *      are removed from search.php, these rules keep painting the field white
 *      instead of leaving it unstyled. An override written as
 *      `.bedi-search__field.bedi-glass` would break at exactly that moment.
 *
 * .bedi-search__box is the field's and the results list's direct parent in
 * search.php, at both breakpoints and after search.js reparents the panel, so
 * the ancestor is always there.
 *
 * This section handles the one thing that cannot be phrased as a surface
 * property: the glow's pseudo-element.
 * ====================================================================== */

/*
 * The glow ring. motion.css draws it as a masked ::before at (0,1,1) and gates
 * the whole pseudo-element behind an @supports for mask-composite, so the
 * element may or may not have one. This is (0,2,1): `content: none` removes it
 * where it exists and is harmless where it does not.
 */
.bedi-search__box .bedi-search__field::before {
	content: none;
	display: none;
}

/* =========================================================================
 * 3. ROOT
 *
 * The header gives this component its width. It never sets its own.
 * ====================================================================== */

.bedi-search {
	display: flex;
	align-items: center;
	min-width: 0;
	position: relative;
	width: 100%;
}

/* The phone trigger and the dialog close button are inert without JavaScript,
   so they do not exist until search.js proves it ran by adding .is-enhanced.
   Both are re-enabled inside the phone media query at the end of this file. */
.bedi-search__trigger,
.bedi-search__close,
.bedi-search__title {
	display: none;
}

.bedi-search__panel {
	min-width: 0;
	width: 100%;
}

.bedi-search__panel-inner {
	min-width: 0;
	width: 100%;
}

.bedi-search__form {
	margin: 0;
	min-width: 0;
	width: 100%;
}

/* The positioning context for the dropdown. */
.bedi-search__box {
	position: relative;
	width: 100%;
}

/* =========================================================================
 * 4. THE FIELD
 *
 * #FFFFFF on the white bar, held apart from it by the extracted #E5E5E5
 * outline. That outline IS the field on the original site — there is no fill
 * contrast to rely on, so the border is not decoration and must not be dropped.
 *
 * Four columns: leading icon, input, clear, submit. The hidden post_type input
 * is display:none in every UA stylesheet and so never becomes a fifth.
 * ====================================================================== */

/*
 * Geometry, at (0,1,0), so everything downstream that overrides it still can.
 *
 * THE FIELD IS TALL. The client's screenshot shows a noticeably tall rounded
 * field — it is the largest control in the header — so the minimum is 3.25rem
 * (52px) rather than the 3rem this shipped with.
 *
 * That height is what makes the submit read as INSET rather than as a button
 * stuck on the end: the disc is 2.5rem, the field is 3.25rem, and the 0.375rem
 * that leaves above and below it is matched on the inline end by the
 * --bedi-space-3xs (0.25rem) trailing padding below. Change the height and the
 * disc stops being centred in its own gutter.
 *
 * The trailing padding is deliberately much smaller than the leading padding:
 * the leading edge holds text and needs breathing room, the trailing edge holds
 * a disc that already carries its own.
 */
.bedi-search__field {
	align-items: center;
	border-radius: 999px;
	column-gap: var(--bedi-space-2xs);
	display: grid;
	/*
	 * THREE COLUMNS, NOT FOUR: [submit glyph] [input] [clear]. The fourth was
	 * the blue submit disc at the end of the field, which is gone — the glyph in
	 * column one is the submit now (search.php explains why it is a real button
	 * and not decoration plus implicit submission).
	 *
	 * The inline-end padding goes back up to --bedi-space-sm with it. The 3xs it
	 * carried was the gap a 2.5rem disc needed to sit inside the pill's radius;
	 * with nothing round in that corner, 3xs left the clear button hard against
	 * the curve.
	 */
	grid-template-columns: auto minmax(0, 1fr) auto;
	min-height: 3.25rem;
	padding-block: var(--bedi-space-3xs);
	padding-inline: var(--bedi-space-sm);
	transition:
		border-color var(--bedi-dur, 220ms) var(--bedi-ease-in, cubic-bezier(0.22, 0.61, 0.36, 1)),
		background-color var(--bedi-dur, 220ms) var(--bedi-ease-in, cubic-bezier(0.22, 0.61, 0.36, 1));
}

/*
 * The surface, at (0,2,0), which is what beats .bedi-glass. See section 2.
 *
 * The border is not decoration and must not be dropped: on the white bar this
 * field has no fill contrast to rely on, so the #E5E5E5 outline IS the field.
 * box-shadow is reset because .bedi-glass adds an inner sheen and a drop shadow
 * that would otherwise survive underneath a flat white pill.
 */
.bedi-search__box .bedi-search__field {
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	background: var(--bedi-sch-surface);
	border: var(--bedi-border-width) solid var(--bedi-sch-line);
	box-shadow: none;
}

/*
 * THE THIRD GLOW STATE, AND IT IS THE ONE THAT IS ALWAYS ON.
 *
 * motion.css's no-mask-composite branch recolours the element's own border on
 * three selectors, not two: `:hover`, `:focus-within` AND `.bedi-glow.is-inview`,
 * all at (0,2,0). The hover and focus pair are handled below at (0,3,0), but
 * .is-inview was missed — and assets/js/motion.js watches `.bedi-reveal,
 * .bedi-glow` and adds .is-inview while the element is on screen. This field
 * lives in the sticky header, so it is on screen on every request: the class is
 * effectively permanent, not a transient state.
 *
 * Left uncancelled, `.bedi-glow.is-inview { border-color: var(--bedi-accent) }`
 * at (0,2,0) exactly TIES the surface rule above, and the winner is decided by
 * enqueue order. search.css does print after motion.css today (bedi-search
 * depends on bedi-header which depends on bedi-motion), so the kit hairline
 * happens to survive — but the field's entire affordance on a white bar should
 * not rest on a coin toss that a dependency edit can flip.
 *
 * (0,3,0) settles it on specificity. It must stay ABOVE the :hover and
 * :focus-within rules that follow: those are also (0,3,0), so source order is
 * what lets them still win while the field is actually hovered or focused.
 */
.bedi-search__box .bedi-search__field.is-inview {
	border-color: var(--bedi-sch-line);
}

.bedi-search__field input[type="hidden"] {
	display: none;
}

/*
 * Hover and focus firm the outline rather than washing the fill: on white a fill
 * change this subtle is invisible, and the field's whole affordance is its
 * border.
 *
 * (0,3,0), and the extra class is load-bearing. motion.css has a SECOND glow
 * branch for browsers without mask-composite: no pseudo-element at all, and the
 * element's own border recoloured to --bedi-accent on :hover and :focus-within
 * at (0,2,0). A bare `.bedi-search__field:hover` would tie that and lose or win
 * by enqueue order, so the field would grow a bright accent ring on hover in
 * exactly the browsers that could not draw the glow — a difference nobody would
 * ever see testing on a current Chrome.
 */
.bedi-search__box .bedi-search__field:hover {
	border-color: var(--bedi-sch-line-strong);
}

/*
 * The focus indicator lives on the wrapper, not on the input.
 *
 * This is a replacement, never a removal: the ring is drawn with `outline` so it
 * survives Windows High Contrast, it is 2px of the kit blue at the same offset
 * base.css uses everywhere else, and it appears for pointer focus as well as
 * keyboard focus. Only once that is guaranteed does the input itself drop its
 * own ring, which would otherwise be clipped by the pill.
 */
.bedi-search__box .bedi-search__field:focus-within {
	border-color: var(--bedi-sch-accent);
	outline: var(--bedi-focus-width) solid var(--bedi-sch-focus);
	outline-offset: var(--bedi-focus-offset);
}

.bedi-search__field-icon {
	color: var(--bedi-sch-ink-muted);
	flex: none;
	transition: color var(--bedi-dur-micro, 120ms) var(--bedi-ease-in, cubic-bezier(0.22, 0.61, 0.36, 1));
}

.bedi-search__field:focus-within .bedi-search__field-icon {
	color: var(--bedi-sch-accent);
}

.bedi-search__input {
	background: none;
	border: 0;
	color: var(--bedi-sch-ink);
	min-width: 0;
	padding-block: var(--bedi-space-2xs);
	width: 100%;

	/*
	 * 16px, AND THE NUMBER IS NOT A TYPOGRAPHIC CHOICE.
	 *
	 * Safari on iOS zooms the whole viewport when a text field smaller than
	 * 16px takes focus, and it does not zoom back out — the visitor is left on
	 * a magnified page they have to pinch their way out of. This field was
	 * 14px, and it is the only field on the site that was: it was the one
	 * causing it.
	 *
	 * Raising it is the fix Apple documents. The alternative — user-scalable=no
	 * in the viewport meta — also stops the zoom and stops PINCH zoom with it,
	 * which takes the page away from anyone who needs to magnify it.
	 */
	font-size: 16px;
}

.bedi-search__input:focus-visible {
	outline: none;
}

.bedi-search__input::placeholder {
	color: var(--bedi-sch-ink-muted);
	opacity: 1;
}

/* We ship our own clear button, which is keyboard reachable and labelled. */
.bedi-search__input::-webkit-search-cancel-button,
.bedi-search__input::-webkit-search-decoration {
	-webkit-appearance: none;
	appearance: none;
}

/* =========================================================================
 * 5. FIELD BUTTONS
 * ====================================================================== */

.bedi-search__clear,
.bedi-search__trigger,
.bedi-search__close {
	align-items: center;
	border-radius: 999px;
	display: inline-flex;
	flex: none;
	justify-content: center;
	transition:
		transform var(--bedi-dur-micro, 120ms) var(--bedi-ease-in, cubic-bezier(0.22, 0.61, 0.36, 1)),
		background-color var(--bedi-dur-micro, 120ms) var(--bedi-ease-in, cubic-bezier(0.22, 0.61, 0.36, 1)),
		color var(--bedi-dur-micro, 120ms) var(--bedi-ease-in, cubic-bezier(0.22, 0.61, 0.36, 1)),
		opacity var(--bedi-dur-micro, 120ms) var(--bedi-ease-in, cubic-bezier(0.22, 0.61, 0.36, 1));
}

.bedi-search__clear {
	block-size: 1.75rem;
	color: var(--bedi-sch-ink-muted);
	inline-size: 1.75rem;
}

.bedi-search__clear:hover {
	background-color: var(--bedi-sch-wash);
	color: var(--bedi-sch-ink);
}

.bedi-search__clear:active {
	transform: scale(0.9);
}

/* [hidden] must beat the display:inline-flex above, whatever the source order. */
.bedi-search__clear[hidden],
.bedi-search__results[hidden] {
	display: none;
}

/* The same trap as the rule above, one level up, and it shipped.
 *
 * The shared round-control block sets `display: inline-flex` on
 * .bedi-search__trigger and .bedi-search__close. That is the same specificity
 * as the `display: none` at the top of this file and it comes later, so it won
 * — and the phone-only search trigger and the dialog's close button both
 * rendered on desktop. .bedi-search__title escaped purely because it is not a
 * member of that block, which is why it looked hidden while its two siblings
 * did not. Verified live at 1024px before this rule existed: the close button
 * painted a stray 20x20 glyph above the field.
 *
 * .bedi-search__head joins them. Outside the phone dialog it holds nothing
 * visible, but it is display:block and still reserved ~26px of vertical space
 * above the field, which is what pushed the header layout open.
 *
 * Every rule that re-enables these three is scoped to `.is-dialog` or
 * `.is-enhanced` inside the phone media query, so all of them are more
 * specific than this and the mobile overlay is unaffected.
 */
.bedi-search__head,
.bedi-search__trigger,
.bedi-search__close {
	display: none;
}

/* The one strong colour in the component: the kit's #2D81FF with white ink, as
   the original's submit was, and as the client's screenshot shows it — a BLUE
   CIRCULAR button inset at the field's trailing end. Flat, not a gradient — the
   accent-to-accent-2 gradient was dark-pass language.

   A TRUE CIRCLE, and it stays one. block-size and inline-size are equal and the
   radius is the 999px from the shared block above, so the disc is round by
   construction. `flex: none` is inherited from that same block and is what stops
   the grid's trailing `auto` track from squeezing it into an ellipse when a long
   query fills the input.

   The ink here is an ICON, not text, so the 3:1 non-text threshold applies and
   #FFFFFF on #2D81FF at 3.69:1 passes. header.css section 1 records where that
   ratio does and no longer does bite — the category pill it used to apply to is
   now #252531 and passes AA outright. */
/*
 * THE SUBMIT, WHICH IS NOW THE GLYPH AT THE START OF THE FIELD.
 *
 * .bedi-search__submit — a 2.5rem blue disc at the END of the field — is gone
 * with its hover and focus rules. This is the same action on the element that
 * used to be decoration, so it inherits nothing from that disc: no fill, no
 * radius of its own, no size. It is a bare button wrapped around the icon, and
 * every rule targeting .bedi-search__field-icon still lands, because the icon
 * kept its class.
 *
 * `display: grid` with `place-items: center` rather than inline-flex: the button
 * is a grid ITEM of the field, and an inline-level submit would sit on the text
 * baseline and pull the glyph two pixels low against a 3.25rem pill.
 */
.bedi-search__go {
	appearance: none;
	background: none;
	border: 0;
	border-radius: 999px;
	color: inherit;
	cursor: pointer;
	display: grid;
	margin: 0;
	padding: 0;
	place-items: center;
	transition:
		color var(--bedi-dur-micro, 120ms) var(--bedi-ease-out, cubic-bezier(0.22, 0.61, 0.36, 1)),
		transform var(--bedi-dur-micro, 120ms) var(--bedi-ease-out, cubic-bezier(0.22, 0.61, 0.36, 1));
}

/*
 * The micro-interaction: the lens leans INTO the field on hover — one degree of
 * rotation and a 6% scale, which reads as the glyph tipping toward what it is
 * about to search rather than as a button inflating. transform-origin sits at
 * the lens rather than the box centre so the handle swings and the ring stays
 * put.
 */
.bedi-search__go:hover,
.bedi-search__go:focus-visible {
	color: var(--bedi-sch-accent);
	transform: rotate(-8deg) scale(1.08);
}

.bedi-search__go:active {
	transform: rotate(-8deg) scale(0.92);
}

.bedi-search__go:focus-visible {
	outline: var(--bedi-focus-width) solid var(--bedi-sch-focus);
	outline-offset: var(--bedi-focus-offset);
}

/* =========================================================================
 * 6. THE DESKTOP DROPDOWN
 *
 * Closed state is opacity + visibility, not `display`, so it can transition and
 * so a closed list is out of the tab order and out of the accessibility tree.
 * The transition on visibility is delayed on exit only, which is what keeps the
 * fade visible instead of snapping the panel away on the first frame.
 *
 * Opaque #FFFFFF with the #E5E5E5 hairline and the soft extracted shadow. It
 * floats over the page, so it cannot be translucent: whatever is behind it is
 * product photography.
 * ====================================================================== */

.bedi-search__results {
	border-radius: var(--bedi-radius-lg);
	inset-block-start: calc(100% + var(--bedi-space-2xs));
	inset-inline: 0;
	list-style: none;
	margin: 0;
	max-block-size: min(70vh, 30rem);
	opacity: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: var(--bedi-space-3xs);
	/* scrollbar-color inherits from html, scrollbar-width does not. base.css
	   names this list as one of the two scroll containers that has to set it
	   itself, or the dropdown gets a full-width OS scrollbar down its edge. */
	scrollbar-width: thin;
	position: absolute;
	transform: translateY(-0.5rem);
	transition:
		opacity var(--bedi-dur, 220ms) var(--bedi-ease-out, cubic-bezier(0.4, 0, 0.2, 1)),
		transform var(--bedi-dur, 220ms) var(--bedi-ease-out, cubic-bezier(0.4, 0, 0.2, 1)),
		visibility 0s linear var(--bedi-dur, 220ms);
	visibility: hidden;
	z-index: var(--bedi-z-overlay);
}

/*
 * The dropdown's surface, at (0,2,0), which is what beats .bedi-glass. Same
 * mechanism as the field — see section 2.
 *
 * Opaque #FFFFFF, not a translucent veil. This list floats over the page, and on
 * this shop what is behind it is product photography; a blur does not darken a
 * white backdrop, so a translucent fill left the product names unreadable.
 *
 * The phone dialog turns all three of these off again at (0,3,0) in section 10,
 * where the list is in normal flow on an already-white overlay rather than
 * floating over anything.
 */
.bedi-search__box .bedi-search__results {
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	background: var(--bedi-sch-surface);
	border: var(--bedi-border-width) solid var(--bedi-sch-line);
	box-shadow: var(--bedi-sch-shadow);
}

.bedi-search__results.is-open {
	opacity: 1;
	transform: none;
	transition:
		opacity var(--bedi-dur, 220ms) var(--bedi-ease-in, cubic-bezier(0.22, 0.61, 0.36, 1)),
		transform var(--bedi-dur, 220ms) var(--bedi-ease-in, cubic-bezier(0.22, 0.61, 0.36, 1)),
		visibility 0s;
	visibility: visible;
}

/* =========================================================================
 * 7. RESULT ROWS
 *
 * The <li role="option"> is itself the click target. It holds no <a> and no
 * <button>: interactive descendants inside an option are exactly what makes a
 * combobox unreadable, because the screen reader announces the link instead of
 * the option and arrow keys stop matching what is spoken. The cost is losing
 * middle-click-to-new-tab inside the dropdown, and the plain form submit behind
 * it still leads to a results page of ordinary links.
 * ====================================================================== */

.bedi-search__option {
	align-items: center;
	border-radius: var(--bedi-radius-md);
	column-gap: var(--bedi-space-xs);
	cursor: pointer;
	display: grid;
	grid-template-columns: 3rem minmax(0, 1fr) auto;
	padding: var(--bedi-space-2xs);
	transition:
		background-color var(--bedi-dur-micro, 120ms) var(--bedi-ease-in, cubic-bezier(0.22, 0.61, 0.36, 1)),
		transform var(--bedi-dur-micro, 120ms) var(--bedi-ease-in, cubic-bezier(0.22, 0.61, 0.36, 1));
}

.bedi-search__option:hover,
.bedi-search__option[aria-selected="true"] {
	background-color: var(--bedi-sch-wash);
	transform: translateX(2px);
}

/* The active option is the one aria-activedescendant points at. It carries a
   leading accent rule so the keyboard position is legible without colour alone
   doing the work. */
.bedi-search__option[aria-selected="true"] {
	box-shadow: inset 2px 0 0 0 var(--bedi-sch-accent);
}

/*
 * CONTAIN ON WHITE, matching the cart drawer and the product rail.
 *
 * `cover` on a 3rem square cropped a wide product to its middle, which in a
 * results list is worse than anywhere else: the thumbnail is the only thing
 * distinguishing two products whose names both begin "გარე მყარი დისკი
 * AP…". The fill was --bedi-sch-wash, a tint, behind photographs that are
 * already on white — so the well's edge read as the product's edge. The 1px
 * line stays and is now the only thing bounding the thumb, which is what it is
 * for.
 */
.bedi-search__thumb {
	aspect-ratio: 1;
	background-color: var(--bedi-sch-surface);
	border: var(--bedi-border-width) solid var(--bedi-sch-line);
	border-radius: var(--bedi-radius-md);
	inline-size: 3rem;
	object-fit: contain;
	padding: 3px;
}

.bedi-search__thumb--empty {
	background-color: var(--bedi-sch-skeleton);
}

.bedi-search__option-text {
	min-width: 0;
}

.bedi-search__name {
	color: var(--bedi-sch-ink);
	display: -webkit-box;
	font-size: var(--bedi-text-sm);
	line-height: var(--bedi-leading-snug);
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
}

.bedi-search__price {
	color: var(--bedi-sch-ink);
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	font-size: var(--bedi-text-sm);
	font-weight: var(--bedi-weight-medium);
	text-align: end;
	white-space: nowrap;
}

.bedi-search__price-was {
	color: var(--bedi-sch-ink-muted);
	font-size: var(--bedi-text-xs);
	font-weight: var(--bedi-weight-regular);
	text-decoration: line-through;
}

.bedi-search__price-now {
	color: var(--bedi-sch-accent-deep);
}

/* =========================================================================
 * 8. THE THREE NON-RESULT STATES
 *
 * Loading, empty and error each get real markup. Nobody is ever left looking at
 * a spinner that never resolves, and the error row keeps the "view all" row
 * beneath it so a REST failure still has a way forward: the plain form submit.
 * ====================================================================== */

.bedi-search__message {
	color: var(--bedi-sch-ink-muted);
	font-size: var(--bedi-text-sm);
	padding: var(--bedi-space-sm) var(--bedi-space-xs);
	text-align: center;
}

.bedi-search__message--error {
	color: var(--bedi-sch-alert);
}

/*
 * THE EMPTY STATE'S ILLUSTRATION.
 *
 * Only the empty variant has one — search.js explains why the error variant
 * deliberately does not. The row becomes a centred column for it, which is why
 * the flex declarations are here and not on .bedi-search__message: the error and
 * loading variants are still a single line of text and a flex column would give
 * them a different rhythm for no reason.
 *
 * The rise is an animation rather than a transition because the row is created
 * and appended, not toggled — there is no "before" state for a transition to
 * start from. 380ms and 10px: the panel is already open and the visitor is
 * waiting on a result, so this has to land, not perform.
 */
.bedi-search__message:not(.bedi-search__message--error) {
	align-items: center;
	display: flex;
	flex-direction: column;
	gap: var(--bedi-space-2xs);
	padding-block: var(--bedi-space-md);
}

.bedi-search__message-art {
	animation: bedi-search-empty-in 380ms var(--bedi-ease-out, cubic-bezier(0.22, 0.61, 0.36, 1)) both;
	block-size: auto;
	inline-size: min(160px, 46%);
	max-inline-size: 160px;
}

.bedi-search__message-text {
	animation: bedi-search-empty-in 380ms var(--bedi-ease-out, cubic-bezier(0.22, 0.61, 0.36, 1)) 60ms both;
	display: block;
}

@keyframes bedi-search-empty-in {
	from {
		opacity: 0;
		transform: translateY(10px) scale(0.97);
	}

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

.bedi-search__all {
	align-items: center;
	border-block-start: var(--bedi-border-width) solid var(--bedi-sch-line);
	border-radius: var(--bedi-radius-md);
	color: var(--bedi-sch-accent-deep);
	cursor: pointer;
	display: flex;
	font-size: var(--bedi-text-sm);
	font-weight: var(--bedi-weight-medium);
	gap: var(--bedi-space-2xs);
	justify-content: center;
	margin-block-start: var(--bedi-space-3xs);
	padding: var(--bedi-space-xs);
	transition:
		background-color var(--bedi-dur-micro, 120ms) var(--bedi-ease-in, cubic-bezier(0.22, 0.61, 0.36, 1)),
		color var(--bedi-dur-micro, 120ms) var(--bedi-ease-in, cubic-bezier(0.22, 0.61, 0.36, 1));
}

.bedi-search__all:hover,
.bedi-search__all[aria-selected="true"] {
	background-color: var(--bedi-sch-wash);
	color: var(--bedi-sch-ink);
}

/* ---- Skeleton ---------------------------------------------------------
 * The shimmer is a pseudo-element translated across the block, because
 * animating background-position is not compositor work and drops frames on the
 * mid-range Androids most of this shop's traffic arrives on.
 *
 * On white the sweep has to run LIGHTER than the block, not darker: #ECECEC
 * base with an #F9F9F9 band travelling over it. Both are kit greys. Inverting
 * this — which the dark version did, sweeping a brighter veil over a darker
 * fill — leaves an invisible shimmer on a light surface. */

.bedi-search__skeleton {
	align-items: center;
	column-gap: var(--bedi-space-xs);
	display: grid;
	grid-template-columns: 3rem minmax(0, 1fr);
	padding: var(--bedi-space-2xs);
}

.bedi-search__skeleton-block {
	background-color: var(--bedi-sch-skeleton);
	border-radius: var(--bedi-radius-sm);
	overflow: hidden;
	position: relative;
}

.bedi-search__skeleton-block::after {
	animation: bedi-search-shimmer 1200ms linear infinite;
	background-image: linear-gradient(
		90deg,
		transparent,
		var(--bedi-sch-surface-2),
		transparent
	);
	content: "";
	inset: 0;
	position: absolute;
	transform: translateX(-100%);
}

.bedi-search__skeleton-block--thumb {
	aspect-ratio: 1;
	inline-size: 3rem;
}

.bedi-search__skeleton-block--line {
	block-size: 0.75rem;
}

.bedi-search__skeleton-block--line + .bedi-search__skeleton-block--line {
	inline-size: 55%;
	margin-block-start: var(--bedi-space-2xs);
}

@keyframes bedi-search-shimmer {
	from {
		transform: translateX(-100%);
	}

	to {
		transform: translateX(100%);
	}
}

/* =========================================================================
 * 9. SCROLL LOCK
 *
 * Shared contract, deliberately not namespaced to search: every drawer and
 * overlay in this theme locks the page the same way. search.js keeps a counter
 * in data-bedi-locks on <html> and only removes the class when it reaches zero,
 * so closing the search overlay cannot unlock the page behind an open cart.
 * Another module may declare an identical rule; identical declarations are
 * harmless, a second *different* rule is not.
 * ====================================================================== */

html.bedi-scroll-locked,
html.bedi-scroll-locked body {
	overflow: hidden;
}

/* =========================================================================
 * 10. PHONE: A DIFFERENT COMPONENT, NOT A NARROWER ONE
 *
 * STILL A FULL-SCREEN DIALOG. The restyle does not demote it. The inline field
 * is gone; in its place is one icon, and the whole search is a dialog that owns
 * the screen: a large input under the thumb, a results list with 56px rows, and
 * nothing else competing for attention.
 *
 * TWO CLASSES DO THE WORK, AND THE DIFFERENCE MATTERS:
 *
 *   .bedi-search.is-enhanced   the trigger icon, which stays in the header.
 *   .bedi-search__panel.is-dialog
 *                              the overlay itself, styled from the PANEL rather
 *                              than from an ancestor.
 *
 * The panel is scoped to itself because search.js moves it to <body> for the
 * duration of the phone layout. Selectors that depend on .bedi-search being an
 * ancestor of the panel break the moment it is moved, so none of them are used
 * below — and neither is the palette in section 1, which is why that block
 * names .bedi-search__panel as well as .bedi-search.
 *
 * (The move was originally needed because the header bar carried a
 * backdrop-filter, which makes an element the containing block for every
 * fixed-position descendant and would have clipped this "full-screen" overlay
 * to the height of the header. The header is flat white now and no longer does
 * that, but the move is still correct and still wanted: it keeps the overlay
 * independent of wherever the header sits in the document.)
 *
 * Everything here needs JavaScript. Without it the phone keeps the plain inline
 * field from section 4, which submits and works.
 * ====================================================================== */

@media (max-width: 767px) {
	.bedi-search.is-enhanced {
		flex: none;
		width: auto;
	}

	.bedi-search.is-enhanced .bedi-search__trigger {
		background-color: var(--bedi-sch-surface);
		block-size: 2.75rem;
		border: var(--bedi-border-width) solid var(--bedi-sch-line);
		color: var(--bedi-sch-ink-muted);
		display: inline-flex;
		inline-size: 2.75rem;
	}

	.bedi-search.is-enhanced .bedi-search__trigger:hover {
		background-color: var(--bedi-sch-wash);
		color: var(--bedi-sch-accent);
	}

	.bedi-search.is-enhanced .bedi-search__trigger:active {
		transform: scale(0.92);
	}

	.bedi-search.is-enhanced .bedi-search__trigger[aria-expanded="true"] {
		background-color: var(--bedi-sch-wash);
		color: var(--bedi-sch-accent);
	}

	/*
	 * The overlay is opaque, and now plainly so: #FFFFFF, the same surface the
	 * bar it came from is. It was a dark canvas with a radial accent bloom and a
	 * linear gradient — all three were dark-pass language and all three are
	 * gone. It was never blurred, and still is not: a backdrop-filter over the
	 * full viewport is the single most expensive thing a phone GPU can be asked
	 * for, and there is no layered content behind this overlay to reveal.
	 */
	.bedi-search__panel.is-dialog {
		background-color: var(--bedi-sch-surface);
		display: flex;
		flex-direction: column;
		inset: 0;
		opacity: 0;
		position: fixed;
		transition:
			opacity var(--bedi-dur-lg, 420ms) var(--bedi-ease-out, cubic-bezier(0.4, 0, 0.2, 1)),
			visibility 0s linear var(--bedi-dur-lg, 420ms);
		visibility: hidden;
		z-index: var(--bedi-z-drawer);
	}

	.bedi-search__panel.is-dialog.is-open {
		opacity: 1;
		transition:
			opacity var(--bedi-dur-lg, 420ms) var(--bedi-ease-in, cubic-bezier(0.22, 0.61, 0.36, 1)),
			visibility 0s;
		visibility: visible;
	}

	.bedi-search__panel.is-dialog .bedi-search__panel-inner {
		display: flex;
		flex: 1;
		flex-direction: column;
		min-height: 0;
		/* Notch, home indicator and on-screen keyboard all live here. */
		padding: max(var(--bedi-space-sm), env(safe-area-inset-top)) var(--bedi-gutter)
			max(var(--bedi-space-sm), env(safe-area-inset-bottom));
	}

	/* The panel content slides up behind the fade. Transform only. */
	.bedi-search__panel.is-dialog .bedi-search__head,
	.bedi-search__panel.is-dialog .bedi-search__form {
		transform: translateY(0.75rem);
		transition: transform var(--bedi-dur-lg, 420ms) var(--bedi-ease-in, cubic-bezier(0.22, 0.61, 0.36, 1));
	}

	.bedi-search__panel.is-dialog.is-open .bedi-search__head,
	.bedi-search__panel.is-dialog.is-open .bedi-search__form {
		transform: none;
	}

	.bedi-search__panel.is-dialog.is-open .bedi-search__form {
		transition-delay: 40ms;
	}


	/*
	 * AND THE PANEL SCROLLS.
	 *
	 * Recent searches, popular terms, sixteen categories and a
	 * frequently-bought row come to 1022px inside an 812px viewport. The inner
	 * was `overflow: visible`, so the bottom two thirds of it simply ran off
	 * the screen with no way to reach them.
	 *
	 * -webkit-overflow-scrolling for momentum on older iOS, and
	 * overscroll-behavior so flicking past the end scrolls this panel rather
	 * than the locked page behind it.
	 */
	.bedi-search__panel.is-dialog .bedi-search__panel-inner {
		overscroll-behavior: contain;
		-webkit-overflow-scrolling: touch;
		overflow-y: auto;
	}

	.bedi-search__panel.is-dialog .bedi-search__head {
		align-items: center;
		border-block-end: var(--bedi-border-width) solid var(--bedi-sch-line);
		display: flex;
		justify-content: space-between;
		margin-block-end: var(--bedi-space-sm);
		padding-block-end: var(--bedi-space-2xs);
	}

	.bedi-search__panel.is-dialog .bedi-search__title {
		color: var(--bedi-sch-ink);
		display: block;
		font-size: var(--bedi-text-lg);
		font-weight: var(--bedi-weight-bold);
		margin: 0;
	}

	.bedi-search__panel.is-dialog .bedi-search__close {
		background-color: var(--bedi-sch-surface);
		block-size: 2.5rem;
		border: var(--bedi-border-width) solid var(--bedi-sch-line);
		color: var(--bedi-sch-ink);
		display: inline-flex;
		inline-size: 2.5rem;
	}

	.bedi-search__panel.is-dialog .bedi-search__close:hover {
		background-color: var(--bedi-sch-wash);
		border-color: var(--bedi-sch-line-strong);
	}

	.bedi-search__panel.is-dialog .bedi-search__close:active {
		transform: scale(0.92);
	}

	/*
	 * A FIXED BAND, NOT A GROWING ONE — AND `flex: 1` HERE IS WHAT COLLAPSED IT.
	 *
	 * `flex: 1` is shorthand for `1 1 0%`: grow, shrink, and start from a basis
	 * of ZERO. That was right when the form was the only thing in the dialog
	 * and had the whole column to grow into. It stopped being right the moment
	 * the resting content below it was un-hidden: the form now has a sibling
	 * that wants the space, so it shrinks to its basis and its 52px field
	 * spills out over the content underneath.
	 *
	 * Measured before: form 335x0 wrapping a field 335x52, with the popular
	 * pills starting 52px ABOVE the bottom of the field they were meant to
	 * follow.
	 *
	 * `0 0 auto` on both: size to the field, never grow, never shrink. The
	 * panel's inner is the scroller now, which is where the growing belongs.
	 */
	.bedi-search__panel.is-dialog .bedi-search__form {
		display: flex;
		flex: 0 0 auto;
		flex-direction: column;
		min-height: 0;
	}

	.bedi-search__panel.is-dialog .bedi-search__box {
		display: flex;
		flex: 0 0 auto;
		flex-direction: column;
		min-height: 0;
	}

	.bedi-search__panel.is-dialog .bedi-search__field {
		/* 16px minimum, or iOS zooms the page on focus and the overlay is ruined. */
		font-size: var(--bedi-text-base);
		min-height: 3.25rem;
	}

	/*
	 * In the dialog the list is not a dropdown. It is the page: in normal flow,
	 * filling the space under the field, scrolling on its own. So it drops the
	 * floating panel's fill, border and shadow — the overlay behind it is
	 * already the surface.
	 */
	.bedi-search__panel.is-dialog .bedi-search__results {
		background: none;
		border: 0;
		box-shadow: none;
		flex: 1;
		inset: auto;
		margin-block-start: var(--bedi-space-sm);
		max-block-size: none;
		min-height: 0;
		padding: 0;
		position: static;
		transform: none;
	}

	.bedi-search__panel.is-dialog .bedi-search__option {
		border-block-end: var(--bedi-border-width) solid var(--bedi-sch-line);
		border-radius: 0;
		column-gap: var(--bedi-space-sm);
		grid-template-columns: 3.5rem minmax(0, 1fr) auto;
		min-block-size: 3.5rem;
		padding: var(--bedi-space-xs) var(--bedi-space-2xs);
	}

	.bedi-search__panel.is-dialog .bedi-search__thumb,
	.bedi-search__panel.is-dialog .bedi-search__skeleton-block--thumb {
		inline-size: 3.5rem;
	}

	.bedi-search__panel.is-dialog .bedi-search__name {
		font-size: var(--bedi-text-base);
	}

	.bedi-search__panel.is-dialog .bedi-search__skeleton {
		grid-template-columns: 3.5rem minmax(0, 1fr);
		padding: var(--bedi-space-xs) var(--bedi-space-2xs);
	}

	.bedi-search__panel.is-dialog .bedi-search__all {
		margin-block-start: var(--bedi-space-sm);
		min-block-size: 3rem;
	}
}

/* Tablet and up: the field stops stretching to the full header width. The header
   owns the column; this is only an upper bound so the pill never looks stretched
   on a 27" display. */
@media (min-width: 768px) {
	.bedi-search__panel {
		max-width: 34rem;
		margin-inline: auto;
	}
}

/* =========================================================================
 * 11. FOCUS — CHECKED AGAINST THE NEW WHITE SURFACES
 *
 * Same correction, and for the same reason, as header.css section 16: base.css
 * rings every focusable element with --bedi-accent, which is #4FB3E8 under its
 * dark palette and scores 2.35:1 against #FFFFFF. On the dark canvas that was
 * fine. On this field, this dropdown and this white overlay it is a ring nobody
 * can see, and WCAG 2.2 SC 1.4.11 asks for 3:1.
 *
 * `.bedi-search :focus-visible` is (0,2,0) and beats base.css's bare
 * `:focus-visible` at (0,1,0), so this holds whatever the load order. The
 * overlay is named separately because search.js reparents it out of .bedi-search
 * — a descendant selector rooted there would stop matching the moment the phone
 * layout engages, which is the one place this ring matters most.
 *
 * The field's own :focus-within ring in section 4 already uses the token, and
 * the blue submit re-points it at #252531 in section 5.
 * ====================================================================== */

.bedi-search :focus-visible,
.bedi-search__panel :focus-visible {
	outline: var(--bedi-focus-width) solid var(--bedi-sch-focus);
	outline-offset: var(--bedi-focus-offset);
}

/*
 * The input is the one exception, and it is a replacement rather than a removal:
 * the ring is drawn on the pill around it by .bedi-search__field:focus-within,
 * because an outline on the input itself is clipped by the pill's border-radius.
 *
 * BOTH SELECTORS ARE REQUIRED AND SO IS THE LEADING ANCESTOR. The rule above is
 * (0,2,0) and the bare `.bedi-search__input:focus-visible` in section 4 is only
 * (0,1,1), so the generic ring would win and paint exactly the clipped outline
 * that rule exists to prevent. Written with the ancestor these are (0,2,1) and
 * win. The .bedi-search__panel copy is not redundant: search.js reparents the
 * panel to <body> on a phone, and the .bedi-search copy stops matching then.
 */
.bedi-search .bedi-search__input:focus-visible,
.bedi-search__panel .bedi-search__input:focus-visible {
	outline: none;
}

/* =========================================================================
 * 12. REDUCED MOTION
 *
 * base.css already flattens durations globally; this block is the local,
 * explicit contract. Every transition here becomes an opacity change of
 * essentially zero duration, the shimmer stops completely rather than freezing
 * mid-sweep, and nothing translates. The widget keeps every state it had — it
 * simply arrives instead of animating.
 * ====================================================================== */

@media (prefers-reduced-motion: reduce) {
	.bedi-search__field,
	.bedi-search__field-icon,
	.bedi-search__clear,
	.bedi-search__go,
	.bedi-search__trigger,
	.bedi-search__close,
	.bedi-search__option,
	.bedi-search__all,
	.bedi-search__results,
	.bedi-search__panel,
	.bedi-search__head,
	.bedi-search__form {
		transition-duration: 1ms;
		transition-property: opacity;
	}

	.bedi-search__message-art,
	.bedi-search__message-text {
		animation: none !important;
	}

	.bedi-search__go:hover,
	.bedi-search__go:focus-visible,
	.bedi-search__go:active,
	.bedi-search__clear:active,
	.bedi-search__option:hover,
	.bedi-search__option[aria-selected="true"],
	.bedi-search__trigger:active,
	.bedi-search__close:active {
		transform: none;
	}

	.bedi-search__results {
		transform: none;
	}

	.bedi-search__skeleton-block::after {
		animation: none;
		opacity: 0.6;
		transform: none;
	}

	.bedi-search__panel.is-dialog .bedi-search__head,
	.bedi-search__panel.is-dialog .bedi-search__form {
		transform: none;
		transition-duration: 1ms;
	}
}

/* =========================================================================
 * 13. FORCED COLOURS
 *
 * In Windows High Contrast the palette in section 1 is discarded entirely and
 * the user's own is substituted. What must survive is structure: the field has
 * to look like a field and the active option has to look active.
 * ====================================================================== */

@media (forced-colors: active) {
	.bedi-search__field,
	.bedi-search__results,
	.bedi-search__trigger,
	.bedi-search__close {
		border: 1px solid CanvasText;
	}

	.bedi-search__option[aria-selected="true"],
	.bedi-search__all[aria-selected="true"] {
		background-color: Highlight;
		color: HighlightText;
		forced-color-adjust: none;
	}

	.bedi-search__skeleton-block {
		border: 1px solid CanvasText;
	}
}