/**
 * @package    Alfa Commerce
 * @copyright  (C) 2024-2026 Easylogic CO LP / Agamemnon Fakas. All rights reserved.
 * @license    GNU General Public License version 3 or later; see LICENSE
 *
 * Atelier Spotlight — the premium search palette. Root-namespaced (`alfa-es`), no
 * framework classes; every colour, radius, blur and duration is a token so a merchant
 * rethemes without touching files. All motion is transform/opacity (60fps) — the one
 * deliberate exception is the icon draw, which animates stroke-dashoffset (paint) on
 * a small area for one entry moment; prefers-reduced-motion and data-alfa-es-still
 * disable it with everything else.
 *
 * Tokens are declared on the root, on the body-mounted scrim, AND on a reparented
 * trigger — each lives outside the others' scope.
 */

.alfa-es,
.alfa-es-scrim,
.alfa-es-trigger[data-alfa-es-theme] {
    --alfa-es-accent: #c9a24b;
    /* Ink = the accent where it renders TEXT on the panel background: the gold that
       sings as a hairline is 2.4:1 as copy, so text gets a darker cut of it. */
    --alfa-es-accent-ink: #8a6a1f;
    --alfa-es-bg: #ffffff;
    --alfa-es-fg: #191817;
    --alfa-es-muted: rgba(25, 24, 23, 0.55);
    --alfa-es-hairline: rgba(25, 24, 23, 0.12);
    --alfa-es-scrim: rgba(12, 11, 10, 0.55);
    --alfa-es-hover: rgba(25, 24, 23, 0.05);
    /* The panel's own radius follows the storefront's, keeping this module's
       proportions: the two smaller radii are ratios of it, so rounding the shop
       rounds the search without a chip ending up as round as the panel. At the
       shipped 14px they are the 8px and 6px this module already used. */
    --alfa-es-radius: var(--alfa-radius-panel, 14px);
    --alfa-es-radius-md: calc(var(--alfa-es-radius) * 0.57);
    --alfa-es-radius-sm: calc(var(--alfa-es-radius) * 0.43);
    --alfa-es-blur: 14px;
    --alfa-es-t-fast: 160ms;
    --alfa-es-t-slow: 320ms;
    --alfa-es-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --alfa-es-stagger: 36ms;
    --alfa-es-draw: 550ms;
    --alfa-es-z: 2147480000;
    --alfa-es-icon-stroke: 1.6;
}

.alfa-es[data-alfa-es-theme="dark"],
.alfa-es-scrim[data-alfa-es-theme="dark"],
.alfa-es-trigger[data-alfa-es-theme="dark"] {
    --alfa-es-bg: #17161a;
    --alfa-es-fg: #f4f1ea;
    --alfa-es-muted: rgba(244, 241, 234, 0.55);
    --alfa-es-hairline: rgba(244, 241, 234, 0.14);
    --alfa-es-hover: rgba(244, 241, 234, 0.07);
    --alfa-es-accent-ink: var(--alfa-es-accent); /* the gold clears 4.5:1 on dark */
}

/* `auto` means "follow the page", and the page is not always the device. A template
   that lets a visitor choose says which way round it is on <html> — `data-theme` for
   their own choice, `data-theme-default` for what the site starts on — and that has
   to win, or someone who picks Light on a dark laptop gets a dark search panel over
   a light site. With no such template on the page neither attribute exists, and the
   device decides exactly as before. The palette itself is untouched: this only
   changes WHEN the dark cut of it applies, never what it is. */

:is(:root[data-theme="dark"], :root[data-theme-default="dark"]:not([data-theme]))
:is(.alfa-es, .alfa-es-scrim, .alfa-es-trigger)[data-alfa-es-theme="auto"] {
    --alfa-es-bg: #17161a;
    --alfa-es-fg: #f4f1ea;
    --alfa-es-muted: rgba(244, 241, 234, 0.55);
    --alfa-es-hairline: rgba(244, 241, 234, 0.14);
    --alfa-es-hover: rgba(244, 241, 234, 0.07);
    --alfa-es-accent-ink: var(--alfa-es-accent);
}

