/* ============================================================
   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;
        background: #050507; /* the iPhone bounce area below the footer / above the header must be dark, never white */
      }

      /* 2026-10-09: html having its own overflow stops the store's page lock (which only sets body overflow:hidden) from reaching the viewport,
         so the page behind an open pop-up kept scrolling. Whenever anything locks the body, lock the page itself too. */
      html:has(body[style*="overflow: hidden"]) { overflow: hidden; }
      /* ...and keep body itself visible then: a body with overflow:hidden becomes its own scroll box, so the sticky header stopped following the screen */
      html:has(body[style*="overflow: hidden"]) body { overflow: visible !important; }

      /* 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: 'Manrope', 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: 'Manrope', -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: 'Manrope', -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: 'Manrope', -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: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif !important;
        font-size: 14px !important;
        font-weight: 500 !important;
        opacity: 1 !important;
      }

      .search-btn {
        width: 52px;
        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);
        visibility: hidden; /* closed drawer must not leak a shadow/edge at the screen side */
        transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear 0.35s;
        will-change: transform;
        backface-visibility: hidden;
        display: flex;
        flex-direction: column;
        padding: 16px 20px 24px;
      }

      .mobile-drawer.open {
        transform: translate3d(0, 0, 0);
        visibility: visible;
        transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s;
      }

      .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: 48px;
          height: 34px;
          border-radius: 999px;
          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: 'Manrope', -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: 'Manrope', -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));
        }
      }



/* 2026-10-06 (owner): the shop is a display catalogue with ordering on WhatsApp -- no accounts for now. The sign-in icon is hidden, not deleted;
   login.html / account.html and their code stay for later. */
.nav-icon-btn[href="login.html"], .nav-icon-btn[href="account.html"] { display: none !important; }

/* Launch switches (2026-10-08): OFF is the safe default -- see shop-launch.js */
html:not([data-l-visitshop="1"]) [data-launch="visit-shop"] { visibility: hidden !important; pointer-events: none !important; }
html:not([data-l-shoplink="1"]) [data-launch="shop-link"],
html:not([data-l-routerslink="1"]) [data-launch="routers-link"] { pointer-events: none; cursor: default; }

/* Menu row (owner 2026-10-08): the four words are spread evenly between the left edge and the Home pill, so the row is balanced instead of bunched to the left. */
.nav-system-wrapper { width: 100%; max-width: none; }
.category-system-track { justify-content: space-between !important; gap: 8px; flex: 1; }

/* the empty cart's "Browse the shop" button is hidden while the Shop switch is off (nothing may lead to the shop) */
html:not([data-l-shoplink="1"]) .dgc-browse { display: none !important; }

