/* ===================================================================
   SHOP - eigene Stile fuer shop.html (Print-Shop Phase 2)

   Diese Datei enthaelt NUR neue Klassen. Alle beginnen mit "shop-",
   damit keine bestehende Regel aus style.css ueberschrieben wird.

   Alle Farben kommen aus den Variablen in style.css (:root). Hier steht
   absichtlich kein einziger fester Farbwert.
   =================================================================== */

/* --- Batch-Hinweis oben ------------------------------------------- */
/* Der Balken links in Akzentfarbe macht den Hinweis auffaellig, ohne
   dass ein bunter Kasten die Seite dominiert. */
.shop-notice {
  margin: 1.5rem 0 2rem;
  padding: 0.9rem 1.1rem;

  background: var(--surface);

  border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
  border-radius: 4px;

  color: var(--text);
  font-weight: 500;
  line-height: 1.5;
}

/* --- Die Kategorie-Leiste ----------------------------------------- */
/* position: sticky haelt die Leiste beim Scrollen sichtbar.
   top sagt, WO sie stehen bleibt. Der Kopfbereich klebt selbst schon ganz
   oben, darum darf die Leiste nicht bei 0 stehen - sonst laegen beide
   uebereinander. shop.js misst die Hoehe des Kopfbereichs und schreibt sie
   in --shop-header-height. Der Wert 0px hinter dem Komma ist die
   Rueckfallhoehe, falls die Messung einmal nicht stattfindet.

   background MUSS var(--surface) sein, nicht var(--bg): --bg ist leicht
   durchsichtig, dann wuerden die Karten beim Scrollen durchscheinen.

   flex-wrap: wrap: Auf dem Handy brechen die Pillen in eine zweite Zeile.
   (Vorher nowrap + overflow-x: auto = seitlich schieben. Das machte aber
   die GANZE Seite breiter als den Bildschirm, statt nur die Leiste - im
   Sandbox-Test von 3c aufgefallen.) */
.shop-filter {
  position: sticky;
  top: var(--shop-header-height, 0px);
  z-index: 5;

  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;

  margin: 0 0 2rem;
  padding: 0.75rem 0;

  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.shop-filter__button {
  /* Verhindert, dass die Knoepfe schmalgequetscht werden, wenn die Leiste
     zu eng wird. Stattdessen rutscht der Knopf in die naechste Zeile. */
  flex: 0 0 auto;

  padding: 0.35rem 0.9rem;

  background: var(--surface);

  border: 1px solid var(--border);
  /* Ein sehr grosser Wert ergibt eine Pillenform. */
  border-radius: 999px;

  color: var(--text);

  /* Knoepfe erben die Schrift nicht von selbst - ohne diese Zeile
     erscheint die graue Standard-Systemschrift. */
  font: inherit;
  font-size: 0.9rem;
  line-height: 1.4;

  /* Der Name darf nie mitten im Wort umbrechen. */
  white-space: nowrap;

  cursor: pointer;
}

.shop-filter__button:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* Der gedrueckte Knopf. Die Optik haengt am selben Attribut, das auch der
   Screenreader vorliest - Bild und Ansage koennen so nicht auseinander
   laufen. --accent-dark statt --accent, weil weisse Schrift darauf besser
   lesbar ist. */
.shop-filter__button[aria-pressed='true'] {
  background: var(--accent-dark);
  border-color: var(--accent-dark);

  color: var(--surface);
  font-weight: 600;
}

.shop-filter__button[aria-pressed='true']:hover {
  color: var(--surface);
}

/* Sichtbarer Rahmen bei Bedienung mit der Tastatur (Tab-Taste). */
.shop-filter__button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Die Auswahl-Liste fuer das Handy (shop.js, buildFilterSelect). Am
   Computer ist sie versteckt - dort gibt es die Knoepfe. */
.shop-filter__select-wrap {
  display: none;
}

/* ZAHL ZUM EINSTELLEN: 599px = bis zu dieser Breite gilt die Liste statt
   der Knoepfe. Dieselbe Grenze wie bei den anderen Handy-Regeln hier. */
@media (max-width: 599px) {
  .shop-filter {
    margin-bottom: 1.25rem;
    padding: 0.5rem 0;
  }

  /* Nur die Knoepfe IN der Kategorie-Leiste. Die Groessen-Knoepfe der
     Produktseite tragen dieselbe Klasse und muessen sichtbar bleiben. */
  .shop-filter .shop-filter__button {
    display: none;
  }

  .shop-filter__select-wrap {
    display: flex;
    align-items: center;
    gap: 0.6rem;

    width: 100%;
  }

  .shop-filter__select-label {
    color: var(--muted);
    font-size: 0.9rem;
    font-weight: 600;
  }

  .shop-filter__select {
    /* min-width: 0 erlaubt der Liste zu schrumpfen. Ohne das kann ein
       langer Kategorie-Name die ganze Seite breiter machen. */
    flex: 1 1 auto;
    min-width: 0;

    padding: 0.4rem 0.9rem;

    background: var(--surface);

    border: 1px solid var(--accent-dark);
    border-radius: 999px;

    color: var(--text);

    font: inherit;
    /* Mindestens 16px: sonst vergroessert das iPhone beim Antippen die
       ganze Seite und springt nicht mehr zurueck. */
    font-size: 1rem;
    line-height: 1.4;

    cursor: pointer;
  }

  .shop-filter__select:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
  }
}

