/* ============================================================
   OroCafe – header search, its suggestion panel, the results
   page, and the header-icon row those controls sit in.
   ============================================================ */

/* ---------- The shared header icon ----------
   Search, the bell and the cart are one set: same size, same shape, same spacing. They used to be
   three circles that each reserved a fixed 44px, which is what crowded the phone header. */
/* On a desktop header these sit next to the profile avatar, which is a 44px circle. A bare glyph
   beside a circle reads as two different kinds of control, so search, the bell and the cart take
   the same circle at the same size. Phones drop the circles again further down - there is no
   avatar in the mobile header, and three outlines beside the logo crowd a 360px screen. */
.header-icon {
    position: relative;
    width: 44px;
    height: 44px;
    flex: none;
    display: inline-grid;
    place-items: center;
    padding: 0;
    border: 1px solid rgba(92, 42, 18, .25);
    border-radius: 50%;
    background: transparent;
    color: var(--brown);
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease, transform .2s ease;
}

.header-icon svg {
    width: 22px;
    height: 22px;
}

.header-icon:hover,
.header-icon[aria-expanded="true"] {
    background: var(--brown);
    color: var(--cream);
    transform: translateY(-2px);
}

.header-icon:focus-visible {
    outline: 2px solid var(--orange);
    outline-offset: 3px;
}

/* The set sits closer together than the nav links around it, so it reads as one group. */
.header-actions {
    gap: 12px;
}

/* A badge tuned for a square glyph pokes out too far on a circle. */
.header-cart .cart-badge {
    top: -3px;
    right: -3px;
}

/* The cart's icon is drawn as a stroke, unlike the solid ones beside it. */
.header-cart svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.search__trigger svg {
    fill: currentColor;
}

/* ---------- The search panel ---------- */
/* A block wrapper around an inline-grid button keeps a text line-box, which left the glyph sitting
   a couple of pixels above the cart and the bell. Flex drops the line-box and lines the three up. */
.search {
    position: relative;
    flex: none;
    display: inline-flex;
    align-items: center;
}

.search__panel {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    z-index: 140;
    width: min(720px, calc(100vw - 32px));
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--white);
    box-shadow: var(--shadow-lg);
}

.search__panel[hidden] {
    display: none;
}

.search__form {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 6px 5px 16px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--cream);
}

.search__form:focus-within {
    border-color: var(--orange);
}

.search__input {
    flex: 1;
    min-width: 0;
    height: 48px;
    border: 0;
    background: transparent;
    font-family: var(--body);
    font-size: 1.05rem;
    color: var(--ink);
}

.search__input:focus {
    outline: none;
}

/* The browser's own clear button sits on top of ours and looks nothing like it. */
.search__input::-webkit-search-cancel-button {
    display: none;
}

.search__clear {
    flex: none;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--muted);
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
}

.search__clear:hover {
    background: rgba(1, 56, 45, .08);
    color: var(--ink);
}

/* The magnifier inside the field is the submit. */
.search__submit {
    flex: none;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: var(--radius-sm);
    background: var(--orange);
    color: var(--brand-dark-green);
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease;
}

.search__submit svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

.search__submit:hover {
    background: var(--brand-dark-green);
    color: var(--cream);
}

.search__results {
    max-height: min(58vh, 520px);
    overflow-y: auto;
    margin-top: 10px;
    scrollbar-width: thin;
    scrollbar-color: rgba(1, 56, 45, .28) transparent;
}

.search__results::-webkit-scrollbar {
    width: 8px;
}

.search__results::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(1, 56, 45, .28);
}

.search-panel__hint {
    margin: 0;
    padding: 22px 12px;
    font-size: .86rem;
    line-height: 1.5;
    color: var(--muted);
    text-align: center;
}

.search-panel__all {
    display: block;
    margin-top: 6px;
    padding: 12px;
    border-top: 1px solid var(--line);
    color: var(--ink);
    font-size: .8rem;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
}

.search-panel__all:hover {
    color: var(--orange-2);
}

/* ---------- Result groups and rows (dropdown and page share these) ---------- */
.search-group + .search-group {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--line);
}

.search-group__head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 4px;
    padding: 0 10px;
    font-family: var(--body);
    font-size: .7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--muted);
}

.search-group__head svg {
    width: 14px;
    height: 14px;
    fill: currentColor;
}

.search-group__count {
    margin-left: auto;
    font-weight: 700;
    opacity: .7;
}

.search-group__more {
    display: inline-block;
    margin: 6px 0 0 10px;
    font-size: .78rem;
    font-weight: 700;
    color: var(--muted);
    text-decoration: none;
}

.search-group__more:hover {
    color: var(--orange-2);
}

.search-hit {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 10px;
    border-radius: var(--radius-sm);
    color: inherit;
    text-decoration: none;
}

.search-hit:hover {
    background: var(--cream);
}

.search-hit__thumb {
    flex: none;
    width: 44px;
    height: 44px;
    overflow: hidden;
    border-radius: var(--radius-sm);
    background: var(--cream-3);
}

.search-hit__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.search-hit__text {
    display: grid;
    gap: 1px;
    min-width: 0;
    flex: 1;
}

