/* ============================================================
   OroCafe – notification bell, support desk and sitemap page.
   Loaded by both the storefront layout and the admin layout, so
   the bell looks the same wherever it appears.
   ============================================================ */

/* ---------- Notification bell ---------- */
.bell {
    position: relative;
    display: inline-flex;
    align-items: center;
    flex: none;
}

/* Matches .header-icon exactly, so search, the bell and the cart read as one set beside the
   profile avatar. search.css strips the circle back off below 860px. */
.bell__trigger {
    width: 44px;
    height: 44px;
    position: relative;
    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;
}

.bell__trigger svg {
    width: 22px;
    height: 22px;
    fill: currentColor;
}

.bell__trigger:hover,
.bell.is-open .bell__trigger {
    background: var(--brown);
    color: var(--cream);
    transform: translateY(-2px);
}

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

.bell__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 19px;
    height: 19px;
    padding: 0 5px;
    position: absolute;
    top: -3px;
    right: -3px;
    border-radius: 999px;
    border: 2px solid var(--cream);
    background: var(--brand-orange);
    color: #fff;
    font-size: .68rem;
    font-weight: 700;
    line-height: 1;
}

.bell__badge[hidden] {
    display: none;
}

.bell__panel {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    z-index: 130;
    /* Wide enough that a long product name fits in two lines instead of four. */
    width: min(560px, calc(100vw - 32px));
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--white);
    box-shadow: var(--shadow-lg);
}

.bell__panel[hidden] {
    display: none;
}

.bell__head {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 13px 16px;
    border-bottom: 1px solid var(--line);
    background: var(--white);
}

/* Three classes deep on purpose. The back office sets `body .admin h2`, which outranks a single
   class and blew this heading up to a page title inside a 380px dropdown. */
.bell .bell__head .bell__title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-family: var(--body);
    font-size: .95rem;
    line-height: 1.2;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--ink);
    white-space: nowrap;
}

/* The two actions are one group, not two things pushed to opposite ends of the row. */
.bell__actions {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-left: auto;
}

.bell__actions .bell__clear {
    white-space: nowrap;
}

.bell__clear {
    padding: 0;
    border: 0;
    background: none;
    color: var(--muted);
    font-size: .78rem;
    text-decoration: underline;
    cursor: pointer;
}

.bell__clear:hover {
    color: var(--ink);
}

/* Asking the browser for permission needs a real click, so it needs a real control. It reads as a
   state once it is on, which is why it is a disabled chip rather than a link at that point. */
.bell__desktop.is-on {
    text-decoration: none;
    color: var(--brand-dark-green);
    font-weight: 700;
    cursor: default;
}

.bell__desktop[hidden] {
    display: none;
}

/* No scrollbar anywhere in the panel: the feed is capped at five rows server-side and everything
   older lives one click away on the full page. */
.bell__body {
    overflow: visible;
}

/* On a desktop the newest few always fit on screen; anything below scrolls inside the panel. */
@media (min-width: 861px) {
    .bell__body {
        max-height: calc(100vh - 230px);
        overflow-y: auto;
        overscroll-behavior: contain;
    }
}

.bell__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    min-width: 20px;
    height: 20px;
    /* The title is a flex row with its own gap now, so a margin here doubles the space. */
    margin-left: 0;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--brand-orange);
    color: #fff;
    font-size: .68rem;
    line-height: 1;
}

.bell__count[hidden] {
    display: none;
}

/* Pinned to the bottom of the panel so there is always a way into the full history, even when
   the list above is long enough to scroll. */
.bell__all {
    display: block;
    padding: 12px 16px;
    border-top: 1px solid var(--line);
    background: var(--cream);
    color: var(--ink);
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    text-align: center;
    text-decoration: none;
}

.bell__all:hover {
    background: var(--brand-pale-yellow);
}

.bell__empty {
    margin: 0;
    padding: 26px 16px;
    font-size: .84rem;
    color: var(--muted);
    text-align: center;
}

/* Phones: a centred sheet rather than a dropdown hanging off a small button near the screen edge,
   which is both the hardest place to reach and the easiest to clip. */
@media (max-width: 860px) {
    .bell__panel {
        position: fixed;
        left: 12px;
        right: 12px;
        top: 50%;
        transform: translateY(-50%);
        width: auto;
        max-height: min(72vh, 560px);
        overflow-y: auto;
    }

    /* The sheet needs something behind it, or the page showing through reads as broken. */
    .bell.is-open::before {
        content: "";
        position: fixed;
        inset: 0;
        z-index: 129;
        background: rgba(1, 56, 45, .45);
    }
}

/* ---------- One notification row (bell dropdown and the full page) ---------- */
.noti {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 16px;
    color: inherit;
    text-decoration: none;
}

.noti + .noti {
    border-top: 1px solid var(--line);
}

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

/* Unread is marked three ways over — the rule, the bolder title and the dot — so it never rests
   on colour alone. */
