html{--mc-hb-h:68px}
@media(max-width:1023px){html{--mc-hb-h:112px}}

/* Inner pages (and a fallback before the homepage pull-up runs): solid hero-top colour. */
html body .mc-nav,
html[data-theme=light] body .mc-nav,
html[data-theme=dark] body .mc-nav,
html[data-theme=dark] :is(.mc-nav){
  background-color:#03100a!important;
  background-image:none!important;
  border-bottom:0!important;
  box-shadow:none!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
}

/* Homepage, not scrolled: no header fill, border or shadow — the hero shows through.
   Only when a hero is actually on the page. html.mc-hb alone must not clear inner-page headers. */
html body:has(.h2-hero) .mc-nav:not(.is-scrolled),
html.mc-hb body:has(.h2-hero) .mc-nav:not(.is-scrolled),
html[data-theme=light] body:has(.h2-hero) .mc-nav:not(.is-scrolled),
html[data-theme=dark] body:has(.h2-hero) .mc-nav:not(.is-scrolled),
html[data-theme=dark] body:has(.mc-hero) .mc-nav:not(.is-scrolled){
  background:transparent!important;
  background-color:transparent!important;
  background-image:none!important;
  border:0!important;
  border-bottom:0!important;
  box-shadow:none!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
}

/* Sticky / scrolled: solid hero-top colour so content stays readable. */
html body .mc-nav.is-scrolled,
html.mc-hb body:has(.h2-hero) .mc-nav.is-scrolled,
html body:has(.h2-hero) .mc-nav.is-scrolled,
html[data-theme=dark] body .mc-nav.is-scrolled,
html[data-theme=dark].mc-hb body .mc-nav.is-scrolled{
  background-color:#03100a!important;
  background-image:none!important;
  -webkit-backdrop-filter:saturate(160%) blur(12px)!important;
  backdrop-filter:saturate(160%) blur(12px)!important;
  box-shadow:0 10px 24px -14px rgba(0,0,0,.55)!important;
  border-bottom:0!important;
}

/* Pull the homepage hero up so its box (and gradient) starts at the top of the header.
   Padding keeps the hero copy below the header. The promo strip above the header is untouched. */
