:root {
        --green: #8a9a00;
        --dark-bg: #0f0f0f;
        --muted: #bdbdbd;
        --card: #1c1c1c;
        --white: #ffffff;
        --grey: #747474;
        --black: #000;
        --orange: #C67000;
		--btn-yellow: #c18d00;
		--lt-gray: #999;
		--med-gray: #666;
		--dk-gray1: #414141;
		--dk-gray2: #1d1d1d;
        --font-barlow: 'Barlow Condensed', sans-serif;
        --font-jost: 'Jost', sans-serif;
		--ai-srch-border: 2px; /* thickness of the rainbow border */
		--ai-srch-radius: 24px; /* search box corner radius */
		--ai-srch-blur: 7px; /* blur applied to the outward fade */
		--ai-srch-spin: 2s;  /* speed of the animation */
		--ai-srch-halo: 10px; /* outward fade reach */
		
    }

@property --ai-srch-angle {
  syntax: "<angle>";
  inherits: true;
  initial-value: 0deg;
}

    /* Basic reset */
    *,
    *::before,
    *::after {
        box-sizing: border-box;
    }

    body {
        margin: 0;
        font-family: var(--font-jost);
        background: #000;
        color: var(--white);
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        line-height: 1.4;
    }

    a {
        color: inherit;
        text-decoration: none;
    }
    /* Container width similar to screenshot center content */
    .scout .abs-header-container {
        width: min(1080px, 92%);
        margin: 0 auto;
        padding-bottom: 0px;
        box-sizing: border-box;
        overflow: visible; /* Allow content to be visible but... */
    }

    .scout #main-header {
        overflow: visible; /* Allow tooltip and megamenu to be visible */
        box-sizing: border-box;
    }
    /* header */

	.scout #main-header input[type="text"] {
		font-size: 16px;
		color: var(--input-text);
		line-height: 20px;
		font-weight: 400;
		font-family: var(--font-jost);
		margin: 0;
	}

	.scout a:hover, .scout a:focus, .scout a img:hover {
		color: #fff;
		opacity: .5;
	}

	/* Exclude buttons from generic link hover - they have their own hover treatments */
	.scout a.abs-ai-button-mini:hover,
	.scout a.yellow-btn:hover,
	.scout a.yellow-btn:focus {
		opacity: 1;
	}
	.scout-btn-content {
		display: inline-flex;
		align-items: center;
		gap: 3px;
	}
	.scout a.abs-ai-button-mini:hover .scout-btn-content {
		opacity: 0.5 !important;
	}

	.scout #main-header {
		background-color: var(--header-green);
		padding: 13px 0 13px;
		margin: 0;
		height: auto;
		min-height: 80px;
}
    .scout .abs-header {
        background: var(--green);
        color: #fff;
        padding: 20px 0;
        border-bottom: 2px solid rgba(0, 0, 0, 0.06);
        position: sticky;
        top: 0;
        z-index: 900; /* Keep tooltip above hero content */
        overflow: visible;
    }
    .scout .abs-topbar {
        display: flex;
        gap: 16px;
        align-items: center;
        justify-content: flex-start;
        position: relative;
        overflow: visible;
    }
    .scout .abs-brand {
        display: flex;
        align-items: center;
        gap: 18px;
    }
    .scout .abs-logo img {
        width: 243px;
        height: auto;
        display: block;
		margin-right: 15px;
    }
    .scout .abs-header-search {
        display: flex;
        align-items: center;
        gap: 48px;
        flex: 1;
        margin: 0 15px;
        min-width: 0;
        position: relative;
        z-index: 600;
        overflow: visible;
    }
    .scout .abs-header-search .main-input {
        flex: 1;
        background: var(--input-bg);
        background-color: var(--input-bg) !important;
        height: 34px;
        padding: 9px 14px 10px;
        border-radius: 28px;
        border: 1px solid var(--input-border);
        font-size: 1rem;
        outline: none;
        color: var(--input-text);
        padding-left: 35px;
        width: 100%;
    }

    .scout #main-header .abs-header-search .main-input {
        background-color: #d4d7a7 !important;
        height: 34px !important;
        line-height: 20px !important;
        font-size: 16px !important;
        font-weight: 400 !important;
        font-family: var(--font-jost) !important;
        color: #444 !important;
        margin: 0 !important;
        padding-left: 35px !important;
        border-radius: 28px !important;
        border: 1px solid #848843 !important;
        box-shadow: none !important;
        transition: border linear .2s, box-shadow linear .2s !important;
    }
    .scout #main-header .abs-header-search .main-input::placeholder {
        color: #444 !important;
        opacity: 1 !important;
    }
    .scout .abs-search-input-wrap .fa-search {
        position: absolute;
        left: 10px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 20px;
        color: #7C7D74;
    }
    .scout .abs-search-input-wrap {
        position: relative;
        max-width: 440px;
        flex: 1 1 440px;
        min-width: 0;
		margin-right: 3px;
    }
    .scout .abs-search-input-wrap::after {
        content: none;
    }
    .scout .abs-header-actions {
        display: flex;
        align-items: center;
        gap: 20px;
        position: relative;
        flex-shrink: 0; /* Prevent header actions from shrinking */
        margin-left: auto;
        margin-right: 0;
        justify-content: flex-end;
    }
    .scout .abs-header-actions ul {
        list-style: none;
        display: flex;
        gap: 20px;
        margin: 0;
        padding: 0;
        align-items: center;
        flex-wrap: nowrap; /* Prevent wrapping */
    }
    .scout .abs-header-actions li {
        cursor: pointer;
        position: relative;
    }
    .scout .abs-header-actions .icon {
        font-size: 20px;
        line-height: 16px;
        min-width: 44px;
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    /* Ai button design  */
	    .scout .rotating-gradient-btn {
        position: relative;
        border-radius: var(--ai-srch-radius);
        z-index: 0;
    }

    .scout .rotating-gradient-btn::before {
        content: none;
    }

    .scout .abs-ai-button-mini {
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 3px 17px 5px 17px;
        font-size: 14px;
        font-weight: 600;
        border: 2px solid transparent;
        border-radius: 50px;
        cursor: pointer;
        background:
            linear-gradient(180deg, #20251a 0%, #11160c 100%) padding-box,
            conic-gradient(
                from var(--angle),
                transparent 0deg,
                transparent 25deg,
                rgba(52, 168, 83, 0.9) 60deg,
                rgba(255, 211, 20, 0.9) 100deg,
                rgba(255, 70, 65, 0.9) 140deg,
                rgba(49, 134, 255, 0.9) 180deg,
                rgba(49, 134, 255, 0.6) 240deg,
                rgba(49, 134, 255, 0.3) 300deg,
                transparent 360deg
            ) border-box;
        animation: spinAngle 2.5s linear infinite;
        transition: transform 0.2s ease;
        z-index: 1;
        font-family: var(--font-barlow);
        color: #fdf1b0;
        white-space: nowrap;
        text-transform: uppercase;
        letter-spacing: 0.12em;
        box-shadow: 0 10px 24px rgba(0, 0, 0, 0.4), 0 0 18px rgba(140, 149, 0, 0.3);
        filter: drop-shadow(0px 0px 4px rgba(0, 0, 0, 0.4));
    }

    .scout .abs-ai-button-badge {
        position: absolute;
        top: -12px;
        right: -4px;
        background: #c75000;
        color: #fff;
        font-size: 10px;
        font-weight: 700;
        line-height: normal;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        padding: 2px 6px;
        border-radius: 999px;
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
        pointer-events: none;
    }

    .scout .abs-ai-button-wrap {
        position: relative;
        display: inline-flex;
        align-items: center;
        margin-left: 0;
        overflow: visible;
    }

    .scout .abs-ai-button-icon--floating {
        position: absolute;
        left: -36px;
        top: 16px;
        transform: translateY(-50%);
        height: 64px;
        width: auto;
        filter: drop-shadow(-5px 1px 9px rgba(0, 0, 0, 0.5));
        z-index: 3;
        pointer-events: none;
    }

    .scout .abs-ai-button-mini:hover {
        animation-play-state: paused;
		color: #fdf1b0;
    }

    /* Scout Tooltip */
    .scout-tooltip {
        position: absolute;
        top: calc(100% + 12px);
        left: 50%;
        transform: translateX(-50%);
        background: rgba(255, 255, 255, 0.9);
        color: #000;
        padding: 10px 14px;
        border-radius: 8px;
        font-size: 13px;
        font-weight: 400;
        letter-spacing: normal;
        text-transform: none;
        white-space: nowrap;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.2s ease, visibility 0.2s ease;
        z-index: 999999;
        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    }

    .scout .abs-megamenu-overlay {
        display: none;
        position: fixed;
        inset: 0;
    }

    /* Triangle pointer */
    .scout-tooltip::before {
        content: '';
        position: absolute;
        bottom: 100%;
        left: 50%;
        transform: translateX(-50%);
        border: 8px solid transparent;
        border-bottom-color: rgba(255, 255, 255, 0.9);
    }

    .scout .abs-ai-button-wrap:hover .scout-tooltip,
    .scout .abs-ai-button-mini:focus-visible + .scout-tooltip {
        opacity: 1;
        visibility: visible;
    }

	@keyframes ai-srch-spin {
  		to { --ai-srch-angle: 360deg; 
		}
	}

    @keyframes spinAngle {
        to {
            --angle: 360deg;
        }
    }
    @property --angle {
        syntax: "<angle>";
        inherits: false;
        initial-value: 0deg;
    }
    /* Mega Menu Styles */
    .scout .abs-megamenu-wrapper {
        position: absolute;
        top: calc(100% + 14px);
        left: 0;
        width: 100%;
        background: #000;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
        display: none;
        padding: 0px;
        z-index: 600; /* Above header (500) and Scout overlay (501) */
        border-top: 1px solid #444;
        flex-direction: column;
        border-radius: 0 0 12px 12px;
    }
    .scout .abs-megamenu-wrapper.active {
        display: flex;
    }
    .scout .abs-sub-megamenu-container {
        display: flex;
        gap: 25px;
        max-width: 1200px;
        margin: 0 auto;
        padding: 0;
        background: #000;
        width: 100%;
		border: 1px solid #222;
		border-top: 0px;
    }
    .scout .abs-header-actions #browse-link a {
        display: flex;
        gap: 3px;
		font-size: 18px;
		font-weight: 500;
    }
    #browse-link i {
        position: relative;
        top: 5px;
    }
    .scout .abs-megamenu-wrapper .abs-top-menu {
        width: 100%;
        background: #333;
        padding: 8px 20px;
		border-bottom: 1px solid #111;
    }
    .scout .abs-megamenu-wrapper .abs-top-menu ul {
        display: flex;
        gap: 20px;
        justify-content: space-between;
        width: 100%;
        margin: 0;
        padding: 0;
    }
    .scout .abs-megamenu-wrapper .abs-top-menu ul li a {
        color: var(--lt-gray);
        font-family: var(--font-jost);
        font-weight: 500;
    }
    .scout .abs-account-link {
        display: none;
    }
    /* Hide Ask Scout menu item by default - shown only in appuser mode */
    .scout .abs-menu-ask-scout {
        display: none;
    }
    /* Hide About Scout link by default - shown only in appuser mode */
    .scout .abs-menu-about-scout {
        display: none;
    }
    .scout .abs-account-submenu {
        display: none;
    }
    .scout .abs-account-submenu details {
        margin: 0;
    }
    .scout .abs-account-submenu summary {
        list-style: none;
    }
    .scout .abs-account-submenu summary::-webkit-details-marker {
        display: none;
    }
    .scout .abs-category-submenu {
        display: none;
    }
    .scout .abs-category-submenu details {
        margin: 0;
    }
    .scout .abs-category-submenu summary {
        list-style: none;
    }
    .scout .abs-category-submenu summary::-webkit-details-marker {
        display: none;
    }
    .scout .abs-nav-links {
        display: flex;
        justify-content: space-between;
        color: black;
        margin: 0px;
        border-radius: 10px;
    }
    .scout .abs-nav-links li {
        list-style-type: none;
    }
    .scout .abs-menu-left {
        flex: 1;
        padding: 0px 10px;
        background: #222;
        max-width: 260px;
    }
    .scout .abs-menu-left .menu-section {
        margin: 14px 0px;
    }
    .scout .abs-menu-left .menu-section h3 {
        color: #2c3e50;
        margin-bottom: 15px;
        font-size: 16px;
        font-weight: 600;
    }
    .scout .abs-menu-left .menu-section .fa-angle-right {
        font-size: 20px;
    }
    .scout .abs-menu-left .abs-menu-link {
        padding: 0px 0px 0px 15px;
        color: var(--white);
        text-decoration: none;
		font-family: var(--font-jost);
        font-weight: 500;
        font-size: 15px;
        transition: color 0.3s;
        cursor: pointer;
        position: relative;
        margin-bottom: 19px;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .scout .abs-menu-left .abs-menu-link.active {
        color: var(--lt-gray);
    }
    .scout .abs-menu-left .abs-menu-link:last-child {
        margin: 0;
    }
    .scout .abs-menu-left .abs-social-section {
        padding-top: 25px;
        margin-top: 20px;
        border-top: 1px solid #eee;
		display: none;
    }
    .scout .abs-menu-left .abs-social-links {
        display: flex;
        gap: 10px;
    }
    .scout .abs-menu-left .abs-social-links a {
        background: #D9D9D9;
        width: 36px;
        height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--black);
        text-decoration: none;
        font-weight: bold;
        transition: background-color 0.3s;
    }
    .scout .abs-menu-left .abs-social-links a:hover {
        background: var(--orange);
        color: var(--white)
    }
    .scout .abs-sub-megamenu-container .abs-menu-right {
        flex: 2;
        display: none;
        flex-wrap: wrap;
        gap: 30px;
        align-content: flex-start;
        padding: 14px 14px 14px 0;
    }
    .scout .abs-sub-megamenu-container .abs-menu-right.active {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
    }
   .scout .abs-sub-megamenu-container .abs-menu-right a {
        flex: 1 1 30%;
        text-decoration: none;
        color: var(--white);
        font-size: 16px;
        transition: color 0.3s;
        font-family: var(--font-jost);
        font-weight: 500;
    }
    .scout .abs-sub-megamenu-container .abs-menu-right a.show-all {
        font-weight: 500;
        display: block;
        color: var(--btn-yellow-bg);
    }
    .scout .abs-megamenu-wrapper .abs-menu-right .show-all {
        color: var(--btn-yellow-bg);
    }
    .scout .abs-sub-megamenu-container .abs-menu-right .show-all i {
        font-size: 15px;
    }
    