@media (prefers-color-scheme: dark) {
    :is(
        :root[data-theme="auto"],
        :root[data-theme-default="auto"]:not([data-theme]),
        :root:not([data-theme]):not([data-theme-default])
    )
    :is(.alfa-es, .alfa-es-scrim, .alfa-es-trigger)[data-alfa-es-theme="auto"] {
        --alfa-es-bg: #17161a;
        --alfa-es-fg: #f4f1ea;
        --alfa-es-muted: rgba(244, 241, 234, 0.55);
        --alfa-es-hairline: rgba(244, 241, 234, 0.14);
        --alfa-es-hover: rgba(244, 241, 234, 0.07);
        --alfa-es-accent-ink: var(--alfa-es-accent);
    }
}

/* ── Trigger ─────────────────────────────────────────────────────────── */
.alfa-es-trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font: inherit;
    color: var(--alfa-es-fg);
    background: var(--alfa-es-bg);
    border: 1px solid var(--alfa-es-hairline);
    border-radius: 999px;
    padding: 0.5rem 1rem;
    cursor: pointer;
    transition: border-color var(--alfa-es-t-fast) var(--alfa-es-ease),
                transform var(--alfa-es-t-fast) var(--alfa-es-ease);
}
.alfa-es-trigger:hover { border-color: var(--alfa-es-accent); transform: translateY(-1px); }
.alfa-es-trigger:active { transform: scale(0.98); }
.alfa-es-trigger-text { opacity: 0.65; }
.alfa-es-trigger-kbd {
    font-size: 0.72em;
    border: 1px solid var(--alfa-es-hairline);
    border-radius: var(--alfa-es-radius-sm);
    padding: 0.1em 0.45em;
    opacity: 0.6;
}
/* Belt over the server-side device check: a touch device has no ⌘K to press —
   this also catches iPadOS, whose user agent claims to be a Mac. */
@media (hover: none) and (pointer: coarse) {
    .alfa-es-trigger-kbd { display: none !important; }
}

/* ── Icons: self-drawing strokes ─────────────────────────────────────── */
.alfa-es-icon { width: 1.15em; height: 1.15em; flex: none; }
.alfa-es-icon .alfa-es-draw {
    stroke: currentColor;
    stroke-width: var(--alfa-es-icon-stroke);
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 1;
    stroke-dashoffset: 0;
}
.alfa-es-row-glyph { color: var(--alfa-es-accent-ink); display: inline-flex; }
.alfa-es-row-glyph .alfa-es-icon { width: 1.5em; height: 1.5em; }

/* ── Scrim + panel ───────────────────────────────────────────────────── */
.alfa-es-scrim {
    position: fixed;
    inset: 0;
    z-index: var(--alfa-es-z);
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: min(12vh, 7rem) 1rem 1rem;
    background: var(--alfa-es-scrim);
    -webkit-backdrop-filter: blur(var(--alfa-es-blur));
    backdrop-filter: blur(var(--alfa-es-blur));
    opacity: 0;
    /* Closed = fully click-through AND fully gone: the element stays mounted for the
       fade, but a transparent full-viewport layer must never eat the page's clicks,
       and an aria-modal dialog left "visible" to assistive tech would mark the whole
       page inert. visibility flips after the fade (0s transition, delayed), and it
       also releases the backdrop-filter cost while closed. */
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--alfa-es-t-slow) var(--alfa-es-ease),
                visibility 0s var(--alfa-es-t-slow);
}
.alfa-es-scrim[data-alfa-es-openstate] {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity var(--alfa-es-t-slow) var(--alfa-es-ease), visibility 0s;
}
.alfa-es-scrim[data-alfa-es-full] { padding: 0; }

