/* ============================================================
   RFT Search Overlay — full-screen takeover search workspace
   Dark slate background, brand-orange accents
   Layout: clean by default, filters in a slide-out drawer
   ============================================================ */

:root {
    --rft-o-bg:        #0b1220;
    --rft-o-surface:   #131c2e;
    --rft-o-surface-2: #1a253c;
    --rft-o-border:    rgba(255, 255, 255, 0.08);
    --rft-o-border-2:  rgba(255, 255, 255, 0.14);
    --rft-o-text:      #f8fafc;
    --rft-o-muted:     #94a3b8;
    --rft-o-dim:       #64748b;
    --rft-o-orange:    #e35b2a;
    --rft-o-orange-d:  #c84a1f;
    --rft-o-orange-soft: rgba(227, 91, 42, 0.12);
    --rft-o-radius:    14px;
    --rft-o-radius-sm: 8px;
    --rft-o-font:      -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* ============================================================
   TRIGGER BUTTON (header) — DEFENSIVE against theme bleed
   The original implementation looked pink in Walter's screenshot
   because the Elementor section's background was bleeding through.
   Every property here is locked with !important to defeat theme CSS.
   ============================================================ */

.rft-search-trigger,
button.rft-search-trigger,
.elementor-widget .rft-search-trigger {
    display: inline-flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 12px 16px 12px 18px !important;
    background: #ffffff !important;
    background-image: none !important;
    border: 2px solid rgba(0, 0, 0, 0.08) !important;
    border-radius: 999px !important;
    color: #64748b !important;
    font-family: var(--rft-o-font) !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    min-width: 380px !important;
    width: auto !important;
    height: auto !important;
    min-height: 48px !important;
    transition: border-color .15s, box-shadow .15s, transform .12s !important;
    text-align: left !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06) !important;
    line-height: 1 !important;
    text-decoration: none !important;
    vertical-align: middle !important;
}
.rft-search-trigger:hover,
.rft-search-trigger:focus-visible,
button.rft-search-trigger:hover,
button.rft-search-trigger:focus-visible {
    background: #ffffff !important;
    border-color: var(--rft-o-orange) !important;
    box-shadow: 0 0 0 4px rgba(227, 91, 42, 0.15), 0 4px 14px rgba(15, 23, 42, 0.08) !important;
    color: #1d2327 !important;
    outline: none !important;
}
.rft-search-trigger:active { transform: translateY(1px) !important; }

.rft-search-trigger__icon {
    color: var(--rft-o-orange) !important;
    flex-shrink: 0 !important;
    width: 22px !important;
    height: 22px !important;
}
.rft-search-trigger__label {
    flex: 1 !important;
    color: #475569 !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    background: transparent !important;
}
.rft-search-trigger__kbd {
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #94a3b8 !important;
    background: #f1f5f9 !important;
    padding: 4px 8px !important;
    border-radius: 6px !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    font-family: ui-monospace, "SF Mono", Menlo, monospace !important;
    line-height: 1 !important;
}

/* Mobile: collapse to a circular 44px icon button.
   Matches the standard mobile-header search pattern (Amazon, Best Buy).
   Hides label + ⌘K hint; the orange magnifying glass becomes the
   entire trigger. 44px = Apple HIG minimum touch target. */
@media (max-width: 782px) {
    .rft-search-trigger,
    button.rft-search-trigger,
    .elementor-widget .rft-search-trigger {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 44px !important;
        min-width: 44px !important;
        height: 44px !important;
        min-height: 44px !important;
        padding: 0 !important;
        gap: 0 !important;
        border-radius: 50% !important;
        background: rgba(0, 0, 0, 0.04) !important;
        border: 1px solid rgba(0, 0, 0, 0.08) !important;
        box-shadow: none !important;
    }
    .rft-search-trigger:hover,
    .rft-search-trigger:focus-visible,
    button.rft-search-trigger:hover,
    button.rft-search-trigger:focus-visible {
        background: rgba(227, 91, 42, 0.10) !important;
        border-color: var(--rft-o-orange) !important;
        box-shadow: 0 0 0 3px rgba(227, 91, 42, 0.15) !important;
    }
    .rft-search-trigger__icon {
        width: 22px !important;
        height: 22px !important;
    }
    .rft-search-trigger__label,
    .rft-search-trigger__kbd { display: none !important; }
}