/* Header layout (owner 2026-10-16). The icons on the four menu buttons only show on phone-width screens; wider screens are unchanged. */
.category-track-item .dg-nav-ico { display: none; }
.category-track-item .dg-more { display: inline; }
@media (max-width: 768px) {
  /* Shorter, calmer header: brand on the first line with DigiTools and Shop as small cards at the right; the second line has a half-width search bar with Routers and
     Data as cards beside it. The four cards are the same width. The tagline is hidden on phones so the brand sits on one line, and the Home pill is gone here
     (the brand itself still goes home). */
  /* four equal columns: line 1 = brand (two columns) + DigiTools + Shop; line 2 = Routers + Data + search bar (two columns, on the right) */
  .sticky-header-container { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: center; column-gap: 8px; padding-left: 16px; padding-right: 16px; }
  .sticky-header-container .top-dark-bar { grid-column: 1 / -1; grid-row: 1; margin-left: -16px; margin-right: -16px; }
  .sticky-header-container .main-nav-bar { grid-column: 1 / 3; grid-row: 2; padding: 10px 0 6px 2px; min-height: 0; min-width: 0; }
  .sticky-header-container .sub-header-bar,
  .sticky-header-container .nav-system-wrapper,
  .sticky-header-container .category-track-container,
  .sticky-header-container .category-system-track { display: contents; }
  .sticky-header-container .home-anchor-pill { display: none; }
  .sticky-header-container .dg-store-text small { display: none; }
  .sticky-header-container .sticky-search-wrapper { grid-column: 3 / 5; grid-row: 3; min-width: 0; padding: 4px 0 10px 0; }
  .sticky-header-container .sticky-search-wrapper .search { min-width: 0; }
  .sticky-header-container .sticky-search-wrapper .search input { min-width: 0; width: 100%; text-overflow: ellipsis; }
  .sticky-header-container .category-track-item { display: inline-flex; align-items: center; justify-content: center; gap: 5px; box-sizing: border-box; width: 100%; min-width: 0; height: 30px; padding: 0 6px; margin: 0; border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.18) !important; background: rgba(255, 255, 255, 0.07) !important; box-shadow: none !important; color: #eceef1; font-size: 11.5px; font-weight: 600; white-space: nowrap; text-decoration: none; }
  .sticky-header-container .category-track-item .dg-nav-ico { display: inline-block; width: 13px; height: 13px; flex: none; }
  .sticky-header-container .category-track-item .dg-more { display: none; }   /* "Data Bundle" reads just "Data" on phones */
  .sticky-header-container .category-track-item:nth-child(2) { grid-column: 3; grid-row: 2; }   /* DigiTools */
  .sticky-header-container .category-track-item:nth-child(1) { grid-column: 4; grid-row: 2; }   /* Shop */
  .sticky-header-container .category-track-item:nth-child(4) { grid-column: 1; grid-row: 3; align-self: start; margin-top: 8px; }   /* Routers */
  .sticky-header-container .category-track-item:nth-child(3) { grid-column: 2; grid-row: 3; align-self: start; margin-top: 8px; }   /* Data Bundle */
  /* smaller search button so the half-width search box has room for its words */
  .sticky-header-container .sticky-search-wrapper .search { height: 38px; padding: 0 4px 0 12px; }
  .sticky-header-container .sticky-search-wrapper .search-btn { width: 42px; height: 30px; min-width: 42px; padding: 0; }
  .sticky-header-container .sticky-search-wrapper .search-btn svg { width: 15px; height: 15px; }
}

