/* ============================================================


   EXTRACT LABS CUSTOM HEADER — base.css


   Overrides Elementor reset.css aggressively where needed.


   All rules scoped to .elab-header-wrap to avoid bleed.


   ============================================================ */


:root {


    --elab-accent:        #3e6b64;


    --elab-accent-hover:  #2e5049;


    --elab-accent-light:  #eaf2f0;


    --elab-black:         #1a1a1a;


    --elab-text:          #3a3a3a;


    --elab-muted:         #7a7a7a;


    --elab-white:         #fff;


    --elab-border:        rgba(0, 0, 0, 0.09);


    --elab-border-strong: rgba(62, 107, 100, 0.30);


    --elab-shadow:        0 20px 50px rgba(0, 0, 0, 0.11), 0 4px 14px rgba(0, 0, 0, 0.06);


    --elab-shadow-sm:     0 6px 20px rgba(0, 0, 0, 0.08);


    --elab-radius:        10px;


    --elab-radius-sm:     7px;


    --elab-transition:    160ms ease;


    --elab-transition-lg: 280ms cubic-bezier(0.25, 0.46, 0.45, 0.94);


}


/* ── Scope reset ────────────────────────────────────────────── */


.elab-header-wrap,


.elab-header-wrap * {


    box-sizing: border-box;


}


.elab-header-wrap {


    position: relative;


    z-index: 50;


    width: 100%;


    background: var(--elab-white);


    color: var(--elab-text);


    font-family: inherit;


    border-bottom: 1px solid var(--elab-border);


}


.elab-header-wrap a {


    color: inherit;


    text-decoration: none;


    background-color: transparent; /* reset.css sets transparent but let's be explicit */


}


.elab-header-wrap a:hover,


.elab-header-wrap a:active {


    color: inherit;


    text-decoration: none;


}


.elab-header-wrap ul,


.elab-header-wrap li {


    list-style: none;


    margin: 0;


    padding: 0;


    /* background: transparent; */


    border: 0;


    font-size: 100%;


    outline: 0;


    vertical-align: baseline;


}


.elab-header-wrap img,


.elab-header-wrap svg {


    display: block;


}


/* ── Button hard-reset (fights reset.css) ───────────────────── */


/*


   reset.css applies:


     border: 1px solid #c36  ← the pink border


     color: #c36              ← pink text


     background-color: transparent


     border-radius: 3px


     padding: .5rem 1rem


   We must override ALL of these with high specificity.


*/


.elab-header-wrap button,


.elab-header-wrap [type="button"],


.elab-header-wrap [type="submit"],


.elab-header-wrap input[type="button"],


.elab-header-wrap input[type="submit"],


.main-mobile__dropdown-toggle main-mobile__dropdown-link {


    /* Kill every reset.css button rule */


    appearance: none;


    -webkit-appearance: button;


    border: none !important;


    border-radius: 0 !important;


    background: transparent !important;


    background-color: transparent !important;


    box-shadow: none !important;


    color: inherit !important;


    cursor: pointer;


    display: inline-flex;


    font: inherit !important;


    font-size: inherit !important;


    font-weight: inherit !important;


    line-height: inherit !important;


    margin: 0 !important;


    padding: 0;


    text-align: inherit;


    text-transform: none;


    text-decoration: none !important;


    user-select: none;


    width: auto;


    white-space: normal;


    transition: none;


    outline: none;


}


.elab-header-wrap button:hover,


.elab-header-wrap button:focus,


.elab-header-wrap [type="button"]:hover,


.elab-header-wrap [type="button"]:focus,


.elab-header-wrap [type="submit"]:hover,


.elab-header-wrap [type="submit"]:focus {


    background: transparent !important;


    background-color: transparent !important;


    color: inherit !important;


    text-decoration: none !important;


    border: none !important;


}


/* ── Search input — fights reset.css input styles ───────────── */


.elab-header-wrap input[type="search"],


