@layer snippets{
  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;
    }
    ui-express-checkout ui-linked-fields > *:last-child:nth-child(odd){
      grid-column:1/3;
    }
  }
  .express-checkout-default{
    display:flex;
    flex-direction:column;
    gap:var(--spacing-24);
  }
  .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 .actions:not(:has(.quantity)){
    grid-template-columns:1fr;
  }
  .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{
    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 .detail{
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    padding-block:var(--spacing-4);
  }
  .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{
    color:var(--color-primary);
    font:var(--font-body-lg);
  }
  .express-checkout-drawer [ui-slot=sheet-footer] ui-quantity{
    display:none;
  }
  ui-phone-validation [ui-phone-validator=input-wrapper]{
    display:flex;
    width:100%;
    height:40px;
    overflow:hidden;
    transition:all var(--transition-standard-default-spatial);
    border-radius:var(--radius-input);
    outline:2px solid transparent;
    outline-offset:1px;
    background-color:var(--color-surface-container-low);
  }
  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;
    border-inline-end:1px solid var(--color-surface-container-highest);
  }
  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 color-mix(in srgb, var(--color-on-surface) 38%, transparent);
    border-bottom:1.2px solid color-mix(in srgb, var(--color-on-surface) 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;
  }

  .kronovix-order-form{
    gap:var(--spacing-20);
    padding:20px;
    border:1px solid color-mix(in srgb, currentColor 12%, transparent);
    border-radius:16px;
    background:color-mix(in srgb, var(--color-surface) 94%, currentColor 6%);
  }
  .kronovix-order-quantity,
  .kronovix-order-fields-head,
  .kronovix-bundle-selector__head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
  }
  .kronovix-order-quantity__label,
  .kronovix-order-fields-head,
  .kronovix-bundle-selector__head{
    align-items:center;
  }
  .kronovix-order-quantity__label,
  .kronovix-order-fields-head,
  .kronovix-bundle-selector__head{
    display:flex;
    gap:12px;
  }
  .kronovix-order-step{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:30px;
    height:30px;
    flex:0 0 30px;
    border-radius:999px;
    background:var(--color-primary);
    color:var(--color-on-primary);
    font-weight:700;
  }
  .kronovix-order-quantity strong,
  .kronovix-order-fields-head strong,
  .kronovix-bundle-selector__head strong{
    display:block;
    font:var(--font-title-md);
  }
  .kronovix-order-quantity small,
  .kronovix-order-fields-head small,
  .kronovix-bundle-selector__head small{
    display:block;
    margin-top:2px;
    opacity:.65;
    font:var(--font-body-sm);
  }
  .kronovix-bundle-selector{
    display:grid;
    gap:12px;
  }
  .kronovix-bundle-selector__options{
    display:grid;
    gap:10px;
  }
  .kronovix-bundle-option{
    display:grid;
    grid-template-columns:auto minmax(0,1fr) auto;
    align-items:center;
    gap:12px;
    padding:14px;
    border:1px solid color-mix(in srgb, currentColor 12%, transparent);
    border-radius:12px;
    cursor:pointer;
    transition:border-color .2s ease, background-color .2s ease;
  }
  .kronovix-bundle-option:has(input:checked){
    border-color:var(--color-primary);
    background:color-mix(in srgb, var(--color-primary) 7%, transparent);
  }
  .kronovix-bundle-option__main strong,
  .kronovix-bundle-option__main small{
    display:block;
  }
  .kronovix-bundle-option__main small{
    margin-top:3px;
    opacity:.62;
  }
  .kronovix-bundle-option__price{
    display:grid;
    justify-items:end;
    gap:2px;
    white-space:nowrap;
  }
  .kronovix-bundle-option__price del{opacity:.5;font-size:12px;}
  .kronovix-bundle-option__price em{font-style:normal;font-size:11px;font-weight:700;color:var(--color-success);}
  .kronovix-order-submit{
    grid-template-columns:1fr !important;
  }
  .kronovix-order-submit ui-shop-button,
  .kronovix-order-submit [ui-slot=button]{
    width:100%;
  }
  @media (max-width: 640px){
    .kronovix-order-form{padding:14px;}
    .kronovix-order-quantity{align-items:flex-start;flex-direction:column;}
    .kronovix-bundle-option{grid-template-columns:auto minmax(0,1fr);}
    .kronovix-bundle-option__price{grid-column:2;justify-items:start;}
  }
}