/* =============================================================
   TEAM GLAM — Custom Header
   All visual values are CSS custom properties so the WordPress
   Customizer can override them without touching this file.
   ============================================================= */

/* ── Global font override — connects to global typography system ── */
body,
p,
.entry-content p,
.elementor-widget-text-editor p,
.elementor-text-editor p {
    font-family: var(--tg-font-body, 'brandon-grotesque', sans-serif);
    font-size: var(--tg-p-size, 18px);
    line-height: var(--tg-p-line-height, 1.3);
    letter-spacing: var(--tg-p-letter-spacing, -0.023em);
    font-weight: 400;
    color: #000000;
}

h1, h2, h3, h4, h5, h6,
.elementor-heading-title {
    font-family: var(--tg-font-heading, 'beaufort-pro', serif);
    font-weight: 400;
}

/* ── Default variable values (Customizer overrides :root via inline <style>) ── */
:root {
    /* Global Typography */
    --tg-body-font-size:         18px;
    --tg-h1-size:                108.16px;
    --tg-h2-size:                52.86px;
    --tg-h3-size:                34.43px;
    --tg-h4-size:                19.69px;

    /* Layout */
    --tg-header-height:          80px;

    /* Logo */
    --tg-logo-height:            54px;
    --tg-logo-height-mobile:     42px;
    --tg-logo-filter-transparent: brightness(0) invert(1);
    --tg-logo-filter-solid:      none;

    /* Default (solid white) header */
    --tg-header-bg:              #ffffff;
    --tg-header-border:          rgba(0, 0, 0, 0.07);
    --tg-header-shadow-scrolled: 0 2px 24px rgba(0, 0, 0, 0.06);
    --tg-header-border-scrolled: rgba(0, 0, 0, 0.08);

    /* Navigation — transparent state (over hero) */
    --tg-nav-color-transparent:       #ffffff;
    --tg-nav-hover-transparent:       rgba(255, 255, 255, 0.55);
    --tg-nav-active-transparent:      rgba(255, 255, 255, 0.7);

    /* Navigation — scrolled / solid state */
    --tg-nav-color-solid:             #1a1a1a;
    --tg-nav-hover-solid:             #888888;
    --tg-nav-active-solid:            #1a1a1a;

    /* Navigation typography */
    --tg-nav-font-family:             'Work Sans', sans-serif;
    --tg-nav-font-size:               0.6875rem;  /* 11px */
    --tg-nav-letter-spacing:          0.1em;
    --tg-nav-font-weight:             400;
    --tg-nav-text-transform:          uppercase;

    /* Cart icon */
    --tg-cart-color-transparent:      #ffffff;
    --tg-cart-color-solid:            #1a1a1a;

    /* Mobile hamburger */
    --tg-toggle-color-transparent:    #ffffff;
    --tg-toggle-color-solid:          #1a1a1a;

    /* CTA button */
    --tg-cta-bg:                 #1a1a1a;
    --tg-cta-color:              #ffffff;
    --tg-cta-hover-bg:           #383838;
    --tg-cta-hover-color:        #ffffff;
    --tg-cta-font-size:          0.72rem;
    --tg-cta-letter-spacing:     0.1em;
    --tg-cta-font-weight:        400;
    --tg-cta-padding-v:          10px;
    --tg-cta-padding-h:          22px;
    --tg-cta-border-radius:      0px;

    /* Mega menu */
    --tg-mega-link-color:        #1a1a1a;
    --tg-mega-link-hover:        #888888;
    --tg-mega-link-font-size:    var(--tg-h2-size, 52.86px);
    --tg-mega-bg:                #ffffff;
    --tg-mega-shadow:            0 12px 48px rgba(0, 0, 0, 0.12);
}

/* ── Reset hello-elementor defaults ── */
#site-header.tg-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    max-width: 100% !important;
    z-index: 9000;
    padding: 0 !important;
    background: var(--tg-header-bg);
    border-bottom: 1px solid var(--tg-header-border);
    box-shadow: none;
    transition: background 0.14s ease-in-out,
                transform 0.14s ease-in-out,
                border-color 0.14s ease-in-out,
                box-shadow 0.14s ease-in-out;
}