/* ============================================================
   OVERLAY SHELL
   ============================================================ */

.rft-overlay[hidden] { display: none !important; }

.rft-overlay {
    position: fixed;
    inset: 0;
    z-index: 2147483600;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    font-family: var(--rft-o-font);
    color: var(--rft-o-text);
    -webkit-font-smoothing: antialiased;
}

.rft-overlay__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(7, 12, 22, 0.93);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    animation: rft-fade-in .15s ease-out;
    cursor: pointer;
}

.rft-overlay__panel {
    position: relative;
    width: 100%;
    max-width: 780px;
    max-height: 100vh;
    margin-top: clamp(40px, 8vh, 100px);
    padding: 24px 32px 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    animation: rft-slide-down .22s cubic-bezier(.2, .8, .2, 1);
}

.rft-overlay__title-sr {
    position: absolute !important; height: 1px; width: 1px;
    overflow: hidden; clip: rect(1px, 1px, 1px, 1px);
}

.rft-overlay__close {
    position: absolute;
    top: 14px;
    right: 20px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--rft-o-border);
    color: var(--rft-o-muted);
    width: 38px;
    height: 38px;
    border-radius: 50%;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .15s, color .15s, border-color .15s;
}
.rft-overlay__close:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--rft-o-text);
    border-color: var(--rft-o-border-2);
}

/* ============================================================
   SEARCH INPUT (giant, the centerpiece)
   ============================================================ */

.rft-overlay__search {
    position: relative;
    display: flex;
    align-items: center;
    gap: 16px;
    background: var(--rft-o-surface);
    border: 2px solid var(--rft-o-border);
    border-radius: var(--rft-o-radius);
    padding: 20px 22px;
    transition: border-color .18s, box-shadow .18s;
}
.rft-overlay__search:focus-within {
    border-color: var(--rft-o-orange);
    box-shadow: 0 0 0 4px rgba(227, 91, 42, 0.15);
}

.rft-overlay__icon {
    color: var(--rft-o-orange);
    flex-shrink: 0;
    width: 28px;
    height: 28px;
}

.rft-overlay__input {
    flex: 1;
    background: transparent;
    border: 0;
    outline: 0;
    color: var(--rft-o-text);
    font-size: 24px;
    font-weight: 500;
    font-family: inherit;
    min-width: 0;
    padding: 2px 0;
    line-height: 1.2;
}
.rft-overlay__input::placeholder { color: var(--rft-o-dim); }

.rft-overlay__clear {
    background: rgba(255, 255, 255, 0.06);
    border: 0;
    color: var(--rft-o-muted);
    width: 32px; height: 32px;
    border-radius: 50%;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.rft-overlay__clear:hover { background: rgba(255, 255, 255, 0.12); color: var(--rft-o-text); }

/* ============================================================
   TOOLBAR (active filters + filter button + sort + count)
   This sits below the search input and is always visible once
   results have been fetched.
   ============================================================ */

.rft-overlay__toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 16px;
    padding: 0 4px;
}

.rft-result-count {
    font-size: 13px;
    color: var(--rft-o-muted);
    margin-right: auto;
}
.rft-result-count strong { color: var(--rft-o-text); font-weight: 700; }

/* Filter open button */
.rft-filter-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--rft-o-border);
    color: var(--rft-o-text);
    padding: 8px 14px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background .12s, border-color .12s;
}
.rft-filter-button:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--rft-o-border-2);
}
.rft-filter-button.has-active {
    background: var(--rft-o-orange);
    border-color: var(--rft-o-orange);
}
.rft-filter-button__count {
    background: rgba(0, 0, 0, 0.25);
    color: #fff;
    padding: 1px 7px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
}

/* Sort dropdown */
.rft-sort {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--rft-o-muted);
}
.rft-sort select {
    background: rgba(255, 255, 255, 0.06);
    color: var(--rft-o-text);
    border: 1px solid var(--rft-o-border);
    border-radius: 999px;
    padding: 7px 28px 7px 14px;
    font-size: 12px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2394a3b8'><path d='M7 10l5 5 5-5z'/></svg>");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 16px;
}
.rft-sort select:focus { outline: 2px solid var(--rft-o-orange); outline-offset: 1px; }

/* ============================================================
   ACTIVE FILTER CHIPS — always visible above results when any
   filter is set. Separate row, scrolls horizontally on mobile.
   ============================================================ */

