/* =========================================================
   GigsAhoy Mobile Launch Fix
   Purpose: make the site smooth, readable, and usable on phones.
   Load this AFTER styles.css and page-specific CSS.
   ========================================================= */

html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

img,
svg,
video,
canvas,
iframe {
  max-width: 100%;
  height: auto;
}

body {
  -webkit-text-size-adjust: 100%;
}

main,
section,
article,
aside,
nav,
div {
  min-width: 0;
}

button,
a,
input,
select,
textarea {
  max-width: 100%;
}

/* ---------- Header: phone/tablet ---------- */
@media (max-width: 980px) {
  .compact-logo-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 1000 !important;
  }

  .compact-header-shell {
    width: 100% !important;
    max-width: 100% !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-rows: auto auto auto !important;
    gap: 8px 10px !important;
    align-items: center !important;
    padding: 8px 12px 10px !important;
  }

  .compact-logo-link {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: auto !important;
    min-width: 0 !important;
    justify-content: flex-start !important;
  }

  .compact-logo-img {
    width: min(245px, 68vw) !important;
    max-width: 100% !important;
    max-height: 76px !important;
    object-fit: contain !important;
  }

  .compact-header-right,
  .compact-header-actions {
    display: contents !important;
  }

  .compact-filter-btn,
  .compact-submit-btn,
  .layout-quiz-status-link {
    display: none !important;
  }

  .mobile-menu-btn {
    grid-column: 2 !important;
    grid-row: 1 !important;
    display: inline-flex !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    border-radius: 12px !important;
    font-size: 24px !important;
    align-self: center !important;
    justify-self: end !important;
  }

  .compact-header-search {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    width: 100% !important;
    height: 46px !important;
    min-height: 46px !important;
    border-radius: 13px !important;
    padding: 0 13px !important;
    margin: 0 !important;
    box-shadow: 0 5px 14px rgba(0, 0, 0, 0.13) !important;
  }

  .compact-header-search span {
    font-size: 22px !important;
    line-height: 1 !important;
  }

  .compact-header-search input {
    font-size: 16px !important;
    min-width: 0 !important;
  }

  .compact-main-nav {
    grid-column: 1 / -1 !important;
    grid-row: 3 !important;
    width: 100% !important;
    margin: 2px 0 0 !important;
    padding: 8px !important;
    border-radius: 14px !important;
    background: rgba(3, 21, 40, 0.98) !important;
  }

  .compact-main-nav.open {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 4px !important;
  }

  .compact-main-nav > a,
  .compact-main-nav .nav-dropdown > button {
    width: 100% !important;
    height: 44px !important;
    min-height: 44px !important;
    justify-content: flex-start !important;
    padding: 0 12px !important;
    border-radius: 10px !important;
  }
}

@media (max-width: 420px) {
  .compact-logo-img {
    width: min(215px, 66vw) !important;
    max-height: 68px !important;
  }

  .compact-header-shell {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
}

/* ---------- Gig detail pages: article first on mobile ---------- */
@media (max-width: 900px) {
  body.gig-detail-page .gig-page-shell,
  body.gig-detail-page .enhanced-gig-page {
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    padding: 12px 12px 0 !important;
    margin: 0 !important;
  }

  body.gig-detail-page .gig-main-article {
    order: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  body.gig-detail-page .gig-left-rail {
    order: 2 !important;
    display: none !important;
  }

  body.gig-detail-page .gig-right-rail {
    order: 3 !important;
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
    position: static !important;
    top: auto !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    padding: 0 !important;
    margin: 0 !important;
    transform: none !important;
  }

  body.gig-detail-page .gig-breadcrumbs {
    margin: 4px 0 10px !important;
    font-size: 12px !important;
  }

  body.gig-detail-page .gig-hero-section,
  body.gig-detail-page .enhanced-top-hero {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    padding: 18px !important;
    margin: 0 0 14px !important;
    border-radius: 20px !important;
    overflow: hidden !important;
  }

  body.gig-detail-page .gig-hero-copy h1 {
    font-size: clamp(2rem, 9vw, 2.7rem) !important;
    line-height: 1.05 !important;
    margin-bottom: 10px !important;
  }

  body.gig-detail-page .gig-subtitle,
  body.gig-detail-page .gig-intro {
    font-size: 1rem !important;
    line-height: 1.55 !important;
  }

  body.gig-detail-page .gig-hero-icons {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    margin-top: 14px !important;
  }

  body.gig-detail-page .gig-hero-icons > div {
    min-width: 0 !important;
    padding: 12px 10px !important;
    border-radius: 14px !important;
  }

  body.gig-detail-page .gig-hero-image {
    width: 100% !important;
    max-height: none !important;
  }

  body.gig-detail-page .gig-hero-image img {
    width: 100% !important;
    height: auto !important;
    max-height: 260px !important;
    object-fit: cover !important;
    border-radius: 16px !important;
  }

  body.gig-detail-page #at-a-glance,
  body.gig-detail-page .gig-at-a-glance-section,
  body.gig-detail-page #gigArticleContent,
  body.gig-detail-page .gig-color-article,
  body.gig-detail-page .gig-color-article .gig-article-section,
  body.gig-detail-page .gig-article-section.color-card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  body.gig-detail-page #at-a-glance,
  body.gig-detail-page .gig-at-a-glance-section,
  body.gig-detail-page .gig-color-article .gig-article-section,
  body.gig-detail-page .gig-article-section.color-card,
  body.gig-detail-page .gig-bottom-resource-block,
  body.gig-detail-page .gig-side-card {
    padding: 18px !important;
    border-radius: 18px !important;
  }

  body.gig-detail-page .gig-section-heading,
  body.gig-detail-page .gig-at-a-glance-heading {
    display: flex !important;
    align-items: flex-start !important;
    gap: 10px !important;
  }

  body.gig-detail-page .gig-section-heading h2,
  body.gig-detail-page .gig-at-a-glance-heading h2 {
    font-size: clamp(1.45rem, 7vw, 2rem) !important;
    line-height: 1.12 !important;
  }

  body.gig-detail-page #gigRatingBars,
  body.gig-detail-page .gig-glance-grid,
  body.gig-detail-page .fit-grid,
  body.gig-detail-page .client-methods,
  body.gig-detail-page .steps-strip,
  body.gig-detail-page .resource-card-grid,
  body.gig-detail-page .related-gig-grid,
  body.gig-detail-page .full-ratings-grid,
  body.gig-detail-page .affiliate-supplies-grid,
  body.gig-detail-page .gig-resource-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  body.gig-detail-page table {
    display: block !important;
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
}

@media (max-width: 520px) {
  body.gig-detail-page .gig-page-shell,
  body.gig-detail-page .enhanced-gig-page {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  body.gig-detail-page .gig-hero-section,
  body.gig-detail-page .enhanced-top-hero,
  body.gig-detail-page #at-a-glance,
  body.gig-detail-page .gig-at-a-glance-section,
  body.gig-detail-page .gig-color-article .gig-article-section,
  body.gig-detail-page .gig-article-section.color-card,
  body.gig-detail-page .gig-bottom-resource-block,
  body.gig-detail-page .gig-side-card {
    padding: 16px !important;
    border-radius: 16px !important;
  }

  body.gig-detail-page .gig-hero-icons {
    grid-template-columns: 1fr !important;
  }
}

/* ---------- General page smoothing ---------- */
@media (max-width: 760px) {
  .page-shell,
  .main-content,
  .resource-page,
  .simple-page,
  .quiz-page,
  .category-page,
  .single-guide-page,
  .single-tool-page,
  .gear-page,
  .resources-page,
  .submit-page,
  .browse-page-shell,
  .category-page-new,
  .tools-page,
  .guides-page {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .home-hero,
  .map-hero,
  .simple-hero,
  .resource-hero,
  .quiz-hero-new,
  .category-hero-new {
    min-height: auto !important;
  }

  .home-hero-content,
  .map-hero-content,
  .simple-hero,
  .resource-hero,
  .quiz-hero-copy-new,
  .category-hero-copy-new {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  h1 {
    overflow-wrap: break-word !important;
  }

  p,
  li,
  a,
  strong,
  small {
    overflow-wrap: break-word !important;
  }
}

/* =========================================================
   GigsAhoy Mobile Gig Page Polish v2
   - smaller hero-overlay caption
   - smaller quick icon tiles
   - fixed bottom jump menu for guide sections
   ========================================================= */

@media (max-width: 900px) {
  body.gig-detail-page {
    padding-bottom: 86px !important;
  }

  /* Keep the section jump menu available without stealing the top of the page. */
  body.gig-detail-page .gig-left-rail {
    display: block !important;
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 1400 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom)) !important;
    background: rgba(246, 252, 255, 0.96) !important;
    border-top: 1px solid rgba(17, 72, 98, 0.18) !important;
    box-shadow: 0 -8px 24px rgba(6, 27, 51, 0.16) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
  }

  body.gig-detail-page .gig-quiz-card,
  body.gig-detail-page #gigQuizRailCard {
    display: none !important;
  }

  body.gig-detail-page #gigGuideNav {
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    scroll-snap-type: x proximity !important;
  }

  body.gig-detail-page #gigGuideNav::-webkit-scrollbar {
    display: none !important;
  }

  body.gig-detail-page #gigGuideNav > .gig-guide-title {
    flex: 0 0 auto !important;
    margin: 0 !important;
    padding: 8px 10px !important;
    border-radius: 999px !important;
    font-size: 11px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    background: #061b33 !important;
    color: #ffffff !important;
  }

  body.gig-detail-page #gigGuideNav > a,
  body.gig-detail-page #gigGuideNav > a:nth-child(n),
  body.gig-detail-page #gigGuideNav > a[class*="nav-card-"] {
    flex: 0 0 auto !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    min-width: auto !important;
    max-width: 210px !important;
    height: 38px !important;
    margin: 0 !important;
    padding: 0 11px !important;
    border: 1px solid #bdd9e2 !important;
    border-left: 1px solid #bdd9e2 !important;
    border-radius: 999px !important;
    background: #ffffff !important;
    color: #12334a !important;
    font-size: 12px !important;
    font-weight: 850 !important;
    line-height: 1 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    box-shadow: 0 3px 9px rgba(8, 42, 68, 0.08) !important;
    scroll-snap-align: start !important;
  }

  body.gig-detail-page #gigGuideNav > a > span,
  body.gig-detail-page #gigGuideNav > a:nth-child(n) > span,
  body.gig-detail-page #gigGuideNav > a[class*="nav-card-"] > span {
    flex: 0 0 auto !important;
    display: inline-grid !important;
    place-items: center !important;
    width: 20px !important;
    height: 20px !important;
    margin: 0 !important;
    border-radius: 50% !important;
    background: #1688a3 !important;
    color: #ffffff !important;
    font-size: 10px !important;
    font-weight: 950 !important;
  }

  body.gig-detail-page #gigGuideNav > a.active {
    background: #dff5f4 !important;
    color: #075e73 !important;
    border-color: #75bec8 !important;
  }

  body.gig-detail-page #gigGuideNav > a:focus-visible {
    outline: 3px solid rgba(0, 174, 199, 0.45) !important;
    outline-offset: 2px !important;
  }

  /* Smaller, cleaner icon tiles at top of gig pages. */
  body.gig-detail-page .gig-hero-icons {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin-top: 12px !important;
  }

  body.gig-detail-page .gig-hero-icons > div {
    min-height: 74px !important;
    padding: 9px 6px !important;
    border-radius: 13px !important;
  }

  body.gig-detail-page .gig-hero-icons span {
    font-size: 1.25rem !important;
    line-height: 1 !important;
    margin-bottom: 4px !important;
  }

  body.gig-detail-page .gig-hero-icons strong {
    font-size: 0.72rem !important;
    line-height: 1.08 !important;
  }

  /* Smaller caption over the hero image so it does not dominate phones. */
  body.gig-detail-page .gig-hero-image div,
  body.gig-detail-page #gigHeroCaption {
    padding: 10px 12px !important;
    font-size: clamp(1rem, 4.8vw, 1.35rem) !important;
    line-height: 1.14 !important;
    letter-spacing: -0.01em !important;
    background: linear-gradient(90deg, rgba(6, 27, 51, 0.88), rgba(6, 27, 51, 0.50)) !important;
  }

  body.gig-detail-page .gig-hero-image img {
    max-height: 235px !important;
  }
}