.elab-header-search__input {


    /* reset.css: border: 1px solid #666, padding, width: 100% */


    border: 1.5px solid transparent !important;


    border-radius: 999px !important;


    background: #f2f2f0 !important;


    color: var(--elab-text) !important;


    font-size: 13.5px !important;


    font-weight: 400 !important;


    line-height: 1.2 !important;


    padding: 9px 14px 9px 38px !important;


    width: 100% !important;


    min-height: 38px;


    transition: border-color var(--elab-transition), background-color var(--elab-transition), box-shadow var(--elab-transition) !important;


    -webkit-appearance: textfield;


    outline-offset: -2px;


    box-shadow: none !important;


}


.elab-header-wrap input[type="search"]::placeholder,


.elab-header-search__input::placeholder {


    color: var(--elab-muted);


}


.elab-header-wrap input[type="search"]:hover,


.elab-header-search__input:hover {


    border-color: rgba(62, 107, 100, 0.25) !important;


    background: var(--elab-white) !important;


}


.elab-header-wrap input[type="search"]:focus,


.elab-header-search__input:focus {


    border-color: var(--elab-accent) !important;


    background: var(--elab-white) !important;


    box-shadow: 0 0 0 3px rgba(62, 107, 100, 0.10) !important;


    outline: none;


}


/* ── Search icon (CSS-drawn magnifier) ──────────────────────── */


.elab-header-search {


    position: relative;


    width: 100%;


}


.elab-header-search::before {


    content: "";


    position: absolute;


    left: 14px;


    top: 50%;


    width: 12px;


    height: 12px;


    border: 1.75px solid var(--elab-muted);


    border-radius: 50%;


    transform: translateY(-50%);


    pointer-events: none;


    z-index: 1;


}


.elab-header-search::after {


    content: "";


    position: absolute;


    left: 24px;


    top: 50%;


    width: 6px;


    height: 1.75px;


    background: var(--elab-muted);


    border-radius: 2px;


    transform: translateY(4px) rotate(45deg);


    pointer-events: none;


    z-index: 1;


}


/* ── Screen reader utility ──────────────────────────────────── */


.elab-header-wrap .screen-reader-text {


    position: absolute;


    width: 1px;


    height: 1px;


    padding: 0;


    margin: -1px;


    overflow: hidden;


    clip: rect(0, 0, 0, 0);


    white-space: nowrap;


    border: 0;


}


/* ── Logo ───────────────────────────────────────────────────── */


.logo-container {


    display: flex !important;


    align-items: center;


    flex: 0 0 auto;


    min-width: 0;


    opacity: 1 !important;


    visibility: visible !important;


    width: 20%;


}


.logo-container .custom-logo-link {


    display: inline-flex !important;


    align-items: center;


    flex: 0 0 auto;


    line-height: 0;


    opacity: 1 !important;


    visibility: visible !important;


    width: 100%;


    height: auto !important;


}


.logo-container img,


.logo-container .custom-logo {


    display: block !important;


    height: auto !important;


    max-height: 46px;


    max-width: 100%;


    opacity: 1 !important;


    visibility: visible !important;


    width: auto !important;


}


/* ── Account link ───────────────────────────────────────────── */


.elab-account-link {


    display: inline-flex;


    align-items: center;


    gap: 8px;


    color: var(--elab-text) !important;


    font-size: 13.5px;


    font-weight: 700;


    line-height: 1.15;


    text-decoration: none !important;


    white-space: nowrap;


    transition: color var(--elab-transition);


    border: none !important;


    background: transparent !important;


    padding: 0 !important;


}


.elab-account-link:hover,


.elab-account-link:active {


    color: var(--elab-accent) !important;


    text-decoration: none !important;


    background: transparent !important;


}


.elab-account-link__icon {


    display: inline-flex;


    color: currentColor;


}


/* ── Focus styles ───────────────────────────────────────────── */


.elab-nav__link:focus-visible,


