/* ===========================================================
   Sylvia Wolff — Shop (clean / mockup-zentriert)
   Tokens: Navy #1a1a2e · Gold #c4956a · Creme #fdfbf7 · Warm #f5ede0
   Fonts: Lato (Text), Roboto Slab italic (Titel)
   =========================================================== */

.sw-shop {
  --navy: #1a1a2e;
  --gold: #c4956a;
  --creme: #fdfbf7;
  --warm: #f5ede0;
  --ink: #3a3a3a;
  --muted: #6a6a6a;
  --line: rgba(26, 26, 46, 0.09);

  /* Warme Haarlinie, um weisse Passepartout-Karten auf Creme zu rahmen */
  --hair: #efe6d6;
  --gold-soft: rgba(196, 149, 106, 0.6);

  /* Radien: loesen die kantigen 0/2/3px-Ecken ueberall */
  --r-card: 14px;   /* Kacheln, Produktkarten, Buehne */
  --r-note: 10px;   /* Hinweise, Eingabefelder */
  --r-art: 3px;     /* das Bild IM Passepartout */
  --r-pill: 999px;  /* Buttons, Badges, Filter-Chips */

  /* Mehrlagige, warme Galerie-Schatten (nie ein flacher grauer Schlagschatten) */
  --sh-card: 0 1px 2px rgba(26, 26, 46, 0.06), 0 14px 34px -18px rgba(26, 26, 46, 0.2);
  --sh-hover: 0 2px 6px rgba(26, 26, 46, 0.06), 0 28px 60px -22px rgba(196, 149, 106, 0.36);
  --sh-art: 0 1px 2px rgba(26, 26, 46, 0.1), 0 18px 40px -16px rgba(26, 26, 46, 0.26);
  --sh-stage: 0 2px 4px rgba(26, 26, 46, 0.06), 0 30px 70px -28px rgba(26, 26, 46, 0.3);

  /* Bewegung */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --t-card: 0.35s;  /* Karten-Lift / Schatten-Bloom */
  --t-ui: 0.25s;    /* kleine Bedienelemente */

  font-family: "Lato", sans-serif;
  color: var(--ink);
  background: var(--creme);
}
.sw-shop *, .sw-shop *::before, .sw-shop *::after { box-sizing: border-box; }

/* ---------- Intro ---------- */
.sw-shop__intro {
  text-align: center;
  max-width: 720px;
  margin: 0 auto;
  padding: clamp(56px, 9vw, 104px) clamp(22px, 5vw, 48px) clamp(40px, 6vw, 72px);
}
.sw-shop__rule { width: 48px; height: 2px; background: var(--gold); border: 0; margin: 28px auto; }
.sw-shop__eyebrow {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.38em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 20px;
}
.sw-shop__title {
  font-family: "Roboto Slab", Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(34px, 5.2vw, 56px);
  line-height: 1.1;
  color: var(--navy);
  margin: 0 0 20px;
  letter-spacing: -0.02em;
}
.sw-shop__lead {
  font-size: clamp(16px, 1.3vw, 19px);
  line-height: 1.75;
  color: var(--muted);
  margin: 0 auto;
  max-width: 560px;
}
.sw-shop__exhibit {
  margin: 4px auto 0;
  max-width: 460px;
  font-size: 14px;
  line-height: 1.7;
  letter-spacing: 0.02em;
  color: var(--muted);
}
.sw-shop__exhibit strong { color: var(--navy); font-weight: 700; }