@media (max-width: 520px) {
  body.gig-detail-page .gig-hero-icons {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body.gig-detail-page .gig-hero-icons > div {
    min-height: 66px !important;
  }

  body.gig-detail-page .gig-hero-image div,
  body.gig-detail-page #gigHeroCaption {
    font-size: clamp(0.95rem, 4.6vw, 1.18rem) !important;
    padding: 9px 11px !important;
  }
}

@media (max-width: 380px) {
  body.gig-detail-page #gigGuideNav > .gig-guide-title {
    display: none !important;
  }

  body.gig-detail-page #gigGuideNav > a,
  body.gig-detail-page #gigGuideNav > a:nth-child(n),
  body.gig-detail-page #gigGuideNav > a[class*="nav-card-"] {
    max-width: 185px !important;
    font-size: 11px !important;
  }
}

/* Mobile cleanup for Guides and Tools browse pages.
   Put the useful controls first and remove the oversized desktop topic rail. */
@media (max-width: 768px) {
  body.browse-page-body .browse-page-shell {
    width: 100% !important;
    max-width: 100% !important;
    padding: 10px 12px 28px !important;
    margin: 0 !important;
  }

  body.browse-page-body .browse-breadcrumbs {
    display: none !important;
  }

  body.browse-page-body .browse-three-column-layout {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
  }

  body.browse-page-body .browse-left-rail,
  body.browse-page-body .browse-side-card,
  body.browse-page-body .browse-category-card,
  body.browse-page-body .browse-side-quiz-card {
    display: none !important;
  }

  body.browse-page-body .browse-main-column {
    order: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  body.browse-page-body .browse-page-intro {
    margin: 0 0 12px !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  body.browse-page-body .browse-page-intro .browse-eyebrow,
  body.browse-page-body .browse-page-intro h1,
  body.browse-page-body .browse-page-intro > p {
    display: none !important;
  }

  body.browse-page-body .browse-search-tools {
    margin: 0 !important;
  }

  body.browse-page-body .browse-search-form {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  body.browse-page-body .browse-search-field {
    min-height: 54px !important;
    padding: 0 14px !important;
    border-radius: 18px !important;
    background: #ffffff !important;
    border: 1px solid rgba(20, 76, 108, 0.16) !important;
    box-shadow: 0 8px 22px rgba(8, 42, 68, 0.08) !important;
  }

  body.browse-page-body .browse-search-field input {
    font-size: 1rem !important;
    min-width: 0 !important;
  }

  body.browse-page-body .browse-search-submit,
  body.browse-page-body .browse-advanced-toggle {
    display: none !important;
  }

  body.browse-page-body .browse-search-clear {
    width: 100% !important;
    min-height: 42px !important;
    border-radius: 14px !important;
  }

  body.browse-page-body .browse-advanced-panel,
  body.browse-page-body .browse-advanced-panel[hidden] {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    margin: 10px 0 0 !important;
    padding: 12px !important;
    border-radius: 18px !important;
    background: #ffffff !important;
    border: 1px solid rgba(20, 76, 108, 0.14) !important;
    box-shadow: 0 8px 22px rgba(8, 42, 68, 0.07) !important;
  }

  body.browse-page-body .browse-advanced-panel label {
    display: grid !important;
    gap: 5px !important;
    font-size: 0.82rem !important;
    font-weight: 900 !important;
    color: #21445b !important;
  }

  body.browse-page-body .browse-advanced-panel select {
    width: 100% !important;
    min-height: 48px !important;
    padding: 0 12px !important;
    border-radius: 14px !important;
    font-size: 0.98rem !important;
    background: #f7fcfd !important;
    border: 1px solid rgba(20, 76, 108, 0.16) !important;
  }

  body.browse-page-body .browse-view-controls,
  body.browse-page-body .browse-clear-filters {
    display: none !important;
  }

  body.browse-page-body .browse-results-summary {
    margin: 10px 0 !important;
    padding: 0 2px !important;
  }

  body.browse-page-body .browse-results-summary p {
    font-size: 0.92rem !important;
  }

  body.browse-page-body .browse-results-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
}

/* =========================================================
   Mobile v4 cleanup
   - remove tall/clipped logo area on gig/guides/tools phones
   - put search at the top
   - replace bottom section strip with left slide-out section nav
   ========================================================= */

@media (max-width: 900px) {
  body.gig-detail-page #siteHeaderMount,
  body.browse-page-body #siteHeaderMount {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #061b33 !important;
  }

  body.gig-detail-page .compact-logo-header,
  body.browse-page-body .compact-logo-header {
    position: relative !important;
    top: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    min-height: 0 !important;
    overflow: visible !important;
    background: #061b33 !important;
  }

  body.gig-detail-page .compact-header-shell,
  body.browse-page-body .compact-header-shell {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 44px !important;
    grid-template-rows: auto auto !important;
    gap: 8px !important;
    padding: 10px 12px !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 0 !important;
    background: #061b33 !important;
  }

  body.gig-detail-page .compact-logo-link,
  body.browse-page-body .compact-logo-link,
  body.gig-detail-page .compact-logo-img,
  body.browse-page-body .compact-logo-img {
    display: none !important;
  }

  body.gig-detail-page .compact-header-right,
  body.browse-page-body .compact-header-right,
  body.gig-detail-page .compact-header-actions,
  body.browse-page-body .compact-header-actions {
    display: contents !important;
  }

  body.gig-detail-page .compact-header-search,
  body.browse-page-body .compact-header-search {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 100% !important;
    height: 48px !important;
    min-height: 48px !important;
    margin: 0 !important;
    padding: 0 14px !important;
    border-radius: 16px !important;
  }

  body.gig-detail-page .mobile-menu-btn,
  body.browse-page-body .mobile-menu-btn {
    grid-column: 2 !important;
    grid-row: 1 !important;
    display: inline-flex !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    margin: 2px 0 0 !important;
    align-self: start !important;
    justify-self: end !important;
  }

  body.gig-detail-page .compact-main-nav,
  body.browse-page-body .compact-main-nav {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
  }

  body.gig-detail-page .gig-page-shell,
  body.gig-detail-page .enhanced-gig-page {
    padding-top: 8px !important;
  }

  body.gig-detail-page .gig-breadcrumbs {
    margin-top: 0 !important;
  }

  /* Remove the old bottom strip behavior. */
  body.gig-detail-page {
    padding-bottom: 18px !important;
  }

  body.gig-detail-page .gig-left-rail {
    display: block !important;
    position: fixed !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    right: auto !important;
    z-index: 1900 !important;
    width: min(84vw, 330px) !important;
    max-width: min(84vw, 330px) !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    padding: max(18px, env(safe-area-inset-top)) 14px max(18px, env(safe-area-inset-bottom)) !important;
    margin: 0 !important;
    background: #f6fcff !important;
    border: 0 !important;
    border-right: 1px solid rgba(17, 72, 98, 0.18) !important;
    box-shadow: 18px 0 38px rgba(6, 27, 51, 0.22) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    transform: translateX(-105%) !important;
    transition: transform 220ms ease !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  body.gig-detail-page.mobile-sections-open .gig-left-rail {
    transform: translateX(0) !important;
  }

  body.gig-detail-page #gigGuideNav {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    width: 100% !important;
    overflow: visible !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  body.gig-detail-page #gigGuideNav > .gig-guide-title {
    display: block !important;
    width: 100% !important;
    padding: 10px 12px !important;
    border-radius: 14px !important;
    background: #061b33 !important;
    color: #ffffff !important;
    font-size: 0.82rem !important;
    font-weight: 950 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    white-space: normal !important;
  }

  body.gig-detail-page #gigGuideNav > a,
  body.gig-detail-page #gigGuideNav > a:nth-child(n),
  body.gig-detail-page #gigGuideNav > a[class*="nav-card-"] {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 44px !important;
    height: auto !important;
    justify-content: flex-start !important;
    padding: 10px 12px !important;
    border-radius: 14px !important;
    font-size: 0.9rem !important;
    line-height: 1.2 !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }

  body.gig-detail-page #gigGuideNav > a > span,
  body.gig-detail-page #gigGuideNav > a:nth-child(n) > span,
  body.gig-detail-page #gigGuideNav > a[class*="nav-card-"] > span {
    width: 24px !important;
    height: 24px !important;
    font-size: 0.74rem !important;
  }

  body.gig-detail-page #mobileSectionNavBtn {
    position: fixed !important;
    left: 0 !important;
    top: 50% !important;
    z-index: 1850 !important;
    transform: translateY(-50%) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 42px !important;
    height: 106px !important;
    border: 0 !important;
    border-radius: 0 16px 16px 0 !important;
    background: #061b33 !important;
    color: #ffffff !important;
    box-shadow: 7px 8px 22px rgba(6, 27, 51, 0.24) !important;
    font-size: 0.78rem !important;
    font-weight: 950 !important;
    writing-mode: vertical-rl !important;
    text-orientation: mixed !important;
    letter-spacing: 0.03em !important;
  }

  body.gig-detail-page.mobile-sections-open #mobileSectionNavBtn {
    left: min(84vw, 330px) !important;
  }

  body.gig-detail-page #mobileSectionBackdrop {
    position: fixed !important;
    inset: 0 !important;
    z-index: 1800 !important;
    display: none !important;
    background: rgba(6, 27, 51, 0.38) !important;
  }

  body.gig-detail-page.mobile-sections-open #mobileSectionBackdrop {
    display: block !important;
  }
}


/* =========================================================
   Mobile v5 universal slide-out nav
   Applies the left drawer tab to gig, guide, tool, about,
   and browse category pages. Tab is slimmer and fades while scrolling.
   ========================================================= */