/* Transparent state — hero pages at scroll top */
#site-header.tg-header.tg-transparent {
    background: transparent !important;
    border-bottom-color: transparent !important;
    box-shadow: none !important;
}

/* Scrolled state */
#site-header.tg-header.tg-scrolled {
    background: var(--tg-scrolled-bg, var(--tg-header-bg)) !important;
    border-bottom-color: var(--tg-header-border-scrolled) !important;
    box-shadow: var(--tg-header-shadow-scrolled) !important;
}

/* ── Inner container ── */
.tg-header-inner {
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 100% !important;
    height: var(--tg-header-height);
    padding: 0 40px !important;
    position: relative;
    box-sizing: border-box;
}

/* =============================================================
   LEFT NAV
   ============================================================= */
.tg-nav {
    flex: 1;
    display: flex;
    align-items: center;
}

.tg-nav .tg-menu {
    display: flex;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
}

.tg-nav .tg-menu > li {
    position: static;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Top-level link */
#site-header.tg-header .tg-nav .tg-menu > li > .tg-menu-link,
.elementor-kit-6 #site-header.tg-header .tg-nav .tg-menu > li > .tg-menu-link {
    display: flex;
    align-items: center;
    height: var(--tg-header-height);
    padding: 0 16px;
    font-family: var(--tg-nav-font-family) !important;
    font-size: var(--tg-nav-font-size) !important;
    font-weight: var(--tg-nav-font-weight) !important;
    letter-spacing: var(--tg-nav-letter-spacing) !important;
    text-transform: var(--tg-nav-text-transform) !important;
    text-decoration: none !important;
    white-space: nowrap;
    color: var(--tg-nav-color-solid, #1a1a1a);
    transition: color 0.2s ease;
}

/* ── Unscrolled Solid Header at scroll top (non-hero page) ── */
#site-header.tg-header:not(.tg-transparent):not(.tg-scrolled) {
    background: #ffffff !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.07) !important;
    box-shadow: none !important;
}

#site-header.tg-header:not(.tg-transparent):not(.tg-scrolled) .tg-nav .tg-menu > li > .tg-menu-link {
    color: #1a1a1a !important;
}

#site-header.tg-header:not(.tg-transparent):not(.tg-scrolled) .tg-nav .tg-menu > li > .tg-menu-link:hover {
    color: #888888 !important;
}

#site-header.tg-header:not(.tg-transparent):not(.tg-scrolled) .tg-nav .tg-menu > li.current-menu-item > .tg-menu-link,
#site-header.tg-header:not(.tg-transparent):not(.tg-scrolled) .tg-nav .tg-menu > li.current-menu-ancestor > .tg-menu-link {
    color: #1a1a1a !important;
}

#site-header.tg-header:not(.tg-transparent):not(.tg-scrolled) .tg-cart-btn {
    color: #1a1a1a !important;
}

#site-header.tg-header:not(.tg-transparent):not(.tg-scrolled) .tg-mobile-toggle span {
    background-color: #1a1a1a !important;
}

/* ── Transparent Header at scroll top (over hero) ── */
#site-header.tg-header.tg-transparent:not(.tg-scrolled) {
    background: transparent !important;
    border-bottom-color: transparent !important;
    box-shadow: none !important;
}

#site-header.tg-header.tg-transparent:not(.tg-scrolled) .tg-nav .tg-menu > li > .tg-menu-link {
    color: var(--tg-nav-color-transparent, #ffffff) !important;
}

#site-header.tg-header.tg-transparent:not(.tg-scrolled) .tg-nav .tg-menu > li > .tg-menu-link:hover {
    color: var(--tg-nav-hover-transparent, rgba(255, 255, 255, 0.55)) !important;
}

#site-header.tg-header.tg-transparent:not(.tg-scrolled) .tg-nav .tg-menu > li.current-menu-item > .tg-menu-link,
#site-header.tg-header.tg-transparent:not(.tg-scrolled) .tg-nav .tg-menu > li.current-menu-ancestor > .tg-menu-link {
    color: var(--tg-nav-active-transparent, rgba(255, 255, 255, 0.85)) !important;
}

#site-header.tg-header.tg-transparent:not(.tg-scrolled) .tg-cart-btn {
    color: var(--tg-cart-color-transparent, #ffffff) !important;
}

