From 87032eeba8a6fe7140f9314fa2ddb9060460be9b Mon Sep 17 00:00:00 2001
From: qcigano <qcigano@gmail.com>
Date: Sun, 2 Aug 2026 19:44:39 +0200
Subject: [PATCH] Checkout-Zahlungsarten: Karten klappen sofort beim Anklicken
 auf; HasiDog-Box zeigt Charaktertext & ist breiter
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Zahlungsart-Auswahl umgebaut: jede Karte (PayPal/Klarna/Kreditkarte/
  Banküberweisung) klappt den passenden "Verbinden"-Bereich jetzt SOFORT
  in sich selbst auf, sobald man draufklickt — kein Zwischenschritt, kein
  separates Panel weiter unten mehr. Rein CSS-gesteuert (:has()), reagiert
  augenblicklich auf den Klick.
- Unterkategorie-Vorstellungsbox (z.B. HasiDog) zeigt jetzt wieder den
  persönlichen Charaktertext ("Ich bin klein, knuffig, wuschelig...")
  statt der Produktbeschreibung, plus den Cliffhanger-Satz "Wenn du mehr
  über mich erfahren möchtest, dann klicke" vor dem Button — für alle 6
  Tier-Serien (Kuh, Hase, Wal, Oktopus, Schildkröte, Pinguin). Foto und
  Überschrift sind jetzt anklickbar und führen zur echten Produktseite,
  damit trotz des reinen Charaktertexts nichts an Kaufbarkeit verloren
  geht. Textspalte gegenüber Fotospalte verbreitert.

Verifiziert per Puppeteer gegen den echten Build: PayPal-Karte zeigt beim
Laden sofort den echten SDK-Button, Kreditkarte/Banküberweisung klappen
unmittelbar beim Klick auf (ohne Wartezeit geprüft), Bankdaten und
Charaktertext korrekt, keine Konsolenfehler.
---
 src/pages/ch/checkout/index.astro             | 108 +++++++++---------
 .../shop/[kategorie]/[unterkategorie].astro   |  12 +-
 src/pages/checkout/index.astro                | 108 +++++++++---------
 src/pages/en/checkout/index.astro             | 108 +++++++++---------
 .../shop/[kategorie]/[unterkategorie].astro   |  12 +-
 src/pages/fr/checkout/index.astro             | 108 +++++++++---------
 .../shop/[kategorie]/[unterkategorie].astro   |  12 +-
 .../shop/[kategorie]/[unterkategorie].astro   |  12 +-
 src/styles/global.css                         |  64 ++++++-----
 9 files changed, 268 insertions(+), 276 deletions(-)

diff --git a/src/pages/ch/checkout/index.astro b/src/pages/ch/checkout/index.astro
index 3a10fa8..b794b01 100644
--- a/src/pages/ch/checkout/index.astro
+++ b/src/pages/ch/checkout/index.astro
@@ -22,56 +22,61 @@ const t = useTranslations(lang);
         <div class="checkout-split-col">
         <h3>{t.checkout.step2}</h3>
         <div class="payment-options">
-          <label class="pay-option" style="--brand-color:#009cde; --brand-bg:#003087;">
-            <span class="pay-icon" style="background:linear-gradient(160deg, #0070ba, #003087); color:#fff;">P</span>
-            <span>PayPal</span>
-            <input type="radio" name="pay" value="paypal" checked />
-          </label>
-          <label class="pay-option" style="--brand-color:#ffb3c7; --brand-bg:#17120f;">
-            <span class="pay-icon" style="background:linear-gradient(160deg, #ffc9d8, #ffb3c7); color:#0a0a0a;">K</span>
-            <span>Klarna</span>
-            <input type="radio" name="pay" value="klarna" />
-          </label>
-          <label class="pay-option" style="--brand-color:#ff9838; --brand-bg:#241f3d;">
-            <span class="pay-icon pay-icon-cc" style="background:linear-gradient(160deg, #2a2a3d, #14141f);">
-              <span class="cc-dot cc-dot-a"></span><span class="cc-dot cc-dot-b"></span>
-            </span>
-            <span>{t.checkout.creditCard}<span class="pay-sub">{t.checkout.creditCardSub}</span></span>
-            <input type="radio" name="pay" value="kreditkarte" />
-          </label>
-          <label class="pay-option" style="--brand-color:#7fa8c9; --brand-bg:#3b5a76;">
-            <span class="pay-icon pay-icon-emoji" style="background:linear-gradient(160deg, #4d7599, #2c4258);">🏦</span>
-            <span>{t.checkout.bankTransfer}</span>
-            <input type="radio" name="pay" value="ueberweisung" />
-          </label>
-        </div>
-
-        <div class="pay-connect">
-          <div class="pay-panel" data-panel="paypal">
-            <p>{t.checkout.payPalHint}</p>
-            <div id="paypal-button-container"></div>
+          <div class="pay-card" style="--brand-color:#009cde; --brand-bg:#003087;">
+            <label class="pay-option">
+              <span class="pay-icon" style="background:linear-gradient(160deg, #0070ba, #003087); color:#fff;">P</span>
+              <span>PayPal</span>
+              <input type="radio" name="pay" value="paypal" checked />
+            </label>
+            <div class="pay-panel-inline">
+              <p>{t.checkout.payPalHint}</p>
+              <div id="paypal-button-container"></div>
+            </div>
           </div>
-          <div class="pay-panel" data-panel="klarna" hidden>
-            <p>{t.checkout.klarnaHint}</p>
-            <button type="button" class="btn btn-outline pay-connect-btn" id="klarna-connect">{t.checkout.klarnaConnect}</button>
-            <p class="pay-connect-status" id="klarna-status"></p>
+          <div class="pay-card" style="--brand-color:#ffb3c7; --brand-bg:#17120f;">
+            <label class="pay-option">
+              <span class="pay-icon" style="background:linear-gradient(160deg, #ffc9d8, #ffb3c7); color:#0a0a0a;">K</span>
+              <span>Klarna</span>
+              <input type="radio" name="pay" value="klarna" />
+            </label>
+            <div class="pay-panel-inline">
+              <p>{t.checkout.klarnaHint}</p>
+              <button type="button" class="btn btn-outline pay-connect-btn" id="klarna-connect">{t.checkout.klarnaConnect}</button>
+              <p class="pay-connect-status" id="klarna-status"></p>
+            </div>
           </div>