@media (max-width: 900px) {
  body.gig-detail-page,
  body.guide-detail-page,
  body.tool-detail-page,
  body.about-page-body,
  body.browse-page-body {
    padding-bottom: 18px !important;
  }

  body.guide-detail-page .guide-left-rail,
  body.tool-detail-page .tool-left-rail,
  body.about-page-body .about-left-rail,
  body.browse-page-body .browse-left-rail {
    display: block !important;
    position: fixed !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    right: auto !important;
    z-index: 1900 !important;
    width: min(78vw, 300px) !important;
    max-width: min(78vw, 300px) !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    padding: max(16px, env(safe-area-inset-top)) 12px max(16px, env(safe-area-inset-bottom)) !important;
    margin: 0 !important;
    background: rgba(246, 252, 255, 0.98) !important;
    border: 0 !important;
    border-right: 1px solid rgba(17, 72, 98, 0.18) !important;
    box-shadow: 14px 0 32px rgba(6, 27, 51, 0.20) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    transform: translateX(-105%) !important;
    transition: transform 220ms ease !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
  }

  body.gig-detail-page .gig-left-rail {
    width: min(78vw, 300px) !important;
    max-width: min(78vw, 300px) !important;
    padding: max(16px, env(safe-area-inset-top)) 12px max(16px, env(safe-area-inset-bottom)) !important;
    background: rgba(246, 252, 255, 0.98) !important;
    box-shadow: 14px 0 32px rgba(6, 27, 51, 0.20) !important;
  }

  body.gig-detail-page.mobile-sections-open .gig-left-rail,
  body.guide-detail-page.mobile-sections-open .guide-left-rail,
  body.tool-detail-page.mobile-sections-open .tool-left-rail,
  body.about-page-body.mobile-sections-open .about-left-rail,
  body.browse-page-body.mobile-sections-open .browse-left-rail {
    transform: translateX(0) !important;
  }

  body.guide-detail-page .guide-left-rail > *,
  body.tool-detail-page .tool-left-rail > *,
  body.about-page-body .about-left-rail > *,
  body.browse-page-body .browse-left-rail > *,
  body.gig-detail-page .gig-left-rail > * {
    margin-bottom: 12px !important;
  }

  body.guide-detail-page .guide-quiz-card,
  body.tool-detail-page .tool-quiz-card,
  body.about-page-body .about-quiz-card,
  body.browse-page-body .browse-side-quiz-card {
    display: none !important;
  }

  body.gig-detail-page .mobile-section-drawer-nav,
  body.guide-detail-page .mobile-section-drawer-nav,
  body.tool-detail-page .mobile-section-drawer-nav,
  body.about-page-body .mobile-section-drawer-nav,
  body.browse-page-body .mobile-section-drawer-nav,
  body.gig-detail-page #gigGuideNav,
  body.guide-detail-page .guide-section-nav,
  body.tool-detail-page .tool-section-nav,
  body.about-page-body .about-page-nav,
  body.browse-page-body .browse-category-nav {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  body.guide-detail-page .guide-section-nav > .gig-guide-title,
  body.tool-detail-page .tool-section-nav > .gig-guide-title,
  body.gig-detail-page #gigGuideNav > .gig-guide-title,
  body.browse-page-body .browse-category-card h2,
  body.about-page-body .about-side-card h2 {
    display: block !important;
    width: 100% !important;
    padding: 9px 11px !important;
    border-radius: 13px !important;
    background: #061b33 !important;
    color: #ffffff !important;
    font-size: 0.78rem !important;
    font-weight: 950 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    white-space: normal !important;
  }

  body.gig-detail-page #gigGuideNav > a,
  body.guide-detail-page .guide-section-nav > a,
  body.tool-detail-page .tool-section-nav > a,
  body.about-page-body .about-page-nav > a,
  body.browse-page-body .browse-category-nav > button,
  body.browse-page-body .browse-category-nav > a {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 9px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 42px !important;
    height: auto !important;
    padding: 9px 11px !important;
    border-radius: 13px !important;
    font-size: 0.86rem !important;
    line-height: 1.2 !important;
    text-align: left !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }

  body.gig-detail-page #gigGuideNav > a > span,
  body.guide-detail-page .guide-section-nav > a > span,
  body.tool-detail-page .tool-section-nav > a > span,
  body.about-page-body .about-page-nav > a > span,
  body.browse-page-body .browse-category-nav > button > span,
  body.browse-page-body .browse-category-nav > a > span {
    width: 22px !important;
    min-width: 22px !important;
    height: 22px !important;
    font-size: 0.7rem !important;
  }

  body.gig-detail-page #mobileSectionNavBtn,
  body.guide-detail-page #mobileSectionNavBtn,
  body.tool-detail-page #mobileSectionNavBtn,
  body.about-page-body #mobileSectionNavBtn,
  body.browse-page-body #mobileSectionNavBtn {
    position: fixed !important;
    left: 0 !important;
    top: 50% !important;
    z-index: 1850 !important;
    transform: translateY(-50%) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 88px !important;
    border: 0 !important;
    border-radius: 0 13px 13px 0 !important;
    background: rgba(6, 27, 51, 0.86) !important;
    color: #ffffff !important;
    box-shadow: 5px 7px 18px rgba(6, 27, 51, 0.20) !important;
    font-size: 0.66rem !important;
    font-weight: 950 !important;
    writing-mode: vertical-rl !important;
    text-orientation: mixed !important;
    letter-spacing: 0.02em !important;
    opacity: 0.78 !important;
    transition: opacity 180ms ease, background-color 180ms ease, left 220ms ease !important;
  }

  body.mobile-section-scrolling:not(.mobile-sections-open) #mobileSectionNavBtn {
    opacity: 0.36 !important;
    background: rgba(6, 27, 51, 0.58) !important;
  }

  body.gig-detail-page #mobileSectionNavBtn:hover,
  body.guide-detail-page #mobileSectionNavBtn:hover,
  body.tool-detail-page #mobileSectionNavBtn:hover,
  body.about-page-body #mobileSectionNavBtn:hover,
  body.browse-page-body #mobileSectionNavBtn:hover,
  body.gig-detail-page #mobileSectionNavBtn:focus-visible,
  body.guide-detail-page #mobileSectionNavBtn:focus-visible,
  body.tool-detail-page #mobileSectionNavBtn:focus-visible,
  body.about-page-body #mobileSectionNavBtn:focus-visible,
  body.browse-page-body #mobileSectionNavBtn:focus-visible {
    opacity: 0.96 !important;
    background: rgba(6, 27, 51, 0.96) !important;
  }

  body.gig-detail-page.mobile-sections-open #mobileSectionNavBtn,
  body.guide-detail-page.mobile-sections-open #mobileSectionNavBtn,
  body.tool-detail-page.mobile-sections-open #mobileSectionNavBtn,
  body.about-page-body.mobile-sections-open #mobileSectionNavBtn,
  body.browse-page-body.mobile-sections-open #mobileSectionNavBtn {
    left: min(78vw, 300px) !important;
    opacity: 0.94 !important;
  }

  body.gig-detail-page #mobileSectionBackdrop,
  body.guide-detail-page #mobileSectionBackdrop,
  body.tool-detail-page #mobileSectionBackdrop,
  body.about-page-body #mobileSectionBackdrop,
  body.browse-page-body #mobileSectionBackdrop {
    position: fixed !important;
    inset: 0 !important;
    z-index: 1800 !important;
    display: none !important;
    background: rgba(6, 27, 51, 0.32) !important;
  }

  body.gig-detail-page.mobile-sections-open #mobileSectionBackdrop,
  body.guide-detail-page.mobile-sections-open #mobileSectionBackdrop,
  body.tool-detail-page.mobile-sections-open #mobileSectionBackdrop,
  body.about-page-body.mobile-sections-open #mobileSectionBackdrop,
  body.browse-page-body.mobile-sections-open #mobileSectionBackdrop {
    display: block !important;
  }
}


/* =========================================================
   Mobile v6 final search/header/menu fixes
   - keeps a small logo visible on mobile
   - adds section search banners for Gigs, Guides, and Tools
   - makes mobile dropdown filters usable and responsive
   - keeps Home as a clear first main-menu item from layout.js
   ========================================================= */
@media (max-width: 900px) {
  .compact-logo-header {
    background: #061b33 !important;
  }

  .compact-header-shell,
  body.gig-detail-page .compact-header-shell,
  body.guide-detail-page .compact-header-shell,
  body.tool-detail-page .compact-header-shell,
  body.about-page-body .compact-header-shell,
  body.browse-page-body .compact-header-shell {
    display: grid !important;
    grid-template-columns: 58px minmax(0, 1fr) 42px !important;
    grid-template-rows: auto auto !important;
    column-gap: 8px !important;
    row-gap: 8px !important;
    align-items: center !important;
    padding: max(6px, env(safe-area-inset-top)) 10px 9px !important;
    min-height: 0 !important;
    background: #061b33 !important;
  }

  .compact-logo-link,
  body.gig-detail-page .compact-logo-link,
  body.guide-detail-page .compact-logo-link,
  body.tool-detail-page .compact-logo-link,
  body.about-page-body .compact-logo-link,
  body.browse-page-body .compact-logo-link {
    display: flex !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 58px !important;
    min-width: 58px !important;
    height: 42px !important;
    overflow: hidden !important;
  }

  .compact-logo-img,
  body.gig-detail-page .compact-logo-img,
  body.guide-detail-page .compact-logo-img,
  body.tool-detail-page .compact-logo-img,
  body.about-page-body .compact-logo-img,
  body.browse-page-body .compact-logo-img {
    display: block !important;
    width: 118px !important;
    max-width: none !important;
    height: auto !important;
    max-height: 42px !important;
    object-fit: contain !important;
    object-position: left center !important;
  }

  .compact-header-right,
  .compact-header-actions,
  body.gig-detail-page .compact-header-right,
  body.browse-page-body .compact-header-right,
  body.gig-detail-page .compact-header-actions,
  body.browse-page-body .compact-header-actions {
    display: contents !important;
  }

  .compact-header-search,
  body.gig-detail-page .compact-header-search,
  body.guide-detail-page .compact-header-search,
  body.tool-detail-page .compact-header-search,
  body.about-page-body .compact-header-search,
  body.browse-page-body .compact-header-search {
    grid-column: 2 !important;
    grid-row: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 44px !important;
    min-height: 44px !important;
    margin: 0 !important;
    padding: 0 11px !important;
    border-radius: 15px !important;
  }

  .compact-header-search input,
  body.gig-detail-page .compact-header-search input,
  body.browse-page-body .compact-header-search input {
    min-width: 0 !important;
    font-size: 0.95rem !important;
  }

  .mobile-menu-btn,
  body.gig-detail-page .mobile-menu-btn,
  body.guide-detail-page .mobile-menu-btn,
  body.tool-detail-page .mobile-menu-btn,
  body.about-page-body .mobile-menu-btn,
  body.browse-page-body .mobile-menu-btn {
    grid-column: 3 !important;
    grid-row: 1 !important;
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    margin: 0 !important;
    align-self: center !important;
    justify-self: end !important;
  }

  .compact-main-nav,
  body.gig-detail-page .compact-main-nav,
  body.guide-detail-page .compact-main-nav,
  body.tool-detail-page .compact-main-nav,
  body.about-page-body .compact-main-nav,
  body.browse-page-body .compact-main-nav {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    width: 100% !important;
  }

  body.browse-page-body .browse-page-shell {
    padding-top: 8px !important;
  }

  body.search-gigs-page .browse-search-tools::before,
  body.search-guides-page .browse-search-tools::before,
  body.search-tools-page .browse-search-tools::before {
    display: block !important;
    width: 100% !important;
    margin: 0 0 8px !important;
    padding: 8px 12px !important;
    border-radius: 12px !important;
    background: linear-gradient(90deg, rgba(6,27,51,0.96), rgba(13,133,128,0.88)) !important;
    color: #ffffff !important;
    font-size: 0.82rem !important;
    font-weight: 950 !important;
    line-height: 1.15 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    box-shadow: 0 6px 16px rgba(6,27,51,0.12) !important;
  }

  body.search-gigs-page .browse-search-tools::before {
    content: "Search Gigs";
  }

  body.search-guides-page .browse-search-tools::before {
    content: "Search Guides";
  }

  body.search-tools-page .browse-search-tools::before {
    content: "Search Tools";
  }

  body.browse-page-body .browse-advanced-panel,
  body.browse-page-body .browse-advanced-panel[hidden] {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 9px !important;
    overflow: visible !important;
    position: relative !important;
    z-index: 5 !important;
  }

  body.browse-page-body .browse-advanced-panel label,
  body.browse-page-body .browse-controls-card label {
    width: 100% !important;
    min-width: 0 !important;
    overflow: visible !important;
  }

  body.browse-page-body .browse-advanced-panel select,
  body.browse-page-body .browse-controls-card select,
  body.browse-page-body select[id$="Select"] {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 48px !important;
    height: auto !important;
    padding: 0 40px 0 12px !important;
    border-radius: 14px !important;
    background-color: #ffffff !important;
    color: #0b2138 !important;
    border: 1px solid rgba(20, 76, 108, 0.20) !important;
    font-size: 0.95rem !important;
    line-height: 1.2 !important;
    pointer-events: auto !important;
    touch-action: manipulation !important;
    appearance: auto !important;
    -webkit-appearance: menulist !important;
    position: relative !important;
    z-index: 10 !important;
  }

  body.browse-page-body .browse-view-controls {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    align-items: center !important;
  }

  body.browse-page-body .browse-view-controls > div {
    display: flex !important;
    gap: 6px !important;
  }

  body.browse-page-body .browse-clear-filters {
    display: inline-flex !important;
    width: 100% !important;
    min-height: 42px !important;
    align-items: center !important;
    justify-content: center !important;
  }
}