#site-header.tg-header.tg-transparent:not(.tg-scrolled) .tg-mobile-toggle span {
    background-color: var(--tg-toggle-color-transparent, #ffffff) !important;
}

/* ── Scrolled Header (scroll > 10px) ── */
#site-header.tg-header.tg-scrolled {
    background: var(--tg-scrolled-bg, #ffffff) !important;
    border-bottom-color: var(--tg-header-border-scrolled, rgba(0, 0, 0, 0.08)) !important;
    box-shadow: var(--tg-header-shadow-scrolled, 0 2px 24px rgba(0, 0, 0, 0.06)) !important;
}

#site-header.tg-header.tg-scrolled .tg-nav .tg-menu > li > .tg-menu-link {
    color: var(--tg-nav-color-solid, #1a1a1a) !important;
}

#site-header.tg-header.tg-scrolled .tg-nav .tg-menu > li > .tg-menu-link:hover {
    color: var(--tg-nav-hover-solid, #888888) !important;
}

#site-header.tg-header.tg-scrolled .tg-nav .tg-menu > li.current-menu-item > .tg-menu-link,
#site-header.tg-header.tg-scrolled .tg-nav .tg-menu > li.current-menu-ancestor > .tg-menu-link {
    color: var(--tg-nav-active-solid, #1a1a1a) !important;
}

#site-header.tg-header.tg-scrolled .tg-cart-btn {
    color: var(--tg-cart-color-solid, #1a1a1a) !important;
}

#site-header.tg-header.tg-scrolled .tg-mobile-toggle span {
    background-color: var(--tg-toggle-color-solid, #1a1a1a) !important;
}

/* =============================================================
   CENTER LOGO
   ============================================================= */
.tg-logo {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    pointer-events: auto;
}

.tg-logo a,
.tg-logo-link,
.tg-logo .custom-logo-link {
    display: block;
    line-height: 0;
}

.tg-logo-img,
.tg-logo .custom-logo,
.tg-logo img {
    height: var(--tg-logo-height);
    width: auto;
    display: block;
    transition: filter 0.4s ease, opacity 0.4s ease;
}

/* 1) Unscrolled Solid Header at scroll top: Show Dark Logo */
#site-header.tg-header:not(.tg-transparent):not(.tg-scrolled) .tg-logo-dark {
    display: block !important;
}
#site-header.tg-header:not(.tg-transparent):not(.tg-scrolled) .tg-logo-light {
    display: none !important;
}

/* 2) Transparent Header at scroll top (over hero): Show Light Logo */
#site-header.tg-header.tg-transparent:not(.tg-scrolled) .tg-logo-dark {
    display: none !important;
}
#site-header.tg-header.tg-transparent:not(.tg-scrolled) .tg-logo-light {
    display: block !important;
}

/* 3) Scrolled Header (scroll > 10px): Dynamic logo toggle based on scrolled background/nav color */
#site-header.tg-header.tg-scrolled .tg-logo-dark {
    display: var(--tg-scrolled-logo-dark-display, block) !important;
}
#site-header.tg-header.tg-scrolled .tg-logo-light {
    display: var(--tg-scrolled-logo-light-display, none) !important;
}

/* Fallback filter when single logo image is used */
#site-header.tg-header.tg-transparent:not(.tg-scrolled) .tg-logo .custom-logo,
#site-header.tg-header.tg-transparent:not(.tg-scrolled) .tg-logo img:not(.tg-logo-dark):not(.tg-logo-light) {
    filter: brightness(0) invert(1) !important;
}

#site-header.tg-header:not(.tg-transparent):not(.tg-scrolled) .tg-logo .custom-logo,
#site-header.tg-header:not(.tg-transparent):not(.tg-scrolled) .tg-logo img:not(.tg-logo-dark):not(.tg-logo-light) {
    filter: none !important;
}

#site-header.tg-header.tg-scrolled .tg-logo .custom-logo,
#site-header.tg-header.tg-scrolled .tg-logo img:not(.tg-logo-dark):not(.tg-logo-light) {
    filter: var(--tg-scrolled-logo-filter, none) !important;
}

