/* =============================================================================
   Kasse und Danke-Seite im Hub-Look (Plugin Paar-Yoga Shop, Fahrplan 1.5 und 1.6).
   Grundlage: 02_App/companion/hub-kasse-checkout.css (Entwurf 30.09.2026), angepasst an die
   echte Kasse vom 06.10.2026:
   - Kernvorlagen von WooCommerce (das Plugin schaltet hier die The7-Vorlagen ab)
   - Germanized-Reihenfolge: Zahlart, Häkchen, Bestellung, Knopf (Produkt und Gesamtpreis stehen so
     direkt vor dem Knopf, § 312j Abs. 2 BGB)
   - WooPayments: Kartenfeld in der Zahlart „Karte“, Apple Pay und Google Pay ganz oben
   - PayPal Payments: eigene Knöpfe unter der Bestellung
   Ohne Theme lädt auch das Stylesheet von WooCommerce nicht. Was es sonst erledigt (Bildschirmleser-
   Text, Passwort-Auge, Stärke-Anzeige), steht deshalb hier mit drin.
   ============================================================================= */

@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:500 700;font-display:swap;
  src:url("/hub/fonts/CormorantGaramond-latin.woff2") format("woff2")}

/* Überblendung von der Kursseite zur Kasse (dieselbe Regel steht in kursseite.css). */
@view-transition{navigation:auto}