.elab-nav__trigger:focus-visible,


.elab-account-link:focus-visible,


.elab-mega-menu a:focus-visible,


.elab-simple-dropdown a:focus-visible,


.elab-benefit-tile-menu a:focus-visible,


.main-mobile__dropdown-toggle:focus-visible,


.main-mobile__link:focus-visible,


.elab-mobile-toggle:focus-visible,


.elab-mobile-drawer__close:focus-visible,


.elab-header-search__input:focus-visible {


    outline: 2px solid var(--elab-accent) !important;


    outline-offset: 3px !important;


}


/* ── Algolia autocomplete dropdown ─────────────────────────── */


.elab-header-search {


    position: relative;


    z-index: 9999;


    isolation: isolate;


}


.elab-search-dropdown {


    position: absolute;


    top: calc(100% + 6px);


    left: 0;


    right: 0;


    z-index: 10000;


    isolation: isolate;


    background: var(--elab-white);


    border: 1px solid var(--elab-border);


    border-radius: var(--elab-radius);


    box-shadow: var(--elab-shadow);


    list-style: none;


    margin: 0;


    padding: 4px 0;


    max-height: 380px;


    overflow-y: auto;


    overscroll-behavior: contain;


}


.elab-search-dropdown[hidden] {


    display: none;


}


/* Single result row */


.elab-search-dropdown__item {


    display: flex;


    align-items: center;


    gap: 10px;


    padding: 8px 12px;


    cursor: pointer;


    transition: background var(--elab-transition);


    border-radius: 0;


}


.elab-search-dropdown__item:hover,


.elab-search-dropdown__item.is-active {


    background: var(--elab-accent-light);


}


/* Thumbnail */


.elab-search-dropdown__thumb {


    flex: 0 0 40px;


    width: 40px;


    height: 40px;


    object-fit: contain;


    border-radius: var(--elab-radius-sm);


    border: 1px solid var(--elab-border);


    background: #f7f7f5;


}


.elab-search-dropdown__thumb--placeholder {


    display: block;


    background: #f0f0ee


        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23bbb' stroke-width='1.5'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.5'/%3E%3Cpath d='M21 15l-5-5L5 21'/%3E%3C/svg%3E")


        center / 16px no-repeat;


}


/* Text block */


.elab-search-dropdown__info {


    display: flex;


    flex-direction: column;


    gap: 2px;


    min-width: 0;


}


.elab-search-dropdown__name {


    font-size: 13.5px;


    font-weight: 500;


    color: var(--elab-black);


    white-space: nowrap;


    overflow: hidden;


    text-overflow: ellipsis;


}


.elab-search-dropdown__name mark {


    background: transparent;


    color: var(--elab-accent);


    font-weight: 700;


}


.elab-search-dropdown__meta {


    display: flex;


    align-items: center;


    gap: 6px;


}


.elab-search-dropdown__type {


    font-size: 11px;


    color: var(--elab-muted);


    text-transform: uppercase;


    letter-spacing: 0.04em;


}


.elab-search-dropdown__price {


    font-size: 12px;


    font-weight: 600;


    color: var(--elab-accent);


}


/* Empty state */


.elab-search-dropdown__empty {


    padding: 12px 14px;


    font-size: 13px;


    color: var(--elab-muted);


    text-align: center;


}


.elab-search-dropdown__empty strong {


    color: var(--elab-text);


}


/* Mobile: dropdown can be wider than the mobile drawer search input */


#elab-mobile-search .elab-search-dropdown {


    left: 0;


    right: 0;


}


/* ── Reduced motion ─────────────────────────────────────────── */


@media (prefers-reduced-motion: reduce) {


    .elab-header-wrap *,


    .elab-header-wrap *::before,


    .elab-header-wrap *::after {


        animation-duration: 0.001ms !important;


        animation-iteration-count: 1 !important;


        transition-duration: 0.001ms !important;


    }


}