html { color-scheme: dark; }
  body { font-family: Inter, ui-sans-serif, system-ui, sans-serif; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
  /* Prices, product codes and quantities used the system monospace font
     (Consolas on Windows), whose zero has a slash through it. They now use
     Inter, whose zero is plain, with fixed-width digits so columns of
     figures still line up. "body" outranks Tailwind's .font-mono whatever
     order the stylesheets load in. */
  body .font-mono { font-family: Inter, ui-sans-serif, system-ui, sans-serif; font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1, "zero" 0; letter-spacing: 0; }
  .aura { background: radial-gradient(58% 46% at 50% 0%, rgba(2,132,199,.16) 0%, rgba(2,132,199,0) 72%); }

  .no-scroll { overflow: hidden; }
  :focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; }
  ::selection { background: #2563eb; color: #ffffff; }
  .vial { filter: drop-shadow(0 14px 16px rgba(0,0,0,.55)); transition: filter .35s ease; }
  /* The frame now hugs the art, so the hover cue lifts brightness rather than
     scaling — a transform would be clipped by the frame edge. */
  article:hover .vial { filter: drop-shadow(0 14px 16px rgba(0,0,0,.55)) brightness(1.12); }
  @keyframes drop { 0% { opacity:0; transform: translateY(-22px) scale(.85); } 60% { opacity:1; transform: translateY(4px) scale(1.04); } 100% { opacity:1; transform: translateY(0) scale(1); } }
  @keyframes fade { from { opacity:0; transform: translateY(8px); } to { opacity:1; transform: translateY(0); } }
  @keyframes pulseRing { 0% { box-shadow: 0 0 0 0 rgba(2,132,199,.45); } 100% { box-shadow: 0 0 0 12px rgba(2,132,199,0); } }
  .drop { animation: drop .42s cubic-bezier(.34,1.56,.64,1) both; }
  .fade { animation: fade .3s ease-out both; }
  .ping { animation: pulseRing .55s ease-out; }
  /* Footer links are buttons so they can drive the router, but they should
     read and behave like links. */
  .foot-link { color: inherit; text-align: left; transition: color .15s ease; }
  .foot-link:hover { color: #ffffff; }

  /* Language switch. Built to be found by anyone, including people with low
     vision: the full language name rather than a two-letter code, a globe
     icon, large bold type, and black on bright yellow (well above WCAG AAA
     contrast) with a thick outline so it stands apart from the dark header. */
  .lang-switch {
    display: inline-flex; align-items: center; gap: .5rem;
    min-height: 44px; padding: .5rem 1rem;
    border-radius: .625rem; border: 3px solid #0a0a0a;
    background: #fde047; color: #0a0a0a;
    box-shadow: 0 0 0 2px #fde047;
    font-size: 16px; font-weight: 800; line-height: 1; letter-spacing: .01em;
    text-decoration: none; white-space: nowrap;
    transition: background-color .15s ease, box-shadow .15s ease;
  }
  .lang-switch:hover { background: #facc15; box-shadow: 0 0 0 2px #facc15; color: #0a0a0a; }
  .lang-switch:focus-visible { outline: 3px solid #ffffff; outline-offset: 3px; }
  .lang-switch__icon { width: 22px; height: 22px; flex: none; }
  /* On a phone the header has no room for it beside the cart and menu
     buttons, so it takes a full-width row of its own under the header
     instead: just as large and just as bright, and nothing is pushed off
     the screen. */
  .lang-switch--bar { display: none; }
  @media (max-width: 639px) {
    header .lang-switch--head { display: none; }
    .lang-switch--bar {
      display: flex; justify-content: center; width: 100%;
      border-radius: 0; border-left: 0; border-right: 0; box-shadow: none;
      min-height: 48px; font-size: 17px;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .drop, .fade, .ping { animation: none; }
    .vial, article:hover .vial { transition: none; }
    html { scroll-behavior: auto; }
  }