html{background:#2E2420}
body.pyhub-kasse{
  --pyk-bg:#2E2420;
  --pyk-tief:#1E1712;
  --pyk-card:rgba(252,241,229,.06);
  --pyk-line:rgba(252,241,229,.16);
  --pyk-feld:rgba(252,241,229,.07);
  --pyk-feldrand:rgba(252,241,229,.25);
  --pyk-cream:#FCF1E5;
  --pyk-soft:#C8B0A8;
  --pyk-leise:rgba(252,241,229,.62);
  --pyk-terra:#C1654A;
  --pyk-apricot:#E3A082;
  --pyk-serif:'Cormorant Garamond',Georgia,serif;
  --pyk-sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  margin:0;min-height:100vh;display:flex;flex-direction:column;
  background:var(--pyk-bg);color:var(--pyk-cream);
  font-family:var(--pyk-sans);font-size:16px;line-height:1.45;
  -webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%;text-size-adjust:100%;
}
body.pyhub-kasse *{box-sizing:border-box}
body.pyhub-kasse .pyk a{color:var(--pyk-apricot);text-decoration:none;font-weight:600}
@media (hover:hover){body.pyhub-kasse .pyk a:hover{text-decoration:underline}}
body.pyhub-kasse :focus-visible{outline:2px solid var(--pyk-apricot);outline-offset:3px}
body.pyhub-kasse .pyk img{max-width:100%;height:auto}

/* Was sonst das Theme erledigt. */
body.pyhub-kasse .screen-reader-text{border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;
  margin:-1px;overflow:hidden;padding:0;position:absolute!important;width:1px;word-wrap:normal!important}
body.pyhub-kasse .clear{clear:both}
body.pyhub-kasse wc-order-attribution-inputs{display:none}   /* nur versteckte Felder, im Raster sonst eine leere Zelle */
/* Reste anderer Plugins in wp_footer (Elementor-Popup, Galerie), ohne deren Stylesheets roh. */
[data-elementor-type="popup"],.elementor-location-popup,.dialog-widget,.pswp{display:none!important}
/* Borlabs-Zahnrad unten links lag über dem Formular. Die Cookie-Einstellungen stehen im Fuß. */
/* Borlabs setzt per Skript style="display:block !important" direkt am Element, dagegen hilft kein
   display:none. Unsichtbar und nicht antippbar geht trotzdem. */
#BorlabsCookieWidget,.brlbs-cmpnt-widget{visibility:hidden!important;pointer-events:none!important}

/* ---- Hülle ---- */
body.pyhub-kasse .pyk{flex:1 0 auto;width:100%;max-width:520px;margin:0 auto;
  padding:max(14px,env(safe-area-inset-top)) 20px 28px}
body.pyhub-kasse .pyk-seitenkopf{display:flex;align-items:center;justify-content:space-between;min-height:56px;margin-bottom:8px}
body.pyhub-kasse .pyk-marke{display:flex;align-items:center;gap:10px}
body.pyhub-kasse .pyk-marke img{width:40px;height:40px;object-fit:contain}
body.pyhub-kasse .pyk-marke img.pyk-wort{width:79px;height:auto}
body.pyhub-kasse .pyk-zurueck{display:inline-flex;align-items:center;min-height:44px;padding:0 4px;color:var(--pyk-soft)}
body.pyhub-kasse .pyk-seitentitel{font-family:var(--pyk-serif);font-weight:600;font-size:2.1rem;line-height:1.1;margin:8px 0 10px}
body.pyhub-kasse .pyk-kurz{display:flex;justify-content:space-between;gap:12px;margin:0 0 22px;
  font-size:.95rem;color:var(--pyk-soft)}
body.pyhub-kasse .pyk-kurz span:last-child{white-space:nowrap;color:var(--pyk-cream);font-weight:600}

/* ---- Hinweise ---- */
body.pyhub-kasse .woocommerce-notices-wrapper:empty{display:none}
body.pyhub-kasse .woocommerce-error,
body.pyhub-kasse .woocommerce-info,
body.pyhub-kasse .woocommerce-message{list-style:none;margin:0 0 14px;padding:14px 16px;border-radius:16px;
  background:var(--pyk-card);border:1px solid var(--pyk-line);font-size:.95rem;line-height:1.4;color:var(--pyk-cream)}
body.pyhub-kasse .woocommerce-error{border-color:rgba(227,160,130,.55);color:var(--pyk-apricot)}
body.pyhub-kasse .woocommerce-error li{margin:0}
body.pyhub-kasse .woocommerce-error li + li{margin-top:6px}
body.pyhub-kasse .woocommerce-error a{color:var(--pyk-cream);text-decoration:underline}
body.pyhub-kasse .checkout-inline-error-message{margin:6px 0 0;font-size:.82rem;color:var(--pyk-apricot)}

/* Anmelden und Gutschein: leise Zeilen über dem Formular, aufgeklappt eine Karte. */
body.pyhub-kasse .woocommerce-form-login-toggle .woocommerce-info,
body.pyhub-kasse .woocommerce-form-coupon-toggle .woocommerce-info{background:none;border:0;padding:0;margin:0 0 8px;
  font-size:.9rem;color:var(--pyk-leise)}
body.pyhub-kasse .woocommerce-form-login-toggle a,
body.pyhub-kasse .woocommerce-form-coupon-toggle a{display:inline-block;padding:6px 0}
body.pyhub-kasse form.woocommerce-form-login,
body.pyhub-kasse form.checkout_coupon{margin:0 0 16px;padding:16px;border-radius:18px;background:var(--pyk-card);
  border:1px solid var(--pyk-line)}
body.pyhub-kasse form.woocommerce-form-login > p:first-child,
body.pyhub-kasse form.checkout_coupon > p:first-child{margin:0 0 12px;font-size:.9rem;color:var(--pyk-leise)}
body.pyhub-kasse form.woocommerce-form-login .lost_password{margin:8px 0 0;font-size:.9rem}
body.pyhub-kasse form.checkout_coupon .form-row-last{margin-bottom:0}

/* ---- Formular ---- */
body.pyhub-kasse form.checkout{margin:0}
body.pyhub-kasse .col2-set,
body.pyhub-kasse .col2-set .col-1,
body.pyhub-kasse .col2-set .col-2{float:none;width:100%;max-width:none;padding:0;margin:0}
body.pyhub-kasse:not(.pyk-ware) .woocommerce-shipping-fields,
body.pyhub-kasse:not(.pyk-ware) .woocommerce-additional-fields{display:none}   /* digitale Kurse: kein Versand, keine Notiz */
body.pyhub-kasse .pyk h2,
body.pyhub-kasse .pyk h3{font-family:var(--pyk-serif);font-weight:600;font-size:1.4rem;line-height:1.2;margin:0 0 12px;color:var(--pyk-cream)}
/* „Deine Bestellung“ stünde direkt über „Zahlungsart auswählen“ (Germanized setzt die Zahlart vor die
   Bestellung). Für Bildschirmleser bleibt die Überschrift. */
body.pyhub-kasse #order_review_heading{border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;margin:-1px;
  overflow:hidden;padding:0;position:absolute;width:1px}
body.pyhub-kasse #order_payment_heading{margin-top:22px}
/* PayPal-Werbezeile „Später bezahlen“: dunkelblaue Schrift aus einem fremden Rahmen, auf dunklem Grund
   nicht lesbar und nicht umzufärben. Später bezahlen bietet PayPal im eigenen Fenster trotzdem an. */
body.pyhub-kasse .ppcp-messages{display:none!important}