-          <div class="pay-panel" data-panel="kreditkarte" hidden>
-            <p>{t.checkout.cardHint}</p>
-            <div class="card-fields">
-              <div>
-                <label for="cc-number">{t.checkout.cardNumber}</label>
-                <input type="text" id="cc-number" inputmode="numeric" placeholder="1234 5678 9012 3456" maxlength="19" />
-              </div>
-              <div class="grid grid-2">
-                <div><label for="cc-expiry">{t.checkout.cardExpiry}</label><input type="text" id="cc-expiry" placeholder="MM/YY" maxlength="5" /></div>
-                <div><label for="cc-cvc">{t.checkout.cardCvc}</label><input type="text" id="cc-cvc" inputmode="numeric" placeholder="123" maxlength="4" /></div>
+          <div class="pay-card" style="--brand-color:#ff9838; --brand-bg:#241f3d;">
+            <label class="pay-option">
+              <span class="pay-icon pay-icon-cc" style="background:linear-gradient(160deg, #2a2a3d, #14141f);">
+                <span class="cc-dot cc-dot-a"></span><span class="cc-dot cc-dot-b"></span>
+              </span>
+              <span>{t.checkout.creditCard}<span class="pay-sub">{t.checkout.creditCardSub}</span></span>
+              <input type="radio" name="pay" value="kreditkarte" />
+            </label>
+            <div class="pay-panel-inline">
+              <p>{t.checkout.cardHint}</p>
+              <div class="card-fields">
+                <div>
+                  <label for="cc-number">{t.checkout.cardNumber}</label>
+                  <input type="text" id="cc-number" inputmode="numeric" placeholder="1234 5678 9012 3456" maxlength="19" />
+                </div>
+                <div class="grid grid-2">
+                  <div><label for="cc-expiry">{t.checkout.cardExpiry}</label><input type="text" id="cc-expiry" placeholder="MM/YY" maxlength="5" /></div>
+                  <div><label for="cc-cvc">{t.checkout.cardCvc}</label><input type="text" id="cc-cvc" inputmode="numeric" placeholder="123" maxlength="4" /></div>
+                </div>
               </div>
             </div>
           </div>
-          <div class="pay-panel" data-panel="ueberweisung" hidden>
-            <p>{t.checkout.bankHintReal}</p>
-            <div class="bank-details" id="bank-details"></div>
+          <div class="pay-card" style="--brand-color:#7fa8c9; --brand-bg:#3b5a76;">
+            <label class="pay-option">
+              <span class="pay-icon pay-icon-emoji" style="background:linear-gradient(160deg, #4d7599, #2c4258);">🏦</span>
+              <span>{t.checkout.bankTransfer}</span>
+              <input type="radio" name="pay" value="ueberweisung" />
+            </label>
+            <div class="pay-panel-inline">
+              <p>{t.checkout.bankHintReal}</p>
+              <div class="bank-details" id="bank-details"></div>
+            </div>
           </div>
         </div>
 
@@ -191,17 +196,8 @@ import { bankverbindung, bankverbindungVollstaendig } from "../../../data/bankve
   renderSummary();
   landSelect.addEventListener("change", renderSummary);
 
-  // Zahlungsart-Auswahl: pro Methode ein Panel, nur die gewählte ist sichtbar. Macht die
-  // Auswahl sofort "aktionabel" statt ein reines Formularfeld zu sein.
-  const payPanels = document.querySelectorAll(".pay-panel");
-  function showPayPanel(method) {
-    payPanels.forEach((p) => { p.hidden = p.dataset.panel !== method; });
-  }
-  document.querySelectorAll('input[name="pay"]').forEach((radio) => {
-    radio.addEventListener("change", () => showPayPanel(radio.value));
-  });
-  const initialPay = document.querySelector('input[name="pay"]:checked');
-  if (initialPay) showPayPanel(initialPay.value);
+  // Zahlungsart-Auswahl: der "Verbinden"-Bereich jeder Karte klappt rein über CSS
+  // (:has(input:checked)) sofort auf, sobald man die Karte anklickt — kein JS, keine Verzögerung.
 
   // PayPal: echte PayPal Smart Buttons über das offizielle JS-SDK (Sandbox-Client-ID "sb" —
   // kostenlos, ohne eigenes Konto testbar). Klick öffnet den echten PayPal-Login-Popup. Für den
