:root{
  --komforti-ease:cubic-bezier(.2,.8,.2,1);
  --komforti-fast:160ms;
  --komforti-normal:260ms;
}

html{
  background:#0b0b0c;
  color-scheme:dark;
}

body{
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

body .topbar{
  position:sticky;
  top:0;
  z-index:80;
  background:rgba(11,11,12,.82);
  backdrop-filter:blur(20px) saturate(135%);
  -webkit-backdrop-filter:blur(20px) saturate(135%);
}

button,
input,
textarea{
  -webkit-tap-highlight-color:transparent;
}

button{
  transition:
    transform var(--komforti-fast) var(--komforti-ease),
    opacity var(--komforti-fast) ease,
    background-color var(--komforti-fast) ease,
    border-color var(--komforti-fast) ease;
}

button:active:not(:disabled){
  transform:scale(.975);
}

button:disabled{
  cursor:not-allowed;
  opacity:.58;
}

.primary{
  min-height:54px;
  box-shadow:0 10px 30px rgba(0,0,0,.16);
}

.product-card,
.variant,
.order-card,
.field,
.article-card,
.manifest{
  transform:translateZ(0);
}

.field{
  transition:border-color var(--komforti-fast) ease,background-color var(--komforti-fast) ease;
}

.field:focus-within{
  background:#18181b;
}

.cart-button span{
  animation:komforti-cart-pop 280ms var(--komforti-ease);
}

.success-card{
  animation:komforti-rise 380ms var(--komforti-ease) both;
}

.product-panel,
.checkout-panel{
  animation:komforti-rise 320ms var(--komforti-ease) both;
}

@keyframes komforti-rise{
  from{opacity:0;transform:translate3d(0,10px,0)}
  to{opacity:1;transform:translate3d(0,0,0)}
}

@keyframes komforti-cart-pop{
  0%{transform:scale(.72)}
  65%{transform:scale(1.12)}
  100%{transform:scale(1)}
}

@media(max-width:760px){
  body .topbar{
    margin-left:-14px;
    margin-right:-14px;
    padding-left:14px;
    padding-right:14px;
  }

  .top-actions .journal-link{
    display:inline-flex!important;
  }

  .product-panel{
    padding-top:26px;
  }

  .checkout-panel{
    padding-top:26px;
  }

  .checkout-panel h1{
    letter-spacing:-.05em;
  }

  .field{
    padding:12px 14px 13px;
    border-radius:18px;
  }

  .field input,
  .field textarea{
    min-height:28px;
    font-size:16px;
  }

  .variant{
    border-radius:22px;
  }

  .order-card{
    border-radius:24px;
  }

  .trust-row{
    padding-bottom:10px;
  }
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    scroll-behavior:auto!important;
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
}