/* Header v3 (2026-11-02, owner): brand + Home, quick links, then a slim pale search field with the magnifier on the right. */
.top-dark-bar,.sub-header-bar{display:none!important}
.sticky-header-container{display:block!important;position:relative!important;flex:0 0 auto;background:linear-gradient(180deg,rgba(0,0,0,.72),rgba(0,0,0,.38) 72%,rgba(0,0,0,0))!important;border:0!important;box-shadow:none!important;padding-bottom:10px;z-index:2500}
.main-nav-bar{width:100%!important;padding:calc(env(safe-area-inset-top) + 14px) 18px 4px!important;min-height:0!important;justify-content:space-between!important;background:none!important;border:0!important}
.brand-title-inline a{display:flex!important;align-items:center;gap:9px}
.brand-title-inline a>.brand-name::before{content:"";display:inline-block;vertical-align:middle;width:26px;height:26px;margin-right:9px;border-radius:8px;background:url(/logo.png) center/cover}
.sticky-header-container .brand-name,.main-nav-bar .brand-name{font-size:18px!important;font-weight:500!important;letter-spacing:-.4px!important;color:#fff!important}
.hd-home{display:grid!important;place-items:center;width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.1);padding:0!important;color:#fff!important}
.hd-home svg{width:20px!important;height:20px!important;fill:currentColor;stroke:none}
.hd-links{display:flex;justify-content:space-between;gap:8px;padding:6px 20px 0}
.hd-links a{display:inline-flex;align-items:center;gap:6px;color:rgba(255,255,255,.7);text-decoration:none;font-size:13.5px;font-weight:500;letter-spacing:-.1px;padding:4px 0;transition:color .15s}
.hd-links a:hover,.hd-links a:active{color:#fff}
.hd-links svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sticky-search-wrapper{grid-area:auto!important;position:static!important;max-width:none!important;width:100%!important;padding:8px 18px 0!important;justify-content:stretch!important}
.sticky-search-wrapper .search{width:100%!important;max-width:none!important;flex:1 1 100%!important;height:34px!important;border-radius:999px!important;padding:0 10px 0 16px!important;gap:6px;position:relative;
  background:rgba(255,255,255,.26)!important;border:0!important;box-shadow:none!important;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:background .2s}
.sticky-search-wrapper .search:focus-within{background:rgba(255,255,255,.34)!important}
.sticky-search-wrapper .search input{flex:1;min-width:0;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text",Inter,system-ui,sans-serif!important;font-size:16px!important;padding:0!important;letter-spacing:-.3px;color:#fff;caret-color:#fff;background:none!important}
.sticky-search-wrapper .search input::placeholder{color:rgba(255,255,255,.78)}
.sticky-search-wrapper .search .search-btn{order:3;background:none!important;box-shadow:none!important;border:0!important;width:22px!important;height:22px!important;min-width:0!important;padding:0!important;display:grid;place-items:center}
.sticky-search-wrapper .search .search-btn svg{width:17px!important;height:17px!important;stroke:rgba(255,255,255,.92)!important;stroke-width:2.3;fill:none}
.sticky-search-wrapper .search .s-clear{order:2;display:none;width:18px;height:18px;border-radius:50%;border:0;background:rgba(255,255,255,.55);cursor:pointer;place-items:center;flex:none;padding:0}
.sticky-search-wrapper .search .s-clear.on{display:grid}
.sticky-search-wrapper .search .s-clear svg{width:7px;height:7px;stroke:#333;stroke-width:3;fill:none;stroke-linecap:round}

/* Shared page background (owner 2026-11-02): add class dg-bg-tennis to <body>. One image, defined here once, used by every page that opts in. */
body.dg-bg-tennis{background:linear-gradient(rgba(0,0,0,var(--dg-bg-dim,.4)),rgba(0,0,0,var(--dg-bg-dim,.4))),#05100a var(--dg-bg-img,var(--dg-bg-default,url(/test/images/bg-tennis.jpg))) center/cover fixed no-repeat!important}
body.dg-bg-tennis .device-bg-img{display:none!important}
body.dg-bg-tennis .device-bg-wrapper,body.dg-bg-tennis .device-bg-overlay,body.dg-bg-tennis .page-container{background:transparent!important}
body.dg-bg-tennis footer,body.dg-bg-tennis .site-footer{background:rgba(0,0,0,.45)!important;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
/* Fit-to-screen page (owner 2026-11-02): add class dg-fit to <body>; the page fills the phone screen exactly and never scrolls. */
html:has(body.dg-fit),body.dg-fit{height:100%;overflow:hidden!important}
body.dg-fit{display:flex;flex-direction:column;height:100dvh;min-height:0!important}
body.dg-fit .page-container{flex:1 1 auto;min-height:0!important;height:auto!important;overflow:hidden}
body.dg-fit .page-container .wrapper{min-height:0!important;height:100%}
body.dg-fit .card-desc{color:rgba(255,255,255,.78)!important;text-shadow:0 1px 6px rgba(0,0,0,.6)}
@media(max-width:400px){.main-nav-bar{padding-left:14px!important;padding-right:14px!important}.hd-links{padding:6px 14px 0;gap:2px}.hd-links a{font-size:12.5px;gap:4px;letter-spacing:-.2px}.hd-links svg{width:13px;height:13px}}

/* Figtree on the header and the home Buy Data button (owner pick 2026-11-02, after comparing Google Sans, Manrope, Figtree, Outfit, Plus Jakarta Sans). */
.sticky-header-container,.sticky-header-container *:not(svg):not(path),.card-btn,.card-desc{font-family:'Figtree',system-ui,-apple-system,sans-serif!important}
.sticky-search-wrapper .search input{font-family:'Figtree',system-ui,sans-serif!important;font-weight:400!important}

/* Figtree across the whole page on the shared-background pages (home + /data/) only (owner 2026-11-02) */
body.dg-bg-tennis,body.dg-bg-tennis *:not(svg):not(path):not(.material-icons):not([class*="icon-font"]){font-family:'Figtree',system-ui,-apple-system,sans-serif!important}


/* search dropdown a size down on the shared-background pages (owner 2026-11-02) */
body.dg-bg-tennis .dgn-empty{padding:14px 12px;font-size:12px}
body.dg-bg-tennis .dgn-item{padding:7px 12px}
body.dg-bg-tennis .dgn-item .t{font-size:13px;font-weight:500}
body.dg-bg-tennis .dgn-item .p{font-size:12.5px}
body.dg-bg-tennis .dgn-item .c{font-size:11px}
body.dg-bg-tennis .dgn-sec{font-size:10.5px}
body.dg-bg-tennis .dgn-all{font-size:12.5px;padding:10px 12px}

/* pages without the shared photo background (shop, login, track order...) get a solid dark header so the white text never sits on a light page */
body:not(.dg-bg-tennis) .sticky-header-container{background:#0c110e!important}

/* Desktop: the old stylesheet turns .main-nav-bar into display:contents on wide screens, which stacked the brand and the Home button. Keep one row and
   centre the whole header column (brand+Home, links, search) at a readable width (owner 2026-11-02: "very horrible" on PC). */
/* the 769px+ rule above fixes the header at height:72px, which hid the links row behind the page on shop pages (owner 2026-11-03): let it grow to its content */
body .sticky-header-container{height:auto!important}
body .sticky-header-container .main-nav-bar{display:flex!important;width:100%!important;max-width:760px!important;margin:0 auto!important;box-sizing:border-box}
body .sticky-header-container .hd-links,body .sticky-header-container .sticky-search-wrapper{width:100%!important;max-width:760px!important;margin-left:auto!important;margin-right:auto!important;box-sizing:border-box}

/* very short windows (landscape phones): the fit-to-screen lock would hide the social icons with no way to scroll, so let the page scroll there */
@media (max-height:480px){
  html:has(body.dg-fit),body.dg-fit{height:auto!important;overflow:auto!important}
  body.dg-fit{min-height:100dvh!important}
  body.dg-fit .page-container{overflow:visible;min-height:300px!important}
}

/* ---- 2026-11-02 (owner): harmony + persistent header + smooth page change ---- */
/* One text size across the first screen: links = search text = 16px (the search field must stay >= 16px or iPhones zoom in on it). */
body .sticky-header-container .hd-links a{font-size:14px!important;gap:8px}
body .sticky-header-container .hd-links svg{width:16px!important;height:16px!important}

/* Buy Data / DigiTools pages scroll: the header stays on screen (persistent) and blurs whatever slides up under it. The home page does not scroll (dg-fit). */
body.dg-bg-tennis:not(.dg-fit) .sticky-header-container{
  position:sticky!important;top:0!important;
  background:rgba(5,16,10,.55)!important;
  -webkit-backdrop-filter:blur(18px) saturate(1.3);backdrop-filter:blur(18px) saturate(1.3);
  border-bottom:1px solid rgba(255,255,255,.08)!important;
}

/* Smooth change between pages (home -> Buy Data etc.): browsers that support cross-document view transitions fade the page instead of flashing, and the header stays put.
   Both pages carry this stylesheet. The dark html background stops a white/black flash while the next page paints. */
@view-transition{navigation:auto}
::view-transition-group(root){animation-duration:.32s}
.sticky-header-container{view-transition-name:dg-header}
/* 2026-11-05 (owner: "the header keeps moving / shaking when I go from the data page to the home page"): with a named header the browser MORPHS the old page's header into the new
   one (position + size animate over .32s). The two pages' headers are not identical (different links and text widths), so the morph read as the header sliding and wobbling.
   Keep the header persistent but never animated: the old copy is dropped at once and the new page's header is shown in place; only the page content fades. */
::view-transition-group(dg-header){animation:none}
::view-transition-old(dg-header){display:none}
::view-transition-new(dg-header){animation:none;mix-blend-mode:normal}
html:has(body.dg-bg-tennis){background:#05100a}
@media (prefers-reduced-motion:reduce){::view-transition-group(*){animation-duration:.01s}}

body .sticky-search-wrapper input::placeholder{font-size:14px!important}

/* Data page: no visible scroll bar (scrolling still works) */
html:has(body.dg-bg-tennis){scrollbar-width:none;-ms-overflow-style:none}
html:has(body.dg-bg-tennis)::-webkit-scrollbar,body.dg-bg-tennis::-webkit-scrollbar{display:none;width:0;height:0}

/* Buy Data page (owner 2026-11-02): the white card is the foreground. Once the page is scrolled it slides OVER the header, and the header behind it softens (blur + fade).
   At the very top the header stays above the card so the search dropdown can open over it (focusing the search scrolls back to the top). Class dg-scrolled comes from a small inline script in data/index.html. */
body.dg-scrolled:not(.tools-mode):not(.admin-mode) .sticky-header-container{z-index:1!important;filter:blur(calc(var(--dg-p,0)*6px));opacity:calc(1 - var(--dg-p,0)*.5)}
body.dg-scrolled:not(.tools-mode):not(.admin-mode) .store-panel{position:relative;z-index:10}

/* Static background (owner 2026-11-02: "the background moves with the page"): background-attachment:fixed is ignored by many phone browsers, so the picture is painted on a
   fixed layer behind the page instead. The body itself goes transparent over the dark html background. */
body.dg-bg-tennis{background:transparent!important}
body.dg-bg-tennis::before{content:"";position:fixed;left:0;right:0;top:0;height:100vh;height:100lvh;z-index:-1;pointer-events:none;background:linear-gradient(rgba(0,0,0,var(--dg-bg-dim,.4)),rgba(0,0,0,var(--dg-bg-dim,.4))),#05100a var(--dg-bg-img,var(--dg-bg-default,url(/test/images/bg-tennis.jpg))) center/cover no-repeat}

/* Material Symbols (filled-path) icons used in the header: the rules above draw icons as outlines, these are solid shapes. */
html[data-l-shoplink="0"] .hd-shop { display: none !important; }
/* (removed 2026-11-03: the phone now always shows three links, so "Results Checker" always fits in full) */
.hd-links a svg.dg-ms, .category-track-item svg.dg-ms { fill: currentColor; stroke: none; }

/* ---- 2026-11-03 (owner): DESKTOP shop header on ONE line. Phone layout is untouched (the three stacked rows were built for a phone's width).
   Desktop, the DigiTensil shop pages only (body.dg-shop: shop, product, account, login, track order; NOT Results Checker, seller portal or the old store): brand | quick links | search | cart + home. Links gain "Data bundles"; the
   Incircart link is dropped on desktop (it was mistaken for a cart); the cart icon with its count badge opens the cart. The Home and Buy Data pages keep
   their own header. --header-h is measured live by shared-header.js, so the pages under the header follow the new height. */
.hd-cart{display:none}
/* specificity must beat ".hd-links a { display:inline-flex }" or the link leaks onto phones (it did, 2026-11-03) */
.hd-links a.hd-data{display:none}
.hd-links a.hd-routers{display:none}
@media (min-width:1024px){
  body .sticky-header-container{display:grid!important;grid-template-columns:auto auto minmax(220px,1fr) auto;align-items:center;column-gap:28px;
    padding:11px max(24px,calc((100% - 1100px)/2 + 16px))!important;box-sizing:border-box}
  body .sticky-header-container .main-nav-bar{display:contents!important}
  body .sticky-header-container .main-nav-bar>.nav-left{grid-column:1;grid-row:1;padding:0!important}
  body .sticky-header-container .main-nav-bar>.nav-right-icons{grid-column:4;grid-row:1;display:flex!important;align-items:center;gap:10px;padding:0!important}
  body .sticky-header-container .hd-links{grid-column:2;grid-row:1;width:auto!important;max-width:none!important;margin:0!important;padding:0!important;gap:22px;justify-content:flex-start}
  body .sticky-header-container .sticky-search-wrapper{grid-column:3;grid-row:1;width:100%!important;max-width:620px!important;margin:0 auto!important;padding:0!important}
  body .sticky-header-container .hd-links a{font-size:15px!important;padding:0;white-space:nowrap}
  body .sticky-header-container .hd-links .dg-more{display:inline!important}
  body .sticky-header-container .hd-incircart{display:none!important}
  body .sticky-header-container .hd-data{display:inline-flex}
  body .sticky-header-container .sticky-search-wrapper .search{height:40px!important}
  body .sticky-header-container .sticky-search-wrapper .search input{font-size:15px!important}
  body.dg-shop .sticky-header-container .hd-cart{display:grid!important;place-items:center;position:relative;width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.1);border:0;padding:0;color:#fff;cursor:pointer}
  body.dg-shop .sticky-header-container .hd-cart:hover{background:rgba(255,255,255,.18)}
  body.dg-shop .sticky-header-container .hd-cart svg{width:20px;height:20px}
  body.dg-shop .sticky-header-container .hd-cart .cart-count-badge{top:-3px;right:-3px;min-width:18px;height:18px;font-size:11px;border-color:#0c110e}
  body.dg-shop .sticky-header-container .hd-cart .cart-count-badge:empty,body.dg-shop .sticky-header-container .hd-cart .cart-count-badge[data-n="0"]{display:none}
  body .sticky-header-container .hd-home{width:40px;height:40px}
}

/* phone header: three links picked by shared-header.js (class hd-on / hd-off). Below the desktop breakpoint only. */
@media (max-width: 1023px) {
  .hd-links a.hd-off { display: none !important; }
  .hd-links a.hd-on { display: inline-flex !important; }
}

/* Phone header links: icon sits close to its label and the links have a clear gap between them, so they read as separate items (owner 2026-11-04: "the boundaries are not clear"). No divider lines (owner removed them); labels drop to 12.5px so the gap fits without wrapping. Links are ordered with style.order, the first has order 0. */
@media (max-width: 1023px){
  body .sticky-header-container .hd-links{gap:14px!important}
  body .sticky-header-container .hd-links a.hd-on{font-size:12.5px!important;gap:3px!important;white-space:nowrap;position:relative}
  /* the Data bundles (wifi) icon is on a 24 grid and draws smaller than the other two; enlarge it, offset by negative margin so the layout does not move */
  body .sticky-header-container .hd-links a.hd-on svg:not(.dg-ms){width:21px!important;height:21px!important;margin:-2.5px!important;transform:translateY(-3px)}
  /* the Incircart cart draws bigger and higher than the other two at 21px (owner 2026-11-08: header icons not equal): smaller box, almost no lift */
  body .sticky-header-container .hd-links a.hd-routers.hd-on svg:not(.dg-ms),
  body .sticky-header-container .hd-links a.hd-incircart.hd-on svg:not(.dg-ms){width:17px!important;height:17px!important;margin:-1px!important;transform:none;stroke-width:1.8}
}
@media (max-width: 359px){
  body .sticky-header-container .hd-links{gap:10px!important}
  body .sticky-header-container .hd-links a.hd-on{font-size:11.5px!important;gap:3px!important}
}

/* ---- 2026-11-04 (owner): PHONE shop header: the search bar shrinks to the left and the cart icon (with its count badge) sits at its right, so someone who adds to the cart sees it at once.
   The cart is pinned to the bottom-right of the header (the search is the last row), same shop pages as the desktop cart (body.dg-shop). */
@media (max-width: 1023px){
  body.dg-shop:not(.dg-bg-tennis) .sticky-header-container .hd-cart{display:grid!important;place-items:center;position:absolute;right:34px;bottom:10px;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.16);border:0;padding:0;color:#fff;cursor:pointer;z-index:2}
  body.dg-shop:not(.dg-bg-tennis) .sticky-header-container .hd-cart svg{width:18px;height:18px}
  body.dg-shop:not(.dg-bg-tennis) .sticky-header-container .hd-cart .cart-count-badge{top:-4px;right:-4px;min-width:17px;height:17px;font-size:10.5px;border-color:#0c110e}
  body.dg-shop:not(.dg-bg-tennis) .sticky-header-container .hd-cart .cart-count-badge:empty,body.dg-shop:not(.dg-bg-tennis) .sticky-header-container .hd-cart .cart-count-badge[data-n="0"]{display:none}
  body.dg-shop:not(.dg-bg-tennis) .sticky-header-container .sticky-search-wrapper{padding-right:62px!important}
}
/* ---- 2026-11-04 (owner): the magnifier inside the search bar was too small to hit reliably. Bigger icon and a bigger tap area, desktop and phone. */
@media (max-width: 1023px){
  body .sticky-header-container .sticky-search-wrapper .search .search-btn{width:44px!important;height:34px!important;margin:0 -12px 0 0!important;display:grid!important;place-items:center}
  body .sticky-header-container .sticky-search-wrapper .search .search-btn svg{width:20px!important;height:20px!important}
}
@media (min-width: 1024px){
  body .sticky-header-container .sticky-search-wrapper .search .search-btn{width:46px!important;height:36px!important;min-width:46px!important;display:grid;place-items:center}
  body .sticky-header-container .sticky-search-wrapper .search .search-btn svg{width:19px!important;height:19px!important}
}

/* owner 2026-11-07: SHOP pages only (body.dg-shop) on phones: visible Home circle; Data = the home page's blue pill with the three network logos (smaller), spread evenly with Results Checker and DigiTools.
   Home page, Data page and DigiTools keep their original header (wifi icon, "Data bundles", Incircart where it was). */
.hd-tl{display:none}
.hd-lbl-short{display:none}
@media (max-width: 639px){
  body.dg-shop .hd-home{background:rgba(255,255,255,.26)!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.38),0 2px 8px rgba(0,0,0,.4)}
  body.dg-shop .hd-links{justify-content:space-between!important;align-items:center}
  body.dg-shop .hd-links a.hd-data{gap:6px;padding:6px 13px 6px 9px!important;border-radius:999px;color:#fff!important;font-weight:700;font-size:14px!important;line-height:1.2;background:linear-gradient(180deg,#0077ed 0%,#0066cc 100%);box-shadow:0 2px 10px rgba(0,113,227,.35)}
  body.dg-shop .hd-data .hd-wifi{display:none!important}
  body.dg-shop .hd-data .hd-tl{display:inline-flex!important;align-items:center;flex:none;width:48px;height:20px;overflow:visible}
  body.dg-shop .hd-data .hd-tl img{width:20px!important;height:20px!important;max-width:20px!important;margin-left:-6px!important;border-radius:50%;object-fit:cover;background:#fff;flex:none;box-shadow:0 1px 4px rgba(0,0,0,.45)}
  body.dg-shop .hd-data .hd-tl img:first-child{margin-left:0!important}
  body.dg-shop .hd-data .hd-lbl-full{display:none}
  body.dg-shop .hd-data .hd-lbl-short{display:inline!important}
}

/* 2026-11-07 (owner): the search bar's inside looked blurry on the phone (the blurred tennis-ball picture showed through the glass). Home + Buy Data only: keep the glass
   edge but make the inside a calm, clear dark tint with no blur, so the words read crisply. */
body.dg-bg-tennis .sticky-search-wrapper .search{background:rgba(14,22,14,.58)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;border:1px solid rgba(255,255,255,.22)!important;box-shadow:0 4px 14px rgba(0,0,0,.28)!important}
body.dg-bg-tennis .sticky-search-wrapper .search:focus-within{background:rgba(14,22,14,.7)!important;border-color:rgba(255,255,255,.4)!important}
body.dg-bg-tennis .sticky-search-wrapper .search input::placeholder{color:rgba(255,255,255,.7)}

/* 2026-11-07 (owner): a white ring (the browser's focus outline) appeared round the logo and other links/buttons after a tap or click, on phone and desktop. Not drawn on these pages. */
body.dg-bg-tennis a:focus,body.dg-bg-tennis a:focus-visible,body.dg-bg-tennis button:focus,body.dg-bg-tennis button:focus-visible,body.dg-bg-tennis [tabindex]:focus,body.dg-bg-tennis [tabindex]:focus-visible{outline:none!important}
body.dg-bg-tennis a,body.dg-bg-tennis button{-webkit-tap-highlight-color:transparent}

/* 2026-11-07 (owner): desktop default picture = the same zoomed crop the desktop already showed, sharpened by the DigiTensil AI at the exact crop shape (no re-crop needed). Phones keep the portrait one. */
@media (min-width:900px){:root{--dg-bg-default:url(/test/images/bg-tennis-wide3.webp)}}

/* 2026-11-07 (owner): instead of dimming, the desktop picture is panned to its dark gap between the balls so the buttons sit on the dark part (same zoom as before). */
/* 2026-11-07 (owner): dim the desktop picture (about 20%). Desktop only. */
@media (min-width:900px){body.dg-bg-tennis::before{filter:brightness(.8)}}

/* Phone header (owner 2026-11-07): use the screen width. One shared 14px side gutter (the same as the Data page cards, so the header lines up with them) for the brand, Home button, quick links and search (they sat at 30px/34px,
   which wasted space), and the quick links go up to the search placeholder's size (they were smaller than it). Phones only; the PC header is untouched. */
@media (max-width: 768px) {
  .sticky-header-container { padding-left: 0 !important; padding-right: 0 !important; }
  .main-nav-bar { padding-left: 14px !important; padding-right: 14px !important; }
  .hd-links { padding-left: 14px !important; padding-right: 14px !important; }
  .sticky-search-wrapper { padding-left: 14px !important; padding-right: 14px !important; }
}
@media (min-width: 360px) and (max-width: 768px) {
  body .sticky-header-container .hd-links a.hd-on { font-size: 14px !important; }
}

/* Data page on phones (owner 2026-11-07): a fast upward swipe made the "Choose a bundle" card vanish under the header with a hard cut, then reappear. Two
   frosted-glass layers (the sticky header and the card behind it) were stacked, and iPhone Safari drops one of them while the page is moving. The card keeps its
   frosted look with a slightly stronger white instead of its own blur, so only the header blurs. Phones only. */
@media (max-width: 768px) {
  .store-main .store-panel { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; background: rgba(255,255,255,.88) !important; }
}

/* Buy Data page, fast-swipe glitch (owner 2026-11-07): the card used to switch from "under the header" to "over the header" only AFTER a scroll event arrived (class
   dg-scrolled). On a phone a fast swipe delays that event, so for a moment the card slid UNDER the header with a hard cut, then jumped on top. The order is now fixed in
   plain CSS (card over header, always, no script involved). The header only goes above the card while the search box is in use, so its suggestions can still open
   over the card. */
body:not(.tools-mode):not(.admin-mode):has(.store-main .store-panel) .sticky-header-container { z-index: 1 !important; }
body:not(.tools-mode):not(.admin-mode):has(.store-main .store-panel) .store-panel { position: relative; z-index: 10; }
body:not(.tools-mode):not(.admin-mode):has(.store-main .store-panel) .sticky-header-container:focus-within,
body:not(.tools-mode):not(.admin-mode):has(.store-main .store-panel) .sticky-header-container:has(.dgn-suggest:not([hidden])) { z-index: 2500 !important; }

/* Buy Data page on phones (owner 2026-11-07): the header stays put when the page is pulled down to refresh (a sticky header rides along with the stretch; a fixed one
   does not). The page content gets the header's height as a top margin instead, measured by a small script in data/index.html (--dg-hdr-h). */
@media (max-width: 768px) {
  body:not(.tools-mode):not(.admin-mode):has(.store-main .store-panel) .sticky-header-container { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; width: 100% !important; }
  body:not(.tools-mode):not(.admin-mode):has(.store-main .store-panel) .store-main,
  body.history-mode:not(.tools-mode):not(.admin-mode):has(.store-main .store-panel) main.history-main,
  body.history-mode:not(.tools-mode):not(.admin-mode):has(.store-main .store-panel) main.verify-main { margin-top: calc(var(--dg-hdr-h, 140px) + 2px); }   /* 2026-11-08 (owner): cards sat too far below the header; was +14px */
  /* Track Order / Verify Payment had 12px of their own padding on top of that; the Buy Data card has none, so they sat lower. Same start line now. */
  body.history-mode:not(.tools-mode):not(.admin-mode):has(.store-main .store-panel) main.history-main .history-shell,
  body.history-mode:not(.tools-mode):not(.admin-mode):has(.store-main .store-panel) main.verify-main .history-shell { padding-top: 0; }
}

/* DigiTools on phones (owner 2026-11-08): header locked in place like the Buy Data page, the page starts right under it, so the stretch-and-spring moves only the tools. */
@media (max-width: 768px) {
  body.tools-mode:not(.admin-mode) .sticky-header-container { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; width: 100% !important; }
  /* the page runs from the very top and slides UNDER the frosted header (owner 2026-11-08), so the background blur is one piece with no seam */
  body.tools-mode:not(.admin-mode) main.tools-main { margin-top: 0; padding-top: calc(var(--dg-hdr-h, 140px) + 14px); min-height: 100dvh; }
}

/* (2026-11-07) A "no stretch" rule (overscroll-behavior:none) was tried here and removed the same day: iPhone Safari ignored it and the wallpaper jumped on drag-down. */

/* Buy Data page (owner 2026-11-07): when the card slides up, the frosted glass band behind the header used to fade away with the header (the whole header was faded and
   blurred). The band now stays steady; only the header's contents (logo, links, search) soften as before. */
body.dg-scrolled:not(.tools-mode):not(.admin-mode) .sticky-header-container { filter: none !important; opacity: 1 !important; }
body.dg-scrolled:not(.tools-mode):not(.admin-mode) .sticky-header-container > * { filter: blur(calc(var(--dg-p,0)*6px)); opacity: calc(1 - var(--dg-p,0)*.5); }

/* Buy Data page on phones (owner 2026-11-07): the page has its own pull-to-refresh (test/data-pull-refresh.js). If the finger slid up and then down again while holding,
   iPhone Safari could still start ITS refresh. This tells the browser not to run its own pull-to-refresh here, so ours is the only one. The rule on <html> only (the earlier
   try also set it on <body>). */
@media (max-width: 768px) {
  html:has(body.dg-bg-tennis .store-main .store-panel) { overscroll-behavior-y: none; }
}

/* Desktop header: the Data bundles (wifi) icon is on a 24 grid and drew about 9px wide next to the 13px icons beside it (owner 2026-11-09). Bigger box, negative margin so the layout does not move. Phones already handled above. */
@media (min-width: 1024px){
  body .sticky-header-container .hd-links a.hd-data svg.hd-wifi{width:22px!important;height:22px!important;margin:-3px!important}
}