/* Grid view prototype. Layered on top of style.css, which supplies the
   design tokens, topbar, filter chips and dialog styling. Only the
   product presentation differs, so nothing here overrides the list view. */

.grid-page {
  --card-min: 220px;
  padding-bottom: 88px; /* clears the sticky cart bar */
}

/* ==================================================
   TOOLBAR
   ================================================== */

.grid-toolbar {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.grid-toolbar #search {
  flex: 1 1 240px;
  max-width: 360px;
  margin: 0;
}

.sort-control,
.size-control {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 600;
}

.sort-control select {
  padding: 9px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card-bg);
  color: var(--text);
  font: inherit;
  font-size: 14px;
}

.size-control input[type="range"] { width: 110px; accent-color: var(--accent); }

.result-count { color: var(--text-muted); font-size: 13px; }

.grid-toolbar .reset-cart { margin-left: auto; }

/* Weg aus der Startauswahl in den vollen Katalog. Farblich abgesetzt,
   weil er erklaert, warum weniger Produkte zu sehen sind. */
.show-all-products {
  border-color: var(--accent);
  color: var(--accent);
  font-weight: 600;
}

.show-all-products:hover { background: var(--accent-soft); }

/* Steht der Knopf da, gehoert "Warenkorb löschen" trotzdem ganz nach
   rechts - sonst schoebe er sich dazwischen. */
.grid-toolbar .show-all-products { margin-left: 8px; }

/* Flyer: Knopf in der Warenkorbleiste und der Dialog dazu. */
.flyer-button {
  border-color: var(--accent);
  color: var(--accent);
  font-weight: 600;
  white-space: nowrap;
}

.flyer-button:hover { background: var(--accent-soft); }

.flyer-dialog {
  width: min(600px, calc(100vw - 32px));
  padding: 24px 26px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--card-bg);
  color: var(--text);
}

.flyer-dialog::backdrop { background: rgba(0, 0, 0, 0.45); }

.flyer-dialog h2 { margin: 0 0 6px; font-size: 19px; }

.flyer-dialog > form > p {
  margin: 0 0 18px;
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.5;
}

/* Zwei Spalten, damit der Dialog ohne Scrollen auf den Schirm passt.
   Lange Felder wie Titel und Setname bekommen die volle Breite. */
.flyer-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 14px;
}

.flyer-wide { grid-column: 1 / -1; }

.flyer-field { display: block; }

.flyer-field span {
  display: block;
  margin-bottom: 5px;
  font-size: 12.5px;
  font-weight: 600;
}

.flyer-field input,
.flyer-field select {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #fff;
  color: var(--text);
  font: inherit;
}

/* Die beiden Schalter stehen bewusst ausserhalb von .flyer-grid: sie
   beschreiben nicht das Produkt, sondern welche Bausteine der Flyer
   bekommt. Eine eigene Zeile trennt das sichtbar von den Eingaben. */
.flyer-schalter {
  display: flex;
  gap: 22px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

.flyer-schalter-feld {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.flyer-schalter-feld input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--accent);
}

.flyer-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 20px;
}

/* Rueckmeldung zum Kopieren - Erfolg ruhig, Fehler rot. */
.flyer-hinweis {
  margin: 12px 0 0;
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.45;
  text-align: right;
}

.flyer-hinweis.is-error { color: var(--accent); }

@media (max-width: 560px) {
  .flyer-grid { grid-template-columns: 1fr; }
  .flyer-actions { flex-wrap: wrap; }
}

/* Weg zur Haupttabelle. Als Link gebaut, nicht als Knopf - damit
   Mittelklick und "in neuem Tab oeffnen" funktionieren. */
.sheet-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #128a4c;
  text-decoration: none;
}

.sheet-link:hover { border-color: #128a4c; background: #eaf7f0; }

.sheet-icon { width: 15px; height: 15px; flex: 0 0 15px; }

/* Admin-only actions, kept on their own row so they don't crowd the
   search and sort controls customers use. */
.admin-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 16px;
  padding: 12px 14px;
  border: 1px solid #d7e2eb;
  border-radius: 10px;
  background: #f4faff;
}

.admin-bar .order-action { margin-left: auto; }

/* Verkaufspreisrechner. Eigene Regel statt .order-action, weil er nicht
   nach rechts rutschen darf - er gehoert zu den Tabellen-Links links
   daneben. Schmalere Felder: es sind Betraege, keine Adressen. */