@media (max-width: 380px) {
  .compact-header-shell,
  body.gig-detail-page .compact-header-shell,
  body.browse-page-body .compact-header-shell {
    grid-template-columns: 48px minmax(0, 1fr) 40px !important;
    column-gap: 7px !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  .compact-logo-link,
  body.gig-detail-page .compact-logo-link,
  body.browse-page-body .compact-logo-link {
    width: 48px !important;
    min-width: 48px !important;
  }

  .compact-logo-img,
  body.gig-detail-page .compact-logo-img,
  body.browse-page-body .compact-logo-img {
    width: 100px !important;
  }

  .compact-header-search input,
  body.gig-detail-page .compact-header-search input,
  body.browse-page-body .compact-header-search input {
    font-size: 0.88rem !important;
  }
}

/* =========================================================
   Mobile v8 stacked GigsAhoy icon
   Uses the simple two-line Gigs/Ahoy icon in the mobile top-left.
   ========================================================= */
@media (max-width: 900px) {
  .compact-header-shell,
  body.gig-detail-page .compact-header-shell,
  body.guide-detail-page .compact-header-shell,
  body.tool-detail-page .compact-header-shell,
  body.about-page-body .compact-header-shell,
  body.browse-page-body .compact-header-shell {
    grid-template-columns: 52px minmax(0, 1fr) 42px !important;
    column-gap: 8px !important;
  }

  .compact-logo-link,
  body.gig-detail-page .compact-logo-link,
  body.guide-detail-page .compact-logo-link,
  body.tool-detail-page .compact-logo-link,
  body.about-page-body .compact-logo-link,
  body.browse-page-body .compact-logo-link {
    width: 52px !important;
    min-width: 52px !important;
    height: 52px !important;
    border-radius: 12px !important;
    overflow: visible !important;
  }

  .compact-logo-img,
  body.gig-detail-page .compact-logo-img,
  body.guide-detail-page .compact-logo-img,
  body.tool-detail-page .compact-logo-img,
  body.about-page-body .compact-logo-img,
  body.browse-page-body .compact-logo-img {
    content: url("../img/gigsahoy-stacked-icon.png") !important;
    display: block !important;
    width: 48px !important;
    height: 48px !important;
    max-width: 48px !important;
    max-height: 48px !important;
    object-fit: contain !important;
    border-radius: 12px !important;
    box-shadow: 0 5px 14px rgba(0,0,0,0.12) !important;
  }

  .compact-header-search,
  body.gig-detail-page .compact-header-search,
  body.guide-detail-page .compact-header-search,
  body.tool-detail-page .compact-header-search,
  body.about-page-body .compact-header-search,
  body.browse-page-body .compact-header-search {
    height: 44px !important;
    min-height: 44px !important;
  }
}

@media (max-width: 380px) {
  .compact-header-shell,
  body.gig-detail-page .compact-header-shell,
  body.browse-page-body .compact-header-shell {
    grid-template-columns: 46px minmax(0, 1fr) 40px !important;
  }

  .compact-logo-link,
  .compact-logo-img,
  body.gig-detail-page .compact-logo-link,
  body.gig-detail-page .compact-logo-img,
  body.browse-page-body .compact-logo-link,
  body.browse-page-body .compact-logo-img {
    width: 42px !important;
    min-width: 42px !important;
    height: 42px !important;
    max-width: 42px !important;
    max-height: 42px !important;
  }
}


/* =========================================================
   Mobile/Desktop v9 polish pass
   - reference-quality stacked GigsAhoy icon beside search
   - consistent blue section navigation numbers everywhere
   - drawer always starts at the top visually
   ========================================================= */

:root {
  --ga-nav-blue: #1476a3;
  --ga-nav-blue-dark: #0b617b;
  --ga-nav-blue-soft: #eaf7ff;
  --ga-navy: #061b33;
}

/* Header: keep the compact icon next to the search on mobile, never above it. */
@media (max-width: 900px) {
  .compact-logo-header,
  .compact-header-shell {
    background: var(--ga-navy) !important;
  }

  .compact-header-shell,
  body.gig-detail-page .compact-header-shell,
  body.guide-detail-page .compact-header-shell,
  body.tool-detail-page .compact-header-shell,
  body.about-page-body .compact-header-shell,
  body.browse-page-body .compact-header-shell {
    display: grid !important;
    grid-template-columns: 54px minmax(0, 1fr) 42px !important;
    grid-template-rows: auto auto !important;
    column-gap: 8px !important;
    row-gap: 8px !important;
    align-items: center !important;
    padding: max(7px, env(safe-area-inset-top)) 10px 9px !important;
    min-height: 0 !important;
  }

  .compact-logo-link,
  body.gig-detail-page .compact-logo-link,
  body.guide-detail-page .compact-logo-link,
  body.tool-detail-page .compact-logo-link,
  body.about-page-body .compact-logo-link,
  body.browse-page-body .compact-logo-link {
    display: flex !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 54px !important;
    min-width: 54px !important;
    height: 52px !important;
    overflow: visible !important;
  }

  .compact-logo-img,
  body.gig-detail-page .compact-logo-img,
  body.guide-detail-page .compact-logo-img,
  body.tool-detail-page .compact-logo-img,
  body.about-page-body .compact-logo-img,
  body.browse-page-body .compact-logo-img {
    content: url("../img/gigsahoy-stacked-icon.png") !important;
    display: block !important;
    width: 50px !important;
    height: 50px !important;
    max-width: 50px !important;
    max-height: 50px !important;
    object-fit: contain !important;
    border-radius: 13px !important;
    box-shadow: 0 5px 14px rgba(0, 0, 0, 0.16) !important;
  }

  .compact-header-right,
  .compact-header-actions,
  body.gig-detail-page .compact-header-right,
  body.guide-detail-page .compact-header-right,
  body.tool-detail-page .compact-header-right,
  body.about-page-body .compact-header-right,
  body.browse-page-body .compact-header-right,
  body.gig-detail-page .compact-header-actions,
  body.guide-detail-page .compact-header-actions,
  body.tool-detail-page .compact-header-actions,
  body.about-page-body .compact-header-actions,
  body.browse-page-body .compact-header-actions {
    display: contents !important;
  }

  .compact-header-search,
  body.gig-detail-page .compact-header-search,
  body.guide-detail-page .compact-header-search,
  body.tool-detail-page .compact-header-search,
  body.about-page-body .compact-header-search,
  body.browse-page-body .compact-header-search {
    grid-column: 2 !important;
    grid-row: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 44px !important;
    min-height: 44px !important;
    margin: 0 !important;
    padding: 0 11px !important;
    border-radius: 15px !important;
  }

  .mobile-menu-btn,
  body.gig-detail-page .mobile-menu-btn,
  body.guide-detail-page .mobile-menu-btn,
  body.tool-detail-page .mobile-menu-btn,
  body.about-page-body .mobile-menu-btn,
  body.browse-page-body .mobile-menu-btn {
    grid-column: 3 !important;
    grid-row: 1 !important;
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    margin: 0 !important;
    align-self: center !important;
    justify-self: end !important;
  }

  .compact-main-nav,
  body.gig-detail-page .compact-main-nav,
  body.guide-detail-page .compact-main-nav,
  body.tool-detail-page .compact-main-nav,
  body.about-page-body .compact-main-nav,
  body.browse-page-body .compact-main-nav {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
  }
}

@media (max-width: 380px) {
  .compact-header-shell,
  body.gig-detail-page .compact-header-shell,
  body.guide-detail-page .compact-header-shell,
  body.tool-detail-page .compact-header-shell,
  body.about-page-body .compact-header-shell,
  body.browse-page-body .compact-header-shell {
    grid-template-columns: 46px minmax(0, 1fr) 40px !important;
    column-gap: 7px !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  .compact-logo-link,
  .compact-logo-img,
  body.gig-detail-page .compact-logo-link,
  body.gig-detail-page .compact-logo-img,
  body.guide-detail-page .compact-logo-link,
  body.guide-detail-page .compact-logo-img,
  body.tool-detail-page .compact-logo-link,
  body.tool-detail-page .compact-logo-img,
  body.about-page-body .compact-logo-link,
  body.about-page-body .compact-logo-img,
  body.browse-page-body .compact-logo-link,
  body.browse-page-body .compact-logo-img {
    width: 42px !important;
    min-width: 42px !important;
    height: 42px !important;
    max-width: 42px !important;
    max-height: 42px !important;
  }
}

/* One consistent section-nav look for desktop and mobile: blue, not rainbow. */
.gig-guide-nav a,
.gig-guide-nav a:nth-child(n),
.gig-guide-nav a[class*="nav-card-"],
.guide-section-nav a,
.tool-section-nav a,
.about-page-nav a {
  background: #ffffff !important;
  background-image: none !important;
  border-color: rgba(20, 118, 163, 0.18) !important;
  color: #193a52 !important;
  box-shadow: none !important;
}

.gig-guide-nav a:hover,
.guide-section-nav a:hover,
.tool-section-nav a:hover,
.about-page-nav a:hover {
  background: var(--ga-nav-blue-soft) !important;
  border-color: rgba(20, 118, 163, 0.28) !important;
  color: var(--ga-nav-blue-dark) !important;
}

.gig-guide-nav a.active,
.guide-section-nav a.active,
.tool-section-nav a.active,
.about-page-nav a.active {
  background: #e8f7ff !important;
  border-color: rgba(20, 118, 163, 0.36) !important;
  border-left-color: var(--ga-nav-blue) !important;
  color: var(--ga-nav-blue-dark) !important;
}

.gig-guide-nav a > span,
.gig-guide-nav a:nth-child(n) > span,
.gig-guide-nav a[class*="nav-card-"] > span,
.guide-section-nav a > span,
.tool-section-nav a > span,
.about-page-nav a > span {
  display: grid !important;
  place-items: center !important;
  width: 24px !important;
  min-width: 24px !important;
  height: 24px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: var(--ga-nav-blue) !important;
  background-image: none !important;
  color: #ffffff !important;
  font-size: 0.72rem !important;
  font-weight: 950 !important;
  box-shadow: none !important;
}

/* If a tool nav link was hard-coded without a number span, still show blue numbers. */
.tool-section-nav {
  counter-reset: toolNavCount;
}
.tool-section-nav a:not(:has(span)) {
  counter-increment: toolNavCount;
}
.tool-section-nav a:not(:has(span))::before {
  content: counter(toolNavCount);
  display: grid !important;
  place-items: center !important;
  width: 24px !important;
  min-width: 24px !important;
  height: 24px !important;
  border-radius: 999px !important;
  background: var(--ga-nav-blue) !important;
  color: #ffffff !important;
  font-size: 0.72rem !important;
  font-weight: 950 !important;
}

/* Drawer: always start at the title/top and keep top items visible. */
@media (max-width: 900px) {
  body.gig-detail-page .gig-left-rail,
  body.guide-detail-page .guide-left-rail,
  body.tool-detail-page .tool-left-rail,
  body.about-page-body .about-left-rail,
  body.browse-page-body .browse-left-rail {
    scroll-padding-top: max(16px, env(safe-area-inset-top)) !important;
  }

  body.gig-detail-page.mobile-sections-open .gig-left-rail,
  body.guide-detail-page.mobile-sections-open .guide-left-rail,
  body.tool-detail-page.mobile-sections-open .tool-left-rail,
  body.about-page-body.mobile-sections-open .about-left-rail,
  body.browse-page-body.mobile-sections-open .browse-left-rail {
    transform: translateX(0) !important;
  }

  body.gig-detail-page #mobileSectionNavBtn,
  body.guide-detail-page #mobileSectionNavBtn,
  body.tool-detail-page #mobileSectionNavBtn,
  body.about-page-body #mobileSectionNavBtn,
  body.browse-page-body #mobileSectionNavBtn {
    width: 31px !important;
    height: 84px !important;
    font-size: 0.64rem !important;
    opacity: 0.72 !important;
  }
}
/* =========================================================
   Compact Featured Idea Card on Mobile
   ========================================================= */

@media (max-width: 720px) {
  .homepage-three-column .featured-home-wrap,
  .featured-home-wrap {
    width: 100% !important;
    margin: 14px 0 18px !important;
    padding: 0 !important;
  }

  .featured-home-card {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 118px !important;
    min-height: 0 !important;
    height: auto !important;
    border-radius: 16px !important;
    overflow: hidden !important;
  }

  .featured-home-copy {
    min-width: 0 !important;
    padding: 16px !important;
    justify-content: center !important;
  }

  .featured-label {
    margin: 0 0 8px !important;
    padding: 4px 9px !important;
    font-size: 9px !important;
    line-height: 1.2 !important;
  }

  .featured-home-copy h3 {
    margin: 0 0 10px !important;
    font-size: 27px !important;
    line-height: 1.05 !important;
  }

  /*
   * Hide the longer description on phones so the card
   * stays the size of a normal featured-content card.
   */
  .featured-home-copy p {
    display: none !important;
  }

  .featured-home-btn {
    margin: 0 !important;
    padding: 9px 12px !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    line-height: 1.2 !important;
  }

  .featured-home-visual {
    display: block !important;
    min-width: 0 !important;
    min-height: 150px !important;
    height: 150px !important;
    border: 0 !important;
  }

  /*
   * The full statistics panel makes the mobile card
   * several screens tall, so it is hidden on phones.
   */
  .featured-home-stats {
    display: none !important;
  }

  .featured-home-image {
    display: block !important;
    width: 100% !important;
    height: 150px !important;
    min-height: 150px !important;
    max-height: 150px !important;
    object-fit: cover !important;
    object-position: center !important;
  }

  .featured-home-card.loading-card {
    display: block !important;
    padding: 18px !important;
  }
}

@media (max-width: 400px) {
  .featured-home-card {
    grid-template-columns: minmax(0, 1fr) 104px !important;
  }

  .featured-home-copy {
    padding: 14px !important;
  }

  .featured-home-copy h3 {
    font-size: 24px !important;
  }

  .featured-home-visual,
  .featured-home-image {
    height: 140px !important;
    min-height: 140px !important;
    max-height: 140px !important;
  }
}
/* =========================================================
   Square Mobile Header Logo
   ========================================================= */

.compact-logo-picture {
  display: block;
}

@media (max-width: 720px) {
  .compact-logo-link,
  body.gig-detail-page .compact-logo-link,
  body.guide-detail-page .compact-logo-link,
  body.tool-detail-page .compact-logo-link,
  body.about-page-body .compact-logo-link,
  body.browse-page-body .compact-logo-link {
    display: flex !important;
    width: 48px !important;
    min-width: 48px !important;
    height: 48px !important;
    padding: 0 !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
  }

  .compact-logo-picture {
    display: block !important;
    width: 44px !important;
    height: 44px !important;
  }

  .compact-logo-img,
  body.gig-detail-page .compact-logo-img,
  body.guide-detail-page .compact-logo-img,
  body.tool-detail-page .compact-logo-img,
  body.about-page-body .compact-logo-img,
  body.browse-page-body .compact-logo-img {
    display: block !important;
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    height: 44px !important;
    max-height: 44px !important;
    object-fit: contain !important;
  }
}
/* =========================================================
   Gig Pages: Teal Section Numbers + Remove Anchor Icon
   Must remain at the bottom of mobile-launch-fix.css
   ========================================================= */

/* Force every numbered article section to use one teal color */
body.gig-detail-page #gigArticleContent .section-number,
body.gig-detail-page #gigArticleContent .card-green .section-number,
body.gig-detail-page #gigArticleContent .card-blue .section-number,
body.gig-detail-page #gigArticleContent .card-orange .section-number,
body.gig-detail-page #gigArticleContent .card-purple .section-number,
body.gig-detail-page #gigArticleContent .card-red .section-number,
body.gig-detail-page #gigArticleContent .card-yellow .section-number,
body.gig-detail-page #gigArticleContent .card-pink .section-number,
body.gig-detail-page #gigArticleContent .card-indigo .section-number,
body.gig-detail-page #gigArticleContent .card-teal .section-number {
  background: #0b9187 !important;
  background-color: #0b9187 !important;
  background-image: none !important;
  color: #ffffff !important;
}

