.xui-page{
  box-sizing:border-box;
  color:var(--xui-color-text);
  font-family:var(--xui-font-family);
}

.xui-container{
  box-sizing:border-box;
  width:100%;
  min-width:0;
  margin-inline:auto;
}

.xui-page-header{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-end;
  justify-content:space-between;
  gap:var(--xui-space-4);
  margin:0 0 var(--xui-space-5);
}

.xui-title{
  margin:0;
  color:var(--xui-color-heading);
  font-family:var(--xui-font-family);
  font-size:clamp(27px,2vw,34px);
  line-height:1.12;
  font-weight:700;
}

.xui-subtitle{
  margin:var(--xui-space-2) 0 0;
  color:var(--xui-color-muted);
  font-size:15px;
  line-height:1.45;
  font-weight:500;
}

.xui-breadcrumbs,
.xui-purchase-flow{
  box-sizing:border-box;
  display:inline-flex;
  width:auto;
  max-width:100%;
  min-width:0;
  padding:10px 14px;
  border:1px solid var(--xui-color-border);
  border-radius:var(--xui-radius-surface);
  background:var(--xui-color-surface);
  box-shadow:var(--xui-shadow-control);
  color:var(--xui-color-muted);
  font-family:var(--xui-font-family);
  font-size:14px;
  line-height:var(--xui-breadcrumb-line-height);
  font-weight:500;
  letter-spacing:-.005em;
}

.xui-breadcrumbs__list{
  display:block;
  gap:0;
  margin:0;
  padding:0;
  list-style:none;
}

.xui-breadcrumbs__item{
  display:inline;
  min-width:0;
}

.xui-breadcrumbs__item + .xui-breadcrumbs__item::before{
  content:"›\00a0";
  margin-left:7px;
  color:var(--xui-color-border-strong);
  font-weight:400;
}

.xui-breadcrumbs__link{
  color:var(--xui-color-muted)!important;
  font-weight:500!important;
  text-decoration:none;
  transition:color var(--xui-transition);
}

.xui-breadcrumbs__link:hover{
  color:var(--xui-color-primary-hover)!important;
}

.xui-breadcrumbs__link:focus-visible{
  outline:2px solid var(--xui-color-primary);
  outline-offset:3px;
  border-radius:4px;
}

.xui-breadcrumbs__current{
  color:var(--xui-color-primary)!important;
  font-weight:600!important;
}

.xui-context-breadcrumbs--account
.xui-breadcrumbs__item:nth-child(n+2)
> :is(.xui-breadcrumbs__link,.xui-breadcrumbs__current),
.xui-context-breadcrumbs--account
.xui-breadcrumbs__item:nth-child(n+3)::before{
  color:var(--xui-color-primary)!important;
}

.xui-breadcrumbs__link,
.xui-breadcrumbs__current{overflow-wrap:normal;word-break:normal}

.xui-purchase-flow__list{display:block;min-width:0;margin:0;padding:0;list-style:none}
.xui-purchase-flow__item{display:inline;min-width:0}
.xui-purchase-flow__item + .xui-purchase-flow__item::before{content:"›\00a0";margin-left:7px;color:var(--xui-color-border-strong);font-weight:400}
.xui-purchase-flow__link,.xui-purchase-flow__content{display:inline;min-width:0;text-decoration:none}
.xui-purchase-flow__link{color:var(--xui-color-muted)!important;font-weight:500!important}
.xui-purchase-flow__content{color:inherit}
.xui-purchase-flow__label{overflow-wrap:normal;word-break:normal;font-weight:inherit}
.xui-purchase-flow__item.is-current{color:var(--xui-color-primary);font-weight:600}
.xui-purchase-flow__item.is-upcoming{color:var(--xui-color-muted)}
.xui-purchase-flow__link:hover{color:var(--xui-color-primary-hover)!important}
.xui-purchase-flow__link:focus-visible{outline:2px solid var(--xui-focus-color);outline-offset:3px;border-radius:4px}
.xui-back-link{display:inline-flex;min-height:44px;align-items:center;color:var(--xui-color-muted);font-size:14px;font-weight:600;text-decoration:none}
.xui-back-link:hover{color:var(--xui-color-primary-hover)}
.xui-back-link:focus-visible{outline:2px solid var(--xui-focus-color);outline-offset:3px;border-radius:4px}

.xui-button{
  box-sizing:border-box;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--xui-space-2);
  min-height:var(--xui-control-height);
  padding:0 18px;
  border:1px solid transparent;
  border-radius:var(--xui-radius-control);
  font-family:var(--xui-font-family);
  font-size:14px;
  line-height:1;
  font-weight:700;
  text-decoration:none;
  cursor:pointer;
  box-shadow:none;
  -webkit-backdrop-filter:blur(var(--xui-glass-blur));
  backdrop-filter:blur(var(--xui-glass-blur));
  transition:background-color var(--xui-transition),border-color var(--xui-transition),color var(--xui-transition),transform var(--xui-transition);
}

.xui-button--primary{
  border-color:var(--xui-glass-primary-border);
  color:#fff;
  background:var(--xui-glass-primary-bg);
}

.xui-button--primary:hover{
  border-color:rgba(38,178,74,.48);
  color:#fff;
  background:var(--xui-glass-primary-hover);
  transform:translateY(-1px);
}

.xui-button--secondary{
  border-color:var(--xui-glass-secondary-border);
  color:var(--xui-color-text);
  background:var(--xui-glass-secondary-bg);
}

.xui-button--secondary:hover{
  border-color:var(--xui-glass-secondary-hover-border);
  color:var(--xui-color-text);
  background:var(--xui-glass-secondary-hover);
  transform:translateY(-1px);
}

.xui-button:active{
  transform:translateY(0) scale(.99);
}

.xui-button:focus-visible{
  outline:2px solid var(--xui-focus-color);
  outline-offset:2px;
  box-shadow:none;
}

.xui-button:disabled,
.xui-button[aria-disabled="true"]{
  opacity:.55;
  cursor:not-allowed;
}

@media(max-width:767px){
  .xui-page-header{
    align-items:stretch;
    margin-bottom:var(--xui-space-4);
  }

  .xui-title{
    font-size:27px;
  }

  .xui-breadcrumbs,
  .xui-purchase-flow{
    padding:9px 12px;
    font-size:13px;
  }
}
