/* ==========================================================================
   Jenny Stoffauswahl – Aussehen
   Nutzt die Farb-/Schrift-Variablen des Themes "Jenny's Zauberfaden", wenn
   vorhanden, und fällt sonst auf neutrale Werte zurück. Funktioniert daher
   mit jedem Theme.
   ========================================================================== */
:root {
  --jsa-akzent: var(--rose-tief, #A96360);
  --jsa-akzent-dunkel: var(--rose-dunkel, #945A57);
  --jsa-akzent-zart: var(--rose-zart, #F6E7E4);
  --jsa-text: var(--tinte, #33292A);
  --jsa-text-leise: var(--tinte-leise, #6F6466);
  --jsa-linie: var(--linie, #E9DFD9);
  --jsa-papier: var(--papier, #FFFFFF);
  --jsa-creme: var(--creme, #FBF7F2);
  --jsa-rund: var(--rund-m, 14px);
  --jsa-schatten: 0 18px 50px rgba(51, 41, 42, .22);
}

/* ---------- Felder auf der Produktseite ---------- */
.jsa-felder { margin: 0 0 1.25rem; display: grid; gap: .6rem; }
.jsa-felder__hinweis { margin: 0 0 .15rem; font-size: .92rem; color: var(--jsa-text-leise); }
.jsa-feld {
  position: relative; display: grid; grid-template-columns: 64px 1fr auto; align-items: center; gap: .85rem;
  padding: .7rem .8rem; border: 1.5px solid var(--jsa-linie); border-radius: var(--jsa-rund); background: var(--jsa-papier);
  transition: border-color .2s, box-shadow .2s;
}
.jsa-feld--gewaehlt { border-color: var(--jsa-akzent); }
.jsa-feld--fehlt { border-color: #c0392b; box-shadow: 0 0 0 3px rgba(192, 57, 43, .12); }
.jsa-feld__bild { width: 64px; height: 64px; border-radius: 10px; overflow: hidden; background: var(--jsa-creme); flex-shrink: 0; }
.jsa-feld__bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.jsa-feld__text { display: grid; gap: .1rem; min-width: 0; }
.jsa-feld__titel { font-weight: 700; color: var(--jsa-text); font-size: .95rem; }
.jsa-feld__titel .required { color: var(--jsa-akzent); text-decoration: none; border: 0; }
.jsa-feld__name { font-size: .9rem; color: var(--jsa-text-leise); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jsa-feld--gewaehlt .jsa-feld__name { color: var(--jsa-text); }
.jsa-felder .jsa-feld__knopf {
  appearance: none; margin: 0; line-height: 1.3; height: auto; min-height: 0; box-shadow: none; text-transform: none; letter-spacing: 0; border: 1.5px solid var(--jsa-akzent); background: transparent; color: var(--jsa-akzent) !important;
  font: inherit; font-weight: 700; font-size: .9rem; padding: .55rem .95rem; border-radius: 999px; cursor: pointer; white-space: nowrap;
  transition: background .2s, color .2s;
}
.jsa-felder .jsa-feld__knopf:hover, .jsa-felder .jsa-feld__knopf:focus-visible { background: var(--jsa-akzent); color: #fff !important; }
.jsa-felder .jsa-feld__entfernen {
  position: absolute; top: -9px; right: -9px; width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--jsa-linie);
  background: var(--jsa-papier); color: var(--jsa-text-leise) !important; font: inherit; font-size: 1rem; line-height: 1; cursor: pointer; padding: 0;
}
.jsa-felder .jsa-feld__entfernen:hover { color: #c0392b !important; border-color: #c0392b; }
.jsa-fehler { margin: 0; padding: .6rem .85rem; border-radius: 10px; background: #fdecea; color: #8a2a20; font-size: .9rem; }

@media (max-width: 560px) {
  .jsa-feld { grid-template-columns: 56px 1fr; }
  .jsa-feld__bild { width: 56px; height: 56px; }
  .jsa-feld__knopf { grid-column: 1 / -1; width: 100%; text-align: center; padding: .7rem 1rem; }
}

/* ---------- Galerie (Schicht + Fenster) ---------- */
.jsa-schicht {
  position: fixed; inset: 0; z-index: 100000; background: rgba(51, 41, 42, .55); backdrop-filter: blur(2px);
  display: flex; align-items: center; justify-content: center; padding: 1.5rem;
  animation: jsa-einblenden .18s ease-out;
}
.jsa-schicht[hidden] { display: none; }
@keyframes jsa-einblenden { from { opacity: 0 } to { opacity: 1 } }
@keyframes jsa-hoch { from { transform: translateY(24px); opacity: .6 } to { transform: none; opacity: 1 } }
.jsa-galerie {
  width: min(960px, 100%); max-height: min(88vh, 900px); display: flex; flex-direction: column;
  background: var(--jsa-creme); color: var(--jsa-text); border-radius: 20px; box-shadow: var(--jsa-schatten); overflow: hidden;
  animation: jsa-hoch .22s ease-out; outline: none;
}
.jsa-galerie__kopf { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.25rem .75rem; }
.jsa-galerie__titel { margin: 0; font-size: 1.35rem; font-family: var(--schrift-titel, inherit); }
.jsa-schicht .jsa-galerie__zu {
  appearance: none; border: 0; margin: 0; min-height: 0; background: var(--jsa-papier); width: 40px; height: 40px; border-radius: 50%; font-size: 1.5rem; line-height: 1;
  cursor: pointer; color: var(--jsa-text) !important; box-shadow: 0 1px 4px rgba(0,0,0,.08); padding: 0;
}
.jsa-galerie__werkzeuge { padding: 0 1.25rem .85rem; display: grid; gap: .6rem; border-bottom: 1px solid var(--jsa-linie); }
.jsa-suche { display: block; margin: 0; }
.jsa-suche input {
  width: 100%; box-sizing: border-box; padding: .7rem 1rem; border: 1.5px solid var(--jsa-linie); border-radius: 999px; background: var(--jsa-papier);
  font: inherit; font-size: 1rem; color: var(--jsa-text); outline: none;
}
.jsa-suche input:focus { border-color: var(--jsa-akzent); }
.jsa-chips { display: flex; gap: .4rem; overflow-x: auto; padding-bottom: .2rem; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
.jsa-chips:empty { display: none; }
.jsa-schicht .jsa-chip {
  appearance: none; margin: 0; line-height: 1.3; height: auto; min-height: 0; box-shadow: none; text-transform: none; letter-spacing: 0; flex-shrink: 0; border: 1.5px solid var(--jsa-linie); background: var(--jsa-papier); color: var(--jsa-text) !important;
  font: inherit; font-size: .85rem; padding: .35rem .8rem; border-radius: 999px; cursor: pointer; white-space: nowrap;
}
.jsa-schicht .jsa-chip[aria-pressed="true"] { background: var(--jsa-akzent); border-color: var(--jsa-akzent); color: #fff !important; }
.jsa-chip__anzahl { opacity: .6; font-size: .78em; margin-left: .25em; }
.jsa-galerie__inhalt { overflow-y: auto; padding: 1rem 1.25rem 1.25rem; overscroll-behavior: contain; }
.jsa-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .8rem; }
.jsa-schicht .jsa-stoff {
  appearance: none; border: 2px solid transparent; margin: 0; line-height: 1.3; height: auto; min-height: 0; box-shadow: none; text-transform: none; letter-spacing: 0; background: var(--jsa-papier); border-radius: 14px; padding: 0; cursor: pointer; text-align: left;
  overflow: hidden; display: grid; gap: 0; font: inherit; color: var(--jsa-text) !important; position: relative; transition: transform .15s, border-color .15s, box-shadow .15s;
}
.jsa-schicht .jsa-stoff:hover, .jsa-schicht .jsa-stoff:focus-visible { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(51,41,42,.12); border-color: var(--jsa-linie); outline: none; }
.jsa-schicht .jsa-stoff[aria-pressed="true"] { border-color: var(--jsa-akzent); box-shadow: 0 0 0 3px var(--jsa-akzent-zart); }
.jsa-stoff__bild { aspect-ratio: 1; background: var(--jsa-creme); }
.jsa-stoff__bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.jsa-stoff__name { padding: .55rem .65rem .65rem; font-size: .86rem; line-height: 1.3; font-weight: 600; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.jsa-stoff__haken {
  position: absolute; top: .5rem; right: .5rem; width: 26px; height: 26px; border-radius: 50%; background: var(--jsa-akzent); color: #fff;
  display: none; align-items: center; justify-content: center; font-size: .9rem; font-weight: 700; box-shadow: 0 1px 4px rgba(0,0,0,.2);
}
.jsa-stoff[aria-pressed="true"] .jsa-stoff__haken { display: flex; }
.jsa-galerie__status { text-align: center; color: var(--jsa-text-leise); font-size: .9rem; margin: 1rem 0 0; }
.jsa-galerie__status:empty { display: none; }
.jsa-schicht .jsa-galerie__mehr {
  display: block; line-height: 1.3; height: auto; min-height: 0; box-shadow: none; text-transform: none; margin: 1rem auto 0; appearance: none; border: 1.5px solid var(--jsa-akzent); background: transparent; color: var(--jsa-akzent) !important;
  font: inherit; font-weight: 700; padding: .6rem 1.4rem; border-radius: 999px; cursor: pointer;
}
.jsa-galerie__mehr[hidden] { display: none; }
.jsa-schicht .jsa-galerie__mehr:hover { background: var(--jsa-akzent); color: #fff !important; }
.jsa-skelett { border-radius: 14px; background: linear-gradient(90deg, var(--jsa-papier) 25%, var(--jsa-akzent-zart) 50%, var(--jsa-papier) 75%); background-size: 200% 100%; animation: jsa-schimmer 1.2s infinite; aspect-ratio: 1 / 1.3; }
@keyframes jsa-schimmer { from { background-position: 200% 0 } to { background-position: -200% 0 } }
body.jsa-offen { overflow: hidden; }

/* Handy: als Schublade von unten, fast bildschirmfüllend */
@media (max-width: 720px) {
  .jsa-schicht { padding: 0; align-items: flex-end; }
  .jsa-galerie { width: 100%; max-height: 94vh; height: 94vh; border-radius: 22px 22px 0 0; }
  .jsa-galerie__kopf { padding: .85rem 1rem .5rem; }
  .jsa-galerie__kopf::before { content: ""; position: absolute; top: 8px; left: 50%; width: 40px; height: 4px; border-radius: 2px; background: var(--jsa-linie); transform: translateX(-50%); }
  .jsa-galerie { position: relative; }
  .jsa-galerie__werkzeuge, .jsa-galerie__inhalt { padding-left: 1rem; padding-right: 1rem; }
  .jsa-raster { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: .6rem; }
}
@media (prefers-reduced-motion: reduce) { .jsa-schicht, .jsa-galerie, .jsa-stoff { animation: none; transition: none; } }

/* ---------- Warenkorb / Kasse ---------- */
.jsa-mini { display: inline-flex; align-items: center; gap: .4rem; vertical-align: middle; }
.jsa-mini img { width: 28px; height: 28px; border-radius: 6px; object-fit: cover; }

/* Sicherheitsnetz: manche Themes setzen display auf Buttons – hidden muss gewinnen. */
.jsa-felder [hidden], .jsa-schicht [hidden], .jsa-schicht[hidden] { display: none !important; }

/* Hover/Fokus-Zustände: Reset-Farben der Themes (z. B. magenta) neutralisieren */
.jsa-schicht .jsa-stoff:hover, .jsa-schicht .jsa-stoff:focus, .jsa-schicht .jsa-stoff:focus-visible { background: var(--jsa-papier); color: var(--jsa-text) !important; }
.jsa-schicht .jsa-chip:hover, .jsa-schicht .jsa-chip:focus { background: var(--jsa-akzent-zart); color: var(--jsa-text) !important; border-color: var(--jsa-akzent); }
.jsa-schicht .jsa-chip[aria-pressed="true"]:hover, .jsa-schicht .jsa-chip[aria-pressed="true"]:focus { background: var(--jsa-akzent-dunkel); color: #fff !important; }
.jsa-schicht .jsa-galerie__zu:hover, .jsa-schicht .jsa-galerie__zu:focus { background: var(--jsa-akzent-zart); color: var(--jsa-text) !important; }
.jsa-felder .jsa-feld__entfernen:focus { background: var(--jsa-papier); }
.jsa-schicht .jsa-suche input:focus { box-shadow: 0 0 0 3px var(--jsa-akzent-zart); }