.alfa-es-panel {
    width: min(680px, 100%);
    /* The last min() term is the VISUAL viewport (set by the script while open,
       minus the scrim's paddings): with the phone keyboard up, the panel shrinks
       to what is actually on screen instead of sinking behind the keys. */
    max-height: min(72vh, 640px, calc(var(--alfa-es-vvh, 200vh) - min(12vh, 7rem) - 1rem));
    display: flex;
    flex-direction: column;
    color: var(--alfa-es-fg);
    background: var(--alfa-es-bg);
    border: 1px solid var(--alfa-es-hairline);
    border-top: 2px solid var(--alfa-es-accent);
    border-radius: var(--alfa-es-radius);
    box-shadow: 0 24px 70px rgba(10, 9, 8, 0.35);
    overflow: hidden;
    transform: translateY(14px) scale(0.985);
    opacity: 0;
    transition: transform var(--alfa-es-t-slow) var(--alfa-es-ease),
                opacity var(--alfa-es-t-slow) var(--alfa-es-ease);
}
.alfa-es-scrim[data-alfa-es-openstate] .alfa-es-panel { transform: none; opacity: 1; }
.alfa-es-scrim[data-alfa-es-full] .alfa-es-panel {
    width: 100%;
    height: var(--alfa-es-vvh, 100dvh);
    max-height: var(--alfa-es-vvh, 100dvh);
    border-radius: 0;
    border-left: 0;
    border-right: 0;
}

/* Inline mode reuses the same panel, in flow. */
[data-alfa-es-inline] .alfa-es-scrim {
    pointer-events: auto;
    position: static;
    padding: 0;
    background: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    opacity: 1;
    visibility: visible;
}
[data-alfa-es-inline] .alfa-es-panel { transform: none; opacity: 1; box-shadow: none; }

/* ── Input row ───────────────────────────────────────────────────────── */
.alfa-es-input-row {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.9rem 1.1rem;
    border-bottom: 1px solid var(--alfa-es-hairline);
    color: var(--alfa-es-muted);
}
.alfa-es-input {
    flex: 1;
    font: inherit;
    font-size: 1.06em;
    color: var(--alfa-es-fg);
    background: none;
    border: 0;
    outline: 0;
}
.alfa-es-input::placeholder { color: var(--alfa-es-muted); }
/* ONE X on screen: the browser's own type=search clear button would sit right next
   to the palette's close button. Escape clears instead (then closes when empty). */
.alfa-es-input::-webkit-search-cancel-button,
.alfa-es-input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }
.alfa-es-close {
    display: inline-flex;
    color: var(--alfa-es-muted);
    background: none;
    border: 0;
    cursor: pointer;
    padding: 0.3rem;
    border-radius: var(--alfa-es-radius-md);
    transition: color var(--alfa-es-t-fast) var(--alfa-es-ease);
}
.alfa-es-close:hover { color: var(--alfa-es-fg); }

/* ── Results ─────────────────────────────────────────────────────────── */
.alfa-es-results { overflow-y: auto; overscroll-behavior: contain; padding: 0.4rem 0; flex: 1; }

.alfa-es-chips { display: flex; flex-wrap: wrap; gap: 0.45rem; padding: 0.7rem 1.1rem 0.3rem; }
.alfa-es-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font: inherit;
    font-size: 0.86em;
    color: var(--alfa-es-fg);
    background: none;
    border: 1px solid var(--alfa-es-hairline);
    border-radius: 999px;
    padding: 0.28rem 0.8rem;
    cursor: pointer;
    transition: border-color var(--alfa-es-t-fast) var(--alfa-es-ease),
                transform var(--alfa-es-t-fast) var(--alfa-es-ease);
}
.alfa-es-chip:hover, .alfa-es-chip[data-active] { border-color: var(--alfa-es-accent); transform: translateY(-1px); }
.alfa-es-chip .alfa-es-icon { width: 0.9em; height: 0.9em; color: var(--alfa-es-accent-ink); }

