@layer snippets{
  ui-express-checkout{
    display:grid;
    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 > *:not(:nth-child(2)):last-child{
      grid-column:1/3;
    }
  }
  .express-checkout-default{
    --input-bg:var(--bg-on-shade-color);
  }
  .express-checkout-default [ui-slot=input],
  .express-checkout-default [ui-slot=textarea]{
    --input-bg:var(--bg-on-shade-color);
  }
  .express-checkout-default [ui-express-checkout=field]:has([ui-slot=textarea]){
    grid-column:1/-1;
  }
  .express-checkout-default{
    display:flex;
    flex-direction:column;
    padding:var(--spacing-24);
    border-radius:var(--radius-16);
    background-color:var(--bg-shade-color);
    gap:var(--spacing-24);
  }
  .express-checkout-default .actions .quantity{
    background-color:var(--bg-on-shade-color);
  }
  .express-checkout-default .actions{
    display:grid;
    grid-gap:var(--spacing-12);
    gap:var(--spacing-12);
    grid-template-columns:min-content auto;
  }
  .express-checkout-default .actions:has(> ui-shop-button:nth-of-type(2)) > ui-shop-button:last-of-type{
    grid-column:1/3;
  }
  .express-checkout-default .subtotal{
    display:flex;
    align-items:center;
    gap:var(--spacing-4);
  }
  .express-checkout-default .subtotal .label{
    font:var(--font-label-xs);
  }
  .express-checkout-default .subtotal [ui-block=subtotal]{
    font:var(--font-body-xs);
  }
  .express-checkout-drawer{
    --input-bg:var(--bg-shade-color);
  }
  .express-checkout-drawer[ui-slot=sheet-content]{
    --sheet-background:var(--bg-color);
  }
  .express-checkout-drawer [ui-slot=sheet-body]{
    display:flex;
    flex-direction:column;
    gap:calc(var(--spacing-16) + var(--spacing-4));
  }
  .express-checkout-drawer [ui-slot=sheet-body] .order-box{
    display:grid;
    grid-gap:var(--spacing-8);
    gap:var(--spacing-8);
  }
  .express-checkout-drawer [ui-slot=sheet-body] .order-box .order{
    --quantity-bg:var(--fg-color);
    display:flex;
    gap:var(--spacing-16);
  }
  .express-checkout-drawer [ui-slot=sheet-body] .order-box .order .image{
    width:100px;
    height:100px;
    overflow:hidden;
    border-radius:var(--radius-12);
  }
  .express-checkout-drawer [ui-slot=sheet-body] .order-box .order .image > img{
    -o-object-fit:cover;
       object-fit:cover;
  }
  .express-checkout-drawer [ui-slot=sheet-body] .order-box .order .image ui-image-fallback{
    background-color:var(--bg-shade-color);
  }
  .express-checkout-drawer [ui-slot=sheet-body] .order-box .order .detail{
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    padding-block:var(--spacing-4);
    gap:var(--spacing-8);
  }
  .express-checkout-drawer [ui-slot=sheet-body] .order-box .order .detail .info{
    display:grid;
    grid-gap:var(--spacing-4);
    gap:var(--spacing-4);
  }
  .express-checkout-drawer [ui-slot=sheet-body] .order-box .order .detail .info .price{
    font:var(--font-body-md);
  }
  .express-checkout-drawer [ui-slot=sheet-body] .order-box .order .detail .info .title{
    font:var(--font-label-md);
  }
  .express-checkout-drawer [ui-slot=sheet-body] .order-box .order .detail .subtotal{
    display:flex;
    align-items:center;
    gap:var(--spacing-4);
  }
  .express-checkout-drawer [ui-slot=sheet-body] .order-box .order .detail .subtotal .label{
    font:var(--font-label-xs);
  }
  .express-checkout-drawer [ui-slot=sheet-body] .order-box .order .detail .subtotal [ui-block=subtotal]{
    font:var(--font-body-xs);
  }
  .express-checkout-drawer [ui-slot=sheet-footer] ui-quantity{
    display:none;
  }
  ui-phone-validation [ui-phone-validator=input-wrapper]{
    display:flex;
    width:100%;
    height:60px;
    overflow:hidden;
    transition:all var(--transition-standard-default-spatial);
    border-radius:var(--radius-input);
    outline:2px solid transparent;
    outline-offset:1px;
    background-color:var(--input-bg);
  }
  ui-phone-validation [ui-phone-validator=input-wrapper]:has([ui-phone-validator=number]:focus){
    outline-color:color-mix(in oklab, currentcolor 10%, transparent);
  }
  ui-phone-validation [ui-phone-validator=input-wrapper] [ui-phone-validator=countries]{
    position:relative;
    flex-shrink:0;
    width:75px;
  }
  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);
    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 color-mix(in srgb, var(--fg-color) 38%, transparent);
    border-bottom:1.2px solid color-mix(in srgb, var(--fg-color) 38%, transparent);
  }
  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%;
    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;
  }
}