/* ============================================================
   SHARED SITE HEADER / DRAWER / CONTACT US / HELP & SUPPORT
   Single source of truth for chrome used across every page.
   Loaded alongside shared-header.frag (markup, inlined into each real
   page's HTML at build time by scripts/build-test.js -- see that
   file's own comment) and shared-header.js (behavior only now, no
   longer fetches/injects the markup). Edit here once - every page
   picks it up, instead of drifting copies.
   ============================================================ */

      html {
        scrollbar-gutter: stable;
        overflow-y: scroll;
      }

      /* Reserves the header's real height before shared-header.js's fetch
         resolves and replaces this placeholder, so nothing below it jumps
         down once the header lands - without this, the mount div starts at
         0 height (empty), the page renders as if there's no header at all,
         and then everything shifts down the instant the real header is
         injected. Each page defines --header-h itself (194px desktop /
         172px mobile, see shared-header.css's own mobile media query for
         the latter) as a static best-guess fallback for first paint; the
         real measured value takes over immediately after injection via
         updateHeaderHeightVar(). */
      #shared-header-mount {
        min-height: var(--header-h);
      }

      .sticky-header-container {
        position: sticky;
        top: 0;
        z-index: 1000;
        width: 100%;
        background-color: rgba(0, 0, 0, 0.92);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        box-shadow: none;
        padding-top: max(0px, env(safe-area-inset-top));
      }

      /* 1. Top Status Bar Clearance */
      .top-dark-bar {
        background-color: #0b0b0d;
        height: 28px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
      }

      /* 2. Main Navigation Header Bar */
      .main-nav-bar {
        color: #ffffff;
        padding: 16px 36px 14px;
        min-height: var(--nav-header-height);
        display: flex;
        align-items: center;
        justify-content: space-between;
      }

      .nav-left {
        display: flex;
        align-items: center;
      }

      .brand-tagline {
        display: flex;
        align-items: center;
      }

      .brand-title-inline {
        display: flex;
        align-items: center;
        gap: 8px;
        font-family: 'Plus Jakarta Sans', sans-serif;
      }

      .sticky-header-container .brand-name,
      .main-nav-bar .brand-name,
      .brand-name {
        font-size: 18px !important;
        font-weight: 700 !important;
        letter-spacing: -0.5px !important;
        color: #ffffff !important;
      }

      .brand-dot {
        font-size: 11px;
        color: rgba(255, 255, 255, 0.35);
      }

      .sticky-header-container .brand-sub,
      .main-nav-bar .brand-sub,
      .brand-sub {
        font-size: 12.5px !important;
        font-weight: 500 !important;
        color: #98989d !important;
        letter-spacing: -0.1px !important;
      }

      .nav-right-icons {
        display: flex;
        align-items: center;
        gap: 18px;
      }

      .nav-icon-btn {
        position: relative;
        background: none;
        border: none;
        color: #ffffff;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 4px;
        transition: transform 0.2s ease;
      }

      .nav-icon-btn:hover {
        transform: scale(1.12);
      }

      .nav-icon-btn svg {
        width: 21px;
        height: 21px;
      }

      /* Self-contained cart count badge - not dependent on product-style.css
         so it works identically on every page that includes the shared
         header, whether or not that page also loads product-style.css. */
      .cart-count-badge {
        position: absolute;
        top: -2px;
        right: -2px;
        background: #0071e3;
        color: #fff;
        font-size: 10px;
        font-weight: 700;
        min-width: 16px;
        height: 16px;
        border-radius: 999px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 3px;
        border: 1.5px solid rgba(0, 0, 0, 0.92);
        line-height: 1;
        transition: transform 0.2s ease;
      }

      .cart-count-badge.bump {
        transform: scale(1.35);
      }

      /* ========================================================
         CATEGORY NAVIGATION RAIL & FIXED HOME ANCHOR
         ======================================================== */
      .sub-header-bar {
        background: rgba(10, 10, 12, 0.95);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border-top: 1px solid rgba(255, 255, 255, 0.08);
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        padding: 6px 20px;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .nav-system-wrapper {
        display: flex;
        align-items: center;
        gap: 14px;
        width: 100%;
        max-width: 580px;
        margin: 0 auto;
      }

      /* Scrollable Category Rail with Soft Edge Dissolve */
      .category-track-container {
        position: relative;
        flex: 1;
        min-width: 0;
        display: flex;
        align-items: center;
        overflow: hidden;
        background: transparent;
        border: none;
        box-shadow: none;
      }

      .category-track-container.fade-right {
        mask-image: linear-gradient(to right, #000 0%, #000 calc(100% - 36px), rgba(0,0,0,0.35) calc(100% - 12px), transparent 100%);
        -webkit-mask-image: linear-gradient(to right, #000 0%, #000 calc(100% - 36px), rgba(0,0,0,0.35) calc(100% - 12px), transparent 100%);
      }

      .category-track-container.fade-left {
        mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,0.35) 12px, #000 36px, #000 100%);
        -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,0.35) 12px, #000 36px, #000 100%);
      }

      .category-track-container.fade-left.fade-right {
        mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,0.35) 12px, #000 36px, #000 calc(100% - 36px), rgba(0,0,0,0.35) calc(100% - 12px), transparent 100%);
        -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,0.35) 12px, #000 36px, #000 calc(100% - 36px), rgba(0,0,0,0.35) calc(100% - 12px), transparent 100%);
      }

      .category-system-track {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 20px;
        background: transparent;
        border: none;
        box-shadow: none;
        padding: 4px 6px;
        overflow-x: auto;
        white-space: nowrap;
        max-width: 100%;
        scrollbar-width: none;
        -ms-overflow-style: none;
        -webkit-overflow-scrolling: touch;
      }

      .category-system-track::-webkit-scrollbar {
        display: none;
      }

      .category-track-item {
        color: #98989d;
        text-decoration: none;
        font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
        font-size: 13px;
        font-weight: 500;
        letter-spacing: -0.15px;
        white-space: nowrap;
        padding: 3px 0;
        display: inline-flex;
        align-items: center;
        gap: 5px;
        transition: color 0.18s ease;
        flex-shrink: 0;
        background: none !important;
        border: none !important;
        box-shadow: none !important;
      }

      .category-track-item:hover,
      .category-track-item.active {
        color: #ffffff;
        font-weight: 600;
      }

      /* Permanent Fixed Home Anchor Pill (Elevated and Distinct) */
      .home-anchor-pill {
        display: inline-flex;
        align-items: center;
        gap: 5.5px;
        background: rgba(26, 29, 36, 0.95);
        border: 1px solid rgba(255, 255, 255, 0.22);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
        padding: 5px 12px;
        border-radius: 999px;
        color: #ffffff;
        text-decoration: none;
        font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
        font-size: 12px;
        font-weight: 600;
        letter-spacing: -0.1px;
        white-space: nowrap;
        flex-shrink: 0;
        transition: all 0.2s cubic-bezier(0.25, 1, 0.5, 1);
      }

      .home-anchor-pill:hover {
        background: rgba(36, 40, 50, 0.95);
        border-color: rgba(255, 255, 255, 0.35);
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.55);
      }

      .home-anchor-pill svg {
        width: 12.5px;
        height: 12.5px;
        stroke: currentColor;
        flex-shrink: 0;
      }

      /* 4. PINNED SEARCH BAR CONTAINER */
      .sticky-search-wrapper {
        padding: 10px 36px 14px;
        display: flex;
        align-items: center;
        justify-content: center;
        max-width: 484px;
        width: 100%;
        margin: 0 auto;
        box-sizing: border-box;
      }

      /* Matching Circular Capsule Hamburger Button */
      .menu-icon-btn {
        width: 46px;
        height: 46px;
        border-radius: 999px;
        background: rgba(20, 22, 26, 0.95);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border: 1px solid rgba(255, 255, 255, 0.18);
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
        display: flex;
        align-items: center;
        justify-content: center;
        color: #ffffff;
        cursor: pointer;
        flex-shrink: 0;
        transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
      }

      .home-nav-btn {
        text-decoration: none;
      }

      .menu-icon-btn:hover {
        border-color: rgba(255, 255, 255, 0.32);
        background: rgba(30, 32, 38, 0.95);
        transform: scale(1.04);
        box-shadow:
          0 0 15px rgba(255, 255, 255, 0.1),
          0 8px 20px rgba(0, 0, 0, 0.5);
      }

      .menu-icon-btn:active {
        transform: scale(0.96);
      }

      .menu-icon-btn svg {
        width: 18px;
        height: 18px;
        stroke: #ffffff;
        stroke-width: 2.2;
      }

      /* CAPSULE SEARCH BAR */
      .search {
        flex: 1;
        height: 44px;
        display: flex;
        align-items: center;
        padding-left: 18px;
        padding-right: 4px;
        border-radius: 999px;
        background: rgba(20, 22, 26, 0.95);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border: 1px solid rgba(255, 255, 255, 0.18);
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
        transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
        overflow: hidden;
        box-sizing: border-box;
      }

      .search:hover {
        border-color: rgba(255, 255, 255, 0.32);
      }

      .search:focus-within {
        border-color: rgba(0, 113, 227, 0.85);
        box-shadow:
          0 0 22px rgba(0, 113, 227, 0.4),
          0 10px 25px rgba(0, 0, 0, 0.6);
      }

      .search input {
        flex: 1;
        height: 100% !important;
        background: transparent !important;
        border: none !important;
        outline: none !important;
        color: #ffffff !important;
        font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif !important;
        font-size: 14px !important;
        font-weight: 500 !important;
        letter-spacing: -0.15px !important;
        line-height: 42px !important;
        padding: 0 8px 0 0 !important;
        margin: 0 !important;
        box-sizing: border-box !important;
      }

      .search input::placeholder {
        color: #86868b !important;
        font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif !important;
        font-size: 14px !important;
        font-weight: 500 !important;
        opacity: 1 !important;
      }

      .search-btn {
        width: 38px;
        height: 36px;
        padding: 0;
        border-radius: 999px;
        background: linear-gradient(180deg, #0077ed 0%, #0066cc 100%);
        border: 1px solid rgba(255, 255, 255, 0.18);
        box-shadow: 0 2px 8px rgba(0, 113, 227, 0.35);
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        flex-shrink: 0;
        transition: all 0.25s ease;
        box-sizing: border-box;
      }

      .search-btn:hover {
        background: linear-gradient(180deg, #0082fb 0%, #0071e3 100%);
        box-shadow: 0 4px 14px rgba(0, 113, 227, 0.5);
        transform: scale(1.03);
      }

      .search-btn:active {
        transform: scale(0.97);
      }

      .search-btn svg {
        width: 16px;
        height: 16px;
        stroke: #ffffff;
        stroke-width: 2.2;
        fill: none;
      }

      /* ========================================================
         OFF-CANVAS SIDE DRAWER (OPENS BELOW ENTIRE STICKY HEADER)
         ======================================================== */
      .drawer-overlay {
        position: fixed;
        top: calc(var(--header-h) + max(0px, env(safe-area-inset-top)));
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.75);
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
        z-index: 998;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.32s cubic-bezier(0.16, 1, 0.3, 1);
        will-change: opacity;
        transform: translateZ(0);
        backface-visibility: hidden;
      }

      .drawer-overlay.active {
        opacity: 1;
        pointer-events: auto;
      }

      .mobile-drawer {
        position: fixed;
        top: calc(var(--header-h) + max(0px, env(safe-area-inset-top)));
        left: 0;
        width: 78%;
        max-width: 320px;
        height: calc(100vh - var(--header-h));
        background-color: #0f1013;
        border-right: 1px solid rgba(255, 255, 255, 0.1);
        z-index: 999;
        transform: translate3d(-100%, 0, 0);
        transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
        will-change: transform;
        backface-visibility: hidden;
        display: flex;
        flex-direction: column;
        padding: 16px 20px 24px;
      }

      .mobile-drawer.open {
        transform: translate3d(0, 0, 0);
      }

      .drawer-header {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        margin-bottom: 8px;
      }

      .drawer-close-btn {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.08);
        border: 1px solid rgba(255, 255, 255, 0.16);
        color: #ffffff;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.2s cubic-bezier(0.25, 1, 0.5, 1);
      }

      .drawer-close-btn:hover {
        background: rgba(255, 255, 255, 0.14);
        transform: scale(1.06);
      }

      .drawer-nav {
        display: flex;
        flex-direction: column;
        gap: 12px;
      }

      .mobile-nav-link {
        color: #cbd5e1;
        text-decoration: none;
        font-size: 15px;
        font-weight: 500;
        padding: 12px 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.04);
        display: flex;
        align-items: center;
        justify-content: space-between;
        transition: all 0.2s ease;
      }

      .drawer-arrow-svg {
        width: 12px;
        height: 12px;
        stroke: rgba(255, 255, 255, 0.32);
        stroke-width: 1.75;
        stroke-linecap: round;
        stroke-linejoin: round;
        fill: none;
        transition: all 0.2s cubic-bezier(0.25, 1, 0.5, 1);
      }

      .mobile-nav-link.active,
      .mobile-nav-link:hover {
        color: #ffffff;
        font-weight: 600;
      }

      .mobile-nav-link:hover .drawer-arrow-svg,
      .mobile-nav-link.active .drawer-arrow-svg {
        stroke: #ffffff;
        transform: translateX(2px);
      }

      /* Contact Us modal */
      .contact-us-overlay {
        display: none;
        position: fixed;
        inset: 0;
        z-index: 10100;
        background: rgba(10, 11, 14, 0.55);
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
        align-items: center;
        justify-content: center;
        padding: 20px;
      }

      .contact-us-overlay.open {
        display: flex;
      }

      .contact-us-modal {
        position: relative;
        width: 100%;
        max-width: 440px;
        max-height: calc(100dvh - 40px);
        overflow-y: auto;
        background: #ffffff;
        border-radius: 28px;
        box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
      }

      .contact-us-close {
        position: absolute;
        top: 16px;
        right: 16px;
        z-index: 10;
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background: rgba(0, 0, 0, 0.06);
        border: 1px solid rgba(0, 0, 0, 0.08);
        color: #1a1c22;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.2s cubic-bezier(0.25, 1, 0.5, 1);
      }

      .contact-us-close:hover {
        background: rgba(0, 0, 0, 0.12);
        transform: scale(1.06);
      }

      .contact-us-body {
        padding: 26px 24px 22px;
        font-weight: 300;
        color: #3a3f47;
      }

      .contact-us-title {
        font-size: 19px;
        font-weight: 500;
        letter-spacing: -0.3px;
        color: #11151c;
        margin: 0 0 4px;
      }

      .contact-us-lede {
        font-size: 13px;
        font-weight: 300;
        line-height: 1.5;
        color: #6b7280;
        margin: 0 0 16px;
      }

      .contact-us-h2 {
        font-size: 11px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        color: #9aa1ab;
        margin: 0 0 8px;
        padding-top: 14px;
        border-top: 1px solid rgba(0, 0, 0, 0.07);
      }

      .contact-us-h2:first-of-type {
        padding-top: 0;
        border-top: none;
      }

      .contact-us-row {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 16px;
        padding: 7px 0;
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
      }

      .contact-us-row:last-of-type {
        border-bottom: none;
      }

      .contact-us-label {
        font-size: 13px;
        font-weight: 400;
        color: #9aa1ab;
        flex-shrink: 0;
      }

      .contact-us-value {
        font-size: 14px;
        font-weight: 300;
        color: #11151c;
        text-align: right;
        line-height: 1.5;
      }

      .contact-us-value strong {
        font-weight: 500;
      }

      .contact-us-text {
        font-size: 13px;
        font-weight: 300;
        line-height: 1.5;
        color: #3a3f47;
        margin: 0 0 6px;
      }

      .contact-us-text strong {
        font-weight: 500;
        color: #11151c;
      }

      .contact-us-link {
        color: #0071e3;
        text-decoration: none;
        font-weight: 400;
      }

      .contact-us-link:hover {
        text-decoration: underline;
      }

      .contact-us-footnote {
        font-size: 11px;
        font-weight: 300;
        line-height: 1.5;
        color: #9aa1ab;
        margin: 14px 0 0;
        padding-top: 12px;
        border-top: 1px solid rgba(0, 0, 0, 0.07);
      }

      @media (max-width: 640px) {
        .contact-us-body {
          padding: 24px 18px 18px;
        }
      }

      /* Help & Support modal */
      .help-support-overlay {
        display: none;
        position: fixed;
        inset: 0;
        z-index: 10100;
        background: rgba(10, 11, 14, 0.55);
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
        align-items: center;
        justify-content: center;
        padding: 20px;
      }

      .help-support-overlay.open {
        display: flex;
      }

      .help-support-modal {
        position: relative;
        width: 100%;
        max-width: 460px;
        max-height: calc(100dvh - 40px);
        overflow-y: auto;
        background: #ffffff;
        border-radius: 28px;
        box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
      }

      .help-support-close {
        position: absolute;
        top: 16px;
        right: 16px;
        z-index: 10;
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background: rgba(0, 0, 0, 0.06);
        border: 1px solid rgba(0, 0, 0, 0.08);
        color: #1a1c22;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.2s cubic-bezier(0.25, 1, 0.5, 1);
      }

      .help-support-close:hover {
        background: rgba(0, 0, 0, 0.12);
        transform: scale(1.06);
      }

      .help-support-body {
        padding: 40px 24px 28px;
      }

      .help-support-title {
        font-size: 22px;
        font-weight: 500;
        letter-spacing: -0.3px;
        color: #11151c;
        margin: 0 0 8px;
      }

      .help-support-lede {
        font-size: 14px;
        font-weight: 300;
        line-height: 1.6;
        color: #6b7280;
        margin: 0 0 22px;
      }

      .faq-list {
        display: flex;
        flex-direction: column;
        gap: 8px;
      }

      .faq-group {
        border: 1px solid rgba(0, 113, 227, 0.14);
        border-radius: 16px;
        background: rgba(0, 113, 227, 0.03);
        overflow: hidden;
      }

      .faq-parent {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        background: none;
        border: none;
        padding: 15px 16px;
        font-family: inherit;
        font-size: 15px;
        font-weight: 700;
        color: #0071e3;
        cursor: pointer;
        text-align: left;
      }

      .faq-parent-chevron {
        flex-shrink: 0;
        transition: transform 0.25s cubic-bezier(0.25, 1, 0.5, 1);
      }

      .faq-group.open .faq-parent-chevron {
        transform: rotate(90deg);
      }

      .faq-children-wrap {
        display: grid;
        grid-template-rows: 0fr;
        transition: grid-template-rows 0.3s cubic-bezier(0.25, 1, 0.5, 1);
      }

      .faq-group.open .faq-children-wrap {
        grid-template-rows: 1fr;
      }

      .faq-children-inner {
        overflow: hidden;
        min-height: 0;
      }

      .faq-children {
        padding: 0 12px 10px;
        display: flex;
        flex-direction: column;
        gap: 2px;
      }

      .faq-item {
        border-top: 1px solid rgba(0, 113, 227, 0.1);
      }

      .faq-item:first-child {
        border-top: none;
      }

      .faq-question {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        background: none;
        border: none;
        padding: 11px 4px;
        font-family: inherit;
        font-size: 13.5px;
        font-weight: 500;
        color: #3a3f47;
        cursor: pointer;
        text-align: left;
      }

      .faq-new-badge {
        display: inline-block;
        margin-left: 4px;
        padding: 1px 6px;
        border-radius: 999px;
        background: #0071e3;
        color: #fff;
        font-size: 9px;
        font-weight: 700;
        letter-spacing: 0.03em;
        vertical-align: middle;
      }

      .faq-q-chevron {
        flex-shrink: 0;
        color: #9aa1ab;
        transition: transform 0.25s cubic-bezier(0.25, 1, 0.5, 1);
      }

      .faq-item.open .faq-q-chevron {
        transform: rotate(90deg);
      }

      .faq-answer-wrap {
        display: grid;
        grid-template-rows: 0fr;
        transition: grid-template-rows 0.3s cubic-bezier(0.25, 1, 0.5, 1);
      }

      .faq-item.open .faq-answer-wrap {
        grid-template-rows: 1fr;
      }

      .faq-answer-inner {
        overflow: hidden;
        min-height: 0;
      }

      .faq-answer {
        padding: 0 4px 13px;
      }

      .faq-answer p {
        margin: 0 0 6px;
        font-size: 13px;
        font-weight: 300;
        line-height: 1.6;
        color: #6b7280;
      }

      .faq-answer p:last-child {
        margin-bottom: 0;
      }

      .faq-answer strong {
        font-weight: 500;
        color: #3a3f47;
      }

      .faq-answer code {
        background: rgba(0, 113, 227, 0.08);
        color: #0071e3;
        border-radius: 4px;
        padding: 1px 5px;
        font-size: 12px;
        font-weight: 500;
      }

      .help-support-contact {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
        margin-top: 26px;
        padding-top: 22px;
        border-top: 1px solid rgba(0, 0, 0, 0.07);
      }

      .help-support-contact-label {
        font-size: 12px;
        font-weight: 300;
        color: #9aa1ab;
      }

      .help-support-contact-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        width: 100%;
        height: 44px;
        border-radius: 999px;
        font-size: 13.5px;
        font-weight: 600;
        text-decoration: none;
        transition: all 0.2s cubic-bezier(0.25, 1, 0.5, 1);
      }

      .help-support-whatsapp {
        background: #25d366;
        color: #ffffff;
      }

      .help-support-whatsapp:hover {
        background: #1fbd5a;
      }

      .help-support-phone {
        background: rgba(0, 0, 0, 0.05);
        border: 1px solid rgba(0, 0, 0, 0.08);
        color: #11151c;
      }

      .help-support-phone:hover {
        background: rgba(0, 0, 0, 0.09);
      }

      @media (max-width: 640px) {
        .help-support-body {
          padding: 36px 18px 24px;
        }
      }



      /* ============================================================
         MOBILE (<=768px) - unchanged from the original site's own
         mobile header/drawer tuning, just isolated to header-only
         selectors (page-specific rules like .page-container/.wrapper
         stay in each page's own stylesheet). There is deliberately no
         separate desktop media query below this - the base rules above
         already produce the correct wider layout on their own (this
         matches the original file exactly: it only ever had this one
         mobile override, nothing else).
         ============================================================ */
      @media (max-width: 768px) {
        :root {
          --header-h: 172px;
        }

        .top-dark-bar {
          display: block;
          height: max(20px, env(safe-area-inset-top));
          background-color: #000000;
          border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        }

        .main-nav-bar {
          padding: 14px 18px 10px;
          min-height: 52px;
        }

        .sub-header-bar {
          padding: 6px 14px;
        }

        .nav-system-wrapper {
          gap: 10px;
          max-width: 100%;
        }

        .home-anchor-pill {
          padding: 4px 10px;
          font-size: 11.5px;
          background: rgba(26, 29, 36, 0.95);
          border: 1px solid rgba(255, 255, 255, 0.22);
          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
        }

        .home-anchor-pill svg {
          width: 12px;
          height: 12px;
        }

        .category-system-track {
          justify-content: flex-start;
          padding: 2px 4px;
          gap: 16px;
          background: transparent;
          border: none;
          box-shadow: none;
        }

        .category-track-item {
          padding: 3px 0;
          font-size: 12.5px;
          background: none !important;
          border: none !important;
          box-shadow: none !important;
        }

        .sticky-search-wrapper {
          padding: 8px 16px 10px;
          gap: 10px;
        }

        .brand-name {
          font-size: 16.5px;
        }

        .brand-sub {
          font-size: 11px;
        }

        .nav-right-icons {
          gap: 14px;
        }

        .nav-icon-btn svg {
          width: 19px;
          height: 19px;
        }

        .menu-icon-btn {
          width: 42px;
          height: 42px;
          border-radius: 999px;
        }

        .menu-icon-btn svg {
          width: 17px;
          height: 17px;
        }

        .mobile-drawer {
          top: calc(var(--header-h) + max(0px, env(safe-area-inset-top)));
          height: calc(100vh - var(--header-h));
        }

        .drawer-overlay {
          top: calc(var(--header-h) + max(0px, env(safe-area-inset-top)));
        }

        .search {
          max-width: 100%;
          height: 42px;
          padding-left: 14px;
          padding-right: 3px;
        }

        .search input {
          font-size: 14px;
        }

        .search-btn {
          width: 36px;
          height: 34px;
          padding: 0;
          display: flex;
          align-items: center;
          justify-content: center;
        }

        .search-btn svg {
          width: 17.5px;
          height: 17.5px;
          stroke: #ffffff;
          stroke-width: 2.3;
          fill: none;
        }
      }

      /* .top-dark-bar exists to clear a phone's notch/status bar area -
         meaningless on desktop, where it was just 28px of dead space above
         the actual header content. Hiding it only above the mobile
         breakpoint; nothing else about the header changes. */
      @media (min-width: 769px) {
        .top-dark-bar {
          display: none;
        }

        :root {
          --header-h: 72px;
        }

        .sticky-header-container {
          display: flex;
          align-items: center;
          width: 100%;
          max-width: 100%;
          margin: 0;
          padding: 0 max(32px, calc((100% - 1280px) / 2 + 32px));
          gap: 28px;
          height: 72px;
          box-sizing: border-box;
        }

        .main-nav-bar {
          display: contents;
        }

        .nav-left {
          order: 1;
          flex-shrink: 0;
          padding: 0;
          display: flex;
          align-items: center;
        }

        .sub-header-bar {
          order: 2;
          flex: 1;
          background: transparent !important;
          border: none !important;
          backdrop-filter: none !important;
          -webkit-backdrop-filter: none !important;
          padding: 0 !important;
          display: flex;
          align-items: center;
          justify-content: center;
        }

        .nav-system-wrapper {
          display: inline-flex;
          align-items: center;
          gap: 22px;
          max-width: fit-content;
          margin: 0;
        }

        .home-anchor-pill {
          font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
          font-size: 13px;
          font-weight: 500;
          color: #98989d;
          padding: 5px 12px;
          border-radius: 999px;
          background: rgba(255, 255, 255, 0.05);
          border: 1px solid rgba(255, 255, 255, 0.12);
          box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
          transition: all 0.2s ease;
        }

        .home-anchor-pill:hover {
          color: #ffffff;
          background: rgba(255, 255, 255, 0.12);
          border-color: rgba(255, 255, 255, 0.25);
          transform: none;
        }

        .category-track-container {
          mask-image: none !important;
          -webkit-mask-image: none !important;
        }

        .category-system-track {
          display: inline-flex;
          align-items: center;
          justify-content: center;
          gap: 20px;
          padding: 0;
          background: transparent !important;
          border: none !important;
          box-shadow: none !important;
          overflow: visible;
          max-width: fit-content;
        }

        .category-track-item {
          font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
          font-size: 13.5px;
          font-weight: 500;
          color: #98989d;
          padding: 4px 0;
          text-decoration: none;
          transition: all 0.2s ease;
          white-space: nowrap;
          border: none;
          background: none;
        }

        .category-track-item:hover,
        .category-track-item.active {
          color: #ffffff;
          font-weight: 600;
        }

        .sticky-search-wrapper {
          order: 3;
          flex-shrink: 0;
          max-width: none;
          width: 320px;
          padding: 0;
          margin: 0;
          gap: 10px;
          display: flex;
          align-items: center;
        }

        .search {
          width: 100%;
        }

        .nav-right-icons {
          order: 4;
          flex-shrink: 0;
          padding: 0;
          display: flex;
          align-items: center;
          gap: 18px;
        }

        .menu-icon-btn {
          width: 42px;
          height: 42px;
        }

        .mobile-drawer,
        .drawer-overlay {
          top: calc(var(--header-h) + max(0px, env(safe-area-inset-top)));
        }

        .mobile-drawer {
          height: calc(100vh - var(--header-h));
        }
      }