.noti.is-unread {
    border-left: 3px solid var(--brand-orange);
    padding-left: 13px;
}

.noti__icon {
    flex: none;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 50%;
}

.noti__icon svg {
    width: 17px;
    height: 17px;
    fill: currentColor;
}

.noti__icon--support { background: rgba(1, 56, 45, .1); color: var(--brand-dark-green); }
.noti__icon--order { background: rgba(255, 183, 27, .22); color: #7a5300; }
.noti__icon--news { background: rgba(128, 188, 0, .2); color: #3f5c00; }
.noti__icon--review { background: rgba(253, 215, 86, .35); color: #7a5300; }

.noti__text {
    display: grid;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

.noti__title {
    font-size: .88rem;
    font-weight: 600;
    color: var(--ink);
}

.noti.is-unread .noti__title {
    font-weight: 800;
}

.noti__body {
    font-size: .8rem;
    color: var(--muted);
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.noti__foot {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 2px;
}

.noti__ago {
    font-size: .72rem;
    color: var(--muted);
    opacity: .85;
}

.noti__chip {
    padding: 1px 7px;
    border-radius: 999px;
    background: rgba(128, 188, 0, .2);
    color: #3f5c00;
    font-size: .62rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .07em;
}

.noti__dot {
    flex: none;
    width: 8px;
    height: 8px;
    margin-top: 13px;
    border-radius: 50%;
    background: var(--brand-orange);
}

/* ---------- The full notifications page ---------- */
.noti-group {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 26px 0 10px;
    font-family: var(--body);
    font-size: .8rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--muted);
}

.noti-group__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--brand-orange);
    color: #fff;
    font-size: .68rem;
    line-height: 1;
}

.noti-list {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--white);
    overflow: hidden;
}

/* The shared orders toolbar never wraps, which is right when the thing beside the heading is a
   small filter or a kebab. A full-width button needs a line of its own on a phone, so the support
   pages opt into stacking rather than letting the two overlap. */
.orders-toolbar--stack {
    flex-wrap: wrap;
}

/* The support toolbar keeps its heading and its one action on the same line at every width.
   Wrapping put a full-width slab under the heading, which read as a banner rather than as one
   action among several on the screen. */
.orders-toolbar--stack:has(> .support-new) {
    flex-wrap: nowrap;
    align-items: center;
    gap: 12px;
}

.orders-toolbar--stack > .support-new {
    flex: none;
    white-space: nowrap;
}

@media (max-width: 560px) {
    .orders-toolbar--stack h2 {
        white-space: normal;
    }

    .orders-toolbar--stack > .btn,
    .orders-toolbar--stack > form,
    .orders-toolbar--stack > form > .btn {
        width: 100%;
    }

    /* Opening a ticket is one action among several on this screen, not the screen's purpose. A
       full-bleed slab under the heading read as a banner rather than a button, so it stays a small
       button on the heading's own line. */
    .orders-toolbar--stack > .btn.support-new {
        width: auto;
        padding-inline: 14px;
        font-size: .72rem;
    }

    .orders-toolbar--stack:has(> .support-new) h2 {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

/* ---------- Combo: the site's own single-select ----------
   The existing .combo rules are scoped to the orders filter; these are the unscoped ones the
   shared _ComboSelect partial uses, on both sides of the app. */
.combo--field {
    position: relative;
    display: grid;
    gap: 7px;
}

.combo__label {
    font-size: .72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--muted);
}

.combo--field .combo__button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    min-height: 46px;
    height: auto;
    padding: 11px 14px;
    text-align: left;
    cursor: pointer;
}

.combo--field .combo__button > span:first-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.combo__placeholder {
    color: var(--muted);
}

.combo__caret {
    flex: none;
    width: 9px;
    height: 9px;
    border-right: 2px solid var(--brand-dark-green);
    border-bottom: 2px solid var(--brand-dark-green);
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform .2s ease;
}

.combo--field .combo__button[aria-expanded="true"] .combo__caret {
    transform: rotate(-135deg) translate(-2px, -2px);
}

.combo--field .combo__panel {
    position: absolute;
    top: calc(100% + 6px);
    inset-inline: 0;
    z-index: 60;
    padding: 6px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--white);
    box-shadow: var(--shadow-lg);
}

.combo--field .combo__panel[hidden] {
    display: none;
}

.combo__search {
    height: 38px;
    margin-bottom: 6px;
}

.combo--field .combo__list {
    list-style: none;
    margin: 0;
    padding: 0;
    /* Eight rows is the point where a list stops being scannable; past that the search box appears
       and this scrolls rather than running off the screen. */
    max-height: 260px;
    overflow-y: auto;
    scrollbar-width: thin;
}

