/* css/shop.css — Oeffentliches Schaufenster /shop (Marketplace Tranche F + direktverkauf 1 B2).
   Self-hosted (CSP style-src 'self'). Geteilt von shop.php (Grid) + shop_article.php (Detail).
   Mobile-first (Konv #40). Palette abgestimmt aufs Admin-Farbsystem "Cool Slate"
   (farbsystem-tabs) + Marke VCF MADE #65000B. */

:root {
  --shop-bg:      #f6f8fb;   /* Cool-Slate Mitte (admin-bg) */
  --shop-surface: #ffffff;   /* Karten / Eingaben */
  --shop-tile:    #eef2f7;   /* Bild-Platzhalter (admin-card) */
  --shop-border:  #dde3ea;   /* admin-border */
  --shop-muted:   #5b6675;   /* admin-muted */
  --shop-fg:      #161b22;   /* admin-fg */
  --shop-accent:  #65000B;   /* Marke (vcf-red) */
  --shop-accent-hover: #85101D;
  --shop-accent-dark:  #4A000A;
  --shop-digital: #35657d;   /* Stahlblau (subtab-5) — digitale Produkte */
  --shop-new:     #2f7d4f;   /* Gruen (subtab-7) — "Neu" */
  --shop-price:   #35657d;   /* Stahlblau — Preis (hell-Mode lesbar) */
}

/* kundenview-shell 1 A4 — Dark-Mode (folgt dem Theme-Umschalter; Cool-Slate dunkel,
   identisch zur Admin-/Shell-Palette). Akzent + Badges erben aus :root (themefest). */
:root.dark {
  --shop-bg:      #0b0e12;
  --shop-surface: #161b22;
  --shop-tile:    #20262f;
  --shop-border:  #2c333d;
  --shop-muted:   #97a1ad;
  --shop-fg:      #eef2f6;
  --shop-price:   #8fb3c4;   /* Stahlblau hell — Preis (dunkel-Mode lesbar) */
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--shop-fg);
  background: var(--shop-bg);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }

.shop-wrap { max-width: 1120px; margin: 0 auto; padding: 1.75rem 1rem 3.5rem; }

/* ---- Kopf ---- */
.shop-head { padding: 0.25rem 0 1.5rem; border-bottom: 2px solid var(--shop-accent); margin-bottom: 1.75rem; }
.shop-head h1 {
  font-size: 1.7rem; margin: 0 0 0.3rem; letter-spacing: 0.01em; font-weight: 800;
  color: var(--shop-accent);
}
.shop-head p { margin: 0; color: var(--shop-muted); font-size: 0.95rem; }

/* ---- Filter / Suche ---- */
.shop-search { display: flex; gap: 0.5rem; align-items: center; margin-bottom: 1.1rem; flex-wrap: wrap; }
.shop-search input[type="search"] {
  flex: 1; min-width: 0; padding: 0.65rem 0.85rem; border: 1px solid var(--shop-border);
  border-radius: 0.6rem; font-size: 0.95rem; background: var(--shop-surface); color: var(--shop-fg);
}
.shop-search input[type="search"]:focus { outline: 2px solid var(--shop-accent); outline-offset: 1px; border-color: var(--shop-accent); }
.shop-search button {
  padding: 0.65rem 1.2rem; border: none; border-radius: 0.6rem; background: var(--shop-accent);
  color: #fff; font-weight: 600; cursor: pointer; font-size: 0.95rem;
}
.shop-search button:hover { background: var(--shop-accent-hover); }
.shop-search-clear { font-size: 0.85rem; color: var(--shop-muted); text-decoration: none; white-space: nowrap; }
.shop-search-clear:hover { color: var(--shop-fg); }