/* ---------- Galerie-Grid ---------- */
.sw-shop__grid {
  max-width: 1260px;
  margin: 0 auto;
  padding: clamp(20px, 3vw, 36px) clamp(18px, 4vw, 56px) clamp(70px, 9vw, 120px);
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: clamp(32px, 3.4vw, 56px);
}
.sw-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  background: #fff;
  border: 1px solid var(--hair);
  border-radius: var(--r-card);
  overflow: hidden;
  box-shadow: var(--sh-card);
  transition: transform var(--t-card) var(--ease), box-shadow var(--t-card) var(--ease);
}
.sw-card:hover { transform: translateY(-6px); box-shadow: var(--sh-hover); }
.sw-card__imgwrap {
  position: relative;
  background: #fff;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 5%, 28px);
  border-bottom: 1px solid var(--hair);
}
.sw-card__img {
  max-width: 90%;
  max-height: 90%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  border-radius: var(--r-art);
  box-shadow: var(--sh-art);
}
.sw-card__hint {
  position: absolute;
  left: 50%;
  bottom: 16px;
  transform: translate(-50%, 12px);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--navy);
  background: rgba(253, 251, 247, 0.96);
  padding: 9px 18px;
  border: 1px solid var(--gold-soft);
  border-radius: var(--r-pill);
  box-shadow: 0 6px 18px rgba(26, 26, 46, 0.12);
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none;
  white-space: nowrap;
}
.sw-card:hover .sw-card__hint { opacity: 1; transform: translate(-50%, 0); }
.sw-card__body { padding: 16px 18px 20px; background: #fff; display: flex; flex-direction: column; gap: 8px; }
.sw-card__title {
  font-family: "Roboto Slab", Georgia, serif;
  font-style: italic;
  font-size: 21px;
  line-height: 1.2;
  color: var(--navy);
  margin: 0;
}
.sw-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sw-card__price { font-family: "Roboto Slab", Georgia, serif; font-size: 17px; color: var(--navy); }
.sw-card__tag {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
}

/* ---------- Status-Badge ---------- */
.sw-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 5px 11px;
  border-radius: 100px;
  white-space: nowrap;
}
.sw-badge--available { color: #2f6b4f; background: rgba(47, 107, 79, 0.1); }
.sw-badge--reserved { color: #9a6b2f; background: rgba(196, 149, 106, 0.18); }
.sw-badge--sold { color: #8a3a3a; background: rgba(138, 58, 58, 0.1); }
/* Verkauft: ruhige Optik statt Siegel auf dem Bild. Der Status steht als Pille
   in der Fußzeile, dazu Graustich und goldene Umrandung der Karte. So sieht ein
   im Katalog verkauftes Werk genauso aus wie eines, das shop.js zur Laufzeit
   über /api/availability als verkauft nachträgt. */
.sw-card--sold .sw-card__img { filter: grayscale(0.7) brightness(0.82); }
.sw-card--sold { position: relative; }
.sw-card--sold::after {
  content: "";
  position: absolute; inset: 0;
  border: 1px solid var(--gold-soft);
  border-radius: var(--r-card);
  pointer-events: none;
}

/* ===========================================================
   Detailseite
   =========================================================== */
.sw-detail {
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(22px, 3.5vw, 40px) clamp(18px, 4vw, 56px) clamp(70px, 9vw, 110px);
}
.sw-back {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
  padding: 11px 20px 11px 16px;
  border: 1px solid var(--line);
  border-radius: 100px;
  margin-bottom: clamp(24px, 3vw, 40px);
  transition: all 0.25s ease;
}
.sw-back span { font-size: 15px; transition: transform 0.25s ease; }
.sw-back:hover { color: var(--navy); border-color: rgba(196, 149, 106, 0.6); background: #fff; }
.sw-back:hover span { transform: translateX(-3px); }

.sw-detail__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: clamp(30px, 4.5vw, 72px);
  align-items: start;
}
@media (max-width: 900px) {
  .sw-detail__grid { grid-template-columns: 1fr; gap: 34px; }
}

/* Bildbühne */
.sw-stage {
  position: relative;
  background: #fff;
  border: 1px solid var(--hair);
  border-radius: var(--r-card);
  padding: clamp(22px, 4vw, 44px);
  overflow: hidden;
  box-shadow: var(--sh-stage);
  cursor: zoom-in;
}
.sw-stage__img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--r-art);
  box-shadow: var(--sh-art);
}

.sw-thumbs { display: flex; gap: 12px; margin-top: 16px; flex-wrap: wrap; }
.sw-thumbs__btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  width: 88px;
}
.sw-thumbs__btn img {
  width: 88px;
  height: 66px;
  object-fit: cover;
  border-radius: 3px;
  border: 1.5px solid transparent;
  background: var(--warm);
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.sw-thumbs__btn span {
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  transition: color 0.2s ease;
}
.sw-thumbs__btn:hover img { transform: translateY(-2px); }
.sw-thumbs__btn[aria-pressed="true"] img { border-color: var(--gold); }
.sw-thumbs__btn[aria-pressed="true"] span { color: var(--navy); font-weight: 700; }

/* Info-Spalte */
.sw-info { position: sticky; top: 96px; }
@media (max-width: 900px) { .sw-info { position: static; } }
.sw-info__title {
  font-family: "Roboto Slab", Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(30px, 4vw, 44px);
  line-height: 1.12;
  color: var(--navy);
  margin: 0 0 10px;
}
.sw-info__eyebrow {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 14px;
}
.sw-info__sub {
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 22px;
}
.sw-info__badge { margin: 16px 0 0; }
.sw-info__unique {
  margin: 14px 0 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--gold);
  letter-spacing: 0.01em;
}
.sw-info__story {
  font-family: "Roboto Slab", Georgia, serif;
  font-style: italic;
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink);
  margin: 20px 0 0;
  max-width: 48ch;
}
.sw-info__specs { margin: 26px 0 0; display: grid; gap: 0; border-top: 1px solid var(--hair); }
.sw-info__spec {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 16px;
  align-items: baseline;
  padding: 12px 0;
  border-bottom: 1px solid var(--hair);
}
.sw-info__spec dt {
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
}
.sw-info__spec dd { margin: 0; font-size: 15.5px; line-height: 1.4; color: var(--navy); }
.sw-info__price {
  font-family: "Roboto Slab", Georgia, serif;
  font-size: 32px;
  color: var(--navy);
  margin: 28px 0 24px;
  padding-top: 24px;
  border-top: 1px solid var(--gold-soft);
}
.sw-info__desc { font-size: 16px; line-height: 1.8; color: var(--ink); margin: 0 0 26px; }
.sw-info__note { font-size: 15px; line-height: 1.7; color: var(--muted); }
.sw-info__note a { color: var(--gold); }

/* Button */
.sw-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: "Lato", sans-serif;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 17px 32px;
  border-radius: var(--r-pill);
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.sw-btn--primary { background: var(--navy); color: var(--creme); box-shadow: 0 14px 30px -12px rgba(26, 26, 46, 0.45); }
.sw-btn--primary:hover { background: var(--gold); color: var(--navy); transform: translateY(-2px); box-shadow: 0 18px 38px -12px rgba(196, 149, 106, 0.5); }
.sw-btn--block { width: 100%; }
.sw-btn:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }

/* Kaufanfrage – schlank */
.sw-inquiry { margin: 0; }
.sw-inquiry__sub { font-size: 14.5px; line-height: 1.6; color: var(--muted); margin: 0 0 18px; }
.sw-field { margin-bottom: 12px; }
.sw-field input, .sw-field textarea {
  width: 100%;
  font-family: "Lato", sans-serif;
  font-size: 15px;
  color: var(--navy);
  background: #fff;
  border: 1px solid rgba(26, 26, 46, 0.16);
  border-radius: var(--r-note);
  padding: 13px 15px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.sw-field input::placeholder, .sw-field textarea::placeholder { color: #9a9a9a; }
.sw-field input:focus, .sw-field textarea:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(196, 149, 106, 0.15);
}
.sw-field textarea { resize: vertical; min-height: 104px; }
.sw-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.sw-form__status { margin: 14px 0 0; font-size: 14.5px; line-height: 1.55; }
.sw-form__status--ok { color: #2f6b4f; }
.sw-form__status--err { color: #8a3a3a; }
.sw-form__consent { font-size: 12px; color: var(--muted); margin: 14px 0 0; line-height: 1.5; }
.sw-form__consent a { color: var(--gold); }

/* ---------- Bildschutz ---------- */
.sw-shop img, .sw-stage, .sw-card__imgwrap {
  -webkit-user-select: none; -moz-user-select: none; user-select: none;
  -webkit-user-drag: none; -webkit-touch-callout: none;
}
.sw-shop img { pointer-events: none; }
.sw-thumbs__btn img { pointer-events: auto; }
.sw-stage__guard { position: absolute; inset: 0; z-index: 3; background: transparent; }

.sw-shop__empty { text-align: center; padding: 80px 24px; color: var(--muted); font-size: 17px; }

/* hidden-Attribut zuverlässig durchsetzen (Kauf/Anfrage werden per JS getauscht) */
.sw-shop [hidden] { display: none !important; }

/* ---------- Ghost-Button (sekundär) ---------- */
.sw-btn--ghost {
  background: transparent;
  color: var(--navy);
  border: 1px solid rgba(26, 26, 46, 0.22);
  box-shadow: none;
}
.sw-btn--ghost:hover { border-color: var(--gold); color: var(--gold); background: #fff; }

/* ---------- Kauf-Block ---------- */
.sw-buy { margin: 0; }
.sw-buy__delivery {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--muted);
  margin: 0 0 16px;
  padding: 14px 16px;
  background: var(--warm);
  border: 1px solid #ecdcc4;
  border-radius: var(--r-note);
}
/* Persoenlicher Kauflink: hebt sich bewusst vom sachlichen Lieferhinweis ab,
   damit sofort klar ist, dass diese Seite gerade nur fuer sie geoeffnet ist. */
.sw-buy__private {
  font-size: 14px;
  line-height: 1.65;
  color: var(--ink);
  margin: 0 0 16px;
  padding: 14px 16px;
  background: rgba(196, 149, 106, 0.12);
  border: 1px solid var(--gold-soft);
  border-left: 3px solid var(--gold);
  border-radius: var(--r-note);
}
.sw-buy__status { margin: 12px 0 0; font-size: 14px; line-height: 1.55; color: var(--muted); }
.sw-buy__status--err { color: #8a3a3a; }
.sw-buy__secure {
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin: 14px 0 0;
  text-align: center;
}
.sw-buy__ask {
  display: inline-block;
  margin: 18px 0 0;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  font-family: "Lato", sans-serif;
  font-size: 13.5px;
  color: var(--gold);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.sw-buy__ask:hover { color: var(--navy); }
.sw-buy .sw-form__consent { text-align: center; }

/* ===========================================================
   Rechtstext-/Info-Seiten (AGB, Widerruf, Versand, Danke)
   =========================================================== */
.sw-legal__article {
  max-width: 760px;
  margin: 0 auto;
  padding: clamp(40px, 7vw, 88px) clamp(22px, 5vw, 48px) clamp(70px, 9vw, 120px);
}
.sw-legal__title {
  font-family: "Roboto Slab", Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(30px, 4.4vw, 46px);
  line-height: 1.12;
  color: var(--navy);
  margin: 0 0 clamp(28px, 4vw, 44px);
  letter-spacing: -0.02em;
}
.sw-legal__article h2 {
  font-family: "Roboto Slab", Georgia, serif;
  font-weight: 400;
  font-size: clamp(19px, 2vw, 23px);
  color: var(--navy);
  margin: 38px 0 12px;
}
.sw-legal__article p {
  font-size: 15.5px;
  line-height: 1.8;
  color: var(--ink);
  margin: 0 0 14px;
}
.sw-legal__article a { color: var(--gold); }
.sw-legal__lead { font-size: 17px !important; color: var(--navy) !important; }
.sw-legal__box {
  border: 1px solid var(--line);
  border-radius: 3px;
  background: #fff;
  padding: clamp(18px, 3vw, 28px);
  margin: 18px 0 0;
}
.sw-legal__box p { font-size: 14.5px; margin: 0 0 10px; color: var(--muted); }
.sw-legal .sw-btn { margin-top: 20px; }
/* Versandkostentabelle (Versand & Zahlung). Scrollt auf schmalen Displays im
   eigenen Container, damit die Seite selbst nie horizontal scrollt. */
.sw-legal__table {
  display: block;
  width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
  margin: 4px 0 18px;
  font-size: 14.5px;
  line-height: 1.5;
}
.sw-legal__table th,
.sw-legal__table td {
  padding: 9px 14px 9px 0;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.sw-legal__table thead th {
  font-family: "Roboto Slab", Georgia, serif;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.sw-legal__table tbody th { font-weight: 600; color: var(--navy); white-space: normal; }
.sw-legal__table td { color: var(--ink); }

/* ===========================================================
   Karten & Kalender (Editionen) + Warenkorb
   =========================================================== */
/* Warenkorb-Toggle und -Schublade liegen AUSSERHALB von .sw-shop, daher die
   Design-Tokens hier erneut bereitstellen (sonst sind var(--creme) etc. leer
   und der Panel-Hintergrund würde transparent). */
.sw-cart,
.sw-cart-toggle {
  --navy: #1a1a2e;
  --gold: #c4956a;
  --creme: #fdfbf7;
  --warm: #f5ede0;
  --ink: #3a3a3a;
  --muted: #6a6a6a;
  --line: rgba(26, 26, 46, 0.09);
  font-family: "Lato", sans-serif;
}
.sw-cart *, .sw-cart *::before, .sw-cart *::after,
.sw-cart-toggle * { box-sizing: border-box; }
.sw-cart[hidden], .sw-cart-toggle[hidden] { display: none !important; }
.sw-cart [hidden] { display: none !important; }

.sw-btn--small {
  padding: 11px 18px;
  font-size: 11px;
  letter-spacing: 0.16em;
}

/* ---------- Kategorie-Sektionen + Navigation ---------- */
.sw-shop__cat { border-top: 1px solid var(--line); }
.sw-shop__intro--sub {
  padding-top: clamp(48px, 7vw, 84px);
  padding-bottom: clamp(8px, 2vw, 18px);
}
.sw-shopnav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  max-width: 520px;
  margin: 32px auto 0;
  padding-top: 26px;
  border-top: 1px solid var(--line);
}
.sw-shopnav__link {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
  padding: 10px 22px;
  border: 1px solid var(--line);
  border-radius: 100px;
  transition: color 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}
.sw-shopnav__link:hover { color: var(--navy); border-color: rgba(196, 149, 106, 0.6); background: #fff; }

.sw-editions { padding-bottom: clamp(20px, 4vw, 48px); }
.sw-editions__delivery {
  margin: 16px auto 0;
  font-size: 13px;
  letter-spacing: 0.03em;
  color: var(--muted);
}
.sw-editions__grid {
  max-width: 1260px;
  margin: 0 auto;
  padding: clamp(14px, 2.4vw, 28px) clamp(18px, 4vw, 56px) 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: clamp(20px, 2.6vw, 36px);
}
.sw-ecard {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--hair);
  border-radius: var(--r-card);
  overflow: hidden;
  box-shadow: var(--sh-card);
  transition: box-shadow var(--t-card) var(--ease), transform var(--t-card) var(--ease);
}
.sw-ecard:hover {
  transform: translateY(-6px);
  box-shadow: var(--sh-hover);
}
.sw-ecard__imgwrap {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #fff;
  padding: clamp(14px, 2vw, 22px);
  border-bottom: 1px solid var(--hair);
  text-decoration: none;
}
.sw-ecard__img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}
.sw-ecard__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 16px 18px;
  flex: 1;
}
.sw-ecard__kind {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
}
.sw-ecard__title {
  font-family: "Roboto Slab", Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: 18px;
  line-height: 1.22;
  color: var(--navy);
  margin: 0;
}
.sw-ecard__title a { color: inherit; text-decoration: none; transition: color 0.2s ease; }
.sw-ecard__title a:hover { color: var(--gold); }
.sw-ecard__foot {
  margin-top: auto;
  padding-top: 14px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
}
.sw-ecard__price {
  font-family: "Roboto Slab", Georgia, serif;
  font-size: 17px;
  color: var(--navy);
  white-space: nowrap;
}
.sw-ecard__foot .sw-btn {
  width: 100%;
  border-radius: var(--r-pill);
  white-space: nowrap;
  padding: 13px 18px;
}

/* ---------- Editions-Detailseite (Karte/Kalender frontal) ---------- */
.sw-stage--edition {
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(20px, 4vw, 52px);
}
.sw-stage--edition .sw-stage__img {
  width: 100%;
  height: auto;
  max-height: 72vh;
  object-fit: contain;
}

/* ---------- Warenkorb-Button (schwebend) ---------- */
.sw-cart-toggle {
  position: fixed;
  right: clamp(16px, 3vw, 32px);
  bottom: clamp(16px, 3vw, 32px);
  z-index: 60;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 17px;
  border: 1px solid var(--line);
  border-radius: 100px;
  background: rgba(253, 251, 247, 0.9);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: var(--navy);
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(26, 26, 46, 0.13);
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.sw-cart-toggle:hover {
  transform: translateY(-2px);
  border-color: rgba(196, 149, 106, 0.65);
  box-shadow: 0 16px 38px rgba(26, 26, 46, 0.18);
}
.sw-cart-toggle.has-items { border-color: var(--gold); }
.sw-cart-toggle__icon { display: inline-flex; color: var(--navy); }
.sw-cart-toggle__label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--navy);
}
.sw-cart-toggle__count {
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11.5px;
  font-weight: 700;
  border-radius: 100px;
  background: var(--warm);
  color: var(--navy);
}
.sw-cart-toggle.has-items .sw-cart-toggle__count { background: var(--gold); color: #fff; }
@media (max-width: 380px) { .sw-cart-toggle__label { display: none; } }

/* ---------- Warenkorb-Schublade ---------- */
.sw-cart {
  position: fixed;
  inset: 0;
  z-index: 70;
}
.sw-cart__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(26, 26, 46, 0.42);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  animation: swCartFade 0.3s ease;
}
@keyframes swCartFade { from { opacity: 0; } to { opacity: 1; } }
.sw-cart__panel {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: min(420px, 92vw);
  background: var(--creme);
  display: flex;
  flex-direction: column;
  box-shadow: -20px 0 60px rgba(26, 26, 46, 0.24);
  animation: swCartSlide 0.34s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes swCartSlide { from { transform: translateX(100%); } to { transform: translateX(0); } }
.sw-cart__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px clamp(18px, 4vw, 26px);
  border-bottom: 1px solid var(--line);
}
.sw-cart__heading {
  font-family: "Roboto Slab", Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: 24px;
  color: var(--navy);
  margin: 0;
}
.sw-cart__close {
  background: none;
  border: none;
  font-size: 30px;
  line-height: 1;
  color: var(--muted);
  cursor: pointer;
  padding: 0 4px;
  transition: color 0.2s ease, transform 0.2s ease;
}
.sw-cart__close:hover { color: var(--navy); transform: rotate(90deg); }
.sw-cart__empty {
  padding: 48px clamp(18px, 4vw, 26px);
  color: var(--muted);
  font-size: 15px;
  text-align: center;
}
.sw-cart__items {
  list-style: none;
  margin: 0;
  padding: 8px clamp(18px, 4vw, 26px);
  overflow-y: auto;
  flex: 1;
}
.sw-cart__item {
  display: grid;
  grid-template-columns: 60px 1fr auto;
  grid-template-areas: "img info remove" "img qty remove";
  align-items: center;
  column-gap: 14px;
  row-gap: 8px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}
.sw-cart__itemimg {
  grid-area: img;
  width: 60px;
  height: 60px;
  object-fit: contain;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 3px;
}
.sw-cart__iteminfo { grid-area: info; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.sw-cart__itemlink { grid-area: img; display: block; line-height: 0; }
.sw-cart__itemtitle {
  font-family: "Roboto Slab", Georgia, serif;
  font-style: italic;
  font-size: 16px;
  color: var(--navy);
  line-height: 1.2;
  text-decoration: none;
  align-self: flex-start;
  transition: color 0.2s ease;
}
.sw-cart__itemlink:hover .sw-cart__itemimg { border-color: var(--gold); }
.sw-cart__itemtitle:hover { color: var(--gold); }
.sw-cart__itemkind {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
}
.sw-cart__itemprice { font-size: 13px; color: var(--muted); }
.sw-cart__qty {
  grid-area: qty;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  align-self: start;
}
.sw-cart__qtybtn {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--navy);
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.sw-cart__qtybtn:hover { border-color: var(--gold); background: var(--warm); }
.sw-cart__qtynum { min-width: 24px; text-align: center; font-size: 15px; color: var(--navy); }
.sw-cart__remove {
  grid-area: remove;
  align-self: start;
  background: none;
  border: none;
  font-size: 20px;
  line-height: 1;
  color: #b3b3b3;
  cursor: pointer;
  padding: 2px 4px;
  transition: color 0.2s ease;
}
.sw-cart__remove:hover { color: #8a3a3a; }
.sw-cart__foot {
  padding: 18px clamp(18px, 4vw, 26px) clamp(20px, 4vw, 26px);
  border-top: 1px solid var(--line);
  background: var(--warm);
}
/* Versand-/Bonus-Fortschrittsbalken: fuellt sich bis 35 EUR, Meilensteine bei
   10 EUR (versandkostenfrei) und 20 EUR (Gratis-Postkarte). */
.sw-perk { margin: 0 0 20px; }
.sw-perk__track {
  position: relative;
  height: 7px;
  margin: 4px 7px 0;
  border-radius: 100px;
  background: #e7ddcb;
}
.sw-perk__fill {
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 0;
  border-radius: 100px;
  background: linear-gradient(90deg, var(--gold), #d8ab7f);
  transition: width 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}
.sw-perk__node {
  position: absolute; top: 50%;
  width: 14px; height: 14px;
  margin: -7px 0 0 -7px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #d9cdb6;
  transition: border-color 0.3s ease, background 0.3s ease;
  z-index: 1;
}
/* Die Position des Karten-Meilensteins setzt shop.js, weil sie vom Ziel des
   Balkens abhaengt (Versandfrei-Schwelle des Lieferlandes). */
.sw-perk__node[data-perk-node="card"] { left: 42.9%; }
.sw-perk__node[data-perk-node="ship"] { left: 100%; }
.sw-perk__node.is-on { background: var(--gold); border-color: var(--gold); }
.sw-perk__labels { position: relative; height: 32px; margin-top: 10px; }
.sw-perk__lbl {
  position: absolute; top: 0;
  transform: translateX(-50%);
  text-align: center;
  max-width: 48%;
  opacity: 0.65;
  transition: opacity 0.3s ease, color 0.3s ease;
}
.sw-perk__lbl[data-perk-lbl="card"] { left: calc(42.9% + 7px); }
.sw-perk__lbl[data-perk-lbl="ship"] { left: 100%; transform: translateX(-100%); text-align: right; }
.sw-perk__lbl b {
  display: block;
  font-family: "Roboto Slab", Georgia, serif;
  font-style: normal;
  font-size: 13px;
  color: var(--navy);
}
.sw-perk__lbl small { display: block; font-size: 10.5px; letter-spacing: 0.02em; color: var(--muted); }
.sw-perk__lbl.is-on { opacity: 1; }
.sw-perk__lbl.is-on b, .sw-perk__lbl.is-on small { color: var(--gold); }
.sw-perk__msg { margin: 8px 0 16px; font-size: 13px; line-height: 1.5; color: var(--navy); text-align: center; }
/* Lieferlaender ohne Versandkostenfrei-Schwelle (Ausland): der Balken endet bei
   der Gratis-Kunstkarte, der Versand-Meilenstein entfaellt. */
.sw-perk.is-nofreeship .sw-perk__node[data-perk-node="ship"],
.sw-perk.is-nofreeship .sw-perk__lbl[data-perk-lbl="ship"] { display: none; }
.sw-perk.is-nofreeship .sw-perk__node[data-perk-node="card"] { left: 100%; }
.sw-perk.is-nofreeship .sw-perk__lbl[data-perk-lbl="card"] {
  left: 100%;
  transform: translateX(-100%);
  text-align: right;
}

/* Gratis-Kunstkarte: kompakte Zusammenfassung im Warenkorb; die eigentliche
   Auswahl laeuft im Pop-up (.sw-fcmodal), damit die Karten voll sichtbar sind. */
.sw-freecard {
  margin: 2px 0 20px;
  padding: 14px 14px 13px;
  background: var(--warm);
  border: 1px solid var(--gold-soft);
  border-radius: var(--r-note);
}
.sw-freecard--attention { animation: sw-fc-pulse 1.1s var(--ease) 2; }
@keyframes sw-fc-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(196, 149, 106, 0); }
  50% { box-shadow: 0 0 0 4px rgba(196, 149, 106, 0.4); }
}
.sw-freecard__badge {
  display: inline-block;
  font-family: "Roboto Slab", Georgia, serif;
  font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--navy);
  background: rgba(196, 149, 106, 0.18);
  padding: 4px 12px; border-radius: var(--r-pill);
}
/* Zustand "noch nicht gewaehlt": Aufforderung + Button. */
.sw-freecard__cta {
  display: flex; align-items: center; gap: 12px; width: 100%;
  margin-top: 11px; padding: 0; border: 0; background: transparent;
  cursor: pointer; text-align: left;
}
.sw-freecard__cta-text { flex: 1; font-size: 12.5px; line-height: 1.4; color: var(--muted); }
.sw-freecard__cta-action {
  flex: none; font-family: "Roboto Slab", Georgia, serif; font-size: 12.5px;
  font-weight: 600; color: var(--navy);
  border: 1px solid var(--gold); border-radius: var(--r-pill);
  padding: 7px 14px; white-space: nowrap;
  transition: background var(--t-ui) var(--ease), color var(--t-ui) var(--ease);
}
.sw-freecard__cta:hover .sw-freecard__cta-action { background: var(--gold); color: #fff; }
/* Zustand "gewaehlt": Mini-Thumbnail + Name + Aendern. */
.sw-freecard__picked {
  display: flex; align-items: center; gap: 11px; width: 100%;
  margin-top: 11px; padding: 0; border: 0; background: transparent;
  cursor: pointer; text-align: left;
}
.sw-freecard__thumb {
  flex: none; width: 46px; height: 46px; border-radius: 8px; overflow: hidden;
  background: #fff; box-shadow: var(--sh-card);
  display: flex; align-items: center; justify-content: center;
}
.sw-freecard__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sw-freecard__thumbgift { font-family: "Roboto Slab", Georgia, serif; font-size: 22px; color: var(--gold); }
.sw-freecard__pickedname {
  flex: 1; font-size: 13px; line-height: 1.35; color: var(--navy); font-weight: 600;
}
.sw-freecard__change {
  flex: none; font-size: 12px; color: var(--gold); text-decoration: underline;
  text-underline-offset: 2px;
}

/* Auswahl-Pop-up: Karten in voller Groesse, nichts beschnitten. Flex-Zentrierung
   statt Transform, damit das Panel nie ueber den sichtbaren Bereich hinauslaeuft;
   unten Safe-Area (iOS Home-Indikator/Safari-Leiste) freihalten. */
.sw-fcmodal {
  position: fixed; top: 0; left: 0; right: 0; z-index: 80;
  height: 100vh;   /* Fallback fuer Browser ohne dvh */
  height: 100dvh;  /* dynamische Viewport-Hoehe: schliesst die sichtbare
                      Safari-Leiste aus, damit nichts dahinter verschwindet */
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  padding-top: max(16px, env(safe-area-inset-top));
  padding-bottom: max(16px, env(safe-area-inset-bottom));
}
.sw-fcmodal[hidden] { display: none !important; }
.sw-fcmodal__backdrop {
  position: fixed; inset: 0;
  background: rgba(26, 26, 46, 0.5);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  animation: swCartFade 0.25s ease;
}
.sw-fcmodal__panel {
  position: relative;
  width: min(1080px, 95vw); max-height: 100%;
  display: flex; flex-direction: column;
  background: var(--creme); border-radius: var(--r-card);
  box-shadow: 0 30px 80px -20px rgba(26, 26, 46, 0.55);
  overflow: hidden;
  animation: sw-fcmodal-in 0.28s var(--ease);
}
@keyframes sw-fcmodal-in {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}
.sw-fcmodal__head {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 20px 20px 14px; border-bottom: 1px solid var(--gold-soft);
}
.sw-fcmodal__titles { flex: 1; }
.sw-fcmodal__sub { margin: 9px 0 0; font-size: 13px; line-height: 1.45; color: var(--muted); }
.sw-fcmodal__close {
  flex: none; border: 0; background: transparent; cursor: pointer;
  font-size: 26px; line-height: 1; color: var(--muted); padding: 0 2px;
}
.sw-fcmodal__close:hover { color: var(--navy); }
.sw-fcmodal__grid {
  flex: 1; overflow-y: auto; padding: 22px 26px;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 20px;
  -webkit-overflow-scrolling: touch;
}
@media (max-width: 640px) {
  .sw-fcmodal__grid { grid-template-columns: repeat(2, 1fr); gap: 14px; padding: 16px 16px; }
}
.sw-fcmodal__foot {
  flex: none; padding: 14px 20px 18px; border-top: 1px solid var(--gold-soft);
  background: var(--creme);
}
.sw-fctile {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 0; border: 0; background: transparent; cursor: pointer; text-align: center;
}
/* Alle Rahmen exakt gleich gross (Kartenformat 4:3), damit die Kacheln einheitlich
   wirken und die Titel auf einer Hoehe stehen. Bild absolut positioniert, damit
   aspect-ratio zuverlaessig haelt (nicht vom Bildinhalt aufgezogen wird). object-fit
   contain haelt jede Karte voll sichtbar; das Innen-Padding wirkt wie ein Passepartout. */
.sw-fctile__frame {
  width: 100%; aspect-ratio: 4 / 3; border-radius: 10px;
  background: #fff; box-shadow: var(--sh-card);
  border: 2px solid transparent;
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  transition: border-color var(--t-ui) var(--ease), transform var(--t-ui) var(--ease), box-shadow var(--t-ui) var(--ease);
}
.sw-fctile__img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; display: block; padding: 9px;
}
/* Ueberraschungs-Kachel: klar als eigene Option erkennbar (gestrichelter Gold-
   rahmen + warmer Verlauf + Gold-Kreis mit Fragezeichen statt fast unsichtbarem
   weissen Kaestchen auf dem cremefarbenen Hintergrund). */
.sw-fctile--surprise .sw-fctile__frame {
  background: linear-gradient(158deg, #fff 0%, var(--warm) 100%);
  border: 2px dashed var(--gold);
}
.sw-fctile--surprise:hover .sw-fctile__frame { border-color: var(--gold); }
.sw-fctile__gift {
  width: 64px; height: 64px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--gold); color: #fff;
  font-family: "Roboto Slab", Georgia, serif; font-size: 34px; line-height: 1;
  box-shadow: 0 6px 16px -6px rgba(196, 149, 106, 0.8);
}
.sw-fctile--surprise.is-selected .sw-fctile__frame {
  border-style: solid; border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(196, 149, 106, 0.25), var(--sh-card);
}
.sw-fctile__name { font-size: 12px; line-height: 1.3; color: var(--muted); }
.sw-fctile__desc { font-size: 10.5px; line-height: 1.25; color: var(--muted); opacity: 0.85; margin-top: -4px; }
.sw-fctile:hover .sw-fctile__frame { transform: translateY(-2px); }
.sw-fctile.is-selected .sw-fctile__frame {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(196, 149, 106, 0.25), var(--sh-card);
}
.sw-fctile.is-selected .sw-fctile__name { color: var(--navy); font-weight: 600; }
.sw-fctile--surprise .sw-fctile__name { color: var(--navy); font-weight: 600; }
/* Lieferland: bestimmt die Versandzone. Die Saetze stehen in shop/shipping.js. */
.sw-cart__country { margin: 0 0 14px; }
.sw-cart__countrylbl {
  display: block;
  margin-bottom: 6px;
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.sw-cart__countrysel {
  width: 100%;
  padding: 10px 12px;
  font: inherit;
  font-size: 14.5px;
  color: var(--navy);
  background: #fff;
  border: 1px solid var(--hair);
  border-radius: var(--r-note);
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23204060' stroke-width='1.6'%3E%3Cpath d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px 8px;
  padding-right: 34px;
}
.sw-cart__countrysel:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
/* Zwischenzeilen (Summe, Versand) ueber dem Gesamtbetrag. */
.sw-cart__line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-size: 13.5px;
  color: var(--muted);
  margin-bottom: 6px;
}
.sw-cart__total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-size: 14px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 10px 0 4px;
  padding-top: 10px;
  border-top: 1px solid var(--hair);
}
.sw-cart__total strong {
  font-family: "Roboto Slab", Georgia, serif;
  font-size: 24px;
  color: var(--navy);
}
.sw-cart__note { font-size: 12.5px; line-height: 1.55; color: var(--muted); margin: 0 0 16px; }
.sw-cart__foot .sw-form__consent { text-align: center; margin-top: 14px; }
.sw-cart__status { margin: 12px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--muted); text-align: center; }
.sw-cart__status--err { color: #8a3a3a; }
body.sw-cart-open { overflow: hidden; }

/* ===========================================================
   Shop-Übersicht (Kategorie-Kacheln) · Sticky-Fix · Detail-Feinschliff
   =========================================================== */
/* Sticky-Fix: globales `overflow-x:hidden` auf html/body (sw-custom.css) macht
   body zum Scroll-Container und bricht position:sticky. `clip` clippt horizontal
   genauso, erzeugt aber KEINEN Scroll-Container -> Sticky lebt wieder. */
html, body { overflow-x: clip !important; }

/* Kategorie-Kacheln */
.sw-cats {
  max-width: 1100px;
  margin: 0 auto;
  padding: clamp(10px, 2vw, 24px) clamp(18px, 4vw, 56px) clamp(72px, 9vw, 120px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: clamp(28px, 3.5vw, 56px);
}
@media (max-width: 760px) { .sw-cats { grid-template-columns: 1fr; max-width: 440px; } }

/* Editions-Bildgalerie (Kalender-Detailseite): Vorschau-Rail mit Titelbild +
   Beispielblatt links neben der grossen Buehne. Die Thumbnails sitzen oben und
   sind sofort ohne Scrollen sichtbar; Klick tauscht Hauptbild + Zoom-Overlay. */
.sw-gallery {
  display: flex;
  align-items: flex-start;
  gap: clamp(10px, 1.2vw, 16px);
}
.sw-gallery__rail {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 1.4vw, 14px);
  width: clamp(58px, 7.5vw, 86px);
}
.sw-gallery .sw-stage { flex: 1 1 auto; min-width: 0; }
.sw-gallery__thumb {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  padding: 5px;
  background: #fff;
  border: 1px solid var(--hair);
  border-radius: 10px;
  cursor: pointer;
  overflow: hidden;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.sw-gallery__thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  border-radius: 5px;
}
.sw-gallery__thumb:hover { border-color: var(--gold); }
.sw-gallery__thumb.is-active {
  border-color: var(--navy);
  box-shadow: 0 0 0 1px var(--navy);
}
.sw-gallery__badge {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 3px 2px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
  color: #fff;
  background: rgba(26, 26, 46, 0.74);
}
.sw-cat { display: flex; flex-direction: column; text-decoration: none; color: inherit; }
.sw-cat__imgwrap {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--hair);
  border-radius: var(--r-card);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(20px, 6%, 40px);
  box-shadow: var(--sh-card);
  transition: transform var(--t-card) var(--ease), box-shadow var(--t-card) var(--ease);
}
.sw-cat:hover .sw-cat__imgwrap { transform: translateY(-6px); box-shadow: var(--sh-hover); }
.sw-cat__img {
  max-width: 86%;
  max-height: 86%;
  width: auto;
  height: auto;
  object-fit: contain;
  object-position: center;
  display: block;
  border-radius: var(--r-art);
  box-shadow: var(--sh-art);
}
.sw-cat__body { padding: 16px 6px 0; text-align: center; }
.sw-cat__eyebrow { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); margin-bottom: 9px; }
.sw-cat__title { font-family: "Roboto Slab", Georgia, serif; font-style: italic; font-weight: 400; font-size: clamp(24px, 3vw, 31px); color: var(--navy); margin: 0 0 7px; }
.sw-cat__count { font-size: 13px; letter-spacing: 0.04em; color: var(--muted); }