.combo--field .combo__option {
    display: grid;
    gap: 2px;
    width: 100%;
    padding: 9px 11px;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.combo--field .combo__option:hover,
.combo--field .combo__option[aria-selected="true"] {
    background: var(--cream);
}

.combo--field .combo__option[aria-selected="true"] .combo__name {
    font-weight: 700;
}

.combo__note {
    font-size: .74rem;
    color: var(--muted);
}

.combo__empty {
    margin: 0;
    padding: 14px 11px;
    font-size: .82rem;
    color: var(--muted);
    text-align: center;
}

/* ---------- Support desk (customer) ---------- */
.support-page {
    padding: clamp(28px, 5vw, 64px) 0 clamp(50px, 7vw, 90px);
}

.support-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.support-head h1 {
    margin: 0;
    font-size: var(--h2-size);
}

.support-lede {
    max-width: 62ch;
    margin: 0 0 clamp(22px, 3vw, 34px);
    color: var(--muted);
    line-height: 1.65;
}

/* The account column is already narrow, so capping the measure again only made the text look
   indented against the panel beside it. */
.support-lede--wide {
    max-width: none;
}

/* A link inside body copy that is worth finding: underlined with room to breathe, and it takes the
   brand colour on hover rather than relying on the underline alone. */
.text-link {
    color: var(--ink);
    font-weight: 700;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
    text-decoration-color: var(--orange);
}

.text-link:hover {
    color: var(--orange-2);
}

.support-notice {
    margin: 0 0 20px;
    padding: 14px 18px;
    border: 1px solid var(--line);
    border-left: 4px solid var(--brand-yellow);
    border-radius: var(--radius-sm);
    background: var(--cream);
    font-size: .88rem;
    line-height: 1.55;
    color: var(--ink);
}

.support-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 14px;
}

.support-tile {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--white);
    padding: 18px 20px;
    display: grid;
    gap: 10px;
}

.support-tile__head {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.support-tile__number {
    font-weight: 800;
    letter-spacing: .03em;
    color: var(--ink);
}

.support-tile__subject {
    margin: 0;
    font-family: var(--body);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--ink);
}

.support-tile__meta {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    font-size: .8rem;
    color: var(--muted);
}

.support-tile__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.support-detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 14px;
    margin: 0 0 20px;
    padding: 18px 20px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--white);
}

.support-detail-grid dt {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--muted);
}

.support-detail-grid dd {
    margin: 4px 0 0;
    font-weight: 600;
    color: var(--ink);
    overflow-wrap: anywhere;
}

.support-form {
    display: grid;
    gap: 18px;
    max-width: 720px;
    padding: clamp(20px, 3vw, 30px);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--white);
}

.support-form textarea {
    min-height: 170px;
    resize: vertical;
}

/* The action row at the foot of the new-ticket form. */
.support-reply__actions {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.support-empty {
    padding: 34px 20px;
    border: 1px dashed var(--line);
    border-radius: var(--radius);
    text-align: center;
    color: var(--muted);
}

/* ---------- Status pills (shared by both sides) ---------- */
.ticket-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 11px;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    white-space: nowrap;
}

.ticket-status::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
}

.ticket-status--open { background: rgba(241, 93, 42, .14); color: #a33a13; }
.ticket-status--awaiting-support { background: rgba(255, 183, 27, .2); color: #7a5300; }
.ticket-status--awaiting-customer { background: rgba(1, 56, 45, .1); color: var(--brand-dark-green); }
.ticket-status--resolved { background: rgba(128, 188, 0, .18); color: #3f5c00; }
.ticket-status--closed { background: rgba(82, 17, 15, .12); color: var(--brand-dark-brown); }
.ticket-status--reopen { background: rgba(47, 155, 214, .18); color: #1d6a95; }

.ticket-category {
    display: inline-block;
    padding: 3px 10px;
    border: 1px solid var(--line);
    border-radius: 999px;
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--muted);
}

/* ---------- Kebab menu: a screen's secondary actions behind one button ---------- */
.kebab {
    position: relative;
    flex: none;
}

.kebab__trigger {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: transparent;
    color: var(--ink);
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease;
}

.kebab__trigger svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
}

.kebab__trigger:hover,
.kebab.is-open .kebab__trigger {
    background: var(--brand-dark-green);
    color: var(--cream);
}

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

.kebab__menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 120;
    width: max(250px, 100%);
    padding: 6px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--white);
    box-shadow: var(--shadow-lg);
}

.kebab__menu[hidden] {
    display: none;
}

.kebab__menu--wide {
    width: 300px;
}

.kebab__item {
    display: grid;
    gap: 2px;
    width: 100%;
    padding: 9px 11px;
    border: 0;
    border-radius: var(--radius-sm);
    background: none;
    color: var(--ink);
    font-family: var(--body);
    font-size: .86rem;
    font-weight: 600;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.kebab__item small {
    font-size: .72rem;
    font-weight: 400;
    color: var(--muted);
}

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

.kebab__item--danger {
    color: #a33a13;
}

.kebab__item--danger:hover {
    background: rgba(241, 93, 42, .12);
}

.kebab__form {
    display: grid;
    gap: 8px;
    margin-top: 4px;
    padding: 9px 11px;
    border-top: 1px solid var(--line);
}

.kebab__form label {
    font-size: .72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--muted);
}

