/* ==========================================================================
   userlayout-responsive.css
   Scoped responsive overrides for Views/Shared/UserLayout.cshtml.
   Loaded AFTER main.css. CSS-only — does not touch any JS hook, ID, or endpoint.
   ========================================================================== */

/* ===== Universal: prevent overflow + safe-area ===== */
/* Use overflow-x: clip so position: fixed/sticky still works on descendants
   (overflow-x: hidden creates a scroll container that breaks sticky). */
html,
body {
    overflow-x: clip;
}

.header,
.main-header,
.header-nav,
.footer,
.footer-bottom {
    box-sizing: border-box;
}

.search-form .input-group {
    flex-wrap: nowrap;
}

.search-form .form-control {
    min-width: 0; /* allows the input to shrink inside flex/input-group */
}

body {
    padding-bottom: env(safe-area-inset-bottom);
}

/* ===== Fixed header =====
   Bootstrap's .sticky-top fails in this layout (ancestor overflow / containment).
   Pin the header with position: fixed so it never scrolls away, and offset the
   page content with body padding-top equal to the visible header height. */
#header.header,
.header.sticky-top {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 1030;
    background-color: var(--background-color);
}

body {
    padding-top: 140px; /* desktop: main-header (~88px) + nav (~52px) */
}

/* ===== Admin impersonation banner =====
   Lives as the first child inside the fixed #header, so the dynamic
   header-offset script (UserLayout.js → initHeaderOffset) measures it and
   pads the body automatically. */
.impersonation-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px 16px;
    padding: 8px 16px;
    background: #8a5a00;
    background: linear-gradient(90deg, #9a6400, #c8973a);
    color: #fff;
    font-size: 13.5px;
    line-height: 1.3;
    text-align: center;
}

.impersonation-bar .imp-text {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.impersonation-bar .imp-text strong {
    font-weight: 700;
}

.impersonation-bar .imp-exit-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 14px;
    border: 1px solid rgba(255, 255, 255, 0.65);
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.18);
    color: #fff;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.18s ease, border-color 0.18s ease, transform 0.12s ease;
}

.impersonation-bar .imp-exit-btn:hover {
    background: rgba(0, 0, 0, 0.34);
    border-color: #fff;
}

.impersonation-bar .imp-exit-btn:active {
    transform: translateY(1px);
}

.impersonation-bar .imp-exit-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

@media (max-width: 575.98px) {
    .impersonation-bar {
        font-size: 12px;
        padding: 7px 12px;
        gap: 6px 10px;
    }

    .impersonation-bar .imp-exit-btn {
        font-size: 11.5px;
        padding: 4px 12px;
    }
}

html {
    scroll-padding-top: 140px; /* in-page anchors land below the fixed header */
}

@media (max-width: 1199.98px) {
    body { padding-top: 130px; }
    html { scroll-padding-top: 130px; }
}

@media (max-width: 767.98px) {
    body { padding-top: 120px; }
    html { scroll-padding-top: 120px; }
}

@media (max-width: 575.98px) {
    body { padding-top: 50px; }
    html { scroll-padding-top: 50px; }
}

/* Tap-target & a11y polish (all sizes) */
.header-action-btn,
.mobile-nav-toggle,
.mobile-search-toggle,
.dropdown-item,
.navmenu a {
    min-height: 40px;
}

.dropdown-item.d-flex {
    align-items: center;
}

/* ===== <= 575.98px : phones ===== */
@media (max-width: 575.98px) {
    .main-header .container-fluid {
        padding-left: 12px;
        padding-right: 12px;
    }

    .logo .sitename {
        font-size: 1.05rem;
    }

    .logo img {
        height: 32px !important; /* override inline height="50" attribute */
    }

    .header-actions {
        gap: 4px;
    }

    .header-action-btn {
        padding: 6px;
        font-size: 1rem;
    }

    .header-action-btn .badge {
        font-size: .65rem;
    }

    .account-dropdown .dropdown-menu {
        width: calc(100vw - 24px);
        right: 12px !important;
        left: 12px !important;
        max-width: 360px;
    }

    .desktop-search-form {
        display: none;
    }

    #mobileSearch .search-form .form-control {
        font-size: 16px; /* prevents iOS focus zoom */
    }

    .mobile-megamenu {
        padding: 8px 4px;
    }

    .mobile-megamenu a {
        padding: 10px 8px;
        min-height: 44px;
        display: flex;
        align-items: center;
    }

    .footer-bottom .row {
        text-align: center;
    }

    .footer-bottom .copyright p {
        font-size: .85rem;
        margin-bottom: 8px;
    }

    .payment-icons {
        justify-content: center;
        gap: 8px;
    }

    .payment-icons i {
        font-size: 16px;
    }

    .legal-links {
        justify-content: center;
        flex-wrap: wrap;
        gap: 8px 14px;
    }

    .legal-links a {
        font-size: .85rem;
    }
}

