/* ============================================================   EXTRACT LABS CUSTOM HEADER — desktop.css  (≥ 1101px)   ============================================================ */@media (min-width: 1101px) {    /* ── Header layout ────────────────────────────────────── */    .elab-header-inner {        display: grid;        grid-template-columns: minmax(220px, 320px) minmax(0, 1fr) auto;        align-items: center;        gap: 24px;        width: min(1400px, calc(100vw - 48px));        min-height: 88px;        margin: 0 auto;        padding: 8px 0 6px;    }    .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;        min-width: 0;        width: 100%;    }    .elab-header-inner .logo-container .custom-logo-link {        width: 100%;        max-width: 100%;    }    .elab-header-inner .logo-container img,    .elab-header-inner .logo-container .custom-logo {        max-height: 48px;        width: 100% !important;        max-width: min(100%, 280px) !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% !important;        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 */    }}