/* Shared interaction only; layouts live in styles.css and admin.css. */

:root {
  --duration-fast: 140ms;
  --duration-normal: 200ms;
  --ease-out: cubic-bezier(.2,.8,.2,1);
}

html {
  scrollbar-gutter: stable;
}

html:has(dialog[open]) {
  overflow: hidden;
}

button,a,input,select,textarea {
  touch-action: manipulation;
}

button,.button,a {
  transition: transform var(--duration-fast) var(--ease-out),box-shadow var(--duration-fast) var(--ease-out);
}

button:not(:disabled):active,.button:active {
  transform: translateY(1px);
}

:where(button,a,input,select,textarea,[tabindex]):focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}

dialog {
  overscroll-behavior: contain;
}

dialog::backdrop {
  animation: backdrop-appear var(--duration-normal) ease-out;
}

.hero-copy {
  animation: content-appear 450ms var(--ease-out) both;
}

.product-card {
  animation: content-appear 200ms var(--ease-out) both;
}

.product-card:nth-child(2) {
  animation-delay: 25ms;
}

.product-card:nth-child(3) {
  animation-delay: 50ms;
}

.quantity-and-price strong,.bag-total strong,.product-bottom strong,.order-bottom strong {
  font-variant-numeric: tabular-nums;
}

#toast {
  transition: opacity var(--duration-normal) ease,transform var(--duration-normal) var(--ease-out);
}

.data-notice {
  position: fixed;
  bottom: 16px;
  left: 16px;
  z-index: 95;
  max-width: min(480px,calc(100% - 32px));
  padding: 14px 18px;
  border-radius: 7px;
  background: var(--warning-bg);
  color: var(--warning-text);
  box-shadow: var(--shadow);
  font-size: 14px;
}

.customer-order>.cancelled-explanation {
  padding: 14px;
  border-radius: 6px;
  background: var(--danger-bg);
  color: var(--danger-text);
  font-size: 14px;
}

.checkout-error {
  color: var(--danger-text);
  font-size: 14px;
}

.checkout-error:empty {
  display: none;
}

@keyframes content-appear {
  from {
    opacity: 0;
    transform: translateY(7px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes backdrop-appear {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@media (hover:hover) {
  .button:not(.secondary):not(.light):not(:disabled):hover {
    background: var(--brand-hover);
  }

  .button.secondary:hover,.icon-button:hover,.bag-button:hover {
    background: var(--surface-raised);
  }

  .shop-header nav a:hover,.account-btn:hover,.text-link:hover,.product-title:hover {
    color: var(--link);
  }

  .category-tab:not(.active):hover {
    background: var(--surface-raised);
    color: var(--text);
  }

  .add-circle:not(:disabled):hover {
    background: var(--accent);
    color: var(--on-accent);
    border-color: var(--accent);
  }
}

@media (prefers-reduced-motion:reduce) {
  html {
    scroll-behavior: auto!important;
  }

  *,*::before,*::after {
    animation: none!important;
    transition: none!important;
    scroll-behavior: auto!important;
  }
}