/* SwapThing Add Listing CTA: infinite glowing border trace for the first/next user step. */
body main.site-main .container.browse-page .browse-title-action-row{
  position:relative!important;
  display:flex!important;
  justify-content:flex-end!important;
  align-items:center!important;
  min-height:3.1rem!important;
  margin:.15rem 0 .85rem!important;
  pointer-events:none!important;
  z-index:3!important;
}

body main.site-main .permanent-listing-page .listing-detail-add-action{
  position:relative!important;
  display:flex!important;
  justify-content:flex-start!important;
  align-items:center!important;
  margin:.25rem 0 .85rem!important;
  z-index:3!important;
}
body main.site-main .permanent-listing-page .listing-detail-add-action .listing-detail-add-listing{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:.3rem!important;
  min-height:2.75rem!important;
  padding:.78rem 1.05rem!important;
  border-radius:999px!important;
  text-decoration:none!important;
  font-weight:900!important;
}

body main.site-main .container.browse-page .browse-hero-add-listing,
body main.site-main .permanent-listing-page .listing-detail-add-action .listing-detail-add-listing{
  --voyage-gold:rgba(224,176,80,.92);
  --voyage-green:rgba(55,209,126,.96);
  --trace-hot:#fff6b8;
  --trace-gold:#f5c95d;
  --trace-green:#37d17e;
  position:relative!important;
  isolation:isolate!important;
  overflow:hidden!important;
  pointer-events:auto!important;
  border:1px solid rgba(224,176,80,.34)!important;
  background:
    linear-gradient(135deg,rgba(72,235,142,.98),rgba(19,104,55,.98)) padding-box,
    linear-gradient(135deg,rgba(245,201,93,.5),rgba(55,209,126,.34)) border-box!important;
  color:#04130b!important;
  text-shadow:0 1px 0 rgba(255,255,255,.22)!important;
  box-shadow:0 10px 22px rgba(0,0,0,.18),0 0 0 1px rgba(255,255,255,.1) inset,0 0 18px rgba(55,209,126,.18)!important;
}
body main.site-main .container.browse-page .browse-hero-add-listing::before,
body main.site-main .permanent-listing-page .listing-detail-add-action .listing-detail-add-listing::before{
  content:"✦";
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:1.25em!important;
  height:1.25em!important;
  margin-right:.42rem!important;
  color:var(--voyage-gold)!important;
  font-size:1.08em!important;
  line-height:1!important;
  text-shadow:0 0 10px rgba(224,176,80,.72),0 1px 2px rgba(0,0,0,.45)!important;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.35));
  transform-origin:50% 52%;
}
body main.site-main .container.browse-page .browse-hero-add-listing::after,
body main.site-main .permanent-listing-page .listing-detail-add-action .listing-detail-add-listing::after{
  content:"";
  position:absolute!important;
  inset:0!important;
  z-index:0!important;
  border-radius:999px!important;
  opacity:1!important;
  padding:2px!important;
  background:
    conic-gradient(from 0deg,
      transparent 0deg 44deg,
      rgba(255,246,184,.18) 52deg,
      var(--trace-hot) 66deg,
      var(--trace-gold) 78deg,
      var(--trace-green) 94deg,
      transparent 122deg 360deg)!important;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0)!important;
  -webkit-mask-composite:xor!important;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0)!important;
  mask-composite:exclude!important;
  filter:drop-shadow(0 0 7px rgba(245,201,93,.75)) drop-shadow(0 0 10px rgba(55,209,126,.5));
  pointer-events:none!important;
}
body main.site-main .container.browse-page .browse-hero-add-listing > *,
body main.site-main .permanent-listing-page .listing-detail-add-action .listing-detail-add-listing > *{position:relative;z-index:1;}
@media (prefers-reduced-motion:no-preference){
  body main.site-main .container.browse-page .browse-hero-add-listing::before,
  body main.site-main .permanent-listing-page .listing-detail-add-action .listing-detail-add-listing::before{animation:swapthing-voyage-compass 5.8s ease-in-out infinite!important;}
  body main.site-main .container.browse-page .browse-hero-add-listing::after,
  body main.site-main .permanent-listing-page .listing-detail-add-action .listing-detail-add-listing::after{animation:swapthing-glowing-border-trace 2.35s linear infinite!important;}
  body main.site-main .container.browse-page .browse-hero-add-listing,
  body main.site-main .permanent-listing-page .listing-detail-add-action .listing-detail-add-listing{animation:swapthing-voyage-breath 4.7s ease-in-out infinite!important;}
  body main.site-main .container.browse-page .browse-hero-add-listing:hover,
  body main.site-main .permanent-listing-page .listing-detail-add-action .listing-detail-add-listing:hover{filter:saturate(1.14) brightness(1.04)!important;}
}
@keyframes swapthing-voyage-compass{
  0%,68%,100%{transform:rotate(0deg) translateY(0) scale(1);}
  75%{transform:rotate(-18deg) translateY(-1px) scale(1.04);}
  82%{transform:rotate(24deg) translateY(-2px) scale(1.09);}
  90%{transform:rotate(-8deg) translateY(0) scale(1.02);}
}
@keyframes swapthing-glowing-border-trace{
  to{transform:rotate(1turn);}
}
@keyframes swapthing-voyage-breath{
  0%,100%{box-shadow:0 10px 22px rgba(0,0,0,.18),0 0 0 1px rgba(255,255,255,.1) inset,0 0 16px rgba(55,209,126,.18);}
  50%{box-shadow:0 12px 24px rgba(0,0,0,.2),0 0 0 1px rgba(255,255,255,.14) inset,0 0 20px rgba(224,176,80,.25),0 0 22px rgba(55,209,126,.2);}
}
@media (max-width:760px){
  body main.site-main .container.browse-page .browse-title-action-row{justify-content:center!important;min-height:2.8rem!important;margin:.35rem 0 .7rem!important;}
  body main.site-main .container.browse-page .browse-hero-add-listing{font-size:.94rem!important;}
}
@media (prefers-reduced-motion:reduce){
  body main.site-main .container.browse-page .browse-hero-add-listing,
  body main.site-main .container.browse-page .browse-hero-add-listing::before,
  body main.site-main .container.browse-page .browse-hero-add-listing::after,
  body main.site-main .permanent-listing-page .listing-detail-add-action .listing-detail-add-listing,
  body main.site-main .permanent-listing-page .listing-detail-add-action .listing-detail-add-listing::before,
  body main.site-main .permanent-listing-page .listing-detail-add-action .listing-detail-add-listing::after{animation:none!important;}
}


