/**
 * Shift64 Woo Search — Autocomplete Dropdown
 *
 * BEM naming, CSS custom properties.
 * Includes a standalone search field for the shortcode and the autocomplete UI.
 */

/* ================================================================
   Custom Properties
   ================================================================ */
:root {
    --s64ws-dropdown-bg: var(--global-palette9, #fff);
    --s64ws-dropdown-border: var(--global-palette7, #d0d5dd);
    --s64ws-dropdown-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    --s64ws-dropdown-radius: 12px;
    --s64ws-dropdown-max-height: 696px;
    --s64ws-dropdown-z: 99999;

    --s64ws-item-hover-bg: var(--global-palette8, #f5f7fa);
    --s64ws-item-active-bg: var(--global-palette7, #e8ecf0);
    --s64ws-item-padding: 10px 16px;
    --s64ws-item-gap: 12px;

    --s64ws-title-color: var(--global-palette3, #1a1a2e);
    --s64ws-title-size: 14px;
    --s64ws-title-weight: 600;

    --s64ws-meta-color: var(--global-palette5, #666);
    --s64ws-meta-size: 12px;

    --s64ws-image-size: 48px;
    --s64ws-image-radius: 6px;
    --s64ws-image-bg: var(--global-palette8, #f5f7fa);

    --s64ws-see-all-color: var(--shift64-woo-search-brand-color, #183e86);
    --s64ws-see-all-size: 14px;
    --s64ws-see-all-weight: 600;

    --s64ws-section-header-color: var(--global-palette5, #666);
    --s64ws-section-header-size: 12px;
    --s64ws-section-header-weight: 500;
    --s64ws-section-border: var(--global-palette7, #e5e5e5);

    --s64ws-field-bg: #fff;
    --s64ws-field-border: var(--global-palette7, #d0d5dd);
    --s64ws-field-color: var(--global-palette3, #1a1a2e);
    --s64ws-field-focus: var(--shift64-woo-search-brand-color, #183e86);
    --s64ws-field-radius: 8px;
}

/* ================================================================
   Shortcode Search Field
   ================================================================ */
.shift64-woo-search-shortcode {
    width: 100%;
}

.shift64-woo-search-shortcode .shift64-woo-search-field {
    position: relative;
    display: flex;
    align-items: stretch;
    width: 100%;
    overflow: visible;
}

.shift64-woo-search-shortcode .shift64-woo-search-field__input {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    min-height: 44px;
    margin: 0;
    padding: 10px 14px;
    color: var(--s64ws-field-color);
    background: var(--s64ws-field-bg);
    border: 1px solid var(--s64ws-field-border);
    border-radius: var(--s64ws-field-radius) 0 0 var(--s64ws-field-radius);
    font: inherit;
    line-height: 1.4;
}

.shift64-woo-search-shortcode .shift64-woo-search-field__input:focus {
    position: relative;
    z-index: 1;
    border-color: var(--s64ws-field-focus);
    outline: 2px solid color-mix(in srgb, var(--s64ws-field-focus) 25%, transparent);
    outline-offset: 0;
}

.shift64-woo-search-shortcode .shift64-woo-search-field__input::placeholder {
    color: currentColor;
    opacity: 0.62;
}

.shift64-woo-search-shortcode .shift64-woo-search-field__submit {
    flex: 0 0 auto;
    min-height: 44px;
    margin: 0;
    padding: 10px 18px;
    border: 1px solid transparent;
    border-radius: 0 var(--s64ws-field-radius) var(--s64ws-field-radius) 0;
    cursor: pointer;
    font: inherit;
    font-weight: 600;
    line-height: 1.4;
}

:where(.shift64-woo-search-shortcode .shift64-woo-search-field__submit) {
    color: var(--s64ws-button-color, #fff);
    background: var(--s64ws-button-bg, var(--s64ws-field-focus));
}

.shift64-woo-search-shortcode .shift64-woo-search-field__submit:hover {
    filter: brightness(0.92);
}

.shift64-woo-search-shortcode .shift64-woo-search-field__submit:focus-visible {
    outline: 2px solid var(--s64ws-field-focus);
    outline-offset: 2px;
}

/* The fallback and block wrappers are as wide as whatever column they sit in, so
   this rule pins the tray to the field. The configurable custom width that this
   used to defer to was a global appearance control; the Search Panel block owns
   its own maxWidth now, so the tray simply tracks its field again. */
.shift64-woo-search-shortcode .shift64-woo-search-results {
    width: 100%;
    min-width: 0;
    max-width: calc(100vw - 32px);
}

/* The modal owns its own width — its dialog is already a deliberate, centred size,
   and a tray narrower or wider than the dialog it sits in just looks broken. */
.shift64-woo-search-modal__search .shift64-woo-search-results {
    width: 100%;
    max-width: none;
}

/* ================================================================
   Search Blocks
   ================================================================ */
.shift64-woo-search-block {
    box-sizing: border-box;
}

.shift64-woo-search-block--form {
    width: 100%;
}

.shift64-woo-search-block.has-text-color {
    --s64ws-field-color: currentColor;
}

.shift64-woo-search-block.is-style-pill,
.shift64-woo-search-block--modal.has-modal-search-style-pill,
.shift64-woo-search-modal--block.has-modal-search-style-pill {
    --s64ws-field-radius: 999px;
}

.shift64-woo-search-block.is-style-minimal .shift64-woo-search-field__input,
.shift64-woo-search-block--modal.has-modal-search-style-minimal .shift64-woo-search-modal__search .shift64-woo-search-field__input,
.shift64-woo-search-modal--block.has-modal-search-style-minimal .shift64-woo-search-modal__search .shift64-woo-search-field__input {
    background: transparent;
    border-width: 0 0 1px;
    border-radius: 0;
}

:where(
    .shift64-woo-search-block.is-style-minimal .shift64-woo-search-field__submit,
    .shift64-woo-search-block--modal.has-modal-search-style-minimal .shift64-woo-search-modal__search .shift64-woo-search-field__submit,
    .shift64-woo-search-modal--block.has-modal-search-style-minimal .shift64-woo-search-modal__search .shift64-woo-search-field__submit
) {
    color: currentColor;
    background: transparent;
}

.shift64-woo-search-block.is-style-minimal .shift64-woo-search-field__submit,
.shift64-woo-search-block--modal.has-modal-search-style-minimal .shift64-woo-search-modal__search .shift64-woo-search-field__submit,
.shift64-woo-search-modal--block.has-modal-search-style-minimal .shift64-woo-search-modal__search .shift64-woo-search-field__submit {
    border-width: 0 0 1px;
    border-radius: 0;
}

.shift64-woo-search-block--modal .shift64-woo-search-modal__trigger {
    width: calc(var(--s64ws-trigger-icon-size, 24px) + var(--s64ws-trigger-padding, 10px) + var(--s64ws-trigger-padding, 10px));
    height: calc(var(--s64ws-trigger-icon-size, 24px) + var(--s64ws-trigger-padding, 10px) + var(--s64ws-trigger-padding, 10px));
    border: 1px solid transparent;
    border-radius: var(--s64ws-trigger-radius, 50px);
}

.shift64-woo-search-block--modal .shift64-woo-search-modal__trigger > svg {
    width: var(--s64ws-trigger-icon-size, 24px);
    height: var(--s64ws-trigger-icon-size, 24px);
}

.shift64-woo-search-block--modal.has-trigger-style-icon .shift64-woo-search-modal__trigger {
    color: var(--s64ws-trigger-icon-color, currentColor);
    background: transparent;
}

.shift64-woo-search-block--modal.has-trigger-style-icon .shift64-woo-search-modal__trigger:hover {
    color: var(--s64ws-trigger-icon-hover-color, var(--s64ws-trigger-icon-color, currentColor));
    background: var(--s64ws-trigger-surface-hover-color, color-mix(in srgb, currentColor 8%, transparent));
}

.shift64-woo-search-block--modal.has-trigger-style-background .shift64-woo-search-modal__trigger {
    color: var(--s64ws-trigger-icon-color, #fff);
    background: var(--s64ws-trigger-surface-color, var(--shift64-woo-search-brand-color, #183e86));
}

.shift64-woo-search-block--modal.has-trigger-style-background .shift64-woo-search-modal__trigger:hover {
    color: var(--s64ws-trigger-icon-hover-color, var(--s64ws-trigger-icon-color, #fff));
    background: var(
        --s64ws-trigger-surface-hover-color,
        color-mix(in srgb, var(--s64ws-trigger-surface-color, var(--shift64-woo-search-brand-color, #183e86)) 82%, #000)
    );
}

.shift64-woo-search-block--modal.has-trigger-style-outline .shift64-woo-search-modal__trigger {
    color: var(--s64ws-trigger-icon-color, currentColor);
    background: transparent;
    border-width: var(--s64ws-trigger-outline-width, 1px);
    border-color: var(--s64ws-trigger-surface-color, currentColor);
}

.shift64-woo-search-block--modal.has-trigger-style-outline .shift64-woo-search-modal__trigger:hover {
    color: var(--s64ws-trigger-icon-hover-color, var(--s64ws-trigger-icon-color, currentColor));
    background: transparent;
    border-color: var(--s64ws-trigger-surface-hover-color, var(--s64ws-trigger-surface-color, currentColor));
}

/* ================================================================
   Modal Search Shortcode
   ================================================================ */
.shift64-woo-search-modal-shortcode {
    display: inline-flex;
    line-height: 1;
}

.shift64-woo-search-modal__trigger,
.shift64-woo-search-modal__close {
    appearance: none;
    display: inline-grid;
    place-items: center;
    margin: 0;
    padding: 0;
    color: inherit;
    background: transparent;
    border: 0;
    border-radius: 999px;
    box-shadow: none;
    cursor: pointer;
    line-height: 1;
}

.shift64-woo-search-modal__trigger {
    position: relative;
    width: 44px;
    height: 44px;
    line-height: 0;
}

/* ServerSideRender keeps the real modal closed on the site. Editors can opt
   into a contained preview while working on the modal's content and styles. */
.editor-styles-wrapper .shift64-woo-search-block--modal.is-preview-open .shift64-woo-search-modal-shortcode {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
}

.editor-styles-wrapper .shift64-woo-search-block--modal.is-preview-open .shift64-woo-search-modal[hidden] {
    position: relative;
    inset: auto;
    z-index: auto;
    display: flex;
    align-self: stretch;
    box-sizing: border-box;
    width: 100%;
    margin-top: 12px;
    padding: 64px 24px 24px;
    overflow: visible;
}

.editor-styles-wrapper .shift64-woo-search-block--modal .shift64-woo-search-modal__dialog {
    width: min(760px, 100%);
    margin: 0 auto;
    animation: none;
}

.editor-styles-wrapper .shift64-woo-search-block--modal .shift64-woo-search-modal__close {
    top: -52px;
}

.shift64-woo-search-modal__trigger:focus-visible,
.shift64-woo-search-modal__close:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
}

.shift64-woo-search-modal[hidden] {
    display: none;
}

.shift64-woo-search-modal {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 24px;
    overflow-y: auto;
    background: rgba(0, 0, 0, 0.83);
    background: color-mix(
        in srgb,
        var(--s64ws-modal-background-color, #000) var(--s64ws-modal-background-opacity, 83%),
        transparent
    );
    animation: s64ws-modal-fade-in 0.18s ease-out;
}

.shift64-woo-search-modal__dialog {
    position: relative;
    width: min(760px, 100%);
    margin: clamp(64px, 12vh, 136px) auto 40px;
    animation: s64ws-modal-dialog-in 0.22s ease-out;
}

.shift64-woo-search-modal__close {
    position: absolute;
    top: -54px;
    right: 0;
    width: 44px;
    height: 44px;
    color: #fff;
}

.shift64-woo-search-modal__search .shift64-woo-search-field__input {
    min-height: 56px;
    padding: 13px 54px 13px 18px;
    font-size: 18px;
}

.shift64-woo-search-modal--block .shift64-woo-search-modal__search .shift64-woo-search-field__input {
    font-size: inherit;
    line-height: inherit;
}

.shift64-woo-search-modal--block.has-search-input-text-color .shift64-woo-search-modal__search .shift64-woo-search-field__input,
.shift64-woo-search-modal--block.has-search-input-text-color .shift64-woo-search-modal__search .shift64-woo-search-field__input::placeholder {
    color: var(--s64ws-modal-input-color);
}

.shift64-woo-search-modal--block.has-search-input-text-color .shift64-woo-search-modal__search .shift64-woo-search-field__input::placeholder {
    opacity: 1;
}

.shift64-woo-search-modal--block.has-search-input-background-color .shift64-woo-search-modal__search .shift64-woo-search-field__input {
    background-color: var(--s64ws-modal-input-background);
}

.shift64-woo-search-modal--block.has-search-button-color .shift64-woo-search-modal__search .shift64-woo-search-field__submit {
    color: var(--s64ws-modal-button-color);
}

.shift64-woo-search-modal--block.has-search-button-background-color .shift64-woo-search-modal__search .shift64-woo-search-field__submit {
    background: var(--s64ws-modal-button-background);
}

.shift64-woo-search-modal--block.has-search-button-hover-color .shift64-woo-search-modal__search .shift64-woo-search-field__submit:hover {
    color: var(--s64ws-modal-button-hover-color);
}

.shift64-woo-search-modal--block.has-search-button-background-hover-color .shift64-woo-search-modal__search .shift64-woo-search-field__submit:hover {
    background: var(--s64ws-modal-button-hover-background);
}

.shift64-woo-search-modal--block .shift64-woo-search-modal__search .shift64-woo-search-field__submit:hover {
    filter: none;
}

.shift64-woo-search-modal__search .shift64-woo-search-field {
    display: block;
}

.shift64-woo-search-modal__search .shift64-woo-search-field__controls {
    display: flex;
    align-items: stretch;
    width: 100%;
}

.shift64-woo-search-modal__search .shift64-woo-search-field__input-wrap {
    position: relative;
    display: flex;
    flex: 1 1 0%;
    width: auto;
    min-width: 0;
}

.shift64-woo-search-modal__search input[type="search"]::-webkit-search-cancel-button {
    display: none;
    appearance: none;
}

.shift64-woo-search-modal__search .shift64-woo-search-field__clear {
    appearance: none;
    position: absolute;
    top: 50%;
    right: 10px;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    margin: 0;
    padding: 0;
    color: var(--s64ws-meta-color);
    background: transparent;
    border: 0;
    border-radius: 999px;
    box-shadow: none;
    cursor: pointer;
    line-height: 0;
    transform: translateY(-50%);
}

.shift64-woo-search-modal__search .shift64-woo-search-field__clear:hover {
    color: var(--s64ws-field-color);
    background: color-mix(in srgb, currentColor 8%, transparent);
}

.shift64-woo-search-modal__search .shift64-woo-search-field__clear[hidden] {
    display: none;
}

.shift64-woo-search-modal__search .shift64-woo-search-field__submit {
    position: relative;
    display: inline-grid;
    place-items: center;
    align-self: stretch !important;
    flex: 0 0 auto;
    width: 58px;
    height: auto !important;
    min-height: 56px;
    padding: 0;
    line-height: 0;
}

.shift64-woo-search-modal__trigger > svg,
.shift64-woo-search-modal__close > svg,
.shift64-woo-search-modal__search .shift64-woo-search-field__clear > svg,
.shift64-woo-search-modal__search .shift64-woo-search-field__submit > svg {
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    margin: 0;
    transform: translate(-50%, -50%);
}

.shift64-woo-search-modal__search .shift64-woo-search-results {
    max-height: min(65vh, var(--s64ws-dropdown-max-height));
}

/* The modal itself provides click-outside handling and the backdrop. */
.shift64-woo-search-modal .shift64-woo-search-results__overlay {
    display: none !important;
}

body.shift64-woo-search-modal-open {
    overflow: hidden;
}

@keyframes s64ws-modal-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes s64ws-modal-dialog-in {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ================================================================
   Dropdown Container
   ================================================================ */
.shift64-woo-search-results {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    /* Anchored to both edges of the search field, which is how the tray has
       always behaved by default. The viewport cap is what keeps a wide field
       from producing a horizontal scrollbar on narrower desktops. */
    width: auto;
    max-width: calc(100vw - 32px);
    z-index: var(--s64ws-dropdown-z);
    background: var(--s64ws-dropdown-bg);
    border: 1px solid var(--s64ws-dropdown-border);
    border-radius: var(--s64ws-dropdown-radius);
    box-shadow: var(--s64ws-dropdown-shadow);
    max-height: var(--s64ws-dropdown-max-height);
    overflow: hidden;
    display: none;
    /* Flex column: scroll area + sticky footer */
    flex-direction: column;
}

.shift64-woo-search-results--visible {
    display: flex;
}

/* Scrollable inner area (sections live here) */
.shift64-woo-search-results__scroll {
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
}

/* ================================================================
   Sections (Suggestions, Categories, Products)
   ================================================================ */
.shift64-woo-search-section {
    padding: 20px 16px;
    animation: s64ws-section-fade-in 0.2s ease forwards;
}

.shift64-woo-search-section+.shift64-woo-search-section {
    border-top: 1px solid var(--s64ws-section-border);
}

.shift64-woo-search-section__header {
    padding: 0 0 8px;
    font-size: var(--s64ws-section-header-size);
    font-weight: var(--s64ws-section-header-weight);
    color: var(--s64ws-section-header-color);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    user-select: none;
}

@keyframes s64ws-section-fade-in {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

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

/* ================================================================
   Result Item (shared base for all types)
   ================================================================ */
.shift64-woo-search-result {
    display: flex;
    align-items: center;
    gap: var(--s64ws-item-gap);
    padding: 10px 0;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    transition: background-color 0.15s;
}

.shift64-woo-search-result:hover,
.shift64-woo-search-result--active {
    background: var(--s64ws-item-hover-bg);
}

.shift64-woo-search-result:active {
    background: var(--s64ws-item-active-bg);
}

/* ================================================================
   Suggestion Item — search icon + text
   ================================================================ */
.shift64-woo-search-result--suggestion {
    gap: 10px;
    padding: 8px 0;
}

.shift64-woo-search-result__icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    color: var(--s64ws-meta-color);
}

.shift64-woo-search-result--suggestion .shift64-woo-search-result__text {
    font-size: var(--s64ws-title-size);
    color: var(--s64ws-title-color);
}

/* ================================================================
   Category & Brand Items — bold text
   ================================================================ */
.shift64-woo-search-result--category,
.shift64-woo-search-result--brand {
    padding: 8px 0;
}

.shift64-woo-search-result--category .shift64-woo-search-result__text,
.shift64-woo-search-result--brand .shift64-woo-search-result__text {
    font-size: var(--s64ws-title-size);
    font-weight: var(--s64ws-title-weight);
    color: var(--s64ws-title-color);
}

/* ================================================================
   Product Item — Image + Content
   ================================================================ */
.shift64-woo-search-result__image {
    width: var(--s64ws-image-size);
    height: var(--s64ws-image-size);
    object-fit: contain;
    border-radius: var(--s64ws-image-radius);
    background: var(--s64ws-image-bg);
    flex-shrink: 0;
}

.shift64-woo-search-result__content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.shift64-woo-search-result__title {
    font-size: var(--s64ws-title-size);
    font-weight: var(--s64ws-title-weight);
    color: var(--s64ws-title-color);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.shift64-woo-search-result__meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--s64ws-meta-size);
    color: var(--s64ws-meta-color);
    line-height: 1.3;
}

.shift64-woo-search-result__sku {
    font-size: var(--s64ws-meta-size);
    color: var(--s64ws-meta-color);
}

.shift64-woo-search-result__category,
.shift64-woo-search-result__brand {
    font-size: var(--s64ws-meta-size);
    color: var(--global-palette6, #888);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Pipe separator between meta items */
.shift64-woo-search-result__meta-sep {
    color: var(--global-palette6, #888);
}

/* ================================================================
   "See All Results" Link — Sticky footer
   ================================================================ */
.shift64-woo-search-results__all {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px 16px;
    font-size: var(--s64ws-see-all-size);
    font-weight: var(--s64ws-see-all-weight);
    color: var(--s64ws-see-all-color);
    text-decoration: none;
    border-top: 1px solid var(--s64ws-dropdown-border);
    background: var(--s64ws-dropdown-bg);
    flex-shrink: 0;
    transition: background-color 0.15s;
    cursor: pointer;
}

.shift64-woo-search-results__all:hover {
    background: var(--s64ws-item-hover-bg);
}

/* ================================================================
   Loading State
   ================================================================ */
.shift64-woo-search-results__loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
    color: var(--s64ws-meta-color);
    font-size: var(--s64ws-meta-size);
}

/* ================================================================
   No Results
   ================================================================ */
.shift64-woo-search-results__empty {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
    color: var(--s64ws-meta-color);
    font-size: var(--s64ws-title-size);
}

/* ================================================================
   Overlay — Click-to-close backdrop
   ================================================================ */
.shift64-woo-search-results__overlay {
    position: fixed;
    inset: 0;
    z-index: calc(var(--s64ws-dropdown-z) - 1);
    display: none;
    pointer-events: auto;
}

.shift64-woo-search-results__overlay--visible {
    display: block;
}

/* Raise the search field above the overlay so mousedown/mousemove/mouseup
   reach the input — otherwise the overlay (z-index = dropdown-z - 1) sits
   visually on top of the input and breaks text selection. The overlay still
   covers everything else, so clicks on links underneath are still blocked. */
.shift64-woo-search-shortcode > .shift64-woo-search-field {
    position: relative;
    z-index: var(--s64ws-dropdown-z);
}

/* ================================================================
   Mobile — Full-width dropdown, capped height
   ================================================================ */
@media (max-width: 1024px) {
    /* Full-bleed within the field, with no viewport cap to fight. */
    .shift64-woo-search-results,
    .shift64-woo-search-shortcode .shift64-woo-search-results {
        right: 0;
        width: auto;
        max-width: none;
    }

    .shift64-woo-search-results {
        max-height: 70vh;
        border-radius: var(--s64ws-dropdown-radius) var(--s64ws-dropdown-radius);
    }

    .shift64-woo-search-modal {
        padding: 18px;
    }

    .shift64-woo-search-modal__dialog {
        margin-top: 60px;
    }
}

/* ================================================================
   Reduced Motion
   ================================================================ */
@media (prefers-reduced-motion: reduce) {

    .shift64-woo-search-result,
    .shift64-woo-search-results__all {
        transition: none;
    }

    .shift64-woo-search-section {
        animation: none;
    }

    .shift64-woo-search-modal,
    .shift64-woo-search-modal__dialog {
        animation: none;
    }
}
/* Body scroll lock while the modal search dialog is open */
body.shift64-woo-search-modal-open {
    overflow: hidden;
}

/* ── Archive debug panel ──────────────────────────────────────
   Opt-in diagnostic overlay, rendered only for users who can manage
   WooCommerce and only when the Diagnostics setting is on.

   These rules used to live as an inline style attribute on the element.
   They moved here so the styling does not have to be restated in
   JavaScript whenever the bar is rebuilt. */
.shift64-woo-search-debug-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #1d2327;
    color: #f0f0f1;
    font: 12px/1.6 monospace;
    padding: 8px 16px;
    z-index: 99999;
    max-height: 200px;
    overflow-y: auto;
    opacity: 0.95;
}

/* A fixed-position diagnostic strip is unusable on a phone, and it is only ever
   visible to a logged-in administrator who opted in, so hide it below the mobile
   breakpoint. */
@media (max-width: 768px) {

    .shift64-woo-search-debug-bar {
        display: none !important;
    }
}