/* ==========================================================================
   VENTIVA — 04 Single Product
   Ziel: Preis, Vertrauen und Kaufbutton liegen immer im ersten Bildschirm,
   alles Erklärende darunter im Accordion.
   ========================================================================== */

.v-pdp { padding-block: clamp(1.5rem, .5rem + 3vw, 3rem) var(--v-section); }

.v-pdp__breadcrumb {
  font-family: var(--v-mono);
  font-size: var(--fs-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--v-ink-60);
  margin-bottom: clamp(1.2rem, .6rem + 1.5vw, 2.2rem);
}
.v-pdp__breadcrumb a { text-decoration: none; }
.v-pdp__breadcrumb a:hover { color: var(--v-ink); }

.v-pdp__layout { align-items: start; }
.v-pdp__gallery { grid-column: 1 / span 7; }
.v-pdp__summary {
  grid-column: 8 / span 5;
  position: sticky;
  top: 2rem;
}

/* --- Galerie ------------------------------------------------------------ */
.v-gallery { display: grid; gap: 10px; }
.v-gallery__main {
  border-radius: var(--v-radius-lg);
  overflow: hidden;
  background: var(--v-paper);
  aspect-ratio: 4 / 5;
}
.v-gallery__main img { width: 100%; height: 100%; object-fit: cover; }

.v-gallery__thumbs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.v-gallery__thumb {
  border: 0;
  padding: 0;
  cursor: pointer;
  border-radius: var(--v-radius);
  overflow: hidden;
  aspect-ratio: 1 / 1;
  background: var(--v-paper);
  box-shadow: inset 0 0 0 1px var(--v-line);
  transition: box-shadow var(--v-fast) var(--v-ease);
}
.v-gallery__thumb img { width: 100%; height: 100%; object-fit: cover; }
.v-gallery__thumb[aria-current="true"] { box-shadow: inset 0 0 0 2px var(--v-deep); }

/* --- Summary ------------------------------------------------------------ */
.v-pdp__title { margin: 0 0 .8rem; }
.v-pdp__claim { color: var(--v-ink-60); font-size: var(--fs-lg); margin: 0 0 1.6rem; }

.v-pdp__pricerow {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .4rem .9rem;
  margin-bottom: 1rem;
}
.v-pdp__pricerow .price,
.v-pdp__pricerow .woocommerce-Price-amount {
  font-family: var(--v-display);
  font-stretch: 112%;
  font-size: clamp(1.8rem, 1.3rem + 1.6vw, 2.5rem);
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1;
  color: var(--v-ink);
  margin: 0;
}
/* Streichpreis.

   Die Größe muss am INNEREN Span gesetzt werden, nicht am del: WooCommerce
   packt den Betrag in <span class="woocommerce-Price-amount">, und der trifft
   weiter oben (Zeile 68) auf die grosse Preisregel mit clamp(1.8rem …). Eine
   Vorgabe am del wird davon überstimmt — beide Preise standen dadurch gleich
   gross nebeneinander, und die Durchstreichung wirkte auf dem grossen Betrag
   wie eine Unterstreichung.

   text-decoration ausdrücklich: WooCommerce' eigenes Stylesheet setzt für del
   eigene Regeln, und darauf ist kein Verlass (siehe Falle 4 im Übergabe-
   dokument — ein Optimierungs-Plugin holt woocommerce.css zurück). */
.v-pdp__pricerow del,
.v-pdp__pricerow del .woocommerce-Price-amount {
  font-size: clamp(1rem, .85rem + .5vw, 1.25rem);
  font-weight: 500;
  color: var(--v-ink-60);
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
  text-decoration-color: currentColor;
}

/* Der aktuelle Preis trägt die Aufmerksamkeit, nicht der alte. Das ins-Element
   selbst darf nichts unterstreichen — der Browser tut das ab Werk. */
.v-pdp__pricerow ins,
.v-pdp__pricerow ins .woocommerce-Price-amount { text-decoration: none; }
.v-pdp__pricerow ins { text-decoration: none; }
.v-pdp__taxnote {
  font-family: var(--v-mono);
  font-size: var(--fs-mono);
  color: var(--v-ink-60);
  letter-spacing: .04em;
}

/* Steuer-/Versandzusatz, den WooCommerce an get_price_html() hängt.
   Inhalt kommt aus den Woo-Einstellungen und kann lang sein (bei einem
   Kleinunternehmer der Hinweis nach § 19 UStG). Eigene Zeile, damit er nicht
   neben dem grossen Preis klebt und die Zeile sprengt. */