/* ===== 576 - 767.98px : large phones / small tablets ===== */
@media (min-width: 576px) and (max-width: 767.98px) {
    .header-actions {
        gap: 8px;
    }

    .account-dropdown .dropdown-menu {
        width: 300px;
    }

    .desktop-megamenu {
        max-height: 70vh;
        overflow-y: auto;
    }

    .payment-icons i {
        font-size: 18px;
    }
}

/* ===== 768 - 991.98px : tablets ===== */
@media (min-width: 768px) and (max-width: 991.98px) {
    .main-header .container-fluid {
        padding-left: 16px;
        padding-right: 16px;
    }

    .header-actions {
        gap: 10px;
    }

    .desktop-search-form {
        display: none; /* navmenu still in mobile mode */
    }
}

/* ==========================================================================
   Account dropdown → BOTTOM SHEET on mobile & tablet (≤ 991.98px)
   Visual/UX override only. Preserves every JS hook, ID, href and endpoint
   (#profile_btn, #myorders_btn, #signIn_btn, #register_btn, #logout_btn,
    #guest_actions, #auth_actions, #account_links, #account_dropdown_subtitle).
   The dim, tap-to-dismiss backdrop is wired in UserLayout.js via Bootstrap's
   show/hide dropdown events (adds .is-open to .account-sheet-backdrop).
   ========================================================================== */

/* Backdrop is desktop-hidden; only the sheet variant uses it. */
.account-sheet-backdrop {
    display: none;
}

@media (max-width: 991.98px) {
    /* Dim layer behind the sheet */
    .account-sheet-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.45);
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.28s ease, visibility 0.28s ease;
        z-index: 1045;
    }

    .account-sheet-backdrop.is-open {
        opacity: 1;
        visibility: visible;
    }

    /* Pin the menu to the bottom of the viewport as a full-width sheet.
       !important overrides Bootstrap/Popper inline positioning. */
    .header .main-header .account-dropdown .dropdown-menu {
        position: fixed !important;
        top: auto !important;
        right: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        margin: 0 auto !important;
        width: auto !important;
        max-width: 100% !important;
        transform: none !important;
        z-index: 1046 !important;
        border: none !important;
        border-radius: 20px 20px 0 0 !important;
        box-shadow: 0 -10px 44px rgba(0, 0, 0, 0.28) !important;
        max-height: 88vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: max(0.5rem, env(safe-area-inset-bottom)) !important;
    }

    /* Slide up when Bootstrap adds .show (animated transform wins over the
       base `transform: none` while running, then settles at translateY(0)). */
    .header .main-header .account-dropdown .dropdown-menu.show {
        animation: accountSheetUp 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    }

    @keyframes accountSheetUp {
        from { transform: translateY(100%); }
        to   { transform: translateY(0); }
    }

    /* Grabber handle */
    .header .main-header .account-dropdown .dropdown-menu::before {
        content: "";
        display: block;
        width: 42px;
        height: 4px;
        margin: 10px auto 0;
        border-radius: 999px;
        background: color-mix(in srgb, var(--default-color), transparent 75%);
    }

    /* Centered header copy reads better on a wide sheet */
    .header .main-header .account-dropdown .dropdown-menu .dropdown-header {
        padding: 0.85rem 1.25rem 1rem;
        text-align: center;
    }

    /* Roomy, thumb-friendly links */
    .header .main-header .account-dropdown .dropdown-menu .dropdown-body {
        padding: 0.5rem 0.5rem;
    }

    .header .main-header .account-dropdown .dropdown-menu .dropdown-body .dropdown-item {
        min-height: 54px;
        padding: 0.9rem 1rem;
        margin: 2px 4px;
        font-size: 15px;
        border-radius: 12px;
    }

    .header .main-header .account-dropdown .dropdown-menu .dropdown-body .dropdown-item i {
        font-size: 19px;
    }

    /* Larger footer buttons */
    .header .main-header .account-dropdown .dropdown-menu .dropdown-footer {
        padding: 1rem 1.25rem;
    }

    .header .main-header .account-dropdown .dropdown-menu .dropdown-footer .btn {
        min-height: 50px;
        padding: 0.8rem 1rem;
        font-size: 15px;
    }
}