.kebab__form small {
    font-size: .72rem;
    line-height: 1.45;
    color: var(--muted);
}

/* ---------- Ticket details, collapsible on phones ---------- */
/* One box that grows, the way an FAQ row does — the detail grid opens inside the same border
   rather than appearing as a second card underneath the summary. */
.ticket-summary {
    margin: 0 0 16px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--white);
    overflow: hidden;
}

.ticket-summary > summary {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    cursor: pointer;
    list-style: none;
}

.ticket-summary > summary::-webkit-details-marker {
    display: none;
}

.ticket-summary > summary:focus-visible {
    outline: 2px solid var(--orange);
    outline-offset: -2px;
}

.ticket-summary__label {
    flex: none;
    font-size: .72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--muted);
}

.ticket-summary__subject {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .86rem;
    color: var(--ink);
}

.ticket-summary > summary .sitemap-caret {
    margin-left: auto;
    flex: none;
}

.ticket-summary[open] > summary {
    border-bottom: 1px solid var(--line);
}

/* Inside the box it is just the grid; the border and background belong to the box now. */
.ticket-summary .support-detail-grid {
    margin: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

/* Open on anything wider than a phone (notifications.js sets that), where the summary row would
   just be one more thing to click past. */
@media (min-width: 641px) {
    .ticket-summary > summary {
        display: none;
    }

    .ticket-summary[open] > summary {
        border-bottom: 0;
    }
}

/* ---------- Ticket conversation (shared by both sides) ----------
   Laid out like any messenger: whoever is looking sees their own words on the right with delivery
   ticks, the other side's on the left with a name. One partial renders both, so the two views
   cannot drift apart. */

/* One bordered unit: the conversation and the box you write in belong together, the way they do in
   any messenger, rather than the composer floating below as a separate control. */
/* ---------- Who am I talking to? ----------
   Support can open the customer's card from their name or picture in the thread. It answers the
   question that otherwise means leaving the conversation: who is this, what have they bought, is
   there anything on the account. */
.chat__from--link {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: inherit;
    cursor: pointer;
    text-align: left;
}

.chat__from--link:hover .chat__who,
.chat__from--link:focus-visible .chat__who {
    color: var(--brand-dark-green);
    text-decoration: underline;
}

.customer-card {
    width: min(420px, calc(100vw - 32px));
    padding: 0;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--white);
}

.customer-card::backdrop {
    background: rgba(1, 56, 45, .45);
}

.customer-card__head {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px;
    border-bottom: 1px solid var(--line);
}

.customer-card__avatar {
    flex: none;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--cream-3);
}

.customer-card__name {
    display: grid;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

.customer-card__name strong {
    font-family: var(--display);
    font-size: 1.05rem;
    color: var(--brand-dark-green);
}

.customer-card__name span {
    font-size: .8rem;
    color: var(--muted);
    overflow-wrap: anywhere;
}

.customer-card__close {
    flex: none;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--muted);
    font-size: 1.1rem;
    cursor: pointer;
}

.customer-card__close:hover {
    background: var(--cream-2);
    color: var(--ink);
}

.customer-card__grid {
    display: grid;
    gap: 12px;
    margin: 0;
    padding: 18px;
}

.customer-card__grid dt {
    font-size: .68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--muted);
}

.customer-card__grid dd {
    margin: 2px 0 0;
    font-size: .88rem;
    color: var(--ink);
    overflow-wrap: anywhere;
}

.customer-card__flag {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--brand-pale-yellow);
    font-size: .72rem;
    font-weight: 700;
}

.customer-card__flag--blocked {
    background: rgba(190, 40, 30, .12);
    color: #a32b20;
}

.customer-card__foot {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 0 18px 18px;
}

/* ---------- A conversation as a screen ----------
   A chat has one scrollbar. Sitting the thread inside an ordinary page gave it two — the window's
   and the thread's — and every messenger has taught people that scrolling up in a conversation
   means older messages, not the page heading. So the ticket fills the viewport below the site
   header: a bar at the top, the thread taking whatever is left, the composer pinned to the bottom.

   The height is set by script from the real header height; the fallback here is only what is shown
   for the instant before that runs, and if the script never runs at all. */
.chat-screen {
    display: flex;
    flex-direction: column;
    height: var(--chat-screen-height, calc(100dvh - 260px));
    /* Script lowers this while a soft keyboard is open: with half the screen taken by keys, a
       440px floor would push the composer back down behind them. */
    min-height: var(--chat-screen-min, 440px);
    margin: 0;
    border-radius: var(--radius);
    background: var(--cream);
    overflow: hidden;
}

/* The page it sits in: no heading above the conversation, and only enough breathing room at the
   top to separate it from the site header. The section's usual 60px of padding was 60px of empty
   cream above a screen that is supposed to fill the window. */