.v-pdp__pricerow { min-width: 0; }
.v-pdp__pricerow .woocommerce-price-suffix,
.v-pdp__pricerow small {
  flex-basis: 100%;
  margin-top: .2rem;
  font-family: var(--v-mono);
  font-size: var(--fs-mono);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: .02em;
  color: var(--v-ink-60);
  overflow-wrap: anywhere;
}
.v-pdp__pricerow .woocommerce-price-suffix a { color: inherit; }

/* Die Vertrauens-Zeile selbst steht in 02-base.css: Warenkorb und Kasse geben
   dieselbe Liste über ventiva_trust_list() aus, laden diesen Layer hier aber
   nicht. Ohne die Regeln bekommen die Icons keine Größe — und ein SVG ohne
   width/height füllt die ganze Spalte. */

.v-stock {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-family: var(--v-mono);
  font-size: var(--fs-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--v-ink-60);
  margin-bottom: 1.2rem;
}
.v-stock__dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #3F8F5F;
  box-shadow: 0 0 0 4px rgba(63, 143, 95, .18);
}

/* ventiva_single_stock() setzt diesen Modifier bei fehlendem Bestand, definiert
   war er nie: "Aktuell nicht verfügbar" stand mit demselben grünen Punkt da wie
   "auf Lager". Die Farbe ist gedämpft, nicht alarmrot — die Aussage steht im
   Text, der Punkt soll ihr nur nicht widersprechen. */
.v-stock--out { color: var(--v-ink-60); }
.v-stock--out .v-stock__dot {
  background: #8E7B5C;
  box-shadow: 0 0 0 4px rgba(142, 123, 92, .18);
}

/* Cart-Form */
.v-pdp__summary form.cart {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .8rem;
  align-items: center;
  margin: 0 0 1.2rem;
}
.v-pdp__summary form.cart .quantity {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px var(--v-line);
  overflow: hidden;
  height: 52px;
}
.v-pdp__summary form.cart .quantity input {
  width: 68px;
  height: 52px;
  border: 0;
  background: transparent;
  text-align: center;
  font-family: var(--v-body);
  font-size: var(--fs-base);
  font-weight: 600;
  color: inherit;
  -moz-appearance: textfield;
}
.v-pdp__summary form.cart .quantity input::-webkit-outer-spin-button,
.v-pdp__summary form.cart .quantity input::-webkit-inner-spin-button {
  -webkit-appearance: none; margin: 0;
}
.v-pdp__summary form.cart button.single_add_to_cart_button {
  height: 52px;
  border-radius: 999px;
  border: 0;
  background: var(--v-heat);
  color: var(--v-ink);
  font-family: var(--v-body);
  font-size: var(--fs-base);
  font-weight: 600;
  cursor: pointer;
  transition: background var(--v-fast) var(--v-ease);
}
.v-pdp__summary form.cart button.single_add_to_cart_button:hover { background: var(--v-heat-deep); }

/* Die Komponente .v-payments selbst steht in 06-chrome.css, weil sie auch im
   Footer auf jeder Seite läuft. Hier nur der Abstand im Kaufbereich. */
.v-pdp__summary .v-payments { margin-bottom: 2rem; }

/* --- Varianten als Segmented Control ------------------------------------ */
/* Aufgebaut von ventiva.js aus dem echten <select>. Ohne JS steht hier das
   normale Dropdown — deshalb bekommt auch das einen ordentlichen Stil. */
.v-pdp__summary table.variations { width: 100%; border-collapse: collapse; margin-bottom: 1.2rem; }
.v-pdp__summary table.variations th,
.v-pdp__summary table.variations td { display: block; text-align: left; padding: 0; }
.v-pdp__summary table.variations th.label label {
  font-family: var(--v-mono);
  font-size: var(--fs-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--v-ink-60);
  display: block;
  margin-bottom: .6rem;
}
.v-pdp__summary table.variations td.value { margin-bottom: 1.1rem; }

.v-pdp__summary .variations select {
  width: 100%;
  padding: .9rem 1.1rem;
  border: 0;
  border-radius: var(--v-radius);
  background: var(--v-paper);
  box-shadow: inset 0 0 0 1px var(--v-line);
  font-family: var(--v-body);
  font-size: var(--fs-base);
  color: var(--v-ink);
}