body.pyhub-kasse .form-row{margin:0 0 12px;padding:0}
body.pyhub-kasse .form-row-first,
body.pyhub-kasse .form-row-last{width:100%;float:none}
body.pyhub-kasse .form-row label{display:block;margin:0 0 6px;font-size:.82rem;font-weight:600;color:var(--pyk-soft);letter-spacing:.01em}
body.pyhub-kasse .form-row .required{color:var(--pyk-apricot);text-decoration:none;border:0;font-weight:700}
body.pyhub-kasse .form-row .optional{color:var(--pyk-leise);font-weight:500}
body.pyhub-kasse .pyk .input-text,
body.pyhub-kasse .pyk select,
body.pyhub-kasse .pyk textarea{width:100%;background:var(--pyk-feld);border:1.5px solid var(--pyk-feldrand);border-radius:18px;
  padding:16px 18px;font-size:1.05rem;line-height:1.3;color:var(--pyk-cream);font-family:inherit;-webkit-appearance:none;appearance:none}
/* 1,05rem ist Absicht: unter 16px zoomt iOS beim Tippen in das Feld hinein. */
body.pyhub-kasse .input-text::placeholder{color:rgba(252,241,229,.5)}
body.pyhub-kasse .input-text:focus,
body.pyhub-kasse select:focus{border-color:var(--pyk-apricot);outline:none}
body.pyhub-kasse .woocommerce-invalid .input-text{border-color:var(--pyk-apricot);box-shadow:0 0 0 3px rgba(227,160,130,.22)}
/* WooCommerce prüft das Passwortfeld schon beim Laden (es leert es und löst „change“ aus) und färbt es
   rot, bevor jemand etwas getippt hat. Rot erst, wenn das Feld berührt oder das Formular abgeschickt wurde
   (Klassen setzt das Skript in includes/kasse.php). */
body.pyhub-kasse form.checkout:not(.pyk-gesendet) .form-row.woocommerce-invalid:not(.pyk-beruehrt) .input-text{
  border-color:var(--pyk-feldrand);box-shadow:none}
body.pyhub-kasse .woocommerce-input-wrapper{display:block}
body.pyhub-kasse input:-webkit-autofill{-webkit-text-fill-color:var(--pyk-cream);
  -webkit-box-shadow:0 0 0 40px #3d322d inset;caret-color:var(--pyk-cream)}

/* Passwort: Auge zum Anzeigen (setzt WooCommerce per Skript dazu) und Stärke-Anzeige. */
body.pyhub-kasse .password-input{position:relative;display:block}
body.pyhub-kasse .password-input .input-text{padding-right:56px}
body.pyhub-kasse .show-password-input{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:44px;height:44px;
  border:0;padding:0;background:none;cursor:pointer;opacity:.7}
body.pyhub-kasse .show-password-input::after{content:"";position:absolute;inset:11px;background:var(--pyk-cream);
  -webkit-mask:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
          mask:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E")}
body.pyhub-kasse .show-password-input.display-password{opacity:1}
body.pyhub-kasse .woocommerce-password-strength{margin:8px 0 0;padding:6px 12px;border-radius:12px;font-size:.82rem;font-weight:600;
  background:var(--pyk-card);color:var(--pyk-soft)}
body.pyhub-kasse .woocommerce-password-strength.short,
body.pyhub-kasse .woocommerce-password-strength.bad{color:var(--pyk-apricot)}
body.pyhub-kasse .woocommerce-password-strength.good,
body.pyhub-kasse .woocommerce-password-strength.strong{color:#B9D3A8}
body.pyhub-kasse .woocommerce-password-hint{display:block;margin:6px 0 0;font-size:.8rem;color:var(--pyk-leise)}

/* ---- Häkchen = abgerundetes Quadrat (Skill paar-yoga-app-design: Mehrfachauswahl nie als Kreis) ----
   Die ganze Zeile ist die Tipp-Fläche, mindestens 44 px hoch. Das Kästchen sitzt absolut links, der Text
   fließt daneben: Germanized baut die Zeile als <label><input><span>…</span>&nbsp;<span>*</span></label>,
   mit Flex würde das Sternchen als eigene Spalte abreißen. */
body.pyhub-kasse .form-row label.woocommerce-form__label-for-checkbox{display:block;position:relative;min-height:44px;margin:0;
  padding:6px 0 6px 38px;font-size:.92rem;font-weight:500;line-height:1.42;color:var(--pyk-cream);cursor:pointer;letter-spacing:0}
body.pyhub-kasse .form-row label.woocommerce-form__label-for-checkbox input[type=checkbox]{position:absolute;left:0;top:6px}
body.pyhub-kasse .pyk input[type=checkbox]{-webkit-appearance:none;appearance:none;flex:0 0 24px;width:24px;height:24px;margin:0;
  border-radius:8px;border:1.5px solid var(--pyk-feldrand);background:var(--pyk-feld);cursor:pointer;display:grid;place-content:center;
  transition:background .15s,border-color .15s}
body.pyhub-kasse .pyk input[type=checkbox]:checked{background:var(--pyk-terra);border-color:var(--pyk-terra)}
body.pyhub-kasse .pyk input[type=checkbox]:checked::after{content:"";width:12px;height:12px;
  background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FCF1E5' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E")}
body.pyhub-kasse .woocommerce-invalid input[type=checkbox]{border-color:var(--pyk-apricot);box-shadow:0 0 0 3px rgba(227,160,130,.22)}
body.pyhub-kasse p.legal{margin:0 0 10px}
body.pyhub-kasse p.legal label a{color:var(--pyk-apricot)}
body.pyhub-kasse .woocommerce-SavedPaymentMethods-saveNew{display:flex;align-items:center;gap:12px;margin:10px 0 0}
body.pyhub-kasse .woocommerce-SavedPaymentMethods-saveNew label{margin:0;font-size:.88rem;font-weight:500;color:var(--pyk-cream)}

/* ---- Apple Pay und Google Pay (WooPayments) ganz oben ---- */
body.pyhub-kasse .wcpay-express-checkout-wrapper{margin:0 0 6px}
/* Trenner: statt „— ODER —“ (Gedankenstriche) eine Linie mit „oder“. Die Sichtbarkeit steuert
   WooPayments selbst (display:none, bis ein Knopf da ist). */
body.pyhub-kasse #wcpay-express-checkout-button-separator{position:relative;margin:16px 0 18px!important;font-size:0!important;
  line-height:0;text-align:center}
body.pyhub-kasse #wcpay-express-checkout-button-separator::before{content:"";position:absolute;left:0;right:0;top:50%;
  border-top:1px solid var(--pyk-line)}
body.pyhub-kasse #wcpay-express-checkout-button-separator::after{content:"oder";position:relative;padding:0 12px;
  background:var(--pyk-bg);font-size:.85rem;line-height:1.4;color:var(--pyk-leise)}

/* ---- Zahlart ---- */
body.pyhub-kasse #payment{background:none;border-radius:0;margin:0;padding:0}
body.pyhub-kasse #payment ul.payment_methods{list-style:none;margin:0 0 14px;padding:0;border:0}
body.pyhub-kasse #payment ul.payment_methods:has(> li:only-child){display:none}
body.pyhub-kasse #payment ul.payment_methods > li{position:relative;margin:0 0 8px;padding:0;border-radius:16px;
  background:var(--pyk-card);border:1px solid var(--pyk-line);list-style:none}