.alfa-es-section-title {
    margin: 0.6rem 0 0.15rem;
    padding: 0 1.15rem;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--alfa-es-muted);
}
.alfa-es-row {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.6rem 1.15rem;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--alfa-es-t-fast) var(--alfa-es-ease);
}
.alfa-es-row:hover, .alfa-es-row[data-active] { background: var(--alfa-es-hover); }
.alfa-es-row[data-active] { box-shadow: inset 2px 0 0 var(--alfa-es-accent); }
.alfa-es-row:not([href]) { cursor: default; }
.alfa-es-row-main { flex: 1; min-width: 0; }
.alfa-es-row-title { display: block; }
.alfa-es-row-desc {
    display: block;
    font-size: 0.82em;
    color: var(--alfa-es-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.alfa-es-row-desc:empty { display: none; }

/* Enrichment: product thumbnail replaces the glyph; price column sits flush right. */
.alfa-es-row-img {
    width: 2.6em;
    height: 2.6em;
    flex: none;
    object-fit: cover;
    border-radius: var(--alfa-es-radius-md);
    background: var(--alfa-es-hover);
}
.alfa-es-row[data-has-image] .alfa-es-row-glyph { display: none; }
.alfa-es-row-prices {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    flex: none;
    line-height: 1.25;
    font-variant-numeric: tabular-nums;
}
.alfa-es-row-price { font-weight: 600; }
.alfa-es-row-price-was { font-size: 0.78em; color: var(--alfa-es-muted); }
.alfa-es-row-price-meta { display: inline-flex; align-items: center; gap: 0.35em; }
.alfa-es-row-price-meta:empty { display: none; }
.alfa-es-row-badge {
    font-style: normal;
    font-size: 0.72em;
    font-weight: 600;
    color: var(--alfa-es-accent-ink);
    border: 1px solid var(--alfa-es-accent);
    border-radius: 999px;
    padding: 0 0.45em;
}
.alfa-es-row-go { color: var(--alfa-es-muted); opacity: 0; transform: translateX(-4px);
    transition: opacity var(--alfa-es-t-fast) var(--alfa-es-ease), transform var(--alfa-es-t-fast) var(--alfa-es-ease); }
.alfa-es-row:hover .alfa-es-row-go, .alfa-es-row[data-active] .alfa-es-row-go { opacity: 1; transform: none; }

.alfa-es-empty { margin: 0; padding: 1.4rem 1.15rem; color: var(--alfa-es-muted); }

/* ── Footer ──────────────────────────────────────────────────────────── */
.alfa-es-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 0.65rem 1.1rem;
    border-top: 1px solid var(--alfa-es-hairline);
    font-size: 0.82em;
    color: var(--alfa-es-muted);
}
.alfa-es-viewall {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--alfa-es-accent-ink);
    text-decoration: none;
    cursor: pointer;
}
.alfa-es-viewall:hover { text-decoration: underline; }

/* ── Entry choreography: draw the icons, stagger the rows ────────────── */
.alfa-es-scrim[data-alfa-es-openstate] .alfa-es-draw {
    animation: alfa-es-draw var(--alfa-es-draw) var(--alfa-es-ease) both;
}
.alfa-es-scrim[data-alfa-es-openstate] .alfa-es-draw-late { animation-delay: 0.18s; }
@keyframes alfa-es-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

[data-alfa-es-reveal] {
    animation: alfa-es-rise 0.34s var(--alfa-es-ease) both;
    animation-delay: calc(var(--alfa-es-i, 0) * var(--alfa-es-stagger));
}
@keyframes alfa-es-rise {
    from { opacity: 0; transform: translateY(7px); }
    to { opacity: 1; transform: none; }
}

/* ── Motion off: param or user preference ────────────────────────────── */
/* Both kill blocks list *::after too — the shimmer sweep lives on a pseudo-element,
   which the element selectors alone never match. */
@media (prefers-reduced-motion: reduce) {
    .alfa-es *, .alfa-es *::after,
    .alfa-es-scrim, .alfa-es-scrim *, .alfa-es-scrim *::after,
    .alfa-es-trigger, .alfa-es-trigger *, .alfa-es-trigger *::after {
        animation: none !important;
        transition: none !important;
    }
}
.alfa-es[data-alfa-es-still] *, .alfa-es[data-alfa-es-still] *::after,
.alfa-es-scrim[data-alfa-es-still], .alfa-es-scrim[data-alfa-es-still] *, .alfa-es-scrim[data-alfa-es-still] *::after,
.alfa-es-trigger[data-alfa-es-still], .alfa-es-trigger[data-alfa-es-still] *, .alfa-es-trigger[data-alfa-es-still] *::after {
    animation: none !important;
    transition: none !important;
}

