/** * TGP Custom Header — minimal flat dark. * * Design language: WAVS-style. Solid surfaces, thin 1px borders, no * gradients, no glows, no drop-shadows, no scale-on-hover. Purple is used * as a pure accent (active link, primary CTA fill, dot indicators). * * Everything is scoped under `.tgp-hdr-root`. Inside that root we reset * link / button / svg / img / list defaults that Hello Elementor + Elementor * otherwise leak into the header (notably `a { color:#c36 }`). */ .tgp-hdr-root { /* Surfaces — neutral black/grey, no blue tint */ --hdr-bg-solid: #1c1c1c; --hdr-bg: linear-gradient(180deg, #202020 0%, #181818 100%); --hdr-bg-grad: linear-gradient(180deg, #202020 0%, #181818 100%); --hdr-search-bg: rgba(255, 255, 255, 0.05); --hdr-search-bg-hover: rgba(255, 255, 255, 0.08); --hdr-search-border: rgba(255, 255, 255, 0.08); --hdr-surface: rgba(255, 255, 255, 0.05); --hdr-surface-2: rgba(255, 255, 255, 0.08); --hdr-surface-3: rgba(255, 255, 255, 0.11); /* Single dropdown surface — account, notifications, cart, nav sub-menus, drawer, search */ --hdr-dropdown-bg: #1a1a1a; --hdr-pop: var(--hdr-dropdown-bg); --hdr-pop-solid: var(--hdr-dropdown-bg); --hdr-cart-solid: var(--hdr-dropdown-bg); /* Borders — very subtle */ --hdr-border: rgba(255, 255, 255, 0.06); --hdr-border-2: rgba(255, 255, 255, 0.10); --hdr-border-3: rgba(255, 255, 255, 0.16); /* Text */ --hdr-text: #fafafa; --hdr-text-2: #e4e4e4; --hdr-text-3: #a3a3a3; --hdr-text-4: #737373; --hdr-text-5: #525252; /* Accent — matches site brand purple (#6540F5, hero CTA), lifted slightly for header */ --hdr-accent: #6E4BF7; --hdr-accent-hover: #6045E8; --hdr-accent-soft: rgba(110, 75, 247, 0.10); --hdr-danger: #ef4444; --hdr-danger-soft: rgba(239, 68, 68, 0.08); /* Geometry */ --hdr-radius: 12px; --hdr-radius-sm: 10px; --hdr-radius-xs: 8px; --hdr-height: 58px; --hdr-max-width: 1320px; --hdr-outer-gutter: 2rem; --hdr-gutter: 0px; --hdr-ease: cubic-bezier(.22, .61, .36, 1); color-scheme: dark; font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; color: var(--hdr-text); font-size: 14px; line-height: 1.45; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; letter-spacing: 0; } /* Resets scoped to the header */ .tgp-hdr-root, .tgp-hdr-root *, .tgp-hdr-root *::before, .tgp-hdr-root *::after { box-sizing: border-box; } .tgp-hdr-root a { color: var(--hdr-text-2) !important; text-decoration: none !important; background: transparent !important; } .tgp-hdr-root a:hover, .tgp-hdr-root a:focus, .tgp-hdr-root a:active { color: var(--hdr-text) !important; text-decoration: none !important; } .tgp-hdr-root { position: relative; z-index: 1; width: 100%; isolation: isolate; overflow: visible; } /* Portal wrappers — direct children of that host the slide-out * cart drawer and main drawer. They MUST be neutral so they don't paint * a 9000-z background strip across the page (which `.tgp-hdr-root` * would otherwise do). All positioning, stacking, isolation, and * containing-block creation is intentionally disabled here so the * fixed-position panels inside align to the viewport. */ .tgp-hdr-root.tgp-hdr-portal { position: static !important; z-index: auto !important; isolation: auto !important; overflow: visible !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; background: transparent !important; background-image: none !important; transform: none !important; filter: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; contain: none !important; will-change: auto !important; perspective: none !important; } /* * Elementor header templates often wrap widgets in a boxed container with * their own max-width + horizontal padding. Strip that so `.tgp-hdr` owns * the same 1320px / 2rem column as the homepage hero + track sections. */ .elementor-location-header .elementor-section.elementor-section-boxed > .elementor-container, .elementor-location-header .e-con-boxed .e-con-inner { max-width: none !important; padding-left: 0 !important; padding-right: 0 !important; } .elementor-location-header .elementor-widget-shortcode:has(.tgp-hdr-root), .elementor-location-header .elementor-widget-shortcode:has(.tgp-hdr-root) > .elementor-widget-container { max-width: none !important; width: 100% !important; padding: 0 !important; margin: 0 !important; } /* When Elementor's sticky JS makes the header section position:fixed it * leaves left:auto, which resolves to the element's static x-position. * On some pages (WooCommerce cart) that position is offset from the viewport * left edge, so the fixed strip looks clipped. Anchoring to left:0 fixes it * without touching position, so Elementor's scroll handler sees no change * and never re-runs → no shake/jitter. */ header.elementor-location-header:has(.tgp-hdr-root) .elementor-section, header.elementor-location-header:has(.tgp-hdr-root) .e-con, .tgp-hdr-ancestor-lift .elementor-section, .tgp-hdr-ancestor-lift .e-con { left: 0 !important; } /* cart-saas.css (tgp-buyer-ui plugin ≥ v3.7.47) adds * max-width: min(1540px, calc(100vw - 40px)) * to .elementor-container inside the header on woocommerce-cart pages to * prevent a layout "canyon". Its selector specificity is (0,0,5,1) which * beats our generic header overrides at (0,0,3,1). * Adding the

element tag pushes our specificity to (0,0,5,2), * guaranteeing this rule wins and the header bar is viewport-wide. */ body.woocommerce-cart header.elementor-location-header:has(.tgp-hdr-root) .elementor-section .elementor-container { max-width: 100% !important; width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; } /* Mobile: also force every Elementor section/container/column to true 100% * width with zero gutter, otherwise the section's own padding leaves the * blurred bar visually narrower than the viewport and the search overflows. */ @media (max-width: 880px) { header.elementor-location-header:has(.tgp-hdr-root), header.elementor-location-header:has(.tgp-hdr-root) .elementor-section, header.elementor-location-header:has(.tgp-hdr-root) .elementor-container, header.elementor-location-header:has(.tgp-hdr-root) .elementor-column, header.elementor-location-header:has(.tgp-hdr-root) .elementor-widget, header.elementor-location-header:has(.tgp-hdr-root) .elementor-widget-wrap, header.elementor-location-header:has(.tgp-hdr-root) .elementor-widget-container, header.elementor-location-header:has(.tgp-hdr-root) .e-con, header.elementor-location-header:has(.tgp-hdr-root) .e-con-inner, header.elementor-location-header:has(.tgp-hdr-root) .e-flex, .tgp-hdr-ancestor-lift, .tgp-hdr-ancestor-lift .elementor-section, .tgp-hdr-ancestor-lift .elementor-container, .tgp-hdr-ancestor-lift .elementor-column, .tgp-hdr-ancestor-lift .elementor-widget, .tgp-hdr-ancestor-lift .elementor-widget-wrap, .tgp-hdr-ancestor-lift .elementor-widget-container, .tgp-hdr-ancestor-lift .e-con, .tgp-hdr-ancestor-lift .e-con-inner, .tgp-hdr-ancestor-lift .e-flex { max-width: 100% !important; width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; margin-right: 0 !important; box-sizing: border-box !important; } } /* * The TGP header lives inside `

> * .elementor-section > .elementor-container > .elementor-widget-container > * .tgp-hdr-root`. We need: * (a) sticky-at-viewport-top scrolling behaviour * (b) the header to paint above body-level fixed bars * (`.nk-header-fixed` z=800, `.nk-sidebar-fixed` z=999) * (c) the header to paint BELOW `#marketking_agent_switched_bar` * (z=99999) so its "switch back" button keeps working * * The cleanest way to get all three is to pin ONLY the outermost * `

` as sticky with a high * z-index. Its containing block is ``, which is full page height, so * sticky has room to stick. The whole subtree then paints inside its single * z=9999 stacking context — no need to lift every Elementor wrapper, and * no nested-sticky problems. */ header.elementor-location-header:has(.tgp-hdr-root), .tgp-hdr-ancestor-lift { position: sticky; top: var(--tgp-hdr-top-offset, 0px); z-index: 9999; isolation: isolate; overflow: visible; width: 100%; } .tgp-hdr-root button:not(.tgp-hdr__icon-btn):not(.tgp-hdr__avatar-btn):not(.tgp-hdr-cart__close):not(.tgp-hdr-drawer__close):not(.tgp-hdr-cart__remove) { box-sizing: border-box; cursor: pointer; font: inherit; color: inherit; background: transparent; border: 0; padding: 0; margin: 0; } .tgp-hdr-root svg { display: block; width: 18px !important; height: 18px !important; max-width: 18px !important; max-height: 18px !important; stroke: currentColor; fill: none; color: inherit; flex-shrink: 0; } .tgp-hdr-root img { max-width: 100%; height: auto; display: block; } .tgp-hdr-root ul { list-style: none !important; margin: 0 !important; padding: 0 !important; } .tgp-hdr-root ul li { list-style: none !important; margin: 0 !important; padding: 0 !important; } .tgp-hdr-root h1, .tgp-hdr-root h2, .tgp-hdr-root h3, .tgp-hdr-root h4 { margin: 0; font-family: inherit; font-weight: 700; color: inherit; letter-spacing: -0.2px; } /* ── Header bar ─────────────────────────────────────────────────────────── */ .tgp-hdr { position: relative; z-index: 1; background: var(--hdr-bg) !important; border-bottom: 1px solid var(--hdr-border); padding-inline: var(--hdr-outer-gutter); } .tgp-hdr__inner { max-width: var(--hdr-max-width); margin-inline: auto; height: var(--hdr-height); padding-inline: var(--hdr-gutter); display: flex; align-items: center; gap: 20px; width: 100%; } .tgp-hdr__left { display: flex; align-items: center; gap: 20px; flex: 0 1 auto; min-width: 0; } /* ── Logo ────────────────────────────────────────────────────────────────── */ .tgp-hdr__logo { display: inline-flex; align-items: center; flex-shrink: 0; color: var(--hdr-text); height: 100%; } .tgp-hdr__logo img { width: auto; max-height: 36px; object-fit: contain; } /* ── Search ──────────────────────────────────────────────────────────────── */ .tgp-hdr__search { flex: 0 0 320px; width: 320px; max-width: 320px; margin-left: 12px; position: relative; display: flex; align-items: center; } .tgp-hdr__search-icon { position: absolute; left: 14px; top: 50%; width: 16px !important; height: 16px !important; max-width: 16px !important; max-height: 16px !important; transform: translateY(-50%); color: var(--hdr-text-4); pointer-events: none; z-index: 2; display: inline-flex !important; align-items: center; justify-content: center; flex-shrink: 0; line-height: 0; overflow: hidden; } .tgp-hdr__search-icon svg { width: 16px !important; height: 16px !important; max-width: 16px !important; max-height: 16px !important; } .tgp-hdr__search-icon img, .tgp-hdr__search-icon-img { width: 16px !important; height: 16px !important; max-width: 16px !important; max-height: 16px !important; min-width: 16px !important; min-height: 16px !important; object-fit: contain !important; display: block !important; } .tgp-hdr__search-mobile .tgp-hdr__search-icon { width: 16px !important; height: 16px !important; max-width: 16px !important; max-height: 16px !important; } .tgp-hdr__search-mobile { display: none; position: relative; max-width: var(--hdr-max-width); margin-inline: auto; width: 100%; padding: 8px 0 12px; background: var(--hdr-bg); border-top: 1px solid var(--hdr-border); box-sizing: border-box; } .tgp-hdr__search-mobile .tgp-hdr__search-icon { left: 30px; } /* Sonaar / generic resets inside the search wrapper */ .tgp-hdr__search .srp_search_main, .tgp-hdr__search-mobile .srp_search_main { margin: 0 !important; padding: 0 !important; width: 100% !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } .tgp-hdr__search .srp_search_container, .tgp-hdr__search-mobile .srp_search_container { display: block !important; position: relative !important; width: 100% !important; height: 38px !important; min-height: 38px !important; } .tgp-hdr__search .srp_search_container > i, .tgp-hdr__search-mobile .srp_search_container > i, .tgp-hdr__search .fa-search, .tgp-hdr__search-mobile .fa-search, .tgp-hdr__search .fas, .tgp-hdr__search-mobile .fas { display: none !important; } /* But keep Sonaar's reset (X) button so users can clear */ .tgp-hdr__search .srp_reset_search, .tgp-hdr__search-mobile .srp_reset_search { position: absolute !important; right: 12px !important; top: 50% !important; transform: translateY(-50%) !important; color: var(--hdr-text-4) !important; font-size: 14px !important; cursor: pointer; display: none; background: transparent !important; } .tgp-hdr__search input, .tgp-hdr__search-mobile input, .tgp-hdr__search .srp_search, .tgp-hdr__search-mobile .srp_search { width: 100% !important; height: 38px !important; min-height: 38px !important; border: 1px solid var(--hdr-search-border) !important; background-color: var(--hdr-search-bg) !important; background-image: none !important; color: var(--hdr-text) !important; padding: 0 34px 0 38px !important; border-radius: 999px !important; font-size: 13px !important; font-family: inherit !important; font-weight: 500 !important; line-height: 38px !important; transition: border-color .12s, background-color .12s !important; box-shadow: none !important; outline: none !important; letter-spacing: 0 !important; text-transform: none !important; margin: 0 !important; vertical-align: middle !important; -webkit-appearance: none !important; appearance: none !important; } .tgp-hdr__search input::placeholder, .tgp-hdr__search-mobile input::placeholder, .tgp-hdr__search .srp_search::placeholder, .tgp-hdr__search-mobile .srp_search::placeholder { color: #525252 !important; opacity: 1 !important; font-weight: 400 !important; font-size: 12.5px !important; } .tgp-hdr__search input:hover, .tgp-hdr__search-mobile input:hover, .tgp-hdr__search .srp_search:hover, .tgp-hdr__search-mobile .srp_search:hover { border-color: rgba(255, 255, 255, 0.14) !important; background-color: var(--hdr-search-bg-hover) !important; } .tgp-hdr__search input:focus, .tgp-hdr__search input:focus-visible, .tgp-hdr__search-mobile input:focus, .tgp-hdr__search-mobile input:focus-visible, .tgp-hdr__search .srp_search:focus, .tgp-hdr__search-mobile .srp_search:focus { border-color: rgba(255, 255, 255, 0.20) !important; background-color: var(--hdr-search-bg-hover) !important; } /* Hide any standalone submit / label / leftover icon */ .tgp-hdr__search button[type="submit"], .tgp-hdr__search-mobile button[type="submit"], .tgp-hdr__search .sonaar-music-search-submit, .tgp-hdr__search-mobile .sonaar-music-search-submit, .tgp-hdr__search label, .tgp-hdr__search-mobile label, .tgp-hdr__search .iron-search-icon, .tgp-hdr__search-mobile .iron-search-icon { display: none !important; } .tgp-hdr__search .srmp3_searchResults, .tgp-hdr__search .srmp3-search-results, .tgp-hdr__search .sonaar-music-search-results, .tgp-hdr__search .srp_search_results, .tgp-hdr__search-mobile .srmp3_searchResults, .tgp-hdr__search-mobile .srmp3-search-results, .tgp-hdr__search-mobile .sonaar-music-search-results, .tgp-hdr__search-mobile .srp_search_results { background: var(--hdr-dropdown-bg) !important; border: 1px solid var(--hdr-border-2) !important; border-radius: var(--hdr-radius) !important; box-shadow: none !important; margin-top: 8px !important; padding: 6px !important; color: var(--hdr-text) !important; max-height: 60vh !important; overflow-y: auto !important; } /* ── Nav ────────────────────────────────────────────────────────────────── */ .tgp-hdr__nav { flex: 1 1 auto; min-width: 0; } .tgp-hdr__menu { display: flex !important; flex-direction: row; align-items: center; gap: 2px; } .tgp-hdr__menu > li { position: relative; } .tgp-hdr__menu .tgp-hdr__menu-link, .tgp-hdr__menu a { display: inline-flex; align-items: center; gap: 4px; padding: 6px 12px; font-size: 13.5px; font-weight: 500; color: var(--hdr-text-3) !important; border-radius: var(--hdr-radius-xs); transition: color .12s; white-space: nowrap; letter-spacing: -0.01em; text-transform: none; } .tgp-hdr__menu .tgp-hdr__menu-link:hover, .tgp-hdr__menu a:hover, .tgp-hdr__menu .current-menu-item > a, .tgp-hdr__menu .current-menu-parent > a, .tgp-hdr__menu .current-menu-ancestor > a { color: var(--hdr-text) !important; background: transparent !important; } .tgp-hdr__menu .tgp-hdr__menu-text { line-height: 1; } .tgp-hdr__menu .tgp-hdr__menu-caret { display: inline-flex; align-items: center; justify-content: center; width: 12px; height: 12px; margin-left: 2px; color: var(--hdr-text-4); transition: transform .12s, color .12s; } .tgp-hdr__menu .tgp-hdr__menu-caret svg { width: 12px; height: 12px; } .tgp-hdr__menu > li:hover > a, .tgp-hdr__menu > li:focus-within > a { color: var(--hdr-text) !important; } .tgp-hdr__menu .current-menu-item > a, .tgp-hdr__menu .current-menu-parent > a, .tgp-hdr__menu .current-menu-ancestor > a { color: var(--hdr-text) !important; position: relative; } .tgp-hdr__menu .current-menu-item > a::after, .tgp-hdr__menu .current-menu-parent > a::after, .tgp-hdr__menu .current-menu-ancestor > a::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: -2px; height: 2px; background: var(--hdr-accent); border-radius: 2px; } .tgp-hdr__menu > li:hover > a .tgp-hdr__menu-caret, .tgp-hdr__menu > li:focus-within > a .tgp-hdr__menu-caret { transform: rotate(180deg); color: var(--hdr-text-3); } /* Sub-menu */ .tgp-hdr__menu .sub-menu { position: absolute; top: calc(100% + 8px); left: 0; min-width: 220px; padding: 6px; background: var(--hdr-dropdown-bg); border: 1px solid var(--hdr-border-2); border-radius: var(--hdr-radius); opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .12s, transform .12s, visibility .12s; display: flex !important; flex-direction: column; gap: 0; z-index: 9100; } .tgp-hdr__menu .menu-item-has-children:hover > .sub-menu, .tgp-hdr__menu .menu-item-has-children:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); } .tgp-hdr__menu .sub-menu a { padding: 9px 12px; border-radius: var(--hdr-radius-xs); font-size: 13px; text-transform: none; letter-spacing: 0; color: var(--hdr-text-3) !important; font-weight: 500; } .tgp-hdr__menu .sub-menu a:hover { background: transparent; color: var(--hdr-text) !important; } /* ── Right actions ─────────────────────────────────────────────────────── */ .tgp-hdr__actions { display: flex; align-items: center; gap: 14px; margin-left: auto; flex-shrink: 0; } .tgp-hdr__actions-icons { display: inline-flex; align-items: center; gap: 8px; overflow: visible; } .tgp-hdr__actions-divider { width: 1px; height: 24px; background: var(--hdr-border-2); flex-shrink: 0; } .tgp-hdr__drop { position: relative; display: inline-flex; align-items: center; flex-shrink: 0; overflow: visible; } .tgp-hdr__inner, .tgp-hdr { overflow: visible; } /* Primary CTA — flat solid violet pill */ .tgp-hdr__cta, .tgp-hdr-root a.tgp-hdr__cta { display: inline-flex !important; align-items: center; gap: 7px; height: 38px !important; padding: 0 18px !important; border-radius: 999px !important; font-weight: 600 !important; font-size: 13px !important; letter-spacing: 0 !important; border: 0 !important; cursor: pointer; transition: background .12s; white-space: nowrap; color: #fff !important; background: var(--hdr-accent) !important; text-decoration: none !important; line-height: 1 !important; box-shadow: none !important; margin: 0 !important; } .tgp-hdr__cta svg { width: 15px; height: 15px; color: #fff; stroke-width: 2; } .tgp-hdr-root .tgp-hdr__cta:hover, .tgp-hdr-root .tgp-hdr__cta:focus { background: var(--hdr-accent-hover) !important; color: #fff !important; box-shadow: none !important; } .tgp-hdr__cta--block { width: 100%; justify-content: center; height: 44px !important; padding: 0 22px !important; margin-right: 0; } /* Subtle text link sitting next to the Login CTA for guests ("Register"). */ .tgp-hdr__textlink, .tgp-hdr-root a.tgp-hdr__textlink { display: inline-flex; align-items: center; height: 38px; padding: 0 10px; margin-left: 4px; color: rgba(255, 255, 255, 0.72) !important; font-weight: 500 !important; font-size: 13px !important; letter-spacing: 0 !important; line-height: 1 !important; text-decoration: none !important; background: transparent !important; border: 0 !important; box-shadow: none !important; white-space: nowrap; transition: color .12s; } .tgp-hdr-root a.tgp-hdr__textlink:hover, .tgp-hdr-root a.tgp-hdr__textlink:focus { color: #fff !important; text-decoration: underline !important; text-underline-offset: 3px !important; background: transparent !important; } /* Icon buttons */ .tgp-hdr-root .tgp-hdr__icon-btn, .tgp-hdr-root .tgp-hdr__avatar-btn { position: relative !important; width: 38px; height: 38px; display: inline-flex !important; align-items: center; justify-content: center; background: transparent !important; border: 0 !important; border-radius: 10px !important; color: var(--hdr-text-2) !important; cursor: pointer; transition: color .12s; padding: 0 !important; margin: 0 !important; box-shadow: none !important; } .tgp-hdr__icon-btn svg { width: 19px; height: 19px; color: var(--hdr-text-2); stroke-width: 1.7; } .tgp-hdr-root .tgp-hdr__icon-btn:hover, .tgp-hdr-root .tgp-hdr__icon-btn:focus, .tgp-hdr-root .tgp-hdr__icon-btn:focus-visible { background: transparent !important; color: var(--hdr-text) !important; outline: none !important; } .tgp-hdr__icon-btn:hover svg, .tgp-hdr__icon-btn:focus svg { color: var(--hdr-text); } .tgp-hdr__icon-btn[aria-expanded="true"] { background: transparent !important; } .tgp-hdr__icon-btn[aria-expanded="true"] svg { color: var(--hdr-text); } /* Cart bump on add — animate icon only, not the count bubble */ .tgp-hdr__cart-btn.is-bumped { animation: none; } .tgp-hdr__cart-btn.is-bumped .tgp-hdr__icon-wrap svg { animation: tgp-hdr-bump .35s ease; } @keyframes tgp-hdr-bump { 0% { transform: scale(1); } 30% { transform: scale(1.12); } 60% { transform: scale(0.97); } 100% { transform: scale(1); } } /* Icon wrap — anchors badge to the cart/bell glyph reliably */ .tgp-hdr__icon-wrap { position: relative !important; display: inline-flex; align-items: center; justify-content: center; width: 19px; height: 19px; flex-shrink: 0; overflow: visible; } .tgp-hdr__cart-btn .tgp-hdr__icon-wrap, .tgp-hdr__notif-btn .tgp-hdr__icon-wrap { position: relative !important; } .tgp-hdr__cart-btn [data-cart-badge], .tgp-hdr__icon-wrap .tgp-hdr__badge { position: absolute !important; top: -5px !important; right: -6px !important; left: auto !important; bottom: auto !important; z-index: 2; } .tgp-hdr__notif-btn .tgp-hdr__icon-wrap { width: 19px; height: 19px; } .tgp-hdr__badge { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--hdr-accent); color: #fff; font-size: 10.5px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; border: 2px solid var(--hdr-bg-solid); letter-spacing: 0; line-height: 1; font-family: inherit; box-sizing: border-box; pointer-events: none; } /* Cart + notification count — compact top-right dot */ .tgp-hdr__cart-count, .tgp-hdr__cart-btn [data-cart-badge], .tgp-hdr__notif-count { min-width: 15px; height: 15px; padding: 0 3px; font-size: 9px; font-weight: 700; line-height: 1; border: 1.5px solid var(--hdr-bg-solid); background: #e5484d; color: #fff; box-sizing: border-box; letter-spacing: -0.02em; } .tgp-hdr__cart-count[hidden], .tgp-hdr__cart-btn [data-cart-badge][hidden], .tgp-hdr__notif-count[style*="display: none"], .tgp-hdr__notif-count[hidden] { display: none !important; } /* Avatar — clickable pill with chevron, like WAVS */ .tgp-hdr__avatar-btn { width: auto !important; padding: 0 6px 0 5px !important; height: 38px !important; gap: 4px; display: inline-flex !important; align-items: center; } .tgp-hdr__avatar-btn .tgp-hdr__avatar-chevron { display: inline-flex; align-items: center; justify-content: center; color: var(--hdr-text-4); width: 14px; height: 14px; margin-right: 2px; transition: transform .12s, color .12s; } .tgp-hdr__avatar-btn .tgp-hdr__avatar-chevron svg { width: 14px; height: 14px; stroke-width: 2; } .tgp-hdr__avatar-btn[aria-expanded="true"] .tgp-hdr__avatar-chevron { transform: rotate(180deg); color: var(--hdr-text); } .tgp-hdr__avatar { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 999px; background: var(--hdr-surface-3); overflow: hidden; } .tgp-hdr__avatar img { width: 100%; height: 100%; object-fit: cover; } .tgp-hdr__avatar-fallback { display: inline-flex; width: 100%; height: 100%; align-items: center; justify-content: center; font-size: 11.5px; font-weight: 700; color: #fff; background: var(--hdr-accent); } /* Icon-only avatar button (user silhouette instead of profile photo). */ .tgp-hdr__avatar.tgp-hdr__avatar--icon { background: transparent; border: 1px solid var(--hdr-border-2, rgba(255,255,255,.18)); color: var(--hdr-text, #fafafa); } .tgp-hdr__avatar.tgp-hdr__avatar--icon svg { width: 16px !important; height: 16px !important; max-width: 16px !important; max-height: 16px !important; stroke-width: 2; } .tgp-hdr__avatar-btn--icon:hover .tgp-hdr__avatar.tgp-hdr__avatar--icon, .tgp-hdr__avatar-btn--icon:focus .tgp-hdr__avatar.tgp-hdr__avatar--icon { background: var(--hdr-surface-3, rgba(255,255,255,.06)); color: #fff; } /* Burger — hidden on desktop; only the @media query below brings it back */ .tgp-hdr__burger, .tgp-hdr-root .tgp-hdr__burger, .tgp-hdr__burger--lead, .tgp-hdr-root .tgp-hdr__burger--lead { display: none !important; } /* ── Pop-overs ──────────────────────────────────────────────────────────── */ .tgp-hdr-pop { position: absolute; top: calc(100% + 10px); right: 0; left: auto; max-width: calc(100vw - 24px); background: var(--hdr-dropdown-bg); border: 1px solid var(--hdr-border-2); border-radius: var(--hdr-radius); padding: 0; z-index: 9100; color: var(--hdr-text); opacity: 0; transform: translateY(-4px); transition: opacity .12s var(--hdr-ease), transform .12s var(--hdr-ease); pointer-events: none; } .tgp-hdr-pop--account { width: 340px; } .tgp-hdr-pop--notif { width: 360px; max-height: 520px; display: flex; flex-direction: column; } .tgp-hdr-pop[data-open="true"] { opacity: 1; transform: translateY(0); pointer-events: auto; } .tgp-hdr-pop[hidden] { display: none !important; } /* Account dropdown — flat header strip + quick-action grid + flat list */ .tgp-hdr-pop__head { display: flex; align-items: center; gap: 10px; padding: 14px 14px 12px; } .tgp-hdr-pop__avatar { width: 36px; height: 36px; border-radius: 999px; background: var(--hdr-surface-3); display: inline-flex; align-items: center; justify-content: center; overflow: hidden; flex-shrink: 0; } .tgp-hdr-pop__avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50% !important; } .tgp-hdr-pop__avatar-fallback { font-weight: 700; color: #fff; font-size: 14px; line-height: 1; background: var(--hdr-accent); width: 100%; height: 100%; display: inline-flex; align-items: center; justify-content: center; } .tgp-hdr-pop__user { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; } .tgp-hdr-pop__user-name-row { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; min-width: 0; } .tgp-hdr-pop__user-name { color: var(--hdr-text) !important; font-size: 14px; font-weight: 600; letter-spacing: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tgp-hdr-pop__user-meta { color: var(--hdr-text-3); font-size: 12px; font-weight: 500; } /* Ghost Coins — subtle inline link sits below the username like a subtitle */ .tgp-hdr-pop__coins-link { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 500; color: var(--hdr-text-3) !important; text-decoration: none !important; transition: color .12s; white-space: nowrap; } .tgp-hdr-pop__coins-link:hover { color: var(--hdr-text-2) !important; } .tgp-hdr-pop__coins-link svg { color: var(--hdr-accent); } /* Quick-action grid — 3 columns for customers, 2 columns for sellers * (so each card can fit a small label + a metric like the wallet balance) */ .tgp-hdr-pop__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 0 10px 10px; } .tgp-hdr-pop__grid--seller { grid-template-columns: repeat(2, 1fr); } .tgp-hdr-pop__tile { display: flex !important; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 6px; padding: 12px 12px 12px; background: var(--hdr-surface) !important; border: 1px solid var(--hdr-border) !important; border-radius: var(--hdr-radius-sm); color: var(--hdr-text-2) !important; transition: background .12s, border-color .12s, color .12s; min-width: 0; min-height: 70px; } .tgp-hdr-pop__grid:not(.tgp-hdr-pop__grid--seller) .tgp-hdr-pop__tile { align-items: center; justify-content: center; gap: 8px; padding: 14px 8px 12px; text-align: center; min-height: 80px; } .tgp-hdr-pop__tile-icon { display: inline-flex; align-items: center; justify-content: center; color: var(--hdr-text-3); width: 28px; height: 28px; border-radius: 8px; background: rgba(255, 255, 255, 0.05); } .tgp-hdr-pop__grid:not(.tgp-hdr-pop__grid--seller) .tgp-hdr-pop__tile-icon { background: transparent; width: auto; height: auto; } .tgp-hdr-pop__tile-icon svg { width: 16px; height: 16px; stroke-width: 1.7; } .tgp-hdr-pop__tile-label { font-size: 12px; font-weight: 600; line-height: 1.2; color: var(--hdr-text-2); } .tgp-hdr-pop__tile-amount { font-size: 14px; font-weight: 700; color: var(--hdr-text); letter-spacing: -0.2px; line-height: 1; } .tgp-hdr-pop__tile-amount, .tgp-hdr-pop__tile-amount .woocommerce-Price-amount, .tgp-hdr-pop__tile-amount .woocommerce-Price-currencySymbol, .tgp-hdr-pop__tile-amount bdi { color: inherit !important; font-size: inherit !important; font-weight: inherit !important; text-decoration: none !important; } .tgp-hdr-pop__tile-amount-row { display: flex; align-items: baseline; gap: 5px; } .tgp-hdr-pop__tile-sub { font-size: 11px; font-weight: 500; line-height: 1.25; color: var(--hdr-text-4); } .tgp-hdr-pop__tile-sub--balance { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px; color: #34d399; font-weight: 500; } .tgp-hdr-pop__tile-sub--balance .tgp-hdr-pop__tile-amount { font-size: 11px; font-weight: 600; color: #34d399 !important; } .tgp-hdr-pop__tile-sub--balance .tgp-hdr-pop__tile-amount *, .tgp-hdr-pop__tile-sub--balance .tgp-hdr-pop__tile-amount bdi, .tgp-hdr-pop__tile-sub--balance .tgp-hdr-pop__tile-amount .woocommerce-Price-amount { color: #34d399 !important; font-size: inherit !important; font-weight: inherit !important; } .tgp-hdr-pop__tile-sub--muted { color: var(--hdr-text-4); } .tgp-hdr-pop__tile--payout .tgp-hdr-pop__tile-icon { background: rgba(16, 185, 129, 0.12); color: #34d399; } .tgp-hdr-pop__tile:hover { border-color: var(--hdr-border-3) !important; color: var(--hdr-text) !important; background: var(--hdr-surface-2) !important; } .tgp-hdr-pop__tile--payout:hover { border-color: rgba(16, 185, 129, 0.28) !important; } .tgp-hdr-pop__tile:hover .tgp-hdr-pop__tile-icon { color: var(--hdr-text); } .tgp-hdr-pop__tile--payout:hover .tgp-hdr-pop__tile-icon { color: #34d399; } .tgp-hdr-pop__tile:hover .tgp-hdr-pop__tile-label { color: var(--hdr-text); } .tgp-hdr-pop__tile--payout:hover .tgp-hdr-pop__tile-sub--balance { color: #34d399; } /* Border between grid and list */ .tgp-hdr-pop__grid + .tgp-hdr-pop__list { border-top: 1px solid var(--hdr-border); } /* Flat list */ .tgp-hdr-pop__list { display: flex !important; flex-direction: column; padding: 6px; gap: 0; } .tgp-hdr-pop__item { display: flex !important; align-items: center; gap: 12px; padding: 9px 10px; border-radius: var(--hdr-radius-xs); color: var(--hdr-text-2) !important; font-size: 13px; font-weight: 500; transition: background .12s, color .12s; cursor: pointer; } .tgp-hdr-pop__item-icon { display: inline-flex; align-items: center; justify-content: center; color: var(--hdr-text-3); flex-shrink: 0; } .tgp-hdr-pop__item-icon svg { width: 16px; height: 16px; stroke-width: 1.7; } .tgp-hdr-pop__item-label { flex: 1; line-height: 1.2; } .tgp-hdr-pop__item:hover { background: transparent; color: var(--hdr-text) !important; } .tgp-hdr-pop__item:hover .tgp-hdr-pop__item-icon { color: var(--hdr-text); } .tgp-hdr-pop__item--danger { color: var(--hdr-danger) !important; } .tgp-hdr-pop__item--danger .tgp-hdr-pop__item-icon { color: var(--hdr-danger); } .tgp-hdr-pop__item--danger:hover { background: transparent; color: var(--hdr-danger) !important; } .tgp-hdr-pop__item--danger:hover .tgp-hdr-pop__item-icon { color: var(--hdr-danger); } /* Notifications dropdown */ .tgp-hdr-pop--notif .tgp-hdr-pop__title { display: flex; align-items: center; gap: 8px; padding: 14px 16px 12px; border-bottom: 1px solid var(--hdr-border); } .tgp-hdr-pop--notif .tgp-hdr-pop__title strong { color: var(--hdr-text); font-size: 13px; font-weight: 700; letter-spacing: 0; } .tgp-hdr-pop__title-meta { margin-left: auto; background: var(--hdr-accent); color: #fff; font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 999px; letter-spacing: 0; } .tgp-hdr-pop__title-meta:empty { display: none; } .tgp-hdr-pop__notif-list { overflow-y: auto; max-height: 440px; padding: 4px 6px; } .tgp-hdr-pop__notif-loading { display: flex; justify-content: center; align-items: center; padding: 40px 0; } .tgp-hdr-spinner { width: 20px; height: 20px; border: 2px solid var(--hdr-border-2); border-top-color: var(--hdr-text-3); border-radius: 50%; animation: tgp-hdr-spin .8s linear infinite; } @keyframes tgp-hdr-spin { to { transform: rotate(360deg); } } .tgp-hdr-pop__notif { display: flex; align-items: flex-start; gap: 10px; padding: 10px 10px; color: var(--hdr-text-2) !important; border-radius: var(--hdr-radius-xs); margin: 2px 0; transition: background .12s; position: relative; } .tgp-hdr-pop__notif:hover { background: transparent; } .tgp-hdr-pop__notif:hover .tgp-hdr-pop__notif-body { color: var(--hdr-text); } .tgp-hdr-pop__notif--unread { background: rgba(101, 64, 245, 0.06); } .tgp-hdr-pop__notif-avatar { width: 34px; height: 34px; border-radius: 999px; background: var(--hdr-surface-3); color: var(--hdr-text-2); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; overflow: hidden; flex-shrink: 0; } .tgp-hdr-pop__notif-avatar img { width: 100%; height: 100%; object-fit: cover; } .tgp-hdr-pop__notif-icon { width: 100%; height: 100%; display: inline-flex; align-items: center; justify-content: center; border-radius: inherit; flex-shrink: 0; } .tgp-hdr-pop__notif-icon svg { width: 16px !important; height: 16px !important; max-width: 16px !important; max-height: 16px !important; } .tgp-hdr-pop__notif-icon.is-sale { background: rgba(16, 185, 129, 0.15); color: #34d399; } .tgp-hdr-pop__notif-icon.is-new { background: rgba(101, 64, 245, 0.15); color: #a78bfa; } .tgp-hdr-pop__notif-icon.is-success { background: rgba(34, 197, 94, 0.15); color: #4ade80; } .tgp-hdr-pop__notif-icon.is-danger { background: rgba(239, 68, 68, 0.15); color: #f87171; } .tgp-hdr-pop__notif-icon.is-payout { background: rgba(167, 139, 250, 0.15); color: #c4b5fd; } .tgp-hdr-pop__notif-icon.is-review { background: rgba(245, 158, 11, 0.15); color: #fbbf24; } .tgp-hdr-pop__notif-icon.is-order { background: rgba(101, 64, 245, 0.15); color: #a78bfa; } .tgp-hdr-pop__notif-icon.is-neutral { background: rgba(255, 255, 255, 0.08); color: #a3a3a3; } .tgp-hdr-pop__notif-body { flex: 1; min-width: 0; font-size: 12.5px; line-height: 1.4; color: var(--hdr-text-2); } .tgp-hdr-pop__notif-body strong { color: var(--hdr-text); font-weight: 600; } .tgp-hdr-pop__notif-time { display: block; margin-top: 4px; color: var(--hdr-text-4); font-size: 11px; } .tgp-hdr-pop__notif-dot { width: 6px; height: 6px; border-radius: 999px; background: var(--hdr-accent); flex-shrink: 0; margin-top: 12px; } .tgp-hdr-pop__notif-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 48px 20px; color: var(--hdr-text-4); font-size: 13px; text-align: center; } .tgp-hdr-pop__notif-empty svg { width: 28px; height: 28px; opacity: 0.4; } .tgp-hdr-pop__notif-foot { border-top: 1px solid var(--hdr-border); padding: 10px 12px 12px; } .tgp-hdr-pop__notif-all { display: block !important; text-align: center; padding: 10px 12px; border-radius: var(--hdr-radius-xs); font-size: 13px; font-weight: 600; color: var(--hdr-text-2) !important; transition: color .12s, background .12s; } .tgp-hdr-pop__notif-all:hover { color: var(--hdr-text) !important; background: var(--hdr-surface); } .tgp-hdr__drop--cart { position: relative; } /* ── Mini cart dropdown ─────────────────────────────────────────────────── */ .tgp-hdr-cart { /* Inherit dropdown surface from root; keep local text/accent tokens only */ --hdr-accent: #6E4BF7; --hdr-accent-hover: #6045E8; --hdr-text: #fafafa; --hdr-text-2: #e4e4e4; --hdr-text-3: #a3a3a3; --hdr-text-4: #737373; --hdr-text-5: #525252; --hdr-border: rgba(255, 255, 255, 0.06); --hdr-border-2: rgba(255, 255, 255, 0.10); --hdr-border-3: rgba(255, 255, 255, 0.16); --hdr-danger: #ef4444; --hdr-radius: 12px; --hdr-radius-xs: 8px; --hdr-ease: cubic-bezier(.22, .61, .36, 1); --hdr-surface-2: rgba(255, 255, 255, 0.08); position: absolute; top: calc(100% + 10px); right: 0; left: auto; width: 380px; max-width: calc(100vw - 24px); z-index: 9100; pointer-events: none; color: #fafafa; font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-size: 14px; line-height: 1.45; -webkit-font-smoothing: antialiased; } .tgp-hdr-cart[data-open="true"] { pointer-events: auto; } .tgp-hdr-cart[hidden] { display: none !important; } .tgp-hdr-cart__panel { position: relative; width: 100%; max-height: min(520px, calc(100vh - var(--hdr-height) - 24px)); background: var(--hdr-dropdown-bg) !important; color: #fafafa !important; border: 1px solid var(--hdr-border-2); border-radius: var(--hdr-radius); box-shadow: none; display: flex; flex-direction: column; opacity: 0; transform: translateY(-4px); transition: opacity .12s var(--hdr-ease), transform .12s var(--hdr-ease); pointer-events: auto; isolation: isolate; overflow: hidden; } .tgp-hdr-cart[data-open="true"] .tgp-hdr-cart__panel { opacity: 1; transform: translateY(0); } /* Hard resets inside cart — theme/Elementor must not leak in */ .tgp-hdr-cart, .tgp-hdr-cart * { box-sizing: border-box; } .tgp-hdr-cart a { text-decoration: none !important; } .tgp-hdr-cart ul { list-style: none !important; margin: 0 !important; padding: 0 !important; } .tgp-hdr-cart li { list-style: none !important; margin: 0 !important; padding: 0 !important; } .tgp-hdr-root button.tgp-hdr-cart__close, .tgp-hdr-root button.tgp-hdr-cart__remove, .tgp-hdr-cart button.tgp-hdr-cart__close, .tgp-hdr-cart button.tgp-hdr-cart__remove, body .tgp-hdr-cart button.tgp-hdr-cart__close, body .tgp-hdr-cart button.tgp-hdr-cart__remove { background: transparent !important; background-color: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; margin: 0 !important; min-width: 0 !important; min-height: 0 !important; line-height: 1 !important; font-size: inherit !important; letter-spacing: 0 !important; text-transform: none !important; appearance: none !important; -webkit-appearance: none !important; } .tgp-hdr-root button.tgp-hdr-cart__close, .tgp-hdr-cart button.tgp-hdr-cart__close, body .tgp-hdr-cart button.tgp-hdr-cart__close { width: 32px !important; height: 32px !important; border-radius: 8px !important; color: #a3a3a3 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; } .tgp-hdr-root button.tgp-hdr-cart__close:hover, .tgp-hdr-cart button.tgp-hdr-cart__close:hover, body .tgp-hdr-cart button.tgp-hdr-cart__close:hover { color: #fafafa !important; background: rgba(255, 255, 255, 0.06) !important; } .tgp-hdr-cart svg { display: block; width: 18px; height: 18px; stroke: currentColor; fill: none; flex-shrink: 0; } .tgp-hdr-cart__head { display: flex; align-items: center; gap: 10px; padding: 14px 16px 12px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); background: transparent !important; } .tgp-hdr-cart__head-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; } .tgp-hdr-cart__title { margin: 0; font-size: 15px !important; font-weight: 700 !important; color: #fafafa !important; letter-spacing: -0.01em; line-height: 1.2; text-transform: none; } .tgp-hdr-cart__head-meta { color: #737373 !important; font-size: 12px; font-weight: 500; } .tgp-hdr-cart__head-meta:empty { display: none; } .tgp-hdr-root button.tgp-hdr-cart__close svg { width: 16px; height: 16px; color: currentColor; } .tgp-hdr-cart__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 10px 18px 16px; background: transparent !important; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.12) transparent; } .tgp-hdr-cart__body::-webkit-scrollbar { width: 6px; } .tgp-hdr-cart__body::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.12); border-radius: 999px; } .tgp-hdr-cart__list { display: flex !important; flex-direction: column; gap: 10px; padding: 4px 0 2px; margin: 0; list-style: none; } .tgp-hdr-cart__item { display: grid !important; grid-template-columns: 52px minmax(0, 1fr) 24px; gap: 14px; padding: 0; align-items: start; border: 0 !important; border-radius: 0; border-bottom: 0 !important; background: transparent !important; overflow: hidden; max-height: 120px; transition: opacity .2s ease, transform .2s ease, max-height .22s ease, padding-bottom .22s ease, border-color .22s ease; opacity: 1 !important; visibility: visible !important; } .tgp-hdr-cart__item:not(:last-child) { padding-bottom: 12px; border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important; } .tgp-hdr-cart__item:hover { background: transparent !important; } .tgp-hdr-cart__item, .tgp-hdr-cart__item *:not(img):not(svg):not(path) { opacity: 1 !important; visibility: visible !important; } .tgp-hdr-cart__item.is-removing { opacity: 0 !important; transform: translateX(10px); max-height: 0 !important; padding-bottom: 0 !important; border-bottom-color: transparent !important; pointer-events: none; } [data-cart-foot].is-updating .tgp-hdr-cart__totals-value { position: relative; display: inline-block; min-width: 72px; min-height: 1.1em; transform-origin: right center; overflow: hidden; } [data-cart-foot].is-updating .tgp-hdr-cart__totals-value > * { opacity: 0 !important; transition: opacity .15s ease; } [data-cart-foot].is-updating .tgp-hdr-cart__totals-value::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 18px; transform: translateY(-50%); border-radius: 4px; background: linear-gradient( 90deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.16) 50%, rgba(255, 255, 255, 0.06) 100% ); background-size: 200% 100%; animation: tgp-hdr-shimmer 1.1s ease-in-out infinite; } .tgp-hdr-cart__totals-value.is-subtotal-updated { animation: tgp-hdr-subtotal-pop .48s cubic-bezier(.22, .61, .36, 1); } @keyframes tgp-hdr-subtotal-pop { 0% { opacity: 0.35; transform: scale(0.94); } 55% { opacity: 1; transform: scale(1.05); } 100% { opacity: 1; transform: scale(1); } } .tgp-hdr-cart__item.is-entering { opacity: 0; transform: translateY(-8px); } .tgp-hdr-cart__item.is-entering.is-entering-active { opacity: 1; transform: translateY(0); transition: opacity .24s ease, transform .24s ease; } .tgp-hdr-cart__thumb { position: relative; width: 52px; height: 52px; border-radius: 6px; overflow: hidden; background: #1a1a1e; flex-shrink: 0; display: block; align-self: start; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06); } .tgp-hdr-cart__thumb img { width: 100%; height: 100%; object-fit: cover; } .tgp-hdr-cart__content { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding-top: 2px; } .tgp-hdr-cart__meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; } .tgp-hdr-cart__by-spacer { flex: 1; } .tgp-hdr-root .tgp-hdr-cart a.tgp-hdr-cart__name, .tgp-hdr-cart a.tgp-hdr-cart__name { color: #fafafa !important; font-size: 13.5px !important; font-weight: 600 !important; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; letter-spacing: -0.01em; opacity: 1 !important; display: block; } .tgp-hdr-root .tgp-hdr-cart a.tgp-hdr-cart__name:hover, .tgp-hdr-root .tgp-hdr-cart a.tgp-hdr-cart__name:focus, .tgp-hdr-cart a.tgp-hdr-cart__name:hover, .tgp-hdr-cart a.tgp-hdr-cart__name:focus { color: #b8a8ff !important; } .tgp-hdr-cart__by { display: flex; align-items: center; gap: 4px; font-size: 11.5px; color: #525252 !important; line-height: 1.3; min-width: 0; flex: 1 1 auto; opacity: 1 !important; } .tgp-hdr-cart__by-label { color: #525252 !important; flex-shrink: 0; } .tgp-hdr-root .tgp-hdr-cart a.tgp-hdr-cart__by-name, .tgp-hdr-root .tgp-hdr-cart span.tgp-hdr-cart__by-name, .tgp-hdr-cart a.tgp-hdr-cart__by-name, .tgp-hdr-cart span.tgp-hdr-cart__by-name, body .tgp-hdr-cart a.tgp-hdr-cart__by-name, body .tgp-hdr-cart span.tgp-hdr-cart__by-name { color: #737373 !important; font-weight: 500 !important; font-size: 11.5px !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .tgp-hdr-root .tgp-hdr-cart a.tgp-hdr-cart__by-name, .tgp-hdr-cart a.tgp-hdr-cart__by-name, body .tgp-hdr-cart a.tgp-hdr-cart__by-name { text-decoration: none !important; transition: color 0.15s ease; } .tgp-hdr-root .tgp-hdr-cart a.tgp-hdr-cart__by-name:hover, .tgp-hdr-root .tgp-hdr-cart a.tgp-hdr-cart__by-name:focus, .tgp-hdr-cart a.tgp-hdr-cart__by-name:hover, .tgp-hdr-cart a.tgp-hdr-cart__by-name:focus, body .tgp-hdr-cart a.tgp-hdr-cart__by-name:hover, body .tgp-hdr-cart a.tgp-hdr-cart__by-name:focus { color: #949494 !important; } .tgp-hdr-cart__price { display: inline-flex; align-items: baseline; flex-shrink: 0; margin: 0; color: #e4e4e7 !important; font-size: 13px !important; font-weight: 600 !important; letter-spacing: 0; line-height: 1.3; opacity: 1 !important; white-space: nowrap; } .tgp-hdr-cart__price *, .tgp-hdr-cart__price .woocommerce-Price-amount, .tgp-hdr-cart__price .woocommerce-Price-currencySymbol, .tgp-hdr-cart__price bdi, .tgp-hdr-cart__price span { color: #e4e4e7 !important; font-size: inherit !important; font-weight: inherit !important; opacity: 1 !important; } .tgp-hdr-cart__remove { width: 24px; height: 24px; border-radius: 6px; color: #52525b !important; background: transparent !important; border: 0 !important; display: inline-flex !important; align-items: center; justify-content: center; transition: color .12s, background .12s; flex-shrink: 0; align-self: start; margin-top: 1px; opacity: 0.7; } .tgp-hdr-cart__item:hover .tgp-hdr-cart__remove { opacity: 1; } .tgp-hdr-cart__remove:hover { background: rgba(239, 68, 68, 0.1) !important; color: #ef4444 !important; opacity: 1; } .tgp-hdr-cart__remove.is-busy { background: transparent !important; color: #737373 !important; } .tgp-hdr-cart__remove svg { width: 13px; height: 13px; stroke-width: 2; } .tgp-hdr-cart__remove.is-busy svg { animation: tgp-hdr-spin .8s linear infinite; } /* Cart loading skeleton */ .tgp-hdr-cart.is-cart-loading [data-cart-body] { min-height: 120px; } .tgp-hdr-cart__skeleton { display: grid; grid-template-columns: 52px 1fr; gap: 14px; padding: 14px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.06); } .tgp-hdr-cart__skeleton:last-child { border-bottom: 0; } .tgp-hdr-cart__skeleton-thumb, .tgp-hdr-cart__skeleton-line, .tgp-hdr-cart__skeleton-actions { background: linear-gradient( 90deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.10) 50%, rgba(255, 255, 255, 0.05) 100% ); background-size: 200% 100%; animation: tgp-hdr-shimmer 1.1s ease-in-out infinite; border-radius: 6px; } .tgp-hdr-cart__skeleton-thumb { width: 52px; height: 52px; } .tgp-hdr-cart__skeleton-lines { display: flex; flex-direction: column; gap: 10px; padding-top: 6px; } .tgp-hdr-cart__skeleton-line { height: 12px; width: 100%; } .tgp-hdr-cart__skeleton-line--short { width: 55%; } .tgp-hdr-cart__skeleton-line--wide { height: 16px; width: 100%; margin-bottom: 12px; } .tgp-hdr-cart__skeleton-foot { padding-top: 4px; } .tgp-hdr-cart__skeleton-actions { height: 44px; width: 100%; border-radius: 10px; } @keyframes tgp-hdr-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } .tgp-hdr-drawer__section--account { padding-top: 4px; } /* Footer */ .tgp-hdr-cart__foot { padding: 14px 18px 22px; border-top: 1px solid rgba(255, 255, 255, 0.06); display: flex; flex-direction: column; gap: 12px; background: transparent !important; } .tgp-hdr-cart__foot:empty { display: none; } .tgp-hdr-cart__totals { display: flex; flex-direction: column; padding: 0; border: 0; border-radius: 0; background: transparent; } .tgp-hdr-cart__totals-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .tgp-hdr-cart__totals-label { font-size: 12px; font-weight: 600; color: #737373 !important; letter-spacing: 0.02em; text-transform: uppercase; } .tgp-hdr-cart__totals-value { display: inline-block; transform-origin: right center; font-size: 18px !important; font-weight: 700 !important; color: #fafafa !important; letter-spacing: -0.02em; line-height: 1.1; white-space: nowrap; } .tgp-hdr-cart__totals-value, .tgp-hdr-cart__totals-value *, .tgp-hdr-cart__totals-value bdi, .tgp-hdr-cart__totals-value .woocommerce-Price-amount { color: #fafafa !important; font-size: inherit !important; font-weight: inherit !important; opacity: 1 !important; } .tgp-hdr-cart__actions { display: flex; gap: 8px; } .tgp-hdr-root .tgp-hdr-cart a.tgp-hdr-cart__view, .tgp-hdr-root .tgp-hdr-cart a.tgp-hdr-cart__checkout, .tgp-hdr-cart a.tgp-hdr-cart__view, .tgp-hdr-cart a.tgp-hdr-cart__checkout, body .tgp-hdr-cart a.tgp-hdr-cart__view, body .tgp-hdr-cart a.tgp-hdr-cart__checkout { flex: 1 1 0; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 6px; height: 44px !important; min-height: 44px !important; padding: 0 16px !important; border-radius: 10px !important; font-weight: 600 !important; font-size: 13px !important; border: 0; transition: background .12s, color .12s, border-color .12s, box-shadow .12s; letter-spacing: 0 !important; line-height: 1 !important; text-decoration: none !important; box-sizing: border-box !important; white-space: nowrap; } .tgp-hdr-root .tgp-hdr-cart a.tgp-hdr-cart__view, .tgp-hdr-cart a.tgp-hdr-cart__view, body .tgp-hdr-cart a.tgp-hdr-cart__view { flex: 0 0 38%; background: rgba(255, 255, 255, 0.06) !important; color: #fafafa !important; border: 1px solid rgba(255, 255, 255, 0.22) !important; } .tgp-hdr-root .tgp-hdr-cart a.tgp-hdr-cart__view:hover, .tgp-hdr-root .tgp-hdr-cart a.tgp-hdr-cart__view:focus, .tgp-hdr-cart a.tgp-hdr-cart__view:hover, .tgp-hdr-cart a.tgp-hdr-cart__view:focus, body .tgp-hdr-cart a.tgp-hdr-cart__view:hover, body .tgp-hdr-cart a.tgp-hdr-cart__view:focus { background: rgba(255, 255, 255, 0.10) !important; color: #fff !important; border-color: rgba(255, 255, 255, 0.32) !important; } .tgp-hdr-root .tgp-hdr-cart a.tgp-hdr-cart__checkout, .tgp-hdr-cart a.tgp-hdr-cart__checkout, body .tgp-hdr-cart a.tgp-hdr-cart__checkout { flex: 1 1 auto; background: var(--hdr-accent) !important; color: #fff !important; border: 0 !important; box-shadow: none !important; } .tgp-hdr-root .tgp-hdr-cart a.tgp-hdr-cart__checkout:hover, .tgp-hdr-root .tgp-hdr-cart a.tgp-hdr-cart__checkout:focus, .tgp-hdr-cart a.tgp-hdr-cart__checkout:hover, .tgp-hdr-cart a.tgp-hdr-cart__checkout:focus, body .tgp-hdr-cart a.tgp-hdr-cart__checkout:hover, body .tgp-hdr-cart a.tgp-hdr-cart__checkout:focus { background: var(--hdr-accent-hover) !important; color: #fff !important; box-shadow: none !important; } .tgp-hdr-cart__checkout-arrow { font-weight: 600; transition: transform .12s; } .tgp-hdr-cart a.tgp-hdr-cart__checkout:hover .tgp-hdr-cart__checkout-arrow { transform: translateX(2px); } .tgp-hdr-cart__empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 60px 24px; text-align: center; } .tgp-hdr-cart__empty-icon { width: 56px; height: 56px; border-radius: 999px; background: rgba(255, 255, 255, 0.06); display: inline-flex; align-items: center; justify-content: center; color: #737373; margin-bottom: 6px; } .tgp-hdr-cart__empty-icon svg { width: 24px; height: 24px; } .tgp-hdr-cart__empty-title { font-size: 14px; font-weight: 600; color: #fafafa; margin: 0; letter-spacing: 0; } .tgp-hdr-cart__empty-sub { font-size: 12.5px; color: #737373; margin: 0; max-width: 240px; } .tgp-hdr-cart__shop-btn { margin-top: 14px; display: inline-flex; height: 38px; padding: 0 20px; align-items: center; border-radius: 10px; background: var(--hdr-accent) !important; color: #fff !important; font-weight: 600; font-size: 13px; transition: background .12s; } .tgp-hdr-cart__shop-btn:hover { background: var(--hdr-accent-hover) !important; } /* ── Drawer ─────────────────────────────────────────────────────────────── */ .tgp-hdr-drawer { position: fixed; inset: 0; z-index: 99998; display: flex; } .tgp-hdr-drawer[hidden] { display: none !important; } .tgp-hdr-drawer__backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.6); opacity: 0; transition: opacity .2s var(--hdr-ease); } .tgp-hdr-drawer[data-open="true"] .tgp-hdr-drawer__backdrop { opacity: 1; } .tgp-hdr-drawer__panel { position: relative; width: 360px; max-width: 88vw; height: 100%; background: var(--hdr-dropdown-bg); border-right: 1px solid var(--hdr-border-2); color: var(--hdr-text); display: flex; flex-direction: column; transform: translateX(-100%); transition: transform .25s var(--hdr-ease); } .tgp-hdr-drawer[data-open="true"] .tgp-hdr-drawer__panel { transform: translateX(0); } .tgp-hdr-drawer__head { display: flex; align-items: center; justify-content: space-between; flex-direction: row; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--hdr-border); } .tgp-hdr-drawer__head .tgp-hdr__logo { flex: 0 0 auto; margin-right: auto; order: 1; } .tgp-hdr-drawer__head .tgp-hdr-drawer__close { order: 2; margin-left: auto; } /* ── Body-lock when overlay open ───────────────────────────────────────── */ body.tgp-hdr-locked { overflow: hidden !important; } /* ──────────────────────────────────────────────────────────────────────── * Strip any background from the Elementor wrappers that host the header. * The header itself paints the solid `--hdr-bg` strip — wrappers must be * transparent so they never leak a different colour (padding strip, edge * highlights, etc.) around it. * ──────────────────────────────────────────────────────────────────── */ header.elementor-location-header:has(.tgp-hdr-root), .tgp-hdr-ancestor-lift, header.elementor-location-header:has(.tgp-hdr-root) .elementor-section, header.elementor-location-header:has(.tgp-hdr-root) .elementor-container, header.elementor-location-header:has(.tgp-hdr-root) .elementor-column, header.elementor-location-header:has(.tgp-hdr-root) .elementor-widget, header.elementor-location-header:has(.tgp-hdr-root) .elementor-widget-wrap, header.elementor-location-header:has(.tgp-hdr-root) .elementor-widget-container, header.elementor-location-header:has(.tgp-hdr-root) .e-con, header.elementor-location-header:has(.tgp-hdr-root) .e-con-inner, header.elementor-location-header:has(.tgp-hdr-root) .e-flex { background-color: transparent !important; background-image: none !important; } /* ── Responsive ─────────────────────────────────────────────────────────── */ @media (max-width: 1280px) { .tgp-hdr__menu .tgp-hdr__menu-link, .tgp-hdr__menu a { padding: 6px 10px; font-size: 13px; } .tgp-hdr__inner { gap: 16px; } } @media (max-width: 1024px) { .tgp-hdr__nav { display: none; } .tgp-hdr__burger--lead, .tgp-hdr-root .tgp-hdr__burger--lead { display: inline-flex !important; } .tgp-hdr__search { flex: 0 0 240px; width: 240px; max-width: 240px; margin-left: 12px; } } /* ──────────────────────────────────────────────────────────────────────── * MOBILE LAYOUT (≤ 880px) * * Goal: edge-to-edge full-width bar. Logo flush LEFT, compact search in * the middle, cart + burger flush RIGHT. Larger logo + icons, minimal * outer padding so the content reaches the screen edges. * ──────────────────────────────────────────────────────────────────── */ @media (max-width: 880px) { .tgp-hdr-root { --hdr-height: 56px; } .tgp-hdr { padding-inline: 0; } .tgp-hdr__inner { max-width: none !important; width: 100% !important; margin-inline: 0 !important; padding-inline: 8px; gap: 8px; height: 56px; } /* Logo flush to the LEFT edge */ .tgp-hdr__logo { order: 1; flex: 0 0 auto; justify-content: flex-start; min-width: 0; padding-left: 6px; } .tgp-hdr__logo img { max-height: 44px; width: auto; } /* Search occupies the middle. Selector specificity matches the inline * guard CSS that forces `display: flex !important` site-wide. * `min-width: 0` guarantees the input shrinks inside the available * flex space instead of pushing icons off-screen. We keep `overflow` * visible so the rounded pill's edges aren't cropped — the input has * the same height as its containers so nothing overflows anyway. */ .tgp-hdr-root .tgp-hdr__search, .tgp-hdr-root div.tgp-hdr__search { order: 2; display: flex !important; flex: 1 1 0% !important; min-width: 0 !important; width: auto !important; max-width: none !important; margin: 0 !important; overflow: visible !important; } .tgp-hdr__search .srp_search_main, .tgp-hdr__search .srp_search_container { width: 100% !important; min-width: 0 !important; /* Match input height — the default 38px was 2px shorter than the * input below it, so `overflow: hidden` was clipping the pill's * bottom rounded edge on mobile. */ height: 40px !important; min-height: 40px !important; max-height: 40px !important; overflow: visible !important; } .tgp-hdr__search-icon { left: 12px; width: 16px; height: 16px; } .tgp-hdr__search input, .tgp-hdr__search .srp_search { width: 100% !important; min-width: 0 !important; height: 40px !important; min-height: 40px !important; line-height: 40px !important; font-size: 13px !important; padding-left: 36px !important; padding-right: 12px !important; border-radius: 999px !important; } /* Hide desktop-only chrome in the top bar */ .tgp-hdr__nav, .tgp-hdr-root .tgp-hdr__cta, .tgp-hdr-root a.tgp-hdr__cta, .tgp-hdr-root .tgp-hdr__textlink, .tgp-hdr-root .tgp-hdr__avatar-btn, .tgp-hdr__drop--notif, .tgp-hdr__actions-divider { display: none !important; } /* Actions cluster (cart) pinned to the RIGHT, immediately before burger */ .tgp-hdr__actions { order: 98; gap: 2px; margin-left: 0; flex-shrink: 0; } .tgp-hdr__actions-icons { gap: 0; } .tgp-hdr__burger--lead, .tgp-hdr-root .tgp-hdr__burger--lead { order: 99; display: inline-flex !important; flex-shrink: 0; margin-left: 2px; margin-right: 4px; } .tgp-hdr__icon-btn { width: 48px !important; height: 48px !important; } .tgp-hdr__icon-btn svg { width: 26px; height: 26px; } /* Full-screen cart sheet */ .tgp-hdr__drop--cart { position: static; } .tgp-hdr-cart { position: fixed !important; inset: 0 !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; width: 100% !important; max-width: none !important; z-index: 99999; } .tgp-hdr-cart__panel { position: absolute; inset: 0; width: 100%; height: 100%; max-height: none; border: 0; border-radius: 0; opacity: 1; transform: translateX(100%); transition: transform .28s var(--hdr-ease); } .tgp-hdr-cart[data-open="true"] .tgp-hdr-cart__panel { opacity: 1; transform: translateX(0); } .tgp-hdr-cart__head { padding: max(16px, env(safe-area-inset-top)) 18px 14px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .tgp-hdr-cart__title { font-size: 18px !important; } .tgp-hdr-root button.tgp-hdr-cart__close, .tgp-hdr-cart button.tgp-hdr-cart__close, body .tgp-hdr-cart button.tgp-hdr-cart__close { width: 40px !important; height: 40px !important; } .tgp-hdr-cart__body { flex: 1 1 auto; padding: 8px 18px 16px; -webkit-overflow-scrolling: touch; } .tgp-hdr-cart__list { gap: 14px; } .tgp-hdr-cart__item { padding: 6px 0 14px; } .tgp-hdr-cart__thumb { width: 56px; height: 56px; } .tgp-hdr-root .tgp-hdr-cart a.tgp-hdr-cart__name, .tgp-hdr-cart a.tgp-hdr-cart__name { font-size: 14.5px !important; } .tgp-hdr-cart__remove { opacity: 1 !important; width: 32px; height: 32px; } .tgp-hdr-cart__foot { flex-shrink: 0; padding: 16px 18px max(20px, env(safe-area-inset-bottom)); border-top: 1px solid rgba(255, 255, 255, 0.08); background: var(--hdr-dropdown-bg) !important; } .tgp-hdr-cart__totals-value { font-size: 20px !important; } .tgp-hdr-cart__actions { flex-direction: column; gap: 10px; } .tgp-hdr-root .tgp-hdr-cart a.tgp-hdr-cart__view, .tgp-hdr-root .tgp-hdr-cart a.tgp-hdr-cart__checkout, .tgp-hdr-cart a.tgp-hdr-cart__view, .tgp-hdr-cart a.tgp-hdr-cart__checkout, body .tgp-hdr-cart a.tgp-hdr-cart__view, body .tgp-hdr-cart a.tgp-hdr-cart__checkout { flex: 0 0 auto !important; width: 100% !important; height: 48px !important; min-height: 48px !important; font-size: 14px !important; border-radius: 12px !important; } .tgp-hdr-cart__empty { padding: 48px 24px; } } /* ──────────────────────────────────────────────────────────────────────── * Drawer panel — full-screen on mobile, with content scroll + sticky foot * ──────────────────────────────────────────────────────────────────── */ @media (max-width: 880px) { .tgp-hdr-drawer__panel { width: 100vw !important; max-width: 100vw !important; overflow: hidden; } } .tgp-hdr-drawer__head { flex-shrink: 0; background: transparent; } .tgp-hdr-drawer__head .tgp-hdr__logo img { max-height: 36px; } .tgp-hdr-root button.tgp-hdr-drawer__close, .tgp-hdr-drawer button.tgp-hdr-drawer__close, body .tgp-hdr-drawer button.tgp-hdr-drawer__close { appearance: none !important; -webkit-appearance: none !important; background: transparent !important; background-color: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; margin: 0 !important; min-width: 0 !important; min-height: 0 !important; width: 36px !important; height: 36px !important; border-radius: 8px !important; color: #a3a3a3 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; line-height: 1 !important; font-size: inherit !important; letter-spacing: 0 !important; text-transform: none !important; transition: color .12s, background .12s; flex-shrink: 0; } .tgp-hdr-root button.tgp-hdr-drawer__close:hover, .tgp-hdr-drawer button.tgp-hdr-drawer__close:hover, body .tgp-hdr-drawer button.tgp-hdr-drawer__close:hover { background: rgba(255, 255, 255, 0.06) !important; color: #fafafa !important; } .tgp-hdr-drawer__close svg { width: 18px; height: 18px; color: currentColor; } .tgp-hdr-drawer__scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding-bottom: 8px; scrollbar-width: thin; scrollbar-color: var(--hdr-border-2) transparent; } .tgp-hdr-drawer__scroll::-webkit-scrollbar { width: 6px; } .tgp-hdr-drawer__scroll::-webkit-scrollbar-thumb { background: var(--hdr-border-2); border-radius: 999px; } /* Profile row below drawer header (logged-in) */ .tgp-hdr-drawer__profile { display: flex; align-items: center; gap: 11px; min-width: 0; } .tgp-hdr-drawer__profile--scroll { padding: 12px 16px 4px; } .tgp-hdr-drawer__profile-avatar-link, .tgp-hdr-drawer__profile-name-link { color: inherit !important; text-decoration: none !important; background: transparent !important; } .tgp-hdr-drawer__profile-avatar-link { flex-shrink: 0; } .tgp-hdr-drawer__profile-avatar { width: 36px; height: 36px; border-radius: 999px; overflow: hidden; flex-shrink: 0; background: var(--hdr-surface-2); border: 1px solid var(--hdr-border); display: inline-flex; align-items: center; justify-content: center; } .tgp-hdr-drawer__profile-avatar img { width: 100%; height: 100%; object-fit: cover; } .tgp-hdr-drawer__profile-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; } .tgp-hdr-drawer__profile-name-link { display: block; font-size: 14px; font-weight: 600; color: var(--hdr-text) !important; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tgp-hdr-drawer__profile-meta { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 11.5px; line-height: 1.3; color: var(--hdr-text-3); } .tgp-hdr-drawer__profile-meta-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tgp-hdr-drawer__profile-rewards { flex-shrink: 0; color: var(--hdr-accent) !important; font-size: 11.5px; font-weight: 600; text-decoration: none !important; background: transparent !important; } .tgp-hdr-drawer__profile-rewards:hover { color: var(--hdr-accent-hover) !important; } /* Drawer quick action grid */ .tgp-hdr-drawer__grid { margin: 8px 16px 16px; padding: 0 !important; } /* Sections */ .tgp-hdr-drawer__section { padding: 8px 8px 12px; } .tgp-hdr-drawer__section-label { display: block; padding: 4px 12px 8px; color: var(--hdr-text-4); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; } /* Drawer links — big-touch list items */ .tgp-hdr-drawer__link { display: flex !important; align-items: center; gap: 14px; padding: 12px 14px; border-radius: var(--hdr-radius-xs); color: var(--hdr-text-2) !important; font-size: 14px; font-weight: 500; min-height: 44px; transition: background .12s, color .12s; position: relative; } .tgp-hdr-drawer__link .tgp-hdr-pop__item-icon { color: var(--hdr-text-3); } .tgp-hdr-drawer__link .tgp-hdr-pop__item-icon svg { width: 18px; height: 18px; } .tgp-hdr-drawer__link:hover, .tgp-hdr-drawer__link:focus { background: transparent; color: var(--hdr-text) !important; outline: none; } .tgp-hdr-drawer__link:hover .tgp-hdr-pop__item-icon { color: var(--hdr-text); } .tgp-hdr-drawer__link--danger { color: var(--hdr-danger) !important; } .tgp-hdr-drawer__link--danger .tgp-hdr-pop__item-icon { color: var(--hdr-danger); } .tgp-hdr-drawer__link--danger:hover { background: transparent; color: var(--hdr-danger) !important; } .tgp-hdr-drawer__inline-badge { position: static; margin-left: auto; border-color: var(--hdr-surface); } /* Drawer notifications preview (mobile) */ .tgp-hdr-drawer__section--notifs { display: flex; flex-direction: column; gap: 0; } .tgp-hdr-drawer__notif-panel { margin: 0 0 4px; border: 1px solid var(--hdr-border); border-radius: var(--hdr-radius-sm); background: var(--hdr-surface); overflow: hidden; } .tgp-hdr-drawer__notif-loading { display: flex; justify-content: center; align-items: center; padding: 28px 16px; } .tgp-hdr-drawer__notif-list { display: flex; flex-direction: column; padding: 4px; } .tgp-hdr-drawer__notif-list .tgp-hdr-pop__notif { margin: 0; padding: 12px 10px; border-radius: var(--hdr-radius-xs); } .tgp-hdr-drawer__notif-list .tgp-hdr-pop__notif + .tgp-hdr-pop__notif { border-top: 1px solid var(--hdr-border); } .tgp-hdr-drawer__notif-list .tgp-hdr-pop__notif-empty { padding: 28px 16px; } .tgp-hdr-drawer__link--notif-all { margin-top: 2px; } /* Sticky drawer footer */ .tgp-hdr-drawer__foot { flex-shrink: 0; padding: 10px 16px env(safe-area-inset-bottom, 14px); border-top: 1px solid var(--hdr-border); background: rgba(0, 0, 0, 0.15); } .tgp-hdr-drawer__foot .tgp-hdr-drawer__link { min-height: 48px; } /* Drawer nav — overrides the old generic style so it looks like the * section list (large, easy-tap rows with no uppercase) */ .tgp-hdr-drawer__nav { padding: 0 !important; } .tgp-hdr-drawer__nav .tgp-hdr__menu { flex-direction: column !important; align-items: stretch !important; gap: 0 !important; } .tgp-hdr-drawer__nav .tgp-hdr__menu > li > a, .tgp-hdr-drawer__nav .tgp-hdr__menu a { display: flex !important; align-items: center; min-height: 44px; padding: 12px 14px !important; font-size: 14px !important; font-weight: 500 !important; text-transform: none !important; letter-spacing: 0 !important; color: var(--hdr-text-2) !important; border-radius: var(--hdr-radius-xs); } .tgp-hdr-drawer__nav .tgp-hdr__menu > li > a:hover { background: transparent; color: var(--hdr-text) !important; } .tgp-hdr-drawer__nav .tgp-hdr__menu .current-menu-item > a, .tgp-hdr-drawer__nav .tgp-hdr__menu .current-menu-parent > a, .tgp-hdr-drawer__nav .tgp-hdr__menu .current-menu-ancestor > a { color: var(--hdr-text) !important; background: transparent; } .tgp-hdr-drawer__nav .tgp-hdr__menu .current-menu-item > a::after, .tgp-hdr-drawer__nav .tgp-hdr__menu .current-menu-parent > a::after, .tgp-hdr-drawer__nav .tgp-hdr__menu .current-menu-ancestor > a::after { display: none !important; } .tgp-hdr-drawer__nav .tgp-hdr__menu .tgp-hdr__menu-caret { display: none; } .tgp-hdr-drawer__nav .sub-menu { position: static !important; opacity: 1 !important; visibility: visible !important; transform: none !important; background: transparent !important; border: 0 !important; padding: 0 0 4px 14px !important; margin: 0 !important; backdrop-filter: none !important; } .tgp-hdr-drawer__nav .sub-menu a { min-height: 40px; font-size: 13px !important; padding: 10px 12px !important; color: var(--hdr-text-3) !important; } .tgp-hdr-drawer__nav .sub-menu a:hover { background: transparent; color: var(--hdr-text) !important; } /* Tighten the drawer-nested popup grid for mobile */ @media (max-width: 880px) { .tgp-hdr-pop__grid--seller { grid-template-columns: repeat(2, 1fr); } .tgp-hdr-pop__tile { min-height: 78px; } } .tgp-hdr-root [hidden] { display: none !important; }