.rft-overlay__active {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    padding: 0 4px;
}
.rft-overlay__active[hidden] { display: none !important; }

.rft-active-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--rft-o-orange);
    color: #fff;
    padding: 5px 10px 5px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    border: 0;
    cursor: pointer;
    transition: background .12s;
    font-family: inherit;
}
.rft-active-chip:hover { background: var(--rft-o-orange-d); }
.rft-active-chip::after {
    content: '×';
    font-size: 16px;
    line-height: 1;
    opacity: 0.85;
}

.rft-clear-all {
    background: transparent;
    border: 0;
    color: var(--rft-o-muted);
    font-size: 12px;
    cursor: pointer;
    padding: 5px 10px;
    text-decoration: underline;
    text-underline-offset: 3px;
    font-family: inherit;
}
.rft-clear-all:hover { color: var(--rft-o-text); }

/* ============================================================
   FILTER DRAWER — slides in from the left
   ============================================================ */

.rft-drawer {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: 340px;
    max-width: 90vw;
    background: var(--rft-o-bg);
    border-right: 1px solid var(--rft-o-border-2);
    box-shadow: 12px 0 40px rgba(0, 0, 0, 0.4);
    z-index: 2147483700;
    transform: translateX(-100%);
    transition: transform .25s cubic-bezier(.2, .8, .2, 1);
    display: flex;
    flex-direction: column;
}
.rft-drawer.is-open { transform: translateX(0); }
.rft-drawer[hidden] { display: none !important; }

.rft-drawer__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 22px;
    border-bottom: 1px solid var(--rft-o-border);
}
.rft-drawer__title {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--rft-o-text);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.rft-drawer__close {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--rft-o-border);
    color: var(--rft-o-muted);
    width: 32px; height: 32px;
    border-radius: 50%;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.rft-drawer__close:hover {
    background: rgba(255, 255, 255, 0.12);
    color: var(--rft-o-text);
}

.rft-drawer__body {
    flex: 1;
    overflow-y: auto;
    padding: 18px 22px 100px;
    overscroll-behavior: contain;
}

.rft-drawer__foot {
    position: sticky;
    bottom: 0;
    background: var(--rft-o-bg);
    border-top: 1px solid var(--rft-o-border);
    padding: 14px 22px;
    display: flex;
    gap: 8px;
}
.rft-drawer-apply {
    flex: 1;
    background: var(--rft-o-orange);
    border: 0;
    color: #fff;
    padding: 12px 18px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
}
.rft-drawer-apply:hover { background: var(--rft-o-orange-d); }
.rft-drawer-clear {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--rft-o-border);
    color: var(--rft-o-text);
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 13px;
    cursor: pointer;
    font-family: inherit;
}
.rft-drawer-clear:hover { background: rgba(255, 255, 255, 0.12); }

/* Filter section inside drawer */
.rft-filter-section {
    margin-bottom: 22px;
}
.rft-filter-section h4 {
    margin: 0 0 10px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--rft-o-muted);
}

.rft-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.rft-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--rft-o-border);
    color: var(--rft-o-text);
    padding: 7px 12px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background .12s, border-color .12s, color .12s;
    white-space: nowrap;
    font-family: inherit;
}
.rft-chip:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--rft-o-border-2);
}
.rft-chip.is-active {
    background: var(--rft-o-orange);
    border-color: var(--rft-o-orange);
    color: #fff;
    font-weight: 600;
}
.rft-chip__count {
    background: rgba(255, 255, 255, 0.08);
    color: var(--rft-o-muted);
    padding: 0 7px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    min-width: 18px;
    text-align: center;
}
.rft-chip.is-active .rft-chip__count {
    background: rgba(0, 0, 0, 0.25);
    color: #fff;
}

/* In-stock toggle (inside drawer) */
.rft-stock-toggle {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    user-select: none;
    font-size: 14px;
    color: var(--rft-o-text);
    padding: 8px 0;
}
.rft-stock-toggle input {
    appearance: none;
    width: 40px; height: 22px;
    background: rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    position: relative;
    cursor: pointer;
    transition: background .15s;
    margin: 0;
}
.rft-stock-toggle input::before {
    content: '';
    position: absolute;
    width: 16px; height: 16px;
    background: #fff;
    border-radius: 50%;
    top: 3px;
    left: 3px;
    transition: transform .18s;
}
.rft-stock-toggle input:checked { background: var(--rft-o-orange); }
.rft-stock-toggle input:checked::before { transform: translateX(18px); }