/* --- Lade- und Fehlermeldungen ------------------------------------ */
.shop-status {
  margin: 1.5rem 0;

  color: var(--muted);
  font-style: italic;
}

/* --- Ein Kategorie-Block ------------------------------------------ */
.shop-category {
  margin-bottom: 3rem;
}

.shop-category h2 {
  margin-bottom: 0.25rem;
  padding-bottom: 0.5rem;

  border-bottom: 1px solid var(--border);
}

/* --- Das Karten-Raster -------------------------------------------- */
/* Die Spalten sind zwischen 220px und 300px breit - also mit fester
   OBERGRENZE. Das ist der wichtige Unterschied zur Galerie: dort steht
   "1fr" (= nimm allen Platz), was bei nur einem Produkt eine Karte ueber
   die ganze Fensterbreite ergeben wuerde.
   min(220px, 100%) faengt sehr schmale Fenster ab: dort gilt 100% statt
   220px, damit nie etwas seitlich hinausragt.
   justify-content: start laesst eine einzelne Karte links stehen, statt
   sie zu strecken. */
.shop-grid {
  display: grid;

  gap: 1.5rem;

  grid-template-columns:
    repeat(auto-fill, minmax(min(220px, 100%), 300px));

  justify-content: start;

  /* Alle Karten einer Reihe werden gleich hoch (stretch). Die Knopfzeile
     sitzt per margin-top: auto am unteren Rand - so stehen die Knoepfe
     in einer Reihe auf gleicher Hoehe, auch wenn ein Titel zwei Zeilen
     braucht. (Vorher stand hier "start"; das liess die Karten oben
     buendig, unten aber ausgefranst.) */
  align-items: stretch;

  margin-top: 1.5rem;
}

/* --- Eine Produktkarte -------------------------------------------- */
/* Gleiche Optik wie die Galerie-Kacheln: heller Grund, feiner Rahmen,
   leicht abgerundete Ecken. */
.shop-card {
  display: flex;
  flex-direction: column;

  background: var(--surface);

  border: 1px solid var(--border);
  border-radius: 4px;

  overflow: hidden;
}

/* Feste, quadratische Bildkachel - aber OHNE Beschnitt.
   aspect-ratio: 1     -> jede Kachel ist gleich hoch wie breit. Dadurch
                          sind alle Karten gleich hoch, egal welches
                          Bildformat.
   object-fit: contain -> das Bild wird VOLLSTAENDIG hineingelegt und nur
                          verkleinert. Nichts wird abgeschnitten. Die
                          Kundin sieht das echte Print-Format.
   Der Unterschied zur Galerie ist Absicht: dort steht "cover", das
   beschneidet. In einem Shop waere das irrefuehrend. */
.shop-card img {
  display: block;

  width: 100%;
  height: auto;

  aspect-ratio: 1;
  object-fit: contain;

  /* Der Rest der Kachel bleibt sichtbar, wenn das Bild nicht quadratisch
     ist (z. B. schmale Streifen ueber und unter einem Panoramabild). */
  background: var(--bg);

  border-bottom: 1px solid var(--border);
}

.shop-card__body {
  display: flex;
  flex-direction: column;

  gap: 0.4rem;

  /* Unten knapper als frueher (1.1rem): die Knopfzeile darunter gehoert
     optisch zum Titel und soll nicht abgesetzt wirken. */
  padding: 0.9rem 1rem 0.7rem;
}

.shop-card__title {
  margin: 0;

  font-size: 1rem;
  font-weight: 600;
  line-height: 1.35;

  color: var(--text);
}