/* Text fallback */
.tg-site-name {
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--tg-nav-color-solid);
    white-space: nowrap;
}
.tg-header.tg-transparent .tg-site-name { color: var(--tg-nav-color-transparent); }
.tg-header.tg-scrolled   .tg-site-name { color: var(--tg-nav-color-solid); }

/* =============================================================
   RIGHT: CART + CTA
   ============================================================= */
.tg-actions {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 14px;
}

/* Cart icon */
.tg-cart-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    text-decoration: none;
    color: var(--tg-cart-color-solid);
    line-height: 1;
    transition: opacity 0.2s ease;
}
.tg-cart-btn:hover { opacity: 0.6; }

.tg-header.tg-transparent .tg-cart-btn { color: var(--tg-cart-color-transparent); }
.tg-header.tg-scrolled   .tg-cart-btn { color: var(--tg-cart-color-solid); }

.tg-cart-count { font-size: 0.72rem; line-height: 1; }

/* CTA button */
.tg-cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--tg-cta-padding-v) var(--tg-cta-padding-h);
    background-color: var(--tg-cta-bg);
    color: var(--tg-cta-color) !important;
    font-family: 'brandon-grotesque', sans-serif;
    font-size: var(--tg-cta-font-size);
    font-weight: var(--tg-cta-font-weight);
    letter-spacing: var(--tg-cta-letter-spacing);
    text-transform: uppercase;
    text-decoration: none !important;
    border-radius: var(--tg-cta-border-radius);
    transition: background-color 0.2s ease, color 0.2s ease;
    white-space: nowrap;
    line-height: 1;
}
.tg-cta-btn:hover {
    background-color: var(--tg-cta-hover-bg);
    color: var(--tg-cta-hover-color) !important;
}

/* =============================================================
   MEGA MENU PANEL (2-COLUMN DYNAMIC EDITORIAL POPUP)
   ============================================================= */
.tg-has-mega { position: static; }

/* ── Header switches to solid white whenever mega menu is hovered / active ── */
#site-header.tg-header:has(.tg-has-mega:hover),
#site-header.tg-header.tg-mega-active {
    background: #ffffff !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04) !important;
}

#site-header.tg-header:has(.tg-has-mega:hover) .tg-nav .tg-menu > li > .tg-menu-link,
#site-header.tg-header.tg-mega-active .tg-nav .tg-menu > li > .tg-menu-link {
    color: #1a1a1a !important;
}

#site-header.tg-header:has(.tg-has-mega:hover) .tg-nav .tg-menu > li.tg-has-mega > .tg-menu-link,
#site-header.tg-header.tg-mega-active .tg-nav .tg-menu > li.tg-has-mega > .tg-menu-link {
    color: #000000 !important;
    opacity: 1 !important;
}

#site-header.tg-header:has(.tg-has-mega:hover) .tg-logo-dark,
#site-header.tg-header.tg-mega-active .tg-logo-dark {
    display: block !important;
}

#site-header.tg-header:has(.tg-has-mega:hover) .tg-logo-light,
#site-header.tg-header.tg-mega-active .tg-logo-light {
    display: none !important;
}

#site-header.tg-header:has(.tg-has-mega:hover) .tg-cart-btn,
#site-header.tg-header.tg-mega-active .tg-cart-btn {
    color: #1a1a1a !important;
}

#site-header.tg-header:has(.tg-has-mega:hover) .tg-logo .custom-logo,
#site-header.tg-header.tg-mega-active .tg-logo .custom-logo,
#site-header.tg-header:has(.tg-has-mega:hover) .tg-logo img,
#site-header.tg-header.tg-mega-active .tg-logo img {
    filter: none !important;
}

.tg-mega-panel {
    position: fixed;
    top: var(--tg-header-height);
    left: 0;
    right: 0;
    width: 100vw;
    max-width: 100vw;
    height: calc(100vh - var(--tg-header-height));
    min-height: calc(100vh - var(--tg-header-height));
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: #ffffff;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-6px);
    transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                visibility 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.16);
    z-index: 8999;
    overflow: hidden;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.tg-has-mega:hover .tg-mega-panel,