/* Drawer backdrop */
.rft-drawer-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 2147483690;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s;
}
.rft-drawer-backdrop.is-open {
    opacity: 1;
    pointer-events: auto;
}

/* ============================================================
   RESULTS AREA
   ============================================================ */

.rft-overlay__results {
    margin-top: 14px;
    padding-bottom: 20px;
    overflow-y: auto;
    overscroll-behavior: contain;
    flex: 1;
    min-height: 200px;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, black 10px, black calc(100% - 30px), transparent 100%);
            mask-image: linear-gradient(to bottom, transparent 0, black 10px, black calc(100% - 30px), transparent 100%);
}

/* Empty state (no query, no filters) */
.rft-overlay__empty {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 18px 4px 30px;
}
.rft-empty-block h4 {
    margin: 0 0 12px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--rft-o-muted);
}

/* Recent searches list */
.rft-recents { display: flex; flex-wrap: wrap; gap: 6px; }
.rft-recent {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--rft-o-border);
    color: var(--rft-o-text);
    padding: 7px 12px;
    border-radius: 999px;
    font-size: 13px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: inherit;
}
.rft-recent:hover { background: rgba(255, 255, 255, 0.08); }
.rft-recent svg { opacity: 0.5; }

/* ============================================================
   RESULT ROWS — the cleaner redesign
   ============================================================ */

.rft-results-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.rft-result {
    display: grid;
    grid-template-columns: 80px 1fr auto;
    gap: 16px;
    align-items: center;
    padding: 14px;
    background: var(--rft-o-surface);
    border: 1px solid transparent;
    border-radius: var(--rft-o-radius-sm);
    color: var(--rft-o-text);
    text-decoration: none;
    cursor: pointer;
    transition: border-color .12s, background .12s, transform .12s;
    min-width: 0;
}
.rft-result:hover,
.rft-result.is-highlighted {
    border-color: var(--rft-o-orange);
    background: var(--rft-o-surface-2);
    color: var(--rft-o-text);
    text-decoration: none;
}
.rft-result.is-highlighted { transform: translateX(2px); }

.rft-result__thumb {
    width: 80px; height: 80px;
    border-radius: 8px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
}
.rft-result__thumb img {
    width: 100%; height: 100%;
    object-fit: contain;
    display: block;
}

.rft-result__info {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.rft-result__title {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--rft-o-text);
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: break-word;
}
.rft-result__title mark {
    background: var(--rft-o-orange-soft);
    color: var(--rft-o-orange);
    padding: 0 3px;
    border-radius: 3px;
    font-weight: 700;
}

