/* ===================================================================== GrowCologne – Shop (B22–B25): Produktarchiv, Produktseite, Warenkorb, Kasse, Konto Lädt nur auf Woo-Seiten (inc/assets.php). Die Produktkarte steht in card.css. Geltungsbereich: Jede Regel beginnt mit `html:root body` + Klasse eines Shop-Abschnitts aus scripts/relaunch/build/shop.php: .gc-archive-head / .gc-archive Vorlage „GC Produktarchiv“ .gc-pdp / .gc-pdp-details Vorlage „GC Produkt“ .gc-woo-page Vorlage „GC Shop-Seite“ (Warenkorb, Kasse, Konto, Danke-Seite) Außerhalb dieser Abschnitte wird nichts gestaltet. Markup = WooCommerce-Kern 10.8 + Germanized (die Healfio-Overrides sind per Filter neutralisiert, inc/woocommerce.php): Überschriften sind wieder h2/h3, Spalten `.col-1/.col-2`. Spezifität: WooCommerce und Healfio schreiben Regeln wie `.woocommerce div.product form.cart .button` (0,4,2) oder `.woocommerce #payment #place_order` (2,1,0). Wo eine Klasse nicht reicht, wird sie mit denselben Elementen/IDs verlängert – `!important` nur, wo ein Inline-Stil oder Healfios `!important` anders nicht zu schlagen ist (jeweils kommentiert). Germanized-Ausgaben werden gestaltet, nie ausgeblendet. Aufbau: 1 Rahmen · 2 Gemeinsames (Hinweise, Buttons, Formulare, Tabellen) · 3 Archiv · 4 Produktseite · 5 Warenkorb · 6 Kasse · 7 Konto · 8 Bestellung/Danke-Seite. ===================================================================== */ /* ===================================================================== 1 · Rahmen der Shop-Abschnitte (Boxed-Container wie `.gc-sec`, eigener Abstand) ===================================================================== */ html:root body :is(.gc-archive,.gc-pdp,.gc-pdp-details,.gc-woo-page).e-con-boxed{padding-inline:var(--gc-gut)} html:root body :is(.gc-archive,.gc-pdp,.gc-pdp-details,.gc-woo-page).e-con-boxed>.e-con-inner{max-width:calc(var(--gc-wrap) - 2*var(--gc-gut))} html:root body :is(.gc-archive,.gc-pdp,.gc-pdp-details,.gc-woo-page){color:var(--gc-ink);font:400 var(--gc-fs-body)/1.6 var(--gc-sans);letter-spacing:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:clip} html:root body .gc-archive{padding-bottom:var(--gc-sec)} html:root body .gc-pdp{padding-block:clamp(16px,.8rem + 1vw,28px) clamp(32px,1.4rem + 2.4vw,64px)} html:root body .gc-pdp-details{padding-bottom:clamp(40px,2rem + 3vw,88px)} html:root body .gc-woo-page{padding-bottom:var(--gc-sec)} /* Seitenkopf vor Warenkorb/Kasse/Konto: weniger Abstand nach unten als vor einem Textabschnitt */ html:root body .gc-woo-head{padding-bottom:clamp(16px,.8rem + 1vw,28px)} /* Fokus: Healfio setzt `:focus{outline:none}` */ html:root body :is(.gc-archive-head,.gc-archive,.gc-pdp,.gc-pdp-details,.gc-woo-page) :is(a,button,summary,[tabindex]):focus-visible{outline:3px solid var(--gc-nacht);outline-offset:2px} /* ===================================================================== 2 · Gemeinsames ===================================================================== */ /* ---------- Überschriften aus den Woo-Vorlagen (h2/h3 nach „Standard“) ---------- */ html:root body :is(.gc-woo-page,.gc-pdp-details) :is(h2,h3,h4,legend){margin:0 0 .6em;font:800 var(--gc-fs-h3)/1.15 var(--gc-sans);letter-spacing:-.02em;text-transform:none;color:var(--gc-ink);text-wrap:balance} html:root body :is(.gc-woo-page,.gc-pdp-details) h3{font-size:clamp(1.0625rem,1rem + .3vw,1.25rem)} html:root body :is(.gc-woo-page,.gc-pdp-details) h4{font-size:1.0625rem} /* Healfio setzt vor Überschriften und Labels einen grünen Balken (Icon-Schrift) */ html:root body :is(.gc-woo-page,.gc-pdp,.gc-pdp-details) :is(h2,h3,h4,h5,label,.comment-reply-title)::before{content:none} html:root body :is(.gc-archive,.gc-pdp,.gc-pdp-details,.gc-woo-page) :is(p,ul,ol,dl,address){font-size:inherit;line-height:inherit} html:root body :is(.gc-pdp-details,.gc-woo-page) a:where(:not(.button,.gc-btn)){color:var(--gc-gruen);text-decoration:underline;text-underline-offset:.18em} html:root body :is(.gc-pdp-details,.gc-woo-page) a:where(:not(.button,.gc-btn)):hover{color:var(--gc-gruen-d)} /* ---------- Hinweise (`gc-notice`-Optik für .woocommerce-message/-info/-error) ---------- */ html:root body :is(.gc-archive,.gc-pdp,.gc-pdp-details,.gc-woo-page) :is(.woocommerce-message,.woocommerce-info,.woocommerce-error,.woocommerce-noreviews,.cart-empty), html:root body .woocommerce-notices-wrapper>:is(.woocommerce-message,.woocommerce-info,.woocommerce-error){position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;width:auto;margin:0 0 var(--gc-s2);padding:14px 18px 14px 22px;border:0;border-radius:var(--gc-r-s);background:#fff;color:var(--gc-ink);font:500 .9375rem/1.45 var(--gc-sans);letter-spacing:normal;list-style:none;box-shadow:inset 6px 0 0 var(--gc-gruen),var(--gc-sh);overflow:hidden} html:root body :is(.gc-archive,.gc-pdp,.gc-pdp-details,.gc-woo-page) :is(.woocommerce-info,.woocommerce-noreviews,.cart-empty), html:root body .woocommerce-notices-wrapper>.woocommerce-info{box-shadow:inset 6px 0 0 var(--gc-nacht),var(--gc-sh)} html:root body :is(.gc-archive,.gc-pdp,.gc-pdp-details,.gc-woo-page) .woocommerce-error, html:root body .woocommerce-notices-wrapper>.woocommerce-error{display:grid;gap:6px;box-shadow:inset 6px 0 0 #B3261E,var(--gc-sh)} /* Woo-/Healfio-Icons (Icon-Schrift, absolut positioniert) aus */ html:root body :is(.gc-archive,.gc-pdp,.gc-pdp-details,.gc-woo-page) :is(.woocommerce-message,.woocommerce-info,.woocommerce-error,.woocommerce-noreviews,.cart-empty)::before, html:root body :is(.gc-archive,.gc-pdp,.gc-pdp-details,.gc-woo-page) :is(.woocommerce-message,.woocommerce-info,.woocommerce-error,.woocommerce-noreviews,.cart-empty)::after, html:root body .woocommerce-notices-wrapper>:is(.woocommerce-message,.woocommerce-info,.woocommerce-error)::before, html:root body .woocommerce-notices-wrapper>:is(.woocommerce-message,.woocommerce-info,.woocommerce-error)::after{content:none} html:root body :is(.gc-archive,.gc-pdp,.gc-pdp-details,.gc-woo-page) .woocommerce-error li, html:root body .woocommerce-notices-wrapper>.woocommerce-error li{margin:0;padding:0;list-style:none} html:root body :is(.gc-archive,.gc-pdp,.gc-pdp-details,.gc-woo-page) :is(.woocommerce-message,.woocommerce-info,.woocommerce-error) a:where(:not(.button)), html:root body .woocommerce-notices-wrapper>:is(.woocommerce-message,.woocommerce-info,.woocommerce-error) a:where(:not(.button)){color:var(--gc-gruen);font-weight:700;text-decoration:underline;text-underline-offset:.18em} /* Button im Hinweis („Warenkorb anzeigen“): klein, rechts */ html:root body :is(.gc-archive,.gc-pdp,.gc-pdp-details,.gc-woo-page) :is(.woocommerce-message,.woocommerce-info,.woocommerce-error) .button, html:root body .woocommerce-notices-wrapper>:is(.woocommerce-message,.woocommerce-info,.woocommerce-error) .button{order:2;float:none;min-height:40px;margin:0 0 0 auto;padding:0 16px;font-size:.875rem} /* Hinweis über der Produktvorlage (Elementor druckt ihn vor dem ersten Abschnitt): in die Inhaltsbreite holen */ html:root body .woocommerce-notices-wrapper:not(:empty):where(:not(.gc-woo-page *,.gc-archive *,.gc-pdp *)){width:100%;max-width:var(--gc-wrap);margin:var(--gc-s2) auto 0;padding-inline:var(--gc-gut)} /* ---------- Buttons ---------- */ /* Gegen Woo (`.woocommerce a.button`, `.woocommerce button.button.alt`) und Healfio (Fläche, Schatten, Radius). */ html:root body :is(.gc-archive,.gc-pdp,.gc-pdp-details,.gc-woo-page,.woocommerce-notices-wrapper) :is(a,button,input).button, html:root body :is(.gc-archive,.gc-pdp,.gc-pdp-details,.gc-woo-page) :is(button[type="submit"],input[type="submit"]){display:inline-flex;align-items:center;justify-content:center;gap:.5em;width:auto;min-height:52px;margin:0;padding:0 1.35em;border:2px solid transparent;border-radius:999px;background:var(--gc-gruen);color:#fff;font:700 1rem/1.15 var(--gc-sans);letter-spacing:normal;text-transform:none;text-decoration:none;text-align:center;white-space:normal;box-shadow:none;opacity:1;cursor:pointer;transition:transform .18s var(--gc-ease),box-shadow .18s var(--gc-ease),background-color .18s} html:root body :is(.gc-archive,.gc-pdp,.gc-pdp-details,.gc-woo-page,.woocommerce-notices-wrapper) :is(a,button,input).button:hover, html:root body :is(.gc-archive,.gc-pdp,.gc-pdp-details,.gc-woo-page) :is(button[type="submit"],input[type="submit"]):hover{background:var(--gc-gruen-d);color:#fff;transform:translateY(-2px);box-shadow:0 12px 20px -12px rgba(7,59,46,.6)} html:root body :is(.gc-archive,.gc-pdp,.gc-pdp-details,.gc-woo-page) :is(a,button,input).button:is(:disabled,.disabled,[disabled]){opacity:.5;cursor:not-allowed;transform:none;box-shadow:none} /* Zweitrangige Aktionen: Linien-Button */ html:root body :is(.gc-woo-page,.gc-pdp-details) :is(button[name="update_cart"],button[name="apply_coupon"],.woocommerce-Button--previous,.woocommerce-Button--next,.woocommerce-orders-table .button,.woocommerce-MyAccount-content .woocommerce-info .button,.return-to-shop .button), html:root body .woocommerce-notices-wrapper .button{background:#fff;color:var(--gc-gruen);border-color:var(--gc-gruen)} html:root body :is(.gc-woo-page,.gc-pdp-details) :is(button[name="update_cart"],button[name="apply_coupon"],.woocommerce-Button--previous,.woocommerce-Button--next,.woocommerce-orders-table .button,.woocommerce-MyAccount-content .woocommerce-info .button,.return-to-shop .button):hover, html:root body .woocommerce-notices-wrapper .button:hover{background:var(--gc-salbei);color:var(--gc-nacht)} /* ---------- Formulare (`gc-form`-Optik) ---------- */ html:root body :is(.gc-archive,.gc-pdp,.gc-pdp-details,.gc-woo-page) form .form-row{display:block;float:none;width:100%;margin:0 0 var(--gc-s2);padding:0} html:root body :is(.gc-archive,.gc-pdp,.gc-pdp-details,.gc-woo-page) label{display:block;margin:0 0 6px;font:700 .9375rem/1.3 var(--gc-sans);letter-spacing:normal;color:var(--gc-ink)} html:root body :is(.gc-archive,.gc-pdp,.gc-pdp-details,.gc-woo-page) label :is(.required,abbr){color:#B3261E;text-decoration:none;border:0} html:root body :is(.gc-archive,.gc-pdp,.gc-pdp-details,.gc-woo-page) label .optional{font-weight:400;color:var(--gc-ink-2)} html:root body :is(.gc-archive,.gc-pdp,.gc-pdp-details,.gc-woo-page) :is(input[type="text"],input[type="email"],input[type="tel"],input[type="password"],input[type="number"],input[type="search"],input[type="url"],input[type="date"],textarea,select), html:root body :is(.gc-archive,.gc-pdp,.gc-pdp-details,.gc-woo-page) .select2-container .select2-selection--single{display:block;width:100%;min-height:52px;margin:0;padding:0 16px;border:1.5px solid rgba(7,59,46,.28);border-radius:var(--gc-r-s);background-color:#fff;color:var(--gc-ink);font:500 1rem/1.3 var(--gc-sans);letter-spacing:normal;box-shadow:none;transition:border-color .15s,box-shadow .15s} html:root body :is(.gc-archive,.gc-pdp,.gc-pdp-details,.gc-woo-page) textarea{min-height:120px;padding:12px 16px;line-height:1.5} html:root body :is(.gc-archive,.gc-pdp,.gc-pdp-details,.gc-woo-page) select{padding-right:44px;-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23073B2E' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:18px;cursor:pointer} html:root body :is(.gc-archive,.gc-pdp,.gc-pdp-details,.gc-woo-page) :is(input[type="text"],input[type="email"],input[type="tel"],input[type="password"],input[type="number"],input[type="search"],input[type="url"],input[type="date"],textarea,select):focus{border-color:var(--gc-gruen);box-shadow:0 0 0 3px rgba(1,120,92,.22);outline:0} html:root body :is(.gc-archive,.gc-pdp,.gc-pdp-details,.gc-woo-page) ::placeholder{color:var(--gc-ink-2);opacity:.75} /* Fehler/Erfolg der Woo-Validierung */ html:root body :is(.gc-woo-page,.gc-pdp-details) .form-row.woocommerce-invalid :is(input.input-text,select,textarea,.select2-selection--single){border-color:#B3261E} html:root body :is(.gc-woo-page,.gc-pdp-details) .form-row.woocommerce-validated :is(input.input-text,select,textarea){border-color:var(--gc-gruen)} html:root body :is(.gc-woo-page,.gc-pdp-details) .checkout-inline-error-message{margin:6px 0 0;font-size:.875rem;font-weight:600;color:#B3261E} /* Kästchen und Radio */ html:root body :is(.gc-archive,.gc-pdp,.gc-pdp-details,.gc-woo-page) :is(input[type="checkbox"],input[type="radio"]){flex:none;width:20px;height:20px;min-height:0;margin:2px 10px 0 0;padding:0;accent-color:var(--gc-gruen);vertical-align:top} html:root body :is(.gc-archive,.gc-pdp,.gc-pdp-details,.gc-woo-page) :is(input[type="checkbox"],input[type="radio"]):focus-visible{outline:3px solid var(--gc-nacht);outline-offset:2px} html:root body :is(.gc-archive,.gc-pdp,.gc-pdp-details,.gc-woo-page) label:is(.checkbox,.woocommerce-form__label-for-checkbox){display:flex;align-items:flex-start;font-weight:500;line-height:1.45;cursor:pointer} /* select2 (Land, Bundesland) */ html:root body :is(.gc-woo-page) .select2-container{width:100%!important} /* !important: select2 setzt die Breite als Inline-Stil */ html:root body :is(.gc-woo-page) .select2-container .select2-selection--single{display:flex;align-items:center;height:52px;padding:0 44px 0 16px} html:root body :is(.gc-woo-page) .select2-container .select2-selection--single .select2-selection__rendered{padding:0;line-height:1.3;color:var(--gc-ink)} html:root body :is(.gc-woo-page) .select2-container .select2-selection--single .select2-selection__arrow{top:0;right:10px;height:100%} /* Passwort-Auge */ html:root body :is(.gc-woo-page) .password-input{position:relative;display:block} html:root body :is(.gc-woo-page) .password-input input{padding-right:52px} html:root body :is(.gc-woo-page) .show-password-input{position:absolute;right:6px;top:50%;width:40px;height:40px;min-height:0;margin:0;padding:0;border:0;border-radius:50%;background:transparent;color:var(--gc-ink-2);transform:translateY(-50%);cursor:pointer} html:root body :is(.gc-woo-page) .show-password-input:hover{background:var(--gc-salbei);transform:translateY(-50%);box-shadow:none} /* Mengenfeld */ html:root body :is(.gc-pdp,.gc-woo-page) .quantity{display:inline-flex;margin:0} html:root body :is(.gc-pdp,.gc-woo-page) .quantity input.qty{width:84px;min-height:52px;padding:0 6px;border-radius:999px;font-weight:700;text-align:center;-moz-appearance:textfield;appearance:textfield} /* ---------- Tabellen ---------- */ html:root body :is(.gc-woo-page,.gc-pdp-details) table:is(.shop_table,.shop_attributes,.woocommerce-table){width:100%;margin:0 0 var(--gc-s3);border:0;border-radius:var(--gc-r-m);border-collapse:separate;border-spacing:0;background:#fff;box-shadow:var(--gc-sh);font-size:.9375rem;line-height:1.45;overflow:hidden} html:root body :is(.gc-woo-page,.gc-pdp-details) table:is(.shop_table,.shop_attributes,.woocommerce-table) :is(th,td){padding:14px 16px;border:0;border-top:1px solid var(--gc-line);background:none;text-align:left;vertical-align:middle;font-style:normal} html:root body :is(.gc-woo-page,.gc-pdp-details) table:is(.shop_table,.shop_attributes,.woocommerce-table) th{font-weight:700;color:var(--gc-ink)} html:root body :is(.gc-woo-page,.gc-pdp-details) table:is(.shop_table,.shop_attributes,.woocommerce-table) :is(thead th,tbody tr:first-child>*){border-top:0} html:root body :is(.gc-woo-page,.gc-pdp-details) table:is(.shop_table,.woocommerce-table) thead+tbody tr:first-child>*{border-top:1px solid var(--gc-line)} html:root body :is(.gc-woo-page,.gc-pdp-details) table:is(.shop_table,.woocommerce-table) thead th{background:var(--gc-salbei);font-size:.8125rem;letter-spacing:.04em;text-transform:uppercase} html:root body :is(.gc-woo-page,.gc-pdp-details) table.shop_attributes p{margin:0} html:root body :is(.gc-woo-page,.gc-pdp-details) table.shop_attributes th{width:34%} /* Germanized-Angaben in Tabellen und Summen: klein, aber lesbar */ html:root body :is(.gc-woo-page) :is(.wc-gzd-additional-info,.wc-gzd-cart-info,.includes_tax,.tax_label,.unit-price,.delivery-time-info,.units-info,.wc-gzd-additional-wrapper){font-size:.8125rem;font-weight:400;line-height:1.4;color:var(--gc-ink-2)} html:root body :is(.gc-woo-page) p:is(.wc-gzd-additional-info,.delivery-time-info,.unit-price,.units-info){margin:2px 0 0} /* ===================================================================== 3 · Produktarchiv ===================================================================== */ html:root body .gc-archive-head{padding-bottom:clamp(16px,.8rem + 1.2vw,32px)} /* Beschreibung der Kategorie (aus Woo) */ html:root body .gc-archive-desc :is(.term-description,.page-description){max-width:72ch;font-size:var(--gc-fs-lead);line-height:1.55;font-weight:500;color:var(--gc-ink)} html:root body .gc-archive-desc :is(.term-description,.page-description) p{margin:0} html:root body .gc-archive-desc :is(.term-description,.page-description) p+p{margin-top:.75em} /* Unterkategorie-Chips */ html:root body .gc-subcats{font:400 .9375rem/1.2 var(--gc-sans);letter-spacing:normal} html:root body .gc-subcats ul{display:flex;flex-wrap:wrap;gap:8px} html:root body .gc-subcat{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 15px;border-radius:999px;background:#fff;color:var(--gc-ink);font-weight:700;text-decoration:none;white-space:nowrap;box-shadow:inset 0 0 0 1.5px var(--gc-line);transition:background-color .15s} html:root body .gc-subcat:hover{background:var(--gc-salbei)} html:root body .gc-subcat[aria-current]{background:var(--gc-nacht);color:#fff;box-shadow:none} html:root body .gc-subcat-n{font-weight:500;font-size:.8125rem;color:var(--gc-ink-2)} html:root body .gc-subcat[aria-current] .gc-subcat-n{color:var(--gc-on-dark-2)} /* Rücklink auf die Warengruppen-Seite ([gc_shop_group_hint], 17 §4 L2) */ html:root body .gc-shop-hint{font:400 .9375rem/1.5 var(--gc-sans);letter-spacing:normal;color:var(--gc-ink-2)} html:root body .gc-shop-hint a{display:inline-flex;align-items:center;min-height:44px;font-weight:700;color:var(--gc-gruen);text-decoration:underline;text-underline-offset:.18em} html:root body .gc-shop-hint a:hover{color:var(--gc-nacht)} @media (max-width:720px){ /* Eine Zeile zum Wischen; die Zeile läuft bis an den Bildschirmrand */ html:root body .gc-subcats{margin-inline:calc(-1*var(--gc-gut))} html:root body .gc-subcats ul{flex-wrap:nowrap;overflow-x:auto;padding:4px var(--gc-gut);scroll-padding-inline:var(--gc-gut);scrollbar-width:none;-webkit-overflow-scrolling:touch} html:root body .gc-subcats ul::-webkit-scrollbar{display:none} } /* Leiste: Suche · Sortierung · Warenkorb */ html:root body .gc-shop-bar{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:12px 16px;margin-bottom:var(--gc-s3)} html:root body .gc-shop-search{flex:1 1 220px;min-width:0;max-width:420px} html:root body .gc-shop-search form{display:flex;gap:8px;margin:0} html:root body .gc-shop-search input[type="search"]{flex:1 1 auto;min-width:0;min-height:48px;border-radius:999px;padding:0 18px} html:root body .gc-shop-search button[type="submit"]{flex:none;min-height:48px;padding:0 18px;background:var(--gc-nacht);font-size:.9375rem} html:root body .gc-shop-search button[type="submit"]:hover{background:var(--gc-nacht-2)} html:root body .gc-shop-sort{order:2;display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin-left:auto} html:root body .gc-shop-sort .woocommerce-result-count{float:none;margin:0;padding:0;border:0;font:500 .875rem/1.3 var(--gc-sans);color:var(--gc-ink-2)} html:root body .gc-shop-sort .woocommerce-result-count::before{content:none} html:root body .gc-shop-sort .woocommerce-ordering{float:none;margin:0} html:root body .gc-shop-sort select.orderby{width:auto;max-width:100%;min-height:48px;border-radius:999px;font-weight:600;font-size:.9375rem} /* Warenkorb-Link */ html:root body .gc-cart-link{order:3;flex:none;display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:0 10px 0 16px;border-radius:999px;background:#fff;color:var(--gc-ink);font:700 .9375rem/1 var(--gc-sans);letter-spacing:normal;text-decoration:none;white-space:nowrap;box-shadow:inset 0 0 0 1.5px var(--gc-line)} html:root body .gc-cart-link:hover{background:var(--gc-salbei)} html:root body .gc-cart-link svg{flex:none;width:20px;height:20px} html:root body .gc-cart-link-n{display:grid;place-items:center;min-width:28px;height:28px;padding:0 8px;border-radius:999px;background:var(--gc-salbei);color:var(--gc-nacht);font-size:.8125rem} html:root body .gc-cart-link.gc-has-items .gc-cart-link-n{background:var(--gc-gruen);color:#fff} @media (max-width:720px){ html:root body .gc-shop-search{flex:1 1 0;max-width:none} html:root body .gc-shop-search button[type="submit"]{padding:0 14px} html:root body .gc-cart-link{order:1} html:root body .gc-cart-link-text{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)} html:root body .gc-shop-sort{flex:1 1 100%;justify-content:space-between;margin-left:0} } /* Leerzustand */ html:root body .gc-empty{display:grid;gap:14px;justify-items:start;padding:clamp(22px,1rem + 3vw,56px);border-radius:var(--gc-r-l);background:#fff;box-shadow:var(--gc-sh);font:400 var(--gc-fs-body)/1.6 var(--gc-sans)} html:root body .gc-empty-h{font:800 var(--gc-fs-h3)/1.15 var(--gc-sans);letter-spacing:-.02em;color:var(--gc-ink)} html:root body .gc-empty-p{max-width:60ch} html:root body .gc-empty .gc-shop-search{flex:none;width:100%} /* ===================================================================== 4 · Produktseite ===================================================================== */ html:root body .gc-pdp-top{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px;margin-bottom:clamp(12px,.6rem + 1vw,24px)} html:root body .gc-pdp-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--gc-s3)} html:root body .gc-pdp-media{min-width:0} html:root body .gc-pdp-buy{display:flex;flex-direction:column;flex-wrap:nowrap;gap:14px;min-width:0} @media (min-width:1024px){ html:root body .gc-pdp-grid{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:var(--gc-cgap);align-items:start} html:root body .gc-pdp-media{position:sticky;top:calc(var(--gc-hdr) + 20px)} } /* Galerie: weiße Sticker-Kante wie `.gc-ps` */ /* Gegen Woo: `.woocommerce div.product div.images{float:left;width:48%}` */ html:root body .gc-pdp-gallery div.woocommerce-product-gallery{position:relative;float:none;width:100%;margin:0;padding:6px;border-radius:var(--gc-r-l);background:#fff;box-shadow:var(--gc-sh-lg);opacity:1} html:root body .gc-pdp-gallery .woocommerce-product-gallery :is(.flex-viewport,.woocommerce-product-gallery__wrapper){border-radius:var(--gc-r-m);overflow:hidden;background:var(--gc-mint)} html:root body .gc-pdp-gallery .woocommerce-product-gallery__wrapper{margin:0} html:root body .gc-pdp-gallery .woocommerce-product-gallery__image a{display:block} /* Nicht das Zoom-Bild (`img.zoomImg`, liegt absolut über dem Foto und ist bis zum Überfahren unsichtbar) */ /* Hochformat-Fotos (Flaschen, 443×1200) würden mobil über zwei Bildschirme laufen: Höhe begrenzen, Foto ganz zeigen */ html:root body .gc-pdp-gallery .woocommerce-product-gallery__image img:not(.zoomImg){display:block;width:100%;height:auto;max-height:min(72vh,640px);object-fit:contain;mix-blend-mode:multiply;border-radius:0} html:root body .gc-pdp-gallery div.woocommerce-product-gallery ol.flex-control-thumbs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;margin:6px 0 0;padding:0;list-style:none} /* Gegen Woo/Healfio: `.woocommerce div.product div.images .flex-control-thumbs li{float:left;width:25%;padding:5px}` */ html:root body .gc-pdp-gallery div.woocommerce-product-gallery ol.flex-control-thumbs li{float:none;width:auto;margin:0;padding:0;list-style:none} html:root body .gc-pdp-gallery div.woocommerce-product-gallery ol.flex-control-thumbs li img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;border-radius:var(--gc-r-xs);background:var(--gc-mint);opacity:.55;cursor:pointer;transition:opacity .15s} html:root body .gc-pdp-gallery div.woocommerce-product-gallery ol.flex-control-thumbs li img:is(.flex-active,:hover){opacity:1} html:root body .gc-pdp-gallery div.woocommerce-product-gallery ol.flex-control-thumbs li img.flex-active{box-shadow:0 0 0 2px var(--gc-gruen)} @media (min-width:721px){ html:root body .gc-pdp-gallery div.woocommerce-product-gallery ol.flex-control-thumbs{grid-template-columns:repeat(7,minmax(0,1fr))} } /* Kein Layout-Sprung beim Start des Galerie-Skripts (QA P9: CLS 0,18–0,25 auf Produktseiten mit mehreren Bildern). 1) Vor dem Start liegen alle Bilder untereinander im Wrapper: nur das erste zeigen. 2) Skript gestartet, Breiten und Höhe noch nicht gesetzt (Bilder laden noch): Der Wrapper ist n×100 % breit – das erste Bild auf die Breite des Sichtfensters begrenzen, die übrigen ausblenden. 3) Die Vorschauleiste hängt das Skript erst am Ende an: ihren Platz bis dahin freihalten (5 bzw. 7 Spalten, 6 px Lücke, quadratische Bilder → Höhe = Spaltenbreite). */ html:root body .gc-pdp-gallery .woocommerce-product-gallery>.woocommerce-product-gallery__wrapper>.woocommerce-product-gallery__image:nth-child(n+2){display:none} html:root body .gc-pdp-gallery .flex-viewport{container-type:inline-size} html:root body .gc-pdp-gallery .flex-viewport:not([style*="height"]) .woocommerce-product-gallery__image{max-width:100cqw} html:root body .gc-pdp-gallery .flex-viewport:not([style*="height"]) .woocommerce-product-gallery__image:nth-child(n+2){display:none} html:root body .gc-pdp-gallery div.woocommerce-product-gallery:has(.woocommerce-product-gallery__image:nth-child(2)):not(:has(.flex-control-thumbs)){padding-bottom:calc(12px + (100% - 36px)/5)} @media (min-width:721px){ html:root body .gc-pdp-gallery div.woocommerce-product-gallery:has(.woocommerce-product-gallery__image:nth-child(2)):not(:has(.flex-control-thumbs)){padding-bottom:calc(12px + (100% - 48px)/7)} } /* Lupe */ html:root body .gc-pdp-gallery .woocommerce-product-gallery__trigger{position:absolute;right:16px;top:16px;z-index:5;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:#fff;color:var(--gc-nacht);font-size:0;text-decoration:none;box-shadow:var(--gc-sh)} /* Sale-Sticker (Woo: `span.onsale`), gleiche Optik wie auf der Karte */ html:root body :is(.gc-pdp,.gc-woo-page,.gc-archive) span.onsale{position:absolute;left:16px;right:auto;top:16px;z-index:5;min-width:0;min-height:0;margin:0;padding:.3em .62em .36em;border:3px solid #fff;border-radius:11px;background:var(--gc-neon);color:var(--gc-nacht);font:400 1.25rem/1 var(--gc-hand);letter-spacing:.01em;text-transform:none;box-shadow:var(--gc-sh);transform:rotate(-4deg)} /* Kaufbereich */ html:root body .gc-pdp-title .elementor-heading-title{margin:0} html:root body .gc-pdp-price{gap:0} html:root body .gc-pdp-price-main .price{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 12px;margin:0;font:800 clamp(1.75rem,1.4rem + 1.2vw,2.5rem)/1.1 var(--gc-sans);letter-spacing:-.025em;color:var(--gc-gruen)} html:root body .gc-pdp-price-main .price del{order:2;font-weight:500;font-size:1.0625rem;letter-spacing:normal;color:var(--gc-ink-2);opacity:1} html:root body .gc-pdp-price-main .price ins{order:1;text-decoration:none;background:none;color:inherit} html:root body .gc-pdp-legal{gap:0;margin-top:4px} html:root body .gc-pdp-legal :is(p,.wc-gzd-additional-info){margin:0;padding:0;font:400 .875rem/1.5 var(--gc-sans);letter-spacing:normal;color:var(--gc-ink-2)} html:root body .gc-pdp-legal a{color:inherit;text-decoration:underline;text-underline-offset:.16em} html:root body .gc-pdp-legal a:hover{color:var(--gc-gruen)} html:root body .gc-pdp-legal .price-unit{font-weight:600;color:var(--gc-ink)} html:root body .gc-pdp-legal .delivery-time-info{margin-top:6px;font-weight:600;color:var(--gc-ink)} /* Kurzbeschreibung */ html:root body .gc-pdp-short .woocommerce-product-details__short-description{margin:0;padding:0;border:0;border-radius:0;background:none;font-size:1rem;line-height:1.6;color:var(--gc-ink)} html:root body .gc-pdp-short .woocommerce-product-details__short-description>:first-child{margin-top:0} html:root body .gc-pdp-short .woocommerce-product-details__short-description>:last-child{margin-bottom:0} html:root body .gc-pdp-short .woocommerce-product-details__short-description :is(ul,ol){padding-left:1.2em} /* Lange Kurzbeschreibungen (JTL liefert teils die ganze Beschreibung): begrenzen, innen scrollen */ html:root body .gc-pdp-short .woocommerce-product-details__short-description{max-height:22em;overflow-y:auto;overscroll-behavior:contain} /* Bestand */ html:root body .gc-pdp-cart p.stock{display:inline-flex;align-items:center;gap:8px;margin:0 0 12px;font:700 .9375rem/1.2 var(--gc-sans);color:var(--gc-gruen)} html:root body .gc-pdp-cart p.stock::before{content:"";flex:none;width:9px;height:9px;border-radius:50%;background:currentColor} html:root body .gc-pdp-cart p.stock.out-of-stock{padding:8px 14px;border-radius:var(--gc-r-xs);background:var(--gc-beige);color:var(--gc-nacht)} html:root body .gc-pdp-cart p.stock.available-on-backorder{color:var(--gc-ink-2)} /* Menge + In den Warenkorb. Gegen Woo: `.woocommerce div.product form.cart .button{float:left}`, `div.quantity{float:left;margin:0 4px 0 0}` */ html:root body .gc-pdp-cart form.cart{display:flex;flex-wrap:wrap;align-items:stretch;gap:10px;margin:0;padding:0} html:root body .gc-pdp-cart form.cart div.quantity{float:none;margin:0} html:root body .gc-pdp-cart form.cart div.quantity input.qty{width:88px;height:100%;min-height:56px;font-size:1.0625rem} html:root body .gc-pdp-cart form.cart button.single_add_to_cart_button.button{flex:1 1 200px;float:none;min-height:56px;font-size:1.0625rem} html:root body .gc-pdp-cart form.cart :is(.e-atc-qty-button-holder){display:contents} /* Varianten. Gegen Healfio: `.woocommerce div.product form.cart .variations select` (grau, max. 11rem, float), Label 18px mit Balken */ html:root body .gc-pdp-cart form.variations_form{display:block} html:root body .gc-pdp-cart.elementor-widget form.cart table.variations{width:100%;margin:0 0 12px;border:0;border-collapse:collapse;background:none;box-shadow:none} html:root body .gc-pdp-cart.elementor-widget form.cart table.variations :is(tbody,tr,th,td){display:block;width:100%;padding:0;border:0;background:none;text-align:left} html:root body .gc-pdp-cart.elementor-widget form.cart table.variations th.label{margin:0 0 6px} html:root body .gc-pdp-cart.elementor-widget form.cart table.variations th.label label{margin:0;font:700 .9375rem/1.3 var(--gc-sans);letter-spacing:normal;word-break:normal;color:var(--gc-ink)} html:root body .gc-pdp-cart.elementor-widget form.cart table.variations td.value{margin:0 0 6px} html:root body .gc-pdp-cart.elementor-widget form.cart table.variations select{float:none;width:100%;min-width:0;max-width:none;min-height:52px;margin:0;padding:0 44px 0 16px;border:1.5px solid rgba(7,59,46,.28);border-radius:var(--gc-r-s);background-color:#fff;color:var(--gc-ink);font:500 1rem/1.3 var(--gc-sans);white-space:normal} html:root body .gc-pdp-cart.elementor-widget form.cart table.variations select:hover{background-color:#fff} /* „Auswahl zurücksetzen“: Healfio erzwingt `display:block!important` und eine 100px-Pille */ html:root body .gc-pdp-cart.elementor-widget form.cart .reset_variations{float:none;width:auto;margin:6px 0 0;padding:6px 0;border-radius:0;background:none;font-size:.875rem;font-weight:600;line-height:1.3;text-align:left;color:var(--gc-ink-2);text-decoration:underline;text-underline-offset:.18em} html:root body .gc-pdp-cart .single_variation_wrap{display:block} html:root body .gc-pdp-cart .woocommerce-variation{margin:0 0 12px} html:root body .gc-pdp-cart .woocommerce-variation:empty{margin:0} html:root body .gc-pdp-cart .woocommerce-variation-price .price{margin:0;font:800 1.375rem/1.2 var(--gc-sans);color:var(--gc-gruen)} html:root body .gc-pdp-cart .woocommerce-variation :is(p,.wc-gzd-additional-info){margin:2px 0 0;font-size:.875rem;color:var(--gc-ink-2)} html:root body .gc-pdp-cart .woocommerce-variation-add-to-cart{display:flex;flex-wrap:wrap;align-items:stretch;gap:10px} html:root body .gc-pdp-cart .woocommerce-variation-add-to-cart-disabled button.single_add_to_cart_button{opacity:.5} /* Abholung im Laden (in Vorbereitung) */ html:root body .gc-pickup{display:grid;gap:6px;padding:16px 18px;border-radius:var(--gc-r-m);background:var(--gc-salbei);color:var(--gc-nacht);font:400 .9375rem/1.5 var(--gc-sans)} html:root body .gc-pickup-h{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;font-size:1rem} html:root body .gc-pickup .gc-tag{background:#fff} html:root body .gc-pickup a{font-weight:700} html:root body .gc-pickup .gc-txt-link{min-height:36px} /* Rücklink Produkt → Warengruppen-Seite ([gc_product_group], 17 §4 L3) */ html:root body .gc-pdp-group{display:flex;align-items:center;gap:10px;font:400 .9375rem/1.5 var(--gc-sans);letter-spacing:normal;color:var(--gc-ink-2)} html:root body .gc-pdp-group svg{width:22px;height:22px;flex:none;color:var(--gc-gruen)} html:root body .gc-pdp-group a{display:inline-flex;align-items:center;min-height:44px;font-weight:700;color:var(--gc-gruen);text-decoration:underline;text-underline-offset:.18em} html:root body .gc-pdp-group a:hover{color:var(--gc-nacht)} /* Artikelnummer, Kategorie, „Produkt enthält“ */ html:root body .gc-pdp-meta .product_meta{display:flex;flex-wrap:wrap;gap:4px 18px;margin:0;padding:12px 0 0;border:0;border-top:1px solid var(--gc-line);font-size:.875rem;line-height:1.5;color:var(--gc-ink-2)} html:root body .gc-pdp-meta .product_meta>*{display:inline;margin:0} /* Healfio: grüner Balken vor jeder Zeile (`.single-product .product_meta > span:before`) */ html:root body .gc-pdp-meta .product_meta>span::before{content:none} html:root body .gc-pdp-meta .product_meta .detail-label{font-weight:700;color:var(--gc-ink)} html:root body .gc-pdp-meta .product_meta a{color:var(--gc-gruen);text-decoration:underline;text-underline-offset:.18em} /* Tabs: Beschreibung · Datenblatt · Produktsicherheit · Rezensionen */ html:root body .gc-pdp-details .gc-pdp-tabs .woocommerce-tabs{margin:0;padding:0} html:root body .gc-pdp-details .gc-pdp-tabs .woocommerce-tabs ul.tabs{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px;padding:0;border:0;list-style:none;overflow:visible} html:root body .gc-pdp-details .gc-pdp-tabs .woocommerce-tabs ul.tabs::before, html:root body .gc-pdp-details .gc-pdp-tabs .woocommerce-tabs ul.tabs::after, html:root body .gc-pdp-details .gc-pdp-tabs .woocommerce-tabs ul.tabs li::before, html:root body .gc-pdp-details .gc-pdp-tabs .woocommerce-tabs ul.tabs li::after{content:none;display:none} html:root body .gc-pdp-details .gc-pdp-tabs .woocommerce-tabs ul.tabs li{flex:0 0 auto;display:block;float:none;width:auto;margin:0;padding:0;border:0;border-radius:0;background:none} html:root body .gc-pdp-details .gc-pdp-tabs .woocommerce-tabs ul.tabs li a{display:inline-flex;align-items:center;min-height:46px;padding:0 18px;border-radius:999px;background:#fff;color:var(--gc-ink);font:700 .9375rem/1.2 var(--gc-sans);letter-spacing:normal;text-decoration:none;box-shadow:inset 0 0 0 1.5px var(--gc-line)} html:root body .gc-pdp-details .gc-pdp-tabs .woocommerce-tabs ul.tabs li a:hover{background:var(--gc-salbei);color:var(--gc-nacht)} html:root body .gc-pdp-details .gc-pdp-tabs .woocommerce-tabs ul.tabs li.active a{background:var(--gc-nacht);color:#fff;box-shadow:none} /* Gegen Elementor Pro (`.woocommerce div.product.elementor .woocommerce-tabs .panel`: Rahmen oben, Radius 0) und Healfio (Polster) */ html:root body .gc-pdp-details .gc-pdp-tabs .woocommerce-tabs .woocommerce-Tabs-panel.panel{margin:0;padding:clamp(20px,1rem + 2vw,44px);border:0;border-radius:var(--gc-r-l);background:#fff;box-shadow:var(--gc-sh);font-size:1rem;line-height:1.65;color:var(--gc-ink)} html:root body .gc-pdp-tabs .woocommerce-Tabs-panel>:last-child{margin-bottom:0} html:root body .gc-pdp-tabs .woocommerce-Tabs-panel--description{max-width:none} html:root body .gc-pdp-tabs .woocommerce-Tabs-panel--description>:is(p,ul,ol,h3,h4,table){max-width:78ch} html:root body .gc-pdp-tabs .woocommerce-Tabs-panel :is(ul,ol){padding-left:1.25em} html:root body .gc-pdp-tabs .woocommerce-Tabs-panel img{max-width:100%;height:auto;border-radius:var(--gc-r-s)} html:root body .gc-pdp-tabs .woocommerce-Tabs-panel table.shop_attributes{max-width:780px;margin:0;box-shadow:inset 0 0 0 1.5px var(--gc-line)} /* Bewertungen */ html:root body .gc-pdp-tabs #reviews :is(#comments,#review_form_wrapper){max-width:780px} html:root body .gc-pdp-tabs #reviews ol.commentlist{margin:0 0 var(--gc-s3);padding:0;list-style:none} html:root body .gc-pdp-tabs #reviews .comment-form-rating .stars a{color:var(--gc-gruen)} html:root body .gc-pdp-tabs #reviews .comment-reply-title{display:block;margin:0 0 10px;font:800 1.125rem/1.2 var(--gc-sans);color:var(--gc-ink)} /* Passt dazu: Abschnitt ohne Treffer nicht zeigen (Loop Grid gibt dann nichts aus) */ html:root body .gc-pdp-related{padding-block:clamp(40px,2rem + 3vw,96px);background:var(--gc-salbei)} html:root body .gc-pdp-related:not(:has(.e-loop-item)){display:none} html:root body .gc-pdp-related .gc-h2{margin-bottom:clamp(20px,1rem + 1.4vw,40px);font-size:clamp(1.75rem,1.2rem + 2vw,3rem);color:var(--gc-nacht)} /* ===================================================================== 5 · Warenkorb ===================================================================== */ html:root body.woocommerce-cart .gc-woo-page .woocommerce{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--gc-s3)} /* Woos Clearfix (`.woocommerce::before/::after`) wäre im Raster eine eigene Zelle */ html:root body:is(.woocommerce-cart,.woocommerce-account) .gc-woo-page .woocommerce::before, html:root body:is(.woocommerce-cart,.woocommerce-account) .gc-woo-page .woocommerce::after{content:none} html:root body.woocommerce-cart .gc-woo-page .woocommerce>*{min-width:0;margin-bottom:0} html:root body.woocommerce-cart .gc-woo-page .woocommerce>.woocommerce-notices-wrapper:empty{display:none} @media (min-width:1024px){ html:root body.woocommerce-cart .gc-woo-page .woocommerce{grid-template-columns:minmax(0,1fr) minmax(320px,400px);gap:var(--gc-s4);align-items:start} html:root body.woocommerce-cart .gc-woo-page .woocommerce>:not(.woocommerce-cart-form,.cart-collaterals){grid-column:1/-1} } html:root body .gc-woo-page .woocommerce-cart-form table.cart{margin:0} html:root body .gc-woo-page table.cart .product-thumbnail{width:96px;padding-right:0} html:root body .gc-woo-page table.cart .product-thumbnail img{display:block;width:80px;height:80px;max-width:none;object-fit:contain;border-radius:var(--gc-r-xs);background:var(--gc-mint)} html:root body .gc-woo-page table.cart .product-name a{font-weight:700;color:var(--gc-ink);text-decoration:none} html:root body .gc-woo-page table.cart .product-name a:hover{color:var(--gc-gruen);text-decoration:underline} html:root body .gc-woo-page table.cart :is(.product-price,.product-subtotal){font-weight:700;white-space:nowrap} html:root body .gc-woo-page table.cart .product-remove{width:52px;padding-right:0} html:root body .gc-woo-page table.cart a.remove{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--gc-mint);color:var(--gc-nacht);font:700 1.25rem/1 var(--gc-sans);text-decoration:none} html:root body .gc-woo-page table.cart a.remove:hover{background:#B3261E;color:#fff} html:root body .gc-woo-page table.cart td.actions{padding:16px;background:var(--gc-mint)} html:root body .gc-woo-page table.cart td.actions .coupon{float:none;display:flex;flex-wrap:wrap;gap:8px;margin:0 0 10px} html:root body .gc-woo-page table.cart td.actions .coupon .input-text{flex:1 1 180px;float:none;width:auto;min-width:0;margin:0;padding:0 16px;border-radius:999px} html:root body .gc-woo-page table.cart td.actions .button{float:none;min-height:48px;font-size:.9375rem} @media (min-width:769px){ html:root body .gc-woo-page table.cart td.actions{display:table-cell} html:root body .gc-woo-page table.cart td.actions>.button{float:right} html:root body .gc-woo-page table.cart td.actions .coupon{float:left;margin:0;max-width:440px} } /* Summen */ html:root body .gc-woo-page .cart-collaterals{float:none;width:100%} html:root body .gc-woo-page .cart-collaterals .cart_totals{float:none;width:100%;padding:clamp(18px,1rem + 1vw,28px);border-radius:var(--gc-r-l);background:#fff;box-shadow:var(--gc-sh-lg)} html:root body .gc-woo-page .woocommerce .cart-collaterals .cart_totals table.shop_table{margin:0 0 var(--gc-s2);padding:0;border-radius:0;box-shadow:none} /* Gegen Healfio: `.woocommerce-cart .cart-collaterals .cart_totals table th` (20px, Polster 1rem 2rem, gemischte Gewichte) */ html:root body .gc-woo-page .woocommerce .cart-collaterals .cart_totals table.shop_table :is(th,td){padding:12px 0;font:500 1rem/1.45 var(--gc-sans);letter-spacing:normal;color:var(--gc-ink)} html:root body .gc-woo-page .woocommerce .cart-collaterals .cart_totals table.shop_table th{font-weight:700} html:root body .gc-woo-page .cart_totals table.shop_table th{width:42%;padding-right:12px;vertical-align:top} html:root body .gc-woo-page .cart_totals table.shop_table td{text-align:right} html:root body .gc-woo-page .woocommerce :is(.cart-collaterals .cart_totals table.shop_table,.woocommerce-checkout-review-order-table) .order-total :is(th,td){font-size:1.125rem;font-weight:800} html:root body .gc-woo-page :is(.cart_totals,.woocommerce-checkout-review-order-table) .order-total .amount{font-weight:800;color:var(--gc-gruen)} html:root body .gc-woo-page .cart_totals ul#shipping_method{margin:0;padding:0;list-style:none;text-align:left} html:root body .gc-woo-page ul#shipping_method li{display:flex;align-items:flex-start;margin:0 0 6px;padding:0} html:root body .gc-woo-page ul#shipping_method label{margin:0;font-weight:500} html:root body .gc-woo-page .woocommerce-shipping-destination{margin:6px 0 0;font-size:.875rem;color:var(--gc-ink-2);text-align:left} html:root body .gc-woo-page .wc-proceed-to-checkout{margin:0;padding:0} /* Gegen Healfio: `a.checkout-button.button.alt{max-width:250px;float:right}` */ html:root body .gc-woo-page .wc-proceed-to-checkout a.checkout-button.button.alt{float:none;display:flex;width:100%;max-width:none;min-height:56px;margin:0;font-size:1.0625rem} /* Cross-Sells (klassische Woo-Karte; heute hat kein Produkt welche) */ html:root body .gc-woo-page .cross-sells{float:none;width:100%} html:root body .gc-woo-page .cross-sells ul.products{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gc-gap);margin:0;padding:0;list-style:none} html:root body .gc-woo-page .cross-sells ul.products::before, html:root body .gc-woo-page .cross-sells ul.products::after{content:none} html:root body .gc-woo-page .cross-sells ul.products li.product{position:relative;float:none;width:auto;margin:0;padding:8px 8px 14px;border-radius:var(--gc-r-m);background:#fff;box-shadow:var(--gc-sh);font-size:.9375rem} html:root body .gc-woo-page .cross-sells ul.products li.product img{margin:0 0 10px;border-radius:var(--gc-r-s);background:var(--gc-mint)} html:root body .gc-woo-page .cross-sells ul.products li.product .woocommerce-loop-product__title{margin:0;padding:0 4px;font:700 1rem/1.25 var(--gc-sans);color:var(--gc-ink)} html:root body .gc-woo-page .cross-sells ul.products li.product .price{display:block;margin:6px 0 0;padding:0 4px;font:800 1.125rem/1.2 var(--gc-sans);color:var(--gc-gruen)} html:root body .gc-woo-page .cross-sells ul.products li.product .button{width:100%;min-height:44px;margin-top:10px;font-size:.875rem} /* Leerer Warenkorb */ html:root body .gc-woo-page .return-to-shop{margin:0} /* ===================================================================== 6 · Kasse (Germanized Pro: mehrstufig – Persönliche Daten · Zahlungsart · Bestätigen) ===================================================================== */ /* Breite: Healfio hielt die Kasse mit `container-narrow` schmal; hier 960px, zentriert im 1440er-Rahmen */ html:root body.woocommerce-checkout .gc-woo-page .woocommerce{max-width:960px;margin-inline:auto} html:root body.woocommerce-checkout :is(.gc-woo-head)>.e-con-inner{max-width:960px} /* Schritt-Leiste */ html:root body .gc-woo-page ul.step-nav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin:0 0 var(--gc-s3);padding:0;border:0;list-style:none;counter-reset:gc-step} html:root body .gc-woo-page ul.step-nav::before, html:root body .gc-woo-page ul.step-nav::after, html:root body .gc-woo-page ul.step-nav li::before, html:root body .gc-woo-page ul.step-nav li::after, html:root body .gc-woo-page ul.step-nav li a::before, html:root body .gc-woo-page ul.step-nav li a::after{content:none;display:none} html:root body .gc-woo-page ul.step-nav li{float:none;width:auto;margin:0;padding:0;border:0;background:none;counter-increment:gc-step} html:root body .gc-woo-page ul.step-nav li a{position:static;display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:auto;min-height:48px;margin:0;padding:6px 10px;border:0;border-radius:999px;background:#fff;color:var(--gc-ink-2);font:700 .875rem/1.2 var(--gc-sans);letter-spacing:normal;text-align:center;text-decoration:none;box-shadow:inset 0 0 0 1.5px var(--gc-line)} html:root body .gc-woo-page ul.step-nav li a:not([href]){cursor:default} html:root body .gc-woo-page ul.step-nav li.active a{background:var(--gc-nacht);color:#fff;box-shadow:none} html:root body .gc-woo-page ul.step-nav li a .step-number{display:inline} /* Aufklapper „Bereits Kunde?“ / „Gutschein?“ */ html:root body .gc-woo-page :is(.woocommerce-form-login-toggle,.woocommerce-form-coupon-toggle) .woocommerce-info{margin-bottom:var(--gc-s1)} html:root body .gc-woo-page form:is(.woocommerce-form-login,.woocommerce-form-register,.checkout_coupon,.woocommerce-ResetPassword,.lost_reset_password,.woocommerce-EditAccountForm,.edit-account), html:root body .gc-woo-page .woocommerce-address-fields{margin:0 0 var(--gc-s3);padding:clamp(18px,1rem + 1.4vw,32px);border:0;border-radius:var(--gc-r-l);background:#fff;box-shadow:var(--gc-sh)} html:root body .gc-woo-page form.checkout_coupon{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px} html:root body .gc-woo-page form.checkout_coupon .form-row{flex:1 1 200px;width:auto;margin:0} html:root body .gc-woo-page form.checkout_coupon .form-row-last{flex:0 0 auto} html:root body .gc-woo-page form.checkout_coupon .clear{display:none} /* Formularblöcke der Kasse als Karten */ html:root body .gc-woo-page form.checkout{margin:0;padding:0;border:0;background:none;box-shadow:none} html:root body .gc-woo-page form.checkout .col2-set{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--gc-s3);float:none;width:100%;margin:0} html:root body .gc-woo-page form.checkout .col2-set::before, html:root body .gc-woo-page form.checkout .col2-set::after{content:none} html:root body .gc-woo-page form.checkout .col2-set :is(.col-1,.col-2){float:none;width:100%;max-width:none;margin:0;padding:0} html:root body .gc-woo-page form.checkout :is(.woocommerce-billing-fields,.woocommerce-shipping-fields,.woocommerce-additional-fields,.woocommerce-account-fields:not(:empty)), html:root body .gc-woo-page #fraspyContainer, html:root body .gc-woo-page #order_review :is(#payment,.woocommerce-gzd-checkout-order-review,.wc-gzd-order-review-wrapper){margin:0 0 var(--gc-s3);padding:clamp(18px,1rem + 1.4vw,32px);border:0;border-radius:var(--gc-r-l);background:#fff;box-shadow:var(--gc-sh)} html:root body .gc-woo-page form.checkout .woocommerce-account-fields:empty{display:none} html:root body .gc-woo-page form.checkout :is(.woocommerce-billing-fields__field-wrapper,.woocommerce-shipping-fields__field-wrapper){display:grid;grid-template-columns:minmax(0,1fr);gap:0 var(--gc-s2)} @media (min-width:721px){ html:root body .gc-woo-page form.checkout :is(.woocommerce-billing-fields__field-wrapper,.woocommerce-shipping-fields__field-wrapper){grid-template-columns:repeat(2,minmax(0,1fr))} html:root body .gc-woo-page form.checkout :is(.woocommerce-billing-fields__field-wrapper,.woocommerce-shipping-fields__field-wrapper)>.form-row:not(.form-row-first,.form-row-last){grid-column:1/-1} html:root body .gc-woo-page form:is(.woocommerce-form-login,.woocommerce-EditAccountForm,.edit-account) .form-row:is(.form-row-first,.form-row-last), html:root body .gc-woo-page .woocommerce-address-fields .form-row:is(.form-row-first,.form-row-last){display:inline-block;width:calc(50% - 8px);vertical-align:top} html:root body .gc-woo-page form:is(.woocommerce-form-login,.woocommerce-EditAccountForm,.edit-account) .form-row.form-row-first, html:root body .gc-woo-page .woocommerce-address-fields .form-row.form-row-first{margin-right:12px} } /* „Lieferung an eine andere Adresse senden?“ */ html:root body .gc-woo-page #ship-to-different-address{margin:0 0 var(--gc-s2);font-size:1.125rem} html:root body .gc-woo-page #ship-to-different-address label{display:flex;align-items:flex-start;margin:0;font:inherit;font-weight:800;cursor:pointer} /* Schritt-Buttons */ html:root body .gc-woo-page .step-buttons{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin:0 0 var(--gc-s3)} html:root body .gc-woo-page .step-buttons a.prev-step-button{float:none;display:inline-flex;align-items:center;min-height:48px;font-weight:700} html:root body .gc-woo-page .step-buttons .clear{display:none} html:root body .gc-woo-page .step-buttons .button{float:none} html:root body .gc-woo-page .step-buttons .next-step-button{margin-left:auto} /* Altersprüfung (woocommerce-fraspy) */ html:root body .gc-woo-page #fraspyContainer :is(input[type="text"],select){margin-bottom:10px} /* !important: das Plugin setzt die Breite der Datumsfelder als Inline-Stil (70px) – zu schmal für Text + Pfeil */ html:root body .gc-woo-page #fraspyContainer select{width:auto!important;min-width:104px;min-height:48px} /* Zahlungsarten. Gegen Woo: `#add_payment_method #payment`, `.woocommerce-checkout #payment` (ID-Selektoren) */ html:root body .gc-woo-page #order_review_heading{margin-top:0} html:root body .gc-woo-page #order_review #payment{border-radius:var(--gc-r-l);background:#fff} html:root body .gc-woo-page #order_review #payment ul.payment_methods{margin:0;padding:0;border:0;list-style:none} html:root body .gc-woo-page #order_review #payment ul.payment_methods li{margin:0 0 10px;padding:14px 16px;border-radius:var(--gc-r-s);background:var(--gc-mint);list-style:none} html:root body .gc-woo-page #order_review #payment ul.payment_methods li>label{display:inline;margin:0;font-weight:700} html:root body .gc-woo-page #order_review #payment div.payment_box{margin:10px 0 0;padding:12px 14px;border-radius:var(--gc-r-xs);background:#fff;color:var(--gc-ink);font-size:.9375rem} html:root body .gc-woo-page #order_review #payment div.payment_box::before{content:none} html:root body .gc-woo-page #order_review #payment div.payment_box p:last-child{margin-bottom:0} html:root body .gc-woo-page #order_review #payment div.form-row{margin:0;padding:0} /* Schritt 3: Zusammenfassung der Angaben (Germanized Pro) */ html:root body .gc-woo-page .woocommerce-gzdp-checkout-verify-data{margin:0 0 var(--gc-s3);padding:clamp(18px,1rem + 1.4vw,32px);border-radius:var(--gc-r-l);background:#fff;box-shadow:var(--gc-sh)} html:root body .gc-woo-page form.checkout .woocommerce-gzdp-checkout-verify-data .col2-set{gap:var(--gc-s2) var(--gc-s4)} html:root body .gc-woo-page .woocommerce-gzdp-checkout-verify-data header.title{margin:0} html:root body .gc-woo-page .woocommerce-gzdp-checkout-verify-data header.title h4{margin:0 0 4px} html:root body .gc-woo-page .woocommerce-gzdp-checkout-verify-data :is(address,p){margin:0 0 4px;font-size:.9375rem;line-height:1.5} html:root body .gc-woo-page .woocommerce-gzdp-checkout-verify-data p:has(a.edit){margin-bottom:var(--gc-s2)} html:root body .gc-woo-page .woocommerce-gzdp-checkout-verify-data a.edit{font-size:.875rem;font-weight:700} @media (min-width:721px){ html:root body .gc-woo-page form.checkout .woocommerce-gzdp-checkout-verify-data .col2-set{grid-template-columns:repeat(2,minmax(0,1fr))} } /* Bestellübersicht + Rechtstexte + Kauf-Button */ html:root body .gc-woo-page table.woocommerce-checkout-review-order-table{margin:0 0 var(--gc-s3);background:#fff} /* Germanized färbt `.woocommerce-checkout .shop_table` per Inline-CSS (#eee) */ /* Produktbild in der Übersicht (Germanized: `.wc-gzd-cart-item-thumbnail`) */ html:root body .gc-woo-page table.woocommerce-checkout-review-order-table .wc-gzd-cart-item-name-wrapper{display:flex;align-items:center;gap:12px} html:root body .gc-woo-page table.woocommerce-checkout-review-order-table .wc-gzd-cart-item-thumbnail{flex:none;width:64px;margin:0} html:root body .gc-woo-page table.woocommerce-checkout-review-order-table .wc-gzd-cart-item-thumbnail img{display:block;width:64px;height:64px;max-width:none;object-fit:contain;border-radius:var(--gc-r-xs);background:var(--gc-mint)} html:root body .gc-woo-page table.woocommerce-checkout-review-order-table :is(td.product-total,tfoot td){text-align:right} html:root body .gc-woo-page .wc-gzd-checkbox-placeholder, html:root body .gc-woo-page .woocommerce-terms-and-conditions-wrapper{margin:0 0 var(--gc-s2)} html:root body .gc-woo-page :is(.wc-gzd-checkbox-placeholder,.woocommerce-terms-and-conditions-wrapper,.woocommerce-privacy-policy-text) :is(p,label){font-size:.9375rem;line-height:1.5} html:root body .gc-woo-page :is(.wc-gzd-order-submit,.place-order){margin:0;padding:0} html:root body .gc-woo-page #order_review #place_order{float:none;display:flex;width:100%;min-height:60px;margin:var(--gc-s2) 0 0;font-size:1.125rem} /* ===================================================================== 7 · Konto ===================================================================== */ html:root body.woocommerce-account .gc-woo-page .woocommerce{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--gc-s3)} html:root body.woocommerce-account .gc-woo-page .woocommerce>*{min-width:0} html:root body.woocommerce-account .gc-woo-page .woocommerce>.woocommerce-notices-wrapper:empty{display:none} /* Gegen Healfio: Navigation als weiße Karte mit 30 % Breite, Polster 3rem, Strich vor jedem Link */ html:root body .gc-woo-page .woocommerce nav.woocommerce-MyAccount-navigation{float:none;width:100%;max-width:none;margin:0;padding:0;border-radius:0;background:none;box-shadow:none} html:root body .gc-woo-page .woocommerce-MyAccount-navigation li a::before{content:none} html:root body .gc-woo-page .woocommerce-MyAccount-navigation ul{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none} html:root body .gc-woo-page .woocommerce nav.woocommerce-MyAccount-navigation li{margin:0;padding:0;border:0;list-style:none} html:root body .gc-woo-page .woocommerce-MyAccount-navigation li a{display:flex;align-items:center;min-height:46px;padding:0 16px;border-radius:999px;background:#fff;color:var(--gc-ink);font:700 .9375rem/1.2 var(--gc-sans);text-decoration:none;box-shadow:inset 0 0 0 1.5px var(--gc-line)} html:root body .gc-woo-page .woocommerce-MyAccount-navigation li a:hover{background:var(--gc-salbei);color:var(--gc-nacht)} html:root body .gc-woo-page .woocommerce-MyAccount-navigation li.is-active a{background:var(--gc-nacht);color:#fff;box-shadow:none} html:root body .gc-woo-page .woocommerce .woocommerce-MyAccount-content{float:none;width:100%;max-width:none;margin:0;padding:0;border-radius:0;background:none;box-shadow:none} html:root body .gc-woo-page .woocommerce-MyAccount-content>:is(p,address){max-width:70ch} @media (min-width:1024px){ html:root body.woocommerce-account.logged-in .gc-woo-page .woocommerce{grid-template-columns:240px minmax(0,1fr);gap:var(--gc-s4);align-items:start} html:root body.woocommerce-account.logged-in .gc-woo-page .woocommerce>:not(.woocommerce-MyAccount-navigation,.woocommerce-MyAccount-content){grid-column:1/-1} html:root body .gc-woo-page .woocommerce-MyAccount-navigation ul{flex-direction:column;flex-wrap:nowrap;gap:6px} html:root body .gc-woo-page .woocommerce-MyAccount-navigation li a{border-radius:var(--gc-r-s)} } /* Login / Registrierung: zwei Karten */ html:root body .gc-woo-page #customer_login.col2-set{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--gc-s3);float:none;width:100%} html:root body .gc-woo-page #customer_login.col2-set::before, html:root body .gc-woo-page #customer_login.col2-set::after{content:none} html:root body .gc-woo-page #customer_login.col2-set :is(.col-1,.col-2){float:none;width:100%;max-width:none;margin:0;padding:0} html:root body .gc-woo-page #customer_login form{margin-bottom:0} @media (min-width:1024px){ html:root body .gc-woo-page #customer_login.col2-set{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gc-s4);align-items:start} } /* Login ohne Registrierung bzw. Passwort vergessen: schmale Karte */ html:root body .gc-woo-page .woocommerce>form:is(.woocommerce-form-login,.woocommerce-ResetPassword,.lost_reset_password){max-width:560px} html:root body .gc-woo-page .woocommerce-form-login .woocommerce-form-login__rememberme{margin:0 0 12px} html:root body .gc-woo-page .lost_password{margin:12px 0 0;font-size:.9375rem} /* Adressen */ html:root body .gc-woo-page .woocommerce-Addresses.col2-set{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--gc-s3);float:none;width:100%} html:root body .gc-woo-page .woocommerce-Addresses.col2-set::before, html:root body .gc-woo-page .woocommerce-Addresses.col2-set::after{content:none} html:root body .gc-woo-page .woocommerce-Addresses .woocommerce-Address{float:none;width:100%;margin:0;padding:clamp(18px,1rem + 1vw,28px);border-radius:var(--gc-r-l);background:#fff;box-shadow:var(--gc-sh)} html:root body .gc-woo-page .woocommerce-Address-title{display:flex;flex-direction:column;align-items:flex-start;gap:6px;margin:0 0 10px} html:root body .gc-woo-page .woocommerce-Address-title::before, html:root body .gc-woo-page .woocommerce-Address-title::after{content:none} html:root body .gc-woo-page .woocommerce-Address-title :is(h2,h3){float:none;margin:0;text-align:left} html:root body .gc-woo-page .woocommerce-Address-title .edit{float:none;font-size:.9375rem;font-weight:700} html:root body .gc-woo-page address{margin:0;font-style:normal;line-height:1.6} @media (min-width:721px){ html:root body .gc-woo-page .woocommerce-Addresses.col2-set{grid-template-columns:repeat(2,minmax(0,1fr))} } html:root body .gc-woo-page fieldset{margin:var(--gc-s3) 0 0;padding:0;border:0} /* ===================================================================== 8 · Bestellung: Danke-Seite, Bestellansicht, Sendungsverfolgung ===================================================================== */ html:root body .gc-woo-page .woocommerce-order>.woocommerce-notice, html:root body .gc-woo-page .woocommerce-thankyou-order-received{margin:0 0 var(--gc-s3);padding:18px 22px;border-radius:var(--gc-r-m);background:var(--gc-nacht);color:#fff;font:700 1.125rem/1.4 var(--gc-sans)} html:root body .gc-woo-page ul.woocommerce-order-overview{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:10px;margin:0 0 var(--gc-s3);padding:0;list-style:none} html:root body .gc-woo-page ul.woocommerce-order-overview::before, html:root body .gc-woo-page ul.woocommerce-order-overview::after{content:none} html:root body .gc-woo-page ul.woocommerce-order-overview li{float:none;margin:0;padding:14px 16px;border:0;border-radius:var(--gc-r-s);background:#fff;font-size:.8125rem;line-height:1.3;letter-spacing:.04em;text-transform:uppercase;color:var(--gc-ink-2);box-shadow:var(--gc-sh)} html:root body .gc-woo-page ul.woocommerce-order-overview li strong{display:block;margin-top:4px;font-size:1rem;letter-spacing:normal;text-transform:none;color:var(--gc-ink);overflow-wrap:anywhere} html:root body .gc-woo-page :is(.woocommerce-order-details,.woocommerce-customer-details,.woocommerce-bacs-bank-details,.woocommerce-order-downloads){margin:0 0 var(--gc-s3)} html:root body .gc-woo-page ul.wc-bacs-bank-details{display:grid;gap:6px;margin:0 0 var(--gc-s2);padding:16px 18px;border-radius:var(--gc-r-m);background:#fff;list-style:none;box-shadow:var(--gc-sh)} html:root body .gc-woo-page ul.wc-bacs-bank-details li{float:none;margin:0;padding:0;border:0} html:root body .gc-woo-page .woocommerce-customer-details .col2-set{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--gc-s3);float:none;width:100%} html:root body .gc-woo-page .woocommerce-customer-details .col2-set::before, html:root body .gc-woo-page .woocommerce-customer-details .col2-set::after{content:none} html:root body .gc-woo-page .woocommerce-customer-details .col2-set :is(.col-1,.col-2){float:none;width:100%;max-width:none} html:root body .gc-woo-page .woocommerce-customer-details address{padding:16px 18px;border:0;border-radius:var(--gc-r-m);background:#fff;box-shadow:var(--gc-sh)} @media (min-width:721px){ html:root body .gc-woo-page .woocommerce-customer-details .col2-set{grid-template-columns:repeat(2,minmax(0,1fr))} } html:root body .gc-woo-page mark{background:none;color:inherit;font-weight:700}