.v-variant {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

.v-variant__opt {
  flex: 1 1 auto;
  min-width: 84px;
  padding: .82rem 1.1rem;
  border: 0;
  border-radius: 999px;
  background: var(--v-paper);
  box-shadow: inset 0 0 0 1px var(--v-line);
  font-family: var(--v-body);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--v-ink-60);
  cursor: pointer;
  transition: box-shadow var(--v-fast) var(--v-ease),
              color var(--v-fast) var(--v-ease),
              background var(--v-fast) var(--v-ease);
}
.v-variant__opt:hover:not([disabled]) { color: var(--v-ink); }

/* Gewählt: dunkle Fläche, kein Amber. Amber ist auf dieser Seite für den
   Kaufbutton reserviert — zwei amberfarbene Flächen im selben Block würden
   die Aufmerksamkeit teilen. */
.v-variant__opt[aria-checked="true"] {
  background: var(--v-deep);
  color: #F2F6F3;
  box-shadow: inset 0 0 0 1px var(--v-deep);
}

/* Nicht kombinierbar: durchgestrichen statt nur blass — blass allein liest
   sich wie "ausgegraut, weil gerade geladen wird". */
.v-variant__opt[disabled] {
  cursor: not-allowed;
  color: var(--v-ink-40);
  text-decoration: line-through;
  background: transparent;
}

.v-pdp__summary .reset_variations {
  display: inline-block;
  margin-top: .3rem;
  font-size: var(--fs-sm);
  color: var(--v-ink-60);
}

/* Preis und Verfügbarkeit der gewählten Variante */
.v-pdp__summary .woocommerce-variation-price { margin-bottom: 1rem; }
.v-pdp__summary .woocommerce-variation-availability p { margin: 0 0 1rem; font-size: var(--fs-sm); }

/* --- Accordion statt Tabs ----------------------------------------------- */
.v-acc { border-top: 1px solid var(--v-line); }
.v-acc__item { border-bottom: 1px solid var(--v-line); }
.v-acc__btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 0;
  border: 0;
  background: transparent;
  color: inherit;
  font-family: var(--v-display);
  font-stretch: 106%;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -.01em;
  text-align: left;
  cursor: pointer;
}
.v-acc__btn::after {
  content: "";
  flex: none;
  width: 11px; height: 11px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform var(--v-fast) var(--v-ease);
}
.v-acc__btn[aria-expanded="true"]::after { transform: rotate(-135deg) translateY(-2px); }
/* Weiches Auf- und Zuklappen über grid-template-rows 0fr → 1fr.
   Warum nicht das hidden-Attribut wie vorher: hidden setzt display:none,
   und darauf lässt sich nichts animieren. Warum nicht max-height: Man müsste
   eine Höhe raten, und bei zu kleinem Wert wird Text abgeschnitten.

   visibility übernimmt die Rolle, die hidden hatte — im zugeklappten
   Zustand ist der Inhalt weder per Tabulator erreichbar noch für
   Screenreader sichtbar. Sie wird erst am Ende der Animation umgeschaltet,
   deshalb die Verzögerung in der transition.

   prefers-reduced-motion braucht hier keine Extrawurst: 02-base.css setzt
   global transition-duration auf ~0, das Panel springt dann. */
.v-acc__panel {
  display: grid;
  grid-template-rows: 0fr;
  visibility: hidden;
  color: var(--v-ink-60);
  font-size: var(--fs-sm);
  line-height: 1.7;
  transition: grid-template-rows var(--v-slow) var(--v-ease-out),
              visibility 0s linear var(--v-slow);
}
.v-acc__panel.is-open {
  grid-template-rows: 1fr;
  visibility: visible;
  transition: grid-template-rows var(--v-slow) var(--v-ease-out),
              visibility 0s;
}

/* Ohne JavaScript bleibt jedes Panel auf 0fr stehen und ist damit nicht mehr
   zu öffnen: Details, Maße und FAQ wären schlicht nicht lesbar. Läuft kein
   Skript, stehen sie deshalb offen — dann ist es eine lange Seite statt einer
   leeren. Die Markierung setzt initAccordion() in ventiva.js. */
[data-v-acc]:not(.is-interactive) .v-acc__panel {
  grid-template-rows: 1fr;
  visibility: visible;
}
[data-v-acc]:not(.is-interactive) .v-acc__inner { padding-bottom: 1.5rem; }
[data-v-acc]:not(.is-interactive) .v-acc__btn::after { display: none; }

