/* ─── Category / Store header ─── */
.cat-head { display: flex; align-items: center; gap: 10px; padding: 14px 16px 8px; cursor: pointer; }
/* Runder Icon-Kreis mit warmem Rahmen wie im Mockup, Icon in Kategoriefarbe */
.cat-icon { width: 34px; height: 34px; border-radius: 50%; background: rgba(255, 255, 255, 0.8); border: 1px solid rgba(var(--border-warm), 0.3); display: flex; align-items: center; justify-content: center; font-size: 17px; flex-shrink: 0; }
.cat-label { font-size: 16px; font-weight: 700; letter-spacing: -0.01em; }
.cat-chev { color: var(--gray-400); font-size: 13px; transition: transform 0.2s; }
.cat-head.collapsed .cat-chev { transform: rotate(-90deg); }
.cat-chev-r { color: var(--gray-300); font-size: 17px; font-weight: 400; line-height: 1; transition: transform 0.2s; }
.cat-head.collapsed .cat-chev-r { transform: rotate(90deg); }
.cat-count { font-size: 12.5px; font-weight: 700; color: var(--gray-500); margin-left: auto; background: rgba(255, 255, 255, 0.75); border-radius: 10px; min-width: 24px; height: 21px; padding: 0 7px; display: inline-flex; align-items: center; justify-content: center; }

/* ─── Grid (Kacheln) ─── */
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 0 16px; }
/* Horizontale Scroll-Reihe pro Kategorie: gridCols Karten sichtbar, Rest per Swipe
   (÷ .15 mehr, damit die nächste Karte anteasert dass es weitergeht) */