/* Completely remove the anchor circle from Best First Step */
body.gig-detail-page #gigArticleContent .gig-next-step-box::before {
  content: "" !important;
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Remove the large left space previously reserved for the icon */
body.gig-detail-page #gigArticleContent .gig-next-step-box {
  padding: 20px 22px !important;
}

/* Make sure the heading begins at the normal left edge */
body.gig-detail-page #gigArticleContent .gig-next-step-box h3,
body.gig-detail-page #gigArticleContent .gig-next-step-box p {
  margin-left: 0 !important;
  padding-left: 0 !important;
}
/* =========================================================
   Helpful Supplies Clickable Table Cells
   Desktop, Tablet, and Mobile
   ========================================================= */

body.gig-detail-page
  #gigArticleContent
  .affiliate-supply-table
  thead
  th {
  padding: 15px 18px !important;
  background: #123f4d !important;
  color: #ffffff !important;
  text-align: center !important;
  font-size: 15px !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
}

body.gig-detail-page
  #gigArticleContent
  .affiliate-supply-table
  td.affiliate-supply-clickable {
  position: relative !important;
  padding: 18px 20px !important;
  background: #eef9f7 !important;
  border: 6px solid #ffffff !important;
  border-radius: 14px !important;
  box-shadow:
    inset 0 0 0 1px #b8ddd7,
    0 3px 8px rgba(6, 35, 63, 0.05) !important;
  cursor: pointer !important;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s ease !important;
}

body.gig-detail-page
  #gigArticleContent
  .affiliate-supply-table
  td.affiliate-supply-clickable:hover {
  background: #dff4f0 !important;
  box-shadow:
    inset 0 0 0 2px #07988b,
    0 7px 16px rgba(6, 35, 63, 0.11) !important;
  transform: translateY(-2px) !important;
}

body.gig-detail-page
  #gigArticleContent
  .affiliate-supply-table
  td.affiliate-supply-clickable:focus-within {
  background: #dff4f0 !important;
  box-shadow:
    inset 0 0 0 3px #07988b,
    0 7px 16px rgba(6, 35, 63, 0.11) !important;
  outline: none !important;
}

body.gig-detail-page
  #gigArticleContent
  .affiliate-supply-table
  td.affiliate-supply-clickable
  strong {
  display: block !important;
  margin-bottom: 4px !important;
  color: #06233f !important;
  font-size: 16px !important;
}

body.gig-detail-page
  #gigArticleContent
  .affiliate-supply-table
  td.affiliate-supply-clickable
  p {
  margin: 0 0 12px !important;
}

body.gig-detail-page
  #gigArticleContent
  .affiliate-supply-table
  td.affiliate-supply-clickable
  a {
  position: static !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  color: #007f76 !important;
  font-weight: 800 !important;
  text-decoration: none !important;
}

body.gig-detail-page
  #gigArticleContent
  .affiliate-supply-table
  td.affiliate-supply-clickable
  a::before {
  content: "Shop ";
}

body.gig-detail-page
  #gigArticleContent
  .affiliate-supply-table
  td.affiliate-supply-clickable
  a::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 5 !important;
  display: block !important;
}

body.gig-detail-page
  #gigArticleContent
  .affiliate-supply-table
  td.affiliate-supply-clickable:hover
  a {
  color: #005f58 !important;
  text-decoration: underline !important;
}

@media (max-width: 720px) {
  body.gig-detail-page
    #gigArticleContent
    .affiliate-supply-table
    tbody,
  body.gig-detail-page
    #gigArticleContent
    .affiliate-supply-table
    tr {
    display: block !important;
  }

  body.gig-detail-page
    #gigArticleContent
    .affiliate-supply-table
    td.affiliate-supply-clickable {
    display: block !important;
    width: 100% !important;
    margin: 0 0 10px !important;
    padding: 16px !important;
    border: 0 !important;
  }
}
/* =========================================================
   Helpful Supplies Jump Links
   ========================================================= */

/* Desktop bubble at the top of the right column */
body.gig-detail-page
  .desktop-helpful-supplies-link {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  margin: 0 0 16px;
  padding: 16px 18px;
  border: 1px solid #9ddbd4;
  border-radius: 16px;
  background: #e8f8f5;
  color: #06233f;
  box-shadow: 0 7px 18px rgba(6, 35, 63, 0.08);
  text-decoration: none;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    background-color 0.2s ease;
}

body.gig-detail-page
  .desktop-helpful-supplies-link
  span {
  color: #007f76;
  font-size: 18px;
  font-weight: 900;
  line-height: 1.2;
}

body.gig-detail-page
  .desktop-helpful-supplies-link
  small {
  color: #4f6b7b;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
}

body.gig-detail-page
  .desktop-helpful-supplies-link:hover {
  background: #d9f3ef;
  box-shadow: 0 10px 22px rgba(6, 35, 63, 0.13);
  transform: translateY(-2px);
}