.section--chat {
    padding: 16px 0 0;
}

/* The account card becomes the frame of the conversation rather than a padded box around one. */
.account-content--chat {
    padding: 0;
    overflow: hidden;
}

/* The admin screen has the back-office sidebar for navigation and its own page padding, so it only
   needs the frame. */
.chat-screen--admin {
    border: 1px solid var(--line);
}

.chat-screen__bar {
    flex: none;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--line);
    background: var(--white);
}

/* The way back, in the place every messenger puts it. */
.chat-screen__back {
    flex: none;
    display: inline-grid;
    place-items: center;
    width: 36px;
    height: 36px;
    margin-left: -6px;
    border-radius: 50%;
    color: var(--brown);
}

.chat-screen__back svg {
    width: 20px;
    height: 20px;
}

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

.chat-screen__id {
    display: grid;
    gap: 1px;
    min-width: 0;
    flex: 1;
}

.chat-screen__id strong {
    font-family: var(--display);
    font-size: 1rem;
    letter-spacing: .02em;
    color: var(--brand-dark-green);
}

/* One line only: the subject is in the details drawer underneath, in full. */
.chat-screen__id span {
    font-size: .78rem;
    color: var(--muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-screen__bar .kebab {
    flex: none;
}

/* The details drawer is a strip in the bar rather than a card of its own. */
.ticket-summary--bar {
    flex: none;
    margin: 0;
    border: 0;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    background: var(--white);
}

.ticket-summary--bar[open] > .support-detail-grid {
    max-height: 40vh;
    overflow-y: auto;
}

.chat-panel {
    display: flex;
    flex-direction: column;
    margin: 0 0 18px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--cream);
    overflow: hidden;
}

.chat-panel__scroll {
    max-height: min(58vh, 560px);
    overflow-y: auto;
    padding: 14px;
    overscroll-behavior: contain;
    /* Reserve the scrollbar's width on both sides, otherwise it eats into the right margin only
       and the two sides of the conversation stop lining up once the thread scrolls. */
    scrollbar-gutter: stable both-edges;
    /* A thin, tinted scrollbar instead of the browser's default slab. */
    scrollbar-width: thin;
    scrollbar-color: rgba(1, 56, 45, .28) transparent;
}

.chat-panel__scroll::-webkit-scrollbar {
    width: 8px;
}

.chat-panel__scroll::-webkit-scrollbar-track {
    background: transparent;
}

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

.chat-panel__scroll::-webkit-scrollbar-thumb:hover {
    background: rgba(1, 56, 45, .45);
}

/* Inside the conversation screen the panel is a flex child that takes whatever the bar and the
   drawer leave, rather than a box with a fixed maximum height.

   It must also stop being a box: the screen is already a framed card, so the panel's own border and
   rounded corners drew a second frame inside the first — a stray curved line under the bar and
   another one below the composer. This block sits AFTER .chat-panel deliberately; both selectors
   carry the same weight, so order is what decides, and it used to lose. */
.chat-panel--screen {
    flex: 1;
    min-height: 0;
    margin: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.chat-panel--screen .chat-panel__scroll {
    flex: 1;
    min-height: 0;
    max-height: none;
}

/* Nothing below the composer: it is the last thing on the screen, and the card around it already
   closes the shape. */
.chat-panel--screen .chat-composer,
.chat-panel--screen .chat-reopen,
.chat-panel--screen .chat-decision,
.chat-panel--screen .chat-closed {
    border-bottom: 0;
    border-radius: 0;
}

.chat {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 10px;
}

/* ---- Day separator ---- */
.chat__day {
    justify-self: center;
    margin: 6px 0 2px;
}

.chat__day span {
    display: inline-block;
    padding: 3px 12px;
    border-radius: 999px;
    background: var(--white);
    border: 1px solid var(--line);
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--muted);
}

/* ---- The app's own note about the conversation ----
   Centred, quiet and unattributed — the same shape a messenger uses to say a chat was locked or a
   security code changed, so the ticket's own history reads inside the ticket. */
.chat__system {
    justify-self: center;
    max-width: min(520px, 94%);
    margin: 4px 0;
}

.chat__system span {
    display: block;
    padding: 8px 14px;
    border-radius: var(--radius-sm);
    border: 1px solid rgba(255, 183, 27, .45);
    background: rgba(255, 183, 27, .18);
    font-size: .78rem;
    line-height: 1.5;
    color: var(--brand-dark-brown);
    text-align: center;
    overflow-wrap: anywhere;
}

.chat__system em {
    display: block;
    margin-top: 2px;
    font-size: .68rem;
    font-style: normal;
    opacity: .75;
}

/* ---- One message ---- */
.chat__row {
    display: flex;
    max-width: 78%;
    /* Grid and flex items default to min-width:auto, which refuses to shrink below their content.
       Without this a long unbroken sender name pushes the whole bubble past the panel's edge. */
    min-width: 0;
}

.chat__row--theirs {
    margin-right: auto;
}

.chat__row--mine {
    margin-left: auto;
    justify-content: flex-end;
}

/* Sender line: their picture and name together at the top of their bubble. Your own messages get
   neither — you know which ones are yours, and a gutter of your own face on every line only eats
   the width the words need. */
.chat__from {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
    margin-bottom: 4px;
}

.chat__avatar {
    flex: none;
    width: 26px;
    height: 26px;
    overflow: hidden;
    border-radius: 50%;
    border: 1px solid var(--line);
    background: var(--white);
}

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

/* The brand logo is a wide wordmark, so it is letterboxed on the brand colour rather than cropped
   down to two letters. */
.chat__avatar--brand {
    background: var(--brand-dark-green);
    border-color: var(--brand-dark-green);
    display: grid;
    place-items: center;
}

.chat__avatar--brand img {
    width: 78%;
    height: auto;
    object-fit: contain;
}

.chat__bubble {
    position: relative;
    min-width: 0;
    max-width: 100%;
    padding: 9px 13px 6px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--white);
}