.rft-result__meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 11px;
    color: var(--rft-o-muted);
}
.rft-result__brand {
    background: var(--rft-o-orange);
    color: #fff;
    padding: 2px 8px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1.4;
}
.rft-result__sku {
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 11px;
    color: var(--rft-o-dim);
}
.rft-result__oos {
    background: rgba(239, 68, 68, 0.15);
    color: #f87171;
    padding: 2px 7px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

/* Price column — clean WC HTML rendering */
.rft-result__price {
    font-size: 16px;
    font-weight: 700;
    color: var(--rft-o-text);
    white-space: nowrap;
    text-align: right;
    line-height: 1.3;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}
.rft-result__price del {
    color: var(--rft-o-dim);
    font-weight: 400;
    font-size: 12px;
    text-decoration: line-through;
}
.rft-result__price ins {
    text-decoration: none;
    color: var(--rft-o-orange);
    font-weight: 700;
}
.rft-result__price .woocommerce-Price-amount,
.rft-result__price .amount {
    font-weight: inherit;
    color: inherit;
}
.rft-result__price .woocommerce-Price-currencySymbol {
    margin-right: 1px;
}

/* Load more / view all */
.rft-results-footer {
    text-align: center;
    padding: 20px 0 30px;
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}
.rft-load-more,
.rft-view-all {
    background: var(--rft-o-orange);
    color: #fff;
    border: 0;
    padding: 12px 28px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    transition: background .12s, transform .12s;
    font-family: inherit;
}
.rft-load-more:hover,
.rft-view-all:hover {
    background: var(--rft-o-orange-d);
    color: #fff;
    transform: translateY(-1px);
    text-decoration: none;
}
.rft-view-all {
    background: rgba(255, 255, 255, 0.06);
    color: var(--rft-o-text);
    border: 1px solid var(--rft-o-border);
}
.rft-view-all:hover {
    background: rgba(255, 255, 255, 0.12);
    color: var(--rft-o-text);
}

/* No-results state */
.rft-no-results {
    text-align: center;
    padding: 60px 16px 30px;
}
.rft-no-results__icon { font-size: 32px; margin-bottom: 8px; opacity: 0.5; }
.rft-no-results__title {
    font-size: 17px;
    color: var(--rft-o-text);
    margin-bottom: 8px;
}
.rft-no-results__title strong { color: var(--rft-o-orange); }
.rft-no-results__hint {
    font-size: 13px;
    color: var(--rft-o-muted);
    margin-bottom: 18px;
}
.rft-no-results__suggestions {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
}

/* Skeleton loading rows */
.rft-skel-row {
    display: grid;
    grid-template-columns: 80px 1fr auto;
    gap: 16px;
    align-items: center;
    padding: 14px;
    background: var(--rft-o-surface);
    border-radius: var(--rft-o-radius-sm);
    margin-bottom: 8px;
}
.rft-skel {
    background: linear-gradient(90deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0.04) 100%);
    background-size: 200% 100%;
    animation: rft-shimmer 1.4s ease-in-out infinite;
    border-radius: 4px;
}
.rft-skel--thumb { width: 80px; height: 80px; border-radius: 8px; }
.rft-skel-stack { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.rft-skel--title { width: 70%; height: 16px; }
.rft-skel--meta { width: 40%; height: 11px; }
.rft-skel--price { width: 72px; height: 18px; }

/* ============================================================
   KEYBOARD HINT FOOTER
   ============================================================ */

.rft-overlay__kbd-hint {
    text-align: center;
    color: var(--rft-o-dim);
    font-size: 11px;
    padding: 12px 0 16px;
    border-top: 1px solid var(--rft-o-border);
    margin-top: 4px;
}
.rft-overlay__kbd-hint kbd {
    display: inline-block;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--rft-o-border);
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 10px;
    color: var(--rft-o-muted);
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    margin: 0 2px;
}

/* ============================================================
   ANIMATIONS
   ============================================================ */

@keyframes rft-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes rft-slide-down {
    from { opacity: 0; transform: translateY(-12px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes rft-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 640px) {
    .rft-overlay__panel {
        margin-top: 0;
        padding: 18px 16px 0;
        max-width: 100%;
        height: 100vh;
        max-height: 100vh;
    }
    .rft-overlay__close { top: 12px; right: 12px; }
    .rft-overlay__search { padding: 16px 18px; }
    .rft-overlay__input { font-size: 18px; }
    .rft-overlay__icon { width: 24px; height: 24px; }

    .rft-overlay__toolbar {
        gap: 8px;
    }
    .rft-result-count { font-size: 12px; }
    .rft-filter-button { padding: 7px 12px; font-size: 12px; }
    .rft-sort select { font-size: 11px; padding: 6px 24px 6px 12px; }

    .rft-result {
        grid-template-columns: 64px 1fr auto;
        gap: 12px;
        padding: 12px;
    }
    .rft-result__thumb { width: 64px; height: 64px; }
    .rft-result__title { font-size: 14px; }
    .rft-result__price { font-size: 15px; }

    .rft-drawer { width: 100vw; max-width: 100vw; }
    .rft-overlay__kbd-hint { display: none; }

    /* mobile drag-to-close handle on the overlay panel */
    .rft-overlay__panel::before {
        content: '';
        display: block;
        width: 40px; height: 4px;
        background: rgba(255, 255, 255, 0.2);
        border-radius: 2px;
        margin: -8px auto 12px;
    }
}

/* ============================================================
   Body lock when overlay open
   ============================================================ */

body.rft-overlay-open {
    overflow: hidden !important;
}

/* ============================================================
   Reduced motion
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
    .rft-overlay__backdrop,
    .rft-overlay__panel,
    .rft-drawer,
    .rft-skel { animation: none; transition: none; }
    .rft-result.is-highlighted { transform: none; }
}

/* Above the WP admin bar */
.admin-bar .rft-overlay { z-index: 2147483647; }
.admin-bar .rft-drawer { z-index: 2147483647; }