body.pyhub-kasse #payment ul.payment_methods > li:has(> input:checked){border-color:rgba(227,160,130,.55)}
body.pyhub-kasse #payment ul.payment_methods > li > input[type=radio]{position:absolute;left:16px;top:17px}
body.pyhub-kasse #payment ul.payment_methods > li > label{display:flex;align-items:center;gap:10px;min-height:56px;margin:0;
  padding:0 16px 0 50px;font-weight:600;color:var(--pyk-cream);cursor:pointer}
body.pyhub-kasse #payment ul.payment_methods > li > label img{max-height:22px;width:auto;margin-left:auto}
body.pyhub-kasse .pyk input[type=radio]{-webkit-appearance:none;appearance:none;width:22px;height:22px;margin:0;border-radius:50%;
  border:1.5px solid var(--pyk-feldrand);background:var(--pyk-feld);cursor:pointer;transition:border .15s}
body.pyhub-kasse .pyk input[type=radio]:checked{border:7px solid var(--pyk-terra);background:var(--pyk-cream)}
body.pyhub-kasse #payment div.payment_box{margin:0;padding:0 14px 14px;background:none;color:var(--pyk-soft);font-size:.9rem}
body.pyhub-kasse #payment div.payment_box::before{display:none}
body.pyhub-kasse #payment div.payment_box p{margin:0 0 8px}
body.pyhub-kasse #payment div.payment_box fieldset{border:0;margin:0;min-width:0}
/* „Mit PayPal zahlen.“ sagt der PayPal-Knopf schon. Das Kartenfeld dagegen MUSS sichtbar bleiben. */
body.pyhub-kasse #payment div.payment_box.payment_method_ppcp-gateway{display:none!important}
body.pyhub-kasse #payment .place-order{margin:0;padding:0}

/* ---- Bestellübersicht (unter den Häkchen, direkt vor dem Knopf) ---- */
body.pyhub-kasse table.shop_table{width:100%;border-collapse:separate;border-spacing:0;margin:6px 0 4px;border-radius:18px;
  background:var(--pyk-card);border:1px solid var(--pyk-line);overflow:hidden}
body.pyhub-kasse table.shop_table thead,
body.pyhub-kasse table.shop_table .cart-subtotal{display:none}
body.pyhub-kasse table.shop_table th,
body.pyhub-kasse table.shop_table td{padding:12px 16px;text-align:left;vertical-align:middle;border:0;font-size:.95rem;font-weight:500;
  background:none;color:var(--pyk-cream)}