/* Hide the mobile tab on desktop */
body.gig-detail-page
  .mobile-helpful-supplies-link {
  display: none;
}

/* Leave room above the table after jumping */
body.gig-detail-page
  #helpful-supplies {
  scroll-margin-top: 110px;
}

@media (max-width: 900px) {
  /* Hide desktop right-column bubble */
  body.gig-detail-page
    .desktop-helpful-supplies-link {
    display: none !important;
  }

  /* Right-side mobile Supplies tab */
  body.gig-detail-page
    .mobile-helpful-supplies-link {
    position: fixed !important;
    top: 50% !important;
    right: 0 !important;
    z-index: 1840 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 88px !important;
    padding: 0 !important;
    border-radius: 13px 0 0 13px !important;
    background: rgba(7, 143, 133, 0.92) !important;
    color: #ffffff !important;
    box-shadow: -5px 7px 18px rgba(6, 27, 51, 0.20) !important;
    font-size: 0.66rem !important;
    font-weight: 950 !important;
    letter-spacing: 0.02em !important;
    line-height: 1 !important;
    text-decoration: none !important;
    writing-mode: vertical-rl !important;
    text-orientation: mixed !important;
    transform: translateY(-50%) !important;
  }

  body.gig-detail-page
    .mobile-helpful-supplies-link:active {
    background: #006f67 !important;
  }

  body.gig-detail-page
    #helpful-supplies {
    scroll-margin-top: 85px;
  }
}

/* =========================================================
   Mobile Gig Sections Drawer — Smaller + Fully Scrollable
   ========================================================= */

@media (max-width: 900px) {
  body.gig-detail-page .gig-left-rail {
    top: 0 !important;
    bottom: 0 !important;
    height: 100dvh !important;
    max-height: 100dvh !important;

    padding:
      max(12px, env(safe-area-inset-top))
      10px
      calc(34px + env(safe-area-inset-bottom))
      !important;

    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-behavior: smooth !important;
  }

  body.gig-detail-page #gigGuideNav {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    width: 100% !important;
    min-height: max-content !important;
    padding: 0 0 24px !important;
    overflow: visible !important;
  }

  body.gig-detail-page #gigGuideNav a,
  body.gig-detail-page
    #gigGuideNav
    a:nth-child(n),
  body.gig-detail-page
    #gigGuideNav
    a[class*="nav-card-"] {
    display: grid !important;
    grid-template-columns: 24px minmax(0, 1fr) !important;
    align-items: center !important;
    column-gap: 7px !important;

    min-height: 44px !important;
    width: 100% !important;

    margin: 0 !important;
    padding: 7px 9px !important;

    border-radius: 12px !important;

    font-size: 0.78rem !important;
    line-height: 1.18 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
  }

  body.gig-detail-page #gigGuideNav a > span,
  body.gig-detail-page
    #gigGuideNav
    a:nth-child(n)
    > span {
    display: grid !important;
    place-items: center !important;

    width: 24px !important;
    min-width: 24px !important;
    height: 24px !important;

    margin: 0 !important;

    font-size: 0.68rem !important;
    line-height: 1 !important;
  }

  body.gig-detail-page
    #gigGuideNav
    > .gig-guide-title {
    position: sticky !important;
    top: 0 !important;
    z-index: 3 !important;

    margin: 0 0 4px !important;
    padding: 9px 10px !important;

    font-size: 0.72rem !important;
    line-height: 1.2 !important;
  }

  body.gig-detail-page.mobile-sections-open {
    overflow: hidden !important;
  }

  body.gig-detail-page.mobile-sections-open
    .gig-left-rail {
    transform: translateX(0) !important;
  }
}

/* =========================================================
   Mobile Gig Scores — Collapsible, 3 Per Row, Correct Depth
   ========================================================= */

/*
   Keep the score section beneath both fixed mobile tabs.
*/
body.gig-detail-page #at-a-glance {
  position: relative !important;
  z-index: 1 !important;
  isolation: isolate !important;
}

body.gig-detail-page
  #gigRatingBars {
  position: relative !important;
  z-index: 2 !important;
}

body.gig-detail-page
  .gig-glance-bubble {
  position: relative !important;
  z-index: 1 !important;
}

body.gig-detail-page
  .gig-glance-bubble:hover,
body.gig-detail-page
  .gig-glance-bubble:focus-within {
  z-index: 10000 !important;
}

/*
   Fixed navigation tabs must remain above the score area.
*/
body.gig-detail-page
  .mobile-gig-nav-toggle,
body.gig-detail-page
  .mobile-sections-tab,
body.gig-detail-page
  .mobile-helpful-supplies-link {
  z-index: 20000 !important;
}

/*
   Tooltip depth and visibility.
*/
body.gig-detail-page
  #gigRatingBars
  .rating-tooltip,
body.gig-detail-page
  .gig-glance-bubble
  .rating-tooltip {
  position: absolute !important;
  z-index: 50000 !important;

  left: 50% !important;
  right: auto !important;
  bottom: calc(100% + 8px) !important;

  width: 220px !important;
  max-width: min(220px, 82vw) !important;

  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;

  transform:
    translateX(-50%)
    translateY(5px) !important;
}

body.gig-detail-page
  .gig-glance-bubble:hover
  .rating-tooltip,
body.gig-detail-page
  .gig-glance-bubble:focus-within
  .rating-tooltip {
  opacity: 1 !important;
  visibility: visible !important;

  transform:
    translateX(-50%)
    translateY(0) !important;
}

body.gig-detail-page
  .gig-scores-mobile-toggle {
  display: none;
}

@media (max-width: 760px) {
  body.gig-detail-page
    #at-a-glance {
    margin: 12px 0 16px !important;
    padding: 11px !important;
    border-radius: 14px !important;
    overflow: visible !important;
  }

  body.gig-detail-page
    #at-a-glance
    .gig-at-a-glance-heading {
    display: grid !important;
    grid-template-columns:
      minmax(0, 1fr)
      auto !important;
    align-items: center !important;
    gap: 8px !important;

    margin: 0 !important;
  }

  body.gig-detail-page
    #at-a-glance
    .gig-at-a-glance-heading
    > span {
    display: none !important;
  }

  body.gig-detail-page
    #at-a-glance
    .gig-at-a-glance-heading
    h2 {
    margin: 0 !important;
    font-size: 18px !important;
    line-height: 1.15 !important;
  }

  body.gig-detail-page
    .gig-scores-mobile-toggle {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;

    min-height: 36px !important;
    padding: 7px 11px !important;

    border: 1px solid #8ccfc8 !important;
    border-radius: 999px !important;

    background: #e5f7f4 !important;
    color: #087f77 !important;

    font-family: inherit !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    line-height: 1 !important;

    cursor: pointer !important;
  }

  body.gig-detail-page
    .gig-scores-mobile-toggle
    span {
    display: grid !important;
    width: 20px !important;
    height: 20px !important;
    place-items: center !important;

    border-radius: 50% !important;
    background: #078f85 !important;
    color: #ffffff !important;

    font-size: 15px !important;
    line-height: 1 !important;
  }

  /*
     Collapsed by default.
  */
  body.gig-detail-page
    #at-a-glance:not(.mobile-scores-expanded)
    #gigRatingBars {
    display: none !important;
  }

  /*
     Three bubbles per row when expanded.
  */
  body.gig-detail-page
    #at-a-glance.mobile-scores-expanded
    #gigRatingBars.gig-glance-grid {
    display: grid !important;
    grid-template-columns:
      repeat(3, minmax(0, 1fr)) !important;

    gap: 6px !important;
    margin-top: 10px !important;
    overflow: visible !important;
  }

  body.gig-detail-page
    .gig-glance-bubble {
    grid-template-columns: 1fr !important;
    justify-items: center !important;
    gap: 4px !important;

    min-height: 72px !important;
    padding: 7px 4px !important;

    border-radius: 10px !important;
    text-align: center !important;
    overflow: visible !important;
  }

  body.gig-detail-page
    .gig-glance-icon {
    width: 25px !important;
    height: 25px !important;

    border-radius: 7px !important;

    font-size: 10px !important;
  }

  body.gig-detail-page
    .gig-glance-copy {
    align-items: center !important;
    width: 100% !important;
  }

  body.gig-detail-page
    .gig-glance-label {
    min-height: 20px !important;

    font-size: 6.7px !important;
    line-height: 1.05 !important;
    text-align: center !important;
  }

  body.gig-detail-page
    .gig-glance-score {
    margin-top: 1px !important;

    font-size: 15px !important;
  }

  /*
     Keep tooltips inside the phone viewport.
  */
  body.gig-detail-page
    .gig-glance-bubble:nth-child(3n + 1)
    .rating-tooltip {
    left: 0 !important;
    transform: translateY(5px) !important;
  }

  body.gig-detail-page
    .gig-glance-bubble:nth-child(3n + 1):hover
    .rating-tooltip,
  body.gig-detail-page
    .gig-glance-bubble:nth-child(3n + 1):focus-within
    .rating-tooltip {
    transform: translateY(0) !important;
  }

  body.gig-detail-page
    .gig-glance-bubble:nth-child(3n)
    .rating-tooltip {
    left: auto !important;
    right: 0 !important;
    transform: translateY(5px) !important;
  }

  body.gig-detail-page
    .gig-glance-bubble:nth-child(3n):hover
    .rating-tooltip,
  body.gig-detail-page
    .gig-glance-bubble:nth-child(3n):focus-within
    .rating-tooltip {
    transform: translateY(0) !important;
  }
}
/* =========================================================
   Gig Score Floating Tooltip + Instruction Text
   ========================================================= */

/*
   Hide the old tooltip inside each score bubble.
   JavaScript copies its content into the floating tooltip.
*/
body.gig-detail-page
  #gigRatingBars
  .rating-tooltip {
  display: none !important;
}

/*
   Floating tooltip is attached directly to the body,
   so cards, sections, rails, and overflow rules cannot clip it.
*/
body.gig-detail-page
  .gig-score-floating-tooltip {
  position: fixed !important;
  z-index: 999999 !important;

  display: block !important;
  width: max-content !important;
  max-width: min(280px, calc(100vw - 20px)) !important;

  padding: 10px 13px !important;

  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  border-radius: 10px !important;

  background: #062d49 !important;
  color: #ffffff !important;

  box-shadow:
    0 12px 30px rgba(0, 0, 0, 0.3) !important;

  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  text-align: left !important;

  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;

  transform: translateY(4px) !important;

  transition:
    opacity 0.15s ease,
    transform 0.15s ease,
    visibility 0.15s ease !important;
}

body.gig-detail-page
  .gig-score-floating-tooltip.is-visible {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) !important;
}

/*
   Instruction beside the section title.
*/
body.gig-detail-page
  .gig-score-hover-hint {
  display: inline-flex !important;
  align-items: center !important;

  margin-left: 10px !important;
  padding: 5px 9px !important;

  border: 1px solid #a8dcd6 !important;
  border-radius: 999px !important;

  background: #e8f8f5 !important;
  color: #087f77 !important;

  font-size: 11px !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
  white-space: nowrap !important;
}

/*
   Keep the score cards below the two fixed side tabs.
*/
body.gig-detail-page
  .mobile-gig-nav-toggle,
body.gig-detail-page
  .mobile-sections-tab,
body.gig-detail-page
  .mobile-helpful-supplies-link {
  z-index: 20000 !important;
}