.scout #abs-login-menu {
    display: none;
    position: absolute;
    top: calc(100% + 0px);
        left: 50%;
        background: #000;
        z-index: 9999;
        min-width: 195px;
        padding: 15px;
        border: 1px solid #222;
        transform: translateX(-50%);
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
        opacity: 0.85;
    }
    .scout #abs-login-menu ul {
        margin: 0;
        padding: 0;
        list-style: none;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap:16px;
    }
    .scout #abs-login-menu ul li a {
        width: 100%;
    }
    .scout #abs-login-menu ul li a {
        font-size: 16px;
        transition: color 0.3s;
        font-family: var(--font-jost);
        font-weight: 500;
    }
    .scout #login-button {
        display: flex;
        align-items: center
    }
    .scout #login-button .fa-circle-user,
    .scout .abs-login-wrapper .fa-circle-user {
        font-size: 22px;
    }
    /******************************** RESPONSIVE ***************************/
    @media(max-width:1100px) {
        .scout .abs-search-input-wrap {
            flex: 1 1 420px;
            max-width: none;
        }
    }
    @media(min-width:1051px) {
        .scout #abs-mobile-hamburger {
            display: none;
        }
    }
     @media (max-width: 1050px) {
        .scout .abs-header-actions #browse-link {
            display: none;
        }
        .scout .abs-login-wrapper {
            display: none;
        }
        .scout .abs-account-link {
            display: none;
        }
        .scout .abs-account-submenu {
            display: block;
        }
        .scout .abs-category-submenu {
            display: block;
        }
        .scout .abs-menu-left .menu-section {
            display: none;
        }
        .scout .abs-mobile-hamburger {
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            width: 44px; /* ADA compliant touch target */
            height: 44px; /* ADA compliant touch target */
            padding: 10px;
            cursor: pointer;
            z-index: 1001;
            background: transparent;
            border-radius: 6px;
        }
        .scout .abs-mobile-hamburger span {
            display: block;
            height: 3px;
            background: #fff;
            border-radius: 2px;
            transition: all 0.3s ease-in-out;
            width: 100%;
        }
        .scout .abs-mobile-hamburger.active span:nth-child(1) {
            transform: rotate(45deg) translate(7px, 6px);
        }
        .scout .abs-mobile-hamburger.active span:nth-child(2) {
            opacity: 0;
        }
        .scout .abs-mobile-hamburger.active span:nth-child(3) {
            transform: rotate(-45deg) translate(7px, -6px);
        }

        /* Slide-out drawer overlay backdrop */
        .scout .abs-megamenu-overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.6);
            z-index: 999;
            opacity: 0;
            transition: opacity 0.3s ease-in-out;
        }
        .scout .abs-megamenu-overlay.visible {
            display: block;
            opacity: 1;
        }

        /* Slide-out drawer menu - slides from right */
        .scout .abs-megamenu-wrapper {
            position: fixed;
            top: 0;
            right: calc(-1 * min(320px, 85vw)); /* Start off-screen */
            left: auto; /* Override desktop left:0 */
            width: min(320px, 85vw);
            height: 100vh;
            height: 100dvh; /* Dynamic viewport height for mobile */
            overflow-y: auto;
            overflow-x: hidden;
            flex-direction: column;
            padding: 0;
            display: flex !important; /* Always visible for transform */
            background: #111;
            z-index: 1000;
            box-shadow: -4px 0 20px rgba(0, 0, 0, 0.3);
            border-radius: 0;
            border-left: 1px solid #333;
            transition: right 0.3s ease-in-out;
        }

        /* When drawer is open */
        .scout .abs-megamenu-wrapper.active {
            right: 0;
        } 
        /* Drawer close button at top - HIDDEN because hamburger transforms to X */
        .scout .abs-megamenu-wrapper .drawer-close-btn {
            display: none !important; /* Hide - hamburger already transforms to X when menu is open */
        }

        .scout .abs-megamenu-wrapper .abs-top-menu {
            width: 100%;
            border: 0;
            border-radius: 0;
            background: #111;
            padding: 20px 16px 16px; /* Reduced top padding - no close button */
            border-bottom: 1px solid #333;
        }
        .scout .abs-megamenu-wrapper .abs-top-menu ul {
            display: flex;
            flex-direction: column;
            gap: 0;
            width: 100%;
            margin: 0;
            padding: 0;
        }
        .scout .abs-megamenu-wrapper .abs-top-menu ul li {
            font-size: 16px;
            padding: 0;
            border-bottom: 1px solid #222;
        }
        .scout .abs-megamenu-wrapper .abs-top-menu ul li:last-child {
            border-bottom: none;
        }
        .scout .abs-megamenu-wrapper .abs-top-menu ul li a {
            display: block;
            width: 100%;
            padding: 12px 0;
            color: var(--white);
            font-family: var(--font-jost);
            font-weight: 500;
            transition: color 0.2s ease;
        }
        .scout .abs-megamenu-wrapper .abs-top-menu .abs-account-submenu {
            padding: 12px 0;
            border-bottom: 1px solid #222;
        }
        .scout .abs-megamenu-wrapper .abs-top-menu .abs-account-submenu details {
            background: rgba(140, 149, 0, 0.2);
            border: 1px solid rgba(140, 149, 0, 0.6);
            border-radius: 10px;
            padding: 10px 12px;
        }
        .scout .abs-megamenu-wrapper .abs-top-menu .abs-account-submenu summary {
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-weight: 600;
            color: #fff;
            cursor: pointer;
            font-family: var(--font-jost);
        }
        .scout .abs-megamenu-wrapper .abs-top-menu .abs-account-submenu,
        .scout .abs-megamenu-wrapper .abs-top-menu .abs-category-submenu {
            cursor: pointer;
        }
        .scout .abs-megamenu-wrapper .abs-top-menu .abs-submenu-icons {
            display: inline-flex;
            align-items: center;
            gap: 6px;
        }
        .scout .abs-megamenu-wrapper .abs-top-menu .abs-submenu-icons i {
            font-size: 14px;
            color: #aaa;
        }
        .scout .abs-megamenu-wrapper .abs-top-menu .abs-submenu-icons .fa-angle-up {
            display: none;
        }
        .scout .abs-megamenu-wrapper .abs-top-menu .abs-account-submenu details[open] .fa-angle-down,
        .scout .abs-megamenu-wrapper .abs-top-menu .abs-category-submenu details[open] .fa-angle-down {
            display: none;
        }
        .scout .abs-megamenu-wrapper .abs-top-menu .abs-account-submenu details[open] .fa-angle-up,
        .scout .abs-megamenu-wrapper .abs-top-menu .abs-category-submenu details[open] .fa-angle-up {
            display: inline-block;
        }
        .scout .abs-megamenu-wrapper .abs-top-menu .abs-account-links {
            list-style: none;
            margin: 10px 0 0;
            padding: 0;
        }
        .scout .abs-megamenu-wrapper .abs-top-menu .abs-account-links li {
            padding: 0;
            border-bottom: none;
        }
        .scout .abs-megamenu-wrapper .abs-top-menu .abs-account-links li:last-child {
            padding-bottom: 0;
        }
        .scout .abs-megamenu-wrapper .abs-top-menu .abs-account-links a {
            display: block;
            width: 100%;
            padding: 8px 0;
            color: #f5f1d1;
            font-weight: 500;
        }
        .scout .abs-megamenu-wrapper .abs-top-menu .abs-category-submenu {
            padding: 12px 0;
            border-bottom: 1px solid #222;
        }
        .scout .abs-megamenu-wrapper .abs-top-menu .abs-category-submenu details {
            background: #212121;
            border: 1px solid #2f2f2f;
            border-radius: 10px;
            padding: 10px 12px;
        }
        .scout .abs-megamenu-wrapper .abs-top-menu .abs-category-submenu summary {
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-weight: 600;
            color: #d5d5d5;
            cursor: pointer;
            font-family: var(--font-jost);
        }
        .scout .abs-megamenu-wrapper .abs-top-menu .abs-category-submenu .abs-menu-link {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            width: 100%;
            padding: 0;
            border-bottom: none;
            justify-content: flex-start;
            color: inherit;
        }
        .scout .abs-megamenu-wrapper .abs-top-menu ul li a:hover {
            color: #fff;
        }
        .scout .abs-megamenu-wrapper .abs-menu-left {
            width: 100%;
            border: unset;
            background: #111;
            padding: 16px;
            border-radius: 0;
            max-width: 100%;
            margin-top: 0;
        }
        .scout .abs-menu-left .abs-menu-link.active {
            background: #333 !important;
            color: #fff;
        }
        .scout .abs-menu-left .abs-menu-link.active i {
            transform: rotate(90deg);
            transition: transform 0.3s;
        }
        .scout .abs-menu-left .abs-social-section {
            padding: 16px;
            justify-content: flex-start;
            border: unset;
            display: flex;
        }
        .scout .abs-menu-left .menu-section {
            padding: 16px 0;
            border-top: 1px solid #333;
            border-bottom: 1px solid #333;
            margin-bottom: 16px;
        }
        .scout .abs-menu-left .abs-menu-link {
            color: #ccc;
        }
        .scout .abs-menu-left .abs-menu-link.is-open i {
            transform: rotate(90deg);
            transition: transform 0.3s;
        }
        .scout .abs-megamenu-wrapper .abs-menu-link i.fa {
            transition: transform 0.2s ease;
            color: #888;
        }
        .scout .abs-megamenu-wrapper .abs-menu-link.is-open i.fa {
            transform: rotate(90deg);
        }
        .scout .abs-megamenu-wrapper .abs-sub-megamenu-container {
            display: flex;
            flex-direction: column;
            max-width: 100%;
            margin: 0;
            border: none;
            border-radius: 0;
            padding: 0;
            background: #111;
        }
        .scout .abs-megamenu-wrapper .abs-menu-link {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            padding: 14px 16px;
            font-weight: 500;
            cursor: pointer;
            margin-bottom: 0;
            border-bottom: 1px solid #222;
        }
        .scout .abs-megamenu-wrapper .abs-menu-right {
            display: none;
            padding: 8px 16px 16px 25px;
            background: #1a1a1a;
        }
        .scout .abs-megamenu-wrapper .abs-menu-right a {
            display: block;
            padding: 10px 0;
            border: none;
            color: #aaa;
            font-size: 15px;
        }
        .scout .abs-megamenu-wrapper .abs-menu-right a:not(.show-all) {
            position: relative;
            padding-left: 16px;
        }
        .scout .abs-megamenu-wrapper .abs-menu-right a:not(.show-all)::before {
            content: "•";
            position: absolute;
            left: 0;
            top: 0.1em;
            color: #bdbdbd;
        }
        .scout .abs-megamenu-wrapper .abs-menu-right a:hover {
            color: #fff;
        }
        .scout .abs-megamenu-wrapper .abs-menu-right.active {
            display: block !important;
            border: unset;
        }
    }
    @media (max-width: 1100px) {
        .scout .abs-header-search {
            gap: 22px;
            margin: 0 10px;
        }
        .scout .abs-search-input-wrap {
            flex: 1 1 420px;
            max-width: none;
        }
        .scout .abs-header-actions ul {
            gap: 12px;
        }
        .scout .abs-header-actions #browse-link a {
            font-size: 16px;
        }
        .scout .abs-ai-button-wrap {
            padding-left: 23px;
        }
        .scout .abs-ai-button-mini {
            padding: 3px 16px 5px 16px;
            letter-spacing: 0.08em;
        }
        .scout .abs-ai-button-badge {
            top: -11px;
            right: -6px;
        }
        .scout .abs-ai-button-icon--floating {
            height: 62px;
            left: -11px;
            top: 15px;
            transform: translateY(-50%);
        }
    }
    @media (max-width: 1050px) {
        .scout .abs-header-actions .abs-login-wrapper {
            display: none !important;
        }
        .scout .abs-logo img {
            width: 220px;
            height: auto;
        }
        .scout .abs-header-search {
            gap: 18px;
            margin: 0 8px;
        }
        .scout .abs-search-input-wrap {
            flex: 1 1 auto;
            max-width: none;
            min-width: 0;
        }
        .scout .abs-header-actions ul {
            gap: 8px;
        }
        .scout .abs-header-actions .icon {
            min-width: 40px;
            min-height: 40px;
            font-size: 18px;
        }
        .scout .abs-ai-button-mini {
            padding: 2px 13px 4px 18px;
            font-size: 12px;
            letter-spacing: 0.08em;
        }
        .scout .abs-ai-button-badge {
            top: -13px;
            right: -5px;
        }
        .scout .abs-ai-button-icon--floating {
            height: 56px;
            left: -4px;
            top: 15px;
            transform: translateY(-50%);
        }
        .scout .abs-megamenu-wrapper .abs-menu-right {
            padding: 5px 16px 16px 19px;
        }
        .scout .abs-megamenu-wrapper .abs-menu-right a:not(.show-all)::before {
            top: 0.23em;
            font-weight: 600;
            font-size: 25px;
        }
    }
    @media (max-width: 1000px) {
        .scout .abs-logo img {
            width: 200px;
            height: auto;
        }
        .scout .abs-header-search {
            gap: 16px;
        }
        .scout .abs-header-actions ul {
            gap: 8px;
        }
        .scout .abs-header-actions .icon {
            min-width: 38px;
            min-height: 38px;
            font-size: 17px;
        }
        .scout .abs-header-actions #browse-link a {
            font-size: 15px;
        }
    }
    @media (max-width: 900px) {
        .scout .abs-header-container.abs-topbar {
            display: grid;
            grid-template-columns: 1fr auto;
            grid-template-rows: auto auto;
            align-items: center;
            column-gap: 12px;
            row-gap: 10px;
        }
        .scout #main-header {
	        padding: 10px 0 13px;
        }
        .scout .abs-brand {
            grid-column: 1;
            grid-row: 1;
        }
        .scout .abs-header-actions {
            grid-column: 2;
            grid-row: 1;
            justify-self: end;
        }
        .scout .abs-header-search {
            grid-column: 1 / -1;
            grid-row: 2;
            width: 100%;
            margin: 0;
            display: grid;
            grid-template-columns: minmax(0, 1fr) max-content;
            gap: 15px;
            align-items: center;
        }
        .scout .abs-search-input-wrap {
            flex: 1 1 auto;
            max-width: none;
            width: 100%;
            margin-right: 0;
            min-width: 0;
        }
        .scout .abs-ai-button-wrap {
            padding-left: 31px;
            justify-self: end;
        }
        /* Hide search bar and Scout button ONLY on ScoutConversations page */
        body.scout-conversations-page .abs-header-search {
            display: none;
        }
        body.scout-conversations-page .abs-header-container.abs-topbar {
            grid-template-rows: auto;
            row-gap: 0;
        }
        .scout .abs-logo img {
            width: 180px;
            height: auto;
        }
        .scout .abs-header-actions ul {
            gap: 8px;
        }
        .scout .abs-ai-button-mini {
            padding: 2px 16px 4px 16px;
            font-size: 12px;
            letter-spacing: 0.07em;
        }
        .scout .abs-ai-button-badge {
            right: -9px;
            top: -10px;
            font-size: 9px;
        }
        .scout .abs-ai-button-icon--floating {
            height: 52px;
            left: 5px;
            top: 13px;
        }
    }
    @media(max-width:767px) {
        .scout .abs-header-container.abs-topbar {
            display: grid;
            grid-template-columns: 1fr auto;
            grid-template-rows: auto auto;
            gap: 12px;
            width: 100%;
            max-width: none;
            margin: 0;
            padding: 0 15px;
            box-sizing: border-box;
        }
        .scout .abs-brand {
            grid-column: 1;
            grid-row: 1;
        }
        .scout .abs-header-container {
            width: 100%;
            max-width: none;
            margin: 0;
            box-sizing: border-box;
        }
        .scout .abs-header-search {
            display: grid;
            grid-template-columns: minmax(0, 1fr) max-content;
            margin: 0;
            grid-column: 1 / -1;
            grid-row: 2;
            width: 100%;
            gap: 15px;

        }
        .scout .abs-search-input-wrap {
            max-width: 100%;
            width: 100%;
            flex: 1 1 auto;
            min-width: 0;
        }
        .scout .rotating-gradient-btn {
            display: inline-flex;
        }
        .scout .abs-ai-button-wrap {
            padding-left: 27px;
        }
        .scout .abs-ai-button-mini {
            padding: 2px 16px 4px 16px;
            font-size: 12px;
            letter-spacing: 0.07em;
        }
        .scout .abs-ai-button-badge {
            right: -2px;
            top: -12px;
            font-size: 9px;
        }
        .scout .abs-ai-button-icon--floating {
            height: 53px;
            left: -1px;
            top: 13px;
        }
        .scout #main-header .abs-header-search .main-input {
            font-size: 15px !important;
            font-family: var(--font-barlow) !important;
            padding-left: 32px !important;
        }
        .scout .abs-header-actions {
            grid-column: 2 / 3;
            grid-row: 1;
            justify-self: end;
        }
        .scout .abs-header-actions ul {
            flex-direction: row; /* Keep consistent icon order (cart, account, hamburger) */
        }
        /* Scout tooltip - viewport-aware positioning */
        .scout-tooltip {
            white-space: normal;
            width: max-content;
            max-width: calc(100vw - 32px);
            left: auto;
            right: -10px;
            transform: none;
            text-align: left;
        }
        .scout-tooltip::before {
            left: auto;
            right: 20px;
            transform: none;
        }
    }
    @media (max-width: 500px) {
        .scout .abs-logo img {
            width: 180px;
        }
    }