body.pyhub-kasse table.shop_table td.product-total,
body.pyhub-kasse table.shop_table tfoot td{text-align:right;white-space:nowrap}
body.pyhub-kasse table.shop_table .product-quantity{font-weight:500;color:var(--pyk-leise)}
body.pyhub-kasse .wc-gzd-cart-item-name-wrapper{display:flex;align-items:center;gap:12px}
body.pyhub-kasse .wc-gzd-cart-item-thumbnail{flex:0 0 52px}
body.pyhub-kasse .wc-gzd-cart-item-thumbnail img{display:block;width:52px;height:52px;object-fit:cover;border-radius:12px}
body.pyhub-kasse table.shop_table tfoot tr.order-total th,
body.pyhub-kasse table.shop_table tfoot tr.order-total td{border-top:1px solid var(--pyk-line);font-weight:700;font-size:1rem}
body.pyhub-kasse table.shop_table tfoot tr.order-total-small-business-notice td{border-top:0;padding-top:0;text-align:left;white-space:normal}
body.pyhub-kasse table.shop_table .small-business-info{text-align:left}
body.pyhub-kasse .wc-gzd-additional-info,
body.pyhub-kasse table.shop_table .includes_tax,
body.pyhub-kasse table.shop_table small{display:block;margin:0;font-size:.78rem;font-weight:500;color:var(--pyk-leise)}
body.pyhub-kasse table.shop_table .cart-discount td{color:var(--pyk-apricot)}

/* ---- Knöpfe ----
   „Jetzt kaufen“ (#place_order) blendet PayPal Payments selbst aus, solange PayPal gewählt ist, und
   setzt seine Knöpfe darunter. Farbe und Form der PayPal-Knöpfe kommen aus PayPal Payments. */
body.pyhub-kasse #place_order,
body.pyhub-kasse .pyk-knopf,
body.pyhub-kasse .woocommerce-thankyou-order-failed-actions .pay{display:flex;align-items:center;justify-content:center;width:100%;
  min-height:58px;margin:14px 0 0;padding:0 24px;border:none;border-radius:999px;background:var(--pyk-terra);color:var(--pyk-cream);
  font:700 1.05rem var(--pyk-sans);cursor:pointer;box-shadow:0 12px 40px rgba(0,0,0,.4);text-decoration:none}
body.pyhub-kasse #place_order:active,
body.pyhub-kasse .pyk-knopf:active{transform:scale(.98)}
body.pyhub-kasse #place_order:disabled{opacity:.55;cursor:default}
body.pyhub-kasse .pyk .button:not(#place_order):not(.pay){display:inline-flex;align-items:center;justify-content:center;min-height:48px;
  padding:0 22px;border:1.5px solid var(--pyk-feldrand);border-radius:999px;background:none;color:var(--pyk-cream);
  font:600 .98rem var(--pyk-sans);cursor:pointer;text-decoration:none}
body.pyhub-kasse .ppc-button-wrapper,
body.pyhub-kasse #ppc-button-ppcp-gateway{width:100%;margin:12px 0 0}
body.pyhub-kasse #ppcp-recaptcha-v2-container:empty{display:none}

/* WooCommerce legt beim Senden einen Schleier über das Formular (jQuery blockUI). Weiß auf dunklem
   Grund wirkt wie ein Blitz, deshalb warm und halb durchsichtig. */
body.pyhub-kasse .blockUI.blockOverlay{background:rgba(46,36,32,.72)!important;opacity:1!important}

/* ---- Danke-Seite (order-received) ---- */
body.pyhub-kasse .woocommerce-order{padding:4px 0 0}
body.pyhub-kasse .woocommerce-notice--success,
body.pyhub-kasse .woocommerce-thankyou-order-received,
body.pyhub-kasse .woocommerce-thankyou-order-failed{font-family:var(--pyk-serif);font-weight:600;font-size:1.8rem;line-height:1.15;
  margin:8px 0 16px;color:var(--pyk-cream)}
body.pyhub-kasse ul.woocommerce-order-overview{list-style:none;margin:0 0 6px;padding:14px 16px;border-radius:18px;
  background:var(--pyk-card);border:1px solid var(--pyk-line);font-size:.9rem}
