/* MOSTO — sitewide pill buttons and badges.
   Outlined pill in the button's color, solid round cap at the end carrying the
   four-wave mark. Loaded after each page's own styles so it wins. */
:root{--pill-ink:#0F0F0F}

html body .btn[class],
html body .btn-outline[class],
html body .craft-btn[class],
html body .nav-cta[class],
html body .bh-btn[class],
html body .np-btn[class],
html body .cart-checkout-btn[class],
html body .event-link[class],
html body .event-badge[class],
html body .btn-expression[class],
html body .ct-row-btn[class],
html body #popup-join-btn,
html body .pdp-add[class],
html body .badge[class]{
  --pill-c:var(--mosto-coral,#E8845A);
  --ph:52px;--pcap:44px;--pw:28px;--pwh:16px;--ppl:26px;--pgap:16px;--pfs:12px;
  position:relative!important;display:inline-flex!important;align-items:center!important;justify-content:flex-start!important;
  box-sizing:border-box;height:var(--ph)!important;min-height:0!important;max-height:none;
  padding:0 0 0 var(--ppl)!important;margin-left:auto;margin-right:auto;
  font-family:var(--font-display,'Sora',Arial,sans-serif)!important;font-size:var(--pfs)!important;font-weight:700!important;letter-spacing:.16em!important;text-transform:uppercase!important;line-height:1!important;white-space:nowrap;
  color:var(--pill-c)!important;background:transparent!important;
  border:1.5px solid var(--pill-c)!important;border-radius:100px!important;
  clip-path:none!important;box-shadow:none!important;overflow:visible!important;text-decoration:none!important;
  min-width:auto!important;max-width:100%;flex-shrink:0;
  transition:background .25s ease,transform .25s ease!important}
html body .btn[class]::after,
html body .btn-outline[class]::after,
html body .craft-btn[class]::after,
html body .nav-cta[class]::after,
html body .bh-btn[class]::after,
html body .np-btn[class]::after,
html body .cart-checkout-btn[class]::after,
html body .event-link[class]::after,
html body .event-badge[class]::after,
html body .btn-expression[class]::after,
html body .ct-row-btn[class]::after,
html body #popup-join-btn::after,
html body .pdp-add[class]::after,
html body .badge[class]::after{
  content:''!important;position:static!important;inset:auto!important;flex:none!important;
  width:var(--pcap)!important;height:var(--pcap)!important;margin:0 2px 0 var(--pgap)!important;
  border-radius:50%!important;background:var(--pill-c)!important;opacity:1!important;transform:none!important;animation:none!important;clip-path:none!important;transition:none!important}
html body .btn[class]::before,
html body .btn-outline[class]::before,
html body .craft-btn[class]::before,
html body .nav-cta[class]::before,
html body .bh-btn[class]::before,
html body .np-btn[class]::before,
html body .cart-checkout-btn[class]::before,
html body .event-link[class]::before,
html body .event-badge[class]::before,
html body .btn-expression[class]::before,
html body .ct-row-btn[class]::before,
html body #popup-join-btn::before,
html body .pdp-add[class]::before,
html body .badge[class]::before{
  content:''!important;position:absolute!important;inset:auto!important;left:auto!important;
  right:calc(2px + (var(--pcap) - var(--pw)) / 2)!important;top:50%!important;
  width:var(--pw)!important;height:var(--pwh)!important;transform:translateY(-50%)!important;
  background:var(--pill-ink)!important;z-index:1!important;opacity:1!important;animation:none!important;clip-path:none!important;border-radius:0!important;filter:none!important;
  -webkit-mask:url(/mosto-waves.png) center/contain no-repeat!important;mask:url(/mosto-waves.png) center/contain no-repeat!important}

/* hover: light tint of the pill color */
html body .btn[class]:hover,html body .btn-outline[class]:hover,html body .craft-btn[class]:hover,html body .nav-cta[class]:hover,
html body .bh-btn[class]:hover,html body .np-btn[class]:hover,html body .cart-checkout-btn[class]:hover,html body .event-link[class]:hover{
  background:color-mix(in srgb,var(--pill-c) 14%,transparent)!important;transform:translateY(-1px)!important}

/* colors */
html body .btn-ghost[class],html body .btn-outline[class],html body .btn-past[class],
html body .btn-secondary[class]{--pill-c:rgba(242,236,218,.6)}
html body .btn-expression[class]{--pill-c:var(--accent,var(--mosto-coral))}
html body .event-link[class]{--pill-c:rgba(242,236,218,.6)}
html body .badge[class]{--pill-c:rgba(242,236,218,.55)}
html body .badge-accent[class]{--pill-c:var(--label,var(--mosto-coral))}
html body .event-badge[class]{--pill-c:var(--mosto-coral)}
html body .event-badge.past-badge[class]{--pill-c:rgba(242,236,218,.4)}
html body .btn-primary[class],html body .craft-btn[class],html body .np-btn[class],html body .cart-checkout-btn[class]{--pill-c:var(--mosto-coral)}

/* sizes */
html body .nav-cta[class],html body .bh-btn[class],html body .badge[class]{--ph:38px;--pcap:32px;--pw:21px;--pwh:12px;--ppl:18px;--pgap:12px;--pfs:10px;letter-spacing:.14em!important}
html body .event-link[class]{--ph:34px;--pcap:28px;--pw:18px;--pwh:10px;--ppl:16px;--pgap:10px;--pfs:9px}
html body .event-badge[class]{--ph:26px;--pcap:21px;--pw:14px;--pwh:8px;--ppl:12px;--pgap:8px;--pfs:9px;letter-spacing:.12em!important}
html body .mobile-sticky-cta .btn[class]{--ph:44px;--pcap:36px;--pw:24px;--pwh:14px;--ppl:20px;--pgap:12px;--pfs:11px}
html body .btn[class] svg,html body .btn-outline[class] svg{width:14px;height:14px;margin-left:8px}

/* full-width buttons keep their width, text stays left of the cap */
html body .ct-row-btn[class],html body .cart-checkout-btn[class],html body .btn-expression[class],html body #popup-join-btn{width:100%!important;justify-content:space-between!important;white-space:normal!important;text-align:left}
html body .ct-row-btn[class]{--pill-c:rgba(242,236,218,.6);gap:12px}
html body .ct-row-btn[class] svg{flex:none}
html body .btn-expression[class]{--pill-c:var(--mosto-coral);--pfs:11px;letter-spacing:.12em!important}
html body .card-blanco .btn-expression[class]{--pill-c:var(--mosto-teal)}
html body .card-salvaje .btn-expression[class]{--pill-c:#9A5F86}
/* Salvaje is plum wherever it has its own button */
html body .portrait--salvaje .btn[class],html body .pdp-hero[style*="mosto-plum"] .btn-primary[class],html body .pdp-section[style*="mosto-plum"] .btn-primary[class]{--pill-c:#9A5F86}
html body #popup-join-btn{--pill-c:var(--mosto-coral);cursor:pointer}
html body .pdp-add[class]{--pill-c:var(--mosto-coral);cursor:pointer;flex:1;width:auto!important;justify-content:space-between!important}
html body .pdp-hero[style*="mosto-plum"] .pdp-add[class]{--pill-c:#9A5F86}
html body .pdp-hero[style*="--accent:var(--mosto-teal)"] .pdp-add[class]{--pill-c:var(--mosto-teal)}
html body .portrait--blanco .btn[class]{--pill-c:var(--mosto-teal)}
html body .pdp-add[class]:hover{background:color-mix(in srgb,var(--pill-c) 14%,transparent)!important;color:var(--pill-c)!important}
html body .btn-expression[class]:hover,html body #popup-join-btn:hover,html body .ct-row-btn[class]:hover{background:color-mix(in srgb,var(--pill-c) 14%,transparent)!important;color:var(--pill-c)!important}

/* rows of buttons wrap instead of squashing; on phones each takes the full row */
@media(max-width:768px){
  html body .hero-ctas .btn[class]{flex:1 1 100%!important;width:100%!important;justify-content:space-between!important}
}

/* events list: labels can wrap; the Details/Tickets pill gets room */
html body .event-badge[class]{white-space:normal!important;height:auto!important;min-height:var(--ph)!important;padding-top:2px!important;padding-bottom:2px!important;line-height:1.25!important;max-width:100%}
html body .event-card{grid-template-columns:minmax(100px,max-content) 1fr auto}
@media(max-width:768px){
  html body .event-card{grid-template-columns:70px 1fr auto}
  html body .event-card .event-action{grid-column:1/-1!important;flex-direction:row!important;justify-content:flex-start!important;align-items:center!important;align-self:auto!important;gap:12px!important}
  html body .event-card .event-action .event-link[class]{display:inline-flex!important}
}

/* cream pages: waves in cream on the green cap */
html body.cream-page{--pill-ink:#F2ECDA}
@media(max-width:768px){
  html body .btn[class],html body .btn-outline[class],html body .craft-btn[class]{--ph:48px;--pcap:40px;--pw:26px;--pwh:15px;--ppl:22px;--pgap:14px;--pfs:11px}
}
@media(prefers-reduced-motion:reduce){html body .btn[class]:hover{transform:none!important}}