/* Bestillingslista: rader nedover som i Foodora. Tekst til venstre, bilde til høyre med pluss-knappen oppå hjørnet.
   Tett, lys flate med mørk tekst — leses i sol og om natta. Deles av forsiden (#lista) og dashbordet (Bestill). */
.lista { background: rgba(7,24,42,.5); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); border: 1px solid rgba(255,255,255,.3); color: #fdf9f0; border-radius: 1.4rem; text-shadow: none; text-align: left; overflow: hidden; }
.lista h3.gruppe { display: block; margin: 0; text-align: left; padding: 1.1rem 1.25rem .35rem; font: 600 1.0625rem/1.2 -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif; color: #fdf9f0; letter-spacing: 0; text-transform: none; }
.lista h3.gruppe small { display: block; font-weight: 400; color: rgba(253,249,240,.72); font-size: .875rem; margin-top: .15rem; }
.rad { display: flex; align-items: stretch; gap: 1rem; padding: .9rem 1.25rem; border-top: 1px solid rgba(255,255,255,.14); }
.rad:first-of-type, .gruppe + .rad { border-top: 0; }
.rad-tekst { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: .15rem; }
.rad-tekst b { font: 600 1.0625rem/1.25 -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif; }
.rad-info { color: rgba(253,249,240,.72); font-size: .9375rem; }
.rad-pris { font-weight: 600; font-size: 1.0625rem; margin-top: .25rem; font-variant-numeric: tabular-nums; }
.rad-bilde { position: relative; flex: none; width: 104px; height: 104px; border-radius: 14px; overflow: visible; }
.rad-bilde .fl { position: relative; display: block; width: 100%; height: 100%; }
.rad-bilde .fl img { width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; display: block; filter: drop-shadow(0 6px 10px rgba(0,20,40,.35)); }   /* flasken til venstre, knappen nede til høyre */   /* frilagt flaske, ingen bakgrunn */
.rad-knapp { position: absolute; right: -10px; bottom: -8px; display: flex; align-items: center; background: rgba(7,24,42,.85); border-radius: 999px; box-shadow: 0 2px 10px rgba(3,30,36,.35); }
.rad-knapp button { width: 44px; height: 44px; border-radius: 50%; border: 0; background: #fdf9f0; color: #0a3540; font: 600 1.5rem/1 -apple-system, BlinkMacSystemFont, system-ui, sans-serif; cursor: pointer; display: grid; place-items: center; padding: 0; }
.rad-knapp button:active { transform: scale(.94); }
.rad-knapp output { min-width: 2rem; text-align: center; font: 600 1.125rem -apple-system, BlinkMacSystemFont, system-ui, sans-serif; font-variant-numeric: tabular-nums; color: #fdf9f0; }
.rad-knapp.tom button[data-d="-1"], .rad-knapp.tom output { display: none; }
.rad.valgt .rad-tekst b::after { content: ''; }
/* Bunnstripa: én knapp som viser hva du har og hva det koster. Følger med nederst. */
.lista-bunn { padding: .75rem 1rem calc(.75rem + env(safe-area-inset-bottom, 0px)); background: rgba(7,24,42,.7); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); border-top: 1px solid rgba(255,255,255,.14); }
.lista-bunn .btn { width: 100%; display: flex; justify-content: space-between; align-items: center; background: #fdf9f0; color: #0a3540; min-height: 56px; font-size: 1.0625rem; padding: .9rem 1.25rem; }
.lista-bunn .btn:disabled { background: rgba(253,249,240,.25); color: rgba(253,249,240,.8); cursor: default; }
.lista-bunn .btn .ant { display: inline-grid; place-items: center; min-width: 1.6rem; height: 1.6rem; padding: 0 .4rem; border-radius: 999px; background: #0a3540; color: #fdf9f0; font-size: .9375rem; margin-right: .6rem; }
.lista-bunn .btn .tot { font-variant-numeric: tabular-nums; }
.lista-topp { padding: 1.25rem 1.25rem .4rem; }
.lista-topp h2 { margin: 0; font-size: 1.75rem; color: #fdf9f0; text-align: left; }
.lista-topp p { margin: .3rem 0 0; color: rgba(253,249,240,.72); font-size: .9375rem; }
@media all {
  /* Kortene (Kristian 2026-10-10): 2 × 2 glasskort, flasken øverst, − 0 + nederst — likt på mobil og desktop */
  .lista h3.gruppe, .lista-topp { padding-left: 1rem; padding-right: 1rem; }
  #lista-rader { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .55rem; padding: .3rem .7rem .8rem; }
  #lista-rader .gruppe { display: none; }
  #lista-rader .rad { display: flex; min-width: 0; backdrop-filter: none; -webkit-backdrop-filter: none; flex-direction: column; align-items: center; gap: .15rem; padding: .6rem .45rem .65rem; border: 1px solid rgba(255,255,255,.22); border-radius: 1.1rem; background: rgba(255,255,255,.07); text-align: center; justify-content: space-between; }
  #lista-rader .rad.valgt { background: rgba(253,249,240,.15); border-color: rgba(253,249,240,.6); }
  #lista-rader .rad-bilde { display: contents; }
  #lista-rader .rad-bilde .fl { order: -1; width: 100%; height: clamp(3.2rem, 12vh - 1.2rem, 7.5rem); flex: none; }
  #lista-rader .rad-tekst { flex: none; width: 100%; align-items: center; gap: 0; }
  #lista-rader .rad-tekst b { grid-column: auto; font-size: .875rem; line-height: 1.2; text-wrap: balance; }
  #lista-rader .rad-info { font-size: .75rem; }
  #lista-rader .rad-pris { font-size: .875rem; margin-top: .05rem; }
  #lista-rader .rad-knapp { position: static; background: none; box-shadow: none; gap: .1rem; }
  #lista-rader .rad-knapp button { width: 40px; height: 40px; font-size: 1.25rem; }
  #lista-rader .rad-knapp output { min-width: 1.5rem; font-size: 1rem; }
  #lista-rader .rad-knapp.tom button[data-d="-1"], #lista-rader .rad-knapp.tom output { display: grid; }
  #lista-rader .rad-knapp.tom button[data-d="-1"] { opacity: .35; pointer-events: none; }   /* 0 valgt: minus grå, aldri under null */
  #lista-rader .rad-knapp.tom output { display: block; }
}
.install-kort p, .install-ark p { text-wrap: balance; }   /* «Leggi di più»-arket bruker samme ark-stil */
.install-ark { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; padding: 1.2rem; background: rgba(3,20,30,.45); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.install-ark[hidden] { display: none; }
.install-kort { max-width: 26rem; width: 100%; padding: 1.6rem 1.5rem 1.4rem; border-radius: 1.6rem; background: rgba(7,24,42,.72); border: 1px solid rgba(255,255,255,.35); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); color: #fdf9f0; text-shadow: none; text-align: center; box-shadow: 0 30px 80px rgba(3,30,36,.5); }
.install-kort h3 { margin: 0 0 .6rem; font: 400 1.6rem/1.15 'Fraunces', Georgia, serif; } .install-kort p { margin: 0; color: rgba(253,249,240,.86); }
.install-kort .lukk { margin-top: 1rem; }

/* Flasken: alle like store (Kristian 2026-10-10). Størrelsen står på etiketten; frizzante har bobler som stiger inne i glasset. */
.fl .etk { position: absolute; left: 50%; top: 58%; transform: translate(-50%, -50%); padding: .05rem .3rem; border-radius: .25rem; background: rgba(253,249,240,.92); color: #0a3540; font: 700 .5625rem/1.2 -apple-system, BlinkMacSystemFont, system-ui, sans-serif; font-style: normal; white-space: nowrap; letter-spacing: .01em; box-shadow: 0 1px 3px rgba(0,20,40,.3); pointer-events: none; }
.fl .bobler { position: absolute; inset: 0; overflow: hidden; pointer-events: none;
  -webkit-mask: var(--maske) center bottom / contain no-repeat; mask: var(--maske) center bottom / contain no-repeat; }
.fl .bobler b { position: absolute; bottom: 4%; width: 3px; height: 3px; border-radius: 50%; background: rgba(235,255,240,.85); box-shadow: 0 0 2px rgba(255,255,255,.7); animation: boble 3.2s linear infinite; opacity: 0; }
.fl .bobler b:nth-child(1) { left: 46%; animation-delay: 0s; } .fl .bobler b:nth-child(2) { left: 52%; animation-delay: .35s; width: 2px; height: 2px; }
.fl .bobler b:nth-child(3) { left: 49%; animation-delay: .7s; } .fl .bobler b:nth-child(4) { left: 55%; animation-delay: 1.05s; width: 2px; height: 2px; }
.fl .bobler b:nth-child(5) { left: 44%; animation-delay: 1.4s; } .fl .bobler b:nth-child(6) { left: 50%; animation-delay: 1.75s; width: 4px; height: 4px; }
.fl .bobler b:nth-child(7) { left: 53%; animation-delay: 2.1s; } .fl .bobler b:nth-child(8) { left: 47%; animation-delay: 2.45s; width: 2px; height: 2px; }
.fl .bobler b:nth-child(9) { left: 51%; animation-delay: 2.8s; } .fl .bobler b:nth-child(10) { left: 45%; animation-delay: 1.2s; width: 2px; height: 2px; }
@keyframes boble { 0% { bottom: 5%; transform: translateX(0); opacity: 0; } 12% { opacity: .9; } 50% { transform: translateX(1px); } 85% { opacity: .75; } 100% { bottom: 74%; transform: translateX(-1px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .fl .bobler b { animation: none; opacity: .6; } }

/* Kvitteringen under kortene: fire faste linjer, én per vare — 0 og € 0,00 til noe er valgt (Kristian 2026-10-10) */
#lista-rader .rad-info { display: none; }
.lista-kvitt { margin: .25rem .7rem 0; padding: .35rem .7rem; border-radius: .8rem; background: rgba(0,0,0,.2); font-size: .72rem; line-height: 1.12rem; }
.lista-kvitt .kl { display: grid; grid-template-columns: 2.4em 1fr auto; gap: .4rem; color: rgba(253,249,240,.58); }
.lista-kvitt .kl.paa { color: #fdf9f0; font-weight: 600; }
.lista-kvitt .kl span:first-child, .lista-kvitt .kl span:last-child { font-variant-numeric: tabular-nums; } .lista-kvitt .kl span:last-child { text-align: right; }
.lista-kvitt .kf { display: flex; justify-content: space-between; border-top: 1px solid rgba(255,255,255,.14); margin-top: .2rem; padding-top: .2rem; color: rgba(253,249,240,.58); }