/* Cart icon link - parent container for badge positioning */
.scout .abs-cart-link {
	position: relative;
	display: inline-block;
}

/* Cart icon image */
.scout .abs-cart-img {
	width: 22px;
	height: 22px;
	display: block;
}

/* Cart badge - overlaps top-right corner of cart icon */
.scout .abs-cart-count {
	font-size: 11px;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	background-color: #c75000;
	border-radius: 50%;
	width: 18px;
	height: 18px;
	line-height: 1;
	box-sizing: border-box;
	color: #fff;
	/* Position to overlap top-right corner of cart icon */
	right: -8px;
	top: -8px;
	left: auto; /* Override any left positioning */
	padding: 0 0px 1px 1px;
}

/* ============================================================
   MOBILE RESPONSIVE FIXES
   Override legacy bs.css rules that hide the header on mobile
   ============================================================ */

/* Force header to display on all screen sizes - override bs.css display:none */
.scout #main-header {
    display: block !important;
}

/* Ensure header content displays properly on mobile */
.scout #main-header.originalhdr {
    display: block !important;
    height: auto !important;
    min-height: 60px;
}

/* ============================================================
   ADA COMPLIANCE - Touch Targets (44px minimum)
   ============================================================ */

/* Ensure all interactive elements have minimum touch target size */
.scout .abs-header-actions li {
    min-width: 44px;
    min-height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.scout .abs-mobile-hamburger {
    min-width: 44px;
    min-height: 44px;
    padding: 10px;
}

/* ============================================================
   REDUCED MOTION SUPPORT (ADA)
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    .scout .abs-ai-button-mini,
    .scout .rotating-gradient-btn::before {
        animation: none;
    }

    .scout .abs-mobile-hamburger span {
        transition: none;
    }
}

/* ============================================================
   STICKY HEADER FIX FOR SCOUT PAGES

   IMPORTANT: position: sticky doesn't work reliably when ancestors
   have overflow: hidden/auto (set in bs.css on html/body).

   Solution: Use position: fixed for Scout pages on mobile/tablet.
   This requires adding padding-top to the body to account for
   the fixed header height.
   ============================================================ */
@media (max-width: 991px) {
    /* Enable scrolling on Scout pages with fixed header */
    /* Note: html rule removed - :has() not supported by minifier. Body rule is sufficient. */
    body.scout.scout-page {
        overflow-x: hidden !important;
        overflow-y: auto !important; /* Allow vertical scrolling */
    }

    body.scout.scout-page .wrapper {
        overflow: visible !important;
        height: auto !important;
        min-height: 100vh !important;
    }
}

/* ============================================================
   TABLET BREAKPOINT (max-width: 991px, min-width: 901px)
   - Header height: 73px on Scout page
   - Use position: fixed for reliable header sticking
   - Hide search bar ONLY on Scout page (Scout has its own search input)
   ============================================================ */
@media (max-width: 991px) and (min-width: 901px) {
    /* Add padding to body to account for fixed header */
    body.scout.scout-page {
        padding-top: 73px !important;
    }

    /* Make header FIXED on Scout pages - height 73px */
    body.scout.scout-page #main-header,
    body.scout.scout-page #main-header.originalhdr,
    body.scout.scout-page #main-header.statichdr {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        z-index: 500 !important;
        display: block !important;
        height: 73px !important;
        min-height: 73px !important;
        max-height: 73px !important;
        padding: 0 !important;
        background-color: var(--header-green) !important;
    }

    /* Hide search bar ONLY on Scout page - Scout has its own search input at bottom */
    body.scout.scout-page .abs-header-search {
        display: none !important;
    }

    /* Adjust header layout when search is hidden - ONLY on Scout page */
    body.scout.scout-page .abs-header-container {
        height: 73px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 15px;
    }
}