/* Mobile Browse CTA orbit repair 2026-07-15: anchor the animated trace to the Add Listing button, not the Browse title row. */
body main.site-main .container.browse-page .browse-title-action-row{
  position:relative!important;
  overflow:visible!important;
  isolation:auto!important;
}
body main.site-main .container.browse-page .browse-hero-add-listing{
  position:relative!important;
  z-index:2!important;
  overflow:hidden!important;
  contain:paint!important;
  transform-origin:center!important;
}
body main.site-main .container.browse-page .browse-hero-add-listing::after{
  transform-origin:center center!important;
  inset:0!important;
  width:auto!important;
  height:auto!important;
  max-width:none!important;
  max-height:none!important;
}
@media (max-width:760px){
  body main.site-main .container.browse-page .browse-title-action-row{
    display:flex!important;
    flex-wrap:wrap!important;
    align-items:flex-start!important;
    gap:.72rem!important;
  }
  body main.site-main .container.browse-page .browse-hero-add-listing{
    flex:0 0 auto!important;
    margin-top:.15rem!important;
  }
}


/* 2026-07-20 mobile Browse controls alignment: Add Listing shares the controls row with the view toggle and stays centered. */
@media (max-width:760px){
  body main.site-main .container.browse-page .browse-title-action-row{
    justify-content:flex-start!important;
    min-height:auto!important;
    margin:0!important;
  }
  body main.site-main .container.browse-page .browse-header-controls{
    width:100%!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)!important;
    align-items:center!important;
    gap:.55rem!important;
    margin:.48rem 0 .74rem!important;
  }
  body main.site-main .container.browse-page .browse-header-controls .browse-hero-add-listing{
    grid-column:2!important;
    justify-self:center!important;
    margin:0!important;
    min-width:0!important;
  }
  body main.site-main .container.browse-page .browse-header-controls .browse-view-toggle{
    grid-column:3!important;
    justify-self:end!important;
  }
  body main.site-main .container.browse-page .browse-header-controls .browse-search-toggle{
    grid-column:1!important;
    justify-self:start!important;
  }
}


/* 2026-07-20 mobile Browse controls final alignment: no CTA icon, row sits just above second gold line. */
@media (max-width:760px){
  body main.site-main .container.browse-page .browse-header-controls{
    margin:-2.55rem 0 1.02rem!important;
    transform:translateY(.16rem)!important;
  }
  body main.site-main .container.browse-page .browse-header-controls .browse-hero-add-listing::before{
    content:none!important;
    display:none!important;
    width:0!important;
    height:0!important;
    margin:0!important;
  }
  body main.site-main .container.browse-page .browse-header-controls .browse-hero-add-listing{
    padding-left:1.18rem!important;
    padding-right:1.18rem!important;
    gap:0!important;
  }
}


/* 2026-07-21 mobile Browse controls lower: Rain wants CTA/toggle almost touching the second gold line. */
@media (max-width:760px){
  body main.site-main .container.browse-page .browse-header-controls{
    margin:-2.05rem 0 .16rem!important;
    transform:translateY(.58rem)!important;
  }
}


/* 2026-07-21 mobile Browse controls final lower nudge: sit almost on the second gold line. */
@media (max-width:760px){
  body main.site-main .container.browse-page .browse-header-controls{
    margin:-2.05rem 0 -.18rem!important;
    transform:translateY(.88rem)!important;
  }
}


/* 2026-07-21 mobile Browse controls align to Start Swapping text bottom. */
@media (max-width:760px){
  body main.site-main .container.browse-page .browse-header-controls{
    margin:-2.55rem 0 .44rem!important;
    transform:translateY(.18rem)!important;
  }
}