.shop-card__price {
  margin: 0;

  font-size: 1.05rem;
  font-weight: 700;

  color: var(--accent);
}

/* ===================================================================
   PHASE 3a - Karte als Link, Detail-Ansicht, Warenkorb
   =================================================================== */

/* --- hidden muss immer gewinnen ------------------------------------ */
/* Das HTML-Attribut hidden bringt vom Browser nur ein schwaches
   display: none mit. Jede eigene Regel mit display: flex oder grid
   (z. B. .shop-item__field) schlaegt es - das Element waere trotz hidden
   sichtbar. Diese Regel stellt sicher, dass hidden in allen Shop-Bloecken
   das letzte Wort hat. */
.shop-filter[hidden],
.shop-item[hidden],
.shop-item__field[hidden],
.shop-sizes[hidden],
.shop-item__price[hidden],
.shop-cart__summary[hidden],
.shop-toolbar[hidden] {
  display: none;
}

/* --- Bild + Titel der Karte sind ein Link --------------------------- */
/* (Politur nach 3b: vorher war die GANZE Karte der Link. Jetzt ist es nur
   der obere Teil .shop-card__link, damit darunter Knoepfe stehen koennen -
   Knoepfe duerfen laut HTML-Regeln nicht in einem Link liegen.)
   style.css macht Links in .content beim Hover fett (900). Auf einer
   Karte wuerde der Titel dadurch breiter und das Raster springen. Darum
   werden Farbe und Gewicht hier festgehalten; der Hover zeigt sich
   stattdessen am Rahmen der Karte. Die hoehere Spezifitaet (.content
   davor) ist noetig, damit diese Regel gegen .content a:hover gewinnt. */
.content .shop-card__link,
.content .shop-card__link:hover {
  display: block;

  color: var(--text);
  font-weight: inherit;
  text-decoration: none;
}

/* :has() = "eine Karte, die einen gehoverten Link enthaelt". So leuchtet
   der Rahmen nur, wenn der Zeiger auf Bild oder Titel liegt - nicht auf
   den Knoepfen. */
.shop-card:has(.shop-card__link:hover) {
  border-color: var(--accent);
}

.shop-card__link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

/* --- Lange Titel: hoechstens zwei Zeilen ---------------------------- */
/* Lange Titel werden nach der zweiten Zeile mit "..." abgeschnitten.
   Kurze Titel reservieren KEINE leere zweite Zeile (das sah wie ein Loch
   aus). Gleiche Kartenhoehe kommt stattdessen vom Raster (stretch) und
   der Knopfzeile am unteren Rand. Der volle Titel steht im title-Attribut
   (Mauszeiger halten) und in der Detail-Ansicht.
   -webkit-line-clamp braucht genau diese drei Zeilen darueber - das ist
   die einzige Schreibweise, die alle Browser verstehen. */
.shop-card__title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;

  /* Ein einzelnes sehr langes Wort darf umbrechen statt hinauszuragen. */
  overflow-wrap: anywhere;
}

/* Der Link-Teil waechst und schiebt die Knopfzeile nach unten. */
.shop-card__link {
  flex: 1 1 auto;
}

/* --- Schnell-Knoepfe "+ A5 $12" ------------------------------------- */
/* Bewusst leise: klein, grauer Rand, linksbuendig, nicht gestreckt. Rosa
   erst beim Hover. Sonst konkurrieren die Knoepfe mit Titel und
   Filterleiste (gleiche Pillenform). */
.shop-card__actions {
  margin-top: auto;
  padding: 0 1rem 1rem;
}

/* "Add to cart" - ein Wort ueber der Knopfreihe, klein und grau. */
.shop-card__actions-label {
  display: block;

  margin-bottom: 0.35rem;

  color: var(--muted);
  font-size: 0.8rem;
}

.shop-card__actions-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.shop-card__add {
  display: inline-flex;
  align-items: baseline;
  gap: 0.45rem;

  flex: 0 0 auto;

  padding: 0.3rem 0.8rem;

  background: var(--surface);

  border: 1px solid var(--border);
  border-radius: 999px;

  color: var(--text);

  font: inherit;
  font-size: 0.9rem;
  white-space: nowrap;

  cursor: pointer;
}

/* Groesse fett, Preis leichter und grau: zwei Angaben, keine Formel. */
.shop-card__add-size {
  font-weight: 700;
}