/* ============================================================
   TABLET/PHONE BREAKPOINT (max-width: 900px)
   - Header height: 70px on Scout page
   - Use position: fixed for reliable header sticking
   - Hide search bar ONLY on Scout page
   ============================================================ */
@media (max-width: 900px) {
    /* Add padding to body to account for fixed header */
    body.scout.scout-page {
        padding-top: 70px !important;
    }

    /* Make header FIXED on Scout pages - height 70px */
    body.scout.scout-page #main-header,
    body.scout.scout-page #main-header.originalhdr,
    body.scout.scout-page #main-header.statichdr {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        z-index: 500 !important;
        display: block !important;
        height: 70px !important;
        min-height: 70px !important;
        max-height: 70px !important;
        padding: 0 !important;
        background-color: var(--header-green) !important;
    }

    /* Hide search bar ONLY on Scout page - Scout has its own search input at bottom */
    body.scout.scout-page .abs-header-search {
        display: none !important;
    }

    /* Adjust header layout when search is hidden - ONLY on Scout page */
    body.scout.scout-page .abs-header-container {
        height: 70px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 15px;
        width: 100%;
        max-width: none;
        margin: 0;
        box-sizing: border-box;
    }
}

/* ============================================================
   MOBILE BREAKPOINT ENHANCEMENTS (max-width: 767px)
   - Header height: 70px on Scout page (search hidden)
   - Content vertically centered
   - Use position: fixed for reliable header sticking
   ============================================================ */