diff --git a/src/pages/ch/shop/[kategorie]/[unterkategorie].astro b/src/pages/ch/shop/[kategorie]/[unterkategorie].astro
index 47709d4..1fb97c7 100644
--- a/src/pages/ch/shop/[kategorie]/[unterkategorie].astro
+++ b/src/pages/ch/shop/[kategorie]/[unterkategorie].astro
@@ -38,20 +38,20 @@ const weitere = echtProdukte.slice(1);
   {featured ? (
     <section class="section-tight">
       <div class="container grid grid-2 intro">
-        <div class="portrait-frame portrait">
+        <a class="portrait-frame portrait" href={`/ch/produkt/${featured.slug}/`} aria-label={featured.name[lang]}>
           {featured.bilder && featured.bilder.length > 0 ? (
             <img class="product-photo" src={featured.bilder[0]} alt={featured.name[lang]} loading="lazy" />
           ) : (
             <div class="img-placeholder" role="img" aria-label={featured.name[lang]}></div>
           )}
-        </div>
+        </a>
         <div>
           {sub.vorstellung && <span class="eyebrow">{sub.vorstellung[lang].split("\n")[0]}</span>}
-          <h2>{featured.name[lang]}</h2>
-          <p class="lead">{featured.beschreibung[lang]}</p>
+          <h2><a href={`/ch/produkt/${featured.slug}/`}>{featured.name[lang]}</a></h2>
+          <p class="lead">{sub.vorstellung ? sub.vorstellung[lang].split("\n")[1] : featured.beschreibung[lang]}</p>
           {sub.mehrLink && (
             <div class="character-more">
-              <p>Wosch meh über {sub.name[lang]} wüsse?</p>
+              <p>Wenn du meh über mich wüsse witt, de klick</p>
               <a class="btn btn-outline" href={sub.mehrLink} target="_blank" rel="noopener">da →</a>
             </div>
           )}
@@ -66,7 +66,7 @@ const weitere = echtProdukte.slice(1);
             {sub.vorstellung[lang].split("\n").map((line) => <p>{line}</p>)}
             {sub.mehrLink && (
               <div class="character-more">
-                <p>Wosch meh über {sub.name[lang]} wüsse?</p>
+                <p>Wenn du meh über mich wüsse witt, de klick</p>
                 <a class="btn btn-outline" href={sub.mehrLink} target="_blank" rel="noopener">da →</a>
               </div>
             )}
diff --git a/src/pages/checkout/index.astro b/src/pages/checkout/index.astro
index d665592..4f9c7ac 100644
--- a/src/pages/checkout/index.astro
+++ b/src/pages/checkout/index.astro
@@ -22,56 +22,61 @@ const t = useTranslations(lang);
         <div class="checkout-split-col">
         <h3>{t.checkout.step2}</h3>
         <div class="payment-options">
-          <label class="pay-option" style="--brand-color:#009cde; --brand-bg:#003087;">
-            <span class="pay-icon" style="background:linear-gradient(160deg, #0070ba, #003087); color:#fff;">P</span>
-            <span>PayPal</span>
-            <input type="radio" name="pay" value="paypal" checked />
-          </label>
-          <label class="pay-option" style="--brand-color:#ffb3c7; --brand-bg:#17120f;">
-            <span class="pay-icon" style="background:linear-gradient(160deg, #ffc9d8, #ffb3c7); color:#0a0a0a;">K</span>
-            <span>Klarna</span>
-            <input type="radio" name="pay" value="klarna" />
-          </label>
-          <label class="pay-option" style="--brand-color:#ff9838; --brand-bg:#241f3d;">
-            <span class="pay-icon pay-icon-cc" style="background:linear-gradient(160deg, #2a2a3d, #14141f);">
-              <span class="cc-dot cc-dot-a"></span><span class="cc-dot cc-dot-b"></span>
-            </span>
-            <span>{t.checkout.creditCard}<span class="pay-sub">{t.checkout.creditCardSub}</span></span>
-            <input type="radio" name="pay" value="kreditkarte" />
-          </label>
-          <label class="pay-option" style="--brand-color:#7fa8c9; --brand-bg:#3b5a76;">
-            <span class="pay-icon pay-icon-emoji" style="background:linear-gradient(160deg, #4d7599, #2c4258);">🏦</span>
-            <span>{t.checkout.bankTransfer}</span>
-            <input type="radio" name="pay" value="ueberweisung" />
-          </label>
-        </div>
-
-        <div class="pay-connect">
-          <div class="pay-panel" data-panel="paypal">
-            <p>{t.checkout.payPalHint}</p>
-            <div id="paypal-button-container"></div>
+          <div class="pay-card" style="--brand-color:#009cde; --brand-bg:#003087;">
+            <label class="pay-option">
+              <span class="pay-icon" style="background:linear-gradient(160deg, #0070ba, #003087); color:#fff;">P</span>
+              <span>PayPal</span>
+              <input type="radio" name="pay" value="paypal" checked />
+            </label>
+            <div class="pay-panel-inline">
+              <p>{t.checkout.payPalHint}</p>
+              <div id="paypal-button-container"></div>
+            </div>
           </div>
-          <div class="pay-panel" data-panel="klarna" hidden>
-            <p>{t.checkout.klarnaHint}</p>
-            <button type="button" class="btn btn-outline pay-connect-btn" id="klarna-connect">{t.checkout.klarnaConnect}</button>
-            <p class="pay-connect-status" id="klarna-status"></p>
+          <div class="pay-card" style="--brand-color:#ffb3c7; --brand-bg:#17120f;">
+            <label class="pay-option">
+              <span class="pay-icon" style="background:linear-gradient(160deg, #ffc9d8, #ffb3c7); color:#0a0a0a;">K</span>
+              <span>Klarna</span>
+              <input type="radio" name="pay" value="klarna" />
+            </label>
+            <div class="pay-panel-inline">
+              <p>{t.checkout.klarnaHint}</p>
+              <button type="button" class="btn btn-outline pay-connect-btn" id="klarna-connect">{t.checkout.klarnaConnect}</button>
+              <p class="pay-connect-status" id="klarna-status"></p>
+            </div>
           </div>
-          <div class="pay-panel" data-panel="kreditkarte" hidden>
-            <p>{t.checkout.cardHint}</p>
-            <div class="card-fields">
-              <div>
-                <label for="cc-number">{t.checkout.cardNumber}</label>
-                <input type="text" id="cc-number" inputmode="numeric" placeholder="1234 5678 9012 3456" maxlength="19" />
-              </div>
-              <div class="grid grid-2">
-                <div><label for="cc-expiry">{t.checkout.cardExpiry}</label><input type="text" id="cc-expiry" placeholder="MM/YY" maxlength="5" /></div>
-                <div><label for="cc-cvc">{t.checkout.cardCvc}</label><input type="text" id="cc-cvc" inputmode="numeric" placeholder="123" maxlength="4" /></div>
+          <div class="pay-card" style="--brand-color:#ff9838; --brand-bg:#241f3d;">
+            <label class="pay-option">
+              <span class="pay-icon pay-icon-cc" style="background:linear-gradient(160deg, #2a2a3d, #14141f);">
+                <span class="cc-dot cc-dot-a"></span><span class="cc-dot cc-dot-b"></span>
+              </span>
+              <span>{t.checkout.creditCard}<span class="pay-sub">{t.checkout.creditCardSub}</span></span>
+              <input type="radio" name="pay" value="kreditkarte" />
+            </label>
+            <div class="pay-panel-inline">
+              <p>{t.checkout.cardHint}</p>
+              <div class="card-fields">
+                <div>
+                  <label for="cc-number">{t.checkout.cardNumber}</label>
+                  <input type="text" id="cc-number" inputmode="numeric" placeholder="1234 5678 9012 3456" maxlength="19" />
+                </div>
+                <div class="grid grid-2">
+                  <div><label for="cc-expiry">{t.checkout.cardExpiry}</label><input type="text" id="cc-expiry" placeholder="MM/YY" maxlength="5" /></div>
+                  <div><label for="cc-cvc">{t.checkout.cardCvc}</label><input type="text" id="cc-cvc" inputmode="numeric" placeholder="123" maxlength="4" /></div>
+                </div>
               </div>
             </div>
           </div>
-          <div class="pay-panel" data-panel="ueberweisung" hidden>
-            <p>{t.checkout.bankHintReal}</p>
-            <div class="bank-details" id="bank-details"></div>
+          <div class="pay-card" style="--brand-color:#7fa8c9; --brand-bg:#3b5a76;">
+            <label class="pay-option">
+              <span class="pay-icon pay-icon-emoji" style="background:linear-gradient(160deg, #4d7599, #2c4258);">🏦</span>
+              <span>{t.checkout.bankTransfer}</span>
+              <input type="radio" name="pay" value="ueberweisung" />
+            </label>
+            <div class="pay-panel-inline">
+              <p>{t.checkout.bankHintReal}</p>
+              <div class="bank-details" id="bank-details"></div>
+            </div>
           </div>
         </div>
 
@@ -194,17 +199,8 @@ import { bankverbindung, bankverbindungVollstaendig } from "../../data/bankverbi
   renderSummary();
   landSelect.addEventListener("change", renderSummary);
 
-  // Zahlungsart-Auswahl: pro Methode ein Panel, nur die gewählte ist sichtbar. Macht die
-  // Auswahl sofort "aktionabel" statt ein reines Formularfeld zu sein.
-  const payPanels = document.querySelectorAll(".pay-panel");
-  function showPayPanel(method) {
-    payPanels.forEach((p) => { p.hidden = p.dataset.panel !== method; });
-  }
-  document.querySelectorAll('input[name="pay"]').forEach((radio) => {
-    radio.addEventListener("change", () => showPayPanel(radio.value));
-  });
-  const initialPay = document.querySelector('input[name="pay"]:checked');
-  if (initialPay) showPayPanel(initialPay.value);
+  // Zahlungsart-Auswahl: der "Verbinden"-Bereich jeder Karte klappt rein über CSS
+  // (:has(input:checked)) sofort auf, sobald man die Karte anklickt — kein JS, keine Verzögerung.
 
   // PayPal: echte PayPal Smart Buttons über das offizielle JS-SDK (Sandbox-Client-ID "sb" —
   // kostenlos, ohne eigenes Konto testbar). Klick öffnet den echten PayPal-Login-Popup. Für den
diff --git a/src/pages/en/checkout/index.astro b/src/pages/en/checkout/index.astro
index bdb1b7e..dedbcdf 100644
--- a/src/pages/en/checkout/index.astro
+++ b/src/pages/en/checkout/index.astro
@@ -22,56 +22,61 @@ const t = useTranslations(lang);
         <div class="checkout-split-col">
         <h3>{t.checkout.step2}</h3>
         <div class="payment-options">
-          <label class="pay-option" style="--brand-color:#009cde; --brand-bg:#003087;">
-            <span class="pay-icon" style="background:linear-gradient(160deg, #0070ba, #003087); color:#fff;">P</span>
-            <span>PayPal</span>
-            <input type="radio" name="pay" value="paypal" checked />
-          </label>
-          <label class="pay-option" style="--brand-color:#ffb3c7; --brand-bg:#17120f;">
-            <span class="pay-icon" style="background:linear-gradient(160deg, #ffc9d8, #ffb3c7); color:#0a0a0a;">K</span>
-            <span>Klarna</span>
-            <input type="radio" name="pay" value="klarna" />
-          </label>
-          <label class="pay-option" style="--brand-color:#ff9838; --brand-bg:#241f3d;">
-            <span class="pay-icon pay-icon-cc" style="background:linear-gradient(160deg, #2a2a3d, #14141f);">
-              <span class="cc-dot cc-dot-a"></span><span class="cc-dot cc-dot-b"></span>
-            </span>
-            <span>{t.checkout.creditCard}<span class="pay-sub">{t.checkout.creditCardSub}</span></span>
-            <input type="radio" name="pay" value="kreditkarte" />
-          </label>
-          <label class="pay-option" style="--brand-color:#7fa8c9; --brand-bg:#3b5a76;">
-            <span class="pay-icon pay-icon-emoji" style="background:linear-gradient(160deg, #4d7599, #2c4258);">🏦</span>
-            <span>{t.checkout.bankTransfer}</span>
-            <input type="radio" name="pay" value="ueberweisung" />
-          </label>
-        </div>
-
-        <div class="pay-connect">
-          <div class="pay-panel" data-panel="paypal">
-            <p>{t.checkout.payPalHint}</p>
-            <div id="paypal-button-container"></div>
+          <div class="pay-card" style="--brand-color:#009cde; --brand-bg:#003087;">
+            <label class="pay-option">
+              <span class="pay-icon" style="background:linear-gradient(160deg, #0070ba, #003087); color:#fff;">P</span>
+              <span>PayPal</span>
+              <input type="radio" name="pay" value="paypal" checked />
+            </label>
+            <div class="pay-panel-inline">
+              <p>{t.checkout.payPalHint}</p>
+              <div id="paypal-button-container"></div>
+            </div>
           </div>
-          <div class="pay-panel" data-panel="klarna" hidden>
-            <p>{t.checkout.klarnaHint}</p>
-            <button type="button" class="btn btn-outline pay-connect-btn" id="klarna-connect">{t.checkout.klarnaConnect}</button>
-            <p class="pay-connect-status" id="klarna-status"></p>
+          <div class="pay-card" style="--brand-color:#ffb3c7; --brand-bg:#17120f;">
+            <label class="pay-option">
+              <span class="pay-icon" style="background:linear-gradient(160deg, #ffc9d8, #ffb3c7); color:#0a0a0a;">K</span>
+              <span>Klarna</span>
+              <input type="radio" name="pay" value="klarna" />
+            </label>
+            <div class="pay-panel-inline">
+              <p>{t.checkout.klarnaHint}</p>
+              <button type="button" class="btn btn-outline pay-connect-btn" id="klarna-connect">{t.checkout.klarnaConnect}</button>
+              <p class="pay-connect-status" id="klarna-status"></p>
+            </div>
           </div>
-          <div class="pay-panel" data-panel="kreditkarte" hidden>
-            <p>{t.checkout.cardHint}</p>
-            <div class="card-fields">
-              <div>
-                <label for="cc-number">{t.checkout.cardNumber}</label>
-                <input type="text" id="cc-number" inputmode="numeric" placeholder="1234 5678 9012 3456" maxlength="19" />
-              </div>
-              <div class="grid grid-2">
-                <div><label for="cc-expiry">{t.checkout.cardExpiry}</label><input type="text" id="cc-expiry" placeholder="MM/YY" maxlength="5" /></div>
-                <div><label for="cc-cvc">{t.checkout.cardCvc}</label><input type="text" id="cc-cvc" inputmode="numeric" placeholder="123" maxlength="4" /></div>
+          <div class="pay-card" style="--brand-color:#ff9838; --brand-bg:#241f3d;">
+            <label class="pay-option">
+              <span class="pay-icon pay-icon-cc" style="background:linear-gradient(160deg, #2a2a3d, #14141f);">
+                <span class="cc-dot cc-dot-a"></span><span class="cc-dot cc-dot-b"></span>
+              </span>
+              <span>{t.checkout.creditCard}<span class="pay-sub">{t.checkout.creditCardSub}</span></span>
+              <input type="radio" name="pay" value="kreditkarte" />
+            </label>
+            <div class="pay-panel-inline">
+              <p>{t.checkout.cardHint}</p>
+              <div class="card-fields">
+                <div>
+                  <label for="cc-number">{t.checkout.cardNumber}</label>
+                  <input type="text" id="cc-number" inputmode="numeric" placeholder="1234 5678 9012 3456" maxlength="19" />
+                </div>
+                <div class="grid grid-2">
+                  <div><label for="cc-expiry">{t.checkout.cardExpiry}</label><input type="text" id="cc-expiry" placeholder="MM/YY" maxlength="5" /></div>
+                  <div><label for="cc-cvc">{t.checkout.cardCvc}</label><input type="text" id="cc-cvc" inputmode="numeric" placeholder="123" maxlength="4" /></div>
+                </div>
               </div>
             </div>
           </div>
-          <div class="pay-panel" data-panel="ueberweisung" hidden>
-            <p>{t.checkout.bankHintReal}</p>
-            <div class="bank-details" id="bank-details"></div>
+          <div class="pay-card" style="--brand-color:#7fa8c9; --brand-bg:#3b5a76;">
+            <label class="pay-option">
+              <span class="pay-icon pay-icon-emoji" style="background:linear-gradient(160deg, #4d7599, #2c4258);">🏦</span>
+              <span>{t.checkout.bankTransfer}</span>
+              <input type="radio" name="pay" value="ueberweisung" />
+            </label>
+            <div class="pay-panel-inline">
+              <p>{t.checkout.bankHintReal}</p>
+              <div class="bank-details" id="bank-details"></div>
+            </div>
           </div>
         </div>
 
@@ -191,17 +196,8 @@ import { bankverbindung, bankverbindungVollstaendig } from "../../../data/bankve
   renderSummary();
   landSelect.addEventListener("change", renderSummary);
 
-  // Zahlungsart-Auswahl: pro Methode ein Panel, nur die gewählte ist sichtbar. Macht die
-  // Auswahl sofort "aktionabel" statt ein reines Formularfeld zu sein.
-  const payPanels = document.querySelectorAll(".pay-panel");
-  function showPayPanel(method) {
-    payPanels.forEach((p) => { p.hidden = p.dataset.panel !== method; });
-  }
-  document.querySelectorAll('input[name="pay"]').forEach((radio) => {
-    radio.addEventListener("change", () => showPayPanel(radio.value));
-  });
-  const initialPay = document.querySelector('input[name="pay"]:checked');
-  if (initialPay) showPayPanel(initialPay.value);
+  // Zahlungsart-Auswahl: der "Verbinden"-Bereich jeder Karte klappt rein über CSS
+  // (:has(input:checked)) sofort auf, sobald man die Karte anklickt — kein JS, keine Verzögerung.
 
   // PayPal: echte PayPal Smart Buttons über das offizielle JS-SDK (Sandbox-Client-ID "sb" —
   // kostenlos, ohne eigenes Konto testbar). Klick öffnet den echten PayPal-Login-Popup. Für den
diff --git a/src/pages/en/shop/[kategorie]/[unterkategorie].astro b/src/pages/en/shop/[kategorie]/[unterkategorie].astro
index 7609965..86f1d5f 100644
--- a/src/pages/en/shop/[kategorie]/[unterkategorie].astro
+++ b/src/pages/en/shop/[kategorie]/[unterkategorie].astro
@@ -38,20 +38,20 @@ const weitere = echtProdukte.slice(1);
   {featured ? (
     <section class="section-tight">
       <div class="container grid grid-2 intro">
-        <div class="portrait-frame portrait">
+        <a class="portrait-frame portrait" href={`/en/produkt/${featured.slug}/`} aria-label={featured.name[lang]}>
           {featured.bilder && featured.bilder.length > 0 ? (
             <img class="product-photo" src={featured.bilder[0]} alt={featured.name[lang]} loading="lazy" />
           ) : (
             <div class="img-placeholder" role="img" aria-label={featured.name[lang]}></div>
           )}
-        </div>
+        </a>
         <div>
           {sub.vorstellung && <span class="eyebrow">{sub.vorstellung[lang].split("\n")[0]}</span>}
-          <h2>{featured.name[lang]}</h2>
-          <p class="lead">{featured.beschreibung[lang]}</p>
+          <h2><a href={`/en/produkt/${featured.slug}/`}>{featured.name[lang]}</a></h2>
+          <p class="lead">{sub.vorstellung ? sub.vorstellung[lang].split("\n")[1] : featured.beschreibung[lang]}</p>
           {sub.mehrLink && (
             <div class="character-more">
-              <p>Want to learn more about {sub.name[lang]}?</p>
+              <p>If you'd like to learn more about me, just click</p>
               <a class="btn btn-outline" href={sub.mehrLink} target="_blank" rel="noopener">here →</a>
             </div>
           )}
@@ -66,7 +66,7 @@ const weitere = echtProdukte.slice(1);
             {sub.vorstellung[lang].split("\n").map((line) => <p>{line}</p>)}
             {sub.mehrLink && (
               <div class="character-more">
-                <p>Want to learn more about {sub.name[lang]}?</p>
+                <p>If you'd like to learn more about me, just click</p>
                 <a class="btn btn-outline" href={sub.mehrLink} target="_blank" rel="noopener">here →</a>
               </div>
             )}
diff --git a/src/pages/fr/checkout/index.astro b/src/pages/fr/checkout/index.astro
index 63a062a..ec3a102 100644
--- a/src/pages/fr/checkout/index.astro
+++ b/src/pages/fr/checkout/index.astro
@@ -22,56 +22,61 @@ const t = useTranslations(lang);
         <div class="checkout-split-col">
         <h3>{t.checkout.step2}</h3>
         <div class="payment-options">
-          <label class="pay-option" style="--brand-color:#009cde; --brand-bg:#003087;">
-            <span class="pay-icon" style="background:linear-gradient(160deg, #0070ba, #003087); color:#fff;">P</span>
-            <span>PayPal</span>
-            <input type="radio" name="pay" value="paypal" checked />
-          </label>
-          <label class="pay-option" style="--brand-color:#ffb3c7; --brand-bg:#17120f;">
-            <span class="pay-icon" style="background:linear-gradient(160deg, #ffc9d8, #ffb3c7); color:#0a0a0a;">K</span>
-            <span>Klarna</span>
-            <input type="radio" name="pay" value="klarna" />
-          </label>
-          <label class="pay-option" style="--brand-color:#ff9838; --brand-bg:#241f3d;">
-            <span class="pay-icon pay-icon-cc" style="background:linear-gradient(160deg, #2a2a3d, #14141f);">
-              <span class="cc-dot cc-dot-a"></span><span class="cc-dot cc-dot-b"></span>
-            </span>
-            <span>{t.checkout.creditCard}<span class="pay-sub">{t.checkout.creditCardSub}</span></span>
-            <input type="radio" name="pay" value="kreditkarte" />
-          </label>
-          <label class="pay-option" style="--brand-color:#7fa8c9; --brand-bg:#3b5a76;">
-            <span class="pay-icon pay-icon-emoji" style="background:linear-gradient(160deg, #4d7599, #2c4258);">🏦</span>
-            <span>{t.checkout.bankTransfer}</span>
-            <input type="radio" name="pay" value="ueberweisung" />
-          </label>
-        </div>
-
-        <div class="pay-connect">
-          <div class="pay-panel" data-panel="paypal">
-            <p>{t.checkout.payPalHint}</p>
-            <div id="paypal-button-container"></div>
+          <div class="pay-card" style="--brand-color:#009cde; --brand-bg:#003087;">
+            <label class="pay-option">
+              <span class="pay-icon" style="background:linear-gradient(160deg, #0070ba, #003087); color:#fff;">P</span>
+              <span>PayPal</span>
+              <input type="radio" name="pay" value="paypal" checked />
+            </label>
+            <div class="pay-panel-inline">
+              <p>{t.checkout.payPalHint}</p>
+              <div id="paypal-button-container"></div>
+            </div>
           </div>
-          <div class="pay-panel" data-panel="klarna" hidden>
-            <p>{t.checkout.klarnaHint}</p>
-            <button type="button" class="btn btn-outline pay-connect-btn" id="klarna-connect">{t.checkout.klarnaConnect}</button>
-            <p class="pay-connect-status" id="klarna-status"></p>
+          <div class="pay-card" style="--brand-color:#ffb3c7; --brand-bg:#17120f;">
+            <label class="pay-option">
+              <span class="pay-icon" style="background:linear-gradient(160deg, #ffc9d8, #ffb3c7); color:#0a0a0a;">K</span>
+              <span>Klarna</span>
+              <input type="radio" name="pay" value="klarna" />
+            </label>
+            <div class="pay-panel-inline">
+              <p>{t.checkout.klarnaHint}</p>
+              <button type="button" class="btn btn-outline pay-connect-btn" id="klarna-connect">{t.checkout.klarnaConnect}</button>
+              <p class="pay-connect-status" id="klarna-status"></p>
+            </div>
           </div>
-          <div class="pay-panel" data-panel="kreditkarte" hidden>
-            <p>{t.checkout.cardHint}</p>
-            <div class="card-fields">
-              <div>
-                <label for="cc-number">{t.checkout.cardNumber}</label>
-                <input type="text" id="cc-number" inputmode="numeric" placeholder="1234 5678 9012 3456" maxlength="19" />
-              </div>
-              <div class="grid grid-2">
-                <div><label for="cc-expiry">{t.checkout.cardExpiry}</label><input type="text" id="cc-expiry" placeholder="MM/YY" maxlength="5" /></div>
-                <div><label for="cc-cvc">{t.checkout.cardCvc}</label><input type="text" id="cc-cvc" inputmode="numeric" placeholder="123" maxlength="4" /></div>
+          <div class="pay-card" style="--brand-color:#ff9838; --brand-bg:#241f3d;">
+            <label class="pay-option">
+              <span class="pay-icon pay-icon-cc" style="background:linear-gradient(160deg, #2a2a3d, #14141f);">
+                <span class="cc-dot cc-dot-a"></span><span class="cc-dot cc-dot-b"></span>
+              </span>
+              <span>{t.checkout.creditCard}<span class="pay-sub">{t.checkout.creditCardSub}</span></span>
+              <input type="radio" name="pay" value="kreditkarte" />
+            </label>
+            <div class="pay-panel-inline">
+              <p>{t.checkout.cardHint}</p>
+              <div class="card-fields">
+                <div>
+                  <label for="cc-number">{t.checkout.cardNumber}</label>
+                  <input type="text" id="cc-number" inputmode="numeric" placeholder="1234 5678 9012 3456" maxlength="19" />
+                </div>
+                <div class="grid grid-2">
+                  <div><label for="cc-expiry">{t.checkout.cardExpiry}</label><input type="text" id="cc-expiry" placeholder="MM/YY" maxlength="5" /></div>
+                  <div><label for="cc-cvc">{t.checkout.cardCvc}</label><input type="text" id="cc-cvc" inputmode="numeric" placeholder="123" maxlength="4" /></div>
+                </div>
               </div>
             </div>
           </div>
-          <div class="pay-panel" data-panel="ueberweisung" hidden>
-            <p>{t.checkout.bankHintReal}</p>
-            <div class="bank-details" id="bank-details"></div>
+          <div class="pay-card" style="--brand-color:#7fa8c9; --brand-bg:#3b5a76;">
+            <label class="pay-option">
+              <span class="pay-icon pay-icon-emoji" style="background:linear-gradient(160deg, #4d7599, #2c4258);">🏦</span>
+              <span>{t.checkout.bankTransfer}</span>
+              <input type="radio" name="pay" value="ueberweisung" />
+            </label>
+            <div class="pay-panel-inline">
+              <p>{t.checkout.bankHintReal}</p>
+              <div class="bank-details" id="bank-details"></div>
+            </div>
           </div>
         </div>
 
@@ -191,17 +196,8 @@ import { bankverbindung, bankverbindungVollstaendig } from "../../../data/bankve
   renderSummary();
   landSelect.addEventListener("change", renderSummary);
 
-  // Zahlungsart-Auswahl: pro Methode ein Panel, nur die gewählte ist sichtbar. Macht die
-  // Auswahl sofort "aktionabel" statt ein reines Formularfeld zu sein.
-  const payPanels = document.querySelectorAll(".pay-panel");
-  function showPayPanel(method) {
-    payPanels.forEach((p) => { p.hidden = p.dataset.panel !== method; });
-  }
-  document.querySelectorAll('input[name="pay"]').forEach((radio) => {
-    radio.addEventListener("change", () => showPayPanel(radio.value));
-  });
-  const initialPay = document.querySelector('input[name="pay"]:checked');
-  if (initialPay) showPayPanel(initialPay.value);
+  // Zahlungsart-Auswahl: der "Verbinden"-Bereich jeder Karte klappt rein über CSS
+  // (:has(input:checked)) sofort auf, sobald man die Karte anklickt — kein JS, keine Verzögerung.
 
   // PayPal: echte PayPal Smart Buttons über das offizielle JS-SDK (Sandbox-Client-ID "sb" —
   // kostenlos, ohne eigenes Konto testbar). Klick öffnet den echten PayPal-Login-Popup. Für den
diff --git a/src/pages/fr/shop/[kategorie]/[unterkategorie].astro b/src/pages/fr/shop/[kategorie]/[unterkategorie].astro
index 57c353f..77d8f5e 100644
--- a/src/pages/fr/shop/[kategorie]/[unterkategorie].astro
+++ b/src/pages/fr/shop/[kategorie]/[unterkategorie].astro
@@ -38,20 +38,20 @@ const weitere = echtProdukte.slice(1);
   {featured ? (
     <section class="section-tight">
       <div class="container grid grid-2 intro">
-        <div class="portrait-frame portrait">
+        <a class="portrait-frame portrait" href={`/fr/produkt/${featured.slug}/`} aria-label={featured.name[lang]}>
           {featured.bilder && featured.bilder.length > 0 ? (
             <img class="product-photo" src={featured.bilder[0]} alt={featured.name[lang]} loading="lazy" />
           ) : (
             <div class="img-placeholder" role="img" aria-label={featured.name[lang]}></div>
           )}
-        </div>
+        </a>
         <div>
           {sub.vorstellung && <span class="eyebrow">{sub.vorstellung[lang].split("\n")[0]}</span>}
-          <h2>{featured.name[lang]}</h2>
-          <p class="lead">{featured.beschreibung[lang]}</p>
+          <h2><a href={`/fr/produkt/${featured.slug}/`}>{featured.name[lang]}</a></h2>
+          <p class="lead">{sub.vorstellung ? sub.vorstellung[lang].split("\n")[1] : featured.beschreibung[lang]}</p>
           {sub.mehrLink && (
             <div class="character-more">
-              <p>Tu veux en savoir plus sur {sub.name[lang]} ?</p>
+              <p>Si tu veux en savoir plus sur moi, clique</p>
               <a class="btn btn-outline" href={sub.mehrLink} target="_blank" rel="noopener">ici →</a>
             </div>
           )}
@@ -66,7 +66,7 @@ const weitere = echtProdukte.slice(1);
             {sub.vorstellung[lang].split("\n").map((line) => <p>{line}</p>)}
             {sub.mehrLink && (
               <div class="character-more">
-                <p>Tu veux en savoir plus sur {sub.name[lang]} ?</p>
+                <p>Si tu veux en savoir plus sur moi, clique</p>
                 <a class="btn btn-outline" href={sub.mehrLink} target="_blank" rel="noopener">ici →</a>
               </div>
             )}
diff --git a/src/pages/shop/[kategorie]/[unterkategorie].astro b/src/pages/shop/[kategorie]/[unterkategorie].astro
index e0b754d..ae219e8 100644
--- a/src/pages/shop/[kategorie]/[unterkategorie].astro
+++ b/src/pages/shop/[kategorie]/[unterkategorie].astro
@@ -41,20 +41,20 @@ const weitere = echtProdukte.slice(1);
   {featured ? (
     <section class="section-tight">
       <div class="container grid grid-2 intro">
-        <div class="portrait-frame portrait">
+        <a class="portrait-frame portrait" href={`/produkt/${featured.slug}/`} aria-label={featured.name[lang]}>
           {featured.bilder && featured.bilder.length > 0 ? (
             <img class="product-photo" src={featured.bilder[0]} alt={featured.name[lang]} loading="lazy" />
           ) : (
             <div class="img-placeholder" role="img" aria-label={featured.name[lang]}></div>
           )}
-        </div>
+        </a>
         <div>
           {sub.vorstellung && <span class="eyebrow">{sub.vorstellung[lang].split("\n")[0]}</span>}
-          <h2>{featured.name[lang]}</h2>
-          <p class="lead">{featured.beschreibung[lang]}</p>
+          <h2><a href={`/produkt/${featured.slug}/`}>{featured.name[lang]}</a></h2>
+          <p class="lead">{sub.vorstellung ? sub.vorstellung[lang].split("\n")[1] : featured.beschreibung[lang]}</p>
           {sub.mehrLink && (
             <div class="character-more">
-              <p>Du willst mehr über {sub.name[lang]} erfahren?</p>
+              <p>Wenn du mehr über mich erfahren möchtest, dann klicke</p>
               <a class="btn btn-outline" href={sub.mehrLink} target="_blank" rel="noopener">hier →</a>
             </div>
           )}
@@ -69,7 +69,7 @@ const weitere = echtProdukte.slice(1);
             {sub.vorstellung[lang].split("\n").map((line) => <p>{line}</p>)}
             {sub.mehrLink && (
               <div class="character-more">
-                <p>Du willst mehr über {sub.name[lang]} erfahren?</p>
+                <p>Wenn du mehr über mich erfahren möchtest, dann klicke</p>
                 <a class="btn btn-outline" href={sub.mehrLink} target="_blank" rel="noopener">hier →</a>
               </div>
             )}
diff --git a/src/styles/global.css b/src/styles/global.css
index d25e0af..221bee0 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -604,7 +604,11 @@ a:focus-visible, button:focus-visible {
 .creator-photo { max-width: 420px; margin-inline: auto; }
 
 /* "Über die Kreative" */
-.intro { align-items: center; }
+.intro { align-items: center; grid-template-columns: 0.85fr 1.15fr; gap: 3rem; }
+.intro h2 a { color: inherit; transition: color 0.2s var(--ease); }
+.intro h2 a:hover { color: var(--c-accent); }
+.intro .portrait-frame.portrait { display: block; }
+@media (max-width: 800px) { .intro { grid-template-columns: 1fr; gap: 1.5rem; } }
 /* Breiter als vorher (war 440px) + Seitenverhältnis nah am Originalfoto (900x1353 ≈ 2/3)
    statt 3/4 — vorher wurde oben/unten so stark beschnitten, dass das Plushie neben VanVan
    (Oktopus) nur noch als Ecke sichtbar war. So ist das ganze Foto inkl. beider Plushies zu sehen. */
@@ -1022,26 +1026,38 @@ a:focus-visible, button:focus-visible {
 }
 
 /* Zahlungsart als richtige, klickbare Auswahlkarten statt Standard-Radiobuttons — passend zum
-   restlichen "Karten mit Verlaufsrand"-Stil der Seite (siehe .card). */
+   restlichen "Karten mit Verlaufsrand"-Stil der Seite (siehe .card). Jede Karte klappt SOFORT
+   beim Anklicken den passenden "Verbinden"-Bereich direkt in sich selbst auf (reines CSS über
+   :has(), kein Zwischenschritt, kein separates Panel weiter unten). */
 .payment-options { display: grid; gap: 0.85rem; }
+.pay-card {
+  border: 1.5px solid rgba(244, 241, 247, 0.12);
+  border-radius: var(--radius-l);
+  background: linear-gradient(155deg, var(--c-anthracite), color-mix(in srgb, var(--c-anthracite) 85%, #000));
+  transition: border-color 0.2s var(--ease), background 0.2s var(--ease), box-shadow 0.2s var(--ease), transform 0.2s var(--ease);
+  overflow: hidden;
+}
+.pay-card:hover {
+  border-color: color-mix(in srgb, var(--brand-color, var(--c-accent)) 55%, transparent);
+  transform: translateY(-2px);
+  box-shadow: 0 10px 22px -12px color-mix(in srgb, var(--brand-color, var(--c-accent)) 55%, transparent);
+}
+.pay-card:has(input:checked) {
+  border-color: var(--brand-color, var(--c-accent));
+  background: linear-gradient(155deg, color-mix(in srgb, var(--brand-color, var(--c-accent)) 16%, var(--c-anthracite)), color-mix(in srgb, var(--c-anthracite) 85%, #000));
+  box-shadow: 0 0 0 1px color-mix(in srgb, var(--brand-color, var(--c-accent)) 55%, transparent), 0 8px 20px -8px color-mix(in srgb, var(--brand-color, var(--c-accent)) 65%, transparent);
+}
+.pay-card:has(input:checked) .pay-option span:not(.pay-icon) { color: var(--brand-color, var(--c-accent)); }
+
 .pay-option {
   position: relative;
   display: flex;
   align-items: center;
   gap: 1.1em;
   padding: 1.15em 1.3em;
-  border: 1.5px solid rgba(244, 241, 247, 0.12);
-  border-radius: var(--radius-l);
   font-size: 1.02rem;
   font-weight: 700;
   cursor: pointer;
-  background: linear-gradient(155deg, var(--c-anthracite), color-mix(in srgb, var(--c-anthracite) 85%, #000));
-  transition: border-color 0.2s var(--ease), background 0.2s var(--ease), box-shadow 0.2s var(--ease), transform 0.2s var(--ease);
-}
-.pay-option:hover {
-  border-color: color-mix(in srgb, var(--brand-color, var(--c-accent)) 55%, transparent);
-  transform: translateY(-2px);
-  box-shadow: 0 10px 22px -12px color-mix(in srgb, var(--brand-color, var(--c-accent)) 55%, transparent);
 }
 
 /* Icon-Badge im echten Markenlogo-Stil (farbige Kachel + Wortmarke) statt schlichtem Emoji —
@@ -1072,18 +1088,16 @@ a:focus-visible, button:focus-visible {
 .pay-icon-cc .cc-dot-b { left: 20px; background: #f7b73c; mix-blend-mode: screen; }
 .pay-option .pay-sub { display: block; font-weight: 400; font-size: 0.8rem; color: var(--c-text-muted); margin-top: 0.1em; }
 
-/* Ausklappbarer "Verbinden"-Bereich unter der Zahlungsart-Auswahl: pro Methode ein Panel, nur
-   das zur ausgewählten Zahlungsart passende ist sichtbar. Macht die Auswahl sofort "aktionabel"
-   statt nur ein reines Auswahlfeld zu sein. */
-.pay-connect {
-  margin-top: 1.1rem;
-  padding: 1.1rem 1.2rem;
-  border-radius: var(--radius-m);
-  background: color-mix(in srgb, var(--c-accent) 6%, var(--c-anthracite));
-  border: 1px solid color-mix(in srgb, var(--c-accent) 25%, transparent);
+/* Der "Verbinden"-Bereich sitzt DIREKT in der Karte selbst und klappt beim Anklicken sofort auf —
+   kein separates Panel, kein zweiter Klick nötig. */
+.pay-panel-inline {
+  display: none;
+  padding: 0.2rem 1.3em 1.3em;
+  border-top: 1px dashed rgba(244, 241, 247, 0.16);
+  margin: 0 1.3em;
 }
-.pay-panel[hidden] { display: none; }
-.pay-panel p { margin: 0 0 0.8em; color: var(--c-text-muted); font-size: 0.88rem; }
+.pay-card:has(input:checked) .pay-panel-inline { display: block; padding-top: 1rem; }
+.pay-panel-inline p { margin: 0 0 0.8em; color: var(--c-text-muted); font-size: 0.88rem; }
 .pay-connect-btn { width: 100%; }
 .pay-connect-btn[disabled] { opacity: 0.75; cursor: default; }
 .pay-connect-status { margin: 0.7em 0 0; font-size: 0.88rem; color: var(--c-accent); font-weight: 600; }
@@ -1127,12 +1141,6 @@ a:focus-visible, button:focus-visible {
 }
 .pay-option input[type="radio"]:checked::before { transform: scale(1); }
 .pay-option input[type="radio"]:checked { border-color: var(--brand-color, var(--c-accent)); }
-.pay-option:has(input:checked) {
-  border-color: var(--brand-color, var(--c-accent));
-  background: linear-gradient(155deg, color-mix(in srgb, var(--brand-color, var(--c-accent)) 16%, var(--c-anthracite)), color-mix(in srgb, var(--c-anthracite) 85%, #000));
-  box-shadow: 0 0 0 1px color-mix(in srgb, var(--brand-color, var(--c-accent)) 55%, transparent), 0 8px 20px -8px color-mix(in srgb, var(--brand-color, var(--c-accent)) 65%, transparent);
-}
-.pay-option:has(input:checked) span:not(.pay-icon) { color: var(--brand-color, var(--c-accent)); }
 
 .checkout-summary .row { display: flex; justify-content: space-between; font-size: 0.9rem; padding: 0.35rem 0; color: var(--c-text-muted); }