/* Allow real customer names, IDs and amounts to wrap instead of being clipped. */
.customer-ui .my-pass-top{flex-wrap:wrap}
.customer-ui .my-pass-top>strong{min-width:0;max-width:100%}
.customer-ui .my-pass-bottom{flex-wrap:wrap}
.customer-ui .my-pass-bottom>div{min-width:0;max-width:100%;overflow-wrap:anywhere}
.customer-ui .my-pass-bottom>button{margin-left:auto}
.customer-ui .my-pass-name,.customer-ui .my-identity>div,.customer-ui .settings-profile>div{min-width:0;overflow-wrap:anywhere}
.customer-ui .my-next{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 7px}
.customer-ui .my-next strong{margin-left:0;overflow-wrap:anywhere;max-width:100%}
.customer-ui .my-activity li>div{flex:1;overflow-wrap:anywhere}
.customer-ui .passport-activity-status{flex-wrap:wrap;justify-content:flex-end;max-width:86px}
.customer-ui .settings-profile p{overflow-wrap:anywhere}
@media(max-width:700px){
 .customer-ui:has(.my-layout) main{width:100%;max-width:520px;box-sizing:border-box;padding-left:20px;padding-right:20px}
 .customer-ui .my-layout{width:100%;min-width:0;grid-template-columns:minmax(0,1fr)}
 .customer-ui :is(.my-primary,.my-secondary,.my-panel,.my-pass,.my-counts){min-width:0;max-width:100%;box-sizing:border-box}
 .customer-ui .my-counts{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
 .customer-ui .my-counts>button{min-width:0;padding:14px 10px}
 .customer-ui .my-counts>button strong{overflow-wrap:anywhere}
 .customer-ui .my-pass-top{gap:10px}
 .customer-ui .my-pass .my-tier{margin-left:auto;max-width:100%;white-space:normal}
 .customer-ui .my-discover .benefit-thumb{width:54px;height:64px;flex-basis:54px}
 .customer-ui .my-heading>div{min-width:0}
 .customer-ui .my-heading>button{flex-shrink:0}
 .customer-ui .my-filters{max-width:100%;flex-wrap:wrap}
 .customer-ui dialog{max-width:calc(100vw - 24px);box-sizing:border-box}
}
@media(max-width:360px){
 .customer-ui:has(.my-layout) main{padding-left:16px;padding-right:16px}
 .customer-ui:has(.my-layout) .header{padding-left:16px;padding-right:16px}
 .customer-ui .my-pass{padding:20px}
 .customer-ui .my-layout .my-grade{padding:16px}
 .customer-ui .my-counts>button strong{font-size:25px}
}
.customer-ui .my-secondary>.my-panel{
 padding:20px;
 border:1px solid var(--line);
 border-radius:18px;
 margin:0 0 22px;
 box-sizing:border-box;
}
.customer-ui .my-secondary>.my-panel .my-section-title{gap:10px;flex-wrap:wrap}
.customer-ui .my-secondary>.my-panel .my-section-title h2{margin:0;min-width:0}
.customer-ui .my-secondary>.my-panel .my-section-title>button{margin-left:auto}
.customer-ui .my-secondary .passport-activity-status{padding:4px 6px;box-sizing:border-box}
@media(max-width:700px){
 .customer-ui .my-secondary>.my-panel{padding:18px 16px;margin-bottom:20px;border:1px solid var(--line);border-radius:18px}
 .customer-ui .my-secondary .my-counts{gap:6px}
 .customer-ui .my-secondary .my-counts>button{padding:14px 8px}
 .customer-ui .my-secondary .my-counts>button small{right:8px;top:10px}
 .customer-ui .my-secondary .my-counts>button strong{font-size:26px}
 .customer-ui .my-secondary .my-discover .benefit-row{gap:10px;padding:12px 10px}
 .customer-ui .my-secondary .my-activity li{gap:10px}
}
.customer-ui .my-secondary .passport-activity-status{flex-direction:column;flex-wrap:nowrap;align-items:center;width:78px;max-width:78px;padding:4px;flex-shrink:0}
.customer-ui .my-secondary .passport-activity-status .badge{white-space:nowrap;font-size:10px;padding:5px 7px;line-height:1.5}