.admin-bar .sales-calc {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.admin-bar .sales-calc input {
  width: 170px;
  padding: 9px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font: inherit;
}

.admin-bar .admin-logout { text-align: center; text-decoration: none; }

/* ==================================================
   CARDS
   ================================================== */

.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--card-min), 1fr));
  gap: 16px;
  align-items: stretch;
}

.product-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--card-bg);
  overflow: hidden;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.product-card:hover {
  border-color: #cdd8e4;
  box-shadow: 0 6px 18px rgba(31, 36, 48, 0.09);
  transform: translateY(-2px);
}

/* Anything in the cart reads at a glance, which a flat grid otherwise loses. */
.product-card.has-qty {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent) inset;
}

.card-media {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  padding: 10px;
  background: var(--header-bg);
  border-bottom: 1px solid var(--border);
}

/* Beats the 48px thumbnail sizing that style.css gives .product-image-button. */
.card-image-button.product-image-button {
  width: 100%;
  height: 100%;
  border: 0;
  background: transparent;
}

.card-media-empty,
.card-image-button.image-unavailable::after {
  color: var(--text-muted);
  font-size: 12px;
}

/* Gold statt Markenrot: ein rotes Abzeichen liest sich wie eine Warnung. */
/* Nur in der Adminansicht: Produkt aus dem Katalog entfernen. */
.card-delete {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  cursor: pointer;
  font-size: 17px;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}

.card-delete:hover { background: #8a171c; }

.card-delete:disabled { cursor: wait; opacity: 0.5; }

/* Weicht dem Loeschknopf aus, wenn beide oben rechts sitzen. */
.admin-view .sale-badge { right: 38px; }

.ship-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--gold);
  color: #2a1f00;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.card-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px 4px;
}

.card-title {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;
  /* Two lines keeps every card the same height regardless of name length. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card-chips { display: flex; flex-wrap: wrap; gap: 6px; }

.chip {
  padding: 2px 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--header-bg);
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 600;
}

.chip-cat { border-color: #d7e2eb; background: #f4faff; color: #24415f; }

/* Only rendered when the sheet's Release column holds a date. */
.chip-release {
  border-color: #e6d7a7;
  background: #fff9e8;
  color: #785700;
  white-space: nowrap;
}

.card-price { margin-top: auto; padding-top: 4px; }

.net-price {
  display: block;
  color: var(--text);
  font-size: 18px;
  font-weight: 700;
}

/* Reduzierter Preis: alter Wert durchgestrichen darueber, neuer in Rot. */
.net-price-old {
  display: block;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 600;
  text-decoration: line-through;
}

.net-price-old:empty { display: none; }

.net-price.is-reduced { color: var(--accent); }

.sale-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.chip-margin {
  border-color: #e6d7a7;
  background: var(--gold-soft);
  color: #785700;
  white-space: nowrap;
}

/* Aktionshinweis (Special1) - Kundenvorteil, daher in beiden Ansichten. */
.chip-offer {
  border-color: #bfe3cf;
  background: #eefaf3;
  color: #1f6b46;
  font-weight: 700;
  /* Darf umbrechen - der Text ist laenger als bei den uebrigen Chips. */
  white-space: normal;
  line-height: 1.35;
}

/* Mindestabnahme als Band ueber die volle Bildbreite: eine Einschraenkung
   der Bestellbarkeit soll man nicht uebersehen koennen. */
.minimum-banner {
  position: absolute;
  inset: auto 0 0 0;
  padding: 5px 8px;
  background: var(--accent);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.card-price-label {
  display: block;
  color: var(--text-muted);
  font-size: 11px;
}

.card-admin {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--border);
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 600;
}

/* Wraps rather than overflows: with both Cardmarket and eBay next to the
   stepper, a narrow tile would otherwise push a link out of sight. */
.card-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 14px 12px;
}

.qty-stepper {
  display: flex;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}

.qty-step {
  width: 30px;
  height: 32px;
  border: 0;
  background: var(--header-bg);
  color: var(--text);
  cursor: pointer;
  font-size: 17px;
  line-height: 1;
}

.qty-step:hover { background: var(--accent-soft); color: var(--accent); }