/* Page scroll locks while the palette is open. */
[data-alfa-es-lock] { overflow: hidden !important; }

/* Static icons: artwork appears instantly; every other animation stays alive. The
   attribute is copied onto the body-level scrim by the script at mount. */
[data-alfa-es-icons="static"] .alfa-es-draw { animation: none !important; }

/* An attach-configured trigger appears directly in its final home — never a flash
   in the module position first. The 2s failsafe self-reveals if scripting dies. */
[data-alfa-es-pending] { visibility: hidden; animation: alfa-es-unhide 0s 2s forwards; }
@keyframes alfa-es-unhide { to { visibility: visible; } }

/* The results ledger line — quiet, tabular figures so counts never jitter. */
.alfa-es-stats {
    margin: 0;
    padding: 0.5rem 1.15rem 0.1rem;
    font-size: 0.78em;
    color: var(--alfa-es-muted);
    font-variant-numeric: tabular-nums;
}
.alfa-es-stats strong { color: var(--alfa-es-fg); font-weight: 600; }

/* Loading shimmer — pure transform/opacity, template-owned markup. */
.alfa-es-loading { display: grid; gap: 0.55rem; padding: 0.9rem 1.15rem; }
.alfa-es-shimmer {
    height: 0.95rem;
    border-radius: var(--alfa-es-radius-sm);
    background: var(--alfa-es-hover);
    overflow: hidden;
    position: relative;
}
.alfa-es-shimmer::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, var(--alfa-es-hairline), transparent);
    animation: alfa-es-shimmer 1.1s var(--alfa-es-ease) infinite;
}
.alfa-es-shimmer:nth-child(2) { width: 82%; }
.alfa-es-shimmer:nth-child(3) { width: 64%; }
@keyframes alfa-es-shimmer { to { transform: translateX(100%); } }

/* The typed query lights up inside titles — CSS Highlight API, no extra markup. */
::highlight(alfa-es-match) { color: var(--alfa-es-accent-ink); }

/* Keyboard focus is always visible inside the palette. */
.alfa-es-panel :focus-visible { outline: 2px solid var(--alfa-es-accent); outline-offset: 2px; border-radius: var(--alfa-es-radius-sm); }

/* ── hidden honoured everywhere ──────────────────────────────────────── */
/* Author display values (inline-flex etc.) beat the UA's [hidden] rule, so hidden
   elements would stay visible without this. The stats line is the one exception:
   it keeps its box while hidden so rows never jump when the count appears. */
.alfa-es [hidden], .alfa-es-scrim [hidden], .alfa-es-trigger [hidden] { display: none !important; }
.alfa-es-stats[hidden] { display: block !important; visibility: hidden; }

/* ── RTL: mirror the physical-axis details ───────────────────────────── */
[dir="rtl"] .alfa-es-row[data-active] { box-shadow: inset -2px 0 0 var(--alfa-es-accent); }
[dir="rtl"] .alfa-es-row-go { transform: translateX(4px); }
[dir="rtl"] .alfa-es-shimmer::after {
    transform: translateX(100%);
    background: linear-gradient(270deg, transparent, var(--alfa-es-hairline), transparent);
    animation-name: alfa-es-shimmer-rtl;
}
@keyframes alfa-es-shimmer-rtl { to { transform: translateX(-100%); } }

/* ── The attach failsafe outlives every motion-kill ──────────────────── */
/* The kill blocks above cancel ALL animations — including the 2s self-reveal that
   un-hides an attach-configured trigger when scripting dies. Hidden-forever is the
   one unacceptable failure, so the failsafe is re-asserted last (specificity ties
   the kill blocks; source order wins). */
[data-alfa-es-pending], .alfa-es [data-alfa-es-pending], .alfa-es-trigger[data-alfa-es-pending] {
    animation: alfa-es-unhide 0s 2s forwards !important;
}