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

   EXTRACT LABS CUSTOM HEADER — mobile.css  (≤ 1100px)

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

@media (max-width: 1100px) {

    /* ── Header bar ───────────────────────────────────────── */

    .elab-header-inner {

        display: grid;

        grid-template-columns: 44px minmax(0, 1fr);

        align-items: center;

        gap: 12px;

        width: min(100%, calc(100vw - 28px));

        min-height: 60px;

        margin: 0 auto;

    }

    .elab-header-center,

    .elab-header-account {

        display: none !important;

    }

    .logo-container {

        justify-content: flex-start;

        min-width: 0;

        width: 100%;

    }

    a.custom-logo-link{

        margin:0 auto;

        width:80% !important;

    }

    .logo-container img,

    .logo-container .custom-logo {

        /* min-width:0 lets the <img> shrink as a flex item — WebKit/iOS

           otherwise grows it to intrinsic width and ignores max-height. */

        min-width: 0 !important;

        max-height: 40px !important;

        max-width: min(200px, calc(100vw - 96px));

    }

    /* ── Hamburger ────────────────────────────────────────── */

    .elab-mobile-toggle {

        display: inline-flex !important;

        width: 40px;

        height: 40px;

        align-items: center;

        justify-content: center;

        flex-direction: column;

        gap: 5px;

        border-radius: 7px !important;

        border: none !important;

        background: transparent !important;

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

        padding: 0 !important;

        margin: 0 !important;

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

        cursor: pointer;

    }

    .elab-mobile-toggle:hover,

    .elab-mobile-toggle[aria-expanded="true"] {

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

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

        border: none !important;

    }

    .elab-mobile-toggle__bar {

        display: block;

        width: 20px;

        height: 2px;

        border-radius: 999px;

        background: currentColor;

        transition: transform var(--elab-transition), opacity var(--elab-transition), width var(--elab-transition);

    }

    .elab-mobile-toggle[aria-expanded="true"] .elab-mobile-toggle__bar:nth-child(1) {

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

    }

    .elab-mobile-toggle[aria-expanded="true"] .elab-mobile-toggle__bar:nth-child(2) {

        opacity: 0;

        width: 0;

    }

    .elab-mobile-toggle[aria-expanded="true"] .elab-mobile-toggle__bar:nth-child(3) {

        transform: translateY(-7px) rotate(-45deg);

    }

    /* ── Overlay ──────────────────────────────────────────── */

    .elab-mobile-overlay {

        position: fixed;

        inset: 0;

        z-index: 9998;

        background: rgba(0, 0, 0, 0.36);

        opacity: 0;

        visibility: hidden;

        backdrop-filter: blur(2px);

        -webkit-backdrop-filter: blur(2px);

        transition: opacity 240ms ease, visibility 240ms ease;

    }

    .elab-mobile-overlay.is-open {

        opacity: 1;

        visibility: visible;

    }

    /* ── Drawer ───────────────────────────────────────────── */

    .elab-mobile-drawer {

        position: fixed;

        top: 0;

        left: 0;

        z-index: 9999;

        display: grid;

        grid-template-rows: auto auto minmax(0, 1fr) auto;

        width: min(84vw, 360px);

        height: 100vh;

        height: 100dvh;

        background: var(--elab-white);

        box-shadow: 4px 0 36px rgba(0, 0, 0, 0.14);

        transform: translateX(-106%);

        visibility: hidden;

        overflow-x: hidden;

        transition: transform 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94), visibility 300ms ease;

    }

    .elab-mobile-drawer.is-open {

        transform: translateX(0);

        visibility: visible;

    }

    body.elab-mobile-menu-open {

        overflow: hidden;

        touch-action: none;

    }

    .elab-header-wrap {

        max-width: 100vw;

        overflow-x: hidden;

    }

    /* ── Drawer header ────────────────────────────────────── */

    .elab-mobile-drawer__header {

        display: flex;

        align-items: center;

        justify-content: space-between;

        min-height: 54px;

        padding: 10px 16px;

        border-bottom: 1px solid #e4e4e0;

        background: #f5f5f3;

    }

    .elab-mobile-drawer__title {

        color: var(--elab-black);

        font-size: 11px;

        font-weight: 900;

        letter-spacing: 0.12em;

        text-transform: uppercase;

    }

    .elab-mobile-drawer__close {

        display: inline-flex !important;

        width: 30px;

        height: 30px;

        align-items: center;

        justify-content: center;

        border-radius: 6px !important;

        border: none !important;

        background: transparent !important;

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

        font-size: 20px;

        line-height: 1;

        padding: 0 !important;

        margin: 0 !important;

        cursor: pointer;

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

    }

    .elab-mobile-drawer__close:hover {

        background: rgba(62, 107, 100, 0.12) !important;

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

        border: none !important;

    }

    /* ── Search ───────────────────────────────────────────── */

    .elab-header-search--mobile {

        padding: 10px 14px;

        border-bottom: 1px solid #e4e4e0;

        background: #f5f5f3;

    }

    /* ── Nav scroll area ──────────────────────────────────── */

    /* Sage green shows through the 3px gaps between rows */

    .main-mobile {

        min-height: 0;

        overflow-y: auto;

        overflow-x: hidden;

        -webkit-overflow-scrolling: touch;

        background: #e8edeb;

    }

    /* ── List ─────────────────────────────────────────────── */

    .main-mobile__list {

        display: flex;

        flex-direction: column;

        gap: 3px;

        margin: 0;

        padding: 8px 12px 12px;

        width: 100%;

    }

    /* ── Shop All — flat primary link, top of list ────────── */

    .main-mobile__item--shop-all {

        margin: 0 0 6px;

        padding: 0;

    }

    .main-mobile__shop-all {

        display: flex !important;

        width: 100% !important;

        align-items: center;

        justify-content: flex-start;

        gap: 10px;

        padding: 12px !important;

        margin: 0 !important;

        border: none !important;

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

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

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

        font-size: 11px !important;

        font-weight: 900 !important;

        letter-spacing: 0.10em;

        line-height: 1.2 !important;

        text-transform: uppercase;

        text-decoration: none !important;

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

    }

    .main-mobile__shop-all:hover,

    .main-mobile__shop-all:focus {

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

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

        text-decoration: none !important;

    }

    .main-mobile__shop-all__icon {

        display: inline-flex;

        flex: 0 0 auto;

        line-height: 0;

    }

    .main-mobile__shop-all__icon svg {

        display: block;

    }

    /* ── Accordion item — transparent, no border, no radius ── */

    .main-mobile__item {

        margin: 0;

        padding: 0;

        background: transparent;

        border: none !important;

        border-radius: 0 !important;

        overflow: visible;

    }

    /* ── Toggle — kill borders at every possible state ────── */

    .main-mobile__dropdown-toggle,

    .main-mobile__dropdown-toggle:hover,

    .main-mobile__dropdown-toggle:focus,

    .main-mobile__dropdown-toggle:active,

    .main-mobile__dropdown-toggle[aria-expanded="true"],

    .main-mobile__dropdown-toggle[aria-expanded="true"]:hover {

        border: none !important;

        outline: none !important;

        box-shadow: none !important;

        -webkit-appearance: none !important;

        appearance: none !important;

        border-radius: 0 !important;

    }

    .main-mobile__dropdown-toggle {

        position: relative;

        display: flex !important;

        width: 100% !important;

        align-items: center;

        justify-content: space-between;

        gap: 10px;

        padding: 11px 12px !important;

        margin: 0 !important;

        background: transparent !important;

        background-color: transparent !important;

        color: #2a3d38 !important;

        font-size: 11px !important;

        font-weight: 900 !important;

        letter-spacing: 0.10em;

        line-height: 1.2 !important;

        text-transform: uppercase;

        text-align: left;

        text-decoration: none !important;

        cursor: pointer;

        transition: background-color 160ms ease, color 160ms ease !important;

    }

    /* Hover — opacity darkening only, no color shift */

    .main-mobile__dropdown-toggle:hover {

        background: rgba(46, 80, 73, 0.10) !important;

        color: #2a3d38 !important;

    }

    /* Active / open — solid accent green */

    .main-mobile__dropdown-toggle[aria-expanded="true"] {

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

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

    }

    /* Chevron — CSS triangle so reset.css can never touch it */

    .main-mobile__dropdown-toggle::after {

        content: "";

        flex: 0 0 auto;

        flex-shrink: 0;

        width: 0;

        height: 0;

        border-left: 4px solid transparent;

        border-right: 4px solid transparent;

        border-top: 5px solid currentColor;

        opacity: 0.45;

        transition: transform 240ms cubic-bezier(0.25, 0.46, 0.45, 0.94),

                    opacity var(--elab-transition);

    }

    .main-mobile__dropdown-toggle:hover::after {

        opacity: 0.75;

    }

    .main-mobile__dropdown-toggle[aria-expanded="true"]::after {

        transform: rotate(180deg);

        opacity: 1;

    }



    /* Childless top-level item is a link, not a button, and keeps the same

       carrot as the accordion parents (static — never rotates, no panel). It

       also matches their typography: the global button reset in header.css

       (.elab-header-wrap button { font: inherit }) outranks

       .main-mobile__dropdown-toggle on the <button> parents, so they inherit

       the theme font. The <a> link is not matched by that reset, so we mirror

       the same inheritance here to keep the two visually identical. */

    .main-mobile__dropdown-link {

        font-family: inherit !important;

        font-size: inherit !important;

        font-weight: inherit !important;

        line-height: inherit !important;

        color: inherit !important;

        text-transform: none !important;

    }
    .main-mobile__dropdown-link--standalone::after {
    content: none !important;
    display: none !important;
    border: 0 !important;
}

    /* ── Panel — animated slide ───────────────────────────── */

    .main-mobile__dropdown-list {

        display: grid;

        gap: 0;

        margin: 0;

        padding: 0;

        background: #eaf2f0;

        overflow: hidden;

        max-height: 0;

        opacity: 0;

        transition: max-height 280ms cubic-bezier(0.25, 0.46, 0.45, 0.94),

                    opacity 200ms ease;

    }

    .main-mobile__dropdown-list.is-open {

        max-height: 800px;

        opacity: 1;

    }

    .main-mobile__dropdown-list[hidden] {

        display: none;

    }

    /* ── Sub-link items — divider line between each ───────── */

    .main-mobile__dropdown-item {

        margin: 0;

        padding: 0;

        border-bottom: 1px solid rgba(62, 107, 100, 0.10);

    }

    .main-mobile__dropdown-item:last-child {

        border-bottom: none;

    }

    /* ── Sub-links — full-width tap target, no pills ─────── */

    .main-mobile__link {

        display: flex !important;

        width: 100% !important;

        align-items: center;

        padding: 11px 20px !important;

        margin: 0 !important;

        min-height: 40px;

        border: none !important;

        border-radius: 0 !important;

        background: transparent !important;

        color: #2e5049 !important;

        font-size: 13.5px !important;

        font-weight: 400 !important;

        line-height: 1.3 !important;

        text-decoration: none !important;

        transition: background-color 140ms ease, color 140ms ease !important;

    }

    .main-mobile__link:hover {

        background: rgba(62, 107, 100, 0.10) !important;

        color: #1e3832 !important;

        text-decoration: none !important;

    }

    /* Featured item: same look as the other accordions; opens only on tap. */

    .main-mobile__item--featured .main-mobile__dropdown-toggle {

        /* intentionally no special treatment */

    }

    /* ── Account CTA ──────────────────────────────────────── */

    .elab-mobile-drawer__account {

        padding: 12px 14px calc(12px + env(safe-area-inset-bottom));

        border-top: 1px solid #e4e4e0;

        background: var(--elab-white);

    }

    .elab-account-link--mobile {

        display: flex !important;

        width: 100%;

        align-items: center;

        justify-content: center;

        gap: 8px;

        min-height: 44px;

        border: 1.5px solid var(--elab-accent) !important;

        border-radius: 7px !important;

        background: transparent !important;

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

        font-size: 12px !important;

        font-weight: 900 !important;

        letter-spacing: 0.07em;

        text-transform: uppercase;

        text-align: center;

        text-decoration: none !important;

        padding: 10px 16px !important;

        margin: 0 !important;

        cursor: pointer;

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

    }

    .elab-account-link--mobile:hover {

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

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

        text-decoration: none !important;

    }

}

/* ── Hide mobile on desktop ───────────────────────────────── */

@media (min-width: 1101px) {

    .elab-mobile-toggle,

    .elab-mobile-drawer,

    .elab-mobile-overlay {

        display: none !important;

    }

}