/* index.html */
* { box-sizing: border-box; }
html { width: 100%; overflow-x: clip; }
body {
  margin: 0;
  width: 100%;
  max-width: 100vw;
  min-width: 0;
  overflow-wrap: anywhere;
  background: #404040;
  color: #f3fff6;
  font-family: Helvetica, Arial, sans-serif;
}
main, #results {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}
main { max-width: 100vw; }
#results { display: grid; grid-template-columns: minmax(0, 1fr); }
html.showing-results { scroll-padding-top: var(--results-top, 74px); }
.showing-results .page-header { position: sticky; top: 0; z-index: 10; background: #404040; display: flow-root; }
.showing-results .cartoon img { cursor: pointer; touch-action: pan-y pinch-zoom; }
.showing-results main { padding-bottom: calc(100dvh - var(--results-top, 74px)); }
.nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  padding: 6px;
  background: #55705d;
}
.page-header > .nav { margin-bottom: 5px; }
.nav a {
  color: #f3fff6;
  text-decoration: none;
  font-weight: 700;
  font-size: 0.85rem;
  border: 1px solid white;
  border-radius: 4px;
  padding: 2px 6px;
}
.nav a:hover, .nav a:focus-visible { background: #683109; text-decoration: underline; }
h1 { margin: 10px 0; font-size: 1em; font-weight: normal; text-align: center; }
button, .button {
  display: inline-block;
  padding: 10px 16px;
  border: 1px solid white;
  border-radius: 6px;
  background: #55705d;
  color: white;
  font: inherit;
  text-decoration: none;
  cursor: pointer;
}
button:disabled { background: #666; color: #bbb; border-color: #888; cursor: default; }
#searchStatus { margin: 10px; text-align: center; }
#searchStatus:empty { display: none; }
.cartoon { margin: 0 0 29px; width: 100%; min-width: 0; max-width: 100vw; }
.cartoon-label { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 8px; margin: 0 0 6px; font-size: 1em; }
.cartoon-label span { min-width: 0; }
.cartoon-label span:last-child { text-align: right; }
.cartoon img { display: block; width: 100%; max-width: min(100%, 100vw); min-width: 0; height: auto; }
.cart-selection { display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; cursor: pointer; color: white; }
.cart-selection input { appearance: none; display: grid; place-content: center; width: 18px; height: 18px; margin: 0; border: 2px solid currentColor; border-radius: 3px; color: inherit; background: transparent; cursor: pointer; }
.cart-selection input:checked { width: 19.6px; height: 19.6px; }
.cart-selection input:checked::after { content: ""; width: 8px; height: 4px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-1px) rotate(-45deg); }
.cart-selection:has(input:checked) { color: #fed777; }
.cart-selection input:focus-visible { outline: 2px solid white; outline-offset: 4px; }
.results-actions { position: fixed; inset: auto 0 0; z-index: 10; margin-top: 20px; padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px)); box-shadow: 0 -20px 0 #404040; }
@media (max-width: 480px) {
  .cartoon-label { gap: 8px; font-size: 0.85rem; }
}
.brand { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 8px; }
.brand img { width: 100px; height: auto; }
.brand span { font-size: 25px; color: white; }
.search-prompt { width: 100%; min-height: var(--cartoon-height, 100vw); border: 1px solid #f3fff6; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; padding: 24px; text-align: center; touch-action: pan-y pinch-zoom; }
.search-prompt p { margin: 0; font-size: clamp(1.25rem, 3vw, 2rem); }
[hidden] { display: none !important; }
    nav a.nav-cart,
nav a.nav-cart:hover,
nav a.nav-cart:focus-visible { background: #ff7f50; color: white; }