@media (max-width: 767px) {
    /* Add padding to body to account for fixed header */
    body.scout.scout-page {
        padding-top: 70px !important;
    }

    /* Override bs.css hiding the header AND make it FIXED */
    body.scout.scout-page #main-header,
    body.scout.scout-page #main-header.originalhdr,
    body.scout.scout-page #main-header.statichdr {
        display: block !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        z-index: 500 !important;
        height: 70px !important;
        min-height: 70px !important;
        max-height: 70px !important;
        padding: 0 !important;
        background-color: var(--header-green) !important;
    }

    body.scout.scout-page .abs-header-container {
        height: 70px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 15px;
    }

    /* Improve touch targets for action icons */
    .scout .abs-header-actions ul {
        gap: 4px;
    }

    .scout .abs-header-actions li {
        padding: 8px;
    }
}

/* ============================================================
   SMALL MOBILE BREAKPOINT (max-width: 500px)
   - Header height: 54px on Scout page
   - Content vertically centered
   - Use position: fixed for reliable header sticking
   ============================================================ */
    @media (max-width: 500px) {
        /* Add padding to body to account for fixed header */
        body.scout.scout-page {
            padding-top: 54px !important;
        }

    /* Override bs.css hiding the header AND make it FIXED */
    body.scout.scout-page #main-header,
    body.scout.scout-page #main-header.originalhdr,
    body.scout.scout-page #main-header.statichdr {
        display: block !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        z-index: 500 !important;
        height: 54px !important;
        min-height: 54px !important;
        max-height: 54px !important;
        padding: 0 !important;
        background-color: var(--header-green) !important;
    }

    body.scout.scout-page .abs-header-container {
        height: 54px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 10px;
    }

    /* Smaller logo for very small screens */
    .scout .abs-logo img {
        width: 175px;
        height: auto;
    }

    /* Ensure search has adequate padding (on non-Scout pages) */
    .scout .abs-header-search {
        padding: 0px;
    }
}