.tg-has-mega:focus-within .tg-mega-panel,
.tg-has-mega.tg-open .tg-mega-panel {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

/* ── Left Column: Navigation & Promo Callout ── */
.tg-mega-left {
    padding: clamp(40px, 4.5vw, 65px) clamp(40px, 6vw, 90px) clamp(40px, 4vw, 60px) clamp(40px, 6vw, 90px);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: #ffffff;
    box-sizing: border-box;
    overflow-y: auto;
}

.tg-mega-primary-links {
    margin-bottom: 0;
}

.tg-mega-primary-links ul {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
}

.tg-mega-primary-links ul > li {
    list-style: none;
    margin: 0 0 16px 0;
    padding: 0;
    line-height: 1.15;
}

.tg-mega-primary-links ul > li:last-child {
    margin-bottom: 0;
}

.tg-mega-link,
#site-header.tg-header .tg-mega-link,
.elementor-kit-6 #site-header.tg-header .tg-mega-link,
.elementor-kit-6 .tg-mega-primary-links a,
.tg-mega-primary-links a {
    display: inline-block;
    font-family: var(--tg-font-heading, 'beaufort-pro', Georgia, serif) !important;
    font-size: var(--tg-h3-size, 34.43px) !important;
    font-weight: 400 !important;
    letter-spacing: -0.01em !important;
    text-transform: uppercase !important;
    text-decoration: underline !important;
    text-underline-offset: 7px !important;
    text-decoration-thickness: 1px !important;
    color: #000000 !important;
    line-height: 1.06 !important;
    transition: opacity 0.2s ease;
}

.tg-mega-link:hover,
.tg-mega-primary-links a:hover {
    opacity: 0.55 !important;
}

/* ── Divider line between primary links and promo callout ── */
.tg-mega-divider {
    width: 100%;
    max-width: 480px;
    height: 1px;
    background-color: #dcdcdc;
    margin: clamp(28px, 3.2vw, 44px) 0 clamp(24px, 2.8vw, 36px) 0;
    border: none;
}

/* ── Secondary Promo / Portal Callout Block ── */
.tg-mega-callout {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.tg-mega-callout-title {
    font-family: var(--tg-font-heading, 'beaufort-pro', Georgia, serif) !important;
    font-size: var(--tg-h3-size, 34.43px) !important;
    font-weight: 400 !important;
    color: #111111 !important;
    margin: 0 0 14px 0 !important;
    line-height: 1.06 !important;
    letter-spacing: -0.01em !important;
}

.tg-mega-callout-desc {
    font-family: 'brandon-grotesque', sans-serif !important;
    font-size: 18px !important;
    line-height: 1.45 !important;
    color: #333333 !important;
    margin: 0 0 28px 0 !important;
    max-width: 460px !important;
    letter-spacing: -0.018em !important;
}

.tg-mega-callout-btn,
#site-header.tg-header .tg-mega-callout-btn,
.elementor-kit-6 #site-header.tg-header .tg-mega-callout-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #000000;
    color: #ffffff !important;
    padding: 14px 34px;
    font-family: 'brandon-grotesque', sans-serif !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    transition: background-color 0.2s ease, opacity 0.2s ease;
    border: none;
    line-height: 1 !important;
    border-radius: 0;
}

.tg-mega-callout-btn:hover {
    background-color: #2b2b2b;
}

/* ── Right Column: Editorial Image & Testimonial Card ── */
.tg-mega-right {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 100%;
    overflow: hidden;
    background: #111111;
    display: flex;
}

.tg-mega-card {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 100%;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(40px, 5vw, 70px) clamp(30px, 4vw, 50px);
    box-sizing: border-box;
    text-align: center;
}

.tg-mega-card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.28) 0%, rgba(0, 0, 0, 0.48) 100%);
    pointer-events: none;
    z-index: 1;
}

.tg-mega-card-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    max-width: 480px;
    margin: 0 auto;
    color: #ffffff;
    text-align: center;
}

.tg-mega-stars {
    color: #ffb800;
    font-size: 32px;
    letter-spacing: 7px;
    margin-bottom: 22px;
    line-height: 1;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
    display: block;
    text-align: inherit;
}