/* Kategorie-Unterseite: Zurück-Link oben links */
.sw-back--cat { margin: clamp(22px, 3vw, 38px) 0 0 clamp(18px, 4vw, 56px); }

/* aktive Kategorie in der Sub-Navigation (dezent goldgetönte Filter-Chip) */
.sw-shopnav__link.is-active { color: var(--navy); border-color: var(--gold); background: rgba(196, 149, 106, 0.12); }

/* Detailseite: rechte Spalte sicher sticky */
.sw-info { position: -webkit-sticky; position: sticky; top: clamp(84px, 9vh, 104px); align-self: start; }

/* Detailseite: „Frage zu diesem Werk" als dezenter, mittiger Mini-Button */
.sw-buy__ask {
  display: block;
  width: fit-content;
  margin: 22px auto 0;
  padding: 10px 20px;
  border: 1px solid var(--line);
  border-radius: 100px;
  background: transparent;
  text-decoration: none;
  font-family: "Lato", sans-serif;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--muted);
  cursor: pointer;
  transition: color 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}
.sw-buy__ask:hover { color: var(--navy); border-color: rgba(196, 149, 106, 0.6); background: #fff; }

/* ===========================================================
   Vertrauens-Zeile (Detailseite), nur nachweislich Wahres
   =========================================================== */
.sw-trust {
  margin: 22px 0 0;
  padding: 16px 18px;
  background: #fff;
  border: 1px solid var(--hair);
  border-radius: var(--r-note);
  display: grid;
  gap: 12px;
}
.sw-trust__item {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 12px;
  align-items: start;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink);
}
.sw-trust__item svg { width: 18px; height: 18px; color: var(--gold); margin-top: 1px; }
.sw-trust__item strong { color: var(--navy); font-weight: 700; }