@media (max-width: 760px) {
  body.gig-detail-page
    #at-a-glance
    .gig-at-a-glance-heading {
    grid-template-columns:
      minmax(0, 1fr)
      auto !important;

    align-items: center !important;
  }

  body.gig-detail-page
    .gig-score-hover-hint {
    grid-column: 1 / -1 !important;

    margin: 5px 0 0 !important;
    padding: 4px 8px !important;

    justify-self: start !important;

    font-size: 9px !important;
    white-space: normal !important;
  }

  body.gig-detail-page
    .gig-score-hover-hint::before {
    content: "ⓘ";
    margin-right: 4px;
  }

  body.gig-detail-page
    .gig-score-floating-tooltip {
    max-width:
      min(
        250px,
        calc(100vw - 24px)
      ) !important;

    font-size: 11px !important;
  }
}

/* =========================================================
   Helpful Supplies Header + Shop Buttons
   ========================================================= */

body.gig-detail-page
  #gigArticleContent
  .affiliate-supply-heading-wrap {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 5px !important;
  width: 100% !important;
}

body.gig-detail-page
  #gigArticleContent
  .affiliate-supply-heading-title {
  display: block !important;
  width: 100% !important;
  color: #ffffff !important;
  font-size: 16px !important;
  font-weight: 900 !important;
  line-height: 1.15 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
}

body.gig-detail-page
  #gigArticleContent
  .affiliate-supply-heading-note {
  display: block !important;
  width: 100% !important;
  color: #d8f3ef !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

/* Turn each Shop link into a visible button */
body.gig-detail-page
  #gigArticleContent
  .affiliate-supply-table
  td.affiliate-supply-clickable
  a {
  position: relative !important;
  z-index: 6 !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;

  margin-top: 2px !important;
  padding: 8px 12px !important;

  border: 1px solid #078f85 !important;
  border-radius: 999px !important;

  background: #078f85 !important;
  color: #ffffff !important;

  font-size: 13px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  text-decoration: none !important;

  box-shadow: 0 4px 10px rgba(7, 143, 133, 0.18) !important;

  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    transform 0.2s ease,
    box-shadow 0.2s ease !important;
}

body.gig-detail-page
  #gigArticleContent
  .affiliate-supply-table
  td.affiliate-supply-clickable
  a::before {
  content: "Shop" !important;
}

body.gig-detail-page
  #gigArticleContent
  .affiliate-supply-table
  td.affiliate-supply-clickable
  a::after {
  content: "→" !important;

  position: static !important;
  inset: auto !important;

  display: inline-block !important;
  width: auto !important;
  height: auto !important;

  font-size: 14px !important;
  line-height: 1 !important;
}

/*
   Keep the entire cell clickable while allowing
   the visible Shop button to remain styled normally.
*/
body.gig-detail-page
  #gigArticleContent
  .affiliate-supply-table
  td.affiliate-supply-clickable {
  cursor: pointer !important;
}

body.gig-detail-page
  #gigArticleContent
  .affiliate-supply-table
  td.affiliate-supply-clickable:hover
  a,
body.gig-detail-page
  #gigArticleContent
  .affiliate-supply-table
  td.affiliate-supply-clickable:focus-within
  a {
  background: #006f67 !important;
  border-color: #006f67 !important;
  color: #ffffff !important;
  text-decoration: none !important;

  box-shadow: 0 6px 14px rgba(7, 143, 133, 0.28) !important;
  transform: translateY(-1px) !important;
}

@media (max-width: 720px) {
  body.gig-detail-page
    #gigArticleContent
    .affiliate-supply-heading-title {
    font-size: 15px !important;
  }

  body.gig-detail-page
    #gigArticleContent
    .affiliate-supply-heading-note {
    font-size: 11px !important;
  }

  body.gig-detail-page
    #gigArticleContent
    .affiliate-supply-table
    td.affiliate-supply-clickable
    a {
    padding: 8px 11px !important;
    font-size: 12px !important;
  }
}

/* =========================================================
   Desktop Homepage Hero — Prevent Cropping
   ========================================================= */

@media (min-width: 1100px) {
  .home-hero-carousel,
  .home-hero-loading,
  .home-hero-content {
    min-height: 540px !important;
  }

  .home-hero-content {
    align-items: center !important;
    padding: 48px 105px 70px 58px !important;
  }

  .home-hero-copy {
    width: min(650px, 58%) !important;
  }

  .home-hero-title {
    margin-bottom: 18px !important;
    font-size: clamp(46px, 4.5vw, 67px) !important;
    line-height: 0.98 !important;
  }

  .home-hero-subtitle {
    max-width: 580px !important;
  }

  .home-hero-actions {
    margin-top: 28px !important;
  }

  .home-hero-slide-image {
    object-position: center 30% !important;
  }

  .home-hero-dots {
    bottom: 18px !important;
  }
}

/* =========================================================
   Desktop Homepage Hero — Prevent Cropping
   ========================================================= */

@media (min-width: 1100px) {
  .home-hero-carousel,
  .home-hero-loading,
  .home-hero-content {
    min-height: 540px !important;
  }

  .home-hero-content {
    align-items: center !important;
    padding: 48px 105px 70px 58px !important;
  }

  .home-hero-copy {
    width: min(650px, 58%) !important;
  }

  .home-hero-title {
    margin-bottom: 18px !important;
    font-size: clamp(46px, 4.5vw, 67px) !important;
    line-height: 0.98 !important;
  }

  .home-hero-subtitle {
    max-width: 580px !important;
  }

  .home-hero-actions {
    margin-top: 28px !important;
  }

  .home-hero-slide-image {
    object-position: center 30% !important;
  }

  .home-hero-dots {
    bottom: 18px !important;
  }
}

/* =========================================================
   FINAL DESKTOP SIDE RAILS
   Homepage, browse pages, gig pages, guide pages, and tool pages
   ========================================================= */

@media (min-width: 1251px) {

  /*
   * Keep homepage grid tracks occupied when the sidebars
   * become position: fixed. Without these assignments the
   * center column can auto-place into the first grid track.
   */
  .home-left-sidebar {
    grid-column: 1 !important;
  }

  .home-center-column {
    grid-column: 2 !important;
    min-width: 0 !important;
    width: 100% !important;
  }

  .home-right-sidebar {
    grid-column: 3 !important;
  }

  /*
   * Keep gig, guide, and tool center articles in the middle
   * grid track after either sidebar becomes position: fixed.
   */
  body.gig-detail-page .gig-left-rail,
  body.guide-detail-page .guide-left-rail,
  body.tool-detail-page .tool-left-rail {
    grid-column: 1 !important;
  }

  body.gig-detail-page .gig-main-article,
  body.guide-detail-page .guide-main-article,
  body.tool-detail-page .tool-main-article {
    grid-column: 2 !important;
    min-width: 0 !important;
    width: 100% !important;
  }

  body.gig-detail-page .gig-right-rail,
  body.guide-detail-page .guide-right-rail,
  body.tool-detail-page .tool-right-rail {
    grid-column: 3 !important;
  }

  /*
   * Natural state before JavaScript locks a rail.
   * Do not force a viewport-height box here.
   */
  .home-left-sidebar,
  .home-right-sidebar,

  body.browse-page-body .browse-left-rail,
  body.browse-page-body .browse-right-rail,

  body.gig-detail-page .gig-left-rail,
  body.gig-detail-page .gig-right-rail,

  body.guide-detail-page .guide-left-rail,
  body.guide-detail-page .guide-right-rail,

  body.tool-detail-page .tool-left-rail,
  body.tool-detail-page .tool-right-rail {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;

    align-self: start !important;

    width: 100% !important;
    height: auto !important;
    max-height: none !important;

    overflow: visible !important;
  }

  /*
   * Invisible grid placeholders keep all three layout tracks
   * occupied while the real sidebars are position: fixed.
   * This prevents the center content from jumping left.
   */
  .true-fixed-sidebar-placeholder {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 1px !important;
    min-height: 1px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  /*
   * JavaScript adds this class only after the rail reaches
   * the top of the viewport.
   */
  .true-fixed-sidebar,
  body.browse-page-body .browse-left-rail.true-fixed-sidebar,
  body.browse-page-body .browse-right-rail.true-fixed-sidebar,
  body.gig-detail-page .gig-left-rail.true-fixed-sidebar,
  body.gig-detail-page .gig-right-rail.true-fixed-sidebar,
  body.guide-detail-page .guide-left-rail.true-fixed-sidebar,
  body.guide-detail-page .guide-right-rail.true-fixed-sidebar,
  body.tool-detail-page .tool-left-rail.true-fixed-sidebar,
  body.tool-detail-page .tool-right-rail.true-fixed-sidebar {
    position: fixed !important;

    top: var(--true-sidebar-top, 12px) !important;
    left: var(--true-sidebar-left) !important;
    right: auto !important;

    width: var(--true-sidebar-width) !important;

    height: auto !important;
    max-height: calc(100dvh - 24px) !important;

    overflow-x: hidden !important;
    overflow-y: auto !important;

    overscroll-behavior-y: contain !important;
    overscroll-behavior-x: none !important;

    scrollbar-width: thin !important;
    scrollbar-color: #9db2c2 transparent !important;

    z-index: 40 !important;
  }

  /*
   * The homepage right rail uses one outer scrollbar.
   */
  .home-right-sidebar {
    display: grid !important;
    gap: 18px !important;
  }

  .home-right-sidebar-scroll {
    display: grid !important;
    gap: 18px !important;

    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    overflow: visible !important;
    padding-right: 0 !important;
  }

  /*
   * Cards inside a rail must remain in normal flow.
   */
  .home-left-sidebar > *,
  .home-right-sidebar > *,
  .home-right-sidebar-scroll > *,

  body.browse-page-body .browse-left-rail > *,
  body.browse-page-body .browse-right-rail > *,

  body.gig-detail-page .gig-left-rail > *,
  body.gig-detail-page .gig-right-rail > *,

  body.guide-detail-page .guide-left-rail > *,
  body.guide-detail-page .guide-right-rail > *,

  body.tool-detail-page .tool-left-rail > *,
  body.tool-detail-page .tool-right-rail > * {
    position: relative !important;
    top: auto !important;
  }

  .true-fixed-sidebar::-webkit-scrollbar {
    width: 7px !important;
  }

  .true-fixed-sidebar::-webkit-scrollbar-track {
    background: transparent !important;
  }

  .true-fixed-sidebar::-webkit-scrollbar-thumb {
    background: #9db2c2 !important;
    border-radius: 999px !important;
  }

  .true-fixed-sidebar::-webkit-scrollbar-thumb:hover {
    background: #718b9f !important;
  }
}

/* =========================================================
   TABLET AND MOBILE RESET
   ========================================================= */

@media (max-width: 1250px) {
  .true-fixed-sidebar,

  .home-left-sidebar,
  .home-right-sidebar,

  body.browse-page-body .browse-left-rail,
  body.browse-page-body .browse-right-rail,

  body.gig-detail-page .gig-left-rail,
  body.gig-detail-page .gig-right-rail,

  body.guide-detail-page .guide-left-rail,
  body.guide-detail-page .guide-right-rail,

  body.tool-detail-page .tool-left-rail,
  body.tool-detail-page .tool-right-rail {
    position: static !important;

    top: auto !important;
    left: auto !important;
    right: auto !important;

    width: auto !important;
    height: auto !important;
    max-height: none !important;

    overflow: visible !important;
  }

  .home-right-sidebar-scroll {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }
}

/* =========================================================
   FINAL MOBILE GIG SECTIONS DRAWER POSITION FIX
   Keeps the drawer attached to the left side of the viewport.
   ========================================================= */
@media (max-width: 900px) {
  body.gig-detail-page .gig-left-rail {
    display: block !important;
    position: fixed !important;
    inset: 0 auto 0 0 !important;
    z-index: 1900 !important;

    width: min(78vw, 300px) !important;
    max-width: min(78vw, 300px) !important;
    height: 100dvh !important;
    max-height: 100dvh !important;

    margin: 0 !important;
    padding:
      max(16px, env(safe-area-inset-top))
      12px
      max(20px, env(safe-area-inset-bottom)) !important;

    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;

    background: rgba(246, 252, 255, 0.99) !important;
    border: 0 !important;
    border-right: 1px solid rgba(17, 72, 98, 0.18) !important;
    box-shadow: 14px 0 32px rgba(6, 27, 51, 0.20) !important;

    transform: translate3d(-105%, 0, 0) !important;
    transition: transform 220ms ease !important;
  }

  body.gig-detail-page.mobile-sections-open .gig-left-rail {
    transform: translate3d(0, 0, 0) !important;
  }

  body.gig-detail-page #gigGuideNav {
    display: grid !important;
    grid-template-columns: 1fr !important;
    align-content: start !important;
    gap: 7px !important;
    width: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 0 28px !important;
    overflow: visible !important;
  }

  body.gig-detail-page #gigGuideNav > .gig-guide-title {
    position: sticky !important;
    top: 0 !important;
    z-index: 4 !important;
  }

  body.gig-detail-page #mobileSectionNavBtn {
    position: fixed !important;
    left: 0 !important;
    top: 50% !important;
    bottom: auto !important;
    z-index: 1850 !important;

    display: inline-flex !important;
    width: 31px !important;
    height: 84px !important;
    align-items: center !important;
    justify-content: center !important;

    margin: 0 !important;
    transform: translateY(-50%) !important;
    writing-mode: vertical-rl !important;
    text-orientation: mixed !important;
  }

  body.gig-detail-page.mobile-sections-open #mobileSectionNavBtn {
    left: min(78vw, 300px) !important;
  }

  body.gig-detail-page #mobileSectionBackdrop {
    position: fixed !important;
    inset: 0 !important;
    z-index: 1800 !important;
  }
}