.tg-mega-quote {
    font-family: 'beaufort-pro', Georgia, serif;
    font-size: clamp(20px, 1.9vw, 26px);
    font-style: normal;
    font-weight: 400;
    line-height: 1.35;
    color: #ffffff;
    margin: 0 0 18px 0;
    padding: 0;
    text-align: inherit;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.55);
}

.tg-mega-author {
    font-family: 'beaufort-pro', Georgia, serif;
    font-size: 22px;
    letter-spacing: 0.02em;
    color: #ffffff;
    margin-bottom: 32px;
    font-weight: 400;
    text-align: inherit;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
}

.tg-mega-card-btn,
#site-header.tg-header .tg-mega-card-btn,
.elementor-kit-6 #site-header.tg-header .tg-mega-card-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #000000;
    color: #ffffff !important;
    border: 1px solid #000000;
    padding: 14px 34px;
    font-family: 'brandon-grotesque', sans-serif !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
    line-height: 1 !important;
    border-radius: 0;
}

.tg-mega-card-btn:hover,
#site-header.tg-header .tg-mega-card-btn:hover {
    background-color: #ffffff;
    color: #000000 !important;
    border-color: #ffffff;
}

/* =============================================================
   MOBILE TOGGLE  (2-line minimalist hamburger)
   ============================================================= */
.tg-mobile-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 8px 4px;
    width: 36px;
    height: 36px;
    margin-left: auto;
    color: var(--tg-toggle-color-solid);
    /* no z-index — drawer (z:10000) slides over it naturally */
}

.tg-bar {
    display: block;
    width: 30px;
    height: 1px;
    background: currentColor;
    border-radius: 1px;
    transition: transform 0.25s cubic-bezier(0.2, 0.6, 0.3, 1),
                width 0.25s cubic-bezier(0.2, 0.6, 0.3, 1),
                opacity 0.25s cubic-bezier(0.2, 0.6, 0.3, 1);
    transform-origin: center;
}

.tg-header.tg-transparent .tg-mobile-toggle { color: var(--tg-toggle-color-transparent); }
.tg-header.tg-scrolled   .tg-mobile-toggle { color: var(--tg-toggle-color-solid); }

/* 2-bar → × animation when open */
.tg-mobile-toggle[aria-expanded="true"] .tg-bar:nth-child(1) { transform: translateY(3.5px) rotate(45deg); }
.tg-mobile-toggle[aria-expanded="true"] .tg-bar:nth-child(2) { transform: translateY(-3.5px) rotate(-45deg); }

/* =============================================================
   MOBILE DRAWER & DRILLDOWN SUB-PANEL (Screenshots 1 & 2)
   ============================================================= */
.tg-mobile-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100vh;
    background: #fbfbfa;
    display: flex;
    flex-direction: column;
    transform: translateX(-100%);
    transition: transform 0.38s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 10000;
    overflow: hidden;
}
.tg-mobile-nav.tg-open { transform: translateX(0); }

/* ── Top bar inside drawer: [×] | [Logo centered] | [Cart] ── */
.tg-mobile-nav-header {
    display: flex;
    align-items: center;
    height: var(--tg-header-height);
    padding: 0 20px;
    flex-shrink: 0;
    position: relative;
    border-bottom: 1px solid rgba(0, 0, 0, 0.07);
    background: #fbfbfa;
    z-index: 60;
}

.tg-mobile-close {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px 4px;
    width: 36px;
    height: 36px;
    color: #1a1a1a;
    flex-shrink: 0;
    transition: opacity 0.2s ease;
}
.tg-mobile-close:hover { opacity: 0.5; }