.chat__row--theirs .chat__bubble {
    border-bottom-left-radius: 4px;
}

.chat__row--mine .chat__bubble {
    background: #dff3c8;
    border-color: rgba(128, 188, 0, .45);
    border-bottom-right-radius: 4px;
}

.chat__who {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--brand-dark-brown);
}

.chat__body {
    margin: 0;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    line-height: 1.5;
    color: var(--ink);
}

/* Time and ticks sit bottom-right inside the bubble, as in any messenger. */
.chat__meta {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    margin-top: 2px;
    font-size: .68rem;
    color: var(--muted);
}

/* Said out loud on a rewritten message, on both sides. The marker is the whole point of allowing
   the edit at all: the words may change, the fact that they changed may not be hidden. */
.chat__edited {
    font-style: italic;
    opacity: .75;
}

/* Only offered while the other side has not read the message. It is a quiet glyph rather than a
   button, because it sits inside a bubble and must not compete with the message. */
.chat__edit {
    display: inline-grid;
    place-items: center;
    width: 18px;
    height: 18px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: inherit;
    opacity: .55;
    cursor: pointer;
    transition: opacity .15s ease, color .15s ease;
}

.chat__edit svg {
    width: 12px;
    height: 12px;
    fill: currentColor;
}

.chat__edit:hover,
.chat__edit:focus-visible {
    opacity: 1;
    color: var(--brand-dark-green);
}

/* ---- Delivery ticks ---- */
.chat__ticks {
    display: inline-flex;
    line-height: 0;
}

