.rxmpi-studio-buttons{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px;position:relative;z-index:1;max-width:100%}
/* flex-basis 260px (was 160px): the real bug behind the Axel Abysse overlap/mid-word-break
   screenshots wasn't the text sizing at all - it was that 160px let flexbox squeeze two buttons
   down to ~180-260px side by side on any page roughly 430-590px wide, a width with plenty of
   room for ONE button per row but not enough for two comfortably. 260px means flex-wrap now
   stacks them (each filling the full row, like on phone) instead of squeezing - measured live on
   redixxmen.com/performer/axel-abysse/: at 430px wide this used to squeeze both buttons to 182px
   (the SALE-badged "AxelAbysse.Com" broke mid-word even after shrinking); with this basis they
   now stack at ~370px each, comfortably full-size, no shrink needed. Two-per-row only resumes
   once the row is wide enough for both at 260px+ (measured: 267px+ each from ~600px wide on),
   which was already confirmed comfortable. */
.rxmpi-studio-buttons .rxmpi-studio-button{container-type:inline-size;container-name:rxmpi-button;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:40px;padding:8px 14px;border:1px solid rgba(255,255,255,.25);border-radius:8px;background:#3a2d55;color:#fff!important;font-family:inherit;font-size:14px;font-weight:600;line-height:1.3;text-decoration:none!important;box-sizing:border-box;flex:1 1 260px;min-width:0;max-width:100%;overflow-wrap:anywhere;text-align:center}
.rxmpi-studio-label{min-width:0;overflow-wrap:anywhere}
.rxmpi-studio-name{overflow-wrap:anywhere;font-weight:inherit}
.rxmpi-studio-buttons .rxmpi-studio-button.has-sale{border-color:#ffb020}
.rxmpi-studio-badge,.rxmpi-studio-arrow{flex-shrink:0}
.rxmpi-studio-badge{display:inline-flex;align-items:center;background:#ff3b30;color:#fff!important;font-size:10px;font-weight:800;letter-spacing:.04em;line-height:1.4;padding:2px 6px;border-radius:4px;text-transform:uppercase}
.rxmpi-studio-buttons .rxmpi-studio-button:hover{filter:brightness(1.2)}
.rxmpi-studio-buttons .rxmpi-studio-button:focus-visible{outline:3px solid #7bbfff;outline-offset:3px}
@media(max-width:420px){
  .rxmpi-studio-buttons{gap:6px}
  .rxmpi-studio-buttons .rxmpi-studio-button{flex:1 1 100%;font-size:13px;padding:7px 12px;gap:8px}
}
/* --rxmpi-name-size (set inline, per studio, only for a long unbreakable name): a second,
   independent safety net on top of the flex-basis fix above. That fix removes the one squeeze
   zone found live, but it's still a fixed number - a longer performer name or studio domain than
   anything tested could squeeze a button below a comfortable width somewhere else. A container
   query (not a viewport media query - the button can be narrow on a wide page, which is exactly
   what happened here) catches that generically: it only shrinks the name once the BUTTON ITSELF
   drops below this width, wherever that happens to occur. The 250px cutoff is the container's
   *content-box* width (padding/border excluded), comfortably below every button width confirmed
   live post-fix (stacked: ~370-520px; two-per-row: 267px+) so it stays inactive in normal use and
   only engages if some future name is long enough to need it. */
@container rxmpi-button (max-width:250px){
  .rxmpi-studio-name{font-size:var(--rxmpi-name-size, inherit)}
}
/* Progressive enhancement: browsers without :has() just keep the sizing above and wrap onto
   more rows instead - never broken, just not shrunk. Kicks in for a 3rd button (any future
   placement) or once two buttons' labels are long enough to need a third line to wrap into. */
.rxmpi-studio-buttons:has(> :nth-child(3)){gap:6px}
.rxmpi-studio-buttons:has(> :nth-child(3)) .rxmpi-studio-button{flex-basis:120px;font-size:12px;padding:6px 10px;gap:6px;min-height:36px}

/* Single "Visit {Studio}" button in a connection page hero: natural width, not stretched across the whole hero. */
.rxmpi-studio-buttons--single{margin-top:18px;justify-content:center}
.rxmpi-studio-buttons--single .rxmpi-studio-button{flex:0 1 auto;min-width:220px}
@media(max-width:420px){.rxmpi-studio-buttons--single .rxmpi-studio-button{flex:1 1 100%;min-width:0}}