.cloud-search-managed-form {
    position: relative;
}

/*
 * The autocomplete dropdown (with its own "Show all results" row, see below) replaces the need
 * for the native magnifying-glass submit button - hide it so the input's "x" clear icon can sit
 * flush against the input's actual right edge instead of leaving a gap for the removed button.
 * Enter-to-submit on the input still works natively (the hidden button remains in the DOM), so
 * nothing breaks if JS is unavailable.
 */
.js-cloud-search-form .input-group-append {
    display: none !important;
}

.js-cloud-search-form .form-clear {
    right: 12px !important;
}

.cloud-search-autocomplete {
    position: absolute;
    top: calc(100% + 0.25rem);
    left: 0;
    right: 0;
    z-index: 1050;
    padding: 0.5rem;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 0.375rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    /* Cap the dropdown height so it doesn't grow unbounded, but let it get close to the
       bottom of the page (rather than a small fixed height) once there are enough
       suggestions to fill it - the (small) "Show all results" row also lives inside this
       scroll area. */
    max-height: 85vh;
    overflow-y: auto;
}

.cloud-search-autocomplete-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.cloud-search-autocomplete-item + .cloud-search-autocomplete-item {
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

/* "Show all results" row - always first, styled as a prominent button rather than a plain list
   row, since it's the primary action (equivalent to submitting the search form). */
.cloud-search-autocomplete-item-showall {
    margin-bottom: 0.5rem;
}

.cloud-search-autocomplete-link.cloud-search-autocomplete-showall {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    text-decoration: none;
    justify-content: center;
    font-weight: 600;
    border-radius: 0.375rem;
    padding: 0.625rem 1rem;
    /* color/background come from Bootstrap's .btn-primary (added in JS) so the button always
       matches the active template's primary color instead of a hardcoded one; layout props
       are duplicated here (rather than shared with .cloud-search-autocomplete-link below)
       because that shared rule's "color: inherit" would otherwise tie in specificity with
       .btn-primary and (depending on stylesheet load order) win, hiding the button's text. */
}

.cloud-search-autocomplete-item-showall.is-active .cloud-search-autocomplete-showall {
    filter: brightness(0.9);
}


.cloud-search-autocomplete-item-showall + .cloud-search-autocomplete-item {
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.cloud-search-autocomplete-link:not(.cloud-search-autocomplete-showall),
.cloud-search-state-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.625rem 0.5rem;
    color: inherit;
    text-decoration: none;
}

.cloud-search-autocomplete-thumb {
    flex: 0 0 auto;
    width: 2.5rem;
    height: 2.5rem;
    object-fit: contain;
    border-radius: 0.25rem;
    background: #f8f9fa;
}

.cloud-search-autocomplete-text {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    justify-content: center;
    gap: 0.15rem;
    min-width: 0;
}

.cloud-search-autocomplete-item.is-active,
.cloud-search-autocomplete-link:not(.cloud-search-autocomplete-showall):hover,
.cloud-search-state-link:hover {
    background: rgba(13, 110, 253, 0.08);
}

/* On wide screens the search input itself is fairly narrow, cramping thumb + title + sku +
   price; widen the dropdown to roughly double its input-bound width there, anchored to the
   input's right edge (left:auto) so it grows toward page center instead of off-screen. */
@media (min-width: 768px) {
    .cloud-search-autocomplete {
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        width: 28rem;
        max-width: 90vw;
    }
}

.cloud-search-autocomplete-label {
    font-weight: 600;
    /* Clip long titles to a single line instead of wrapping/pushing the sku+price row down -
       row height must stay predictable now that the dropdown itself scrolls (see above). */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cloud-search-autocomplete-meta-row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.3rem 0.6rem;
    min-width: 0;
}

/* Each metadata piece (sku, price, rating, stock) is its own block: it can wrap onto the
   next line as a whole, but its own content never breaks mid-text. A small margin keeps
   blocks visually separated even where the flex `gap` above isn't enough (wrapped rows). */
.cloud-search-autocomplete-meta-row > * {
    white-space: nowrap;
    margin: 0.05rem 0;
}

/* Separator dot between blocks - lives on the block itself (not a separate flex item), so
   wrapping always keeps the dot together with the block that follows it. */
.cloud-search-autocomplete-meta-row > *:not(:first-child)::before {
    content: '\00b7';
    margin-right: 0.6rem;
    color: #adb5bd;
}

/* No CSS selector exists for "first flex item on a wrapped line" - JS
   (markMetaRowLineStarts in searchBox.js) measures this at render/resize time and
   applies this class so a block that wraps onto a new line never shows a leading dot. */
.cloud-search-autocomplete-meta-row > .cloud-search-autocomplete-meta-line-start::before {
    content: none;
    margin-right: 0;
}

.cloud-search-autocomplete-sku {
    color: #6c757d;
    font-size: 0.8rem;
}

.cloud-search-autocomplete-meta {
    color: #6c757d;
}

.cloud-search-autocomplete-old-price {
    color: #adb5bd;
    font-weight: 400;
}

.cloud-search-autocomplete-current-price {
    color: #212121;
    font-weight: 600;
}

.cloud-search-autocomplete-discount {
    color: #fff;
    background: #dc3545;
    font-weight: 600;
    font-size: 0.7rem;
    padding: 0.05rem 0.3rem;
    border-radius: 0.25rem;
}

.cloud-search-autocomplete-rating {
    color: #b8860b;
}

.cloud-search-autocomplete-stock.is-in-stock {
    color: #198754;
}

.cloud-search-autocomplete-stock.is-out-of-stock {
    color: #dc3545;
}

.cloud-search-state {
    padding: 0.5rem;
    font-size: 0.95rem;
}

.cloud-search-state.is-loading {
    color: #0d6efd;
    cursor: wait;
}

.cloud-search-state.is-warning {
    color: #856404;
}

.cloud-search-state.is-empty {
    color: #6c757d;
}

/*
 * Blurred skeleton-card grid shown in place of `#result-wrapper`'s own content the instant the
 * search form is submitted, while the browser navigates to the natively rendered results page -
 * gives immediate feedback in just the product-grid area (header/sidebar/breadcrumbs stay
 * untouched) instead of a blank/frozen grid on slow connections. Bootstrap-5-style
 * ".placeholder"/".placeholder-glow" look, backported for the shop's Bootstrap 4.6 (plugin-scoped
 * "jtlcs-" prefix rather than touching shop-wide Bootstrap) - see
 * https://getbootstrap.com/docs/5.1/components/placeholders/.
 */
.jtlcs-nav-loading,
.jtlcs-nav-loading * {
    cursor: wait;
}

.jtlcs-skel-card {
    height: 100%;
}

.jtlcs-placeholder {
    display: block;
    background-color: #dee2e6;
    border-radius: 0.25rem;
    filter: blur(1px);
}

.jtlcs-placeholder-glow .jtlcs-placeholder {
    animation: jtlcs-placeholder-glow 2s ease-in-out infinite;
}

@keyframes jtlcs-placeholder-glow {
    50% {
        opacity: 0.3;
    }
}

.jtlcs-placeholder-image {
    width: 100%;
    padding-top: 100%;
    margin-bottom: 0.75rem;
}

.jtlcs-placeholder-text {
    height: 0.9rem;
    margin-bottom: 0.5rem;
}

.jtlcs-placeholder-text-short {
    width: 45%;
}