.chat__ticks svg {
    width: 17px;
    height: 12px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.chat__ticks--sent,
.chat__ticks--delivered {
    color: var(--muted);
    opacity: .75;
}

/* Blue is the only colour difference between delivered and read, so the title attribute and the
   screen-reader label carry the same meaning for anyone who cannot tell them apart. */
.chat__ticks--read {
    color: #2f9bd6;
    opacity: 1;
}

/* ---- Composer: one row at the foot of the panel, send is the arrow beside the box ---- */
.chat-composer {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    padding: 10px 12px;
    border-top: 1px solid var(--line);
    background: var(--white);
}

.chat-composer__input {
    flex: 1;
    /* Flex items default to min-width:auto, which lets a long word push the row - and the send
       button with it - past the panel's edge. */
    min-width: 0;
    min-height: 46px;
    padding: 12px 16px;
    border: 1px solid var(--line);
    /* The same corner every other field on the site uses. A pill here made the composer read as a
       different kind of control from every form the customer has already filled in. */
    border-radius: var(--radius-sm);
    background: var(--white);
    font-family: var(--body);
    font-size: .95rem;
    line-height: 1.4;
    color: var(--ink);
    resize: none;
    /* notifications.js grows the box to five lines and only then turns scrolling on, so the
       scrollbar is never visible on an ordinary message. */
    overflow-y: hidden;
    scrollbar-width: none;
}

.chat-composer__input::-webkit-scrollbar {
    display: none;
}

.chat-composer__input:focus {
    outline: none;
    border-color: var(--orange);
}

.chat-composer__send {
    flex: none;
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    /* Squared to the same radius as the box it sits beside, so the pair reads as one control. */
    border-radius: var(--radius-sm);
    background: var(--orange);
    color: var(--brand-dark-green);
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease, transform .2s ease;
}

.chat-composer__send svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

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

.chat-composer__send:focus-visible {
    outline: 2px solid var(--brand-dark-green);
    outline-offset: 2px;
}

.chat-composer.is-sending .chat-composer__send {
    opacity: .6;
    pointer-events: none;
}

/* Shown while a sent message is being rewritten. The composer doubles as the edit box, so without
   this strip there would be nothing on screen saying that sending will replace rather than add. */
.chat-editing {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0;
    padding: 8px 14px;
    border-top: 1px solid var(--line);
    background: var(--brand-pale-yellow);
    font-size: .78rem;
    color: var(--ink);
}

.chat-editing[hidden] {
    display: none;
}

.chat-editing__cancel {
    flex: none;
    padding: 0;
    border: 0;
    background: none;
    color: var(--brown);
    font-family: inherit;
    font-size: .78rem;
    font-weight: 700;
    text-decoration: underline;
    cursor: pointer;
}

.chat-editing__cancel:hover {
    color: var(--orange-2);
}

/* ---- Asking for a closed ticket back, and the admin's answer ----
   Both take the composer's place at the foot of the same panel. */
.chat-reopen,
.chat-decision {
    display: grid;
    gap: 8px;
    padding: 12px;
    border-top: 1px solid var(--line);
    background: var(--white);
}

.chat-reopen label,
.chat-decision label {
    font-size: .82rem;
    font-weight: 600;
    color: var(--ink);
}

/* flex-end, not stretch: the field grows to five lines as it is typed into, and a stretched
   button grew with it into a tall slab down the side of the box. It sits on the bottom line of
   the field instead, exactly like the composer's send button. */
.chat-reopen__row {
    display: flex;
    align-items: flex-end;
    gap: 10px;
}

.chat-reopen__row .chat-composer__input {
    flex: 1;
    min-width: 0;
}

/* One field-height tall, whatever the field is doing. */
.chat-reopen__row .btn {
    align-self: flex-end;
    height: 46px;
    min-height: 46px;
}

.chat-reopen__row .btn,
.chat-decision__actions .btn {
    flex: none;
    white-space: nowrap;
}

.chat-decision__ask {
    margin: 0;
    padding: 10px 12px;
    border-left: 3px solid var(--brand-yellow);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    background: var(--cream);
    font-size: .86rem;
    line-height: 1.5;
    color: var(--ink);
    overflow-wrap: anywhere;
}

.chat-decision__actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.chat-closed {
    margin: 0;
    padding: 14px 16px;
    border-top: 1px solid var(--line);
    background: var(--white);
    font-size: .88rem;
    line-height: 1.55;
    color: var(--muted);
    text-align: center;
}

/* Phones: bubbles take nearly the full width, and the avatars shrink so the text keeps the room.
   The left/right split is what tells the two sides apart, so it is kept at every width. */
@media (max-width: 640px) {
    .chat-panel__scroll {
        padding: 10px;
        max-height: 58vh;
    }

    /* Inside a full-height screen the thread takes the room that is left, not a share of the
       viewport measured separately from it. */
    .chat-panel--screen .chat-panel__scroll {
        max-height: none;
    }

    /* Edge to edge on a phone: the account nav is already in the drawer at this width, and a card
       with rounded corners and a gutter wastes room a conversation can use. */
    .section--chat {
        padding: 0;
    }

    .section--chat > .shell {
        padding-inline: 0;
    }

    .account-content--chat {
        border-inline: 0;
        border-radius: 0;
    }

    .chat-screen {
        border-radius: 0;
    }

    .chat-screen--admin {
        border-inline: 0;
    }

    .chat-screen__bar {
        padding: 8px 10px;
        gap: 8px;
    }

    .chat-screen__id strong {
        font-size: .92rem;
    }

    .chat__row {
        max-width: 92%;
    }

    .chat__avatar {
        width: 22px;
        height: 22px;
    }

    .chat__bubble {
        padding: 8px 11px 5px;
    }

    .chat__body {
        font-size: .92rem;
    }

    .chat-reopen__row {
        flex-direction: column;
        align-items: stretch;
    }
}

/* ---------- Out-of-stock enquiry (product page) ---------- */
.stock-enquiry {
    display: grid;
    gap: 14px;
    margin-top: 18px;
    padding: 18px 20px;
    border: 1px solid var(--line);
    border-left: 4px solid var(--brand-orange);
    border-radius: var(--radius);
    background: var(--white);
}

.stock-enquiry__lede {
    margin: 0;
    line-height: 1.6;
    color: var(--ink);
}

.stock-enquiry__actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

@media (max-width: 520px) {
    .stock-enquiry__actions .btn {
        width: 100%;
    }
}

/* ---------- Sitemap page ---------- */
.sitemap-page {
    padding: clamp(28px, 5vw, 64px) 0 clamp(50px, 7vw, 90px);
}

.sitemap-head {
    max-width: 70ch;
    margin-bottom: clamp(24px, 3.5vw, 38px);
}

.sitemap-head h1 {
    margin: 0 0 10px;
}

.sitemap-head p {
    margin: 0 0 16px;
    color: var(--muted);
    line-height: 1.65;
}

.sitemap-meta {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
    font-size: .84rem;
    color: var(--muted);
}

.sitemap-tree {
    display: grid;
    gap: 12px;
}

.sitemap-tree__controls {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 4px;
}

/* ---- Branch: the top level of the accordion ---- */
.sitemap-branch {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--white);
    overflow: hidden;
}