/* ===========================================================
   Klick-zum-Zoomen (reines CSS, Schutzschicht bleibt erhalten)
   =========================================================== */
.sw-zoom__toggle { position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0; }
.sw-zoom__open { display: block; cursor: zoom-in; }
.sw-zoom__overlay {
  position: fixed;
  inset: 0;
  z-index: 10001;
  display: none;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 4vw, 48px);
  background: rgba(26, 26, 46, 0.92);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  cursor: zoom-out;
}
.sw-zoom__overlay img {
  max-width: min(92vw, 1100px);
  max-height: 92vh;
  width: auto;
  height: auto;
  border-radius: var(--r-art);
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.5);
}
.sw-zoom__toggle:checked ~ .sw-zoom__overlay { display: flex; animation: swZoomFade 0.25s ease; }
.sw-zoom__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  color: #fff;
  background: rgba(26, 26, 46, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.2s ease;
}
.sw-zoom__nav:hover { background: rgba(26, 26, 46, 0.8); }
.sw-zoom__nav--prev { left: clamp(6px, 2vw, 24px); }
.sw-zoom__nav--next { right: clamp(6px, 2vw, 24px); }
@media (max-width: 640px) {
  .sw-zoom__nav { width: 38px; height: 38px; }
}
.sw-zoom__hint {
  position: absolute;
  right: 14px;
  bottom: 14px;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--navy);
  background: rgba(253, 251, 247, 0.92);
  border: 1px solid var(--gold-soft);
  border-radius: var(--r-pill);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.sw-stage:hover .sw-zoom__hint { opacity: 1; }