/* Der innere Container muss overflow: hidden tragen — die Grid-Zeile selbst
   schneidet nicht ab. */
.v-acc__inner { overflow: hidden; min-height: 0; }
.v-acc__panel.is-open .v-acc__inner { padding-bottom: 1.5rem; }

.v-acc__inner > :first-child { margin-top: 0; }
.v-acc__inner > :last-child { margin-bottom: 0; }
.v-acc__inner table { width: 100%; border-collapse: collapse; }
.v-acc__inner th,
.v-acc__inner td { text-align: left; padding: .55rem 0; border-bottom: 1px solid var(--v-line); font-weight: 400; }
.v-acc__inner th { font-family: var(--v-mono); font-size: var(--fs-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--v-ink-60); width: 42%; }

/* --- FAQ ----------------------------------------------------------------- */
/* Eigener Block unter den Detail-Akkordeons. Gleiche Accordion-Komponente,
   aber alle Panels starten zu und mehrere dürfen gleichzeitig offen sein —
   man vergleicht hier Antworten, statt sich durch Kapitel zu arbeiten. */
.v-faq-section { margin-top: clamp(3.5rem, 2.5rem + 5vw, 7rem); }

.v-faq__head { grid-column: 1 / span 5; }
.v-faq__body { grid-column: 7 / span 6; }

@media (max-width: 900px) {
  .v-faq__head { grid-column: 1 / -1; }
  .v-faq__body { grid-column: 1 / -1; margin-top: 2rem; }
}

.v-faq__title { font-size: var(--fs-h3); margin-top: .2rem; }

/* Fragen dürfen etwas grösser stehen als die Detail-Überschriften — sie sind
   der Einstieg in diesen Block, nicht eine Ebene darunter. */
.v-faq .v-acc__btn { font-size: 1.1rem; padding-block: 1.35rem; align-items: flex-start; }
.v-faq .v-acc__btn::after { margin-top: .38rem; }
.v-faq .v-acc__inner p { margin: 0; max-width: 62ch; }

/* --- Zusagen-Banner über dem Footer -------------------------------------- */
.v-trustbar {
  padding-block: clamp(2.5rem, 2rem + 3vw, 4rem);
  /* Hebt die untere Innenabstand von .v-pdp auf, damit zwischen Banner und
     Footer genau ein Sektionsabstand steht und nicht zwei. */
  margin-bottom: calc(var(--v-section) * -1);
}

.v-trustbar__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 1rem + 2vw, 3rem);
}
@media (max-width: 860px) { .v-trustbar__grid { grid-template-columns: minmax(0, 1fr); } }

.v-trustbar__item {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
}

/* Kein Amber: Der Banner ist eine Zusage, kein Klickziel. Das Petrol-Kalt
   der Druckskala markiert ihn als "entlastet"-Ende der Achse. */
.v-trustbar__icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .08);
  color: var(--v-cool);
}
.v-trustbar__icon svg { width: 18px; height: 18px; }

.v-trustbar__body { display: grid; gap: .25rem; }
.v-trustbar__title { font-weight: 600; font-size: var(--fs-base); line-height: 1.3; }
.v-trustbar__text { font-size: var(--fs-sm); color: var(--v-ink-60); }

/* --- Sticky Add-to-Cart -------------------------------------------------- */
.v-sticky {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 90;
  transform: translateY(105%);
  transition: transform .34s var(--v-ease-out);
  background: rgba(255, 255, 255, .88);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--v-line);
  padding: .7rem 0 calc(.7rem + env(safe-area-inset-bottom));
}
.v-sticky.is-visible { transform: none; }

/* Am Seitenende deckt die Leiste sonst die unterste Zeile des Footers zu.
   Der Zuschlag entspricht ihrer Höhe samt Innenabstand und der sicheren Zone
   auf Geräten mit Hausleiste. Nur auf Produktseiten, denn nur dort gibt es
   sie — .woocommerce-page allein reicht nicht, das trägt auch der Warenkorb.
   Die Leiste läuft auf allen Breiten, also gilt der Zuschlag auch überall. */
.single-product .v-footer { padding-bottom: calc(4.5rem + env(safe-area-inset-bottom)); }

