/* =========================================================================
GERLACH WATCHES – WooCommerce im Shopify-Stil
Viel Weißraum, weiche Karten, EIN Akzent (Gold), klare Hierarchie,
Drawer/Sticky statt Reload, dezente Animation.
Alles unter .woocommerce* / konkreten Containern gescopet – nichts leckt
site-weit. Farben/Abstände NUR über Tokens (var(--gw-…)).
========================================================================= */
/* =========================================================================
1. BUTTONS – alle Woo-Buttons auf Token-Stil
========================================================================= */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce #place_order,
.woocommerce button.button.alt,
.woocommerce a.button.alt {
display: inline-flex; align-items: center; justify-content: center;
min-height: var(--gw-tap);
padding: 0.7em 1.6em;
/* !important über alle Zustände: verhindert das Durchblitzen der
WooCommerce-Default-Lila (#a46497) bei Klick/Focus/Loading. */
background: var(--gw-gold) !important;
color: #fff !important;
border: 1px solid transparent;
border-radius: var(--gw-radius);
font-family: var(--gw-font);
font-weight: var(--gw-weight-semibold);
font-size: var(--gw-fs-400);
line-height: 1.1;
text-transform: none;
cursor: pointer;
transition: background var(--gw-transition), box-shadow var(--gw-transition), transform var(--gw-transition);
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce #place_order:hover,
.woocommerce button.button.alt:hover,
.woocommerce a.button.alt:hover,
.woocommerce a.button:focus,
.woocommerce button.button:focus,
.woocommerce input.button:focus,
.woocommerce #place_order:focus,
.woocommerce a.button.loading,
.woocommerce button.button.loading {
background: var(--gw-gold-dark) !important; color: #fff !important;
transform: translateY(-1px); box-shadow: var(--gw-shadow-lg);
outline: none;
}
.woocommerce a.button:active,
.woocommerce button.button:active,
.woocommerce input.button:active,
.woocommerce #place_order:active { background: var(--gw-gold-deep) !important; transform: translateY(0); box-shadow: var(--gw-shadow); }
/* Deaktivierte Buttons: echter Disabled-Look statt blassem Geister-Gold. */
.woocommerce a.button.disabled,
.woocommerce button.button:disabled,
.woocommerce button.button[disabled],
.woocommerce button.button:disabled[disabled],
.woocommerce input.button:disabled,
.woocommerce input.button[disabled],
.woocommerce .single_add_to_cart_button.disabled {
background: var(--gw-bg-soft) !important;
color: var(--gw-muted) !important;
border: 1px solid var(--gw-border) !important;
box-shadow: none !important; transform: none !important;
cursor: not-allowed; opacity: 1;
}
/* Sekundär-Buttons („Zurück zum Shop" etc.): Outline, invertierter Hover */
.woocommerce .button.wc-backward,
.woocommerce a.button.wc-forward.button--secondary {
background: var(--gw-bg) !important; color: var(--gw-ink) !important;
border-color: var(--gw-border);
}
.woocommerce .button.wc-backward:hover,
.woocommerce a.button.wc-forward.button--secondary:hover {
background: var(--gw-gold-soft) !important; color: var(--gw-gold-dark) !important;
border-color: var(--gw-gold); box-shadow: var(--gw-shadow);
}
/* =========================================================================
2. NOTICES – dünner 1px-Rahmen rundum (kein dicker Akzent-Balken)
========================================================================= */
.woocommerce-message, .woocommerce-info, .woocommerce-error {
border: 1px solid var(--gw-gold);
border-radius: var(--gw-radius);
background: var(--gw-gold-soft);
padding: var(--gw-space-3) var(--gw-space-4);
list-style: none;
color: var(--gw-ink);
}
.woocommerce-error { border-color: var(--gw-danger); background: var(--gw-danger-soft); }
/* WC-Default-Icon-Glyphen entfernen (Icon-Font wird nicht geladen
→ würde sonst als Tofu-Box erscheinen). */
.woocommerce-message::before, .woocommerce-message::after,
.woocommerce-info::before, .woocommerce-info::after,
.woocommerce-error::before, .woocommerce-error::after { content: none !important; display: none !important; }
.woocommerce-info a, .woocommerce-error a {
color: var(--gw-gold-dark) !important; font-weight: var(--gw-weight-medium); text-decoration: none;
}
.woocommerce-info a:hover, .woocommerce-error a:hover { color: var(--gw-gold) !important; text-decoration: underline; }
/* Erfolgsmeldung („… in den Warenkorb") als Toast unten rechts.
Info-/Fehlermeldungen bleiben inline am Formular. */
body.gw .woocommerce-message {
/* Toast im Designsystem: dunkle Premium-Karte mit Gold-Linie, unten
rechts über dem Kontakt-Widget. body.gw-Scope: höhere Spezifität als
das WC-Core-CSS (lädt teils NACH dem Theme und brachte die grüne
Standard-Linie zurück). */
position: fixed; bottom: 104px; right: 24px; z-index: 320;
border-top: none;
margin: 0; width: max-content; max-width: min(420px, calc(100vw - 32px));
display: flex; align-items: center; gap: var(--gw-space-3);
background: var(--gw-ink); color: #fff;
border: none;
border-left: 3px solid var(--gw-gold);
border-radius: var(--gw-radius-lg); box-shadow: var(--gw-shadow-lg);
padding: var(--gw-space-4) var(--gw-space-5);
font-size: var(--gw-fs-400); line-height: 1.45;
animation: gw-toast-in 0.3s ease;
transition: opacity 0.3s ease, transform 0.3s ease;
}
body.gw .woocommerce-message a:not(.button) { color: var(--gw-gold-light); }
body.gw .woocommerce-message .button {
margin-left: var(--gw-space-3); flex: 0 0 auto;
min-height: 40px; padding: 0.5em 1.1em; white-space: nowrap;
}
body.gw .woocommerce-message.is-leaving { opacity: 0; transform: translateY(20px); }
@keyframes gw-toast-in { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
@media (max-width: 560px) {
body.gw .woocommerce-message { left: 16px; right: 16px; bottom: 88px; width: auto; max-width: none; }
}
/* Doppel-Titel vermeiden: bauen Elementor-Seiten (Warenkorb/Kasse) ein
eigenes H1 ein, übernimmt der konsistente Theme-Banner den Titel. */
.woocommerce-cart h1.elementor-heading-title,
.woocommerce-checkout h1.elementor-heading-title { display: none; }
/* =========================================================================
3. FORMULARFELDER – Border/Radius/Focus-Glow (inkl. Select2)
========================================================================= */
.woocommerce form .form-row label,
.woocommerce-checkout label,
.woocommerce-cart label { font-weight: var(--gw-weight-medium); color: var(--gw-ink); }
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce #order_comments,
.woocommerce .quantity input.qty,
.woocommerce table.cart input.qty,
.select2-container--default .select2-selection--single {
min-height: var(--gw-tap);
padding: 0.4em var(--gw-space-3);
border: 1px solid var(--gw-border);
border-radius: var(--gw-radius);
font-family: var(--gw-font);
font-size: var(--gw-fs-400);
background: var(--gw-bg);
color: var(--gw-ink);
box-sizing: border-box;
}
.select2-container--default .select2-selection--single { display: flex; align-items: center; }
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
border-color: var(--gw-gold);
box-shadow: 0 0 0 3px var(--gw-gold-soft);
outline: none;
}
/* Pflichtfeld-Sterne: ALLE auf einen Danger-Token (Plugins mischen sonst
Rottöne: #aa0000 bei span.required, #cf2e2e bei abbr.required). */
.woocommerce .required,
.woocommerce abbr.required {
color: var(--gw-danger) !important;
border-bottom: none;
text-decoration: none;
}
/* =========================================================================
4. ARCHIV-KOPF – Breadcrumb, Ergebniszahl, Sortierung, Pagination
========================================================================= */
.woocommerce .woocommerce-breadcrumb { color: var(--gw-muted); font-size: var(--gw-fs-300); margin-bottom: var(--gw-space-3); }
.woocommerce .woocommerce-breadcrumb a { color: var(--gw-muted); }
.woocommerce .woocommerce-breadcrumb a:hover { color: var(--gw-gold-dark); }
.woocommerce .woocommerce-result-count { color: var(--gw-muted); margin: 0 0 var(--gw-space-4); }
.woocommerce .woocommerce-ordering { margin-bottom: var(--gw-space-5); }
.woocommerce .woocommerce-ordering select {
min-height: var(--gw-tap);
padding: 0 2.4em 0 var(--gw-space-3);
border: 1px solid var(--gw-border);
border-radius: var(--gw-radius);
background: var(--gw-bg);
font-family: var(--gw-font); font-size: var(--gw-fs-400); color: var(--gw-ink);
cursor: pointer;
}
.woocommerce nav.woocommerce-pagination ul {
display: flex; flex-wrap: wrap; gap: var(--gw-space-2);
justify-content: center; margin: var(--gw-space-6) 0 0; padding: 0;
border: none;
list-style: none; /* sonst Listen-Punkte zwischen den Seitenzahlen */
}
.woocommerce nav.woocommerce-pagination ul li { border: none; list-style: none; }
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
display: inline-flex; align-items: center; justify-content: center;
min-width: var(--gw-tap); min-height: var(--gw-tap); padding: 0 var(--gw-space-3);
border: 1px solid var(--gw-border); border-radius: var(--gw-radius);
color: var(--gw-ink); text-decoration: none; line-height: 1;
transition: background var(--gw-transition), color var(--gw-transition), border-color var(--gw-transition);
}
.woocommerce nav.woocommerce-pagination ul li span.current,
.woocommerce nav.woocommerce-pagination ul li a:hover {
background: var(--gw-gold); color: #fff; border-color: var(--gw-gold);
}
/* Filter-/Tag-Pillen (z. B. aktive Filter, Tag-Wolke) */
.woocommerce .widget_layered_nav ul li a,
.woocommerce .tagcloud a {
display: inline-flex; align-items: center;
min-height: 36px; padding: 0 var(--gw-space-4);
background: var(--gw-bg); color: var(--gw-ink);
border: 1px solid var(--gw-border); border-radius: var(--gw-radius-pill);
font-size: var(--gw-fs-300) !important; font-weight: var(--gw-weight-medium);
text-decoration: none;
transition: background var(--gw-transition), border-color var(--gw-transition), color var(--gw-transition);
}
.woocommerce .widget_layered_nav ul li a:hover,
.woocommerce .tagcloud a:hover { background: var(--gw-gold-soft); border-color: var(--gw-gold); color: var(--gw-gold-dark); }
.woocommerce .widget_layered_nav ul li.chosen a { background: var(--gw-gold); color: #fff; border-color: var(--gw-gold); }
/* =========================================================================
5. PRODUKT-LOOP – weiche Karten (gw-card), gleiche Höhen, Preis-Akzent
Markup aus woocommerce/content-product.php (Stretched-Link-Pattern).
========================================================================= */
.woocommerce ul.products,
ul.products {
display: grid !important; gap: var(--gw-space-5);
margin: 0 0 var(--gw-space-6); padding: 0;
list-style: none; align-items: stretch; /* gleiche Höhe pro Reihe */
}
ul.products::before, ul.products::after { content: none !important; } /* WC-Clearfix aus */
ul.products.columns-2 { grid-template-columns: repeat(2, 1fr); }
ul.products.columns-3 { grid-template-columns: repeat(3, 1fr); }
ul.products.columns-4 { grid-template-columns: repeat(4, 1fr); }
/* WooCommerce setzt li.product auf width + float – im Grid zurücksetzen. */
.woocommerce ul.products li.product,
ul.products li.product {
width: auto !important; margin: 0 !important; padding: 0;
float: none !important; clear: none !important;
}
/* Karte */
li.product.gw-card {
position: relative;
display: flex; flex-direction: column;
height: 100%;
background: var(--gw-bg);
border: 1px solid var(--gw-border);
border-radius: var(--gw-radius-lg);
overflow: hidden;
box-shadow: var(--gw-shadow);
transition: box-shadow var(--gw-transition), transform var(--gw-transition);
}
li.product.gw-card:hover { box-shadow: var(--gw-shadow-lg); transform: translateY(-2px); }
/* Stretched Link: liegt über der ganzen Karte, Button darunter rein visuell */
.gw-card__link { position: absolute; inset: 0; z-index: 2; text-indent: -9999px; overflow: hidden; }
/* Feste Bildfläche → alle Medien gleich hoch, Bild zentriert */
.gw-card__media {
position: relative;
height: 260px; flex: 0 0 auto;
display: flex; align-items: center; justify-content: center;
padding: var(--gw-space-5);
}
.gw-card__media img {
max-height: 220px; max-width: 100%; width: auto;
object-fit: contain; margin: 0 !important;
}
/* Body wächst, damit der Button immer unten sitzt */
.gw-card__body {
display: flex; flex-direction: column; gap: var(--gw-space-3);
padding: 0 var(--gw-space-5) var(--gw-space-5);
flex: 1 1 auto;
}
.gw-card__brand {
font-size: var(--gw-fs-300);
font-weight: var(--gw-weight-semibold);
letter-spacing: 0.1em; text-transform: uppercase;
color: var(--gw-gold);
}
.gw-card__title {
font-size: var(--gw-fs-500) !important; line-height: 1.35 !important;
font-weight: var(--gw-weight-semibold); margin: 0; color: var(--gw-ink);
display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical;
overflow: hidden; min-height: 2.7em; /* 2 Zeilen reservieren → Preise/Buttons fluchten */
overflow-wrap: break-word; hyphens: manual;
}
.gw-card__price { color: var(--gw-gold); font-size: var(--gw-fs-500); font-weight: var(--gw-weight-bold); }
.gw-card__price .amount { color: var(--gw-gold); }
.gw-card__price del { color: var(--gw-muted); font-weight: var(--gw-weight-normal); opacity: 1; }
.gw-card__price del .amount { color: var(--gw-muted); }
.gw-card__price ins { text-decoration: none; }
.gw-card__action { margin-top: auto; position: relative; z-index: 1; }
/* Button reagiert beim Hover über die ganze Karte mit */
li.product.gw-card:hover .gw-btn--primary { background: var(--gw-gold-dark) !important; }
/* Sale-Badge als dezente Token-Pille (in der Karten-Bildfläche absolut).
WC-Core setzt im Loop top:0/right:0 mit NEGATIVEM Margin (ragt aus der
abgerundeten Karte und wird abgeschnitten) – mit gleicher Spezifität
überschreiben. */
.woocommerce span.onsale,
.woocommerce ul.products li.product .onsale,
.woocommerce ul.products li.product span.onsale,
.gw-card__media .onsale {
position: absolute;
background: var(--gw-gold); color: #fff;
border-radius: var(--gw-radius-pill); padding: 0.3em 0.75em;
font-size: var(--gw-fs-300); font-weight: var(--gw-weight-semibold); line-height: 1.3;
min-height: 0; min-width: 0;
top: var(--gw-space-3); left: var(--gw-space-3); right: auto; bottom: auto;
margin: 0;
z-index: 2;
}
/* Lagerstatus */
.woocommerce .stock { font-weight: var(--gw-weight-medium); font-size: var(--gw-fs-300); }
.woocommerce .stock.in-stock { color: var(--gw-success); }
.woocommerce .stock.out-of-stock { color: var(--gw-danger); }
.woocommerce .stock.available-on-backorder { color: var(--gw-warning); }
/* --- Filter-Chips (Kategorien über dem Loop) ------------------------------ */
.gw-chips {
display: flex; flex-wrap: wrap; gap: var(--gw-space-2);
margin: 0 0 var(--gw-space-5);
}
.gw-chip {
display: inline-flex; align-items: center; white-space: nowrap;
min-height: 40px; padding: 0 var(--gw-space-4);
background: var(--gw-bg); color: var(--gw-ink) !important;
border: 1px solid var(--gw-border); border-radius: var(--gw-radius-pill);
font-size: var(--gw-fs-300); font-weight: var(--gw-weight-medium); text-decoration: none;
transition: background var(--gw-transition), border-color var(--gw-transition), color var(--gw-transition);
}
.gw-chip:hover { background: var(--gw-gold-soft); border-color: var(--gw-gold); color: var(--gw-gold-dark) !important; }
.gw-chip.is-active { background: var(--gw-gold); color: #fff !important; border-color: var(--gw-gold); }
.gw-chip.is-active:hover { background: var(--gw-gold-dark); border-color: var(--gw-gold-dark); }
.gw-chip:focus-visible { outline: 2px solid var(--gw-gold); outline-offset: 2px; }
/* Mobil: eine horizontal scrollbare Reihe statt mehrzeiligem Umbruch */
@media (max-width: 600px) {
.gw-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: var(--gw-space-2); }
.gw-chips::-webkit-scrollbar { display: none; }
.gw-chip { flex: 0 0 auto; }
}
/* =========================================================================
6. PRODUKT-EINZELSEITE – zweispaltiges Grid (Galerie | Summary),
Hersteller-Eyebrow, Gold-Preis, Tabs als Unterstrich-Nav, Datenblatt.
========================================================================= */
/* Eigenes Template (content-single-product.php): echte Spalten-Container */
.woocommerce div.product.gw-product {
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
gap: var(--gw-space-6) var(--gw-space-7);
align-items: start;
position: relative;
}
.gw-product__gallery { grid-column: 1; min-width: 0; }
.gw-product__summary { grid-column: 2; min-width: 0; }
.gw-product__full { grid-column: 1 / -1; min-width: 0; }
/* WC-Float-Layout neutralisieren */
.woocommerce div.product div.images,
.woocommerce div.product .woocommerce-product-gallery,
.woocommerce div.product div.summary,
.woocommerce div.product .entry-summary {
width: 100% !important; float: none !important; margin: 0;
}
@media (max-width: 1024px) {
.woocommerce div.product.gw-product { grid-template-columns: 1fr; }
.gw-product__gallery, .gw-product__summary { grid-column: 1; }
}
/* Galerie */
.woocommerce div.product .woocommerce-product-gallery .flex-viewport,
.woocommerce div.product .woocommerce-product-gallery__wrapper {
border: 1px solid var(--gw-border);
border-radius: var(--gw-radius-lg);
overflow: hidden;
background: var(--gw-bg);
}
/* Ist FlexSlider aktiv, trägt .flex-viewport den Rahmen → innerer Wrapper ohne. */
.woocommerce div.product .flex-viewport .woocommerce-product-gallery__wrapper { border: 0; border-radius: 0; }
.woocommerce div.product .woocommerce-product-gallery__image img { width: 100%; height: auto; }
.woocommerce div.product .flex-control-thumbs {
display: flex; gap: var(--gw-space-2); list-style: none;
padding: var(--gw-space-3) 0 0; margin: 0;
}
.woocommerce div.product .flex-control-thumbs li { width: 72px; float: none; }
.woocommerce div.product .flex-control-thumbs img {
border: 1px solid var(--gw-border); border-radius: var(--gw-radius);
padding: 3px; cursor: pointer; opacity: 0.7; transition: opacity var(--gw-transition), border-color var(--gw-transition);
}
.woocommerce div.product .flex-control-thumbs img.flex-active,
.woocommerce div.product .flex-control-thumbs img:hover { opacity: 1; border-color: var(--gw-gold); }
.woocommerce div.product .woocommerce-product-gallery__trigger {
top: var(--gw-space-4); right: var(--gw-space-4); z-index: 5;
width: 40px; height: 40px;
background: var(--gw-bg); border: 1px solid var(--gw-border); border-radius: 50%;
box-shadow: var(--gw-shadow);
}
/* Summary: ruhig gestapelt, ohne WC-Riesenabstände */
.woocommerce div.product .entry-summary,
.woocommerce div.product div.summary {
display: flex; flex-direction: column; gap: var(--gw-space-4);
}
.woocommerce div.product .entry-summary > * { margin: 0; }
.gw-eyebrow {
margin: 0;
font-size: var(--gw-fs-300); font-weight: var(--gw-weight-semibold);
letter-spacing: 0.12em; text-transform: uppercase;
color: var(--gw-gold);
}
.woocommerce div.product .product_title {
color: var(--gw-ink); font-weight: var(--gw-weight-bold);
font-size: var(--gw-fs-700); line-height: 1.25;
}
.woocommerce div.product p.price,
.woocommerce div.product span.price {
color: var(--gw-gold);
font-size: var(--gw-fs-700);
font-weight: var(--gw-weight-bold);
}
.woocommerce div.product p.price del { color: var(--gw-muted); opacity: 1; font-size: var(--gw-fs-500); }
.woocommerce div.product p.price ins { text-decoration: none; }
.woocommerce div.product .woocommerce-product-details__short-description {
color: var(--gw-muted); font-size: var(--gw-fs-400); line-height: var(--gw-lh);
}
.woocommerce div.product form.cart {
display: flex; flex-direction: column; align-items: stretch;
gap: var(--gw-space-3); margin: var(--gw-space-2) 0 0;
}
.woocommerce div.product form.cart .quantity { align-self: flex-start; }
.woocommerce div.product form.cart .single_add_to_cart_button {
padding: 0.95em 2em; font-size: var(--gw-fs-400); align-self: flex-start; min-width: 240px;
}
/* Felder von Plugins (z. B. Flexible Product Fields: Armbandlänge/Gravur) */
.woocommerce div.product form.cart select,
.woocommerce div.product form.cart input[type="text"] {
width: 100%; max-width: 480px; min-height: var(--gw-tap);
padding: 0.4em var(--gw-space-3);
border: 1px solid var(--gw-border); border-radius: var(--gw-radius);
font-family: var(--gw-font); font-size: var(--gw-fs-400); background: var(--gw-bg);
}
.woocommerce div.product form.cart select:focus,
.woocommerce div.product form.cart input[type="text"]:focus {
border-color: var(--gw-gold); box-shadow: 0 0 0 3px var(--gw-gold-soft); outline: none;
}
.woocommerce div.product .product_meta { color: var(--gw-muted); font-size: var(--gw-fs-300); }
.woocommerce div.product .product_meta a { color: var(--gw-gold-dark); }
/* Variations-Selects */
.woocommerce div.product table.variations select {
min-height: var(--gw-tap); border: 1px solid var(--gw-border); border-radius: var(--gw-radius);
background: var(--gw-bg); font-family: var(--gw-font);
}
.woocommerce div.product .reset_variations { color: var(--gw-gold-dark); }
.woocommerce div.product .single_variation .price { color: var(--gw-gold); font-weight: var(--gw-weight-bold); }
/* Tabs als ruhige Unterstrich-Navigation statt 3D-Reiter */
.woocommerce div.product .woocommerce-tabs ul.tabs {
display: flex; gap: var(--gw-space-5);
margin: 0 0 var(--gw-space-5); padding: 0 !important;
border-bottom: 1px solid var(--gw-border);
background: none;
}
.woocommerce div.product .woocommerce-tabs ul.tabs::before,
.woocommerce div.product .woocommerce-tabs ul.tabs::after { content: none !important; border: none !important; }
.woocommerce div.product .woocommerce-tabs ul.tabs li {
background: none; border: none; border-radius: 0; margin: 0; padding: 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after { content: none !important; box-shadow: none !important; }
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
display: inline-flex; align-items: center;
min-height: var(--gw-tap); padding: 0 var(--gw-space-1);
color: var(--gw-muted); font-weight: var(--gw-weight-medium);
border-bottom: 2px solid transparent; margin-bottom: -1px;
transition: color var(--gw-transition), border-color var(--gw-transition);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover { color: var(--gw-ink); }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
color: var(--gw-ink); border-bottom-color: var(--gw-gold);
}
.woocommerce div.product .woocommerce-tabs .panel h2:first-of-type { font-size: var(--gw-fs-600); }
/* Datenblatt (Produkt-Taxonomien, gerendert in inc/woocommerce.php) */
.gw-specs {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: var(--gw-space-5) var(--gw-space-7);
background: var(--gw-bg-soft);
border: 1px solid var(--gw-border);
border-radius: var(--gw-radius-lg);
padding: var(--gw-space-6) var(--gw-space-7);
margin: var(--gw-space-7) 0 0;
clear: both;
}
.gw-specs__group h3 {
margin: 0 0 var(--gw-space-3);
font-size: var(--gw-fs-500); font-weight: var(--gw-weight-bold); color: var(--gw-ink);
}
.gw-specs__group dl { margin: 0; }
.gw-specs__row {
display: grid; grid-template-columns: minmax(140px, 45%) 1fr;
gap: var(--gw-space-4);
padding: var(--gw-space-1) 0;
}
.gw-specs__row dt { font-weight: var(--gw-weight-semibold); color: var(--gw-ink); margin: 0; }
.gw-specs__row dd { margin: 0; color: var(--gw-ink-2); overflow-wrap: break-word; }
@media (max-width: 600px) {
.gw-specs { padding: var(--gw-space-5); grid-template-columns: 1fr; }
}
/* „Ähnliche Produkte"/Upsells: Abschnitts-Titel + Karten wie im Loop */
.woocommerce .related > h2,
.woocommerce .upsells > h2,
.woocommerce .cross-sells > h2 {
font-size: var(--gw-fs-700); text-align: center;
margin: var(--gw-space-7) 0 var(--gw-space-5);
color: var(--gw-ink);
}
/* Bewertungs-Sterne in Markenfarbe */
.woocommerce .star-rating, .woocommerce p.stars a { color: var(--gw-gold); }
.woocommerce .star-rating span::before, .woocommerce .star-rating::before { color: var(--gw-gold); }
.woocommerce #review_form .comment-form-rating p.stars a:hover { color: var(--gw-gold-dark); }
.woocommerce #reviews .comment_container {
border: 1px solid var(--gw-border); border-radius: var(--gw-radius-lg);
padding: var(--gw-space-4); background: var(--gw-bg-soft);
display: flex; gap: var(--gw-space-4);
}
.woocommerce #reviews .comment-text { min-width: 0; border: none !important; }
.woocommerce #reviews .meta { color: var(--gw-muted); font-size: var(--gw-fs-300); }
/* =========================================================================
7. MENGEN-STEPPER (−/+) – Pill um input.qty, JS baut die Buttons
========================================================================= */
.quantity.gw-stepper-ready {
display: inline-flex; align-items: center;
border: 1px solid var(--gw-border); border-radius: var(--gw-radius);
background: var(--gw-bg); overflow: hidden; height: 46px;
}
.quantity.gw-stepper-ready input.qty {
width: 46px !important; min-width: 46px; height: 44px !important; min-height: 44px !important;
border: none !important; border-radius: 0 !important; background: transparent !important;
text-align: center; padding: 0 !important; box-shadow: none !important;
font-size: var(--gw-fs-400); font-weight: var(--gw-weight-semibold); color: var(--gw-ink);
-moz-appearance: textfield; appearance: textfield;
}
.quantity.gw-stepper-ready input.qty::-webkit-outer-spin-button,
.quantity.gw-stepper-ready input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.gw-qty-btn {
width: 42px; height: 44px; flex: 0 0 auto;
display: inline-flex; align-items: center; justify-content: center;
border: none; background: transparent; color: var(--gw-ink);
font-size: 1.25rem; line-height: 1; cursor: pointer;
transition: background var(--gw-transition), color var(--gw-transition);
}
.gw-qty-btn:hover { background: var(--gw-gold-soft); color: var(--gw-gold-dark); }
.gw-qty-btn:active { background: var(--gw-gold); color: #fff; }
/* =========================================================================
8. WARENKORB – Shopify-Zeilen-Layout (Template cart/cart.php),
zweispaltig mit sticky Summen-Karte, Auto-Update ohne Reload.
========================================================================= */
.gw-cart-page { display: block; }
@media (min-width: 861px) {
.gw-cart-page {
display: grid; grid-template-columns: minmax(0, 1fr) 380px;
gap: var(--gw-space-7); align-items: start;
}
.gw-cart__collaterals { position: sticky; top: var(--gw-space-5); }
}
.gw-cart__form { min-width: 0; }
.gw-cart__items { list-style: none; margin: 0 0 var(--gw-space-5); padding: 0; }
/* Kopfzeile (Labels) */
/* Kopf und Positionen nutzen DIESELBEN Spalten → Labels fluchten exakt */
.gw-cart__head,
.gw-cart__item {
display: grid;
grid-template-columns: 88px minmax(0, 1fr) 132px 110px 28px;
align-items: center; gap: var(--gw-space-4);
}
.gw-cart__head {
padding: 0 0 var(--gw-space-3); margin-bottom: var(--gw-space-2);
border-bottom: 1px solid var(--gw-border);
font-size: var(--gw-fs-300); font-weight: var(--gw-weight-semibold);
text-transform: uppercase; letter-spacing: 0.04em; color: var(--gw-muted);
}
.gw-cart__head-product { grid-column: 1 / 3; }
.gw-cart__head-qty { grid-column: 3; text-align: center; }
.gw-cart__head-total { grid-column: 4; text-align: right; }
/* Position: Bild · Info · Stepper · Zeilensumme · Entfernen */
.gw-cart__item {
padding: var(--gw-space-5) 0; border-bottom: 1px solid var(--gw-border);
}
.gw-cart__media img {
width: 88px !important; height: 88px !important; object-fit: contain;
background: var(--gw-bg); border: 1px solid var(--gw-border); border-radius: var(--gw-radius);
padding: 4px; display: block;
}
.gw-cart__info { display: flex; flex-direction: column; gap: var(--gw-space-1); min-width: 0; }
.gw-cart__name {
font-weight: var(--gw-weight-semibold); color: var(--gw-ink) !important;
text-decoration: none !important; line-height: 1.3; font-size: var(--gw-fs-500);
}
.gw-cart__name:hover { color: var(--gw-gold-dark) !important; }
/* Varianten/Meta (z. B. Gravur) dezent unter dem Namen */
.gw-cart__info dl.variation { margin: 0; display: block; }
.gw-cart__info dl.variation dt,
.gw-cart__info dl.variation dd {
display: inline; margin: 0; padding: 0; float: none;
color: var(--gw-muted); font-size: var(--gw-fs-300); font-weight: var(--gw-weight-normal);
}
.gw-cart__info dl.variation dd p { display: inline; margin: 0; }
.gw-cart__unit-price { color: var(--gw-muted); font-size: var(--gw-fs-300); }
.gw-cart__unit-price .amount { color: var(--gw-muted); }
.gw-cart__qty { justify-self: center; }
.gw-cart__line-total { justify-self: end; font-weight: var(--gw-weight-bold); color: var(--gw-ink); white-space: nowrap; }
.gw-cart__line-total .amount { color: var(--gw-ink); }
.gw-cart__remove { justify-self: end; }
/* Entfernen-Button: dezenter Kreis, Danger erst beim Hover (gilt auch im
Drawer und überall, wo WC a.remove rendert) */
.woocommerce a.remove,
.gw-cart__remove-btn {
display: inline-flex; align-items: center; justify-content: center;
width: 28px; height: 28px; line-height: 1;
border-radius: 50%;
color: var(--gw-muted) !important;
border: 1px solid var(--gw-border);
background: var(--gw-bg) !important;
font-size: 18px; font-weight: var(--gw-weight-normal);
text-decoration: none !important;
transition: background var(--gw-transition), color var(--gw-transition), border-color var(--gw-transition);
}
.woocommerce a.remove:hover,
.gw-cart__remove-btn:hover { background: var(--gw-gold-dark) !important; color: #fff !important; border-color: var(--gw-gold-dark); }
/* Gutschein + Aktualisieren-Leiste */
.gw-cart__bar {
display: flex; flex-wrap: wrap; gap: var(--gw-space-3);
align-items: center; justify-content: space-between;
padding-top: var(--gw-space-5);
}
.gw-cart__coupon { display: flex; gap: var(--gw-space-2); flex: 1 1 320px; align-items: stretch; margin: 0; }
.gw-cart__coupon .input-text {
flex: 1 1 auto; min-width: 140px; min-height: var(--gw-tap);
padding: 0.4em var(--gw-space-4);
border: 1px solid var(--gw-border); border-radius: var(--gw-radius);
font-family: var(--gw-font); font-size: var(--gw-fs-400);
}
.gw-cart__coupon .input-text:focus { border-color: var(--gw-gold); box-shadow: 0 0 0 3px var(--gw-gold-soft); outline: none; }
.gw-cart__coupon .button { flex: 0 0 auto; }
.gw-cart__update { flex: 0 0 auto; }
/* Auto-Update aktiv (JS): manuellen Button ausblenden; ohne JS bleibt er
als Fallback sichtbar (Progressive Enhancement). */
body.gw-cart-autoupdate .gw-cart__update { display: none; }
.woocommerce-cart-form.is-updating { opacity: 0.5; pointer-events: none; transition: opacity 0.2s ease; }
/* Mobile: Position stapeln */
@media (max-width: 600px) {
.gw-cart__head { display: none; }
.gw-cart__item {
grid-template-columns: 72px minmax(0, 1fr) 28px;
grid-template-areas:
"media info remove"
"media qty total";
row-gap: var(--gw-space-3);
}
.gw-cart__media { grid-area: media; align-self: start; }
.gw-cart__media img { width: 72px !important; height: 72px !important; }
.gw-cart__info { grid-area: info; }
.gw-cart__qty { grid-area: qty; justify-self: start; }
.gw-cart__line-total { grid-area: total; justify-self: end; align-self: center; }
.gw-cart__remove { grid-area: remove; }
.gw-cart__bar { flex-direction: column; align-items: stretch; }
/* WICHTIG: in der Column wird flex-basis (320px) sonst zur HÖHE →
riesiges Gutscheinfeld */
.gw-cart__coupon { flex: 0 0 auto; }
.gw-cart__update .button { width: 100%; }
}
/* Summen-Karte (Shopify-ruhig) */
.gw-cart__collaterals .cart_totals,
.woocommerce-cart .cart-collaterals .cart_totals {
width: 100%; float: none; max-width: none; margin: 0;
background: var(--gw-bg-soft);
border: 1px solid var(--gw-border);
border-radius: var(--gw-radius-lg);
padding: var(--gw-space-6);
}
.woocommerce-cart .cart_totals h2 {
font-size: var(--gw-fs-600); margin: 0 0 var(--gw-space-4);
padding-bottom: var(--gw-space-4); border-bottom: 1px solid var(--gw-border);
color: var(--gw-ink);
}
.woocommerce-cart .cart_totals table.shop_table {
width: 100%; border: none; background: transparent; margin: 0;
table-layout: fixed; /* lange Inhalte (Versand) sprengen sonst die Karte */
}
.woocommerce-cart .cart_totals table th {
text-align: left; border: none; padding: var(--gw-space-2) 0;
font-weight: var(--gw-weight-medium); color: var(--gw-ink); font-size: var(--gw-fs-400);
width: auto;
}
.woocommerce-cart .cart_totals table td {
text-align: right; border: none; padding: var(--gw-space-2) 0;
color: var(--gw-ink); font-size: var(--gw-fs-400); font-weight: var(--gw-weight-medium);
white-space: normal; overflow-wrap: break-word;
}
.woocommerce-cart .cart_totals table td .amount { white-space: nowrap; }
/* „Versandkosten berechnen": Gold-Link, WC-Icon-Glyphe (Tofu-Box) aus */
.woocommerce-cart .woocommerce-shipping-calculator .shipping-calculator-button { color: var(--gw-gold-dark); font-size: var(--gw-fs-300); }
.woocommerce-cart .woocommerce-shipping-calculator .shipping-calculator-button::before,
.woocommerce-cart .woocommerce-shipping-calculator .shipping-calculator-button::after { content: none !important; }
/* Nur die Gesamtsumme hervorheben: Linie darüber, größer, Gold */
.woocommerce-cart .cart_totals tr.order-total th,
.woocommerce-cart .cart_totals tr.order-total td {
border-top: 1px solid var(--gw-border) !important;
padding-top: var(--gw-space-3); padding-bottom: 0;
}
.woocommerce-cart .cart_totals tr.order-total th { font-weight: var(--gw-weight-bold); font-size: var(--gw-fs-500); }
.woocommerce-cart .cart_totals tr.order-total td .amount {
color: var(--gw-gold) !important; font-size: var(--gw-fs-700); font-weight: var(--gw-weight-black);
}
/* Steuer-/Versandzeilen dezent (Germanized fügt sie ein) */
.woocommerce-cart .cart_totals tr.tax-total th,
.woocommerce-cart .cart_totals tr.tax-total td,
.woocommerce-cart .cart_totals tr.order-tax th,
.woocommerce-cart .cart_totals tr.order-tax td {
font-size: var(--gw-fs-300); color: var(--gw-muted); font-weight: var(--gw-weight-normal);
}
.woocommerce-cart .wc-proceed-to-checkout { padding: var(--gw-space-4) 0 0; }
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
width: 100%; font-size: var(--gw-fs-500); margin-bottom: 0; padding: 0.95em 1.6em;
}
.woocommerce-cart .cart_totals::after {
content: "inkl. MwSt. · Versand wird an der Kasse berechnet";
display: block; margin-top: var(--gw-space-3);
font-size: var(--gw-fs-300); color: var(--gw-muted); text-align: center;
}
/* Cross-Sells über den Summen: gleiche Karten wie im Loop */
.woocommerce-cart .cart-collaterals .cross-sells { margin-bottom: var(--gw-space-5); }
.woocommerce-cart .cart-collaterals .cross-sells > h2 { font-size: var(--gw-fs-600); }
/* Leerer Warenkorb (Template-Override cart/cart-empty.php) */
.gw-cart-empty { max-width: 480px; margin: 0 auto; padding: var(--gw-space-8) var(--gw-space-4); text-align: center; }
.gw-cart-empty__icon { display: inline-flex; color: var(--gw-gold); margin-bottom: var(--gw-space-4); }
.gw-cart-empty__icon svg { width: 48px; height: 48px; }
.gw-cart-empty__title { margin: 0 0 var(--gw-space-2); font-size: var(--gw-fs-600); color: var(--gw-ink); }
.gw-cart-empty__text { margin: 0 0 var(--gw-space-5); color: var(--gw-muted); }
/* WC-Default „Zurück zum Shop"-Notice entfällt – der Empty State hat den CTA */
.woocommerce-cart .cart-empty.woocommerce-info,
.woocommerce-cart .return-to-shop { display: none; }
/* =========================================================================
9. KASSE – zweispaltig, Order-Review als sticky Karte, Germanized-Fixes
========================================================================= */
/* Eigenes Template (checkout/form-checkout.php): Struktur steht im Markup –
Hauptspalte (Adresse) links, Aside (Bestellung + Zahlarten + AGB) rechts. */
.gw-checkout { display: flex; flex-direction: column; gap: var(--gw-space-6); }
@media (min-width: 861px) {
.gw-checkout {
display: grid; grid-template-columns: minmax(0, 1fr) 460px;
gap: var(--gw-space-6) var(--gw-space-7); align-items: start;
}
}
.gw-checkout__main { min-width: 0; }
.gw-checkout__aside { min-width: 0; display: flex; flex-direction: column; gap: var(--gw-space-3); }
.gw-checkout__aside > * { margin: 0; }
.woocommerce-checkout form.checkout .col2-set,
.woocommerce-checkout form.checkout .col-1,
.woocommerce-checkout form.checkout .col-2 { width: 100%; float: none; }
.woocommerce-checkout #customer_details .col-1 { margin-bottom: var(--gw-space-5); }
.woocommerce-checkout h3 { font-size: var(--gw-fs-600); color: var(--gw-ink); margin-bottom: var(--gw-space-4); }
.woocommerce-checkout #order_review_heading { font-size: var(--gw-fs-600); margin: 0 0 var(--gw-space-3); }
/* Order-Review-Karte: gleicher Innenabstand wie die Warenkorb-Summen-Karte */
.woocommerce-checkout #order_review {
background: var(--gw-bg-soft);
border: 1px solid var(--gw-border);
border-radius: var(--gw-radius-lg);
padding: var(--gw-space-6);
width: 100%;
}
.woocommerce-checkout #order_review table.shop_table {
border: none; background: transparent;
table-layout: fixed; width: 100%; margin: 0;
}
.woocommerce-checkout #order_review table.shop_table th,
.woocommerce-checkout #order_review table.shop_table td {
padding: var(--gw-space-3) 0; font-size: var(--gw-fs-400); vertical-align: top; border: none;
}
/* Spaltenkopf: dunkel wie die Summen-Labels (kein abweichendes Grau),
dezente Großbuchstaben als Spaltenkopf-Konvention. */
.woocommerce-checkout #order_review table.shop_table thead th {
text-align: left;
color: var(--gw-ink); font-size: var(--gw-fs-300); font-weight: var(--gw-weight-semibold);
text-transform: uppercase; letter-spacing: 0.04em;
border-bottom: 1px solid var(--gw-border);
}
.woocommerce-checkout #order_review table.shop_table tbody tr.cart_item td { border-bottom: 1px solid var(--gw-border); }
.woocommerce-checkout #order_review td.product-name {
color: var(--gw-ink); font-weight: var(--gw-weight-medium);
text-align: left; line-height: 1.35;
/* break-word (NICHT anywhere): bricht nur überlange Wörter, zerlegt aber
Produktnamen nicht Zeichen für Zeichen in der schmalen Spalte. */
word-wrap: break-word; overflow-wrap: break-word; word-break: normal;
}
.woocommerce-checkout #order_review td.product-total { text-align: right; width: 96px; font-weight: var(--gw-weight-semibold); white-space: nowrap; }
/* Germanized verschachtelt Bild + Name + Meta + Menge in
.wc-gzd-cart-item-name-wrapper und layoutet das als Flex-ZEILE → Meta landet
sonst NEBEN dem Titel und läuft aus der Spalte. Lösung: Wrapper als Block,
Bild absolut in fester linker Spalte, Rest gestapelt rechts. */
.woocommerce-checkout #order_review .wc-gzd-cart-item-name-wrapper {
display: block;
position: relative;
min-height: 52px;
padding-left: 64px; /* Platz für das 52px-Bild + Abstand */
}
.woocommerce-checkout #order_review .wc-gzd-cart-item-thumbnail {
position: absolute; left: 0; top: 0; width: 52px; margin: 0;
}
.woocommerce-checkout #order_review td.product-name img,
.woocommerce-checkout #order_review .wc-gzd-cart-item-thumbnail img {
width: 52px !important; height: 52px !important; max-width: 52px !important; max-height: 52px !important;
object-fit: contain; background: var(--gw-bg);
border: 1px solid var(--gw-border); border-radius: var(--gw-radius); padding: 2px;
display: block; margin: 0;
}
/* Produkt-Meta (Variation, Gravur …) als kompakte Info-Pille auf eigener
Zeile – Radius statt 999px (sonst „Blob" bei mehrzeiligem Umbruch). */
.woocommerce-checkout #order_review td.product-name dl.variation {
display: block; width: 100%; max-width: 100%;
box-sizing: border-box; margin: var(--gw-space-2) 0 0;
background: var(--gw-gold-soft); color: var(--gw-gold-dark);
border-radius: var(--gw-radius);
padding: var(--gw-space-2) var(--gw-space-3);
font-size: var(--gw-fs-300); line-height: 1.35;
overflow-wrap: break-word; word-break: normal; white-space: normal;
}
.woocommerce-checkout #order_review td.product-name dl.variation dt,
.woocommerce-checkout #order_review td.product-name dl.variation dd { margin: 0; padding: 0; display: inline; float: none; }
.woocommerce-checkout #order_review td.product-name dl.variation dt { margin-right: 0.35em; }
/* WC packt den Wert in ein → würde als Block umbrechen („Preisvorschlag:"
und „angenommen" auf zwei Zeilen mit Lücke) – inline halten. */
.woocommerce-checkout #order_review td.product-name dl.variation dd p { display: inline; margin: 0; }
/* Menge IMMER auf eigener Zeile darunter */
.woocommerce-checkout #order_review .product-quantity,
.woocommerce-checkout #order_review strong.product-quantity {
display: block; clear: both; margin-top: var(--gw-space-1);
color: var(--gw-muted); font-weight: var(--gw-weight-normal);
}
/* Das Template- zwischen Block-Pille und Block-Menge erzeugt eine
Leerzeile – nur DANN die Menge um eine Zeilenhöhe hochziehen. */
.woocommerce-checkout #order_review .wc-gzd-cart-item-name-wrapper:has(dl.variation) .product-quantity {
margin-top: calc(var(--gw-space-1) - 1.35em);
}
/* Summen einheitlich: Labels dunkel, gleiche Größe; NUR die Gesamtsumme
hervorgehoben (fett + gold + größer). */
.woocommerce-checkout #order_review table.shop_table tfoot tr th {
text-align: left; font-weight: var(--gw-weight-medium); color: var(--gw-ink); font-size: var(--gw-fs-400);
padding: var(--gw-space-2) 0;
}
.woocommerce-checkout #order_review table.shop_table tfoot tr td {
text-align: right; color: var(--gw-ink); font-size: var(--gw-fs-400);
padding: var(--gw-space-2) 0; font-weight: var(--gw-weight-medium); white-space: nowrap;
}
.woocommerce-checkout #order_review tr.order-total th,
.woocommerce-checkout #order_review tr.order-total td {
border-top: 1px solid var(--gw-border) !important;
padding-top: var(--gw-space-3); padding-bottom: 0;
}
.woocommerce-checkout #order_review tr.order-total th {
color: var(--gw-ink); font-weight: var(--gw-weight-bold); font-size: var(--gw-fs-500);
}
.woocommerce-checkout #order_review tr.order-total td .amount {
color: var(--gw-gold) !important; font-size: var(--gw-fs-600); font-weight: var(--gw-weight-black);
}
/* Steuerzeilen dezent */
.woocommerce-checkout #order_review tr.tax-rate th,
.woocommerce-checkout #order_review tr.tax-rate td,
.woocommerce-checkout #order_review tr.tax-total th,
.woocommerce-checkout #order_review tr.tax-total td,
.woocommerce-checkout #order_review tr.order-tax th,
.woocommerce-checkout #order_review tr.order-tax td {
font-size: var(--gw-fs-300); color: var(--gw-muted); font-weight: var(--gw-weight-normal);
}
/* Zahlarten */
.woocommerce-checkout #payment {
background: var(--gw-bg) !important;
border: 1px solid var(--gw-border);
border-radius: var(--gw-radius);
margin-top: var(--gw-space-4);
}
.woocommerce-checkout #payment ul.payment_methods { border-bottom: 1px solid var(--gw-border); padding: var(--gw-space-4); }
.woocommerce-checkout #payment ul.payment_methods li {
list-style: none; padding: var(--gw-space-3) 0; border-bottom: 1px solid var(--gw-border);
}
.woocommerce-checkout #payment ul.payment_methods li:last-child { border-bottom: none; }
.woocommerce-checkout #payment ul.payment_methods li label {
display: inline-flex; align-items: center; gap: var(--gw-space-2);
font-size: var(--gw-fs-400) !important; font-weight: var(--gw-weight-medium); color: var(--gw-ink); margin: 0;
}
/* Eigener Radio-Button (appearance:none) – accent-color kollidiert mit den
WooPayments-Styles und ergibt einen unsauberen Farbklecks. */
.woocommerce-checkout #payment input[type="radio"] {
appearance: none; -webkit-appearance: none;
width: 20px; height: 20px; margin: 0 6px 0 0; padding: 0;
flex: 0 0 auto; vertical-align: middle;
border: 1.5px solid var(--gw-border); border-radius: 50%;
background-color: var(--gw-bg) !important;
background-image: none;
cursor: pointer;
transition: border-color var(--gw-transition), background var(--gw-transition);
}
.woocommerce-checkout #payment input[type="radio"]:hover { border-color: var(--gw-gold); }
.woocommerce-checkout #payment input[type="radio"]:checked {
border-color: var(--gw-gold);
background-image: radial-gradient(circle, var(--gw-gold) 0 5px, transparent 6px);
}
.woocommerce-checkout #payment input[type="radio"]:focus-visible {
outline: none; box-shadow: 0 0 0 3px var(--gw-gold-soft);
}
.woocommerce-checkout #payment ul.payment_methods li label img { max-height: 24px; width: auto; margin-left: var(--gw-space-2); vertical-align: middle; }
/* Zahlart-Beschreibung: Typo ans Designsystem – aber border-radius der
PayPal-Smart-Buttons NICHT anfassen (iframe rendert PayPal selbst). */
.woocommerce-checkout #payment div.payment_box,
.woocommerce-checkout #payment div.payment_box * {
font-family: var(--gw-font) !important;
font-size: var(--gw-fs-300) !important;
line-height: 1.5;
}
.woocommerce-checkout #payment div.payment_box {
background: var(--gw-bg-soft); border-radius: var(--gw-radius);
padding: var(--gw-space-4); margin-top: var(--gw-space-2);
color: var(--gw-muted);
}
.woocommerce-checkout #payment div.payment_box::before { border-bottom-color: var(--gw-bg-soft) !important; }
.woocommerce-checkout #payment .ppc-button-wrapper,
.woocommerce-checkout #payment .paypal-buttons { margin-top: var(--gw-space-3); }
.woocommerce-checkout #payment .place-order { padding: var(--gw-space-4); }
.woocommerce-checkout #place_order { width: 100%; font-size: var(--gw-fs-500); }
/* AGB-/Widerrufs-Zustimmung: bei Germanized in
,
NICHT in .woocommerce-terms-and-conditions-wrapper – beide abdecken.
Abstand über Whitespace, KEINE Trennlinie. */
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper,
.woocommerce-checkout p.legal,
.woocommerce-checkout .checkbox-legal {
margin-top: var(--gw-space-6);
margin-bottom: var(--gw-space-4);
}
.woocommerce-checkout .woocommerce-privacy-policy-text p,
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper p {
font-size: var(--gw-fs-300); color: var(--gw-muted); line-height: 1.5;
}
/* Label als Block mit Platz links → Checkbox absolut, Text fließt inline */
.woocommerce-checkout p.validate-required > label.checkbox,
.woocommerce-checkout .woocommerce-form__label-for-checkbox {
display: block; position: relative; padding-left: 32px;
line-height: 1.55; font-size: var(--gw-fs-400); font-weight: var(--gw-weight-normal);
color: var(--gw-ink); margin: 0;
}
/* Custom Checkbox (Shopify-Stil): leeres Quadrat → gold gefüllt mit Haken */
.woocommerce-checkout .woocommerce-form__input-checkbox,
.woocommerce-checkout input.input-checkbox,
.woocommerce-checkout #terms {
appearance: none; -webkit-appearance: none;
position: absolute; left: 0; top: 1px;
width: 20px; height: 20px; margin: 0; padding: 0;
border: 1.5px solid var(--gw-border); border-radius: 5px;
background: var(--gw-bg); cursor: pointer;
transition: background var(--gw-transition), border-color var(--gw-transition);
}
.woocommerce-checkout .woocommerce-form__input-checkbox:hover,
.woocommerce-checkout input.input-checkbox:hover,
.woocommerce-checkout #terms:hover { border-color: var(--gw-gold); }
.woocommerce-checkout .woocommerce-form__input-checkbox:checked,
.woocommerce-checkout input.input-checkbox:checked,
.woocommerce-checkout #terms:checked { background: var(--gw-gold); border-color: var(--gw-gold); }
.woocommerce-checkout .woocommerce-form__input-checkbox:checked::after,
.woocommerce-checkout input.input-checkbox:checked::after,
.woocommerce-checkout #terms:checked::after {
content: ""; position: absolute; left: 6px; top: 2px;
width: 5px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
.woocommerce-checkout .woocommerce-form__input-checkbox:focus-visible,
.woocommerce-checkout input.input-checkbox:focus-visible,
.woocommerce-checkout #terms:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--gw-gold-soft); }
.woocommerce-checkout .woocommerce-terms-and-conditions-checkbox-text a { color: var(--gw-gold-dark); font-weight: var(--gw-weight-medium); }
.woocommerce-checkout .woocommerce-terms-and-conditions-checkbox-text a:hover { text-decoration: underline; }
/* =========================================================================
10. DANKE-/BESTELLBESTÄTIGUNGSSEITE
========================================================================= */
.woocommerce-order .woocommerce-notice--success,
.woocommerce-order .woocommerce-thankyou-order-received {
background: var(--gw-success-soft);
border: 1px solid var(--gw-success);
border-radius: var(--gw-radius-lg);
padding: var(--gw-space-5);
font-size: var(--gw-fs-500);
font-weight: var(--gw-weight-semibold);
color: var(--gw-success);
}
.woocommerce-order .woocommerce-order-overview {
list-style: none; margin: var(--gw-space-5) 0; padding: 0;
display: grid; gap: var(--gw-space-3);
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
border: none;
}
.woocommerce-order .woocommerce-order-overview li {
background: var(--gw-bg);
border: 1px solid var(--gw-border);
border-radius: var(--gw-radius);
padding: var(--gw-space-4);
border-right: 1px solid var(--gw-border) !important;
text-transform: none;
color: var(--gw-muted);
font-weight: var(--gw-weight-medium);
float: none; width: auto; margin-right: 0;
}
.woocommerce-order .woocommerce-order-overview li strong {
display: block; margin-top: var(--gw-space-1);
color: var(--gw-ink); font-size: var(--gw-fs-500);
}
.woocommerce-order h2 { font-size: var(--gw-fs-600); margin-top: var(--gw-space-6); }
.woocommerce-order-details table.shop_table,
.woocommerce table.shop_table.order_details {
border: 1px solid var(--gw-border);
border-radius: var(--gw-radius-lg);
border-collapse: separate; border-spacing: 0;
overflow: hidden; background: var(--gw-bg);
}
.woocommerce-order-details table.shop_table th,
.woocommerce-order-details table.shop_table td,
.woocommerce table.shop_table.order_details th,
.woocommerce table.shop_table.order_details td {
text-align: left; padding: var(--gw-space-3) var(--gw-space-4);
border-bottom: 1px solid var(--gw-border); border-right: none;
}
.woocommerce-order-details table.shop_table td.product-total,
.woocommerce table.shop_table.order_details td.product-total { text-align: right; }
.woocommerce-order .woocommerce-customer-details address {
border: 1px solid var(--gw-border); border-radius: var(--gw-radius-lg);
padding: var(--gw-space-4); font-style: normal; color: var(--gw-ink);
}
/* =========================================================================
11. MEIN KONTO – Nav-Pills, Karten, Tabellen
========================================================================= */
/* Zweispaltig NUR im eingeloggten Konto (mit Navigation) – die Login-/
Registrieren-Ansicht hat keine Nav und würde sonst in der schmalen
Spalte landen („Mein Konto geht nicht"). */
@media (min-width: 769px) {
.woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation) {
display: grid; grid-template-columns: 240px minmax(0, 1fr);
gap: var(--gw-space-6); align-items: start;
}
}
/* Login ohne Registrierung: als zentrierte Karte */
.woocommerce-account:not(.logged-in) .woocommerce > h2 { text-align: center; }
.woocommerce-account:not(.logged-in) .woocommerce > form.login {
max-width: 480px; margin: 0 auto;
}
.woocommerce-MyAccount-navigation { float: none; width: auto; }
.woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--gw-space-1); }
.woocommerce-MyAccount-navigation li a {
display: block; padding: var(--gw-space-3) var(--gw-space-4);
border-radius: var(--gw-radius); border: 1px solid transparent;
color: var(--gw-ink); text-decoration: none; font-weight: var(--gw-weight-medium);
transition: background var(--gw-transition), color var(--gw-transition);
}
.woocommerce-MyAccount-navigation li a:hover { background: var(--gw-bg-soft); color: var(--gw-gold-dark); }
.woocommerce-MyAccount-navigation li.is-active a {
background: var(--gw-gold-soft); color: var(--gw-gold-dark);
border-color: var(--gw-gold-soft); font-weight: var(--gw-weight-semibold);
}
.woocommerce-MyAccount-content { float: none; width: auto; min-width: 0; }
.woocommerce-MyAccount-content a:not(.button) { color: var(--gw-gold-dark); }
.woocommerce-MyAccount-content a:not(.button):hover { text-decoration: underline; }
/* Adressen als Karten */
.woocommerce-Addresses { display: grid; gap: var(--gw-space-5); margin-top: var(--gw-space-4); }
@media (min-width: 600px) { .woocommerce-Addresses { grid-template-columns: 1fr 1fr; } }
.woocommerce-Address,
.woocommerce-Addresses .col-1,
.woocommerce-Addresses .col-2 {
float: none; width: auto; max-width: none;
border: 1px solid var(--gw-border); border-radius: var(--gw-radius-lg);
padding: var(--gw-space-5); background: var(--gw-bg-soft);
}
.woocommerce-Address-title { display: flex; align-items: center; justify-content: space-between; gap: var(--gw-space-3); margin-bottom: var(--gw-space-3); }
.woocommerce-Address-title h2, .woocommerce-Address-title h3 { margin: 0; font-size: var(--gw-fs-500); }
.woocommerce-Address address { font-style: normal; color: var(--gw-ink); line-height: var(--gw-lh); border: none; padding: 0; }
/* Bestell-/Download-Tabellen */
.woocommerce-account table.shop_table {
border: 1px solid var(--gw-border);
border-radius: var(--gw-radius-lg);
border-collapse: separate; border-spacing: 0;
overflow: hidden; background: var(--gw-bg);
}
.woocommerce-account table.shop_table thead th {
background: var(--gw-bg-soft); color: var(--gw-ink);
font-weight: var(--gw-weight-semibold); padding: var(--gw-space-4);
border-bottom: 1px solid var(--gw-border);
}
.woocommerce-account table.shop_table td { padding: var(--gw-space-4); vertical-align: middle; }
.woocommerce-account table.shop_table tbody tr + tr td { border-top: 1px solid var(--gw-border); }
.woocommerce-orders-table__cell-order-status { color: var(--gw-muted); }
/* Login/Registrieren als Karten, Desktop nebeneinander.
Spalten EXPLIZIT platzieren – Plugins schieben teils zusätzliche Elemente
in den Container, dann verrutscht die Auto-Platzierung („Anmelden" rechts,
„Registrieren" darunter). */
.woocommerce-account .u-columns { display: grid; gap: var(--gw-space-6); align-items: start; }
@media (min-width: 769px) {
.woocommerce-account .col2-set.u-columns { grid-template-columns: 1fr 1fr; }
.woocommerce-account .u-columns .col-1 { grid-column: 1; grid-row: 1; }
.woocommerce-account .u-columns .col-2 { grid-column: 2; grid-row: 1; }
}
.woocommerce-account .u-columns .col-1,
.woocommerce-account .u-columns .col-2 { float: none; width: auto; max-width: none; min-width: 0; }
.woocommerce-account .u-columns h2 { margin: 0 0 var(--gw-space-4); font-size: var(--gw-fs-600); }
.woocommerce form.login, .woocommerce form.register {
border: 1px solid var(--gw-border); border-radius: var(--gw-radius-lg);
padding: var(--gw-space-5); background: var(--gw-bg-soft); margin: 0;
}
.woocommerce-account .woocommerce h2 { font-size: var(--gw-fs-600); margin: 0 0 var(--gw-space-4); }
/* Passwort-Stärke-Anzeige */
.woocommerce-password-strength {
border-radius: var(--gw-radius); padding: 0.4em 0.8em; margin-top: var(--gw-space-2);
font-size: var(--gw-fs-300); font-weight: var(--gw-weight-medium); border: 1px solid transparent;
}
.woocommerce-password-strength.strong { background: var(--gw-success-soft); color: var(--gw-success); border-color: var(--gw-success); }
.woocommerce-password-strength.good { background: var(--gw-gold-soft); color: var(--gw-warning); border-color: var(--gw-warning); }
.woocommerce-password-strength.short, .woocommerce-password-strength.bad { background: var(--gw-danger-soft); color: var(--gw-danger); border-color: var(--gw-danger); }
.woocommerce-password-hint { display: block; margin-top: var(--gw-space-2); color: var(--gw-muted); font-size: var(--gw-fs-300); }
/* =========================================================================
12. STORE NOTICE
========================================================================= */
.woocommerce-store-notice, p.demo_store {
background: var(--gw-ink); color: #fff;
padding: var(--gw-space-3) var(--gw-space-5); font-size: var(--gw-fs-300);
}
.woocommerce-store-notice a, p.demo_store a { color: var(--gw-gold-light); text-decoration: underline; }
/* =========================================================================
13. MINI-CART DRAWER (Slide-in, eigenes Markup gw-mc-*)
Trigger ist der Warenkorb-Link im Header (.gw-cart-toggle, footer.php
liefert das Panel, theme.js übernimmt das Öffnen).
========================================================================= */
.gw-minicart-overlay {
position: fixed; inset: 0; z-index: 400;
background: rgba(16, 16, 16, 0.45);
opacity: 0; transition: opacity 0.28s ease;
}
.gw-minicart-overlay.is-open { opacity: 1; }
.gw-minicart {
position: fixed; top: 0; right: 0; bottom: 0; z-index: 401;
width: min(420px, 92vw);
display: flex; flex-direction: column;
background: var(--gw-bg);
box-shadow: var(--gw-shadow-lg);
transform: translateX(100%);
transition: transform 0.28s ease;
}
.gw-minicart.is-open { transform: translateX(0); }
.gw-minicart__head {
display: flex; align-items: center; justify-content: space-between;
padding: var(--gw-space-4) var(--gw-space-5);
border-bottom: 1px solid var(--gw-border);
}
.gw-minicart__title { margin: 0; font-size: var(--gw-fs-500); font-weight: var(--gw-weight-bold); color: var(--gw-ink); }
.gw-minicart__close {
display: inline-flex; align-items: center; justify-content: center;
width: 36px; height: 36px;
border: 1px solid var(--gw-border); border-radius: 50%;
background: var(--gw-bg); color: var(--gw-ink);
font-size: 18px; line-height: 1; cursor: pointer;
transition: background var(--gw-transition), color var(--gw-transition);
}
.gw-minicart__close:hover { background: var(--gw-ink); color: #fff; border-color: var(--gw-ink); }
.gw-minicart__body { flex: 1 1 auto; overflow-y: auto; padding: 0 var(--gw-space-5) var(--gw-space-5); }
/* Positionen */
.gw-mc-list { list-style: none; margin: 0; padding: 0; }
.gw-mc-item {
position: relative;
display: flex; align-items: flex-start; gap: var(--gw-space-3);
padding: var(--gw-space-4) 28px var(--gw-space-4) 0;
border-bottom: 1px solid var(--gw-border);
}
.gw-mc-item__media { flex: 0 0 auto; }
.gw-mc-item__media img,
.gw-minicart img,
.widget_shopping_cart_content img {
width: 52px !important; height: 52px !important;
max-width: 52px !important; max-height: 52px !important;
display: block; object-fit: contain; background: var(--gw-bg);
border: 1px solid var(--gw-border); border-radius: var(--gw-radius); padding: 3px;
margin: 0 !important; float: none !important;
}
.gw-mc-item__info { display: flex; flex-direction: column; gap: var(--gw-space-1); min-width: 0; flex: 1 1 auto; }
.gw-mc-item__name {
color: var(--gw-ink) !important; font-weight: var(--gw-weight-medium);
line-height: 1.3; text-decoration: none !important;
}
.gw-mc-item__name:hover { color: var(--gw-gold-dark) !important; }
.gw-mc-item__qty { color: var(--gw-muted); font-size: var(--gw-fs-300); }
.gw-mc-item__info dl, .gw-mc-item__info dl * { margin: 0; color: var(--gw-muted); font-size: var(--gw-fs-300); border: none; padding: 0; }
/* Meta einzeilig: dt/dd/p inline (WC packt Werte in Block-
) */
.gw-mc-item__info dl, .gw-mc-item__info dl dt, .gw-mc-item__info dl dd, .gw-mc-item__info dl dd p { display: inline; float: none; }
.gw-mc-item__info dl dt { margin-right: 0.35em; }
.gw-mc-item__remove {
position: absolute; top: 50%; right: 0; transform: translateY(-50%);
width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center;
border: 1px solid var(--gw-border); border-radius: 50%;
background: var(--gw-bg); color: var(--gw-muted);
font-size: 14px; line-height: 1; text-decoration: none;
transition: background var(--gw-transition), color var(--gw-transition), border-color var(--gw-transition);
}
.gw-mc-item__remove:hover { background: var(--gw-gold-dark); color: #fff; border-color: var(--gw-gold-dark); }
/* Fuß: Summe, Hinweis, Aktionen */
.gw-mc-foot { padding-top: var(--gw-space-4); }
.gw-mc-total {
display: flex; justify-content: space-between; align-items: center;
font-weight: var(--gw-weight-semibold); font-size: var(--gw-fs-500);
padding-bottom: var(--gw-space-2);
}
.gw-mc-total strong { color: var(--gw-gold); font-size: var(--gw-fs-600); font-weight: var(--gw-weight-black); }
.gw-mc-note {
margin: 0 0 var(--gw-space-4);
font-size: var(--gw-fs-300); color: var(--gw-muted); text-align: center;
}
.gw-mc-actions { display: flex; flex-direction: column; gap: var(--gw-space-2); }
.gw-mc-empty { color: var(--gw-muted); text-align: center; padding: var(--gw-space-7) 0; }
.gw-minicart.is-loading .gw-minicart__body { opacity: 0.5; pointer-events: none; transition: opacity 0.2s ease; }
/* =========================================================================
14. STICKY-CTA (nur Mobil, Produktseite) – spiegelt den echten Button
========================================================================= */
.gw-sticky-cta { display: none; }
@media (max-width: 768px) {
html { scroll-behavior: smooth; }
.woocommerce div.product form.cart { scroll-margin-top: 96px; }
.gw-sticky-cta {
display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 150;
background: var(--gw-bg); border-top: 1px solid var(--gw-border);
box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.08);
padding: var(--gw-space-3) var(--gw-gutter);
padding-bottom: calc(var(--gw-space-3) + env(safe-area-inset-bottom, 0px));
}
.gw-sticky-cta__inner { display: flex; align-items: center; gap: var(--gw-space-4); }
.gw-sticky-cta__price { flex: 0 0 auto; font-weight: var(--gw-weight-bold); font-size: var(--gw-fs-400); color: var(--gw-ink); white-space: nowrap; }
.gw-sticky-cta__price .amount { color: var(--gw-gold); }
.gw-sticky-cta__btn { flex: 1 1 auto; justify-content: center; min-height: var(--gw-tap); }
body.single-product { padding-bottom: 84px; } /* Platz für die fixe Leiste */
}
/* =========================================================================
15. RESPONSIVE – Loop-Raster
========================================================================= */
@media (max-width: 1024px) {
.woocommerce ul.products.columns-3,
.woocommerce ul.products.columns-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
.woocommerce ul.products { gap: var(--gw-space-4); }
}
@media (max-width: 420px) {
.woocommerce ul.products.columns-2,
.woocommerce ul.products.columns-3,
.woocommerce ul.products.columns-4 { grid-template-columns: 1fr; }
}
/* =========================================================================
16. ARCHIV-FILTER – Toolbar, aktive Chips, Off-Canvas-Drawer
========================================================================= */
.gw-toolbar {
display: flex; align-items: center; gap: var(--gw-space-4);
margin: 0 0 var(--gw-space-5);
}
.gw-toolbar .woocommerce-result-count { margin: 0; flex: 1 1 auto; }
.gw-toolbar .woocommerce-ordering { margin: 0; float: none; }
.gw-filter-toggle { gap: var(--gw-space-2); }
.gw-filter-toggle__count {
display: inline-flex; align-items: center; justify-content: center;
min-width: 20px; height: 20px; padding: 0 5px;
background: var(--gw-gold); color: #fff;
border-radius: var(--gw-radius-pill);
font-size: 12px; font-weight: var(--gw-weight-bold); line-height: 1;
}
@media (max-width: 600px) {
.gw-toolbar { flex-wrap: wrap; gap: var(--gw-space-3); }
.gw-toolbar .woocommerce-result-count { display: none; }
.gw-toolbar .woocommerce-ordering { margin-left: auto; }
}
/* Aktive Filter als entfernbare Chips */
.gw-active-filters {
display: flex; flex-wrap: wrap; align-items: center; gap: var(--gw-space-2);
margin: 0 0 var(--gw-space-5);
}
.gw-chip--remove span { margin-left: 6px; color: var(--gw-muted); }
.gw-chip--remove:hover span { color: var(--gw-danger); }
.gw-active-filters__reset {
margin-left: var(--gw-space-2);
color: var(--gw-muted) !important; font-size: var(--gw-fs-300);
text-decoration: underline !important;
}
.gw-active-filters__reset:hover { color: var(--gw-danger) !important; }
/* Drawer (Off-Canvas links) – Overlay nutzt .gw-minicart-overlay */
.gw-filters {
position: fixed; top: 0; left: 0; bottom: 0; z-index: 401;
width: min(380px, 92vw);
display: flex; flex-direction: column;
background: var(--gw-bg);
box-shadow: var(--gw-shadow-lg);
transform: translateX(-100%);
transition: transform 0.28s ease;
}
.gw-filters.is-open { transform: translateX(0); }
.gw-filters__head {
display: flex; align-items: center; justify-content: space-between;
padding: var(--gw-space-4) var(--gw-space-5);
border-bottom: 1px solid var(--gw-border);
flex: 0 0 auto;
}
.gw-filters__title { margin: 0; font-size: var(--gw-fs-500); font-weight: var(--gw-weight-bold); }
.gw-filters__form { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.gw-filters__body { flex: 1 1 auto; overflow-y: auto; padding: 0 var(--gw-space-5); }
/* Gruppen als native -Akkordeons */
.gw-filters__group { border-bottom: 1px solid var(--gw-border); }
.gw-filters__group summary {
display: flex; align-items: center; gap: var(--gw-space-2);
min-height: 52px; padding: var(--gw-space-2) 0;
cursor: pointer; list-style: none;
font-weight: var(--gw-weight-semibold); color: var(--gw-ink);
}
.gw-filters__group summary::-webkit-details-marker { display: none; }
.gw-filters__group summary::after {
content: ""; margin-left: auto;
width: 8px; height: 8px;
border-right: 1.7px solid var(--gw-muted);
border-bottom: 1.7px solid var(--gw-muted);
transform: rotate(45deg);
transition: transform var(--gw-transition);
}
.gw-filters__group[open] summary::after { transform: rotate(225deg); }
.gw-filters__badge {
display: inline-flex; align-items: center; justify-content: center;
min-width: 20px; height: 20px; padding: 0 5px;
background: var(--gw-gold-soft); color: var(--gw-gold-dark);
border-radius: var(--gw-radius-pill);
font-size: 12px; font-weight: var(--gw-weight-bold);
}
.gw-filters__options {
display: flex; flex-direction: column; gap: 2px;
padding: 0 0 var(--gw-space-4);
max-height: 280px; overflow-y: auto;
}
.gw-filters__option {
display: flex; align-items: center; gap: var(--gw-space-3);
min-height: 38px; padding: 0 var(--gw-space-2);
border-radius: var(--gw-radius);
font-weight: var(--gw-weight-normal); color: var(--gw-ink);
cursor: pointer;
}
.gw-filters__option:hover { background: var(--gw-gold-soft); }
/* Custom-Checkbox im Shopify-Stil (gold gefüllt mit Haken) */
.gw-filters__option input[type="checkbox"] {
appearance: none; -webkit-appearance: none;
position: relative; flex: 0 0 auto;
width: 20px; height: 20px; margin: 0;
border: 1.5px solid var(--gw-border); border-radius: 5px;
background: var(--gw-bg); cursor: pointer;
transition: background var(--gw-transition), border-color var(--gw-transition);
}
.gw-filters__option input[type="checkbox"]:hover { border-color: var(--gw-gold); }
.gw-filters__option input[type="checkbox"]:checked { background: var(--gw-gold); border-color: var(--gw-gold); }
.gw-filters__option input[type="checkbox"]:checked::after {
content: ""; position: absolute; left: 6px; top: 2px;
width: 5px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
.gw-filters__option input[type="checkbox"]:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--gw-gold-soft); }
/* Preis-Range */
.gw-filters__price { flex-direction: row; align-items: center; gap: var(--gw-space-2); color: var(--gw-muted); }
.gw-filters__price label { flex: 1 1 auto; }
.gw-filters__price input {
width: 100%; min-height: var(--gw-tap);
padding: 0.4em var(--gw-space-3);
border: 1px solid var(--gw-border); border-radius: var(--gw-radius);
font-family: var(--gw-font); font-size: var(--gw-fs-400);
}
.gw-filters__price input:focus { border-color: var(--gw-gold); box-shadow: 0 0 0 3px var(--gw-gold-soft); outline: none; }
.gw-filters__foot {
flex: 0 0 auto;
display: flex; flex-direction: column; gap: var(--gw-space-2);
padding: var(--gw-space-4) var(--gw-space-5);
border-top: 1px solid var(--gw-border);
background: var(--gw-bg);
}
/* =========================================================================
17. LIEFERZEIT & PRODUKT-INFO-TABELLE (vormals Snippets)
========================================================================= */
/* Lagerstatus auf der Produktseite: Markengold statt WC-Grün/Rot
(Text kommt aus inc/shop-custom.php: „Sofort lieferbar …") */
.woocommerce div.product p.stock,
.woocommerce div.product .stock.in-stock,
.woocommerce div.product .stock.out-of-stock {
color: var(--gw-gold);
font-size: var(--gw-fs-400);
font-weight: var(--gw-weight-medium);
}
/* [product_info_table] – schlichte Label/Wert-Zeilen ohne Tabellen-Deko */
.gw-info-table {
width: 100%;
border: none;
border-collapse: collapse;
text-align: left;
}
.gw-info-table th,
.gw-info-table td {
border: none;
background: none;
padding: var(--gw-space-1) 0;
text-align: left;
font-size: var(--gw-fs-400);
}
.gw-info-table th {
width: 40%;
font-weight: var(--gw-weight-semibold);
color: var(--gw-ink);
}
.gw-info-table td { color: var(--gw-ink-2); font-weight: var(--gw-weight-normal); }
/* =========================================================================
18. PRODUKTSEITE – Feinschliff (Abstände, Tabs-Überlappung, Meta)
========================================================================= */
/* WC-Clearfix-Pseudoelemente würden im Grid zu Geister-Zellen –
sicherheitshalber abschalten. */
.woocommerce div.product::before,
.woocommerce div.product::after { content: none !important; }
/* Tabs: fester Abstand zur Galerie/Summary – nichts überlappt mehr */
.woocommerce div.product .woocommerce-tabs {
clear: both;
margin-top: var(--gw-space-6);
padding-top: var(--gw-space-2);
}
.woocommerce div.product .woocommerce-tabs .panel { margin: 0; }
.woocommerce div.product .woocommerce-tabs .panel > p:first-child { margin-top: 0; }
/* Summary: ALLE direkten Form-Kinder ohne Eigen-Margin – die Lücken steuert
das gap des Formulars (Plugins wie FPF/Germanized bringen sonst eigene,
ungleich große Abstände mit). */
.woocommerce div.product form.cart > *,
.woocommerce div.product form.cart p.form-row,
.woocommerce div.product form.cart .fpf-fields-container,
.woocommerce div.product form.cart .fpf-field,
.woocommerce div.product form.cart .fpf-field p { margin: 0; }
.woocommerce div.product form.cart label { font-weight: var(--gw-weight-medium); color: var(--gw-ink); }
/* Germanized-Preiszeilen (zzgl. Versandkosten, MwSt., Lieferzeit) kompakt
und ruhig unter dem Preis */
.woocommerce div.product .legal-price-info,
.woocommerce div.product .wc-gzd-additional-info,
.woocommerce div.product .shipping-costs-info,
.woocommerce div.product .tax-info,
.woocommerce div.product .delivery-time-info {
margin: 0; font-size: var(--gw-fs-300); color: var(--gw-muted); line-height: 1.5;
}
.woocommerce div.product .shipping-costs-info a,
.woocommerce div.product .legal-price-info a { color: var(--gw-gold-dark); }
/* Artikelnummer/Kategorien: dezente Schlusszeile mit Trennlinie statt
verlorenem Text im Leerraum */
.woocommerce div.product .product_meta {
margin-top: var(--gw-space-2);
padding-top: var(--gw-space-4);
border-top: 1px solid var(--gw-border);
display: flex; flex-wrap: wrap; gap: var(--gw-space-1) var(--gw-space-4);
}
.woocommerce div.product .product_meta > span { display: inline-flex; gap: 4px; flex-wrap: wrap; }
/* Galerie sauber im Grid halten */
.woocommerce div.product .woocommerce-product-gallery { align-self: start; }
.woocommerce div.product .related.products { margin-top: var(--gw-space-7); }
.woocommerce div.product .related.products ul.products { margin-bottom: 0; }
/* Produktseite: großzügiger Abstand zum Footer */
.single-product .gw-page { padding-block: var(--gw-space-6) var(--gw-space-8); }
/* =========================================================================
19. TOKEN-PASS – restliche Bereiche ans Designsystem angleichen
(Select2-Dropdown, Checkout-Gutschein, WP-Pagination, Prose, Germanized)
========================================================================= */
/* --- Select2-Dropdown (Länderauswahl Kasse) – rendert am , daher
eigener Scope. Default wäre Blau/Systemfont. ------------------------- */
.select2-container--default .select2-dropdown {
border: 1px solid var(--gw-border);
border-radius: var(--gw-radius);
box-shadow: var(--gw-shadow-lg);
font-family: var(--gw-font);
overflow: hidden;
}
.select2-container--default .select2-search--dropdown .select2-search__field {
border: 1px solid var(--gw-border);
border-radius: var(--gw-radius);
font-family: var(--gw-font);
padding: 0.4em var(--gw-space-2);
}
.select2-container--default .select2-search--dropdown .select2-search__field:focus {
border-color: var(--gw-gold); box-shadow: 0 0 0 3px var(--gw-gold-soft); outline: none;
}
.select2-container--default .select2-results__option {
padding: var(--gw-space-2) var(--gw-space-3);
font-size: var(--gw-fs-400);
}
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable,
.select2-container--default .select2-results__option--highlighted[aria-selected] {
background: var(--gw-gold-soft) !important;
color: var(--gw-gold-dark) !important;
}
.select2-container--default .select2-results__option--selected,
.select2-container--default .select2-results__option[aria-selected="true"] {
background: var(--gw-gold) !important;
color: #fff !important;
}
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
border-color: var(--gw-gold);
box-shadow: 0 0 0 3px var(--gw-gold-soft);
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
color: var(--gw-ink); line-height: inherit;
}
/* --- Checkout: „Gutschein einlösen"-Formular als ruhige Zeile ----------- */
.woocommerce form.checkout_coupon {
display: flex; flex-wrap: wrap; gap: var(--gw-space-2);
align-items: stretch;
border: 1px solid var(--gw-border);
border-radius: var(--gw-radius-lg);
background: var(--gw-bg-soft);
padding: var(--gw-space-4);
margin-bottom: var(--gw-space-5);
}
.woocommerce form.checkout_coupon p { margin: 0; flex: 1 1 100%; color: var(--gw-muted); font-size: var(--gw-fs-300); }
.woocommerce form.checkout_coupon .form-row { flex: 1 1 220px; margin: 0; padding: 0; }
.woocommerce form.checkout_coupon .form-row:last-child { flex: 0 0 auto; }
.woocommerce form.checkout_coupon .input-text { width: 100%; }
/* --- Formular-Rhythmus: gleichmäßige Abstände zwischen Feldzeilen ------- */
.woocommerce form .form-row { margin-bottom: var(--gw-space-3); padding: 0; }
.woocommerce form .form-row label { margin-bottom: var(--gw-space-1); }
.woocommerce form .form-row input::placeholder,
.woocommerce form .form-row textarea::placeholder { color: var(--gw-muted); opacity: 1; }
/* --- Germanized: Checkbox-Gruppen (AGB/Widerruf/Datenschutz) einheitlich - */
.woocommerce-checkout .wc-gzd-legal-checkbox-text,
.woocommerce-checkout .legal .woocommerce-gzd-legal-checkbox-text {
font-size: var(--gw-fs-300); color: var(--gw-ink); line-height: 1.55;
}
.woocommerce-checkout .wc-gzd-legal-checkbox-text a,
.woocommerce-checkout .legal a { color: var(--gw-gold-dark); font-weight: var(--gw-weight-medium); }
.woocommerce-checkout .wc-gzd-legal-checkbox-text a:hover,
.woocommerce-checkout .legal a:hover { text-decoration: underline; }
/* --- WP-Core-Pagination (Suchergebnisse) wie die WC-Pagination ---------- */
.gw-main .navigation.pagination { margin-top: var(--gw-space-6); }
.gw-main .navigation.pagination .nav-links {
display: flex; flex-wrap: wrap; gap: var(--gw-space-2); justify-content: center;
}
.gw-main .navigation.pagination .page-numbers {
display: inline-flex; align-items: center; justify-content: center;
min-width: var(--gw-tap); min-height: var(--gw-tap); padding: 0 var(--gw-space-3);
border: 1px solid var(--gw-border); border-radius: var(--gw-radius);
color: var(--gw-ink); text-decoration: none; line-height: 1;
transition: background var(--gw-transition), color var(--gw-transition), border-color var(--gw-transition);
}
.gw-main .navigation.pagination .page-numbers.current,
.gw-main .navigation.pagination a.page-numbers:hover {
background: var(--gw-gold); color: #fff; border-color: var(--gw-gold);
}
/* --- Inhalts-Typografie für klassische Seiten (Impressum, AGB, …) ------- */
.gw-page .gw-main > h2, .gw-page .gw-main > h3 { margin: var(--gw-space-6) 0 var(--gw-space-3); }
.gw-page .gw-main > p { margin: 0 0 var(--gw-space-4); line-height: var(--gw-lh); }
.gw-page .gw-main > ul, .gw-page .gw-main > ol { margin: 0 0 var(--gw-space-4); padding-left: 1.4em; line-height: var(--gw-lh); }
.gw-page .gw-main a:not(.gw-btn):not(.button) { text-decoration: underline; text-underline-offset: 2px; }
/* --- Kasse: „Zurück"-/Login-Hinweise (woocommerce-info) ruhig halten ---- */
.woocommerce-checkout .woocommerce-form-login,
.woocommerce-checkout .woocommerce-form-coupon {
border: 1px solid var(--gw-border); border-radius: var(--gw-radius-lg);
background: var(--gw-bg-soft); padding: var(--gw-space-4); margin-bottom: var(--gw-space-5);
}
/* --- Konto: Downloads-Buttons + „Bestellung ansehen" einheitlich klein -- */
.woocommerce-account table.shop_table .button {
min-height: 36px; padding: 0.4em 1em; font-size: var(--gw-fs-300);
}
/* =========================================================================
20. ARCHIV-SIDEBAR – Filter links neben dem Grid (Desktop),
mobil übernimmt der Off-Canvas-Drawer (Filter-Button in der Toolbar).
========================================================================= */
@media (min-width: 1025px) {
.gw-archive-layout {
display: grid;
grid-template-columns: 270px minmax(0, 1fr);
gap: var(--gw-space-7);
align-items: start;
}
.gw-filter-sidebar {
position: sticky; top: 96px;
max-height: calc(100vh - 120px);
overflow-y: auto;
padding-right: var(--gw-space-2);
}
/* Auf Desktop ersetzt die Sidebar den Drawer-Button */
.gw-filter-toggle { display: none; }
/* Raster in der schmaleren Spalte: 2 statt 3 Karten nur unter 1240px */
.gw-archive-content ul.products.columns-3 { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1025px) and (max-width: 1260px) {
.gw-archive-content ul.products.columns-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 1024px) {
.gw-filter-sidebar { display: none; } /* mobil: Drawer statt Sidebar */
}
.gw-filter-sidebar__title {
margin: 0 0 var(--gw-space-2);
font-size: var(--gw-fs-500);
font-weight: var(--gw-weight-bold);
color: var(--gw-ink);
}
/* Formular-Bausteine außerhalb des Drawers (Sidebar-Kontext) */
.gw-filter-sidebar .gw-filters__body { padding: 0; overflow: visible; }
.gw-filter-sidebar .gw-filters__foot {
border-top: none; padding: var(--gw-space-4) 0 0;
display: flex; flex-direction: column; gap: var(--gw-space-2);
background: none;
}
/* =========================================================================
21. PREISVORSCHLAG – Button, Modal, Statusmeldungen
========================================================================= */
.gw-offer-open { align-self: flex-start; min-width: 240px; }
.gw-offer { position: fixed; inset: 0; z-index: 420; }
.gw-offer__backdrop {
position: absolute; inset: 0;
background: rgba(16, 16, 16, 0.5);
-webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
.gw-offer__dialog {
position: relative;
width: min(440px, calc(100vw - 32px));
margin: 14vh auto 0;
background: var(--gw-bg);
border-radius: var(--gw-radius-lg);
box-shadow: var(--gw-shadow-lg);
padding: var(--gw-space-6);
animation: gw-toast-in 0.25s ease;
}
.gw-offer__dialog .gw-offer-close { position: absolute; top: var(--gw-space-4); right: var(--gw-space-4); }
.gw-offer__title { margin: 0 0 var(--gw-space-2); font-size: var(--gw-fs-600); color: var(--gw-ink); }
.gw-offer__product { margin: 0 0 var(--gw-space-4); color: var(--gw-muted); font-size: var(--gw-fs-300); }
.gw-offer__product strong, .gw-offer__product .amount { color: var(--gw-gold); }
.gw-offer__form { display: flex; flex-direction: column; gap: var(--gw-space-3); }
.gw-offer__field { display: flex; flex-direction: column; gap: var(--gw-space-1); font-weight: var(--gw-weight-medium); color: var(--gw-ink); }
.gw-offer__field input {
min-height: var(--gw-tap);
padding: 0.4em var(--gw-space-3);
border: 1px solid var(--gw-border); border-radius: var(--gw-radius);
font-family: var(--gw-font); font-size: var(--gw-fs-400);
}
.gw-offer__field input:focus { border-color: var(--gw-gold); box-shadow: 0 0 0 3px var(--gw-gold-soft); outline: none; }
.gw-offer__note { margin: 0; font-size: var(--gw-fs-300); color: var(--gw-muted); text-align: center; }
.gw-offer__msg {
margin: var(--gw-space-4) 0 0;
padding: var(--gw-space-3) var(--gw-space-4);
border-radius: var(--gw-radius);
border: 1px solid var(--gw-border);
font-weight: var(--gw-weight-medium);
}
.gw-offer__msg.is-accepted { background: var(--gw-success-soft); border-color: var(--gw-success); color: var(--gw-success); }
.gw-offer__msg.is-inquiry { background: var(--gw-gold-soft); border-color: var(--gw-gold); color: var(--gw-gold-dark); }
.gw-offer__msg.is-rejected { background: var(--gw-danger-soft); border-color: var(--gw-danger); color: var(--gw-danger); }
/* =========================================================================
22. HOVER-ZWEITBILD auf Produktkarten (erstes Galeriebild)
========================================================================= */
.gw-card__media { position: relative; }
.gw-card__alt {
position: absolute; inset: 0;
display: flex; align-items: center; justify-content: center;
padding: var(--gw-space-5);
background: var(--gw-bg);
opacity: 0;
transition: opacity 0.3s ease;
pointer-events: none;
}
.gw-card__alt img {
max-width: 100% !important; max-height: 100% !important;
width: auto !important; height: auto !important;
object-fit: contain;
}
li.product.gw-card:hover .gw-card__alt,
li.product.gw-card:focus-within .gw-card__alt { opacity: 1; }
/* =========================================================================
23. PRODUKTSEITE – Galerie geordnet (quadratische Bildfläche),
Summary mit ruhiger Maximalbreite
========================================================================= */
.woocommerce div.product .woocommerce-product-gallery__image {
background: var(--gw-bg);
}
.woocommerce div.product .woocommerce-product-gallery__image img {
aspect-ratio: 1 / 1;
object-fit: contain;
padding: var(--gw-space-6);
box-sizing: border-box;
background: var(--gw-bg);
}
.woocommerce div.product .flex-control-thumbs img { aspect-ratio: 1 / 1; object-fit: contain; background: var(--gw-bg); }
.woocommerce div.product .entry-summary,
.woocommerce div.product div.summary { max-width: 600px; }
@media (max-width: 1024px) {
.woocommerce div.product .entry-summary,
.woocommerce div.product div.summary { max-width: none; }
}
/* Preisvorschlag: Produktzeile, Währungs-Suffix, Schnellwahl */
.gw-offer__product {
display: flex; align-items: center; gap: var(--gw-space-3);
margin: 0 0 var(--gw-space-4);
}
.gw-offer__product img {
width: 56px !important; height: 56px !important;
object-fit: contain; background: var(--gw-bg);
border: 1px solid var(--gw-border); border-radius: var(--gw-radius);
padding: 3px; flex: 0 0 auto;
}
.gw-offer__product-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.gw-offer__product-name { font-weight: var(--gw-weight-semibold); color: var(--gw-ink); line-height: 1.3; }
.gw-offer__product-price { color: var(--gw-muted); font-size: var(--gw-fs-300); }
.gw-offer__product-price strong, .gw-offer__product-price .amount { color: var(--gw-gold); }
.gw-offer__input-wrap { position: relative; display: block; }
.gw-offer__input-wrap input { width: 100%; padding-right: 2.2em; }
.gw-offer__currency {
position: absolute; right: var(--gw-space-3); top: 50%; transform: translateY(-50%);
color: var(--gw-muted); font-weight: var(--gw-weight-semibold);
}
.gw-offer__quick { display: flex; flex-wrap: wrap; gap: var(--gw-space-2); }
.gw-offer__quick-btn { cursor: pointer; font-family: var(--gw-font); }
.gw-offer__form button[type="submit"]:disabled { opacity: 0.6; cursor: wait; }
/* Preisvorschlag: Aktions-Buttons nach akzeptiertem Vorschlag */
.gw-offer__actions { display: flex; flex-direction: column; gap: var(--gw-space-2); margin-top: var(--gw-space-4); }
/* Preisvorschlag: Live-Preis + E-Mail-Schritt */
.gw-offer__calc { margin: calc(-1 * var(--gw-space-1)) 0 0; font-size: var(--gw-fs-300); color: var(--gw-muted); }
.gw-offer__calc strong { color: var(--gw-gold); font-size: var(--gw-fs-400); }
.gw-offer__email-hint { margin: 0; font-size: var(--gw-fs-300); color: var(--gw-muted); }
/* Produktseite: mehr Luft zwischen Hauptbild, Thumbnails und Tabs */
.woocommerce div.product .flex-control-thumbs {
gap: var(--gw-space-3);
padding-top: var(--gw-space-4);
}
.woocommerce div.product .woocommerce-tabs { margin-top: var(--gw-space-7); }
.woocommerce div.product .woocommerce-tabs ul.tabs { margin-bottom: var(--gw-space-5); }
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
font-size: var(--gw-fs-500);
font-weight: var(--gw-weight-semibold);
padding: 0 var(--gw-space-1) var(--gw-space-2);
}
/* Kasse: „Haben Sie einen Gutschein?"-Toggle als bewusste Karte.
Ruhe- und Hover-Zustand EXPLIZIT gesetzt (beide!), damit keine fremde
Hover-Regel den Block einfärben kann. */
.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info,
.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info:hover {
display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: var(--gw-space-2);
text-align: left;
background: var(--gw-bg-soft) !important;
color: var(--gw-ink) !important;
border: 1px solid var(--gw-border) !important;
border-radius: var(--gw-radius-lg);
padding: var(--gw-space-4) var(--gw-space-5);
margin-bottom: var(--gw-space-5);
font-size: var(--gw-fs-400);
}
.woocommerce-checkout .woocommerce-form-coupon-toggle .showcoupon,
.woocommerce-checkout .woocommerce-form-coupon-toggle .showcoupon:visited {
color: var(--gw-gold-dark) !important;
background: none !important;
font-weight: var(--gw-weight-semibold);
text-decoration: none;
}
.woocommerce-checkout .woocommerce-form-coupon-toggle .showcoupon:hover,
.woocommerce-checkout .woocommerce-form-coupon-toggle .showcoupon:focus {
color: var(--gw-gold) !important;
background: none !important;
text-decoration: underline;
text-underline-offset: 2px;
}
/* Nur ein Tab („Beschreibung")? Dann ist die Reiter-Leiste sinnlos –
ausblenden; die Panel-Überschrift übernimmt als Sektions-Titel. */
.woocommerce div.product .woocommerce-tabs ul.tabs:has(li:only-child) { display: none; }
.woocommerce div.product .woocommerce-tabs .panel > h2:first-of-type {
margin: 0 0 var(--gw-space-4);
font-size: var(--gw-fs-600);
color: var(--gw-ink);
}
/* Mehr Luft zwischen Hauptbild und Thumbnail-Reihe */
.woocommerce div.product .flex-control-thumbs { padding-top: var(--gw-space-5); }
/* =========================================================================
24. FEINSCHLIFF-PASS – Beschreibung statt Tabs, Ghost-Entfernen,
Shopify-Toast, alle Notices abgesichert (body.gw schlägt WC-Core,
egal in welcher Reihenfolge die Stylesheets laden).
========================================================================= */
/* Beschreibung als eigene Sektion (ersetzt die WC-Tabs) */
.gw-desc { margin-top: var(--gw-space-7); }
.gw-desc > h2 {
margin: 0 0 var(--gw-space-4);
font-size: var(--gw-fs-600); color: var(--gw-ink);
}
.gw-desc__content { max-width: 75ch; line-height: var(--gw-lh); color: var(--gw-ink-2); }
.gw-desc__content p { margin: 0 0 var(--gw-space-4); }
/* Abstand Hauptbild → Thumbnails (robust: padding UND margin) */
body.gw .woocommerce div.product .flex-control-thumbs {
margin-top: var(--gw-space-5);
padding-top: 0;
gap: var(--gw-space-3);
}
/* Entfernen-× als ruhiger Ghost-Button (kein gefüllter Farbkreis) */
body.gw .woocommerce a.remove,
body.gw .gw-cart__remove-btn,
body.gw .gw-mc-item__remove {
background: transparent !important;
border: 1px solid transparent !important;
color: var(--gw-muted) !important;
}
body.gw .woocommerce a.remove:hover,
body.gw .woocommerce a.remove:focus,
body.gw .gw-cart__remove-btn:hover,
body.gw .gw-mc-item__remove:hover {
background: var(--gw-bg-soft) !important;
border-color: var(--gw-border) !important;
color: var(--gw-ink) !important;
}
/* Toast: echtes Shopify-Muster – randlos dunkel, kompakt, Gold-Textlink */
body.gw .woocommerce-message {
background: #1a1a1a !important;
color: #fff !important;
border: none !important;
border-radius: 10px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28);
padding: var(--gw-space-4) var(--gw-space-5);
font-size: var(--gw-fs-400); line-height: 1.5;
max-width: min(400px, calc(100vw - 32px));
}
body.gw .woocommerce-message .button,
body.gw .woocommerce-message a.button {
background: none !important;
border: none !important;
box-shadow: none !important;
transform: none !important;
color: var(--gw-gold-light) !important;
font-weight: var(--gw-weight-semibold);
padding: 0; min-height: 0; margin-left: var(--gw-space-4);
white-space: nowrap;
}
body.gw .woocommerce-message .button:hover { color: var(--gw-gold) !important; text-decoration: underline; text-underline-offset: 2px; }
/* Inline-Notices (Info/Fehler): weiche Karte mit schmaler Akzentkante,
einheitlich für WC + Germanized, gegen Core-CSS abgesichert */
body.gw .woocommerce-info,
body.gw .woocommerce-error {
background: var(--gw-bg-soft) !important;
color: var(--gw-ink) !important;
border: 1px solid var(--gw-border) !important;
border-left: 3px solid var(--gw-gold) !important;
border-radius: var(--gw-radius);
padding: var(--gw-space-3) var(--gw-space-4) !important;
margin-bottom: var(--gw-space-5);
list-style: none;
}
body.gw .woocommerce-error {
border-left-color: var(--gw-danger) !important;
background: var(--gw-danger-soft) !important;
}
body.gw ul.woocommerce-error li { margin: var(--gw-space-1) 0; padding: 0; }
body.gw .woocommerce-info::before, body.gw .woocommerce-info::after,
body.gw .woocommerce-error::before, body.gw .woocommerce-error::after,
body.gw .woocommerce-message::before, body.gw .woocommerce-message::after { content: none !important; display: none !important; }
/* =========================================================================
25. FPF-TOOLTIPS – „?"-Hinweise (Armbandlänge etc.) als Designsystem-
Blase. Text kommt per JS aus dem title-Attribut (data-tip).
========================================================================= */
.fpf-field-tooltip {
position: relative;
display: inline-flex; align-items: center; justify-content: center;
cursor: help;
color: var(--gw-gold-dark);
vertical-align: middle;
}
.fpf-field-tooltip:hover, .fpf-field-tooltip:focus-visible { color: var(--gw-gold); outline: none; }
.fpf-field-tooltip::after {
content: attr(data-tip);
position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%);
width: max-content; max-width: 280px;
background: var(--gw-ink); color: #fff;
padding: var(--gw-space-2) var(--gw-space-3);
border-radius: var(--gw-radius);
font-size: var(--gw-fs-300); font-weight: var(--gw-weight-normal);
line-height: 1.45; text-align: left; white-space: normal;
box-shadow: var(--gw-shadow-lg);
opacity: 0; visibility: hidden;
transition: opacity 0.15s ease;
z-index: 50; pointer-events: none;
}
.fpf-field-tooltip::before {
content: "";
position: absolute; bottom: calc(100% + 4px); left: 50%; transform: translateX(-50%);
border: 6px solid transparent; border-top-color: var(--gw-ink);
opacity: 0; visibility: hidden;
transition: opacity 0.15s ease;
z-index: 50;
}
.fpf-field-tooltip:hover::after, .fpf-field-tooltip:focus::after,
.fpf-field-tooltip:hover::before, .fpf-field-tooltip:focus::before {
opacity: 1; visibility: visible;
}
/* Tooltip darf nicht vom Formular-Container abgeschnitten werden */
.woocommerce div.product form.cart,
.woocommerce div.product form.cart .form-row { overflow: visible; }
/* FPF-Pro-Hinweis („visible to the Store Admin") nie im Frontend zeigen */
.fpf-pro-notice, .fpf-admin-notice, .fpf-fields-container .notice { display: none !important; }