ui-express-checkout{
  display:grid;
  align-items:start;
  grid-gap:var(--spacing-12);
  gap:var(--spacing-12);
}
ui-express-checkout ui-linked-fields{
  display:contents;
  gap:var(--spacing-12);
}
ui-express-checkout [ui-express-checkout=field]{
  display:grid;
  grid-gap:var(--spacing-8);
  gap:var(--spacing-8);
}
ui-express-checkout [ui-express-checkout=field]::after{
  content:attr(error-message);
  color:var(--color-error);
}
@media (min-width: 769.02px){
  ui-express-checkout{
    grid-template-columns:repeat(2, 1fr);
  }
  ui-express-checkout > *:last-child:nth-child(odd){
    grid-column:1/3;
  }
}

.express-checkout-default{
  display:flex;
  flex-direction:column;
  border:1px solid var(--color-primary);
  box-shadow:3px 3px 0 var(--color-primary);
}
.express-checkout-default .head{
  display:flex;
  flex-direction:column;
  gap:var(--spacing-4);
  padding:var(--spacing-8) var(--spacing-12);
  background-color:var(--color-surface-container);
  color:var(--color-primary);
}
.express-checkout-default .head .title{
  font:var(--font-title-md);
}
.express-checkout-default ui-express-checkout{
  padding:var(--spacing-12);
  border-block:1px solid var(--color-primary);
}
.express-checkout-default .actions{
  display:grid;
  grid-template-columns:max-content auto;
  align-items:center;
  padding:var(--spacing-12);
  background-color:var(--color-surface-container);
  grid-gap:var(--spacing-16);
  gap:var(--spacing-16);
}
.express-checkout-default .actions:has(.quantity[data-disabled]) .quantity{
  display:none;
}
.express-checkout-default .actions:has(.quantity[data-disabled]) .bundle-selected{
  display:flex !important;
}

.express-checkout-drawer [ui-slot=drawer-body]{
  display:flex;
  flex-direction:column;
  gap:var(--spacing-12);
}
.express-checkout-drawer [ui-slot=drawer-body] .bio{
  display:flex;
  align-items:center;
  gap:var(--spacing-12);
}
.express-checkout-drawer [ui-slot=drawer-body] .bio .media{
  width:150px;
  height:auto;
  overflow:hidden;
  aspect-ratio:1/1;
}
.express-checkout-drawer [ui-slot=drawer-body] .bio .media > img{
  -o-object-fit:cover;
     object-fit:cover;
}
.express-checkout-drawer [ui-slot=drawer-body] .bio .info{
  display:grid;
  flex:1;
  grid-gap:var(--spacing-8);
  gap:var(--spacing-8);
}
.express-checkout-drawer [ui-slot=drawer-body] .bio .info .title{
  overflow:hidden;
  font:var(--font-title-md);
  text-overflow:ellipsis;
  white-space:nowrap;
}
.express-checkout-drawer [ui-slot=drawer-body] .bio .info .rating{
  display:flex;
  align-items:center;
  width:-moz-fit-content;
  width:fit-content;
  padding:var(--spacing-4) var(--spacing-8);
  border:1px solid var(--color-primary);
  background-color:var(--color-primary-container);
  gap:var(--spacing-4);
}
.express-checkout-drawer [ui-slot=drawer-body] .core{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--spacing-12);
  padding-block:var(--spacing-16);
  border-block:1px dashed var(--color-primary);
}
.express-checkout-drawer [ui-slot=drawer-body] .core .qty{
  display:flex;
  align-items:center;
}
.express-checkout-drawer [ui-slot=drawer-body] .core .qty .label{
  margin-inline-end:var(--spacing-12);
}
.express-checkout-drawer [ui-slot=drawer-body] .core .price{
  font:var(--font-title-md);
}
.express-checkout-drawer [ui-slot=drawer-footer]{
  display:grid;
  grid-gap:var(--spacing-8);
  gap:var(--spacing-8);
  grid-template-columns:repeat(2, 1fr);
}
@media (max-width: 769px){
  .express-checkout-drawer [ui-slot=drawer-footer]{
    display:flex;
    flex-direction:column-reverse;
  }
}

ui-phone-validation [ui-phone-validator=input-wrapper]{
  display:flex;
  width:100%;
  height:36px;
  padding-inline-start:var(--spacing-0);
  overflow:hidden;
  transition:var(--transition-standard-fast-spatial);
  transition-property:transform, box-shadow;
  border-radius:var(--radius-button);
  background-color:var(--color-surface-container-low);
}
ui-phone-validation [ui-phone-validator=input-wrapper]:has([ui-phone-validator=number]:focus){
  transform:translate(2px, 2px);
  box-shadow:1.5px 1.5px 0 var(--color-primary);
}
ui-phone-validation [ui-phone-validator=input-wrapper] [ui-phone-validator=countries]{
  position:relative;
  flex-shrink:0;
  width:75px;
  border-inline-end:1px solid var(--color-primary);
}
ui-phone-validation [ui-phone-validator=input-wrapper] [ui-phone-validator=countries] [ui-phone-validator=displayed-country-code]{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--spacing-8);
  width:100%;
  height:100%;
  padding-inline:var(--spacing-12) var(--spacing-8);
  color:var(--color-primary);
  font:var(--font-body-md);
  pointer-events:none;
}
ui-phone-validation [ui-phone-validator=input-wrapper] [ui-phone-validator=countries] [ui-phone-validator=displayed-country-code]::after{
  content:"";
  flex-shrink:0;
  width:6px;
  height:6px;
  transform:translate(-1.5px, -1.5px) rotate(45deg);
  border-right:1.2px solid currentcolor;
  border-bottom:1.2px solid currentcolor;
}
ui-phone-validation [ui-phone-validator=input-wrapper] [ui-phone-validator=countries] [ui-phone-validator=select-country-code]{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  opacity:0;
  cursor:pointer;
  -webkit-appearance:none;
     -moz-appearance:none;
          appearance:none;
}
ui-phone-validation [ui-phone-validator=input-wrapper] [ui-phone-validator=number]{
  flex:1;
  height:100%;
  padding-inline-start:var(--spacing-12);
  border:none;
  border-radius:var(--radius-0);
  outline:none;
  background-color:transparent;
  box-shadow:none;
}
ui-phone-validation [ui-phone-validator=error]{
  color:var(--color-error);
  font:var(--font-body-sm);
}
ui-phone-validation [ui-phone-validator=error][data-hidden=true]{
  display:none;
}