.sitemap-branch__head,
.sitemap-node__head {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    list-style: none;
    user-select: none;
}

/* Safari and older Chrome still draw their own disclosure triangle without this. */
.sitemap-branch__head::-webkit-details-marker,
.sitemap-node__head::-webkit-details-marker {
    display: none;
}

.sitemap-branch__head {
    padding: 16px 20px;
    background: var(--cream);
}

.sitemap-branch__head:hover {
    background: var(--brand-pale-yellow);
}

.sitemap-branch__head:focus-visible,
.sitemap-node__head:focus-visible {
    outline: 2px solid var(--orange);
    outline-offset: -2px;
}

.sitemap-branch__title {
    font-family: var(--display);
    text-transform: uppercase;
    font-size: var(--h3-size);
    line-height: 1.1;
    color: var(--ink);
}

.sitemap-branch__count {
    margin-left: auto;
    font-size: .76rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .06em;
    text-align: right;
}

.sitemap-branch__body {
    padding: 14px 20px 20px;
    display: grid;
    gap: 10px;
}

/* ---- The caret, rotated by the open state rather than by script ---- */
.sitemap-caret {
    flex: none;
    width: 11px;
    height: 11px;
    border-right: 2px solid var(--brand-dark-green);
    border-bottom: 2px solid var(--brand-dark-green);
    transform: rotate(-45deg);
    transition: transform .2s ease;
}

details[open] > .sitemap-branch__head > .sitemap-caret,
details[open] > .sitemap-node__head > .sitemap-caret {
    transform: rotate(45deg);
}

@media (prefers-reduced-motion: reduce) {
    .sitemap-caret { transition: none; }
}

/* ---- Node: one category inside the Products branch ---- */
.sitemap-node {
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--white);
    overflow: hidden;
}

.sitemap-node__head {
    padding: 10px 14px;
}

.sitemap-node__head:hover {
    background: var(--cream);
}

.sitemap-node__text {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.sitemap-node__title {
    font-weight: 700;
    color: var(--ink);
}

.sitemap-node__body {
    padding: 4px 10px 10px;
    border-top: 1px solid var(--line);
    display: grid;
    gap: 6px;
}

/* ---- "View all" shortcut inside an opened section ---- */
.sitemap-viewall {
    justify-self: start;
    padding: 4px 0;
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--muted);
    text-decoration: none;
}

.sitemap-viewall:hover {
    color: var(--orange-2);
}

/* ---- Leaf rows ---- */
.sitemap-links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 4px;
}

/* A flat branch with no images (Main pages) can sit in columns; rows with a thumbnail stay
   full width so the long product names have somewhere to wrap. */
.sitemap-links--plain {
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 8px;
}

.sitemap-links--cards {
    gap: 8px;
}

.sitemap-links li {
    border-radius: var(--radius-sm);
}

.sitemap-links--plain li,
.sitemap-links--cards li {
    border: 1px solid var(--line);
}

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

.sitemap-links a:hover {
    background: var(--cream);
}

.sitemap-links__text {
    display: grid;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

.sitemap-links__title {
    font-weight: 600;
    color: var(--ink);
    /* Product names are long; two lines is plenty to recognise one. */
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

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

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

.sitemap-links a:hover .ui-arrow {
    opacity: 1;
}

/* ---- Thumbnails ---- */
.sitemap-thumb {
    flex: none;
    width: 40px;
    height: 40px;
    overflow: hidden;
    border-radius: var(--radius-sm);
    background: var(--cream-3);
}

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

.sitemap-thumb--lg {
    width: 56px;
    height: 42px;
}

.sitemap-thumb--wide {
    width: 72px;
    height: 52px;
}

@media (max-width: 560px) {
    .sitemap-branch__head {
        flex-wrap: wrap;
        padding: 14px 16px;
    }

    .sitemap-branch__count {
        margin-left: 23px;
        text-align: left;
        width: 100%;
    }

    .sitemap-branch__body {
        padding: 12px 12px 16px;
    }

    .sitemap-links--plain {
        grid-template-columns: 1fr;
    }

    .sitemap-tree__controls .btn {
        flex: 1;
    }
}

/* ---------- Notification search ---------- */
.noti-search {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 18px;
    padding: 6px 8px 6px 14px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #fff;
}

.noti-search svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; opacity: .7; }
.noti-search input { flex: 1; min-width: 0; padding: 8px 4px; border: 0; background: transparent; font: inherit; outline: none; }
.noti-search__count { flex: none; padding: 4px 10px; border-radius: 999px; background: var(--cream-3); font-size: .78rem; font-weight: 700; }
.noti-search__count:empty { display: none; }
.noti[hidden], .noti-group[hidden] { display: none !important; }
.noti-mark { padding: 0 2px; border-radius: 3px; background: #ffe066; color: inherit; }
.admin-notifications .noti-list { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: #fff; }