.hrow { display: flex; overflow-x: auto; gap: 8px; padding: 0 16px 6px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.hrow::-webkit-scrollbar { display: none; }
.hrow .gcard { flex: 0 0 calc((100% - 40px) / 4.15); }
.hrow.cols-2 .gcard { flex-basis: calc((100% - 24px) / 2.15); }
.hrow.cols-3 .gcard { flex-basis: calc((100% - 32px) / 3.15); }
.gcard { position: relative; background: var(--card-prod); border-radius: 12px; border-left: 2.5px solid transparent; box-shadow: var(--shadow); overflow: hidden; display: flex; flex-direction: column; min-width: 0; transition: opacity 0.2s; }
.gcard:active { opacity: 0.85; }
.gthumb { height: 64px; display: flex; align-items: center; justify-content: center; transition: opacity 0.2s; }
.gthumb svg { width: 38px; height: 38px; }
/* Freigestellte Produktfotos: Schatten per CSS statt im Bild (themenfarben-neutral).
   Leicht schräg nach rechts unten (Licht von links oben), y-Offset > Blur hält ihn unterm Produkt.
   Dynamische Größe: 50% der Kachelbreite mit Unter-/Obergrenze — Luft bleibt bei jeder Kachelgröße */
.gthumb .gphoto { max-width: clamp(40px, 50%, 92px); max-height: 70%; object-fit: contain; filter: drop-shadow(3px 5px 3px rgba(120, 70, 40, 0.22)); }
/* Produktfotos sind reine Deko: ohne pointer-events zielt Long-Press auf die
   Karte statt aufs Bild — Androids Bild-Kontextmenü kann die Halten-Geste
   nicht mehr abwürgen (Tester-Feedback 09.07.) */
.gphoto, .sphoto { pointer-events: none; -webkit-user-drag: none; }
.gbody { padding: 2px 10px 10px; display: flex; flex-direction: column; gap: 3px; flex: 1; }
.gcard-name { font-size: 14px; font-weight: 700; line-height: 1.25; letter-spacing: -0.01em; -webkit-hyphens: auto; hyphens: auto; overflow-wrap: break-word; }
/* Menge/Detail auf eigener Zeile wie im Mockup */
.gcard-sub { font-weight: 400; color: var(--gray-500); font-size: 12px; line-height: 1.3; min-height: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gcard-amount { font-weight: 400; color: var(--gray-400); font-size: 12.5px; }
.gcard-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 6px; padding-top: 5px; position: relative; }
/* Checkbox rechts verankert + über der Pille (Vorgabe Flo): unbekannte Läden mit
   langem Namen laufen hinter ihr durch, .gcard overflow:hidden kappt den Rest.
   bottom:0 statt top:50%: liegt so exakt auf der Linie der gleich hohen Mini-Kachel */
.gcard-foot .gcheck { position: absolute; right: 0; bottom: 0; z-index: 1; }
.gcard-foot .badge { max-width: 100%; }
.gcheck { width: 23px; height: 23px; border: 1.5px solid var(--gray-300); border-radius: 7px; background: #fff; display: flex; align-items: center; justify-content: center; color: white; font-size: 13px; transition: all 0.2s; flex-shrink: 0; }
.checked .gcheck { background: var(--grad); border-color: transparent; }
.checked .gcard-name { color: var(--gray-500); }
.checked .gthumb { opacity: 0.55; }
.badge-btn { cursor: pointer; }
.badge-btn:active { opacity: 0.7; }

/* ─── Piktogramme (line-art SVG) ─── */
.pico { display: block; }
.cat-icon svg { width: 19px; height: 19px; }
.scard-emoji svg { width: 26px; height: 26px; }
/* Einkaufen-Modus: Bild/Piktogramm links vor dem Text (Option, Default an) */
.scard .scard-emoji { flex-shrink: 0; margin-right: 10px; display: flex; align-items: center; justify-content: center; width: 32px; }
.scard .sphoto { width: 32px; height: 32px; object-fit: contain; filter: drop-shadow(1px 2px 1.5px rgba(0,0,0,0.18)); }
.scard.checked .scard-emoji { opacity: 0.45; }
.hist-emoji svg { width: 22px; height: 22px; }
.parse-emoji svg { width: 20px; height: 20px; }
.aisle-emoji svg { width: 18px; height: 18px; vertical-align: middle; }

/* ─── Long-Press & Verschieben-Drag (Flo 09.07.): Kacheln/Liste = Kategorie, Einkaufen = Laden ─── */
/* Android-Fix (Flo 10.07.): ohne touch-action beansprucht Android Chrome den
   Touch fürs Scrollen und feuert pointercancel WÄHREND der 500-ms-Haltephase →
   die Geste stirbt vorm Abheben (auf Desktop/Maus gibt es kein pointercancel,
   dort ging es). pan-y = Liste scrollt weiter beim Wischen, aber der Browser
   reserviert den Finger nicht mehr sofort; nach dem Abheben blockt gestures.js
   den Scroll per touchmove. user-select/touch-callout aus = kein natives
   Text-/Bild-Long-Press, das die Geste ebenfalls abbrechen würde. */
.gcard[data-item], .lrow-tap[data-item], .scard[data-item] {
  touch-action: pan-y;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
.gcard.lifted, .scard.lifted, .lrow-tap.lifted { transform: scale(1.045); box-shadow: 0 10px 26px rgba(0,0,0,0.22); z-index: 5; transition: transform 0.12s ease, box-shadow 0.12s ease; }
.drag-ghost { position: fixed; z-index: 400; pointer-events: none; opacity: 0.92; margin: 0; transform: scale(1.05) rotate(1.5deg); box-shadow: 0 14px 34px rgba(0,0,0,0.28); }
.gcard.drag-source, .scard.drag-source, .lrow-tap.drag-source { opacity: 0.35; }
.cat-head.drop-target, .store-head.drop-target { background: var(--primary-light); border-radius: 10px; }
.hrow.drop-target, .list.drop-target, .sgrid.drop-target { outline: 2px dashed var(--primary); outline-offset: -2px; border-radius: 12px; background: rgba(var(--glow), 0.05); }

/* ─── Spalten-Auswahl (pro Nutzer, lokal) — dezent im Seitenmenü ─── */
.menu-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 20px; border-top: 1px solid var(--gray-100); }
.menu-row-head { display: flex; align-items: center; gap: 10px; font-size: 12.5px; font-weight: 600; color: var(--gray-400); }
.menu-row-head svg { width: 15px; height: 15px; flex-shrink: 0; color: var(--gray-400); }
.col-seg { display: inline-flex; background: var(--gray-100); border-radius: 8px; padding: 2px; gap: 2px; flex-shrink: 0; }
.col-seg .col-btn { display: flex; align-items: center; justify-content: center; width: 27px; height: 23px; padding: 0; border: none; background: transparent; color: var(--gray-500); font-size: 12px; font-weight: 700; border-radius: 6px; transition: all 0.15s; }
.col-seg .col-btn.active { background: #fff; color: var(--gray-700); box-shadow: var(--shadow); }
/* Dichtere Kacheln bei mehr sichtbaren Karten pro Reihe */
.hrow.cols-3 { gap: 10px; }
.hrow.cols-3 .gthumb { height: 62px; }
.hrow.cols-3 .gthumb svg { width: 34px; height: 34px; }
.hrow.cols-3 .gbody { padding: 2px 9px 9px; gap: 3px; }
.hrow.cols-3 .gcard-name { font-size: 13.5px; }
.hrow.cols-3 .badge { font-size: 10px; padding: 2px 6px; }
.hrow.cols-4 { gap: 8px; }
.hrow.cols-4 .gthumb { height: 52px; }
.hrow.cols-4 .gthumb svg { width: 30px; height: 30px; }
.hrow.cols-4 .gbody { padding: 2px 8px 8px; gap: 2px; }
.hrow.cols-4 .gcard-name { font-size: 12px; line-height: 1.2; }
.hrow.cols-4 .gcard-sub { font-size: 10.5px; min-height: 13px; }
.hrow.cols-4 .gcard-amount { font-size: 11px; }
.hrow.cols-4 .gcheck { width: 20px; height: 20px; font-size: 11px; }
.hrow.cols-4 .badge { font-size: 9px; padding: 2px 5px; }
/* Mini-Farbkachel (storeBadge 'mini'): exakt gleiche Maße/Rundung wie die gcheck-Checkbox
   der jeweiligen Spaltenzahl, damit beide auf einer Linie liegen (Vorgabe Flo) */
.hrow.cols-3 .badge-mini, .hrow.cols-4 .badge-mini { width: 23px; height: 23px; padding: 0; justify-content: center; border-radius: 7px; font-size: 9px; font-weight: 800; }
.hrow.cols-4 .badge-mini { width: 20px; height: 20px; font-size: 8.5px; }

/* ─── List (flach, wie Mockup) ─── */
.list-head { padding: 16px 16px 6px; }
.list-head .cat-chev { margin-left: auto; }
.list { margin: 0 16px; }
.lrow { display: flex; align-items: center; gap: 13px; padding: 9px 0; border-bottom: 1px solid rgba(var(--border-warm), 0.18); }
.lrow:last-child { border-bottom: none; }
.lrow-edit { background: none; border: none; color: var(--gray-400); padding: 4px 2px; flex-shrink: 0; cursor: pointer; display: flex; align-items: center; }
.lrow-edit svg { width: 18px; height: 18px; }
.lrow-tap { display: flex; align-items: center; gap: 13px; flex: 1; min-width: 0; cursor: pointer; }
.lrow-tap:active .lcheck { opacity: 0.7; }
.lcheck { width: 22px; height: 22px; background: #fff; border: 1.5px solid rgba(var(--border-warm), 0.5); border-radius: 7px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: white; font-size: 13px; transition: all 0.2s; }
.checked .lcheck { background: var(--grad); border-color: transparent; }
.lrow-name { flex: 1; font-size: 16px; font-weight: 500; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lrow-amount { color: var(--gray-400); font-weight: 400; font-size: 13px; margin-left: 5px; }
.checked .lrow-name { text-decoration: line-through; color: var(--gray-400); }

/* ─── Shopping (Einkaufen, Mockup 02) ─── */
.store-block { margin-bottom: 4px; }
.store-head { display: flex; align-items: center; gap: 11px; padding: 14px 16px 9px; cursor: pointer; }
.store-head .cat-chev { margin-left: 2px; }
.store-tile { width: 30px; height: 30px; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: white; font-weight: 800; font-size: 12px; letter-spacing: 0.2px; flex-shrink: 0; box-shadow: var(--shadow); text-align: center; line-height: 1; }
.store-name { font-size: 16px; font-weight: 700; letter-spacing: -0.01em; flex: 1; min-width: 0; }
.store-count { font-size: 13px; font-weight: 600; color: var(--gray-500); }
/* 2-spaltige Karten wie im Mockup: Name + Menge links, Check rechts, Terracotta-Streifen */
.sgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 0 16px; }
.scard { position: relative; background: var(--card-prod); border-radius: 12px; border-left: 2.5px solid var(--grad-b); padding: 10px 38px 10px 12px; box-shadow: var(--shadow); display: flex; align-items: center; min-height: 56px; min-width: 0; transition: opacity 0.2s; cursor: pointer; }
.scard:active { opacity: 0.85; }
.scard-text { min-width: 0; flex: 1; }
.scard-name { font-size: 14px; font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; -webkit-hyphens: auto; hyphens: auto; overflow-wrap: break-word; }
.scard-amount { font-size: 12px; color: var(--gray-500); min-height: 15px; }
.scheck { position: absolute; top: 50%; right: 10px; transform: translateY(-50%); width: 24px; height: 24px; background: #fff; border: 1.5px solid var(--gray-300); border-radius: 7px; display: flex; align-items: center; justify-content: center; color: white; font-size: 13px; transition: all 0.2s; }
.checked .scheck { background: var(--grad); border-color: transparent; }
.checked .scard-name { color: var(--gray-500); text-decoration: line-through; }

/* ─── Store badge ─── */
.badge { font-size: 10.5px; font-weight: 800; padding: 3px 8px; border-radius: 7px; letter-spacing: 0.2px; display: inline-flex; align-items: center; white-space: nowrap; align-self: flex-start; }

/* ─── Empty ─── */
.empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 80px 20px; color: var(--gray-400); text-align: center; }
.empty-state .icon { font-size: 52px; margin-bottom: 14px; }
.empty-state p { font-size: 15px; line-height: 1.5; }