.shop-card__add-price {
  color: var(--muted);
  font-size: 0.85rem;
}

.shop-card__add:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.shop-card__add:hover .shop-card__add-price {
  color: var(--accent);
}

.shop-card__add:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Kurz nach dem Klick: gefuellt und "Added" - egal ob der Zeiger noch
   auf dem Knopf liegt. */
.shop-card__add--done,
.shop-card__add--done:hover {
  background: var(--accent-dark);
  border-color: var(--accent-dark);
  color: var(--surface);
  font-weight: 600;
}

/* Ausverkaufter Fehldruck: bleibt sichtbar, wird aber blass. */
.shop-card--soldout {
  opacity: 0.6;
}

.shop-card--soldout .shop-card__price {
  color: var(--muted);
}

/* --- Werkzeugleiste: "Back to shop" / "Cart (n)" -------------------- */
.shop-toolbar {
  display: flex;
  justify-content: space-between;
  gap: 1rem;

  margin: 0 0 1.5rem;

  /* 22.09.2026 von 0.95rem vergroessert: neben der sehr grossen
     Seitenueberschrift wirkten die Links zu klein. Gilt fuer ALLE
     Shop-Seiten, damit "FAQ", "Cart" und "Back to shop" ueberall
     gleich gross sind. */
  font-size: 1.15rem;
}

/* Nur ein Link (Katalog-Seite): rechts ausrichten. */
.shop-toolbar--end {
  justify-content: flex-end;
}

.content .shop-toolbar__link,
.content .shop-toolbar__link:hover {
  color: var(--accent-dark);
  font-weight: 600;
}

.content .shop-toolbar__link:hover {
  text-decoration: underline;
}

/* --- Der gemeinsame Knopf ("Add to cart", "Checkout") -------------- */
.shop-button {
  display: inline-block;

  padding: 0.7rem 1.6rem;

  background: var(--accent-dark);

  border: 1px solid var(--accent-dark);
  border-radius: 999px;

  color: var(--surface);

  font: inherit;
  font-weight: 600;

  cursor: pointer;
}

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

.shop-button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.shop-button:disabled {
  background: var(--muted);
  border-color: var(--muted);

  cursor: not-allowed;
  opacity: 0.7;
}

/* --- Zahlenfeld und Auswahl ---------------------------------------- */
.shop-item__quantity,
.shop-item__select,
.shop-cart__quantity input {
  padding: 0.4rem 0.6rem;

  background: var(--surface);

  border: 1px solid var(--border);
  border-radius: 4px;

  color: var(--text);

  font: inherit;
}

.shop-item__quantity,
.shop-cart__quantity input {
  width: 4.5rem;
}

.shop-item__quantity:focus-visible,
.shop-item__select:focus-visible,
.shop-cart__quantity input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

/* --- Detail-Ansicht ------------------------------------------------ */
/* Unter 700px steht das Bild ueber dem Text (eine Spalte). Ab 700px
   stehen Bild und Text nebeneinander. */
.shop-item {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;

  align-items: start;
}

@media (min-width: 700px) {
  .shop-item {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  }
}

.shop-item__media {
  background: var(--bg);

  border: 1px solid var(--border);
  border-radius: 4px;

  overflow: hidden;
}

/* Das Bild wird VOLLSTAENDIG gezeigt (contain), nie beschnitten.
   max-height verhindert, dass ein hohes Bild den ganzen Bildschirm
   fuellt und der Text erst nach langem Scrollen kommt. */
.shop-item__image {
  display: block;

  width: 100%;
  height: auto;
  max-height: 80vh;

  object-fit: contain;

  /* Klick oeffnet die Grossansicht (Lightbox). */
  cursor: zoom-in;
}

.shop-item__image:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

/* Lightbox der Produktseite: das Aussehen kommt aus style.css (.lightbox).
   Hier nur der Schliessen-Knopf - er ist ein echter <button> (Tastatur),
   darum die Knopf-Grundoptik des Browsers abschalten. */
.shop-lightbox-close {
  padding: 0;

  background: none;
  border: 0;

  font-family: inherit;
  line-height: 1;
}

/* Bilderleiste unter dem grossen Bild (Phase 4c): Hauptbild + Bonus-Fotos.
   Sie steht IM Bildkasten, deshalb die Trennlinie oben. Ohne Bonus-Fotos
   setzt shop-item.js das hidden-Attribut - display: flex wuerde es sonst
   uebergehen, darum die eigene Regel dafuer. */