/* ============================================================
   EXTRA SMALL MOBILE (max-width: 374px) - iPhone SE, etc.
   ============================================================ */
@media (max-width: 374px) {

    .scout .abs-header-actions ul {
        gap: 2px;
    }

    .scout .abs-header-search .main-input {
        padding: 8px 10px 8px 30px;
    }
}

/* ============================================================
   SEARCH AUTOCOMPLETE DROPDOWN - Enhanced Version
   Modern, animated search suggestions with rich interactions
   ============================================================ */

/* Dropdown container with glass morphism effect */
.abs-autocomplete-dropdown {
    position: absolute !important;
    background: linear-gradient(180deg, rgba(40, 40, 45, 0.8) 0%, rgba(30, 30, 35, 0.9) 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 12px !important;
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(255, 255, 255, 0.05) inset,
        0 1px 0 rgba(255, 255, 255, 0.1) inset !important;
    z-index: 9999 !important;
    padding: 6px !important;
    list-style: none !important;
    margin: 6px 0 0 0 !important;
    width: 100% !important;
    max-width: 480px !important;
    max-height: 70vh !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    animation: acDropdownSlideIn 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
    transform-origin: top center !important;
}

/* Modern scrollbar for dropdown (matches Scout page) */
/* Firefox */
.abs-autocomplete-dropdown {
    scrollbar-width: thin !important;
    scrollbar-color: rgba(255, 255, 255, 0.3) transparent !important;
}

/* WebKit (Chrome, Safari, Edge) */
.abs-autocomplete-dropdown::-webkit-scrollbar {
    width: 12px !important;
}

.abs-autocomplete-dropdown::-webkit-scrollbar-track {
    background: transparent !important;
}

.abs-autocomplete-dropdown::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.3) !important;
    border-radius: 6px !important;
    border: 3px solid transparent !important;
    background-clip: content-box !important;
}

.abs-autocomplete-dropdown::-webkit-scrollbar-thumb:hover {
    background-color: rgba(255, 255, 255, 0.5) !important;
}