/* Tablets / large phones: float the sheet as a centered bottom card. */
@media (min-width: 576px) and (max-width: 991.98px) {
    .header .main-header .account-dropdown .dropdown-menu {
        max-width: 460px !important;
        bottom: 16px !important;
        border-radius: 20px !important;
        overflow: hidden;
    }
}

/* Respect users who reduce motion. */
@media (max-width: 991.98px) and (prefers-reduced-motion: reduce) {
    .header .main-header .account-dropdown .dropdown-menu.show {
        animation: none;
    }

    .account-sheet-backdrop {
        transition: none;
    }
}

/* ===== 992 - 1199.98px : small desktop (navmenu still mobile) ===== */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .header-actions {
        gap: 12px;
    }

    .desktop-search-form {
        display: none; /* avoids 400px min-width overflow */
    }

    .mobile-search-toggle {
        display: inline-flex !important; /* keep search reachable via icon */
    }
}

/* ===== >= 1200px : desktop ===== */
@media (min-width: 1200px) {
    .desktop-search-form {
        min-width: clamp(260px, 26vw, 400px);
    }

    .desktop-megamenu {
        max-height: min(80vh, 720px);
        overflow-y: auto;
    }
}

/* ===== Cookie consent stays inside viewport on phones ===== */
@media (max-width: 575.98px) {
    #cookieConsentBanner,
    .cookie-consent {
        left: 8px !important;
        right: 8px !important;
        bottom: 8px !important;
        max-width: none !important;
    }
}

/* ==========================================================================
   Mobile / Tablet Navigation Drawer — Editorial Redesign  (≤ 1199.98px)
   Visual override only — preserves all hrefs, IDs, JS hooks
   (.mobile-nav-toggle, .mobile-nav-active, .toggle-dropdown, megamenus).
   The mandala background (white sheet + SVG + gradient veil) is kept
   verbatim. The menu items themselves are reskinned in a serif-refined
   editorial style with numbered items, hairline dividers, and a
   staggered fade/slide entry animation.
   ========================================================================== */