.shop-item__strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;

  padding: 0.5rem;
  border-top: 1px solid var(--border);
}

.shop-item__strip[hidden] { display: none; }

.shop-item__strip-item {
  width: 60px;
  height: 60px;
  padding: 0;

  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 3px;

  cursor: pointer;
  overflow: hidden;
}

.shop-item__strip-item[aria-pressed="true"] {
  border-color: var(--accent);
}

.shop-item__strip-img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;
}

.shop-item__info {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.shop-item__category {
  margin: 0;

  color: var(--muted);
  font-size: 0.9rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Der Titel ist ein h1 - style.css macht ihn sehr gross. Auf der
   Detail-Seite ist er ein Produktname, kein Seitentitel. */
.content .shop-item__title {
  margin: 0;

  font-size: clamp(1.6rem, 3vw, 2.2rem);
  line-height: 1.15;
}

/* Die Beschreibung ist seit Phase 4b ein Behälter: ein Absatz je Teil
   (eigener Text des Produkts, dann die Text-Bausteine). */
.shop-item__description {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;

  margin: 0;

  line-height: 1.6;
}

/* Wichtig: "display: flex" schlaegt das HTML-Attribut "hidden". Ohne diese
   Regel bliebe eine leere Beschreibung als Luecke stehen. */
.shop-item__description[hidden],
.shop-item__notices[hidden] {
  display: none;
}

.shop-item__part {
  display: block;
}

/* Überschrift eines Bausteins (freiwillig) auf eigener Zeile. */
.shop-item__part-title {
  display: block;
  font-weight: 700;
}

.shop-item__part-text {
  display: block;
  /* Zeilenumbrüche aus dem GE-Textfeld sichtbar lassen (Text kommt per textContent). */
  white-space: pre-line;
}

/* --- Automatische Hinweise (NSFW / unscharfes Vorschaubild) --------- */
/* Gleiche Box wie die freien Mitteilungen, nur ohne deren grosse
   Aussenabstände: die Hinweise stehen mitten in der Info-Spalte. */
.shop-item__notices {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;

  margin: 0;
}

.shop-item__notice {
  display: block;
  padding: 0.7rem 0.9rem;

  background: var(--surface);

  border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
  border-radius: 4px;

  font-size: 0.95rem;
  line-height: 1.5;
}

.shop-item__notice-title {
  display: block;
  font-weight: 700;
  margin-bottom: 0.2rem;
}

.shop-item__notice-text {
  display: block;
  white-space: pre-line;
}

.shop-item__field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.shop-item__label {
  color: var(--muted);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.shop-item__value {
  font-weight: 500;
}

/* Die Groessen-Knoepfe nutzen die Optik der Kategorie-Pillen
   (.shop-filter__button). Hier duerfen sie umbrechen. */
.shop-sizes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.shop-item__select {
  max-width: 16rem;
}

.shop-item__price {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;

  margin: 0;
}

.shop-item__price strong {
  color: var(--accent);
  font-size: 1.6rem;
  font-weight: 700;
}

.shop-item__stock {
  margin: 0;

  color: var(--accent-dark);
  font-weight: 600;
}

.shop-item__added {
  margin: 0;

  color: var(--accent-dark);
  font-weight: 600;
}

.content .shop-item__added a {
  text-decoration: underline;
}

/* --- Hinweise im Warenkorb (entfernt / gekappt) -------------------- */
.shop-warnings {
  margin: 0 0 1.5rem;
  padding: 0.9rem 1.1rem 0.9rem 2.2rem;

  background: var(--surface);

  border: 1px solid var(--border);
  border-left: 4px solid var(--accent-dark);
  border-radius: 4px;

  line-height: 1.5;
}

.shop-warnings li + li {
  margin-top: 0.4rem;
}

/* --- Warenkorb-Zeilen --------------------------------------------- */
.shop-cart {
  display: flex;
  flex-direction: column;

  border-top: 1px solid var(--border);
}

/* Eine Zeile: Bild | Text | Menge | Zeilenpreis | Entfernen.
   Auf dem Handy (unter 600px) wird daraus: Bild links, Text rechts,
   darunter Menge und Preis nebeneinander. */
.shop-cart__line {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) auto auto auto;
  grid-template-areas: 'image info quantity total remove';
  gap: 1rem;
  align-items: center;

  padding: 1rem 0;

  border-bottom: 1px solid var(--border);
}

@media (max-width: 599px) {
  .shop-cart__line {
    grid-template-columns: 72px minmax(0, 1fr) auto;
    grid-template-areas:
      'image info remove'
      'image quantity total';
    align-items: start;
  }
}

.shop-cart__image {
  grid-area: image;

  display: block;
}

.shop-cart__image img {
  display: block;

  width: 72px;
  height: 72px;

  object-fit: contain;

  background: var(--bg);

  border: 1px solid var(--border);
  border-radius: 4px;
}

.shop-cart__info {
  grid-area: info;

  display: flex;
  flex-direction: column;
  gap: 0.2rem;

  /* Lange Titel duerfen umbrechen, aber die Zeile nie sprengen. */
  min-width: 0;
  overflow-wrap: anywhere;
}

.content .shop-cart__title,
.content .shop-cart__title:hover {
  color: var(--text);
  font-weight: 600;
}

.content .shop-cart__title:hover {
  color: var(--accent-dark);
}

.shop-cart__meta,
.shop-cart__unit {
  margin: 0;

  font-size: 0.9rem;
}

.content .shop-cart__meta,
.content .shop-cart__unit {
  color: var(--muted);
}

.shop-cart__quantity {
  grid-area: quantity;
}

.shop-cart__quantity-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;

  color: var(--muted);
  font-size: 0.85rem;
}

.shop-cart__line-total {
  grid-area: total;

  margin: 0;

  min-width: 4rem;

  color: var(--accent);
  font-weight: 700;
  text-align: right;
}

@media (max-width: 599px) {
  .shop-cart__line-total {
    align-self: center;
  }
}

.shop-cart__remove {
  grid-area: remove;

  justify-self: end;

  width: 2rem;
  height: 2rem;

  background: transparent;

  border: 1px solid var(--border);
  border-radius: 999px;

  color: var(--muted);

  font: inherit;
  line-height: 1;

  cursor: pointer;
}

.shop-cart__remove:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.shop-cart__remove:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* --- Zwischensumme und Kasse --------------------------------------- */
.shop-cart__summary {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.5rem;

  margin-top: 1.5rem;
}

.content .shop-cart__hint {
  margin: 0;

  color: var(--muted);
  font-size: 0.9rem;
  text-align: right;
}

/* ===================================================================
   Phase 3b: Land, Versand, Summen, Kasse
   =================================================================== */

/* Versteckte Elemente dieser Phase (siehe Sammelregel oben: eigenes
   display schlaegt sonst das HTML-Attribut hidden). */
.shop-cart__row[hidden],
.shop-checkout[hidden],
.shop-field__error[hidden],
.shop-checkout__result[hidden],
.shop-notice[hidden],
.shop-warnings[hidden],
.shop-status[hidden] {
  display: none;
}

/* --- Kassen-Sperre: gleiche Box wie der Batch-Hinweis, nur in Warnfarbe */
.shop-notice--unavailable {
  border-left-color: var(--warning);
  font-weight: 600;
}

/* --- Freie Mitteilungen (shop-messages.json) ----------------------- */
/* Der Platz selbst ist unsichtbar und hat KEINEN Abstand: ist keine
   Mitteilung aktiv, bleibt die Seite genau wie vorher. Den Abstand
   bringen erst die Mitteilungen mit. */
.shop-messages {
  margin: 0;
}

/* Gleiche Box wie der Batch-Hinweis, nur engere Abstaende - so stehen
   mehrere Mitteilungen als sauberer Stapel untereinander. */
.shop-message {
  display: block;
  margin: 0 0 0.8rem;
}

.shop-messages > .shop-message:first-child {
  margin-top: 1.5rem;
}

.shop-messages > .shop-message:last-child {
  margin-bottom: 2rem;
}

/* Eine Mitteilung in Warnfarbe. Sie sperrt nichts - sie faellt nur auf. */
.shop-message--warning {
  border-left-color: var(--warning);
}

/* Titel auf eigener Zeile, Text darunter. white-space: pre-line macht
   aus Zeilenumbruechen im Text auch auf der Seite Zeilenumbrueche. */
.shop-message__title {
  display: block;
  font-weight: 700;
  margin-bottom: 0.2rem;
}

.shop-message__text {
  display: block;
  font-weight: 400;
  white-space: pre-line;
}

/* --- Land-Auswahl im Warenkorb ------------------------------------ */
.shop-cart__country {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1rem;
  align-items: center;

  margin: 0 0 0.5rem;
}

.shop-cart__country label {
  font-weight: 600;
}

/* --- Zeilen der Summe: Subtotal / Shipping / Total ----------------- */
.shop-cart__row {
  display: flex;
  gap: 1.5rem;
  align-items: baseline;
  justify-content: space-between;

  width: 100%;
  max-width: 22rem;
  margin: 0;

  font-size: 1.05rem;
}

.shop-cart__row strong {
  font-weight: 600;
}

/* Rabatt-Zeile (Phase 5a): Betrag in der Akzentfarbe, alter Versandpreis
   bei Gratis-Porto durchgestrichen und blass. */
.shop-cart__row--discount strong {
  color: var(--accent);
}

.shop-cart__was {
  margin-right: 0.35rem;

  opacity: 0.6;
  font-weight: 400;
}

/* --- Rabattcode (Phase 5b): Eingabe + Knopf + Meldung ---------------- */
.shop-code {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;

  width: 100%;
  max-width: 22rem;
  margin: 0 0 0.8rem;
}

.shop-code__label {
  font-weight: 600;
}

.shop-code__field {
  display: flex;
  gap: 0.5rem;
}

.shop-code__input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0.4rem 0.6rem;

  background: var(--surface);

  border: 1px solid var(--border);
  border-radius: 4px;

  color: var(--text);

  font: inherit;
  text-transform: uppercase;
}