@keyframes swZoomFade { from { opacity: 0; } to { opacity: 1; } }

/* ===========================================================
   Mobile Sticky-Kaufleiste (erscheint, wenn der Haupt-CTA aus dem Bild scrollt)
   =========================================================== */
.sw-stickybar { display: none; }
@media (max-width: 900px) {
  .sw-stickybar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 55;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 10px clamp(14px, 4vw, 22px);
    background: #fffdf8;
    border-top: 1px solid var(--hair);
    box-shadow: 0 -10px 30px rgba(26, 26, 46, 0.12);
    transform: translateY(120%);
    transition: transform 0.35s var(--ease);
  }
  .sw-stickybar.is-visible { transform: translateY(0); }
  .sw-stickybar__info { display: flex; flex-direction: column; min-width: 0; }
  .sw-stickybar__title {
    font-family: "Roboto Slab", Georgia, serif;
    font-style: italic;
    font-size: 15px;
    color: var(--navy);
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .sw-stickybar__price { font-size: 13px; color: var(--muted); }
  .sw-stickybar .sw-btn { flex: 0 0 auto; padding: 13px 22px; }
  /* Warenkorb-Button über die Kaufleiste heben, solange diese sichtbar ist */
  body.sw-stickybar-on .sw-cart-toggle { bottom: 78px; }
}