body.pyhub-kasse ul.woocommerce-order-overview li{margin:0;padding:4px 0;color:var(--pyk-soft)}
body.pyhub-kasse ul.woocommerce-order-overview li strong{display:block;color:var(--pyk-cream);font-weight:600}
body.pyhub-kasse .pyk-danke-weiter{margin:18px 0 30px}
body.pyhub-kasse .woocommerce-order-details,
body.pyhub-kasse .woocommerce-customer-details{margin:0 0 22px}
body.pyhub-kasse table.order_details td.product-name a{color:var(--pyk-cream)}
body.pyhub-kasse table.order_details tfoot th{font-weight:500;color:var(--pyk-soft)}
body.pyhub-kasse table.order_details tfoot tr:first-child th,
body.pyhub-kasse table.order_details tfoot tr:first-child td{border-top:1px solid var(--pyk-line)}
body.pyhub-kasse .product-purchase-note td{font-size:.9rem;color:var(--pyk-soft)}
body.pyhub-kasse .product-purchase-note p{margin:0}
body.pyhub-kasse .woocommerce-customer-details address{font-style:normal;line-height:1.55;padding:14px 16px;border-radius:18px;
  background:var(--pyk-card);border:1px solid var(--pyk-line);color:var(--pyk-soft)}
body.pyhub-kasse .woocommerce-customer-details address p{margin:0}
body.pyhub-kasse .woocommerce-order > p:not([class]){font-size:.9rem;color:var(--pyk-soft)}

/* ---- Fuß ---- */
body.pyhub-kasse .pyk-fuss{border-top:1px solid var(--pyk-line);padding:18px 20px calc(18px + env(safe-area-inset-bottom))}
body.pyhub-kasse .pyk-fuss ul{display:flex;flex-wrap:wrap;justify-content:center;gap:0 6px;list-style:none;margin:0;padding:0}
body.pyhub-kasse .pyk-fuss a,
body.pyhub-kasse .pyk-fuss .pyk-cookie button,
body.pyhub-kasse .pyk-fuss .pyk-cookie a{all:unset;display:inline-flex;align-items:center;min-height:44px;padding:0 8px;
  color:var(--pyk-soft);font:600 .9rem/1.2 var(--pyk-sans);cursor:pointer}
@media (hover:hover){body.pyhub-kasse .pyk-fuss a:hover,body.pyhub-kasse .pyk-fuss button:hover{color:var(--pyk-cream)}}
body.pyhub-kasse .pyk-fuss button:focus-visible,
body.pyhub-kasse .pyk-fuss a:focus-visible{outline:2px solid var(--pyk-apricot);outline-offset:3px;border-radius:8px}

/* ---- Ab Tablet: Vorname und Nachname nebeneinander ---- */
@media (min-width:600px){
  body.pyhub-kasse .woocommerce-billing-fields__field-wrapper{display:grid;grid-template-columns:1fr 1fr;column-gap:14px}
  body.pyhub-kasse .woocommerce-billing-fields__field-wrapper > .form-row{grid-column:1 / -1}
  body.pyhub-kasse .woocommerce-billing-fields__field-wrapper > .form-row-first{grid-column:1}
  body.pyhub-kasse .woocommerce-billing-fields__field-wrapper > .form-row-last{grid-column:2}
}

/* ---- Desktop: zwei Spalten wie bei guten Kassen ----
   Links Angaben (und darüber Apple Pay/Google Pay), rechts Zahlart, Häkchen, Bestellung und Knopf in
   einer Karte, die beim Scrollen stehen bleibt. Benannte Bereiche, weil WooCommerce Fehler live als
   .woocommerce-NoticeGroup vorn IN das Formular setzt: die landen so über beiden Spalten. */
@media (min-width:1024px){
  body.pyhub-kasse .pyk{max-width:1040px;padding-top:28px}
  body.pyhub-kasse .pyk-seitentitel{font-size:2.6rem;margin-bottom:10px}
  body.pyhub-kasse .pyk-kurz{max-width:calc(100% - 504px)}
  body.pyhub-kasse .woocommerce-form-login-toggle,
  body.pyhub-kasse .woocommerce-form-coupon-toggle,
  body.pyhub-kasse form.woocommerce-form-login,
  body.pyhub-kasse form.checkout_coupon{max-width:calc(100% - 504px)}
  body.pyhub-kasse form.checkout{display:grid;grid-template-columns:minmax(0,1fr) 440px;grid-template-rows:auto auto 1fr;
    grid-template-areas:"hinweis hinweis" "express bestellung" "kunde bestellung";column-gap:64px;align-items:start}
  body.pyhub-kasse form.checkout > .woocommerce-NoticeGroup{grid-area:hinweis}
  body.pyhub-kasse form.checkout > .wcpay-express-checkout-wrapper{grid-area:express}
  body.pyhub-kasse form.checkout > #customer_details{grid-area:kunde}
  body.pyhub-kasse form.checkout > #order_review{grid-area:bestellung;position:sticky;top:28px;
    padding:20px 22px 22px;border-radius:22px;background:var(--pyk-card);border:1px solid var(--pyk-line)}
  body.pyhub-kasse #order_review #order_payment_heading{margin-top:0}
  body.pyhub-kasse #order_review table.shop_table{background:rgba(0,0,0,.12)}
  body.pyhub-kasse .woocommerce-order{max-width:640px}
}

