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


   EXTRACT LABS CUSTOM HEADER — desktop.css  (≥ 1101px)


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


@media (min-width: 1101px) {


    /* ── Header layout ────────────────────────────────────── */


    .elab-header-inner {


        display: flex;


        /* display: grid; */


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


        align-items: center;


        gap: 24px;


        width: min(1400px, calc(100vw - 48px));


        min-height: 76px;


        margin: 0 auto;


        padding: 0;


    }


    .elab-mobile-toggle,


    .elab-mobile-drawer,


    .elab-mobile-overlay {


        display: none !important;


    }


    /* Center column: search above nav */


    .elab-header-center {


        display: grid;


        align-items: center;


        gap: 6px;


        min-width: 0;


    }


    .elab-header-search--desktop {


        max-width: 640px;


        margin: 0 auto;


    }


    /* ── Logo (fix reset.css max-width: 100% shrinking it) ── */


    .elab-header-inner .logo-container {


        justify-content: flex-start;


        flex-shrink: 0;


    }


    .elab-header-inner .logo-container img,


    .elab-header-inner .logo-container .custom-logo {


        max-height: 48px;


        width: auto;


        max-width: none !important;


        /* fights reset.css img max-width:100% */


        height: auto;


    }


    /* ── Nav list ─────────────────────────────────────────── */


    .elab-nav {


        width: 100%;


        min-width: 0;


    }


    .elab-nav__list {


        display: flex;


        align-items: center;


        justify-content: center;


        gap: 2px;


        padding: 0;


        margin: 0;


    }


    .elab-nav__item {


        position: static;


        margin: 0;


        padding: 0;


    }


    /* simple_dropdown is small and scoped — relative works fine */


    .elab-nav__item.simple_dropdown {


        position: relative;


    }


    /* Mega menu and benefit tile stay static so left:50% centers on the header.


       The ::after bridge fills the gap between trigger and menu so hover isn't lost. */


    .elab-nav__item.mega_menu>.elab-nav__trigger::after,


    .elab-nav__item.benefit_tile>.elab-nav__trigger::after {


        /* The CSS-triangle chevron is already defined elsewhere using border-top trick.


           We use a separate bridging approach via padding on the menu itself — see below. */


    }


    /* ── Nav triggers & links — must fully override reset.css ─ */


    /*


       reset.css gives buttons:


         border: 1px solid #c36  (pink!)


         color: #c36


         border-radius: 3px


         padding: .5rem 1rem


       We set everything explicitly with !important where needed.


    */


    .elab-nav__link,


    .elab-nav__trigger {


        /* Structure */


        position: relative;


        display: inline-flex !important;


        align-items: center;


        justify-content: center;


        gap: 5px;


        min-height: 34px;


        /* Kill reset.css button chrome */


        border: none !important;


        border-radius: 6px !important;


        background: transparent !important;


        background-color: transparent !important;


        box-shadow: none !important;


        padding: 6px 11px !important;


        margin: 0 !important;


        /* Typography */


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


        /* font-size: 12px !important; */


        /* font-weight: 800 !important; */


        /* letter-spacing: 0.07em; */


        /* line-height: 1.2 !important; */


        letter-spacing: 1.26px;


        line-height: 27px;


        font-weight: 300 !important;


        color: rgb(58, 58, 58) !important;


        font-size: 18px;


        /* text-transform: uppercase; */


        text-decoration: none !important;


        white-space: nowrap;


        cursor: pointer;


        /* Motion */


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


    }


    /* Chevron — must not conflict with the underline ::before */


    .elab-nav__trigger::after {


        content: "";


        flex-shrink: 0;


        width: 0;


        height: 0;


        border-left: 4px solid transparent;


        border-right: 4px solid transparent;


        border-top: 5px solid currentColor;


        transform: translateY(1px);


        transition: transform var(--elab-transition), border-top-color var(--elab-transition);


        opacity: 0.55;


        margin-left: 1px;


    }


    /* Hover & open states */


    .elab-nav__link:hover,


    .elab-nav__link:focus,


    .elab-nav__trigger:hover,


    .elab-nav__trigger:focus,


    .elab-nav__item:hover>.elab-nav__trigger,


    .elab-nav__item:focus-within>.elab-nav__trigger {


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


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


        text-decoration: none !important;


        border: none !important;


    }


    .elab-nav__item:hover>.elab-nav__trigger::after,


    .elab-nav__item:focus-within>.elab-nav__trigger::after {


        transform: translateY(1px) rotate(180deg);


        opacity: 1;


    }


    /* Underline accent bar */


    .elab-nav__link::before,


    .elab-nav__trigger::before {


        content: "";


        position: absolute;


        bottom: 4px;


        left: 50%;


        width: 0;


        height: 2px;


        border-radius: 999px;


        background: var(--elab-accent);


        transform: translateX(-50%);


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


    }


    .elab-nav__item:hover>.elab-nav__trigger::before,


    .elab-nav__item:focus-within>.elab-nav__trigger::before,


    .elab-nav__link:hover::before {


        width: calc(100% - 16px);


    }


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


    .elab-header-account {


        display: flex;


        align-items: center;


        justify-content: flex-end;


        flex-shrink: 0;


    }


    .elab-account-link--desktop {


        display: inline-flex !important;


        align-items: center;


        gap: 8px;


        border-radius: 7px !important;


        padding: 7px 12px !important;


        font-size: 13px !important;


        font-weight: 700 !important;


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


        border: none !important;


        background: transparent !important;


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


        text-decoration: none !important;


        white-space: nowrap;


        cursor: pointer;


    }


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


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


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


        text-decoration: none !important;


        border: none !important;


    }


    /* ── Dropdown visibility ──────────────────────────────── */


    .elab-mega-menu,


    .elab-benefit-tile-menu,


    .elab-simple-dropdown {


        pointer-events: none;


        opacity: 0;


        visibility: hidden;


        transition: opacity 140ms ease, visibility 140ms ease, transform 220ms var(--elab-transition-lg, cubic-bezier(0.25, 0.46, 0.45, 0.94));


    }


    .elab-nav__item:hover .elab-mega-menu,


    .elab-nav__item:focus-within .elab-mega-menu,


    .elab-nav__item.benefit_tile:hover .elab-benefit-tile-menu,


    .elab-nav__item.benefit_tile:focus-within .elab-benefit-tile-menu,


    .elab-nav__item:hover .elab-simple-dropdown,


    .elab-nav__item:focus-within .elab-simple-dropdown {


        pointer-events: auto;


        opacity: 1;


        visibility: visible;


    }


    /* ── Mega menu shell ──────────────────────────────────── */


    .elab-mega-menu {


        position: absolute;


        /* Break out to full viewport width regardless of positioned ancestor */


        left: 50%;


        top: 100%;


        z-index: 100;


        width: min(1400px, calc(100vw - 48px));


        transform: translateX(-50%);


        padding: 28px 0 32px;


        background: var(--elab-white);


        border-top: 2px solid var(--elab-accent);


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


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


    }


    .elab-nav__item:hover .elab-mega-menu,


    .elab-nav__item:focus-within .elab-mega-menu {


        transform: translateX(-50%);


    }


    .elab-mega-menu__inner {


        display: grid;


        grid-template-columns: 1.15fr 1fr 1fr 1fr 1fr;


        column-gap: 28px;


        width: min(1400px, calc(100vw - 48px));


        margin: 0 auto;


        padding: 0 24px;


    }


    /* ── Column stagger ───────────────────────────────────── */


    .elab-mega-menu__column {


        display: grid;


        align-content: start;


        gap: 20px;


        min-width: 0;


        opacity: 0;


        transform: translateY(7px);


        transition: opacity 200ms ease, transform 250ms ease;


    }


    .elab-nav__item:hover .elab-mega-menu__column,


    .elab-nav__item:focus-within .elab-mega-menu__column {


        opacity: 1;


        transform: translateY(0);


    }


    .elab-mega-menu__column:nth-child(1) {


        transition-delay: 30ms;


    }


    .elab-mega-menu__column:nth-child(2) {


        transition-delay: 65ms;


    }


    .elab-mega-menu__column:nth-child(3) {


        transition-delay: 100ms;


    }


    .elab-mega-menu__column:nth-child(4) {


        transition-delay: 135ms;


    }


    .elab-mega-menu__column:nth-child(5) {


        transition-delay: 170ms;


    }


    /* Column 1 divider */


    .elab-mega-menu__column--1 {


        padding-right: 24px;


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


    }


    /* ── Column 1: no-icon sections (New & Trending, Shop by Extract) ─ */


    /*


       These don't have icons so the section-title grid-template-columns


       should NOT include a 22px icon slot — we override for col 1 only.


    */


    .elab-mega-menu__column--1 .elab-mega-menu__section {


        gap: 6px;


    }


    .elab-mega-menu__column--1 .elab-mega-menu__section-title {


        /* Remove the icon grid — these are plain text labels */


        display: block !important;


        grid-template-columns: none !important;


        color: var(--elab-muted);


        font-size: 10px !important;


        font-weight: 900 !important;


        letter-spacing: 0.13em;


        line-height: 1.2;


        text-transform: uppercase;


        padding-bottom: 5px;


        border-bottom: none;


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


    }


    .elab-mega-menu__column--1 .elab-mega-menu__section-title:hover {


        color: var(--elab-accent);


    }


    /* Col 1 links: left-edge, accent color, feature-weight */


    .elab-mega-menu__column--1 .elab-mega-menu__links {


        padding-left: 0 !important;


    }


    .elab-mega-menu__column--1 .elab-mega-menu__link {


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


        font-size: 14px !important;


        font-weight: 600 !important;


    }


    .elab-mega-menu__column--1 .elab-mega-menu__link:hover {


        color: var(--elab-accent-hover, #2e5049) !important;


        padding-left: 5px;


    }


    /* ── Section titles (columns 2-5 — have icons) ───────── */


    .elab-mega-menu__section {


        display: grid;


        gap: 10px;


        min-width: 0;


    }


    .elab-mega-menu__section-title {


        display: grid;


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


        align-items: center;


        gap: 8px;


        color: var(--elab-black);


        font-size: 13px;


        /* bigger than before — titles should lead */


        font-weight: 900;


        letter-spacing: 0.07em;


        line-height: 1.15;


        text-transform: uppercase;


        padding-bottom: 8px;


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


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


    }


    .elab-mega-menu__section-title:hover {


        color: var(--elab-accent);


    }


    /* Icon — same height as label text, not oversized */


    .elab-mega-menu__icon {


        display: block;


        width: 24px;


        height: 24px !important;


        object-fit: contain;


        opacity: 0.80;


        flex-shrink: 0;


    }


    /* ── Mega menu links ──────────────────────────────────── */


    .elab-mega-menu__links {


        display: grid;


        gap: 0;


        margin: 0;


        padding: 2px 0 0 26px;


    }


    /* Two-column layout for col-1 second section */


    .elab-mega-menu__column[data-column="1"]>.elab-mega-menu__section:not(:first-of-type) .elab-mega-menu__links,


    .elab-mega-menu__section[data-layout="two_column_links"] .elab-mega-menu__links {


        grid-template-columns: repeat(2, minmax(0, 1fr));


        column-gap: 14px;


    }


    .elab-mega-menu__link {


        display: inline-flex !important;


        width: 100%;


        align-items: center;


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


        font-size: 13.5px !important;


        font-weight: 400 !important;


        line-height: 1.3;


        padding: 3px 6px 3px 0;


        border: none !important;


        background: transparent !important;


        text-decoration: none !important;


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


    }


    .elab-mega-menu__link:hover {


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


        padding-left: 5px;


        background: transparent !important;


        text-decoration: none !important;


    }


    /* ── Last column: THC Seltzer / Kava / Merch sections ── */


    /* These sections have no sub-links, just the title as a link */


    .elab-mega-menu__column--5 .elab-mega-menu__section:not(:has(.elab-mega-menu__links)) .elab-mega-menu__section-title {


        border-bottom: none;


        padding-bottom: 0;


    }


    /* ── Benefit tile menu ────────────────────────────────── */


    .elab-benefit-tile-menu {


        position: absolute;


        left: 50%;


        top: 100%;


        z-index: 100;


        width: min(1400px, calc(100vw - 48px));


        transform: translateX(-50%);


        padding: 22px 22px;


        background: var(--elab-white);


        border-top: 2px solid var(--elab-accent);


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


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


    }


    .elab-nav__item.benefit_tile:hover .elab-benefit-tile-menu,


    .elab-nav__item.benefit_tile:focus-within .elab-benefit-tile-menu {


        transform: translateX(-50%);


    }


    .elab-benefit-tile-menu__list {


        display: grid;


        grid-template-columns: repeat(6, minmax(0, 1fr));


        gap: 14px;


        /* width: min(1400px, calc(100vw - 48px)); */


        margin: 0 auto;


        padding: 0 24px;


    }


    .elab-benefit-tile-menu__item {


        opacity: 0;


        transform: translateY(8px);


        transition: opacity 180ms ease, transform 220ms ease;


    }


    .elab-nav__item.benefit_tile:hover .elab-benefit-tile-menu__item,


    .elab-nav__item.benefit_tile:focus-within .elab-benefit-tile-menu__item {


        opacity: 1;


        transform: translateY(0);


    }


    .elab-benefit-tile-menu__item:nth-child(1) {


        transition-delay: 30ms;


    }


    .elab-benefit-tile-menu__item:nth-child(2) {


        transition-delay: 60ms;


    }


    .elab-benefit-tile-menu__item:nth-child(3) {


        transition-delay: 90ms;


    }


    .elab-benefit-tile-menu__item:nth-child(4) {


        transition-delay: 120ms;


    }


    .elab-benefit-tile-menu__item:nth-child(5) {


        transition-delay: 150ms;


    }


    .elab-benefit-tile-menu__item:nth-child(6) {


        transition-delay: 180ms;


    }


    .elab-benefit-tile-menu__link {


        position: relative;


        display: block;


        aspect-ratio: 1 / 1;


        overflow: hidden;


        border-radius: 9px;


        background: var(--elab-black);


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


        border: none !important;


        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.10);


        transition: box-shadow var(--elab-transition) !important;


    }


    .elab-benefit-tile-menu__link:hover {


        box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18) !important;


    }


    .elab-benefit-tile-menu__image {


        position: absolute;


        inset: 0;


        width: 100%;


        height: 100%;


        object-fit: cover;


        transition: transform 360ms ease, filter 300ms ease;


        max-width: none !important;


    }


    .elab-benefit-tile-menu__link::after {


        content: "";


        position: absolute;


        inset: 0;


        background: linear-gradient(to top, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.1) 55%, transparent 100%);


    }


    .elab-benefit-tile-menu__link:hover .elab-benefit-tile-menu__image {


        transform: scale(1.05);


        filter: brightness(0.85);


    }


    .elab-benefit-tile-menu__title {


        position: relative;


        z-index: 1;


        display: flex;


        min-height: 100%;


        align-items: flex-end;


        justify-content: center;


        padding: 14px;


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


        font-size: 13px;


        font-weight: 900;


        letter-spacing: 0.07em;


        line-height: 1.1;


        text-align: center;


        text-transform: uppercase;


    }


    /* ── Simple dropdown ──────────────────────────────────── */


    .elab-simple-dropdown {


        position: absolute;


        top: 100%;


        /* flush to nav bar — no gap, no margin-top */


        left: 0;


        z-index: 100;


        min-width: 200px;


        padding: 6px;


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


        border-top: 2px solid var(--elab-accent);


        border-radius: 0 0 var(--elab-radius, 10px) var(--elab-radius, 10px);


        background: var(--elab-white);


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


        transform: translateY(1px);


        margin-top: 0 !important;


        /* kill any inherited margin */


    }


    .elab-nav__item:hover .elab-simple-dropdown,


    .elab-nav__item:focus-within .elab-simple-dropdown {


        transform: translateY(0);


    }


    .elab-simple-dropdown__link {


        display: block !important;


        border-radius: 5px;


        padding: 9px 12px !important;


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


        font-size: 13.5px !important;


        font-weight: 600 !important;


        line-height: 1.25 !important;


        white-space: nowrap;


        border: none !important;


        background: transparent !important;


        text-decoration: none !important;


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


    }


    .elab-simple-dropdown__link:hover {


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


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


        padding-left: 16px !important;


        text-decoration: none !important;


    }


}


/* ── Mega menu hover bridge ───────────────────────────────────


   Because .elab-nav__item is position:static, the mega menu


   is positioned relative to .elab-nav. There can be a tiny


   gap between the bottom of the trigger button and the top of


   the mega menu panel. This ::before pseudo-element is an


   invisible rectangle that sits in that gap, keeping the


   :hover chain alive so the menu doesn't vanish mid-cursor.


──────────────────────────────────────────────────────────────*/


@media (min-width: 1101px) {


    .elab-mega-menu::before,


    .elab-benefit-tile-menu::before {


        content: "";


        position: absolute;


        top: -12px;


        /* reach 12px above the menu top edge */


        left: 0;


        right: 0;


        height: 12px;


        /* bridge height matches the gap */


        background: transparent;


        pointer-events: auto;


        /* catches the mouse in the gap */


    }


}