.shop-code__input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

/* Der Knopf: klein, im Stil des Kasse-Knopfs, aber nicht so schwer. */
.shop-code__apply {
  flex: 0 0 auto;
  padding: 0.4rem 0.9rem;

  background: var(--surface);

  border: 1px solid var(--accent);
  border-radius: 4px;

  color: var(--accent-dark);

  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.shop-code__apply:hover,
.shop-code__apply:focus-visible {
  background: var(--accent);
  color: var(--surface);
}

.shop-code__apply:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.content .shop-code__msg {
  margin: 0;

  font-size: 0.9rem;
}

.shop-code__msg--ok {
  color: var(--accent);
  font-weight: 600;
}

.shop-code__msg--error {
  color: var(--accent-dark);
  font-weight: 600;
}

.shop-code__msg[hidden] {
  display: none;
}

/* In der Kasse steht der Code in der Bestell-Box: volle Breite. */
.shop-checkout__order .shop-code {
  max-width: none;
  margin-top: 0.8rem;
}

/* --- Patron-Vorteil (Phase 5c): kleine Zeile unter dem Total ----------
   Wird von shop-cart.js / shop-checkout.js nur eingefuegt, wenn der Server
   einen patronOnly-Rabatt meldet. */
.content .shop-patron {
  margin: 0.25rem 0 0;

  font-size: 0.9rem;
  font-weight: 600;
  color: var(--accent);
  text-align: right;
}

.shop-patron[hidden] {
  display: none;
}

.shop-cart__row--total {
  padding-top: 0.5rem;

  border-top: 1px solid var(--border);
}

.shop-cart__row--total strong {
  color: var(--accent);
  font-size: 1.5rem;
  font-weight: 700;
}

/* Der Kasse-Knopf ist ein Link (a statt button - darum aria-disabled).
   style.css faerbt Links in .page-layout rosa - hier zurueck auf weiss. */
.content .shop-button {
  color: var(--surface);
  text-decoration: none;
}

.content .shop-button:hover {
  color: var(--surface);
  font-weight: 600;
}

.shop-button[aria-disabled="true"] {
  background: var(--muted);
  border-color: var(--muted);

  cursor: not-allowed;
  opacity: 0.7;
  pointer-events: none;
}

/* --- Kasse: zwei Spalten ab 800px ---------------------------------- */
.shop-checkout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;

  margin-top: 1rem;
}