/* Overrides the list view's right-aligned 64px input. */
.qty-stepper .qty-input {
  width: 46px;
  height: 32px;
  border: 0;
  border-left: 1px solid var(--border);
  border-right: 1px solid var(--border);
  border-radius: 0;
  text-align: center;
  -moz-appearance: textfield;
}

.qty-stepper .qty-input::-webkit-outer-spin-button,
.qty-stepper .qty-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.card-cm { display: flex; align-items: center; gap: 6px; }

.card-cm .cm-link {
  display: inline-flex;
  padding: 3px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #fff;
  line-height: 0;
}

.card-cm .cm-link:hover { border-color: #1767aa; background: #f4faff; }

.cm-logo {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

.card-cm .ebay-link { padding: 5px 6px; }

/* Nur bei Singles (NM): oeffnet die Zustandsdefinition. */
.card-cm .nm-info {
  align-items: center;
  height: 30px;
  padding: 0 10px;
  color: var(--text-muted);
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.card-cm .nm-info:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
}

/* ---------- NM-Definition ---------- */

.nm-dialog { width: min(94vw, 660px); max-height: 88vh; overflow-y: auto; }

.nm-dialog h2 { margin: 0 0 14px; font-size: 20px; }

.nm-dialog p { margin: 0 0 14px; color: var(--text); font-size: 14px; line-height: 1.6; }

.nm-lead { font-weight: 700; }

.nm-list { margin: 0 0 16px; }

.nm-list dt {
  margin-top: 12px;
  color: var(--accent);
  font-size: 14px;
  font-weight: 700;
}

.nm-list dd {
  margin: 3px 0 0;
  color: var(--text-muted);
  font-size: 13.5px;
  line-height: 1.55;
}

.nm-note,
.nm-summary {
  padding: 12px 14px;
  border-radius: 8px;
  font-size: 13.5px;
}

.nm-note { background: var(--gold-soft); border: 1px solid #e6d7a7; color: #6b4f00; }

.nm-summary {
  margin-bottom: 0;
  border: 1px solid #f0cdcd;
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 600;
}

.card-cm .ebay-link:hover { border-color: #0968f6; background: #f2f8ff; }

/* Official wordmark, 1000x401 - sized by height so the aspect ratio holds. */
.ebay-logo {
  width: auto;
  height: 16px;
  object-fit: contain;
}

.grid-empty {
  padding: 40px 0;
  color: var(--text-muted);
  font-size: 14px;
  text-align: center;
}

/* ==================================================
   STICKY CART BAR
   ================================================== */

.cart-bar {
  position: fixed;
  inset: auto 0 0 0;
  border-top: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 -4px 18px rgba(31, 36, 48, 0.09);
}

.cart-bar-inner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  padding: 14px 24px;
  font-size: 14px;
}

/* Schiebt Zusammenfassung und Hauptaktion nach rechts. */
.cart-spacer { flex: 1 1 auto; }

/* ---------- Coupon ---------- */

.coupon-form { display: flex; align-items: center; gap: 8px; }

.coupon-input {
  width: 150px;
  padding: 9px 11px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card-bg);
  font: inherit;
  font-size: 14px;
}

.coupon-input:focus { outline: none; border-color: var(--accent); }

.coupon-apply { padding: 9px 14px; }

.coupon-status {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
}

.coupon-status.is-valid { color: #1f6b46; }
.coupon-status.is-invalid { color: var(--accent); }

.coupon-remove {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  text-decoration: underline;
}

.cart-count { color: var(--text-muted); }

/* The Endpreis doubles as the trigger for the calculation dialog. */
.cart-total {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 10px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: none;
  color: inherit;
  cursor: pointer;
  font: inherit;
}

.cart-total:hover {
  border-color: var(--border);
  background: var(--header-bg);
}

.cart-total strong { font-size: 17px; }

.cart-total-hint { color: var(--text-muted); font-size: 11px; }

/* ==================================================
   CALCULATION DIALOG
   ================================================== */

/* Breit genug fuer die langen Produktnamen. Senkrecht darf gescrollt
   werden, waagerecht nicht - dafuer brechen die Namen unten um. */
.calc-dialog {
  width: min(96vw, 1080px);
  max-height: 88vh;
  overflow-y: auto;
}

.calc-items {
  width: 100%;
  margin-bottom: 18px;
  border-collapse: collapse;
  font-size: 13px;
}

.calc-items th,
.calc-items td {
  padding: 7px 10px;
  border-bottom: 1px solid var(--border);
  text-align: left;
}

.calc-items th {
  color: var(--text-muted);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.calc-items .numeric { text-align: right; white-space: nowrap; }

/* Produktnamen sind lang und enthalten Klammerbloecke ohne Leerzeichen.
   Ohne Umbruch schob die Tabelle den Dialog seitlich auf.

   white-space muss dabei mit zurueckgesetzt werden: die globale Regel
   tbody td { white-space: nowrap } verbietet sonst jeden Umbruch, und
   overflow-wrap allein bleibt wirkungslos. */
.calc-items td:first-child {
  white-space: normal;
  overflow-wrap: anywhere;
}

/* Der Umbruchschutz fuer den Betrag steht in style.css - die
   Angebotsseite hat dieselbe Zeilenstruktur. */
.calc-summary {
  max-width: 480px;
  margin-left: auto;
}

.calc-empty {
  padding: 12px 0;
  color: var(--text-muted);
  font-size: 14px;
}

/* ==================================================
   WILLKOMMEN / HOW TO ORDER
   ================================================== */

/* VietMint: dunkler Grund, Rot/Gold-Akzente, Serif-Headlines. */
.welcome-dialog {
  --wm-red: #af1e24;
  --wm-gold: #d2a32b;
  --wm-teal: #3ec9a0;
  --wm-ink: #16130f;
  --wm-panel: #1e1a16;
  --wm-text: #e9e4dc;
  --wm-muted: #a29a90;

  width: min(94vw, 600px);
  max-height: 92vh;
  padding: 0;
  border: 0;
  border-radius: 16px;
  background: transparent;
  color: var(--wm-text);
  overflow: hidden;
}

.welcome-dialog::backdrop { background: rgba(10, 8, 6, 0.82); }

.welcome-scroll {
  display: grid;
  gap: 20px;
  max-height: 92vh;
  padding: 4px;
  overflow-y: auto;
}

.wm-panel {
  border-radius: 14px;
  background: var(--wm-ink);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}

/* ---------- Hero ---------- */

.wm-hero {
  padding: 26px 26px 22px;
  text-align: center;
}

/* Strahlenkranz wie in der Vorlage. */
.wm-hero-red {
  background:
    repeating-conic-gradient(from 0deg at 50% 0%,
      rgba(255, 255, 255, 0.07) 0deg 3deg, rgba(255, 255, 255, 0) 3deg 6deg),
    linear-gradient(180deg, #c9302f 0%, #a81f26 100%);
}

.wm-hero-dark {
  background:
    radial-gradient(120% 130% at 78% 0%, rgba(216, 167, 42, 0.22) 0%, rgba(216, 167, 42, 0) 55%),
    linear-gradient(180deg, #1c1813 0%, #14110d 100%);
}

.wm-logo {
  display: block;
  width: 64px;
  height: 64px;
  margin: 0 auto 10px;
  border-radius: 50%;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

.wm-brand {
  margin: 0 0 12px;
  padding-bottom: 11px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.22);
  color: #fff;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.wm-kicker {
  margin: 0 0 12px;
  color: #f7d98a;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.wm-kicker-gold { color: var(--wm-gold); }

.wm-hero h1,
.wm-hero h2 {
  margin: 0 0 10px;
  color: #fff;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(28px, 6.4vw, 40px);
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.1;
}

.wm-sub {
  margin: 0;
  color: rgba(255, 255, 255, 0.82);
  font-size: 13px;
  line-height: 1.45;
}

.wm-hero-dark .wm-sub { color: var(--wm-muted); }

/* ---------- Body ---------- */

.wm-body { padding: 22px 26px 24px; }

/* Aufhaenger: direkte Ansprache, groesser als der Fliesstext darunter. */
.wm-hook {
  margin: 0 0 14px;
  color: #fff;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.45;
}

.wm-hook strong { color: var(--wm-gold); font-weight: 800; }

.wm-intro {
  margin: 0 0 18px;
  color: #cdc5bb;
  font-size: 14px;
  line-height: 1.65;
}

.wm-intro strong { color: #fff; font-weight: 700; }

/* ---------- Schritte ---------- */

.wm-steps {
  display: grid;
  gap: 10px;
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
}

.wm-step {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  padding: 13px 15px;
  border-left: 3px solid var(--wm-red);
  border-radius: 8px;
  background: var(--wm-panel);
}

.wm-step-gold { border-left-color: var(--wm-gold); }
.wm-step-teal { border-left-color: var(--wm-teal); }

.wm-step-no {
  flex: 0 0 26px;
  height: 26px;
  border-radius: 6px;
  background: var(--wm-red);
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  line-height: 26px;
  text-align: center;
}

.wm-step-gold .wm-step-no { background: var(--wm-gold); color: #2a1f00; }
.wm-step-teal .wm-step-no { background: var(--wm-teal); color: #08251c; }

.wm-step-text { min-width: 0; }

.wm-step-text h3 {
  margin: 0 0 4px;
  color: #fff;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.2;
}

.wm-step-text p {
  margin: 0;
  color: var(--wm-muted);
  font-size: 13px;
  line-height: 1.55;
}

.wm-step-text code {
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(216, 167, 42, 0.16);
  color: #f0c760;
  font-size: 12px;
}

.wm-note {
  margin: 0 0 16px;
  color: #7f776e;
  font-size: 12.5px;
  line-height: 1.55;
}

/* ---------- Zahlung ---------- */

.wm-pay {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 18px;
  padding: 12px 15px;
  border: 1px solid rgba(216, 167, 42, 0.35);
  border-radius: 8px;
  background: rgba(216, 167, 42, 0.07);
}

.wm-pay-text { display: grid; gap: 2px; }

.wm-pay-label {
  color: var(--wm-gold);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.wm-pay-methods { color: #fff; font-size: 14px; font-weight: 700; }

.wm-pay-logos { display: flex; align-items: center; gap: 8px; }

/* Beide Marken sind dunkel auf hell gezeichnet und braeuchten auf dem
   dunklen Panel sonst keinen Kontrast - daher helle Plaketten. */
.wm-pay-chip {
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 10px;
  border-radius: 6px;
  background: #fff;
}

/* Inline-SVGs brauchen feste Masse, sie haben kein intrinsisches. */
.wm-pay-logo { display: block; height: 15px; }
.wm-pay-paypal { width: 56px; }
.wm-pay-sofort { width: 42px; }

/* ---------- Checkliste ---------- */

.wm-checks {
  display: grid;
  gap: 9px;
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
}

.wm-checks li {
  padding-left: 24px;
  color: #cdc5bb;
  font-size: 13px;
  /* Eigene Zeilenhöhe: der Umbruch langer Punkte darf nicht kollidieren. */
  line-height: 1.55;
  background-image: none;
  position: relative;
}

.wm-checks li::before {
  position: absolute;
  top: 0;
  left: 2px;
  color: var(--wm-teal);
  content: "✓";
  font-weight: 800;
  line-height: 1.55;
}

.wm-checks strong { color: #fff; font-weight: 700; }

/* Preorder-Block: gleiche Zielgruppe, daher kein eigenes Panel mehr -
   nur als abgesetzter Abschnitt mit goldenem Rand. */
.wm-preorder {
  margin: 0 0 16px;
  padding: 16px 16px 14px;
  border: 1px solid rgba(216, 167, 42, 0.32);
  border-radius: 10px;
  background:
    radial-gradient(120% 130% at 85% 0%, rgba(216, 167, 42, 0.13) 0%, rgba(216, 167, 42, 0) 60%),
    var(--wm-panel);
}

.wm-preorder-tag {
  display: inline-block;
  margin-bottom: 9px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--wm-teal);
  color: #08251c;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.wm-preorder h2 {
  margin: 0 0 8px;
  color: #fff;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 21px;
  font-weight: 700;
  line-height: 1.15;
}

.wm-preorder > p {
  margin: 0 0 12px;
  color: #cdc5bb;
  font-size: 13px;
  line-height: 1.55;
}

.wm-preorder .wm-checks { margin-bottom: 0; }

/* ---------- CTA ---------- */

.wm-cta {
  display: block;
  width: 100%;
  padding: 15px 18px;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  font: inherit;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.wm-cta-red { background: var(--wm-red); color: #fff; }
.wm-cta-red:hover { background: #d6353a; }

.wm-cta-gold { background: var(--wm-gold); color: #2a1f00; }
.wm-cta-gold:hover { background: #e8b73c; }

/* Kleiner Wiederöffnen-Knopf in der Kopfzeile. */
.info-button {
  padding: 5px 11px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--card-bg);
  color: var(--text-muted);
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
}

.info-button:hover { border-color: var(--accent); color: var(--accent); }

/* WhatsApp-Community, in Markenfarbe von WhatsApp. */
.wa-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px 5px 9px;
  border: 1px solid #a9e6bf;
  border-radius: 999px;
  background: #eefaf2;
  color: #12784a;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
}

.wa-link:hover { border-color: #25d366; background: #e2f7ea; }

.wa-logo { width: 15px; height: 15px; color: #25d366; }

/* Gleiche Form wie der WhatsApp-Knopf, nur in Discord-Blau. Die
   Aussparungen im Zeichen sind auf diesen Hintergrund abgestimmt. */
.dc-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px 5px 9px;
  border: 1px solid #c3c9fb;
  border-radius: 999px;
  background: #eef0fe;
  color: #3b45c4;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
}

.dc-link:hover { border-color: #5865f2; background: #e4e7fd; }

.dc-logo { width: 16px; height: 16px; color: #5865f2; }

@media (max-width: 760px) {
  .grid-page { --card-min: 150px; }
  /* Platz fuer die feste Warenkorbleiste. Sie ist jetzt 154px hoch;
     mit 210px blieb darunter ein leerer Streifen stehen. */
  .grid-page { padding-bottom: 172px; }
  .wm-hero { padding: 20px 18px 18px; }
  .wm-body { padding: 18px 18px 20px; }
  .grid-toolbar { align-items: stretch; gap: 10px; }
  .grid-toolbar #search { flex-basis: 100%; max-width: none; }
  .sort-control { flex: 1 1 100%; justify-content: space-between; }
  .sort-control select { min-width: 0; }
  .result-count { align-self: center; }
  .product-grid { gap: 10px; }
  .product-card { border-radius: 8px; }
  .card-body { padding: 10px 10px 2px; }
  .card-actions { padding: 8px 10px 10px; }

  /* Plus und Minus sind die meistgenutzten Knoepfe der Seite. Mit
     30x32px trifft man mit dem Daumen daneben - hier auf Fingerbreite. */
  .qty-step { width: 40px; height: 40px; }
  .qty-stepper .qty-input { height: 40px; }
  /* "Warenkorb löschen" ist eine Ausnahme-Aktion und stand als breitester
     Knopf der Seite ueber dem ersten Produkt. Er rueckt nach rechts und
     bekommt die Groesse, die er braucht - nicht mehr.
     Das flex:1 aus style.css muss dafuer ausdruecklich zurueck. */
  .grid-toolbar .reset-cart {
    flex: 0 0 auto;
    width: auto;
    margin-left: auto;
    padding: 8px 12px;
    font-size: 13px;
  }
  .size-control { display: none; }
  /* Die Leiste liegt fest ueber dem Inhalt. Vorher belegte sie vier
     Zeilen und damit ein Viertel des Bildschirms, weil jeder Knopf eine
     eigene bekam. Jetzt drei Zeilen, und die wichtigste Angabe - Anzahl
     und Endpreis - steht direkt ueber dem Knopf, der sie ausloest. */
  .cart-bar-inner {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "gutschein gutschein"
      "anzahl    summe"
      "aktion    aktion";
    align-items: center;
    gap: 8px 10px;
    padding: 10px 14px;
  }
  .cart-bar-inner .coupon-form { grid-area: gutschein; width: 100%; }
  .cart-bar-inner .coupon-status { grid-column: 1 / -1; }
  .cart-bar-inner .cart-count { grid-area: anzahl; }
  .cart-bar-inner .cart-total { grid-area: summe; }
  .cart-bar-inner .generate-quote { grid-area: aktion; }

  /* "Warenkorb löschen" steht zweimal auf der Seite - in der Werkzeug-
     leiste und hier. Auf dem Handy nimmt die zweite Ausgabe der Summe
     den Platz weg, sodass "604,91 €" umbrach. Sie entfaellt; die
     Aufraeum-Aktion bleibt oben in der Werkzeugleiste erreichbar. */
  .cart-bar-inner .reset-cart { display: none; }

  .coupon-input { flex: 1 1 auto; min-width: 0; width: auto; }
  .cart-spacer { display: none; }

  .cart-total {
    justify-content: flex-end;
    min-width: 0;
    padding-right: 0;
    white-space: nowrap;
  }
  .calc-items { display: block; overflow-x: auto; }
}