@keyframes navItemEnter {
    from {
        opacity: 0;
        transform: translateY(24px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes navEyebrowEnter {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@media (max-width: 1199.98px) {

    /* ---- Drawer panel: clean white sheet, no dim ---- */
    body.mobile-nav-active .navmenu {
        position: fixed;
        inset: 0;
        background: #ffffff;
        z-index: 9997;
        overflow: hidden;
    }

    /* Decorative gold mandala anchored in the top-right corner.
       Positioned so its CENTER is visible (matches the reference). */
    body.mobile-nav-active .navmenu::before {
        content: '';
        position: absolute;
        top: clamp(-220px, -32vw, -120px);
        right: clamp(-220px, -32vw, -120px);
        width: clamp(440px, 95vw, 640px);
        height: clamp(440px, 95vw, 640px);
        background: url('/Images/nav-mandala.svg') no-repeat center / contain;
        opacity: 1;
        pointer-events: none;
        z-index: 0;
    }

    /* Soft white veil at top fades the mandala into the page edge */
    body.mobile-nav-active .navmenu::after {
        content: '';
        position: absolute;
        inset: 0;
        background:
            linear-gradient(180deg, rgba(255,255,255,0.0) 0%, rgba(255,255,255,0.0) 50%, rgba(255,255,255,0.85) 78%, #fff 100%),
            linear-gradient(90deg, rgba(255,255,255,0.92) 0%, rgba(255,255,255,0.55) 38%, rgba(255,255,255,0) 70%);
        pointer-events: none;
        z-index: 0;
    }

    /* ---- Close (×) button readable against white ---- */
    body.mobile-nav-active .mobile-nav-toggle {
        color: #1a1a1a !important;
        font-size: 30px;
        top: 18px;
        right: 18px;
        z-index: 9999;
    }

    /* ---- Menu list: full-screen editorial column ---- */
    body.mobile-nav-active .navmenu > ul {
        position: absolute;
        inset: 0;
        padding: 150px 0 60px;
        margin: 0;
        background: transparent !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        list-style: none;
        z-index: 1;
        counter-reset: navitem;
    }

    /* Editorial eyebrow "— MENU —" floating above the items */
    body.mobile-nav-active .navmenu > ul::before {
        content: '— MENU —';
        position: absolute;
        top: 100px;
        left: 0;
        right: 0;
        text-align: center;
        font-family: var(--font-body, 'Source Sans 3', 'Inter', system-ui, sans-serif);
        font-size: 11px;
        font-weight: 500;
        letter-spacing: 0.32em;
        text-transform: uppercase;
        color: #999;
        animation: navEyebrowEnter 500ms ease 50ms both;
    }

    /* ---- Top-level menu items: numbered, hairline-divided rows ---- */
    body.mobile-nav-active .navmenu > ul > li {
        position: relative;
        background: transparent;
        padding: 30px 0 22px;
        counter-increment: navitem;
        animation: navItemEnter 600ms cubic-bezier(0.22, 1, 0.36, 1) both;
    }

    /* Stagger each item's entry */
    body.mobile-nav-active .navmenu > ul > li:nth-child(1) { animation-delay: 100ms; }
    body.mobile-nav-active .navmenu > ul > li:nth-child(2) { animation-delay: 180ms; }
    body.mobile-nav-active .navmenu > ul > li:nth-child(3) { animation-delay: 260ms; }
    body.mobile-nav-active .navmenu > ul > li:nth-child(4) { animation-delay: 340ms; }
    body.mobile-nav-active .navmenu > ul > li:nth-child(5) { animation-delay: 420ms; }
    body.mobile-nav-active .navmenu > ul > li:nth-child(6) { animation-delay: 500ms; }
    body.mobile-nav-active .navmenu > ul > li:nth-child(n+7) { animation-delay: 580ms; }

    /* Hairline divider between items */
    body.mobile-nav-active .navmenu > ul > li:not(:last-child) {
        border-bottom: 1px solid rgba(26, 26, 26, 0.08);
    }

    /* Small ochre number above each item (01, 02, …) */
    body.mobile-nav-active .navmenu > ul > li::before {
        content: counter(navitem, decimal-leading-zero);
        position: absolute;
        top: 8px;
        left: 56px;
        font-family: var(--font-body, 'Source Sans 3', 'Inter', system-ui, sans-serif);
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 0.28em;
        color: rgba(200, 151, 58, 0.85);
    }

    body.mobile-nav-active .navmenu > ul > li > a {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 32px 0 56px;
        font-family: var(--font-heading, 'Playfair Display', Georgia, serif);
        font-size: 36px;
        font-weight: 400;
        line-height: 1.05;
        color: #1a1a1a;
        letter-spacing: -0.005em;
        background: transparent;
        white-space: normal;
        transition: color 250ms ease, transform 350ms cubic-bezier(0.22, 1, 0.36, 1);
    }

    body.mobile-nav-active .navmenu > ul > li > a:hover,
    body.mobile-nav-active .navmenu > ul > li > a:focus,
    body.mobile-nav-active .navmenu > ul > li > a.active {
        color: #c8973a;
        transform: translateX(6px);
    }

    body.mobile-nav-active .navmenu > ul > li > a > span {
        flex: 1;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* ---- Minimal chevron on dropdown items (replaces cream pill) ---- */
    body.mobile-nav-active .navmenu > ul > li > a > i.toggle-dropdown {
        flex: 0 0 auto;
        width: auto;
        height: auto;
        margin-left: 12px;
        padding: 4px;
        font-size: 18px;
        font-weight: 300;
        color: rgba(26, 26, 26, 0.5);
        background: transparent !important;
        border: none;
        border-radius: 0;
        transition: color 250ms ease, transform 350ms cubic-bezier(0.22, 1, 0.36, 1);
    }

    body.mobile-nav-active .navmenu > ul > li > a:hover > i.toggle-dropdown {
        color: #c8973a;
    }

    /* Active/expanded state — JS toggles .active on <a> (not <li>) when chevron is tapped */
    body.mobile-nav-active .navmenu > ul > li > a.active > i.toggle-dropdown,
    body.mobile-nav-active .navmenu > ul > li > a > i.toggle-dropdown.bi-chevron-up {
        color: #c8973a;
        transform: rotate(180deg);
        background: transparent !important;
    }

    /* ---- Sub-menu (dropdown contents) — italic Playfair, pale cream card ---- */
    body.mobile-nav-active .navmenu .dropdown ul {
        background: rgba(239, 232, 217, 0.45);
        border: none;
        margin: 14px 28px 4px 56px;
        padding: 8px 0;
        border-radius: 14px;
    }

    body.mobile-nav-active .navmenu .dropdown ul a {
        font-family: var(--font-heading, 'Playfair Display', Georgia, serif);
        font-size: 18px;
        font-style: italic;
        font-weight: 400;
        color: #4a4a4a;
        padding: 10px 22px;
        letter-spacing: 0.005em;
        transition: color 200ms ease, padding-left 200ms ease;
    }

    body.mobile-nav-active .navmenu .dropdown ul a:hover {
        color: #c8973a;
        background: transparent;
        padding-left: 30px;
    }

    /* Megamenu items inherit the italic editorial rhythm */
    body.mobile-nav-active .navmenu .mobile-megamenu a {
        font-family: var(--font-heading, 'Playfair Display', Georgia, serif);
        font-size: 18px;
        font-style: italic;
        padding: 10px 22px 10px 56px;
        color: #4a4a4a;
    }
}

/* Tablet refinements (768 – 1199.98px) */
@media (min-width: 768px) and (max-width: 1199.98px) {
    body.mobile-nav-active .navmenu > ul {
        padding: 180px 0 60px;
    }

    body.mobile-nav-active .navmenu > ul::before {
        top: 120px;
        font-size: 12px;
    }

    body.mobile-nav-active .navmenu > ul > li {
        padding-top: 36px;
        padding-bottom: 28px;
    }

    body.mobile-nav-active .navmenu > ul > li::before {
        left: 80px;
        top: 12px;
        font-size: 12px;
    }

    body.mobile-nav-active .navmenu > ul > li > a {
        padding-left: 80px;
        padding-right: 60px;
        font-size: 44px;
    }

    body.mobile-nav-active .navmenu > ul > li > a:hover,
    body.mobile-nav-active .navmenu > ul > li > a:focus,
    body.mobile-nav-active .navmenu > ul > li > a.active {
        transform: translateX(10px);
    }

    body.mobile-nav-active .navmenu .dropdown ul,
    body.mobile-nav-active .navmenu .mobile-megamenu {
        margin-left: 80px;
        margin-right: 60px;
    }

    body.mobile-nav-active .navmenu .mobile-megamenu a {
        padding-left: 80px;
        font-size: 19px;
    }

    body.mobile-nav-active .navmenu .dropdown ul a {
        font-size: 20px;
    }
}

/* Phone tightening (≤ 575.98px) */
@media (max-width: 575.98px) {
    body.mobile-nav-active .navmenu > ul {
        padding: 130px 0 60px;
    }

    body.mobile-nav-active .navmenu > ul::before {
        top: 86px;
        font-size: 10px;
        letter-spacing: 0.3em;
    }

    body.mobile-nav-active .navmenu > ul > li {
        padding: 24px 0 18px;
    }

    body.mobile-nav-active .navmenu > ul > li::before {
        left: 32px;
        top: 6px;
        font-size: 10px;
    }

    body.mobile-nav-active .navmenu > ul > li > a {
        font-size: clamp(28px, 8vw, 34px);
        padding: 0 22px 0 32px;
    }

    body.mobile-nav-active .navmenu > ul > li > a:hover,
    body.mobile-nav-active .navmenu > ul > li > a:focus,
    body.mobile-nav-active .navmenu > ul > li > a.active {
        transform: translateX(4px);
    }

    body.mobile-nav-active .navmenu > ul > li > a > i.toggle-dropdown {
        font-size: 16px;
    }

    body.mobile-nav-active .navmenu .dropdown ul {
        margin: 10px 22px 4px 32px;
    }

    body.mobile-nav-active .navmenu .dropdown ul a {
        font-size: 17px;
    }

    body.mobile-nav-active .navmenu .mobile-megamenu a {
        padding-left: 32px;
        font-size: 17px;
    }

    body.mobile-nav-active .mobile-nav-toggle {
        top: 14px;
        right: 14px;
        font-size: 28px;
    }
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    body.mobile-nav-active .navmenu > ul > li,
    body.mobile-nav-active .navmenu > ul::before {
        animation: none;
        opacity: 1;
        transform: none;
    }

    body.mobile-nav-active .navmenu > ul > li > a,
    body.mobile-nav-active .navmenu > ul > li > a > i.toggle-dropdown {
        transition: color 0.01ms;
    }

    body.mobile-nav-active .navmenu > ul > li > a:hover,
    body.mobile-nav-active .navmenu > ul > li > a:focus,
    body.mobile-nav-active .navmenu > ul > li > a.active {
        transform: none;
    }
}

/* ─────────────────────────────────────────────────────────────
   HEADER SEARCH AUTOCOMPLETE POPUP
   Used by the desktop and mobile search forms in UserLayout.
   ───────────────────────────────────────────────────────────── */
form.search-form { position: relative; }

.sl-search-popup {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 1080;
    background: #fff;
    border: 1px solid #e6e4df;
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(16, 24, 40, 0.10), 0 4px 8px rgba(16, 24, 40, 0.04);
    max-height: 70vh;
    overflow-y: auto;
    padding: 6px 0;
}

.sl-search-status {
    padding: 14px 18px;
    font-size: 13px;
    color: #6c6f6a;
    text-align: center;
}

.sl-search-result {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    cursor: pointer;
    transition: background-color .15s ease;
    border-bottom: 1px solid #f3f1ec;
}

.sl-search-result:last-child { border-bottom: none; }
.sl-search-result:hover, .sl-search-result:focus { background: #f6faf3; }

.sl-search-thumb {
    width: 46px;
    height: 46px;
    border-radius: 8px;
    overflow: hidden;
    background: #eef2ec;
    flex-shrink: 0;
}
.sl-search-thumb img {
    width: 100%; height: 100%; object-fit: cover; display: block;
}

.sl-search-info { flex: 1; min-width: 0; }

.sl-search-name {
    font-size: 14px;
    font-weight: 600;
    color: #1a2e1a;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sl-search-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 3px;
    font-size: 12px;
    color: #6c6f6a;
}

.sl-search-price {
    font-weight: 700;
    color: #2d7a3a;
}

.sl-search-tag {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: 999px;
}
.sl-search-tag.sl-in {
    color: #2d7a3a;
    background: #eaf4ea;
}
.sl-search-tag.sl-oos {
    color: #b42318;
    background: #fde2e2;
}

.sl-search-arrow {
    color: #c0c5bd;
    font-size: 16px;
    flex-shrink: 0;
}
.sl-search-result:hover .sl-search-arrow { color: #2d7a3a; }

@media (max-width: 575.98px) {
    .sl-search-popup { max-height: 55vh; }
    .sl-search-thumb { width: 40px; height: 40px; }
    .sl-search-name { font-size: 13px; }
    .sl-search-meta { font-size: 11px; }
}

/* Account dropdown — logout button (overrides .dropdown-footer .btn from main.css) */
.header .main-header .account-dropdown .dropdown-menu .dropdown-footer .btn.btn-logout {
    background-color: #dc3545;
    border-color: #dc3545;
    color: #fff;
    font-size: 14px;
    padding: 0.5rem 1rem;
    border-radius: 50px;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.header .main-header .account-dropdown .dropdown-menu .dropdown-footer .btn.btn-logout:hover,
.header .main-header .account-dropdown .dropdown-menu .dropdown-footer .btn.btn-logout:focus {
    background-color: #bb2d3b;
    border-color: #b02a37;
    color: #fff;
}
.header .main-header .account-dropdown .dropdown-menu .dropdown-footer .btn.btn-logout i {
    margin-right: 0.35rem;
}