@media (prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
  body.pyhub-kasse #place_order:active,body.pyhub-kasse .pyk-knopf:active{transform:none}
}

/* =============================================================================
   0.4.12: Box in der Hub-Kasse (Body-Klasse pyk-ware). Rechnungsadresse, „Lieferung an eine andere
   Adresse?“ (Geschenk), Bestellnotiz, Versandart und das Länderfeld (selectWoo) im Hub-Look.
   ============================================================================= */
/* „Lieferung an eine andere Adresse senden?“ ist bei WooCommerce eine h3. Sie steht in der Schrift der Häkchen,
   nicht in der Zierschrift der Überschriften (Felix 05.11.). */
body.pyk-ware .pyk h3#ship-to-different-address{margin:24px 0 12px;font-family:var(--pyk-sans);font-size:1rem;font-weight:600;line-height:1.35}
body.pyk-ware #ship-to-different-address label{display:flex;align-items:center;gap:12px;cursor:pointer;font:inherit;color:var(--pyk-cream)}
body.pyk-ware #ship-to-different-address input[type=checkbox]{width:22px;height:22px;margin:0;accent-color:var(--pyk-terra)}
body.pyk-ware .shipping_address{margin-top:6px}
body.pyk-ware .woocommerce-additional-fields textarea{width:100%;min-height:96px;box-sizing:border-box;padding:12px 14px;border-radius:14px;
  border:1px solid var(--pyk-feldrand);background:var(--pyk-feld);color:var(--pyk-cream);font:inherit;resize:vertical}