/* ---- Kategorie-Chips ---- */
.shop-chips { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-bottom: 1.75rem; }
.shop-chip {
  font-size: 0.85rem; padding: 0.38rem 0.85rem; border-radius: 999px; border: 1px solid var(--shop-border);
  background: var(--shop-surface); color: var(--shop-fg); text-decoration: none; transition: all 0.12s ease;
}
.shop-chip:hover { border-color: var(--shop-accent); color: var(--shop-accent); }
.shop-chip.active { background: var(--shop-accent); color: #fff; border-color: var(--shop-accent); }

/* ---- Grid ---- */
.shop-grid { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }

.shop-card {
  background: var(--shop-surface); border: 1px solid var(--shop-border); border-radius: 0.9rem;
  overflow: hidden; display: flex; flex-direction: column;
  transition: box-shadow 0.16s ease, transform 0.16s ease, border-color 0.16s ease;
}
.shop-card:hover { box-shadow: 0 10px 26px rgba(22,27,34,0.10); transform: translateY(-3px); border-color: #c9d2dc; }
.shop-card-link { display: flex; flex-direction: column; flex: 1; text-decoration: none; color: inherit; }
.shop-card-media { position: relative; }
.shop-card-new {
  position: absolute; top: 0.6rem; left: 0.6rem; z-index: 1; font-size: 0.7rem; font-weight: 700;
  padding: 0.2rem 0.55rem; border-radius: 999px; background: var(--shop-new); color: #fff; letter-spacing: 0.03em;
}
.shop-card-img { aspect-ratio: 1/1; width: 100%; object-fit: cover; background: var(--shop-tile); display: block; }
.shop-card-noimg {
  aspect-ratio: 1/1; width: 100%; background: var(--shop-tile); display: flex; align-items: center;
  justify-content: center; color: var(--shop-muted); font-size: 0.9rem; font-weight: 600; letter-spacing: 0.04em;
}
.shop-card-body { padding: 0.9rem 1rem 0.6rem; display: flex; flex-direction: column; gap: 0.3rem; flex: 1; }
.shop-card-title { font-size: 0.9rem; font-weight: 600; margin: 0; line-height: 1.3; color: var(--shop-fg); }
.shop-card-price { font-size: 1.15rem; font-weight: 800; color: var(--shop-price); display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.5rem; }
.shop-card-ship { font-size: 0.76rem; font-weight: 400; color: var(--shop-muted); }
.shop-card-vat { font-size: 0.76rem; color: var(--shop-muted); }
.shop-card-desc { font-size: 0.85rem; color: var(--shop-muted); margin: 0.25rem 0 0; }
.shop-card-foot { padding: 0 1rem 1rem; margin-top: auto; display: flex; flex-direction: column; gap: 0.55rem; }
.shop-card-tagline { display: flex; align-items: center; gap: 0.5rem; flex-wrap: nowrap; min-width: 0; }
.shop-card-tagline .shop-badge { flex: 0 0 auto; }
.shop-card-tagline .shop-card-ship { min-width: 0; }

/* ---- Badges ---- */
.shop-badges { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.shop-badge {
  font-size: 0.72rem; padding: 0.16rem 0.55rem; border-radius: 999px;
  background: var(--shop-tile); color: var(--shop-muted); border: 1px solid var(--shop-border);
}
.shop-badge-digital { background: #e9f0f5; color: var(--shop-digital); border-color: #c4d6e1; align-self: flex-start; font-weight: 600; }

/* ---- Kauf-Button ---- */
.shop-buy {
  width: 100%; padding: 0.65rem 1rem; border: 0; border-radius: 0.6rem; background: var(--shop-accent);
  color: #fff; font-weight: 600; font-size: 0.92rem; cursor: pointer; transition: background 0.12s ease;
}
.shop-buy:hover { background: var(--shop-accent-hover); }

/* ---- Leerzustand ---- */
.shop-empty {
  background: var(--shop-surface); border: 1px solid var(--shop-border); border-radius: 0.9rem;
  padding: 2.5rem 1.5rem; text-align: center; color: var(--shop-muted); font-size: 0.95rem;
}
.shop-empty strong { display: block; color: var(--shop-fg); font-size: 1.05rem; margin-bottom: 0.4rem; }
.shop-empty a { color: var(--shop-accent); font-weight: 600; }

/* ---- Artikel-/Produkt-Detail ---- */
.shop-back { display: inline-block; margin-bottom: 1.1rem; color: var(--shop-muted); text-decoration: none; font-size: 0.9rem; }
.shop-back:hover { color: var(--shop-accent); }
.shop-article { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 768px) { .shop-article { grid-template-columns: 1fr 1fr; gap: 2.25rem; } }
.shop-article-img { width: 100%; border-radius: 0.9rem; border: 1px solid var(--shop-border); display: block; background: var(--shop-tile); }
.shop-article-noimg {
  aspect-ratio: 1/1; width: 100%; border-radius: 0.9rem; border: 1px solid var(--shop-border);
  background: var(--shop-tile); display: flex; align-items: center; justify-content: center; color: var(--shop-muted);
}
.shop-article-info { display: flex; flex-direction: column; gap: 0.7rem; }
.shop-article-title { font-size: 1.5rem; font-weight: 700; margin: 0; line-height: 1.25; }
.shop-article-price { font-size: 1.6rem; font-weight: 800; color: var(--shop-accent); }
.shop-article-vat { font-size: 0.85rem; color: var(--shop-muted); margin: -0.5rem 0 0; }
.shop-article-desc { font-size: 0.98rem; color: var(--shop-fg); white-space: pre-line; }
.shop-25a {
  font-size: 0.82rem; color: var(--shop-muted); background: var(--shop-tile);
  border: 1px solid var(--shop-border); border-radius: 0.6rem; padding: 0.7rem 0.85rem;
}
.shop-buy-row { margin: 0.3rem 0; }
.shop-buttons { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; }
.shop-also { font-size: 0.82rem; color: var(--shop-muted); margin: 0.4rem 0 0; width: 100%; }
.shop-btn {
  display: inline-block; padding: 0.72rem 1.2rem; border-radius: 0.6rem; background: var(--shop-accent);
  color: #fff; font-weight: 600; text-decoration: none; font-size: 0.95rem; border: 0; cursor: pointer;
}
.shop-btn:hover { background: var(--shop-accent-hover); }
.shop-btn-secondary { background: var(--shop-surface); color: var(--shop-accent); border: 1px solid var(--shop-accent); }
.shop-btn-secondary:hover { background: #f7eaec; color: var(--shop-accent-dark); }
.shop-nolisting { color: var(--shop-muted); font-size: 0.9rem; }
.shop-preview-note { font-size: 0.78rem; color: var(--shop-muted); margin: 0.5rem 0 0; text-align: center; }

/* ---- Mini-Warenkorb (direktverkauf 1 C1) ---- */
/* ---- Mini-Cart: Icon + Popover (direktverkauf 1 O1, ersetzt die fixe Bottom-Bar) ---- */
.cshell-cart { margin-left: auto; flex: 0 0 auto; }                 /* schiebt das Icon ganz nach rechts (Subbar + Detailkopf) */
.shop-detail-head { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.4rem; }
.shop-detail-head .shop-back { margin: 0; }
.shop-cart-widget { display: inline-flex; position: relative; }
.shop-cart-icon { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.38rem 0.6rem; background: var(--shop-surface); color: var(--shop-fg); border: 1px solid var(--shop-border); border-radius: 0.6rem; cursor: pointer; font: inherit; line-height: 1; }
.shop-cart-icon:hover { border-color: var(--shop-accent); color: var(--shop-accent); }
.shop-cart-icon svg { display: block; }
.shop-cart-badge { display: inline-flex; align-items: center; gap: 0.15rem; background: var(--shop-accent); color: #fff; border-radius: 999px; padding: 0.05rem 0.5rem; font-size: 0.78rem; font-weight: 700; white-space: nowrap; }
.shop-cart-pop { position: fixed; z-index: 60; width: min(360px, calc(100vw - 1rem)); }
.shop-cart-panel { background: var(--shop-surface); border: 1px solid var(--shop-border); border-radius: 0.7rem; padding: 0.5rem 0.85rem 0.85rem; box-shadow: 0 12px 32px rgba(22,27,34,0.22); max-height: 70vh; overflow: auto; }
.shop-cart-empty { padding: 0.9rem 0.2rem; text-align: center; color: var(--shop-muted); font-size: 0.9rem; }
.shop-cart-row { display: flex; flex-direction: column; gap: 0.35rem; padding: 0.6rem 0; border-bottom: 1px solid var(--shop-border); }
.shop-cart-name { font-size: 0.9rem; color: var(--shop-fg); }
.shop-cart-tag { font-size: 0.7rem; color: var(--shop-digital); }
.shop-cart-ctrl { display: flex; align-items: center; gap: 0.5rem; }
.shop-cart-qbtn { width: 28px; height: 28px; border: 1px solid var(--shop-border); background: var(--shop-surface); border-radius: 0.4rem; cursor: pointer; font-size: 1rem; line-height: 1; color: var(--shop-fg); }
.shop-cart-qbtn:hover { border-color: var(--shop-accent); }
.shop-cart-qty { min-width: 1.6rem; text-align: center; font-size: 0.9rem; }
.shop-cart-line { margin-left: auto; font-weight: 700; color: var(--shop-accent); font-size: 0.9rem; }
.shop-cart-rm { border: 0; background: transparent; color: var(--shop-muted); cursor: pointer; font-size: 1.15rem; padding: 0 0.2rem; line-height: 1; }
.shop-cart-rm:hover { color: var(--shop-accent); }
.shop-cart-foot { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding-top: 0.7rem; }
.shop-cart-sum { font-size: 0.95rem; color: var(--shop-fg); }
.shop-cart-checkout { padding: 0.6rem 1.1rem; white-space: nowrap; }

/* ---- Kasse (direktverkauf 1 C2) ---- */
.shop-kasse { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
@media (min-width: 880px) { .shop-kasse { grid-template-columns: 1.4fr 1fr; align-items: start; } }
.shop-kasse-box { background: var(--shop-surface); border: 1px solid var(--shop-border); border-radius: 0.8rem; padding: 1.1rem 1.2rem; margin-bottom: 1.1rem; }
.shop-kasse-box h2 { font-size: 1.05rem; margin: 0 0 0.8rem; }
.shop-field { display: block; font-size: 0.82rem; color: var(--shop-muted); margin-bottom: 0.8rem; }
.shop-field input, .shop-field select { display: block; width: 100%; margin-top: 0.3rem; padding: 0.6rem 0.7rem; border: 1px solid var(--shop-border); border-radius: 0.5rem; font-size: 0.95rem; background: var(--shop-surface); color: var(--shop-fg); }
.shop-field input:focus, .shop-field select:focus { outline: 2px solid var(--shop-accent); outline-offset: 1px; border-color: var(--shop-accent); }
.shop-field-hint { font-size: 0.78rem; color: var(--shop-muted); margin: -0.3rem 0 0; }
.shop-grid2 { display: grid; grid-template-columns: 1fr; gap: 0 0.8rem; }
@media (min-width: 520px) { .shop-grid2 { grid-template-columns: 1fr 1fr; } .shop-field-wide { grid-column: 1 / -1; } }
.shop-kasse-items { margin-bottom: 0.6rem; }
.shop-kasse-item { display: flex; justify-content: space-between; gap: 0.75rem; font-size: 0.88rem; padding: 0.4rem 0; border-bottom: 1px solid var(--shop-border); }
.shop-kasse-line { display: flex; justify-content: space-between; font-size: 0.9rem; padding: 0.3rem 0; color: var(--shop-muted); }
.shop-kasse-total { font-size: 1.05rem; font-weight: 700; color: var(--shop-fg); border-top: 1px solid var(--shop-border); margin-top: 0.3rem; padding-top: 0.6rem; }
.shop-kasse-total span:last-child { color: var(--shop-accent); }
.shop-kasse-consent { margin: 0.9rem 0; }
.shop-check { display: flex; gap: 0.55rem; font-size: 0.8rem; color: var(--shop-muted); line-height: 1.4; }
.shop-check input { margin-top: 0.15rem; flex-shrink: 0; }
.shop-kasse-312j { font-size: 0.82rem; color: var(--shop-muted); margin: 0.8rem 0; }
.shop-kasse-error { font-size: 0.85rem; color: #991b1b; background: #fef2f2; border: 1px solid #fecaca; border-radius: 0.5rem; padding: 0.5rem 0.7rem; margin: 0 0 0.6rem; }
.shop-kasse-submit { width: 100%; }
.shop-kasse-note { font-size: 0.78rem; color: var(--shop-muted); text-align: center; margin: 0.5rem 0 0; }
.shop-kasse-empty { background: var(--shop-surface); border: 1px solid var(--shop-border); border-radius: 0.8rem; padding: 2rem 1.5rem; text-align: center; color: var(--shop-muted); }
.shop-kasse-empty strong { display: block; color: var(--shop-fg); margin-bottom: 0.4rem; }
.shop-kasse-empty a { color: var(--shop-accent); font-weight: 600; }

/* ---- Footer ---- */
.shop-footer { margin-top: 3rem; padding-top: 1.25rem; border-top: 1px solid var(--shop-border); display: flex; flex-direction: column; gap: 0.4rem; align-items: center; color: var(--shop-muted); font-size: 0.85rem; }
.shop-footer-nav a { color: var(--shop-muted); text-decoration: none; }
.shop-footer-nav a:hover { color: var(--shop-accent); text-decoration: underline; }
.shop-footer-nav span { margin: 0 0.45rem; }
.shop-footer-copy { color: var(--shop-muted); }

/* ---- 404 ---- */
.shop-404 { text-align: center; padding: 3.5rem 1rem; }
.shop-404 h1 { font-size: 1.6rem; margin: 0 0 0.5rem; }
.shop-404 p { color: var(--shop-muted); margin: 0 0 1.2rem; }