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;
}
/* Match the search icon to the grey controls on the white field 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:transparent!important;
  color:#5f6368!important;
  -webkit-text-fill-color:#5f6368!important;
}
html body .mc-nav .mc-sb .mc-sb-ai button{
  background:transparent!important;
  color:#5f6368!important;
  -webkit-text-fill-color:#5f6368!important;
}
html body .mc-nav .mc-sb .mc-sb-ai button:hover{
  color:#202124!important;
  -webkit-text-fill-color:#202124!important;
  background:rgba(32,33,36,.08)!important;
}
/* Search field stays white in both themes (header, hero and sticky). */
html body .mc-nav .mc-sb,html[data-theme=light] body .mc-nav .mc-sb,html body .mc-sb-hero,
html[data-theme=dark] body .mc-nav .mc-sb,html[data-theme=dark] body .mc-sb,html[data-theme=dark] body .mc-sb-hero,
html[data-theme=dark] body .mc-hero-search,html[data-theme=dark] body .mc-nav-search{
  background:#fff!important;background-color:#fff!important;border:var(--mc-search-border, 1px) solid #111827!important;box-shadow:none!important;color:#222!important;
}
html[data-theme=dark] body .mc-sb input,html[data-theme=dark] body .mc-sb input[type=search],
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,
html[data-theme=dark] body .mc-hero-search input,html[data-theme=dark] body .mc-nav-search input{
  background:#fff!important;background-color:#fff!important;color:#111!important;-webkit-text-fill-color:#111!important;caret-color:#111!important;border-color:transparent!important;
}
html[data-theme=dark] body .mc-sb input::placeholder,html[data-theme=dark] body .mc-sb-hero input::placeholder,
html[data-theme=dark] body .mc-nav .mc-sb input:not(.mc-ph-on)::placeholder{
  color:#6b7280!important;-webkit-text-fill-color:#6b7280!important;opacity:1!important;
}
html[data-theme=dark] body .mc-sb .mc-ph,html[data-theme=dark] body .mc-sb .mc-ph b,
html[data-theme=dark] body .mc-sb-hero .mc-ph,html[data-theme=dark] body .mc-sb-hero .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;
}
html[data-theme=dark] body .mc-sb .mc-sb-ai button,html[data-theme=dark] body .mc-sb-hero .mc-sb-ai button,
html[data-theme=dark] body .mc-nav .mc-sb .mc-sb-ai button,
html[data-theme=dark] body .mc-nav .mc-sb .mc-sb-ai button.mc-sb-x,
html[data-theme=dark] body .mc-nav .mc-sb .mc-sb-ai button.mc-sb-mic,
html[data-theme=dark] body .mc-nav .mc-sb .mc-sb-ai button.mc-sb-cam{
  background:transparent!important;color:#5f6368!important;-webkit-text-fill-color:#5f6368!important;
}
html[data-theme=dark] body .mc-sb .mc-sb-ai button:hover,html[data-theme=dark] body .mc-sb-hero .mc-sb-ai button:hover,
html[data-theme=dark] body .mc-nav .mc-sb .mc-sb-ai button:hover{
  color:#202124!important;-webkit-text-fill-color:#202124!important;background:rgba(32,33,36,.08)!important;
}
html[data-theme=dark] body .mc-sb .mc-sb-ai button svg,html[data-theme=dark] body .mc-sb-hero .mc-sb-ai button svg{
  fill:currentColor!important;color:inherit!important;
}
html body .mc-sb .mc-sb-ai button.on,html[data-theme=dark] body .mc-sb .mc-sb-ai button.on{
  background:#5f6368!important;color:#fff!important;-webkit-text-fill-color:#fff!important;
}
html[data-theme=dark] body .mc-sb button[type=submit],html[data-theme=dark] body .mc-sb-hero button[type=submit]{
  background:#1DBF73!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:var(--mc-concierge-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;
  }
}
@media(min-width:1100px) and (max-width:1279px){
  /* Below 1280 the 46.6vw line would cover the hero title. The 60px desktop inset scales with the viewport. */
  html body main .h2-hy .h2-cc{
    --mc-cc-side:calc((100vw - 1100px) * 0.12);
    width:calc(100% - var(--mc-hero-trail, 0px) - 48px - (var(--mc-cc-side) * 2))!important;
    max-width:calc(100% - var(--mc-hero-trail, 0px) - 48px - (var(--mc-cc-side) * 2))!important;
    margin-inline-start:calc(48px + var(--mc-cc-side))!important;
  }
}
@media(min-width:1280px) and (max-width:1439px){
  /* Left edge at 46.6vw, then 60px in from each side of that span. */
  html body main .h2-hy .h2-cc{
    --mc-cc-lead:calc(46.6vw - 32px - 640px - 32px);
    margin-inline-start:calc(var(--mc-cc-lead) + 60px)!important;
    width:calc(100% - var(--mc-hero-trail, 0px) - var(--mc-cc-lead) - 120px)!important;
    max-width:none!important;
  }
}
@media(min-width:1440px){
  /* Same 46.6vw edge, text column capped at 760px, then 60px in from each side. */
  html body main .h2-hy .h2-cc{
    --mc-cc-lead:calc(46.6vw - 32px - 760px - 32px);
    margin-inline-start:calc(var(--mc-cc-lead) + 60px)!important;
    width:calc(100% - var(--mc-hero-trail, 0px) - var(--mc-cc-lead) - 120px)!important;
    max-width:none!important;
  }
}

/* Keep every concierge control inside the narrower desktop card. */
@media(min-width:1100px){
  @container (max-width:480px){
    html body main .h2-hy .h2-cc-box .h2-cc-bar{flex-wrap:wrap!important}
  }
}

/* Header search icons share 44px hit areas and equal centre spacing. */
html body .mc-nav .mc-sb-nav > .mc-sb-ai{
  gap:0!important;
  padding:0!important;
}
html body .mc-nav .mc-sb-nav > .mc-sb-ai > button,
html body .mc-nav .mc-sb-nav > button[type=submit]{
  width:44px!important;
  height:44px!important;
  min-width:44px!important;
  flex:0 0 44px!important;
  align-self:center;
  margin:0!important;
  padding:0!important;
  border-radius:50%;
  box-sizing:border-box;
}