/* Layout 1 — search results.
   Scoped under .app-shell, matching the other v1 sheets, so these rules outrank
   anything a shared desktop stylesheet might still set on the same classes. */

/* --- Page shell ----------------------------------------------------------
   This page's wrapper is .app-section, whose rule puts all its rhythm on the
   top edge and leaves the bottom at 0 — right for a section stacked among
   others on the home page, but this is a whole page, so it would end flush
   against the fixed bottom nav. The page-edge tokens restore the same top and
   bottom spacing every other layout 1 page now uses. */

.app-shell .sr-section {
    padding-top: var(--app-page-top);
    padding-bottom: var(--app-page-bottom);
}

/* --- Heading --------------------------------------------------------------
   Title with a result-count pill beside it, and the search term beneath. The
   same treatment the category listing's .pl-head uses, so the two pages read as
   one design rather than two. */

.app-shell .sr-head {
    margin-bottom: 20px;
}

.app-shell .sr-head-titlerow {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.app-shell .sr-title {
    margin: 0;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -.3px;
    color: var(--app-ink);
}

.app-shell .sr-count {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--app-theme-soft, #eef4ff);
    color: var(--app-theme);
    font-size: 11.5px;
    font-weight: 600;
    white-space: nowrap;
}

.app-shell .sr-term {
    margin: 8px 0 0;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--app-muted);
}

.app-shell .sr-term strong {
    color: var(--app-ink);
    font-weight: 600;
    /* A long query must not push the line out of the frame. */
    word-break: break-word;
}

/* --- Empty state ----------------------------------------------------------
   Centred block with the shared no-item artwork, a heading and a way out. The
   desktop version stopped at the image and heading, which left the customer on
   a dead end with no route back into the catalogue. */

.app-shell .sr-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 32px 16px 40px;
}

.app-shell .sr-empty-img {
    width: 100%;
    /* Capped rather than sized: the source asset is much larger than this block
       needs, and at full size it dominated the page. */
    max-width: 148px;
    height: auto;
    margin-bottom: 20px;
    /* The artwork is mid-grey line art; softening it keeps the heading below as
       the thing the eye lands on. */
    opacity: .55;
}

.app-shell .sr-empty-title {
    margin: 0 0 8px;
    font-size: 18px;
    font-weight: 700;
    color: var(--app-ink);
}

.app-shell .sr-empty-text {
    margin: 0 0 20px;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--app-muted);
    max-width: 44ch;
}

.app-shell .sr-empty-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 11px 20px;
    border-radius: 10px;
    background: var(--app-theme);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: filter .15s ease;
}

.app-shell .sr-empty-btn:hover,
.app-shell .sr-empty-btn:focus {
    filter: brightness(.93);
    color: #fff;
}

@media (max-width: 600px) {
    .app-shell .sr-title {
        font-size: 19px;
    }

    .app-shell .sr-empty {
        padding: 24px 8px 32px;
    }

    .app-shell .sr-empty-img {
        max-width: 116px;
    }
}