.v-sticky__inner {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.v-sticky__media {
  width: 46px; height: 46px; flex: none;
  border-radius: 10px; overflow: hidden; background: var(--v-mist);
}
.v-sticky__media img { width: 100%; height: 100%; object-fit: cover; }
.v-sticky__meta { min-width: 0; flex: 1; }
.v-sticky__name {
  font-weight: 600;
  font-size: var(--fs-sm);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  display: block;
}
.v-sticky__price { font-family: var(--v-mono); font-size: var(--fs-mono); color: var(--v-ink-60); }
.v-sticky__btn { flex: none; padding-inline: 1.6rem; }

@media (max-width: 34em) {
  .v-sticky__media { display: none; }
  .v-sticky__btn { flex: 1; }
}

/* Details und Testhinweis unter dem Kaufbereich. Standen bis eben als
   style="grid-column: …" direkt im Markup — und ein Inline-Style lässt sich
   per Media Query nicht zurücknehmen, ohne !important zu bemühen. Auf dem
   Telefon blieben die beiden deshalb bei sieben und vier von zwölf Spalten
   stehen: zwei Schluchten mit je einer Handvoll Zeichen pro Zeile. */
.v-pdp__details { grid-column: 1 / span 7; }
.v-pdp__side    { grid-column: 9 / span 4; }

@media (max-width: 61.24em) {
  .v-pdp__details,
  .v-pdp__side { grid-column: 1 / -1; }
  .v-pdp__side { margin-top: 2rem; }
}

/* --- Responsive PDP ------------------------------------------------------ */
@media (max-width: 61.24em) {
  .v-pdp__gallery,
  .v-pdp__summary { grid-column: 1 / -1; }
  .v-pdp__summary { position: static; }
}

/* --- Rückmeldungen auf der Produktseite ---------------------------------- */
.v-pdp__proof { margin-top: clamp(3.5rem, 2.5rem + 5vw, 7rem); }
.v-pdp__proofnote {
  margin: 1rem 0 0;
  font-size: var(--fs-sm);
  color: var(--v-ink-60);
  max-width: 46ch;
}
/* Der Kopf trug bisher nur .v-proof__head — und dessen Spaltenbreite steht in
   03-home.css, das die Produktseite nicht lädt. Ohne Zuweisung landete er in
   der ersten von zwölf Spalten und der Text brach Wort für Wort um. Dieselbe
   Breite wie der FAQ-Kopf darunter, damit beide Blöcke eine Kante bilden. */
.v-pdp__proof .v-proof__head { grid-column: 1 / span 5; }

@media (max-width: 900px) {
  .v-pdp__proof .v-proof__head { grid-column: 1 / -1; }
}

.v-pdp__proof .v-proof__quotes { display: grid; gap: 1rem; }

/* Gleiche Rasterung wie auf der Startseite: ab mittlerer Breite zweispaltig,
   die erste (längste) Rückmeldung über beide Spalten. Untereinander würden
   fünf Karten die Seite unnötig strecken. */
@media (min-width: 48em) {
  .v-pdp__proof .v-proof__quotes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .v-pdp__proof .v-proof__quotes .v-quote:first-child { grid-column: 1 / -1; }
}

/* --- Baumsilhouetten am Seitenrand --------------------------------------- */
/* Reine Deko. Sie liegt hinter allem, nimmt keine Klicks an und verschwindet,
   sobald der Platz für Inhalt gebraucht wird. */
.v-pdp { position: relative; }
.v-trees {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.v-pdp > *:not(.v-trees) { position: relative; z-index: 1; }

.v-trees__side {
  position: absolute;
  top: clamp(6rem, 12vw, 14rem);
  width: clamp(70px, 7vw, 120px);
  color: var(--v-cool);
  opacity: .16;
}
.v-trees__side svg { width: 100%; height: auto; }
.v-trees__side--left  { left:  clamp(-1.5rem, -1vw, 0rem); }
.v-trees__side--right { right: clamp(-1.5rem, -1vw, 0rem); transform: scaleX(-1); }

/* Unter 1500 px wird der Rand zu schmal — dann lieber gar keine Deko als
   Deko, die in den Text ragt. */
@media (max-width: 93.75em) { .v-trees { display: none; } }

/* --- Abstand zum Zusagen-Banner ------------------------------------------ */
.v-trustbar { margin-top: clamp(3.5rem, 2.5rem + 4vw, 6rem); }

/* Der weisse Streifen unter den Icons war der Seitenhintergrund zwischen
   Banner und Footer. Auf der Produktseite schliesst der Footer jetzt direkt
   an — zwei dunkle Flächen ohne helle Naht dazwischen. */
body.single-product .v-footer { margin-top: 0; }