:root {
    --gg-search-accent:  #ff6600;
    --gg-search-radius:  6px;
    --gg-search-shadow:  0 8px 24px rgba(0,0,0,.12), 0 2px 4px rgba(0,0,0,.04);
    --gg-search-row-gap: 12px;
    --gg-search-border:  #e8eaed;
    /* L5: named z-index tokens. Pick values that sit above Bootstrap's
     * default layers (modal: 1040-1060, navbar-fixed: 1030) and above
     * common sticky-header themes (often up to ~10000). If a host theme
     * still wins, override --gg-search-z-dropdown / --gg-search-z-mobile
     * in a Theme CSS Extra textarea. */
    --gg-search-z-dropdown: 1050;
    --gg-search-z-loader:   10;
    --gg-search-z-mic:      5;
    --gg-search-z-mobile:   100000;
}
#search { position: relative; }
.gg-search-results {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid var(--gg-search-border);
    border-radius: var(--gg-search-radius);
    box-shadow: var(--gg-search-shadow);
    z-index: var(--gg-search-z-dropdown);
    max-height: 75vh;
    overflow-y: auto;
    display: none;
    font-size: 14px;
    line-height: 1.4;
}
/* Two visible loader modes — see gg_search.js::showLoading().
 * inline: own block with its own height (first open, no prior results)
 * overlay: absolute fill over already-rendered rows, translucent bg */