/* ===========================================================
   Zwischenscreen vor dem Stripe-Checkout (Bestätigung + Reservierungs-Hinweis)
   =========================================================== */
.sw-confirm {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 4vw, 40px);
}
.sw-confirm[hidden] { display: none !important; }
.sw-confirm__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(26, 26, 46, 0.55);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  animation: swCartFade 0.3s ease;
}
.sw-confirm__panel {
  position: relative;
  z-index: 1;
  width: min(760px, 100%);
  max-height: 92vh;
  overflow-y: auto;
  background: var(--creme);
  border-radius: var(--r-card);
  box-shadow: 0 40px 90px rgba(26, 26, 46, 0.4);
  display: grid;
  grid-template-columns: 1fr;
  animation: swConfirmIn 0.3s var(--ease);
}
@media (min-width: 680px) {
  .sw-confirm__panel { grid-template-columns: minmax(0, 0.92fr) minmax(0, 1fr); }
}
@keyframes swConfirmIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.sw-confirm__close {
  position: absolute;
  top: 12px;
  right: 14px;
  z-index: 2;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(253, 251, 247, 0.85);
  border: 1px solid var(--hair);
  border-radius: var(--r-pill);
  font-size: 22px;
  line-height: 1;
  color: var(--muted);
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.sw-confirm__close:hover { color: var(--navy); border-color: var(--gold-soft); }
.sw-confirm__media {
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(20px, 3vw, 32px);
  border-bottom: 1px solid var(--hair);
}
@media (min-width: 680px) {
  .sw-confirm__media { border-bottom: 0; border-right: 1px solid var(--hair); }
}
.sw-confirm__media img {
  max-width: 100%;
  max-height: 46vh;
  width: auto;
  height: auto;
  border-radius: var(--r-art);
  box-shadow: var(--sh-art);
}
.sw-confirm__body { padding: clamp(22px, 3vw, 34px); display: flex; flex-direction: column; }
.sw-confirm__eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); }
.sw-confirm__title {
  font-family: "Roboto Slab", Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(24px, 3vw, 32px);
  color: var(--navy);
  margin: 8px 0 0;
  line-height: 1.12;
}
.sw-confirm__price { font-family: "Roboto Slab", Georgia, serif; font-size: 24px; color: var(--navy); margin: 12px 0 0; }
.sw-confirm__lead { font-size: 15px; line-height: 1.65; color: var(--ink); margin: 14px 0 0; }
.sw-confirm__resv {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 12px;
  align-items: start;
  margin: 16px 0 20px;
  padding: 14px 16px;
  background: var(--warm);
  border: 1px solid #ecdcc4;
  border-radius: var(--r-note);
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink);
}
.sw-confirm__resv svg { color: var(--gold); margin-top: 1px; }
.sw-confirm__secure { font-size: 12px; color: var(--muted); text-align: center; margin: 12px 0 0; }
.sw-confirm [data-confirm-status] { text-align: center; }
.sw-confirm__back {
  margin: 14px auto 0;
  background: none;
  border: none;
  cursor: pointer;
  font-family: "Lato", sans-serif;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.sw-confirm__back:hover { color: var(--navy); }
body.sw-confirm-open { overflow: hidden; }

/* ===========================================================
   Cross-Selling auf der Werk-Detailseite (Kalender & Karten als Preisanker)
   =========================================================== */
.sw-cross {
  border-top: 1px solid var(--line);
  margin-top: clamp(20px, 4vw, 44px);
  padding-top: clamp(40px, 6vw, 72px);
}
.sw-cross__intro {
  text-align: center;
  max-width: 640px;
  margin: 0 auto;
  padding: 0 clamp(18px, 4vw, 56px);
}
.sw-cross__title {
  font-family: "Roboto Slab", Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(24px, 3vw, 34px);
  color: var(--navy);
  margin: 10px 0 14px;
  line-height: 1.15;
}
.sw-cross__lead { font-size: 16px; line-height: 1.7; color: var(--muted); margin: 0; }
.sw-cross__grid { margin-top: clamp(24px, 3vw, 40px); }
.sw-cross__more {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  padding: clamp(22px, 3vw, 34px) 18px clamp(8px, 2vw, 16px);
}