body.pyk-ware .woocommerce-additional-fields textarea:focus{border-color:var(--pyk-apricot);outline:none}
@media (min-width:600px){
  body.pyhub-kasse .woocommerce-shipping-fields__field-wrapper{display:grid;grid-template-columns:1fr 1fr;column-gap:14px}
  body.pyhub-kasse .woocommerce-shipping-fields__field-wrapper > .form-row{grid-column:1 / -1}
  body.pyhub-kasse .woocommerce-shipping-fields__field-wrapper > .form-row-first{grid-column:1}
  body.pyhub-kasse .woocommerce-shipping-fields__field-wrapper > .form-row-last{grid-column:2}
}
/* Versandart in der Bestellübersicht */
body.pyhub-kasse table.shop_table tr.woocommerce-shipping-totals th{font-weight:500;color:var(--pyk-soft)}
body.pyhub-kasse table.shop_table tr.woocommerce-shipping-totals td{text-align:right}
body.pyhub-kasse #shipping_method{list-style:none;margin:0;padding:0}
body.pyhub-kasse #shipping_method li{margin:0;padding:0;display:flex;justify-content:flex-end;align-items:center;gap:8px}
body.pyhub-kasse #shipping_method li label{color:var(--pyk-cream)}
body.pyhub-kasse .woocommerce-shipping-destination{display:block;margin-top:4px;font-size:.78rem;color:var(--pyk-leise)}
/* Länderfeld: WooCommerce ersetzt das Auswahlfeld durch selectWoo */
body.pyhub-kasse .select2-container{width:100%!important}
body.pyhub-kasse .select2-container .select2-selection--single{height:48px;border-radius:14px;border:1px solid var(--pyk-feldrand);background:var(--pyk-feld)}
body.pyhub-kasse .select2-container .select2-selection--single .select2-selection__rendered{line-height:46px;padding:0 40px 0 14px;color:var(--pyk-cream)}
body.pyhub-kasse .select2-container .select2-selection--single .select2-selection__arrow{height:46px;right:10px}
body.pyhub-kasse .select2-container .select2-selection--single .select2-selection__arrow b{border-color:var(--pyk-soft) transparent transparent}
body.pyhub-kasse .select2-container--focus .select2-selection--single,
body.pyhub-kasse .select2-container--open .select2-selection--single{border-color:var(--pyk-apricot)}
.select2-container .select2-dropdown{background:#3a2e29;border:1px solid rgba(252,241,229,.25);border-radius:14px;overflow:hidden;color:#FCF1E5}
.select2-container .select2-search--dropdown .select2-search__field{background:rgba(252,241,229,.07);border:1px solid rgba(252,241,229,.25);border-radius:10px;color:#FCF1E5;padding:8px 10px}
.select2-container .select2-results__option{padding:10px 14px}
.select2-container .select2-results__option--highlighted[aria-selected],
.select2-container .select2-results__option--highlighted[data-selected]{background:#B86A4F;color:#FCF1E5}
.select2-container .select2-results__option[aria-selected=true],
.select2-container .select2-results__option[data-selected=true]{background:rgba(252,241,229,.1)}
/* 0.4.13: Produktzeile mit Bild (Germanized) breit genug, Preis-Spalte schmal; Germanized-Widerrufsknopf steht im Fuß */
body.pyhub-kasse table.shop_table td.product-total{width:1%}
body.pyhub-kasse .wc-gzd-cart-item-name-wrapper{display:flex;align-items:center;gap:14px}
body.pyhub-kasse .wc-gzd-cart-item-thumbnail{flex:0 0 auto}
body.pyhub-kasse .wc-gzd-cart-item-thumbnail img{width:52px;height:52px;object-fit:cover;border-radius:10px;display:block}
body.pyhub-kasse .wc-gzd-cart-info{margin:6px 0 0;font-size:.85rem;color:var(--pyk-soft)}
.eu-owb-order-withdraw-from-contract-button{display:none!important}

/* 0.4.17: Hinweis unter „Name deines Partners“ immer sichtbar. WooCommerce blendet Feldbeschreibungen sonst
   per Skript nur beim Hineintippen ein und danach wieder aus (Inline-Style, daher !important). */
body.pyhub-kasse .form-row .description{display:block!important;margin:6px 2px 0;font-size:.82rem;line-height:1.4;color:var(--pyk-leise)}
/* 0.4.20: Danke-Seite am Handy. Die Zeile „PayPal (adresse@…)“ durfte nicht umbrechen und machte die Tabelle
   „Bestelldetails“ breiter als den Bildschirm (443 statt 335 px). Jetzt brechen alle Zellen um, alle Karten gleich breit. */
body.pyhub-kasse table.order_details{width:100%;max-width:100%;box-sizing:border-box;table-layout:fixed}
body.pyhub-kasse table.order_details th,
body.pyhub-kasse table.order_details td{white-space:normal!important;overflow-wrap:anywhere}
body.pyhub-kasse table.order_details tfoot th{width:42%}
body.pyhub-kasse table.order_details td.product-total{width:32%}
body.pyhub-kasse .woocommerce-order-overview,
body.pyhub-kasse .woocommerce-order-details,
body.pyhub-kasse .woocommerce-customer-details{max-width:none;width:100%;box-sizing:border-box}
/* 0.4.21: PayPal-Knöpfe (weiße Pillen, eingestellt in PayPal Payments > Gestaltung > Klassische Kasse) so breit wie
   die Bestellübersicht. Das PayPal-Skript setzt sonst fest 280 px. */
body.pyhub-kasse #ppc-button-ppcp-gateway .paypal-buttons{width:100%!important;max-width:none!important;min-width:0!important}
body.pyhub-kasse #ppc-button-ppcp-gateway .paypal-buttons iframe{width:100%!important}
body.pyhub-kasse .ppc-button-wrapper{margin-top:4px}
/* 0.4.22: AGB-Häkchen (Germanized). Das Label war inline, dadurch rutschten die Folgezeilen unter das Kästchen.
   Jetzt steht der Text als Block rechts neben dem Häkchen. */
body.pyhub-kasse .form-row label.woocommerce-form__label-for-checkbox{display:block!important;position:relative;padding-left:38px!important;min-height:26px;line-height:1.5}
body.pyhub-kasse .form-row label.woocommerce-form__label-for-checkbox input[type=checkbox]{position:absolute!important;left:0;top:1px;margin:0}

/* ---- Farbe der Box (seit 0.4.30): Wahl oben in der Kasse, jeder Kaufweg kommt hier vorbei ---- */
body.pyhub-kasse .pyk-kurz-mit-farbe{margin-bottom:10px}
body.pyhub-kasse .pyk-farben{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 22px}
body.pyhub-kasse .pyk-farben-titel{font-size:.85rem;color:var(--pyk-leise);margin-right:4px}
body.pyhub-kasse .pyk .pyk-farbe{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border-radius:999px;
  border:1px solid var(--pyk-feldrand);background:var(--pyk-feld);color:var(--pyk-cream);font-size:.95rem;font-weight:500}
body.pyhub-kasse .pyk .pyk-farbe.ist-gewaehlt{border-color:var(--pyk-apricot);box-shadow:inset 0 0 0 1px var(--pyk-apricot);font-weight:600}
body.pyhub-kasse .pyk .pyk-farbe.ist-aus{opacity:.45}
body.pyhub-kasse .pyk-punkt{width:16px;height:16px;border-radius:50%;flex:none;background:#CDB596;box-shadow:inset 0 0 0 1px rgba(0,0,0,.18)}
body.pyhub-kasse .pyk-punkt-kraftbraun{background:#A9825A}