.gg-search-loader {
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: var(--gg-search-z-loader);
}
.gg-search-loader--inline {
    position: relative;
    min-height: 96px;
    width: 100%;
    background: #fff;
    border-radius: inherit;
}
.gg-search-loader--overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    /* Opaque-ish rgba is cheaper than backdrop-filter: blur(), which forces
     * compositor reads every frame. The 1px of blur wasn't perceptible. */
    background: rgba(255,255,255,0.88);
    border-radius: inherit;
}
.gg-spinner {
    width: 32px; height: 32px;
    border-radius: 50%;
    border: 3px solid rgba(0,0,0,0.08);
    border-top-color: var(--gg-search-accent);
    animation: gg-spin 0.7s linear infinite;
}
@keyframes gg-spin {
    to { transform: rotate(360deg); }
}
.gg-search-section-title {
    padding: 10px 16px 4px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #6c757d;
    background: #fafbfc;
    border-bottom: 1px solid var(--gg-search-border);
}
.gg-search-section-title:not(:first-child) {
    border-top: 1px solid var(--gg-search-border);
}
.gg-search-row {
    display: grid;
    grid-template-columns: 64px 1fr auto;
    gap: var(--gg-search-row-gap);
    align-items: center;
    padding: 12px 16px;
    text-decoration: none;
    color: inherit;
    border-bottom: 1px solid #f5f5f7;
}
.gg-search-row:last-of-type { border-bottom: 0; }
.gg-search-row:hover,
.gg-search-row.gg-active { background: #f7f9fc; text-decoration: none; color: inherit; }
.gg-col-left  { display: flex; align-items: center; justify-content: center; }
.gg-col-left img { width: 56px; height: 56px; object-fit: contain; background: #f7f9fc; border-radius: 4px; }
.gg-col-center { min-width: 0; }
.gg-col-right  { text-align: right; white-space: nowrap; display: flex; flex-direction: column; align-items: flex-end; }
.gg-name   {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-weight: 500;
    color: #212529;
    margin-bottom: 4px;
    line-height: 1.35;
    word-break: break-word;
}
.gg-meta   { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12px; }
.gg-model  { color: #868e96; }
.gg-stock-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.4;
}
.gg-stock-in  { background: #e8f5e8; color: #2b8a3e; }
.gg-stock-out { background: #fff3e0; color: #8a3600; } /* WCAG AA: 4.5:1 on #fff3e0 */
.gg-price        { font-weight: 700; color: #212529; font-size: 15px; }
.gg-price-old    { font-size: 12px; color: #adb5bd; text-decoration: line-through; line-height: 1.1; }
.gg-price-special{ font-weight: 700; color: var(--gg-search-accent); font-size: 15px; line-height: 1.2; }
.gg-search-facet-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    border-bottom: 1px solid #f5f5f7;
}
.gg-search-facet-cell {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    text-decoration: none;
    color: inherit;
    min-width: 0;
    border-right: 1px solid #f5f5f7;
    border-bottom: 1px solid #f5f5f7;
}
.gg-search-facet-cell:nth-child(2n) { border-right: 0; }
.gg-search-facet-cell:hover,
.gg-search-facet-cell.gg-active { background: #f7f9fc; text-decoration: none; color: inherit; }
.gg-facet-thumb {
    width: 40px;
    height: 40px;
    object-fit: contain;
    flex: 0 0 40px;
    background: #f7f9fc;
    border-radius: 4px;
}
/* F-U7: generic brand/category placeholder when the row has no image.
 * Inline SVG as a data-URI avoids an extra request + lets the accent
 * colour cascade via currentColor. */
.gg-facet-thumb-empty {
    display: block;
    background: #f7f9fc url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'><rect x='6' y='10' width='28' height='20' rx='2' fill='none' stroke='%23adb5bd' stroke-width='1.5'/><path d='M10 22 l6 -6 l5 5 l4 -4 l5 5' fill='none' stroke='%23adb5bd' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/><circle cx='14' cy='15' r='1.8' fill='%23adb5bd'/></svg>") center/22px no-repeat;
}
.gg-facet-text { min-width: 0; display: flex; flex-direction: column; }
.gg-facet-name  { font-size: 13px; color: #212529; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gg-facet-count { font-size: 11px; color: #868e96; }
@media (max-width: 480px) {
    .gg-search-facet-grid { grid-template-columns: 1fr; }
    .gg-search-facet-cell { border-right: 0; }
}
.gg-search-more {
    display: block;
    padding: 12px 16px;
    text-align: center;
    color: var(--gg-search-accent);
    font-weight: 600;
    text-decoration: none;
    background: #fafbfc;
    border-top: 1px solid var(--gg-search-border);
    position: sticky;
    bottom: 0;
}
.gg-search-more:hover { background: #f0f4ff; color: var(--gg-search-accent); text-decoration: none; }

/* Empty-state row — shown when a query returns zero matches. */
.gg-search-empty {
    padding: 16px;
    text-align: center;
    color: #6c757d;
    font-size: 13px;
}

/* Error row — shown when the fetch failed (network / 5xx). Kept visible
 * until the retry button succeeds or the user types a new query. */
.gg-search-error {
    padding: 14px 16px;
    background: #fff3f3;
    color: #8a1f1f;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.gg-search-error-retry {
    appearance: none;
    background: #fff;
    color: #8a1f1f;
    border: 1px solid #e4b8b8;
    padding: 4px 10px;
    font-size: 12px;
    border-radius: 4px;
    cursor: pointer;
}
.gg-search-error-retry:hover { background: #fff6f6; border-color: #d29494; }

/* "Did you mean X?" link rendered below the empty-state when the model
 * returned a fuzzy suggestion. Clicking rewrites the input + re-fetches. */
.gg-search-dym {
    display: block;
    padding: 8px 16px 14px;
    text-align: center;
    color: var(--gg-search-accent);
    font-size: 13px;
    text-decoration: none;
}
.gg-search-dym em {
    font-style: normal;
    font-weight: 600;
    text-decoration: underline;
}
.gg-search-dym:hover { color: var(--gg-search-accent); text-decoration: none; }

/* Inline-mode row (admin sets sections.<key>.inline = 1). Single-line text
 * link with no thumbnail / price grid — fits articles, info pages. */
.gg-search-row--inline {
    display: block;
    grid-template-columns: none;
    padding: 6px 16px;
    color: #212529;
    font-size: 13px;
    line-height: 1.4;
}
.gg-search-row--inline:hover { background: #f7f9fc; color: inherit; }

/* Per-section "show more" link rendered when admin enables sections.<key>.show_more.
 * Sits beneath the section's rows, unobtrusive but clickable. */
.gg-search-section-more {
    display: block;
    padding: 4px 16px 10px;
    text-align: right;
    font-size: 12px;
    color: var(--gg-search-accent);
    text-decoration: none;
}
.gg-search-section-more:hover { text-decoration: underline; color: var(--gg-search-accent); }

/* Voice search mic button (admin enables dropdown.voice). Floats over the
 * input on the right; click toggles SpeechRecognition. */
.gg-search-mic {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    color: #6c757d;
    cursor: pointer;
    border-radius: 50%;
    z-index: var(--gg-search-z-mic);
}
/* Hover styling only on devices with a real hover-capable pointer
 * (mouse / trackpad). On touch devices the browser keeps :hover applied
 * to the last-tapped element until another tap clears it, which made
 * the mic look "still listening" after we'd already stopped it. */
@media (hover: hover) and (pointer: fine) {
    .gg-search-mic:hover { color: var(--gg-search-accent); background: #f7f9fc; }
}
.gg-search-mic--on  { color: var(--gg-search-accent); background: rgba(255,102,0,0.12); }
/* Make sure tap-to-stop's class removal actually returns the button to
 * idle visuals on touch devices: zero out :focus / :active highlights
 * that some mobile browsers leave behind. */
.gg-search-mic:focus { outline: none; }
.gg-search-mic:not(.gg-search-mic--on) { color: #6c757d; background: transparent; }

/* Mobile autocomplete dropdown — positioned against the mobar form/input
 * wrapper, not #search. Marker class set by gg_search.js when the input is
 * name="search_mobar" so desktop styling is untouched. */
.gg-search-results--mobar {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    max-height: 70vh;
    border-radius: var(--gg-search-radius);
    z-index: calc(var(--gg-search-z-dropdown) + 10);
}
@media (max-width: 768px) {
    /* Use a CSS custom property so JS can inject the measured input-bottom
     * offset at open time — the header height varies across themes and the
     * previous hardcoded `top: 60px` was cutting the dropdown in half. Cap
     * height at 75vh to match legacy's visual budget (was reaching 90vh+). */
    .gg-search-results,
    .gg-search-results--mobar {
        position: fixed;
        top: var(--gg-search-top-offset, 60px);
        left: 0;
        right: 0;
        max-height: min(75vh, calc(100vh - var(--gg-search-top-offset, 60px) - 16px));
        border-radius: 0;
        z-index: var(--gg-search-z-mobile); /* above any sticky theme headers */
    }
}