@keyframes acDropdownSlideIn {
    from {
        opacity: 0;
        transform: translateY(-8px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Individual result items */
.abs-autocomplete-dropdown .ui-menu-item {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    background: transparent !important;
    list-style: none !important;
    animation: acItemFadeIn 0.3s ease both !important;
}

/* Staggered animation delays for each item */
.abs-autocomplete-dropdown .ui-menu-item:nth-child(1) { animation-delay: 0.02s !important; }
.abs-autocomplete-dropdown .ui-menu-item:nth-child(2) { animation-delay: 0.04s !important; }
.abs-autocomplete-dropdown .ui-menu-item:nth-child(3) { animation-delay: 0.06s !important; }
.abs-autocomplete-dropdown .ui-menu-item:nth-child(4) { animation-delay: 0.08s !important; }
.abs-autocomplete-dropdown .ui-menu-item:nth-child(5) { animation-delay: 0.10s !important; }
.abs-autocomplete-dropdown .ui-menu-item:nth-child(6) { animation-delay: 0.12s !important; }
.abs-autocomplete-dropdown .ui-menu-item:nth-child(7) { animation-delay: 0.14s !important; }
.abs-autocomplete-dropdown .ui-menu-item:nth-child(8) { animation-delay: 0.16s !important; }
.abs-autocomplete-dropdown .ui-menu-item:nth-child(9) { animation-delay: 0.18s !important; }
.abs-autocomplete-dropdown .ui-menu-item:nth-child(10) { animation-delay: 0.20s !important; }
.abs-autocomplete-dropdown .ui-menu-item:nth-child(n+11) { animation-delay: 0.22s !important; }

@keyframes acItemFadeIn {
    from {
        opacity: 0;
        transform: translateX(-8px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Result item link/wrapper */
.abs-autocomplete-dropdown .ui-menu-item-wrapper,
.abs-autocomplete-dropdown .ui-menu-item a {
    display: flex !important;
    align-items: center !important;
    padding: 6px 10px !important;
    min-height: 44px !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    color: rgba(255, 255, 255, 0.9) !important;
    text-decoration: none !important;
    background: transparent !important;
    cursor: pointer !important;
    font-family: var(--font-jost, "Jost", sans-serif) !important;
    border-radius: 8px !important;
    margin: 1px 0 !important;
    border: 1px solid transparent !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
    position: relative !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

/* Subtle gradient overlay on hover */
.abs-autocomplete-dropdown .ui-menu-item-wrapper::before,
.abs-autocomplete-dropdown .ui-menu-item a::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(90deg, rgba(212, 160, 23, 0.15) 0%, rgba(212, 160, 23, 0.05) 50%, transparent 100%) !important;
    opacity: 0 !important;
    transition: opacity 0.2s ease !important;
    pointer-events: none !important;
}

/* No bottom border - using spacing instead */
.abs-autocomplete-dropdown .ui-menu-item:last-child .ui-menu-item-wrapper,
.abs-autocomplete-dropdown .ui-menu-item:last-child a {
    border-bottom: none !important;
}

/* Hover and focus states */
.abs-autocomplete-dropdown .ui-menu-item-wrapper:hover,
.abs-autocomplete-dropdown .ui-menu-item a:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    transform: translateX(4px) !important;
}

.abs-autocomplete-dropdown .ui-menu-item-wrapper:hover::before,
.abs-autocomplete-dropdown .ui-menu-item a:hover::before {
    opacity: 1 !important;
}

/* Keyboard navigation focus state */
.abs-autocomplete-dropdown .ui-menu-item-wrapper.ui-state-active,
.abs-autocomplete-dropdown .ui-menu-item a.ui-state-hover,
.abs-autocomplete-dropdown .ui-menu-item a.ui-state-focus,
.abs-autocomplete-dropdown .ui-state-hover,
.abs-autocomplete-dropdown .ui-state-focus,
.abs-autocomplete-dropdown .ui-state-active {
    background: rgba(212, 160, 23, 0.15) !important;
    border-color: rgba(212, 160, 23, 0.3) !important;
    color: #fff !important;
    font-weight: 400 !important;
    transform: translateX(4px) !important;
    box-shadow: 0 0 0 1px rgba(212, 160, 23, 0.2) inset !important;
}

/* Matched text highlighting with glow effect */
.abs-autocomplete-dropdown .ui-menu-item-wrapper b,
.abs-autocomplete-dropdown .ui-menu-item a b {
    color: #f5b800 !important;
    font-weight: 600 !important;
    text-shadow: 0 0 8px rgba(245, 184, 0, 0.4) !important;
}

/* Thumbnail container - square for compact display */
.abs-autocomplete-dropdown .suggestthumbnail {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-right: 10px !important;
    flex-shrink: 0 !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 4px !important;
    overflow: hidden !important;
    background: rgba(0, 0, 0, 0.3) !important;
    box-shadow:
        0 2px 6px rgba(0, 0, 0, 0.3),
        0 0 0 1px rgba(255, 255, 255, 0.05) !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

/* Thumbnail hover effect */
.abs-autocomplete-dropdown .ui-menu-item-wrapper:hover .suggestthumbnail,
.abs-autocomplete-dropdown .ui-menu-item a:hover .suggestthumbnail,
.abs-autocomplete-dropdown .ui-state-active .suggestthumbnail {
    transform: scale(1.05) !important;
    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.4),
        0 0 0 1px rgba(212, 160, 23, 0.2) !important;
}

.abs-autocomplete-dropdown .suggestthumbnail img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 4px !important;
    transition: transform 0.3s ease !important;
}

/* Text content */
.abs-autocomplete-dropdown .suggesttext {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    min-width: 0 !important;
    line-height: 1.25 !important;
    gap: 1px !important;
}

/* Title truncation - single line with ellipsis */
.abs-autocomplete-dropdown .suggest-title {
    display: block !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
}

/* Format badge (Unabridged/Abridged) */
.abs-autocomplete-dropdown .suggest-format {
    display: inline-block !important;
    font-size: 10px !important;
    font-weight: 500 !important;
    color: rgba(255, 255, 255, 0.5) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

/* Type labels with pill styling */
.abs-autocomplete-dropdown .ss-author-label,
.abs-autocomplete-dropdown .ss-narrator-label,
.abs-autocomplete-dropdown .ss-publisher-label {
    display: inline-flex !important;
    align-items: center !important;
    padding: 2px 6px !important;
    font-size: 9px !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.4px !important;
    border-radius: 10px !important;
    margin-left: 8px !important;
    flex-shrink: 0 !important;
}

.abs-autocomplete-dropdown .ss-author-label {
    background: rgba(147, 112, 219, 0.2) !important;
    color: #b39ddb !important;
    border: 1px solid rgba(147, 112, 219, 0.3) !important;
}

.abs-autocomplete-dropdown .ss-narrator-label {
    background: rgba(77, 182, 172, 0.2) !important;
    color: #80cbc4 !important;
    border: 1px solid rgba(77, 182, 172, 0.3) !important;
}

.abs-autocomplete-dropdown .ss-publisher-label {
    background: rgba(255, 138, 101, 0.2) !important;
    color: #ffab91 !important;
    border: 1px solid rgba(255, 138, 101, 0.3) !important;
}

/* Author/Narrator/Publisher result icons */
.abs-autocomplete-dropdown .ss-type-icon {
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-right: 10px !important;
    flex-shrink: 0 !important;
    font-size: 14px !important;
}

.abs-autocomplete-dropdown .ss-author-icon {
    background: rgba(147, 112, 219, 0.15) !important;
    color: #b39ddb !important;
    border: 1px solid rgba(147, 112, 219, 0.3) !important;
}

.abs-autocomplete-dropdown .ss-narrator-icon {
    background: rgba(77, 182, 172, 0.15) !important;
    color: #80cbc4 !important;
    border: 1px solid rgba(77, 182, 172, 0.3) !important;
}

.abs-autocomplete-dropdown .ss-publisher-icon {
    background: rgba(255, 138, 101, 0.15) !important;
    color: #ffab91 !important;
    border: 1px solid rgba(255, 138, 101, 0.3) !important;
}

/* Keyboard hint at bottom */
.abs-autocomplete-dropdown::after {
    content: '↑↓ Navigate  ↵ Select  Esc Close' !important;
    display: block !important;
    padding: 6px 10px 4px !important;
    margin-top: 4px !important;
    font-size: 10px !important;
    color: rgba(255, 255, 255, 0.3) !important;
    text-align: center !important;
    border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
    letter-spacing: 0.3px !important;
}

/* Mobile optimizations */
@media (max-width: 767px) {
    .abs-autocomplete-dropdown {
        /* Constrain width with comfortable margins - jQuery UI sets left position */
        left: 16px !important;
        width: calc(100vw - 32px) !important;
        max-width: calc(100vw - 32px) !important;
        border-radius: 10px !important;
        padding: 4px !important;
        margin: 4px 0 0 0 !important;
    }

    .abs-autocomplete-dropdown .ui-menu-item-wrapper,
    .abs-autocomplete-dropdown .ui-menu-item a {
        padding: 8px !important;
        min-height: 44px !important;
        border-radius: 6px !important;
    }

    .abs-autocomplete-dropdown .suggestthumbnail {
        width: 32px !important;
        height: 32px !important;
        margin-right: 8px !important;
    }

    .abs-autocomplete-dropdown .ss-type-icon {
        width: 32px !important;
        height: 32px !important;
        margin-right: 8px !important;
        font-size: 12px !important;
    }

    .abs-autocomplete-dropdown::after {
        content: 'Tap to select' !important;
        padding: 6px 10px 4px !important;
    }
}

/* Loading state */
.abs-autocomplete-dropdown.abs-ac-loading::before {
    content: '' !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 24px !important;
    height: 24px !important;
    margin: -12px 0 0 -12px !important;
    border: 2px solid rgba(255, 255, 255, 0.1) !important;
    border-top-color: var(--btn-yellow-bg, #d4a017) !important;
    border-radius: 50% !important;
    animation: acSpinner 0.6s linear infinite !important;
    z-index: 10 !important;
}

.abs-autocomplete-dropdown.abs-ac-loading .ui-menu-item {
    opacity: 0.3 !important;
    pointer-events: none !important;
}

@keyframes acSpinner {
    to { transform: rotate(360deg); }
}

/* No results message */
.abs-autocomplete-dropdown .abs-ac-no-results {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.abs-autocomplete-dropdown .abs-ac-no-results-content {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    padding: 20px 16px !important;
    color: rgba(255, 255, 255, 0.5) !important;
    font-size: 14px !important;
    font-family: var(--font-jost, "Jost", sans-serif) !important;
}

.abs-autocomplete-dropdown .abs-ac-no-results-content i {
    font-size: 18px !important;
    opacity: 0.6 !important;
}

.abs-autocomplete-dropdown .abs-ac-no-results:hover {
    background: transparent !important;
    cursor: default !important;
}

/* Recent searches header */
.abs-autocomplete-dropdown .abs-ac-recent-header {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    pointer-events: none !important;
}

.abs-autocomplete-dropdown .abs-ac-header-content {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 8px 12px 6px !important;
    color: rgba(255, 255, 255, 0.4) !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    font-family: var(--font-jost, "Jost", sans-serif) !important;
}

.abs-autocomplete-dropdown .abs-ac-header-content i {
    font-size: 12px !important;
}

/* CSS fallback for icons - ensures they display even if FontAwesome JS fails */
.abs-autocomplete-dropdown .abs-ac-header-content i.fas.fa-clock::before {
    content: "\f017" !important;
    font-family: "Font Awesome 5 Free", "FontAwesome" !important;
    font-weight: 900 !important;
}
.abs-autocomplete-dropdown .abs-ac-recent-item i.fas.fa-history::before {
    content: "\f1da" !important;
    font-family: "Font Awesome 5 Free", "FontAwesome" !important;
    font-weight: 900 !important;
}
.abs-autocomplete-dropdown .abs-ac-clear-recent i.fas.fa-trash::before {
    content: "\f1f8" !important;
    font-family: "Font Awesome 5 Free", "FontAwesome" !important;
    font-weight: 900 !important;
}
.abs-autocomplete-dropdown .abs-ac-view-all i.fas.fa-arrow-right::before {
    content: "\f061" !important;
    font-family: "Font Awesome 5 Free", "FontAwesome" !important;
    font-weight: 900 !important;
}
.abs-autocomplete-dropdown .abs-ac-no-results-content i.fas.fa-search::before {
    content: "\f002" !important;
    font-family: "Font Awesome 5 Free", "FontAwesome" !important;
    font-weight: 900 !important;
}

/* Recent search items */
.abs-autocomplete-dropdown .abs-ac-recent-item a {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 10px 12px !important;
    color: rgba(255, 255, 255, 0.8) !important;
    font-size: 14px !important;
    text-decoration: none !important;
    border-radius: 8px !important;
    transition: all 0.2s ease !important;
}

.abs-autocomplete-dropdown .abs-ac-recent-item a i {
    color: rgba(255, 255, 255, 0.4) !important;
    font-size: 14px !important;
}

.abs-autocomplete-dropdown .abs-ac-recent-item a:hover,
.abs-autocomplete-dropdown .abs-ac-recent-item.ui-state-active a {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #fff !important;
}

.abs-autocomplete-dropdown .abs-ac-recent-item a:hover i {
    color: var(--btn-yellow-bg, #d4a017) !important;
}

/* Clear recent searches */
.abs-autocomplete-dropdown .abs-ac-clear-recent {
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    margin-top: 4px !important;
    padding-top: 4px !important;
}

.abs-autocomplete-dropdown .abs-ac-clear-recent a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 10px 12px !important;
    color: rgba(255, 255, 255, 0.4) !important;
    font-size: 12px !important;
    text-decoration: none !important;
    border-radius: 8px !important;
    transition: all 0.2s ease !important;
}

.abs-autocomplete-dropdown .abs-ac-clear-recent a i {
    font-size: 11px !important;
}

.abs-autocomplete-dropdown .abs-ac-clear-recent a:hover {
    background: rgba(255, 100, 100, 0.1) !important;
    color: #ff8a8a !important;
}

/* View all results link */
.abs-autocomplete-dropdown .abs-ac-view-all {
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    margin-top: 4px !important;
    padding-top: 4px !important;
}

.abs-autocomplete-dropdown .abs-ac-view-all a {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 12px !important;
    color: var(--btn-yellow-bg, #d4a017) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    border-radius: 8px !important;
    transition: all 0.2s ease !important;
}

.abs-autocomplete-dropdown .abs-ac-view-all a i {
    font-size: 12px !important;
    transition: transform 0.2s ease !important;
}

.abs-autocomplete-dropdown .abs-ac-view-all a:hover {
    background: rgba(212, 160, 23, 0.15) !important;
    color: #f5c842 !important;
}

.abs-autocomplete-dropdown .abs-ac-view-all a:hover i {
    transform: translateX(3px) !important;
}

/* App User Mode styles moved to dedicated appuser.css */