/* Einspaltig (Handy): die Bestellung steht UEBER dem Formular. Im HTML
   steht sie dahinter (Screenreader lesen erst das Formular) - "order"
   dreht nur die sichtbare Reihenfolge. */
.shop-checkout__order {
  order: -1;
}

@media (min-width: 800px) {
  .shop-checkout {
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    align-items: start;
  }

  .shop-checkout__order {
    order: 0;
  }
}

/* --- Schritt-Leiste: Cart > Address > Payment ---------------------- */
.content .shop-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0;

  margin: 0 0 1.5rem;
  padding: 0;

  list-style: none;

  font-size: 0.9rem;
}

.shop-steps__item {
  display: flex;
  align-items: center;

  color: var(--muted);
}

/* Pfeil zwischen den Schritten. */
.shop-steps__item + .shop-steps__item::before {
  content: '›';

  margin: 0 0.6rem;

  color: var(--border);
  font-size: 1.2rem;
}

.shop-steps__number {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 1.5rem;
  height: 1.5rem;
  margin-right: 0.4rem;

  border: 1px solid var(--border);
  border-radius: 50%;

  font-size: 0.8rem;
  font-weight: 600;
}

/* Erledigter Schritt: Haekchen statt Zahl, als Link zurueck. */
.shop-steps__item--done .shop-steps__number {
  background: var(--accent-soft);
  border-color: var(--accent-soft);
  color: var(--surface);
}