/* =========================================================
   FINAL SHARED MOBILE SECTION DRAWER
   Gig, Guide, Tool, About, and Browse detail navigation
   ========================================================= */
@media (max-width: 900px) {
  body.gig-detail-page,
  body.guide-detail-page,
  body.tool-detail-page {
    overflow-x: hidden !important;
  }

  body.gig-detail-page .mobile-section-drawer-rail,
  body.guide-detail-page .mobile-section-drawer-rail,
  body.tool-detail-page .mobile-section-drawer-rail,
  body.about-page-body .mobile-section-drawer-rail,
  body.browse-page-body .mobile-section-drawer-rail {
    display: block !important;
    position: fixed !important;
    inset: 0 auto 0 0 !important;
    z-index: 1900 !important;

    width: min(82vw, 320px) !important;
    max-width: min(82vw, 320px) !important;
    height: 100dvh !important;
    max-height: 100dvh !important;

    margin: 0 !important;
    padding:
      max(16px, env(safe-area-inset-top))
      12px
      max(20px, env(safe-area-inset-bottom)) !important;

    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;

    background: #f6fcff !important;
    border: 0 !important;
    border-right: 1px solid rgba(17, 72, 98, 0.18) !important;
    box-shadow: 18px 0 38px rgba(6, 27, 51, 0.22) !important;

    transform: translate3d(-105%, 0, 0) !important;
    transition: transform 220ms ease !important;
  }

  body.mobile-sections-open .mobile-section-drawer-rail {
    transform: translate3d(0, 0, 0) !important;
  }

  body.gig-detail-page .mobile-section-drawer-nav,
  body.guide-detail-page .mobile-section-drawer-nav,
  body.tool-detail-page .mobile-section-drawer-nav,
  body.about-page-body .mobile-section-drawer-nav,
  body.browse-page-body .mobile-section-drawer-nav {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    align-content: start !important;
    gap: 8px !important;

    width: 100% !important;
    max-width: 100% !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding: 0 0 26px !important;

    overflow: visible !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  body.gig-detail-page .mobile-section-drawer-nav > .gig-guide-title,
  body.guide-detail-page .mobile-section-drawer-nav > .gig-guide-title,
  body.tool-detail-page .mobile-section-drawer-nav > .gig-guide-title {
    position: sticky !important;
    top: 0 !important;
    z-index: 3 !important;

    display: block !important;
    width: 100% !important;
    margin: 0 0 4px !important;
    padding: 11px 12px !important;

    border-radius: 13px !important;
    background: #061b33 !important;
    color: #ffffff !important;

    font-size: 0.8rem !important;
    font-weight: 950 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
  }

  body.gig-detail-page .mobile-section-drawer-nav > a,
  body.guide-detail-page .mobile-section-drawer-nav > a,
  body.tool-detail-page .mobile-section-drawer-nav > a {
    display: grid !important;
    grid-template-columns: 28px minmax(0, 1fr) !important;
    gap: 9px !important;
    align-items: center !important;

    width: 100% !important;
    max-width: 100% !important;
    min-height: 45px !important;
    height: auto !important;

    margin: 0 !important;
    padding: 9px 11px !important;

    border: 1px solid #c8dce5 !important;
    border-radius: 13px !important;
    background: #ffffff !important;
    color: #17364d !important;

    font-size: 0.82rem !important;
    font-weight: 850 !important;
    line-height: 1.22 !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    box-shadow: 0 4px 11px rgba(8, 42, 68, 0.07) !important;
  }

  body.gig-detail-page .mobile-section-drawer-nav > a > span,
  body.guide-detail-page .mobile-section-drawer-nav > a > span,
  body.tool-detail-page .mobile-section-drawer-nav > a > span {
    display: grid !important;
    width: 24px !important;
    height: 24px !important;
    place-items: center !important;
    margin: 0 !important;
    border-radius: 50% !important;
    background: #1688a3 !important;
    color: #ffffff !important;
    font-size: 0.72rem !important;
    font-weight: 950 !important;
  }

  body.gig-detail-page .mobile-section-drawer-nav > a.active,
  body.guide-detail-page .mobile-section-drawer-nav > a.active,
  body.tool-detail-page .mobile-section-drawer-nav > a.active {
    border-color: #75bec8 !important;
    background: #dff5f4 !important;
    color: #075e73 !important;
  }

  #mobileSectionNavBtn.mobile-section-tab {
    position: fixed !important;
    left: 0 !important;
    top: 50% !important;
    right: auto !important;
    bottom: auto !important;
    z-index: 1850 !important;

    display: inline-flex !important;
    width: 31px !important;
    height: 88px !important;
    align-items: center !important;
    justify-content: center !important;

    margin: 0 !important;
    padding: 0 !important;

    transform: translateY(-50%) !important;
    border: 0 !important;
    border-radius: 0 13px 13px 0 !important;
    background: rgba(6, 27, 51, 0.93) !important;
    color: #ffffff !important;
    box-shadow: 5px 7px 18px rgba(6, 27, 51, 0.22) !important;

    writing-mode: vertical-rl !important;
    text-orientation: mixed !important;
    font-size: 0.66rem !important;
    font-weight: 950 !important;
    letter-spacing: 0.03em !important;
    cursor: pointer !important;

    transition:
      left 220ms ease,
      opacity 180ms ease !important;
  }

  body.mobile-sections-open #mobileSectionNavBtn.mobile-section-tab {
    left: min(82vw, 320px) !important;
  }

  #mobileSectionBackdrop.mobile-section-backdrop {
    position: fixed !important;
    inset: 0 !important;
    z-index: 1800 !important;

    display: block !important;
    width: 100vw !important;
    height: 100dvh !important;
    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
    border-radius: 0 !important;
    background: rgba(6, 27, 51, 0.38) !important;

    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition:
      opacity 180ms ease,
      visibility 180ms ease !important;
  }

  body.mobile-sections-open #mobileSectionBackdrop.mobile-section-backdrop {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }
}

@media (min-width: 901px) {
  #mobileSectionNavBtn,
  #mobileSectionBackdrop {
    display: none !important;
  }
}

/* =========================================================
   FINAL MOBILE ADVANCED SEARCH — GIGS, GUIDES, AND TOOLS
   ========================================================= */
.browse-mobile-advanced-check {
  display: none;
}

@media (max-width: 900px) {
  body.search-gigs-page .browse-advanced-toggle,
  body.search-guides-page .browse-advanced-toggle,
  body.search-tools-page .browse-advanced-toggle {
    display: none !important;
  }

  body.search-gigs-page .browse-mobile-advanced-check,
  body.search-guides-page .browse-mobile-advanced-check,
  body.search-tools-page .browse-mobile-advanced-check {
    display: flex !important;
    width: 100% !important;
    min-height: 48px !important;
    align-items: center !important;
    gap: 11px !important;
    margin: 0 !important;
    padding: 11px 14px !important;
    border: 1px solid rgba(20, 76, 108, 0.18) !important;
    border-radius: 14px !important;
    background: #ffffff !important;
    color: #17364d !important;
    box-shadow: 0 6px 16px rgba(8, 42, 68, 0.07) !important;
    font-size: 0.94rem !important;
    font-weight: 900 !important;
    line-height: 1.2 !important;
    cursor: pointer !important;
  }

  .browse-mobile-advanced-check input {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
  }

  .browse-mobile-check-box {
    position: relative !important;
    display: inline-grid !important;
    flex: 0 0 24px !important;
    width: 24px !important;
    height: 24px !important;
    place-items: center !important;
    border: 2px solid #6f91a3 !important;
    border-radius: 7px !important;
    background: #f7fcfd !important;
  }

  .browse-mobile-advanced-check input:checked + .browse-mobile-check-box {
    border-color: #078f85 !important;
    background: #078f85 !important;
  }

  .browse-mobile-advanced-check input:checked + .browse-mobile-check-box::after {
    content: "✓" !important;
    color: #ffffff !important;
    font-size: 16px !important;
    font-weight: 950 !important;
    line-height: 1 !important;
  }

  body.search-gigs-page .browse-advanced-panel[hidden],
  body.search-guides-page .browse-advanced-panel[hidden],
  body.search-tools-page .browse-advanced-panel[hidden] {
    display: none !important;
  }

  body.search-gigs-page .browse-advanced-panel:not([hidden]),
  body.search-guides-page .browse-advanced-panel:not([hidden]),
  body.search-tools-page .browse-advanced-panel:not([hidden]) {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    margin: 10px 0 0 !important;
    padding: 12px !important;
    border: 1px solid rgba(20, 76, 108, 0.14) !important;
    border-radius: 18px !important;
    background: #ffffff !important;
    box-shadow: 0 8px 22px rgba(8, 42, 68, 0.07) !important;
  }

  body.search-gigs-page .browse-advanced-panel select:disabled,
  body.search-guides-page .browse-advanced-panel select:disabled,
  body.search-tools-page .browse-advanced-panel select:disabled {
    opacity: 0.55 !important;
    pointer-events: none !important;
  }
}