.tg-mobile-nav-logo {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
.tg-mobile-nav-logo a           { display: block; line-height: 0; }
.tg-mobile-nav-logo .custom-logo,
.tg-mobile-nav-logo img         { height: var(--tg-logo-height-mobile); width: auto; display: block; }

.tg-mobile-nav-cart {
    display: flex;
    align-items: center;
    gap: 5px;
    text-decoration: none;
    color: #1a1a1a;
    margin-left: auto;
    flex-shrink: 0;
    transition: opacity 0.2s ease;
}
.tg-mobile-nav-cart:hover { opacity: 0.5; }

/* ── Nav body ── */
.tg-mobile-nav-body {
    flex: 1;
    position: relative;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 24px 32px 32px 32px;
}

.tg-mobile-menu {
    list-style: none;
    margin: 0;
    padding: 0;
}

.tg-mobile-menu > li {
    list-style: none;
    margin-bottom: 8px;
}

.tg-mobile-menu > li > .tg-mobile-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 12px 0;
    font-size: clamp(34px, 8.5vw, 42px);
    font-weight: 400;
    letter-spacing: -0.01em;
    text-transform: none;
    text-decoration: none;
    color: #111111;
    font-family: 'beaufort-pro', Georgia, serif;
    line-height: 1.15;
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.tg-mobile-menu > li > .tg-mobile-link:hover {
    opacity: 0.6;
}

.tg-mobile-chevron {
    color: #333333;
    flex-shrink: 0;
    margin-left: 12px;
}

/* ── Mobile Mega Subpanel (Screenshots 1 & 2) ── */
.tg-mobile-subpanel {
    position: fixed;
    top: var(--tg-header-height);
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: calc(100vh - var(--tg-header-height));
    background: #ffffff;
    transform: translateX(100%);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 10050;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

.tg-mobile-subpanel.tg-active {
    transform: translateX(0);
}

.tg-mobile-subpanel-inner {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    width: 100%;
    box-sizing: border-box;
}

.tg-mobile-subpanel-content {
    display: flex;
    flex-direction: column;
    flex: 1 0 auto;
    width: 100%;
    box-sizing: border-box;
}

/* Back button */
.tg-mobile-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: none;
    padding: 24px 28px 18px 28px;
    font-family: 'brandon-grotesque', sans-serif;
    font-size: 15px;
    font-weight: 500;
    color: #777777;
    cursor: pointer;
    text-decoration: none;
    transition: color 0.2s ease;
    align-self: flex-start;
}

.tg-mobile-back-btn:hover {
    color: #111111;
}

/* Primary links in mobile subpanel */
.tg-mobile-mega-primary-links {
    padding: 6px 28px 0 28px;
}

.tg-mobile-mega-primary-links ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.tg-mobile-mega-primary-links ul > li {
    list-style: none;
    margin-bottom: 16px;
    line-height: 1.2;
}

.tg-mobile-mega-link,
#tg-mobile-nav .tg-mobile-mega-link,
.elementor-kit-6 #tg-mobile-nav .tg-mobile-mega-link,
.elementor-kit-6 .tg-mobile-mega-primary-links a,
.tg-mobile-mega-primary-links a {
    display: inline-block;
    font-family: var(--tg-font-heading, 'beaufort-pro', Georgia, serif) !important;
    font-size: clamp(24px, 6.5vw, 36px) !important;
    font-weight: 400 !important;
    letter-spacing: -0.01em !important;
    text-transform: uppercase !important;
    text-decoration: underline !important;
    text-underline-offset: 6px !important;
    text-decoration-thickness: 1px !important;
    color: #111111 !important;
    line-height: 1.15 !important;
}

/* Divider */
.tg-mobile-mega-divider {
    height: 1.5px;
    background-color: #111111;
    margin: 32px 28px 28px 28px;
    border: none;
}

/* Callout */
.tg-mobile-mega-callout {
    padding: 0 28px 36px 28px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.tg-mobile-mega-callout-title {
    font-family: var(--tg-font-heading, 'beaufort-pro', Georgia, serif) !important;
    font-size: clamp(26px, 6.6vw, 32px) !important;
    font-weight: 400 !important;
    color: #111111 !important;
    margin: 0 0 10px 0 !important;
    line-height: 1.2 !important;
}

.tg-mobile-mega-callout-desc {
    font-family: 'brandon-grotesque', sans-serif !important;
    font-size: 16px !important;
    line-height: 1.45 !important;
    color: #333333 !important;
    margin: 0 0 24px 0 !important;
}

.tg-mobile-mega-callout-btn,
#tg-mobile-nav .tg-mobile-mega-callout-btn,
.elementor-kit-6 #tg-mobile-nav .tg-mobile-mega-callout-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #000000;
    color: #ffffff !important;
    padding: 14px 34px;
    font-family: 'brandon-grotesque', sans-serif !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    line-height: 1 !important;
    border-radius: 0;
}

/* Card at bottom of mobile subpanel */
.tg-mobile-mega-card {
    position: relative;
    width: 100%;
    min-height: 520px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 24px;
    box-sizing: border-box;
    text-align: center;
    margin-top: 20px;
    flex-shrink: 0;
}

.tg-mobile-mega-card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.28) 0%, rgba(0, 0, 0, 0.52) 100%);
    z-index: 1;
}