html body:has(.h2-hero) main .h2-hy,
html.mc-hb body:has(.h2-hero) main .h2-hy{
  margin-top:calc(-1 * var(--mc-hb-h,68px))!important;
}
html body:has(.h2-hero) main .h2-hy .h2-hero,
html.mc-hb body:has(.h2-hero) main .h2-hy .h2-hero,
html[data-theme=dark] body:has(.h2-hero) main .h2-hy .h2-hero{
  padding-top:var(--mc-hb-h,68px)!important;
  background:#03100a!important;
}
/* Gradient fills the whole pulled-up hero, including the header zone. */
html body main .h2-hy .h2-hero-bg,
html body .h2 .h2-hero-bg,
html[data-theme=dark] .h2 .h2-hero-bg{
  inset:0 -10% 0!important;
  top:0!important;
  background:
    radial-gradient(36% 58% at 75% 46%,rgba(59,227,143,.5),transparent 70%),
    radial-gradient(18% 26% at 95% 12%,rgba(59,227,143,.32),transparent 72%),
    radial-gradient(30% 45% at 8% 4%,rgba(29,191,115,.13),transparent 70%),
    linear-gradient(180deg,#03100a,#04160e 62%,#05130d)!important;
}

/* Logo + nav links stay light on the dark banner.
   Do not colour the .mc-links container (or descendants such as .mc-me span):
   the account menu, categories panel and other popovers live inside it and
   would inherit color:#fff / -webkit-text-fill-color:#fff on a white sheet. */
html body .mc-nav .mc-logo,
html body .mc-nav .mc-links>a,
html body .mc-nav .mc-links>details>summary,
html body .mc-nav .mc-me,
html body .mc-nav .mc-me>span,
html body .mc-nav .mc-intl-btn,
html[data-theme=dark] body .mc-nav .mc-links>a,
html[data-theme=dark] body .mc-nav .mc-links>details>summary,
html[data-theme=dark] body .mc-nav .mc-me,
html[data-theme=dark] body .mc-nav .mc-me>span{
  color:#fff!important;
  -webkit-text-fill-color:#fff;
}
html body .mc-nav .mc-links>a:hover,
html[data-theme=dark] body .mc-nav .mc-links>a:hover{color:#3be38f!important;-webkit-text-fill-color:#3be38f}
html body .mc-nav .mc-burger span,
html[data-theme=dark] body .mc-nav .mc-burger span{background:#fff!important}

/* Desktop: no separate dark plate behind the nav links. */
html body .mc-nav .mc-links,
html[data-theme=light] body .mc-nav .mc-links,
html[data-theme=dark] body .mc-nav .mc-links,
html[data-theme=dark] :is(.mc-nav .mc-links){
  background:transparent!important;
  background-color:transparent!important;
  background-image:none!important;
  box-shadow:none!important;
}

/* Mobile drawer. The desktop rule above makes .mc-links transparent in light mode,
   and that rule is more specific than a plain mobile fill, so light mode needs
   its own opaque sheet. Dark mode keeps the solid dark panel. */
@media(max-width:1023px){
  html body .mc-nav .mc-links,
  html[data-theme=light] body .mc-nav .mc-links{
    background:#fff!important;
    background-color:#fff!important;
    background-image:none!important;
    color:#111827!important;
    border-bottom:1px solid #e2e8f0!important;
    box-shadow:0 16px 32px rgba(17,24,39,.12)!important;
  }
  html body .mc-nav .mc-links>a:not(.mc-btn),
  html body .mc-nav .mc-links>details>summary,
  html[data-theme=light] body .mc-nav .mc-links>a:not(.mc-btn),
  html[data-theme=light] body .mc-nav .mc-links>details>summary{
    color:#111827!important;
    -webkit-text-fill-color:#111827!important;
  }
  html[data-theme=dark] body .mc-nav .mc-links,
  html[data-theme=dark] .mc-nav .mc-links{
    background:#03100a!important;
    background-color:#03100a!important;
    color:#fff!important;
    border-bottom-color:rgba(255,255,255,.08)!important;
    box-shadow:none!important;
  }
  html[data-theme=dark] body .mc-nav .mc-links>a:not(.mc-btn),
  html[data-theme=dark] body .mc-nav .mc-links>details>summary{
    color:#fff!important;
    -webkit-text-fill-color:#fff!important;
  }
  html body .mc-nav .mc-links>a.mc-btn{
    background:#1DBF73!important;
    color:#fff!important;
    -webkit-text-fill-color:#fff!important;
    align-self:flex-start;
    margin-top:8px;
  }
}

/* Search field (and mic/cam strip) stay white with dark text. All Categories is Amazon grey. */
html body .mc-nav .mc-sb,
html body .mc-nav .mc-sb input,
html body .mc-nav .mc-sb .mc-sb-ai,
html[data-theme=light] body .mc-nav .mc-sb,
html[data-theme=light] body .mc-nav .mc-sb input,
html[data-theme=light] body .mc-nav .mc-sb .mc-sb-ai,
html[data-theme=dark] body .mc-nav .mc-sb,
html[data-theme=dark] body .mc-nav .mc-sb input,
html[data-theme=dark] body .mc-nav .mc-sb .mc-sb-ai{
  background:#fff!important;
  background-color:#fff!important;
  color:#222325!important;
  -webkit-text-fill-color:#222325!important;
  border-color:transparent!important;
}
html body .mc-nav .mc-sb,
html[data-theme=dark] body .mc-nav .mc-sb{
  border:0!important;
  box-shadow:none!important;
  overflow:hidden;
}
html body .mc-sb .mc-sb-cat,
html body .mc-nav .mc-sb .mc-sb-cat,
html body .mc-sb-hero .mc-sb-cat,
html[data-theme=light] body .mc-sb .mc-sb-cat,
html[data-theme=light] body .mc-nav .mc-sb .mc-sb-cat,
html[data-theme=light] body .mc-sb-hero .mc-sb-cat,
html[data-theme=dark] body .mc-sb .mc-sb-cat,
html[data-theme=dark] body .mc-nav .mc-sb .mc-sb-cat,
html[data-theme=dark] body .mc-sb-hero .mc-sb-cat{
  background:#E6E6E6!important;
  background-color:#E6E6E6!important;
  color:#0F1111!important;
  -webkit-text-fill-color:#0F1111!important;
  border-right:1px solid #CDCDCD!important;
  border-color:#CDCDCD!important;
}
html body .mc-sb .mc-sb-cat:hover,
html body .mc-sb .mc-sb-cat[aria-expanded=true],
html body .mc-nav .mc-sb .mc-sb-cat:hover,
html body .mc-nav .mc-sb .mc-sb-cat[aria-expanded=true],
html body .mc-sb-hero .mc-sb-cat:hover,
html body .mc-sb-hero .mc-sb-cat[aria-expanded=true],
html[data-theme=dark] body .mc-sb .mc-sb-cat:hover,
html[data-theme=dark] body .mc-sb .mc-sb-cat[aria-expanded=true],
html[data-theme=dark] body .mc-nav .mc-sb .mc-sb-cat:hover,
html[data-theme=dark] body .mc-nav .mc-sb .mc-sb-cat[aria-expanded=true],
html[data-theme=dark] body .mc-sb-hero .mc-sb-cat:hover,
html[data-theme=dark] body .mc-sb-hero .mc-sb-cat[aria-expanded=true]{
  background:#D4D4D4!important;
  background-color:#D4D4D4!important;
  color:#0F1111!important;
  -webkit-text-fill-color:#0F1111!important;
}
/* Animated .mc-ph is the only hint (same as live). Hide the native placeholder
   whenever .mc-ph is in the bar, including dark mode which otherwise forces it visible. */
html body .mc-nav .mc-sb:has(.mc-ph) input::placeholder,
html body .mc-nav .mc-sb input.mc-ph-on::placeholder,
html[data-theme=dark] body .mc-nav .mc-sb:has(.mc-ph) input::placeholder,
html[data-theme=dark] body .mc-nav .mc-sb input.mc-ph-on::placeholder{
  color:transparent!important;
  -webkit-text-fill-color:transparent!important;
  opacity:0!important;
}
html body .mc-nav .mc-sb .mc-ph,
html body .mc-nav .mc-sb .mc-ph b,
html[data-theme=dark] body .mc-nav .mc-sb .mc-ph,
html[data-theme=dark] body .mc-nav .mc-sb .mc-ph b{
  color:#6b7280!important;
  -webkit-text-fill-color:#6b7280!important;
  opacity:1!important;
}
/* Green search button stays green in both themes. */
html body .mc-nav .mc-sb button[type=submit],
html[data-theme=dark] body .mc-nav .mc-sb button[type=submit]{
  background:#1DBF73!important;
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
}
html body .mc-nav .mc-sb .mc-sb-ai button,
html[data-theme=dark] body .mc-nav .mc-sb .mc-sb-ai button{
  background:transparent!important;
  color:#1DBF73!important;
  -webkit-text-fill-color:#1DBF73!important;
}
/* Fiverr search outline: white field and a black border in light, empty field and a white border in dark. */
html body .mc-nav .mc-sb,html[data-theme=light] body .mc-nav .mc-sb,html body .mc-sb-hero{
  background:#fff!important;background-color:#fff!important;border:var(--mc-search-border, 1px) solid #111827!important;box-shadow:none!important;
}
html[data-theme=dark] body .mc-nav .mc-sb,html[data-theme=dark] body .mc-sb-hero{
  background:transparent!important;background-color:transparent!important;border:var(--mc-search-border, 1px) solid #fff!important;box-shadow:none!important;
}
html[data-theme=dark] body .mc-nav .mc-sb input,html[data-theme=dark] body .mc-nav .mc-sb .mc-sb-ai,html[data-theme=dark] body .mc-sb-hero input,html[data-theme=dark] body .mc-sb-hero .mc-sb-ai{
  background:transparent!important;background-color:transparent!important;color:#fff!important;-webkit-text-fill-color:#fff!important;
}

/* Dark mode hero type must stay light, like light mode / live. body.h2 sets --ink to a
   dark colour which otherwise wins on h1, b and small. */
html[data-theme=dark] body .h2-hero h1,
html[data-theme=dark] body main .h2-hy .h2-hero h1,
html[data-theme=dark] body.h2 main .h2-hero h1,
html[data-theme=dark] body .mc-hero h1{
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
}
html[data-theme=dark] body .h2-hero h1 em,
html[data-theme=dark] body main .h2-hy .h2-hero h1 em,
html[data-theme=dark] body .mc-hero h1 em{
  color:#3be38f!important;
  -webkit-text-fill-color:transparent!important;
  background:linear-gradient(90deg,#3be38f,#1dbf73)!important;
  -webkit-background-clip:text!important;
  background-clip:text!important;
}
html[data-theme=dark] body .h2-lead,
html[data-theme=dark] body .h2-hero .h2-lead,
html[data-theme=dark] body .h2-bul li,
html[data-theme=dark] body .h2-bul a,
html[data-theme=dark] body .h2-hero p{
  color:rgba(255,255,255,.82)!important;
  -webkit-text-fill-color:rgba(255,255,255,.82)!important;
}
html[data-theme=dark] body .h2-trust b,
html[data-theme=dark] body .h2-trust b *{
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
}
html[data-theme=dark] body .h2-trust small,
html[data-theme=dark] body .h2-trust small *{
  color:rgba(255,255,255,.7)!important;
  -webkit-text-fill-color:rgba(255,255,255,.7)!important;
}
html[data-theme=dark] body .h2-trust .h2i,
html[data-theme=dark] body .h2-trust svg{
  color:#3be38f!important;
  stroke:#3be38f;
}

/* "Refresh" is a real pull-to-refresh control. Keep it, but sit it under the
   header on laptop/desktop so it does not cover "Join free". */
html body main>.mc-ptr,
html[data-theme=dark] body:has(.h2-hero) main>.mc-ptr,
html[data-theme=dark] body .mc-ptr{
  position:absolute!important;
  inset-inline-end:12px;
  top:8px;
  z-index:45;
  background:transparent!important;
  margin:0!important;
  padding:0!important;
  box-shadow:none!important;
}
@media(max-width:1024px){
  html body main>.mc-ptr,
  html[data-theme=light] body main>.mc-ptr,
  html[data-theme=dark] body:has(.h2-hero) main>.mc-ptr,
  html[data-theme=dark] body .mc-ptr{
    top:calc(var(--mc-promo-h, 0px) + var(--mc-hb-h, 112px) + 8px)!important;
    inset-inline-end:16px!important;
    z-index:40!important;
    background:transparent!important;
  }
  html body main>.mc-ptr button,
  html[data-theme=dark] body .mc-ptr button{
    color:#1DBF73!important;
    -webkit-text-fill-color:#1DBF73!important;
    background:transparent!important;
    font-size:13px!important;
    font-weight:700!important;
    min-height:0!important;
    height:auto!important;
    padding:0!important;
  }
}
@media(min-width:1025px){
  html body .mc-nav .mc-logo img{
    width:var(--mc-logo-w, 125px)!important;
    height:30px!important;
    max-height:30px!important;
  }
  /* Left column only. The card shrinks from the right, down to the profile photo. */
  html body main .h2-hy .h2-hero .h2-hero-copy,
  html body .h2-hero>.h2-wrap>.h2-hero-copy{
    padding-inline-start:var(--mc-hero-lead, 136px)!important;
  }
  html body main .h2-hy .h2-cc{
    width:calc(100% - var(--mc-hero-trail, 0px))!important;
    max-width:calc(100% - var(--mc-hero-trail, 0px))!important;
    justify-self:start;
  }
  html body main>.mc-ptr,
  html[data-theme=light] body main>.mc-ptr,
  html[data-theme=dark] body:has(.h2-hero) main>.mc-ptr,
  html[data-theme=dark] body .mc-ptr{
    top:calc(var(--mc-promo-h, 0px) + var(--mc-hb-h, 68px) + 2px)!important;
    inset-inline-end:calc(var(--mc-nav-pad, 32px) + var(--mc-hero-trail, 0px) + var(--mc-cc-pad, 20px))!important;
    z-index:40!important;
    line-height:1!important;
  }
  html body main>.mc-ptr button,
  html[data-theme=dark] body .mc-ptr button{
    min-height:0!important;
    height:auto!important;
    padding:0!important;
    font-size:13px!important;
    line-height:1.1!important;
    color:#1DBF73!important;
    -webkit-text-fill-color:#1DBF73!important;
    background:transparent!important;
  }
}