.search-hit__crumb {
    font-size: .66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.search-hit__title {
    font-size: .9rem;
    font-weight: 600;
    color: var(--ink);
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* The matching run of the query, marked in the title. */
.search-hit__title mark {
    padding: 0 1px;
    border-radius: 3px;
    background: var(--brand-pale-yellow);
    color: inherit;
}

.search-hit__snippet {
    font-size: .74rem;
    color: var(--muted);
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

.search-hit .ui-arrow {
    flex: none;
    color: var(--muted);
    opacity: 0;
    transition: opacity .15s ease;
}

.search-hit:hover .ui-arrow {
    opacity: 1;
}

/* ---------- The results page ---------- */
.search-page {
    padding: clamp(28px, 5vw, 64px) 0 clamp(64px, 8vw, 110px);
    /* An empty search is a heading, a field and one line of text. Without a floor, the footer
       climbs up under them and the page looks broken rather than merely empty. */
    min-height: 62vh;
}

/* One centred column rather than a narrow strip pinned to the left of a very wide shell. */
.search-page__shell {
    max-width: 820px;
}

.search-page h1 {
    margin: 0 0 22px;
    text-align: center;
}

/* The field and the suggestions it drops are one unit; the panel is positioned against this. */
.search-page__box {
    position: relative;
    z-index: 5;
    margin: 0 auto 22px;
}

.search-page__form {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 6px 5px 18px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--white);
}

.search-page__form:focus-within {
    border-color: var(--orange);
}

.search-page__input {
    flex: 1;
    min-width: 0;
    height: 54px;
    border: 0;
    background: transparent;
    font-family: var(--body);
    font-size: 1.1rem;
    color: var(--ink);
}

.search-page__input:focus {
    outline: none;
}

.search-page__input::-webkit-search-cancel-button {
    display: none;
}

.search-page__submit {
    flex: none;
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: var(--radius-sm);
    background: var(--orange);
    color: var(--brand-dark-green);
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease;
}

.search-page__submit svg {
    width: 22px;
    height: 22px;
    fill: currentColor;
}

.search-page__submit:hover {
    background: var(--brand-dark-green);
    color: var(--cream);
}

.search-page__suggestions {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    z-index: 130;
    max-height: min(58vh, 520px);
    overflow-y: auto;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--white);
    box-shadow: var(--shadow-lg);
    text-align: left;
    scrollbar-width: thin;
    scrollbar-color: rgba(1, 56, 45, .28) transparent;
}

.search-page__suggestions[hidden] {
    display: none;
}

.search-page__hint {
    margin: 0 0 26px;
    font-size: 1rem;
    color: var(--muted);
    line-height: 1.6;
    text-align: center;
}

.search-results--page {
    max-width: none;
}

.search-results--page .search-group + .search-group {
    margin-top: 26px;
    padding-top: 22px;
}

.search-results--page .search-group__head {
    font-size: .78rem;
    margin-bottom: 8px;
}

.search-results--page .search-hit {
    border: 1px solid var(--line);
    background: var(--white);
    margin-bottom: 8px;
    padding: 12px 14px;
    gap: 14px;
}

.search-results--page .search-hit__thumb {
    width: 54px;
    height: 54px;
}

.search-results--page .search-hit__title {
    font-size: 1.02rem;
}

.search-results--page .search-hit__crumb {
    font-size: .7rem;
}

.search-results--page .search-hit__snippet {
    font-size: .82rem;
}

/* ---------- Phones: the header has to hold four things and a logo ---------- */
@media (max-width: 860px) {
    /* The actions track was a fixed 40px, sized for the cart alone. It has to grow now that search
       and the bell sit beside it. The header also takes a narrower gutter than the rest of the
       page: at this width the hamburger and the cart were floating well inside the screen edge. */
    .site-header__inner {
        grid-template-columns: minmax(34px, 1fr) auto minmax(34px, 1fr);
        gap: 6px;
        padding-inline: 12px;
    }

    .nav-toggle {
        width: 34px;
        margin-left: -6px;
    }

    .header-actions {
        width: auto;
        gap: 0;
        margin-right: -4px;
    }

    /* No avatar in the mobile header, so no circles to match: bare glyphs, drawn larger than the
       desktop ones because they are the only thing carrying the tap target now.
       The box is narrower than it is tall so the three glyphs sit close together — the gap people
       see is this padding, not the flex gap, which is why that is zero. Height keeps the tap
       target honest. */
    .header-icon,
    .bell__trigger {
        width: 32px;
        height: 38px;
        border: 0;
        border-radius: 0;
        background: transparent;
    }

    .header-icon:hover,
    .header-icon[aria-expanded="true"],
    .bell__trigger:hover,
    .bell.is-open .bell__trigger {
        background: transparent;
        color: var(--orange-2);
        transform: none;
    }

    .header-icon svg,
    .bell__trigger svg {
        width: 24px;
        height: 24px;
    }

    .header-cart .cart-badge,
    .bell__badge {
        top: 0;
        right: 0;
    }

    .search__input {
        height: 44px;
        font-size: 1rem;
    }

    .search__submit {
        width: 40px;
        height: 40px;
    }

    .brand img {
        max-height: 42px;
        width: auto;
    }

    /* A dropdown pinned to a 36px button near the screen edge is the hardest thing to read on a
       phone, so the panel becomes a sheet anchored to the viewport instead. */
    .search__panel {
        position: fixed;
        inset: 80px 10px auto;
        width: auto;
    }

    .search__results {
        max-height: 60vh;
    }

    .search-page__input {
        height: 48px;
        font-size: 1rem;
    }

    .search-page__submit {
        width: 42px;
        height: 42px;
    }

    .search-page {
        min-height: 58vh;
    }
}

/* The sheet needs something behind it, or the page showing through reads as broken.
   The header is a sticky z-index:60 element, so the panel's own z-index is scoped inside it -
   which is why a dim at 139 sat on TOP of the panel and washed the whole sheet green. It has to
   stay under the header's layer, and it is lighter now that it is actually visible. */
@media (max-width: 860px) {
    body.search-open::after {
        content: "";
        position: fixed;
        inset: 0;
        z-index: 55;
        background: rgba(1, 56, 45, .32);
    }
}