.tg-mobile-mega-card-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    max-width: 320px;
    margin: 0 auto;
    color: #ffffff;
    text-align: center;
}

.tg-mobile-mega-stars {
    color: #ffb800;
    font-size: 22px;
    letter-spacing: 5px;
    margin-bottom: 16px;
    line-height: 1;
    display: block;
    text-align: inherit;
}

.tg-mobile-mega-quote {
    font-family: 'beaufort-pro', Georgia, serif;
    font-size: 18px;
    line-height: 1.4;
    color: #ffffff;
    margin: 0 0 14px 0;
    padding: 0;
    text-align: inherit;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.tg-mobile-mega-author {
    font-family: 'beaufort-pro', serif;
    font-size: 18px;
    color: #ffffff;
    margin-bottom: 24px;
    text-align: inherit;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.tg-mobile-mega-card-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #000000;
    color: #ffffff !important;
    border: 1px solid #000000;
    padding: 14px 34px;
    font-family: 'brandon-grotesque', sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-decoration: none !important;
    line-height: 1;
    border-radius: 0;
}

/* ── Bottom CTA ── */
.tg-mobile-actions {
    padding: 24px 32px 48px;
    flex-shrink: 0;
}
.tg-mobile-cta {
    display: block;
    width: 100%;
    text-align: center;
    padding: 16px 24px;
    font-family: 'brandon-grotesque', sans-serif;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    background-color: #000000;
    color: #ffffff !important;
    border-radius: 0;
}

/* =============================================================
   PAGE BODY OFFSET
   ============================================================= */
body {
    padding-top: var(--tg-header-height) !important;
}

/* Hero pages: zero padding so hero extends behind transparent header */
body.home,
body.tg-hero-page {
    padding-top: 0 !important;
}

.site-header + .elementor,
.tg-header + .elementor,
.tg-header + * {
    min-height: unset !important;
    margin-top: 0 !important;
}

/* =============================================================
   ADMIN BAR OFFSET
   ============================================================= */
body.admin-bar #site-header.tg-header { top: 32px; }

body.admin-bar .tg-mega-panel {
    top: calc(32px + var(--tg-header-height));
}

@media screen and (max-width: 782px) {
    body.admin-bar #site-header.tg-header { top: 46px; }
    body.admin-bar .tg-mega-panel { top: calc(46px + var(--tg-header-height)); }
}

body.admin-bar.tg-hero-page,
body.admin-bar.home {
    padding-top: 0 !important;
}

/* =============================================================
   RESPONSIVE — MOBILE HEADER
   Layout: [☰ Hamburger LEFT] [Logo CENTER absolute] [Cart RIGHT]
   ============================================================= */
@media (max-width: 992px) {

    /* Hide desktop nav and CTA button */
    .tg-nav                  { display: none !important; }
    .tg-actions .tg-cta-btn  { display: none !important; }

    /* Header inner: keep as flex row */
    .tg-header-inner {
        padding: 0 20px !important;
    }

    /* ── Hamburger: push to FAR LEFT ── */
    .tg-mobile-toggle {
        display: flex;
        order: -1;         /* First in flex row */
        margin-left: 0;    /* Override the desktop margin-left: auto */
        margin-right: 0;
        flex-shrink: 0;
    }

    /* ── Logo stays absolutely centred (no change needed) ── */

    /* ── Actions (cart only): push to FAR RIGHT ── */
    .tg-actions {
        order: 1;
        flex: 0 0 auto;    /* Don't grow — just wrap the cart icon */
        margin-left: auto; /* Push all the way right */
        gap: 0;
    }
}

/* ── Small phones ── */
@media (max-width: 576px) {
    .tg-header-inner {
        padding: 0 15px !important;
    }

    .tg-logo .custom-logo,
    .tg-logo img {
        height: var(--tg-logo-height-mobile);
    }
}