.content .shop-steps__item--done a {
  color: var(--text);
}

.content .shop-steps__item--done a:hover {
  color: var(--accent-dark);
  font-weight: 600;
}

/* Aktueller Schritt. */
.shop-steps__item[aria-current="step"] {
  color: var(--text);
  font-weight: 600;
}

.shop-steps__item[aria-current="step"] .shop-steps__number {
  background: var(--accent-dark);
  border-color: var(--accent-dark);
  color: var(--surface);
}

.shop-checkout__heading {
  margin: 0 0 1rem;

  font-size: 1.2rem;
}

.shop-checkout__form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.shop-checkout__order {
  padding: 1.2rem;

  background: var(--surface);

  border: 1px solid var(--border);
  border-radius: 8px;
}

.shop-checkout__order .shop-cart__row {
  max-width: none;
  margin-top: 0.4rem;
}

.shop-checkout__order .shop-notice {
  margin: 1.2rem 0 0;
}

/* --- Formularfelder ------------------------------------------------ */
.shop-field {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.shop-field__label {
  font-weight: 600;
}

.shop-field__input {
  width: 100%;
  max-width: 28rem;
  padding: 0.5rem 0.7rem;

  background: var(--surface);

  border: 1px solid var(--border);
  border-radius: 4px;

  color: var(--text);

  font: inherit;
}

.shop-field--short .shop-field__input {
  max-width: 10rem;
}

.shop-field__input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.shop-field__input--error {
  border-color: var(--accent-dark);
}

.content .shop-field__hint {
  margin: 0;

  color: var(--muted);
  font-size: 0.85rem;
}

.content .shop-field__error {
  margin: 0;

  color: var(--accent-dark);
  font-size: 0.9rem;
  font-weight: 600;
}

/* Ergebnis nach dem Absenden. */
.content .shop-checkout__result {
  margin: 0;
  padding: 0.8rem 1rem;

  border: 1px solid var(--border);
  border-radius: 6px;

  font-weight: 600;
}

.shop-checkout__result--ok {
  border-color: var(--accent);
  color: var(--text);
}

.shop-checkout__result--error {
  border-color: var(--accent-dark);
  color: var(--accent-dark);
}

/* --- Bestell-Liste rechts ------------------------------------------ */
.content .shop-order {
  margin: 0 0 0.8rem;
  padding: 0;

  list-style: none;
}

.shop-order__line {
  display: flex;
  gap: 1rem;
  align-items: baseline;
  justify-content: space-between;

  padding: 0.5rem 0;

  border-bottom: 1px solid var(--border);
}

.shop-order__text {
  min-width: 0;
  overflow-wrap: anywhere;
}

.shop-order__price {
  flex-shrink: 0;

  font-weight: 600;
}

/* ===================================================================
   KASSE, SCHRITT 3: ZAHLUNG BESTAETIGT (Phase 3c, shop-return.html)
   =================================================================== */
.shop-return,
.shop-return__problem {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* hidden muss auch hier das letzte Wort haben (siehe Sammelregel oben). */
.shop-return[hidden],
.shop-return__problem[hidden] {
  display: none;
}

.content .shop-return__note {
  margin: 0;

  color: var(--muted);
}

/* Bestellung links, Adresse rechts; auf dem Handy untereinander. */
.shop-return__columns {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: 1.5rem;
}

@media (max-width: 700px) {
  .shop-return__columns {
    grid-template-columns: minmax(0, 1fr);
  }
}

.shop-return__block {
  padding: 1.2rem;

  background: var(--surface);

  border: 1px solid var(--border);
  border-radius: 8px;
}

.shop-return__block .shop-cart__row {
  max-width: none;
  margin-top: 0.4rem;
}

.content .shop-return__address {
  margin: 0;

  line-height: 1.6;
}

.content .shop-return__links {
  margin: 0.5rem 0 0;
}