/*
Theme Name: Blocksy Child
Theme URI: https://creativethemes.com/blocksy/
Description: Child-Theme für shopforge-test.local — eigenes WooCommerce-Cart-Design im Funnel-Look (Template-Override woocommerce/cart/cart.php). Cart-Styles sind unter .sfcart gescoped, Funnel-Tokens (.sf-btn, --sf-*) sind wiederverwendbar für den Checkout.
Author: ShopForge
Template: blocksy
Version: 2.11.2
Text Domain: blocksy-child
Domain Path: /languages
*/
/* ==========================================================================
1) FUNNEL-DESIGN-TOKENS (wiederverwendbar — auch für den Checkout)
Fonts: Überschriften/Preise = Plus Jakarta Sans, Fließtext = Inter.
Geladen via functions.php (Google Fonts, nur Cart & Checkout).
========================================================================== */
:root {
--sf-font-heading: "Plus Jakarta Sans", "Inter", sans-serif;
--sf-font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
--sf-ink: #101418; /* Titel, Preise, primäre Texte */
--sf-text: #52575d; /* Fließtext */
--sf-muted: #8a9097; /* Sekundärtext, durchgestrichene Preise */
--sf-line: #e7e7e9; /* dezente Rahmen */
--sf-surface: #f5f5f6; /* Bild-/Flächen-Hintergrund */
--sf-radius-card: 16px;
--sf-radius-control: 12px;
--sf-btn-bg: #111111;
--sf-btn-bg-hover: #000000;
--sf-btn-color: #ffffff;
--sf-btn-radius: 999px; /* Pill wie die Funnel-Buttons */
/* Funnel-Hero-Palette (Sektion 12, Produktseite) — Werte 1:1 aus dem
Funnel-Template (--fnl-*). --sf-surface bleibt die neutrale Fläche
für Cart/Archiv; --sf-cream ist die Signatur-Fläche des Funnels. */
--sf-cream: #f7f4ee;
--sf-cream-2: #f1ede4;
--sf-line-strong: #dcd8cf;
--sf-accent: #e05a3a;
--sf-gold: #f2a83b;
--sf-green: #2f8f5b;
--sf-radius-lg: 24px;
--sf-shadow-sm: 0 1px 2px rgba(20, 22, 28, 0.06), 0 4px 14px rgba(20, 22, 28, 0.05);
}
/* Font-Utilities (opt-in, z. B. für den Checkout) */
.sf-font-heading {
font-family: var(--sf-font-heading);
}
.sf-font-body {
font-family: var(--sf-font-body);
}
/* Funnel-Button: schwarz, Pill, weiße Schrift — wie "In den Warenkorb" */
.sf-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
min-height: 52px;
padding: 15px 30px;
font-family: var(--sf-font-heading);
font-size: 16px;
font-weight: 700;
line-height: 1.2;
letter-spacing: 0.01em;
text-align: center;
text-decoration: none;
color: var(--sf-btn-color);
background: var(--sf-btn-bg);
border: none;
border-radius: var(--sf-btn-radius);
cursor: pointer;
transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
-webkit-tap-highlight-color: transparent;
}
.sf-btn:hover,
.sf-btn:focus {
color: var(--sf-btn-color);
background: var(--sf-btn-bg-hover);
text-decoration: none;
}
.sf-btn:active {
transform: scale(0.985);
}
.sf-btn:focus-visible {
outline: 2px solid var(--sf-ink);
outline-offset: 3px;
}
.sf-btn--block {
display: flex;
width: 100%;
}
/* Sekundär-Variante (z. B. Gutschein anwenden, Warenkorb aktualisieren) */
.sf-btn--ghost,
.sf-btn--ghost:hover,
.sf-btn--ghost:focus {
color: var(--sf-ink);
background: #fff;
border: 1px solid var(--sf-line);
}
.sf-btn--ghost:hover {
border-color: var(--sf-ink);
}
/* ==========================================================================
2) CART (.sfcart) — Grund-Layout
Blocksy macht .ct-woocommerce-cart-form selbst zum Grid; wir übernehmen
das Layout komplett selbst.
========================================================================== */
.sfcart.ct-woocommerce-cart-form {
display: block;
}
.sfcart,
.sfcart-xsells,
.sfcart-sticky {
font-family: var(--sf-font-body);
color: var(--sf-text);
/* Blocksys Link-Farbvariablen im Cart auf neutral/ink stellen */
--theme-link-initial-color: var(--sf-ink);
--theme-link-hover-color: #000000;
}
.sfcart .sfcart-layout {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 28px;
align-items: start;
}
@media (min-width: 1000px) {
.sfcart .sfcart-layout {
grid-template-columns: minmax(0, 1fr) minmax(340px, 400px);
gap: 40px;
}
}
.sfcart .woocommerce-cart-form {
margin: 0;
}
/* ==========================================================================
3) KOPFZEILE (New-Balance-Aufbau) + TOP-CTA + VERSAND-LABEL
========================================================================== */
.sfcart .sfcart-head {
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: space-between;
gap: 6px 16px;
margin: 0 0 16px;
}
.sfcart .sfcart-head__title {
margin: 0;
font-family: var(--sf-font-heading);
font-size: clamp(22px, 2.6vw, 28px);
font-weight: 800;
letter-spacing: -0.02em;
color: var(--sf-ink);
}
.sfcart .sfcart-head__meta {
margin: 0;
display: flex;
align-items: baseline;
gap: 10px;
font-size: 15px;
color: var(--sf-text);
}
/* Meta ("N varer | Summe") nur auf Mobile/Tablet — auf Desktop zeigt die
Bestellübersicht rechts die Summe bereits an. */
@media (min-width: 1000px) {
.sfcart .sfcart-head__meta {
display: none;
}
}
.sfcart .sfcart-head__sep {
color: #d4d4d8;
}
.sfcart .sfcart-head__total {
font-family: var(--sf-font-heading);
font-weight: 700;
font-size: 18px;
color: var(--sf-ink);
white-space: nowrap;
}
/* Kasse-Button direkt unter der Kopfzeile.
Nur Mobile/Tablet — auf Desktop übernimmt der CTA in der
Bestellübersicht (rechte Spalte). Seitlich um den Innenabstand der
Ordreoversigt-Box (24px) eingerückt, damit er exakt so breit ist wie
der "Gå til kassen"-Button darin (Symmetrie beider CTAs). */
.sfcart .sfcart-topcta {
width: auto;
margin: 0 24px 28px;
}
@media (min-width: 1000px) {
.sfcart .sfcart-topcta {
display: none;
}
}
/* "Versand"-Gruppenlabel über der Artikelliste */
.sfcart .sfcart-group {
display: flex;
align-items: center;
gap: 10px;
margin: 0 0 14px;
font-family: var(--sf-font-heading);
font-size: 16px;
font-weight: 700;
color: var(--sf-ink);
}
.sfcart .sfcart-group svg {
flex: none;
}
/* ==========================================================================
4) ARTIKEL-KARTEN (Tabelle → Cards)
Wichtig: Selektoren mit table.cart-Präfix schlagen Blocksys Regeln
([class*="ct-woocommerce"] .shop_table …), die den Layout-Bug verursachten:
- product-thumbnail { width: 120px } → Bild lief in den Titel
- product-quantity/-subtotal/-remove { display: none } unter 1000px
========================================================================== */
.sfcart table.cart,
.sfcart table.cart:first-child {
display: block;
width: 100%;
margin: 0;
border: none;
background: none;
box-shadow: none;
}
.sfcart table.cart thead {
display: none;
}
.sfcart table.cart tbody {
display: flex;
flex-direction: column;
gap: 16px;
}
.sfcart table.cart :is(td, th) {
padding: 0;
border: none;
background: none;
}
/* einzelne Position als Card */
.sfcart table.cart tr.cart_item {
display: grid;
grid-template-columns: 108px minmax(0, 1fr) auto;
grid-template-areas:
"thumb name remove"
"thumb qty subtotal";
column-gap: 18px;
row-gap: 12px;
align-items: start;
background: #fff;
border: 1px solid var(--sf-line);
border-radius: var(--sf-radius-card);
padding: 16px;
box-shadow: 0 1px 2px rgba(16, 20, 24, 0.03);
}
@media (max-width: 559.98px) {
.sfcart table.cart tr.cart_item {
grid-template-columns: 84px minmax(0, 1fr) auto;
column-gap: 14px;
padding: 14px;
}
}
/* Produktbild — feste Spaltenbreite, Blocksys width:120px neutralisieren */
.sfcart table.cart td.product-thumbnail {
grid-area: thumb;
width: auto !important; /* Bugfix: Blocksy erzwingt sonst 120px */
align-self: start;
background: var(--sf-surface);
border-radius: var(--sf-radius-control);
overflow: hidden;
}
.sfcart table.cart td.product-thumbnail a {
display: block;
}
.sfcart table.cart td.product-thumbnail :is(img, .ct-media-container) {
display: block;
width: 100%;
height: auto;
border-radius: 0;
}
/* Weiße Produktfotos verschmelzen mit der grauen Fläche (NB-Look) */
.sfcart table.cart td.product-thumbnail img {
mix-blend-mode: multiply;
}
/* Titel + Variante */
.sfcart table.cart td.product-name {
grid-area: name;
max-width: none;
font-size: 14px;
line-height: 1.5;
color: var(--sf-text);
}
.sfcart .sfcart-item__title {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
font-family: var(--sf-font-heading);
font-size: 16px;
font-weight: 700;
line-height: 1.35;
letter-spacing: -0.01em;
color: var(--sf-ink);
}
.sfcart .sfcart-item__title a {
color: inherit;
text-decoration: none;
}
.sfcart .sfcart-item__title a:hover {
color: var(--sf-ink);
text-decoration: underline;
}
/* Varianten-Zeilen: "Farbe: Silber" / "Größe: 2 TB" */
.sfcart table.cart td.product-name dl.variation {
display: grid;
grid-template-columns: max-content minmax(0, 1fr);
gap: 3px 6px;
margin: 8px 0 0;
font-family: var(--sf-font-body);
font-size: 13px;
line-height: 1.45;
color: var(--sf-muted);
}
.sfcart table.cart td.product-name dl.variation > dt,
.sfcart table.cart td.product-name dl.variation > dd {
margin: 0;
padding: 0;
font-weight: 400;
}
.sfcart table.cart td.product-name dl.variation > dt {
font-weight: 500;
}
.sfcart table.cart td.product-name dl.variation p {
display: inline;
margin: 0;
}
.sfcart table.cart td.product-name .backorder_notification {
display: inline-block;
margin: 8px 0 0;
padding: 5px 10px;
font-size: 12.5px;
color: #92400e;
background: #fef3c7;
border-radius: 8px;
}
/* Mengen-Stepper (+/− um das originale qty-Input herum)
display-Override nötig: Blocksy blendet die Zelle unter 1000px aus */
.sfcart table.cart td.product-quantity {
grid-area: qty;
display: block !important;
align-self: end;
text-align: start;
}
.sfcart .sfcart-qty {
display: inline-flex;
align-items: center;
height: 40px;
border: 1px solid var(--sf-line);
border-radius: var(--sf-radius-control);
background: #fff;
overflow: hidden;
}
.sfcart .sfcart-qty--fixed {
height: auto;
border: none;
background: none;
font-size: 14px;
color: var(--sf-muted);
}
.sfcart .sfcart-qty .sfcart-qty__btn {
width: 36px;
height: 38px;
display: inline-flex;
align-items: center;
justify-content: center;
border: none;
border-radius: 0;
margin: 0;
padding: 0;
background: transparent;
box-shadow: none;
cursor: pointer;
font-family: var(--sf-font-heading);
font-size: 17px;
line-height: 1;
font-weight: 600;
color: var(--sf-text);
transition: background 0.12s ease, color 0.12s ease;
}
.sfcart .sfcart-qty .sfcart-qty__btn:hover {
background: var(--sf-surface);
color: var(--sf-ink);
}
.sfcart .sfcart-qty .sfcart-qty__btn:focus-visible {
outline: 2px solid var(--sf-ink);
outline-offset: -2px;
}
/* das originale Woo/Blocksy-Quantity-Markup innerhalb des Steppers */
.sfcart .sfcart-qty .quantity {
position: relative;
display: inline-flex;
width: auto;
height: auto;
margin: 0;
}
/* Blocksys eigene Pfeil-Overlays ausblenden — wir haben eigene Buttons */
.sfcart .sfcart-qty .quantity .ct-increase,
.sfcart .sfcart-qty .quantity .ct-decrease {
display: none !important;
}
.sfcart .sfcart-qty input.qty {
width: 44px;
height: 38px;
min-height: 0;
margin: 0;
padding: 0 4px;
border: none;
border-radius: 0;
background: transparent;
box-shadow: none;
text-align: center;
font-family: var(--sf-font-heading);
font-size: 15px;
font-weight: 600;
color: var(--sf-ink);
-moz-appearance: textfield;
appearance: textfield;
}
.sfcart .sfcart-qty input.qty::-webkit-outer-spin-button,
.sfcart .sfcart-qty input.qty::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.sfcart .sfcart-qty input.qty:focus {
outline: none;
box-shadow: none;
}
/* Zeilensumme (Preis) — Jakarta; durchgestrichener Alt-Preis in Inter */
.sfcart table.cart td.product-subtotal {
grid-area: subtotal;
display: flex !important;
flex-wrap: wrap;
align-items: baseline;
justify-content: flex-end;
gap: 8px;
align-self: end;
justify-self: end;
font-family: var(--sf-font-heading);
font-weight: 700;
font-size: 16.5px;
color: var(--sf-ink);
text-align: end;
}
.sfcart table.cart td.product-subtotal del {
font-family: var(--sf-font-body);
font-weight: 400;
font-size: 13.5px;
color: var(--sf-muted);
}
/* Mobil: Streichpreis UNTER den aktuellen Preis stapeln. Die Subtotal-Spalte
ist `auto` (max-content) und kann nicht schrumpfen — ein breiter Alt-Preis
neben der Summe ragt sonst in die Mengenleiste (visueller Overlap). */
@media (max-width: 767.98px) {
.sfcart table.cart td.product-subtotal {
flex-direction: column;
align-items: flex-end;
gap: 0;
line-height: 1.35;
}
.sfcart table.cart td.product-subtotal del {
order: 2;
}
}
/* Entfernen (X, oben rechts) */
.sfcart table.cart td.product-remove {
grid-area: remove;
display: flex !important;
justify-content: flex-end;
align-self: start;
width: auto;
}
.sfcart table.cart td.product-remove a.remove {
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
border: 1px solid var(--sf-line);
border-radius: 10px;
color: #5f646a;
background: #fff;
transition: border-color 0.12s ease, color 0.12s ease, background 0.12s ease;
}
.sfcart table.cart td.product-remove a.remove svg {
fill: none;
stroke: currentColor;
}
.sfcart table.cart td.product-remove a.remove:hover {
color: var(--sf-ink);
border-color: var(--sf-ink);
background: #fff;
}
/* ---- Fußzeile der Liste: Gutschein (einklappbar) + Aktualisieren -------- */
.sfcart table.cart tr.sfcart-footer-row {
display: block;
}
.sfcart table.cart td.actions {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
justify-content: space-between;
gap: 14px;
padding: 8px 2px 0;
}
.sfcart .sfcart-coupon {
flex: 1 1 320px;
margin: 0;
}
.sfcart .sfcart-coupon > summary {
display: inline-flex;
align-items: center;
gap: 8px;
cursor: pointer;
list-style: none;
font-family: var(--sf-font-body);
font-weight: 600;
font-size: 14px;
color: var(--sf-ink);
user-select: none;
padding: 10px 0;
}
.sfcart .sfcart-coupon > summary:hover {
text-decoration: underline;
}
.sfcart .sfcart-coupon > summary::-webkit-details-marker {
display: none;
}
.sfcart .sfcart-coupon > summary svg:last-child {
transition: transform 0.15s ease;
}
.sfcart .sfcart-coupon[open] > summary svg:last-child {
transform: rotate(180deg);
}
.sfcart .sfcart-coupon .coupon {
display: flex;
gap: 10px;
margin-top: 10px;
max-width: 440px;
}
.sfcart .sfcart-coupon .coupon .input-text {
flex: 1 1 auto;
min-width: 0;
height: 46px;
border: 1px solid var(--sf-line);
border-radius: var(--sf-radius-control);
font-family: var(--sf-font-body);
font-size: 14.5px;
}
.sfcart .sfcart-coupon .coupon .input-text:focus {
border-color: var(--sf-ink);
}
/* Sekundär-Button im Funnel-Look (weiß, Pill, dezenter Rahmen) */
.sfcart .sfcart-coupon .coupon button[name="apply_coupon"] {
height: 46px;
margin: 0;
padding: 0 22px;
white-space: nowrap;
font-family: var(--sf-font-heading);
font-size: 14.5px;
font-weight: 600;
color: var(--sf-ink);
background: #fff;
border: 1px solid var(--sf-line);
border-radius: var(--sf-btn-radius);
box-shadow: none;
transition: border-color 0.12s ease, color 0.12s ease;
}
.sfcart .sfcart-coupon .coupon button[name="apply_coupon"]:hover {
color: var(--sf-ink);
background: #fff;
border-color: var(--sf-ink);
}
/* "Warenkorb aktualisieren"-Button ausblenden: nicht nötig, da der Stepper
automatisch aktualisiert. Bleibt im DOM, weil cart.js ihn per Klick
auslöst (programmatischer .click() funktioniert auch bei display:none). */
.sfcart table.cart td.actions > button[name="update_cart"] {
display: none;
}
/* ==========================================================================
5) ORDER SUMMARY (rechte Spalte, sticky auf Desktop)
========================================================================== */
.sfcart .sfcart-summary {
min-width: 0;
}
.sfcart .sfcart-summary__inner {
position: sticky;
top: calc(24px + var(--admin-bar, 0px) + var(--header-sticky-height, 0px) * var(--sticky-shrink, 100) / 100);
}
@media (max-width: 999.98px) {
.sfcart .sfcart-summary__inner {
position: static;
}
}
.sfcart .sfcart-summary__box {
background: #fff;
border: 1px solid var(--sf-line);
border-radius: var(--sf-radius-card);
padding: 26px 24px;
box-shadow: 0 1px 2px rgba(16, 20, 24, 0.03), 0 12px 32px rgba(16, 20, 24, 0.05);
}
.sfcart .sfcart-summary__title {
margin: 0 0 6px;
font-family: var(--sf-font-heading);
font-size: 18px;
font-weight: 800;
letter-spacing: -0.01em;
color: var(--sf-ink);
}
/* Blocksys Sticky/Box-Styling der cart_totals neutralisieren */
.sfcart .sfcart-summary .cart_totals {
position: static;
top: auto;
width: 100%;
padding: 0;
border: none;
border-radius: 0;
box-shadow: none;
}
.sfcart .sfcart-summary .cart_totals > h2 {
display: none;
}
.sfcart .sfcart-summary .cart_totals table.shop_table {
display: block;
table-layout: auto;
width: 100%;
margin: 0;
border: none;
background: none;
}
.sfcart .sfcart-summary .cart_totals table.shop_table tbody {
display: block;
}
.sfcart .sfcart-summary .cart_totals table.shop_table :is(td, th) {
padding: 0;
border: none;
background: none;
}
.sfcart .sfcart-summary .cart_totals tr {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 14px;
padding: 12px 0;
border-bottom: 1px dashed var(--sf-line);
}
.sfcart .sfcart-summary .cart_totals tr > th {
flex: 0 0 auto;
font-family: var(--sf-font-body);
font-weight: 500;
font-size: 14.5px;
color: var(--sf-text);
}
.sfcart .sfcart-summary .cart_totals tr > td {
flex: 1 1 auto;
text-align: end;
font-family: var(--sf-font-heading);
font-weight: 600;
font-size: 15px;
color: var(--sf-ink);
padding-inline-start: 0;
}
/* Versand-Zeile (Blocksy formt sie zu einer einzelnen Zelle um) */
.sfcart .sfcart-summary .cart_totals tr.woocommerce-shipping-totals,
.sfcart .sfcart-summary .cart_totals tr.shipping {
display: block;
}
.sfcart .sfcart-summary .cart_totals tr.woocommerce-shipping-totals td,
.sfcart .sfcart-summary .cart_totals tr.shipping td {
display: block;
text-align: start;
font-family: var(--sf-font-body);
font-weight: 400;
}
.sfcart .sfcart-summary .cart_totals .ct-shipping-heading {
font-family: var(--sf-font-body);
font-weight: 600;
font-size: 14.5px;
color: var(--sf-text);
margin-bottom: 8px;
}
.sfcart .sfcart-summary .cart_totals ul#shipping_method {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 8px;
}
.sfcart .sfcart-summary .cart_totals ul#shipping_method li {
margin: 0;
display: flex;
align-items: baseline;
gap: 8px;
font-size: 14px;
}
/*
* Versand-Hinweistext ("Forsendelse vil blive opdateret, når du går videre til
* siden Kasse.") und der komplette Versandrechner ("Beregn forsendelse"-Link +
* Land/By/Postnummer-Formular) werden ausgeblendet. Sichtbar bleibt nur die
* Versandmethode selbst ("Gratis forsendelse"). Gilt für Desktop und Mobile —
* die Cart-Summary ist auf beiden dieselbe Sektion.
*/
.sfcart .sfcart-summary .cart_totals .woocommerce-shipping-destination,
.sfcart .sfcart-summary .cart_totals .woocommerce-shipping-calculator {
display: none;
}
/* Gutschein-Zeilen (angewendete Coupons) */
.sfcart .sfcart-summary .cart_totals tr.cart-discount td .woocommerce-remove-coupon {
display: inline-block;
margin-inline-start: 8px;
font-family: var(--sf-font-body);
font-size: 12.5px;
font-weight: 500;
color: #dc2626;
}
/* Gesamtsumme prominent */
.sfcart .sfcart-summary .cart_totals tr.order-total {
border-bottom: none;
border-top: 2px solid #16191d1f;
margin-top: 6px;
padding-top: 16px;
}
.sfcart .sfcart-summary .cart_totals tr.order-total > th {
font-family: var(--sf-font-heading);
font-weight: 700;
font-size: 16px;
color: var(--sf-ink);
}
.sfcart .sfcart-summary .cart_totals tr.order-total > td {
font-family: var(--sf-font-heading);
font-weight: 800;
font-size: 22px;
letter-spacing: -0.01em;
}
.sfcart .sfcart-summary .cart_totals tr.order-total > td small {
display: block;
font-family: var(--sf-font-body);
font-size: 12px;
font-weight: 400;
color: var(--sf-muted);
}
/* CTA in der Summary — gleicher Funnel-Look wie .sf-btn */
.sfcart .sfcart-summary .cart_totals .wc-proceed-to-checkout {
margin: 20px 0 0;
padding: 0;
}
.sfcart .sfcart-summary .cart_totals .wc-proceed-to-checkout .checkout-button {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 52px;
margin: 0;
padding: 15px 24px;
font-family: var(--sf-font-heading);
font-size: 16px;
font-weight: 700;
letter-spacing: 0.01em;
color: var(--sf-btn-color);
background: var(--sf-btn-bg);
border: none;
border-radius: var(--sf-btn-radius);
box-shadow: none;
text-decoration: none;
transition: background 0.15s ease;
}
.sfcart .sfcart-summary .cart_totals .wc-proceed-to-checkout .checkout-button:hover {
color: var(--sf-btn-color);
background: var(--sf-btn-bg-hover);
}
/* Trust-Elemente */
.sfcart .sfcart-trust {
margin-top: 20px;
padding-top: 18px;
border-top: 1px solid var(--sf-line);
display: flex;
flex-direction: column;
gap: 14px;
}
.sfcart .sfcart-trust__pay {
display: flex;
}
/* Sammelgrafik mit allen Zahlungsarten (Kachel-Optik steckt bereits im SVG) */
.sfcart .sfcart-trust__pay img {
display: block;
width: 100%;
max-width: 340px;
height: auto;
}
.sfcart .sfcart-trust__points {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 8px;
}
.sfcart .sfcart-trust__points li {
display: flex;
align-items: center;
gap: 9px;
font-size: 13px;
color: var(--sf-text);
}
.sfcart .sfcart-trust__points svg {
flex: none;
color: var(--sf-ink);
}
/* ==========================================================================
6) CROSS-SELLS
========================================================================== */
.sfcart-xsells .cross-sells {
margin-top: 52px;
}
.sfcart-xsells .cross-sells > h2 {
margin: 0 0 22px;
font-family: var(--sf-font-heading);
font-size: clamp(18px, 2vw, 22px);
font-weight: 800;
letter-spacing: -0.01em;
color: var(--sf-ink);
}
/* Raster: einheitliche, kompakte Karten. Blocksys eigenes Grid wird
überschrieben, damit alle Karten gleich breit sind. */
.sfcart-xsells .cross-sells ul.products {
display: grid !important;
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
gap: 18px;
margin: 0;
padding: 0;
list-style: none;
}
@media (max-width: 899.98px) {
.sfcart-xsells .cross-sells ul.products {
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
}
@media (max-width: 599.98px) {
.sfcart-xsells .cross-sells ul.products {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 12px;
}
}
/* Einzelne Karte: flex-Spalte, damit der Button unten bündig andockt */
.sfcart-xsells .cross-sells ul.products li.product {
display: flex;
flex-direction: column;
width: auto;
margin: 0;
padding: 12px;
background: #fff;
border: 1px solid var(--sf-line);
border-radius: var(--sf-radius-control);
box-shadow: none;
text-align: start;
}
.sfcart-xsells .cross-sells ul.products li.product::before,
.sfcart-xsells .cross-sells ul.products li.product::after {
display: none;
}
/* Bild-Box: einheitliche Größe, Motiv wird eingepasst (nicht beschnitten) */
.sfcart-xsells .cross-sells li.product a.woocommerce-loop-product__link {
display: block;
color: inherit;
text-decoration: none;
}
.sfcart-xsells .cross-sells li.product :is(img, .ct-media-container) {
display: block;
width: 100%;
aspect-ratio: 1 / 1;
height: auto;
margin: 0 0 12px;
object-fit: contain;
background: var(--sf-surface);
border-radius: 10px;
mix-blend-mode: multiply;
}
/* Falls das Bild in einen Media-Container gewickelt ist: Motiv einpassen */
.sfcart-xsells .cross-sells li.product .ct-media-container img {
width: 100%;
height: 100%;
margin: 0;
object-fit: contain;
background: none;
border-radius: inherit;
}
/* Titel: max. 2 Zeilen, feste Höhe → Preise/Buttons stehen bündig */
.sfcart-xsells .cross-sells li.product .woocommerce-loop-product__title {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
min-height: 2.7em;
margin: 0 0 6px;
padding: 0;
font-family: var(--sf-font-heading);
font-size: 14px;
font-weight: 700;
line-height: 1.35;
letter-spacing: -0.01em;
color: var(--sf-ink);
}
/* Kategorie-Meta ("UNCATEGORIZED") ausblenden — unnötiges Rauschen */
.sfcart-xsells .cross-sells li.product .entry-meta {
display: none;
}
/* Preis */
.sfcart-xsells .cross-sells li.product .price {
display: block;
margin: 0 0 12px;
font-family: var(--sf-font-heading);
font-size: 14px;
font-weight: 700;
color: var(--sf-ink);
}
.sfcart-xsells .cross-sells li.product .price del {
font-family: var(--sf-font-body);
font-weight: 400;
font-size: 12.5px;
color: var(--sf-muted);
margin-inline-end: 6px;
}
.sfcart-xsells .cross-sells li.product .price ins {
text-decoration: none;
}
/* "Tilføj til kurv"-Button: kompakt, Funnel-Pill, unten bündig */
.sfcart-xsells .cross-sells li.product a.button {
margin-top: auto;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 40px;
padding: 9px 14px;
font-family: var(--sf-font-heading);
font-size: 13.5px;
font-weight: 700;
line-height: 1.2;
color: var(--sf-btn-color);
background: var(--sf-btn-bg);
border: none;
border-radius: var(--sf-btn-radius);
box-shadow: none;
text-align: center;
transition: background 0.15s ease;
}
.sfcart-xsells .cross-sells li.product a.button:hover {
color: var(--sf-btn-color);
background: var(--sf-btn-bg-hover);
}
.sfcart-xsells .cross-sells li.product a.button.added {
pointer-events: none;
}
/* "added to cart"-Zusatzlink (erscheint nach Klick) dezent darunter */
.sfcart-xsells .cross-sells li.product a.added_to_cart {
margin-top: 8px;
font-size: 12.5px;
font-weight: 600;
color: var(--sf-ink);
text-decoration: underline;
text-align: center;
}
/* ==========================================================================
7) STICKY-CTA — entfernt (auf Wunsch). Die fixierte "Gå til kassen"-Bar
unten (nur Mobile/Tablet) ist raus; der Kasse-Button steht bereits oben
und in der Summary-Box. Das Markup .sfcart-sticky bleibt im Cart-Template,
wird hier aber komplett ausgeblendet — cart.js toggelt .is-visible damit
ins Leere. Kein Freiraum für eine fixierte Bar mehr reserviert.
========================================================================== */
.sfcart-sticky {
display: none;
}
/* Nur die Lücke zwischen Inhalt und Footer-Trennlinie leicht straffen. */
@media (max-width: 999.98px) {
body.woocommerce-cart .ct-container-full {
padding-bottom: 24px;
}
}
/* ==========================================================================
8) Hero-Balken (Titel "Cart" + Breadcrumbs) ausblenden. Blocksys
Hero-Section liegt außerhalb von .sfcart; wir blenden sie nur auf der
Warenkorb-Seite aus (body.woocommerce-cart). Das restliche Theme bleibt
unberührt, das Parent-Theme wird nicht angefasst. Die eigene Kopfzeile
"Mein Warenkorb" ersetzt den Titel.
========================================================================== */
body.woocommerce-cart .hero-section {
display: none;
}
/* WooCommerce-Statusmeldungen auf der Warenkorb-Seite ausblenden
("… hinzugefügt", "… entfernt. Rückgängig?", Info-Banner).
Fehlermeldungen (.woocommerce-error, z. B. ungültiger Gutschein)
bleiben sichtbar, damit der Nutzer Feedback bekommt. */
body.woocommerce-cart .woocommerce-message,
body.woocommerce-cart .woocommerce-info {
display: none;
}
/* ==========================================================================
9) SHOP-ARCHIV (Products-Seite + Produktkategorien) — Vorlage-Look.
Markup kommt aus inc/shop-archive.php, Verhalten aus assets/js/shop-archive.js.
Scope: body.post-type-archive-product / body.tax-product_cat — Cart-Cross-Sells
und "Ähnliche Produkte" auf Produktseiten bleiben unberührt.
========================================================================== */
/* --- 4 Spalten ab Desktop (Blocksy-Grid-Variable überschreiben) --- */
@media (min-width: 1024px) {
body.post-type-archive-product [data-products],
body.tax-product_cat [data-products] {
--shop-columns: repeat(4, minmax(0, 1fr)) !important;
}
}
/* Falls Blocksy den Zähler doch rendert: Vorlage hat keinen. */
body.post-type-archive-product .woocommerce-result-count,
body.tax-product_cat .woocommerce-result-count {
display: none;
}
/* Seitenhintergrund: leicht abgesetztes Grau-Blau, damit die weißen
Karten wie in der Vorlage vom Untergrund abheben. */
body.post-type-archive-product,
body.tax-product_cat {
background-color: #f7f8fb;
}
/* Schwarzen Hero-Balken ("Products" + Breadcrumb) entfernen — mobil & Desktop.
Ersatz ist der kompakte .sf-shop-title unter der Trust-Bar (Vorlage-Look). */
body.post-type-archive-product .hero-section,
body.tax-product_cat .hero-section {
display: none;
}
/* Der Transparent-Header wird auf Shop-Archiven per PHP abgeschaltet
(inc/shop-archive.php) → Blocksy rendert dort den normalen weißen Header
wie auf der Einzelprodukt-Seite, kein CSS-Eingriff mehr nötig. */
/* Blocksys Toolbar-Wrapper ist flex (Zähler links / Select rechts). Unsere
Elemente (Trust-Bar → Titel → Pills) sollen wie die Vorlage untereinander
stehen — jedes auf voller Breite. */
body.post-type-archive-product .woo-listing-top,
body.tax-product_cat .woo-listing-top {
display: block;
}
/* Kompakter Seitentitel (wie "iPad" in der Vorlage) */
.sf-shop-title {
font-size: 38px;
font-weight: 800;
line-height: 1.15;
color: var(--sf-ink);
margin: 8px 0 20px;
}
@media (max-width: 767.98px) {
.sf-shop-title {
font-size: 30px;
margin: 4px 0 16px;
}
}
/* --- Trust-Bar --- */
.sf-shop-trust {
background: #edeff4;
border-radius: 14px;
padding: 22px 32px;
margin: 0 0 24px;
overflow: hidden;
}
/* Desktop: nur die erste Gruppe, gleichmäßig verteilt. */
.sf-shop-trust__group {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 14px 28px;
}
.sf-shop-trust__group[aria-hidden] {
display: none;
}
.sf-shop-trust__item {
display: inline-flex;
align-items: center;
gap: 12px;
font-size: 15px;
font-weight: 600;
color: var(--sf-ink);
}
.sf-shop-trust__item svg {
width: 22px;
height: 22px;
flex: none;
}
/* Mobil: eine Zeile ohne Umbruch, läuft als nahtlose Endlos-Slideshow.
Beide (identischen) Gruppen sichtbar; Track wandert um -50% = exakt
eine Gruppenbreite, dadurch springfreier Loop. */
@media (max-width: 767.98px) {
.sf-shop-trust {
padding: 16px 0;
}
.sf-shop-trust__track {
display: flex;
width: max-content;
animation: sf-trust-slide 16s linear infinite;
}
.sf-shop-trust__group,
.sf-shop-trust__group[aria-hidden] {
display: flex;
flex-wrap: nowrap;
gap: 0;
}
.sf-shop-trust__item {
white-space: nowrap;
margin-right: 44px;
font-size: 13.5px;
}
}
@keyframes sf-trust-slide {
to {
transform: translateX(-50%);
}
}
/* --- Toolbar: Pills + Popover --- */
.sf-shop-toolbar {
display: flex;
align-items: center;
gap: 12px;
margin: 0 0 28px;
}
.sf-pill {
position: relative;
}
.sf-pill--sort {
margin-left: auto;
}
.sf-pill__btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 18px;
font-size: 14px;
font-weight: 500;
line-height: 1.2;
white-space: nowrap;
color: var(--sf-ink);
background: #ffffff;
border: 1px solid var(--sf-line);
border-radius: 999px;
cursor: pointer;
transition: background 0.15s ease;
}
.sf-pill__btn strong {
font-weight: 700;
}
.sf-pill__btn:hover,
.sf-pill.is-open .sf-pill__btn,
.sf-pill--active .sf-pill__btn {
background: var(--sf-surface);
}
.sf-pill__btn .sf-chevron {
width: 15px;
height: 15px;
transition: transform 0.15s ease;
}
.sf-pill.is-open .sf-pill__btn .sf-chevron {
transform: rotate(180deg);
}
.sf-pop {
position: absolute;
top: calc(100% + 8px);
left: 0;
z-index: 60;
min-width: 320px;
padding: 20px;
background: #ffffff;
border-radius: 14px;
box-shadow: 0 10px 34px rgba(0, 0, 0, 0.14);
display: none;
}
.sf-pill--sort .sf-pop {
left: auto;
right: 0;
}
.sf-pill.is-open .sf-pop {
display: block;
}
.sf-pop__head {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 14px;
}
.sf-pop__title {
font-size: 17px;
font-weight: 700;
color: var(--sf-ink);
}
.sf-pop__close {
display: inline-flex;
padding: 4px;
border: none;
background: none;
color: var(--sf-ink);
cursor: pointer;
}
.sf-pop__close svg {
width: 18px;
height: 18px;
}
/* Preis-Formular (MIN/MAX wie in der Vorlage) */
.sf-price-fields {
display: flex;
gap: 12px;
margin-bottom: 16px;
}
.sf-price-fields label {
display: block;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.05em;
color: var(--sf-muted);
}
.sf-price-fields input {
display: block;
width: 130px;
margin-top: 6px;
padding: 10px 12px;
font-size: 14px;
color: var(--sf-ink);
border: 1px solid var(--sf-line);
border-radius: 10px;
background: #ffffff;
}
.sf-price-fields input:focus {
outline: none;
border-color: var(--sf-ink);
}
.sf-pop__apply {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
padding: 11px 20px;
font-size: 14px;
font-weight: 700;
color: var(--sf-btn-color);
background: var(--sf-btn-bg);
border: none;
border-radius: 999px;
cursor: pointer;
transition: background 0.15s ease;
}
.sf-pop__apply:hover {
background: var(--sf-btn-bg-hover);
}
/* Sortier-Liste (Radio-Reihen wie in der Vorlage) */
.sf-sort-form {
display: block;
}
.sf-sort-option {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
border-radius: 10px;
font-size: 14.5px;
color: var(--sf-ink);
cursor: pointer;
transition: background 0.12s ease;
}
.sf-sort-option:hover,
.sf-sort-option.is-selected {
background: var(--sf-surface);
}
.sf-sort-option input {
accent-color: #111111;
margin: 0;
flex: none;
}
/* --- Produktkarten: cleane Karte ohne Button/Kategorie-Label --- */
body.post-type-archive-product ul.products li.product,
body.tax-product_cat ul.products li.product {
display: flex;
flex-direction: column;
background: #ffffff;
border: 1px solid #ececee;
border-radius: 14px;
padding: 14px 14px 20px;
transition: box-shadow 0.15s ease;
}
/* Einheitliche Bildfläche: Produktfotos haben gemischte Seitenverhältnisse
(Demo 500×415, Funnel-Importe 1:1 und 4:3). Feste Ratio + object-fit:contain
passt zu große Bilder ein, sodass Titel und Preise aller Karten bündig sind. */
body.post-type-archive-product ul.products li.product figure,
body.tax-product_cat ul.products li.product figure {
margin: 0;
}
body.post-type-archive-product ul.products li.product .ct-media-container,
body.tax-product_cat ul.products li.product .ct-media-container {
width: 100%;
aspect-ratio: 41 / 34; /* wie die 500×415-Bestandsbilder → die bleiben randlos */
}
body.post-type-archive-product ul.products li.product .ct-media-container img,
body.tax-product_cat ul.products li.product .ct-media-container img {
width: 100%;
height: 100%;
object-fit: contain;
}
body.post-type-archive-product ul.products li.product:hover,
body.tax-product_cat ul.products li.product:hover {
box-shadow: 0 8px 28px rgba(0, 0, 0, 0.09);
}
body.post-type-archive-product ul.products li.product .ct-media-container,
body.tax-product_cat ul.products li.product .ct-media-container {
border-radius: 10px;
}
/* Kategorie-Label + Warenkorb-Button raus (Karte wie Vorlage).
Ebenso Blocksys "TILBUD"-Badge auf Sale-Bildern — die Vorlage hat keins,
der Rabatt kommt über den grünen Spar-Chip im Preisblock. */
body.post-type-archive-product ul.products li.product .entry-meta,
body.post-type-archive-product ul.products li.product .ct-woo-card-actions,
body.post-type-archive-product ul.products li.product .onsale,
body.tax-product_cat ul.products li.product .entry-meta,
body.tax-product_cat ul.products li.product .ct-woo-card-actions,
body.tax-product_cat ul.products li.product .onsale {
display: none !important;
}
/* Fetter Titel, prominenter Preis */
body.post-type-archive-product ul.products li.product .woocommerce-loop-product__title,
body.tax-product_cat ul.products li.product .woocommerce-loop-product__title {
font-size: 16px;
font-weight: 700;
line-height: 1.35;
color: var(--sf-ink);
margin-top: 4px;
}
body.post-type-archive-product ul.products li.product .woocommerce-loop-product__title a,
body.tax-product_cat ul.products li.product .woocommerce-loop-product__title a {
color: inherit;
}
/* Preis auf gemeinsame Grundlinie: Karte ist flex-column, margin-top:auto
drückt den Preis in jeder Reihe auf dieselbe Höhe — auch bei 2-zeiligen Titeln. */
body.post-type-archive-product ul.products li.product .price,
body.tax-product_cat ul.products li.product .price {
display: block;
font-size: 19px;
font-weight: 800;
line-height: 1.2;
color: var(--sf-ink);
margin-top: auto;
padding-top: 10px;
/* Sale-Block ist 2-zeilig (65px) — gleiche Höhe für alle, damit die
Hauptpreise einer Reihe auf derselben Linie beginnen. */
min-height: 65px;
}
/* Sale-Preisblock (Vorlage-Look): Preis groß, darunter durchgestrichener
Vergleichspreis + grüner Spar-Chip. Markup aus inc/shop-archive.php. */
.sf-price__now {
display: block;
line-height: 1.2;
}
.sf-price__meta {
display: flex;
align-items: center;
gap: 8px;
margin-top: 6px;
}
.sf-price__was {
font-size: 13.5px;
font-weight: 500;
color: var(--sf-muted);
text-decoration: line-through;
}
.sf-price__save {
font-size: 12.5px;
font-weight: 700;
color: #177245;
background: #e3f5ea;
padding: 3px 9px;
border-radius: 8px;
white-space: nowrap;
}
/* Mobil: beide Pills bündig in EINER Zeile, links ausgerichtet (kein Umbruch,
kein margin-auto) — kompaktere Pills, damit beide bei 390px nebeneinander passen. */
@media (max-width: 767.98px) {
.sf-shop-toolbar {
flex-wrap: nowrap;
gap: 10px;
}
.sf-pill--sort {
margin-left: 0;
}
.sf-pill__btn {
padding: 9px 14px;
font-size: 13px;
}
.sf-pill--sort .sf-pop {
left: auto;
right: 0;
}
.sf-pop {
min-width: 280px;
max-width: calc(100vw - 40px);
}
}
/* --- Mobil: kompakte Listen-Karten wie die Vorlage —
kleines quadratisches Bild links, Titel + Preis rechts. --- */
@media (max-width: 767.98px) {
body.post-type-archive-product [data-products],
body.tax-product_cat [data-products] {
row-gap: 14px !important;
}
body.post-type-archive-product ul.products li.product,
body.tax-product_cat ul.products li.product {
display: grid;
grid-template-columns: 116px 1fr;
grid-template-rows: auto auto;
align-content: center;
column-gap: 16px;
padding: 16px 14px;
}
body.post-type-archive-product ul.products li.product figure,
body.tax-product_cat ul.products li.product figure {
grid-row: 1 / span 2;
align-self: center;
}
body.post-type-archive-product ul.products li.product .ct-media-container,
body.tax-product_cat ul.products li.product .ct-media-container {
width: 116px;
aspect-ratio: 1 / 1;
}
body.post-type-archive-product ul.products li.product .woocommerce-loop-product__title,
body.tax-product_cat ul.products li.product .woocommerce-loop-product__title {
grid-column: 2;
align-self: end;
margin: 0;
font-size: 15px;
text-align: left;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
body.post-type-archive-product ul.products li.product .price,
body.tax-product_cat ul.products li.product .price {
grid-column: 2;
align-self: start;
margin: 6px 0 0;
padding: 0;
font-size: 18px;
text-align: left;
}
}
/* ==========================================================================
10) GLOBALE TYPOGRAFIE — Shop einheitlich zum Funnel-Template.
Blocksy setzt alle Schriften über die CSS-Variable --theme-font-family
(Basis = Systemstack, auf Überschriften = Poppins; generiert in
uploads/blocksy/css/global.css). Wir überschreiben die Variable mit den
Funnel-Fonts: Plus Jakarta Sans für Überschriften, Inter für Fließtext.
Die Google Fonts lädt functions.php seitenweit (Handle sf-funnel-fonts).
Hinweis: spätere Font-Änderungen im Customizer greifen dadurch nicht —
Schriften werden hier zentral gepflegt.
========================================================================== */
:root {
--theme-font-family: var(--sf-font-body);
}
h1,
h2,
h3,
h4,
h5,
h6 {
--theme-font-family: var(--sf-font-heading);
}
/* Produktkarten-Preise: wie im Cart/Funnel in der Heading-Schrift. */
body.post-type-archive-product ul.products li.product .price,
body.tax-product_cat ul.products li.product .price {
font-family: var(--sf-font-heading);
}
/* ==========================================================================
11) FOOTER — heller/weißer Look im Referenz-Stil (Bonvya).
Nur Design/Typografie, INHALT unangetastet (Widgets bleiben variabel).
Spaltenüberschriften (Kontakt/Juridisk/Kundeservice) sind vorhanden, waren
aber in der dunklen Hintergrundfarbe → jetzt sichtbar, klein & uppercase.
Gilt global (Footer ist auf allen Seiten gleich).
========================================================================== */
/* Weißer Grund + dezente Trennlinie zum Inhalt darüber. */
footer#footer,
footer#footer [data-row] {
background-color: #ffffff !important;
}
footer#footer {
border-top: 1px solid var(--sf-line);
/* Blocksy-Farb-Variablen des Footers auf helles Schema drehen. */
--theme-text-color: var(--sf-text);
--theme-link-initial-color: var(--sf-text);
--theme-link-hover-color: var(--sf-ink);
--theme-headings-color: var(--sf-ink);
color: var(--sf-text);
padding-block: 8px;
}
/* Spaltenüberschriften: klein, fett, versal — wie die Vorlage. */
footer#footer .wp-block-heading {
font-family: var(--sf-font-body);
font-size: 14px;
font-weight: 700;
line-height: 1.3;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--sf-ink);
margin: 0 0 16px;
}
/* Links: kleiner, gedämpft, mit sauberem Hover. */
footer#footer a {
font-size: 13px;
font-weight: 400;
line-height: 1.5;
color: var(--sf-text);
text-decoration: none;
transition: color 0.15s ease;
}
footer#footer a:hover,
footer#footer a:focus {
color: var(--sf-ink);
}
/* Firmen-/Adresszeilen. */
footer#footer .wp-block-paragraph,
footer#footer p {
font-size: 13px;
line-height: 1.7;
color: var(--sf-text);
margin: 0 0 6px;
}
/* Link-Listen: dezenter vertikaler Abstand statt zusammengedrängt. */
footer#footer .wp-block-list {
margin: 0;
padding: 0;
list-style: none;
display: flex;
flex-direction: column;
gap: 10px;
}
footer#footer .wp-block-list li {
margin: 0;
}
/* Logo-Spalte: nur das Logo zeigen, den Site-Title-Text darunter ausblenden
(die Vorlage hat keinen Text unter dem Logo). */
footer#footer [data-column="logo"] .site-title-container {
display: none;
}
/* Copyright-Reihe (falls vorhanden): dunkle Schrift auf Weiß. */
footer#footer [data-row="bottom"] {
color: var(--sf-muted);
font-size: 12.5px;
border-top: 1px solid var(--sf-line);
}
/* ==========================================================================
12) PRODUKTSEITE (Single Product) — Funnel-Look
Nur Optik über Blocksys/WCs nativem Markup; PHP-Hooks in
inc/single-product.php, Verhalten in assets/js/single-product.js.
Alles unter body.single-product gescoped (kein Leak in Cart/Archiv).
========================================================================== */
/* ---------- 12.1 Hero-Layout (Galerie + Buybox) ---------- */
/* Spaltenverhältnis ≈ Funnel (1.05fr/1fr, 56px Gap) */
body.single-product .product-entry-wrapper {
--product-gallery-width: 51%;
align-items: flex-start;
padding-top: 16px;
}
@media (min-width: 1000px) {
body.single-product .product-entry-wrapper > .entry-summary {
margin-inline-start: 56px;
width: calc(100% - var(--product-gallery-width, 51%) - 56px);
}
/* Galerie beim Scrollen mitnehmen (wie Funnel-Hero) */
body.single-product .product-entry-wrapper > .woocommerce-product-gallery {
position: sticky;
top: calc(90px + var(--wp-admin--admin-bar--height, 0px));
}
}
/* Lila Sale-Badge auf dem Bild ausblenden — der Rabatt-Pill am Preis übernimmt */
body.single-product .product-entry-wrapper span.onsale {
display: none;
}
/* ---------- 12.2 Galerie: Creme-Stage + Thumbnail-Look ---------- */
/* Stage — deckt beide Markup-Fälle ab: Einzelbild (figure.ct-media-container)
und Flexy-Slider (.flexy-view) */
body.single-product .ct-product-gallery-container > figure.ct-media-container,
body.single-product .ct-product-gallery-container .flexy-view {
border-radius: var(--sf-radius-lg);
background: var(--sf-cream);
overflow: hidden;
box-shadow: var(--sf-shadow-sm);
}
body.single-product .ct-product-gallery-container figure.ct-media-container img {
background: var(--sf-cream);
}
/* Thumbnails: 6er-Grid, abgerundet, aktiv = Ink-Rahmen (wie .fnl-thumb) */
body.single-product .flexy-pills[data-type="thumbs"] ol {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 12px;
margin-top: 14px;
padding: 0;
}
body.single-product .flexy-pills[data-type="thumbs"] ol li {
width: auto; /* Blocksys --thumbs-width:20% würde die Grid-Zelle schrumpfen */
aspect-ratio: 1 / 1;
border: 2px solid transparent;
border-radius: var(--sf-radius-control);
overflow: hidden;
background: var(--sf-cream);
cursor: pointer;
transition: border-color 0.2s ease, transform 0.1s ease;
}
body.single-product .flexy-pills[data-type="thumbs"] ol li .ct-media-container {
width: 100%;
height: 100%;
}
body.single-product .flexy-pills[data-type="thumbs"] ol li img {
width: 100%;
height: 100%;
object-fit: cover;
}
body.single-product .flexy-pills[data-type="thumbs"] ol li:hover {
transform: translateY(-2px);
}
body.single-product .flexy-pills[data-type="thumbs"] ol li.active {
border-color: var(--sf-ink);
}
/* Keine Pfeile auf der Stage (wie Funnel: Wechsel via Thumbs/Swipe/Lightbox);
ebenso die Lupe der Standard-Lightbox — die Funnel-Lightbox übernimmt. */
body.single-product .ct-product-gallery-container [class*="flexy-arrow"],
body.single-product .woocommerce-product-gallery__trigger {
display: none !important;
}
/* Hauptbild ist klickbar (öffnet die Lightbox) */
body.single-product .ct-product-gallery-container .flexy-view,
body.single-product .ct-product-gallery-container > figure.ct-media-container {
cursor: zoom-in;
}
body.single-product .ct-product-gallery-container .flexy-view:focus-visible,
body.single-product .ct-product-gallery-container > figure.ct-media-container:focus-visible {
outline: 2px solid var(--sf-ink);
outline-offset: 3px;
}
/* „+N"-Overlay auf der 6. Kachel, wenn es mehr Bilder als Kacheln gibt
(single-product.js setzt .sf-cap auf .flexy-pills und rendert das Label) */
body.single-product .flexy-pills[data-type="thumbs"] ol li {
position: relative;
}
body.single-product .sf-thumb-more {
position: absolute;
inset: 0;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
background: rgba(20, 18, 15, 0.55);
color: #fff;
font-family: var(--sf-font-heading);
font-weight: 700;
font-size: clamp(15px, 2.1vw, 21px);
letter-spacing: 0.01em;
pointer-events: none; /* Klick geht an die Kachel darunter (öffnet Lightbox) */
}
@media (min-width: 761px) {
body.single-product .flexy-pills.sf-cap ol li:nth-child(n+7) {
display: none;
}
}
/* ---------- 12.2b Lightbox / Bild-Popup (Funnel-Nachbau, .sf-lb) ---------- */
body.single-product .sf-lb {
position: fixed;
inset: 0;
z-index: 100000; /* über Admin-Bar + Trust-Badge */
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
}
body.single-product .sf-lb[hidden] {
display: none;
}
body.single-product .sf-lb__backdrop {
position: absolute;
inset: 0;
background: rgba(20, 18, 15, 0.72);
animation: sf-lb-fade 0.2s ease;
}
body.single-product .sf-lb__dialog {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: minmax(0, 1fr) 224px;
gap: 22px;
width: min(1080px, 100%);
max-height: min(88vh, 880px);
height: min(88vh, 880px);
background: #fff;
border-radius: var(--sf-radius-lg);
padding: 22px;
box-shadow: 0 30px 80px rgba(0, 0, 0, 0.42);
animation: sf-lb-in 0.22s ease;
}
body.single-product .sf-lb__main {
position: relative;
min-width: 0;
display: flex;
align-items: center;
justify-content: center;
background: var(--sf-cream);
border-radius: var(--sf-radius-card);
overflow: hidden;
}
body.single-product .sf-lb__img {
max-width: 100%;
max-height: min(80vh, 820px);
width: auto;
height: auto;
object-fit: contain;
-webkit-user-drag: none;
user-select: none;
}
body.single-product .sf-lb__nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 2;
width: 46px;
height: 46px;
border: none;
border-radius: 50%;
background: rgba(255, 255, 255, 0.92);
color: var(--sf-ink);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
box-shadow: var(--sf-shadow-sm);
transition: transform 0.15s ease, background-color 0.15s ease;
}
body.single-product .sf-lb__nav:hover {
background: #fff;
transform: translateY(-50%) scale(1.06);
}
body.single-product .sf-lb__nav svg {
width: 22px;
height: 22px;
}
body.single-product .sf-lb__nav--prev {
left: 14px;
}
body.single-product .sf-lb__nav--next {
right: 14px;
}
body.single-product .sf-lb__close {
position: absolute;
top: 14px;
right: 14px;
z-index: 2;
width: 40px;
height: 40px;
border: none;
border-radius: 50%;
background: rgba(255, 255, 255, 0.92);
color: var(--sf-ink);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
box-shadow: var(--sf-shadow-sm);
transition: transform 0.15s ease, background-color 0.15s ease;
}
body.single-product .sf-lb__close:hover {
transform: scale(1.06);
background: #fff;
}
body.single-product .sf-lb__close svg {
width: 20px;
height: 20px;
}
body.single-product .sf-lb__side {
min-width: 0;
display: flex;
flex-direction: column;
overflow: hidden;
}
body.single-product .sf-lb__count {
font-size: 13px;
font-weight: 600;
color: var(--sf-muted);
margin-bottom: 12px;
flex: 0 0 auto;
}
body.single-product .sf-lb__thumbswrap {
display: flex;
align-items: stretch;
flex: 1 1 auto;
min-height: 0;
min-width: 0;
overflow: hidden;
}
body.single-product .sf-lb__thumbs {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
overflow-y: auto;
flex: 1 1 auto;
min-height: 0;
min-width: 0;
padding-right: 4px;
}
body.single-product .sf-lb__thumb {
position: relative;
padding: 0;
border: 2px solid var(--sf-line);
border-radius: var(--sf-radius-control);
overflow: hidden;
background: var(--sf-cream);
cursor: pointer;
aspect-ratio: 1 / 1;
transition: border-color 0.15s ease;
}
body.single-product .sf-lb__thumb img {
width: 100%;
height: 100%;
object-fit: cover;
}
body.single-product .sf-lb__thumb:hover {
border-color: var(--sf-line-strong);
}
body.single-product .sf-lb__thumb.is-active {
border-color: var(--sf-ink);
}
/* Blätter-Pfeile der Thumb-Leiste (nur mobil sichtbar) */
body.single-product .sf-lb__tnav {
display: none;
flex: 0 0 auto;
align-self: center;
width: 34px;
height: 34px;
border: none;
border-radius: 50%;
background: var(--sf-cream);
color: var(--sf-ink);
cursor: pointer;
align-items: center;
justify-content: center;
box-shadow: var(--sf-shadow-sm);
transition: opacity 0.15s ease, transform 0.15s ease, background-color 0.15s ease;
}
body.single-product .sf-lb__tnav svg {
width: 18px;
height: 18px;
}
body.single-product .sf-lb__tnav:hover:not(.is-disabled) {
background: var(--sf-cream-2);
transform: scale(1.05);
}
body.single-product .sf-lb__tnav.is-disabled {
opacity: 0.35;
cursor: default;
pointer-events: none;
}
@keyframes sf-lb-fade {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes sf-lb-in {
from { opacity: 0; transform: translateY(8px) scale(0.99); }
to { opacity: 1; transform: none; }
}
/* Mobil: Vollbild-Dialog, Thumbs als horizontaler Strip mit Blätter-Pfeilen */
@media (max-width: 760px) {
body.single-product .sf-lb {
padding: 0;
}
body.single-product .sf-lb__dialog {
grid-template-columns: 1fr;
grid-template-rows: minmax(0, 1fr) auto;
gap: 14px;
width: 100%;
max-height: 100%;
height: 100%;
border-radius: 0;
padding: 16px;
}
body.single-product .sf-lb__main {
touch-action: pan-y;
}
body.single-product .sf-lb__side {
max-height: none;
flex: 0 0 auto;
overflow: visible;
}
body.single-product .sf-lb__thumbswrap {
align-items: center;
gap: 8px;
overflow: visible;
}
body.single-product .sf-lb__tnav {
display: inline-flex;
}
body.single-product .sf-lb__thumbs {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
gap: 10px;
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x proximity;
-webkit-overflow-scrolling: touch;
overscroll-behavior-x: contain;
scrollbar-width: none;
-ms-overflow-style: none;
padding: 2px 0;
}
body.single-product .sf-lb__thumbs::-webkit-scrollbar {
display: none;
}
body.single-product .sf-lb__thumb {
flex: 0 0 72px;
width: 72px;
scroll-snap-align: start;
scroll-snap-stop: always;
}
body.single-product .sf-lb__nav {
display: none;
}
}
@media (prefers-reduced-motion: reduce) {
body.single-product .sf-lb__backdrop,
body.single-product .sf-lb__dialog {
animation: none;
}
}
/* ---------- 12.3 Trustpilot-Block über dem Titel ---------- */
body.single-product .sf-tp {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 7px;
margin-bottom: 16px;
}
body.single-product .sf-tp__logo {
height: 24px;
width: auto;
display: block;
}
body.single-product .sf-tp__row {
display: inline-flex;
align-items: center;
gap: 9px;
}
body.single-product .sf-tp__stars {
height: 19px;
width: auto;
display: block;
flex-shrink: 0;
}
body.single-product .sf-tp__text {
font-family: var(--sf-font-body);
font-size: 13px;
line-height: 1;
color: var(--sf-text);
}
body.single-product .sf-tp__text strong {
color: var(--sf-ink);
font-weight: 700;
}
/* ---------- 12.4 Titel + Kurzbeschreibung (Subtitle) ---------- */
body.single-product h1.product_title {
font-family: var(--sf-font-heading);
font-size: clamp(30px, 4.4vw, 46px);
font-weight: 800;
line-height: 1.15;
letter-spacing: -0.01em;
color: var(--sf-ink);
margin-bottom: 10px;
}
body.single-product .entry-summary .woocommerce-product-details__short-description {
color: var(--sf-text);
font-size: 17px;
line-height: 1.6;
max-width: 46ch;
margin-bottom: 6px;
}
/* ---------- 12.5 Preis-Block ---------- */
body.single-product .entry-summary .price {
display: flex;
align-items: baseline;
gap: 12px;
flex-wrap: wrap;
margin: 16px 0 0;
}
/* Aktueller Preis (ins bei Sale, sonst der einzelne amount) */
body.single-product .entry-summary .price .woocommerce-Price-amount {
font-family: var(--sf-font-heading);
font-size: 34px;
font-weight: 800;
color: var(--sf-ink);
}
body.single-product .entry-summary .price ins {
text-decoration: none;
background: none;
}
/* Alter Preis: klein, muted, durchgestrichen */
body.single-product .entry-summary .price del {
text-decoration: none;
order: 2;
}
body.single-product .entry-summary .price del .woocommerce-Price-amount {
font-family: var(--sf-font-body);
font-size: 18px;
font-weight: 400;
color: var(--sf-muted);
text-decoration: line-through;
}
/* WC sortiert del vor ins — im Funnel steht der Aktionspreis zuerst */
body.single-product .entry-summary .price .sale-price {
display: inline-flex;
align-items: baseline;
gap: 12px;
flex-wrap: wrap;
}
body.single-product .entry-summary .price ins {
order: 1;
}
/* Rabatt-Pill „−72 %" (via woocommerce_get_price_html angehängt) */
body.single-product .sf-price-save {
order: 3;
font-family: var(--sf-font-body);
font-size: 13px;
font-weight: 700;
color: var(--sf-accent);
background: rgba(224, 90, 58, 0.1);
padding: 4px 10px;
border-radius: 999px;
align-self: center;
white-space: nowrap;
}
/* Steuer-/Frachthinweis unterm Preis */
body.single-product .sf-taxnote {
font-size: 13px;
color: var(--sf-muted);
margin: 6px 0 0;
}
/* Varianten-Preis unter den Varianten ausblenden — der Produktpreis steht
bereits oben unter dem Titel und spiegelt dort die aktive Variante
(single-product.js → found_variation). Kein doppelter Preis. */
body.single-product .woocommerce-variation-price {
display: none;
}
body.single-product .woocommerce-variation-availability {
font-size: 13.5px;
color: var(--sf-text);
}
/* ---------- 12.6 Kaufbereich: Menge, Lager, CTA, Microtrust, Payments ---------- */
body.single-product .ct-cart-actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 16px 18px;
margin-top: 26px;
width: 100%;
}
/* „Antal"-Label vor dem Stepper (reines Design-Element wie im Funnel) */
body.single-product .ct-cart-actions::before {
content: "Antal";
order: 0;
font-weight: 600;
font-size: 14.5px;
color: var(--sf-ink);
}
/* Mengen-Stepper als Pill */
body.single-product .ct-cart-actions .quantity {
order: 1;
border: 1px solid var(--sf-line-strong);
border-radius: 999px;
overflow: hidden;
background: #fff;
}
body.single-product .ct-cart-actions .quantity .qty {
border: none;
background: transparent;
font-weight: 600;
color: var(--sf-ink);
}
/* Lagerhinweis mit Puls-Punkt — darf schrumpfen, damit er neben dem
Stepper bleibt statt umzubrechen */
body.single-product .sf-stock {
order: 2;
display: inline-flex;
align-items: center;
gap: 8px;
flex: 1 1 0;
min-width: 0;
font-size: 13.5px;
font-weight: 600;
line-height: 1.35;
color: var(--sf-gold);
}
body.single-product .sf-stock__dot {
width: 9px;
height: 9px;
border-radius: 50%;
background: var(--sf-gold);
box-shadow: 0 0 0 4px rgba(242, 168, 59, 0.18);
animation: sf-stock-pulse 1.6s ease-in-out infinite;
}
@keyframes sf-stock-pulse {
0%, 100% { box-shadow: 0 0 0 4px rgba(242, 168, 59, 0.18); }
50% { box-shadow: 0 0 0 4px rgba(242, 168, 59, 0.38); }
}
/* CTA: schwarzer Voll-Pill-Button mit Hover-Lift (wie .fnl-cta) */
body.single-product .entry-summary .single_add_to_cart_button {
order: 3;
flex: 1 1 100%;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 17px 24px;
border: none;
border-radius: 999px;
background: var(--sf-btn-bg) !important;
color: var(--sf-btn-color) !important;
font-family: var(--sf-font-heading);
font-size: 16px;
font-weight: 700;
box-shadow: 0 8px 22px rgba(23, 24, 28, 0.18);
transition: transform 0.12s ease, background 0.2s ease, box-shadow 0.2s ease;
}
body.single-product .entry-summary .single_add_to_cart_button:hover {
background: #26282e !important;
transform: translateY(-2px);
box-shadow: 0 12px 28px rgba(23, 24, 28, 0.24);
}
body.single-product .entry-summary .single_add_to_cart_button:active {
transform: translateY(0);
}
/* Warenkorb-Icon vor dem Button-Text (SVG als Mask, currentColor-fähig) */
body.single-product .entry-summary .single_add_to_cart_button::before {
content: "";
width: 20px;
height: 20px;
flex: 0 0 auto;
background: currentColor;
-webkit-mask: url('data:image/svg+xml;utf8,') no-repeat center / contain;
mask: url('data:image/svg+xml;utf8,') no-repeat center / contain;
}
/* Microtrust-Zeile unter dem CTA */
body.single-product .sf-microtrust {
list-style: none;
display: flex;
flex-wrap: wrap;
gap: 8px 20px;
padding: 0;
margin: 20px 0 0;
}
body.single-product .sf-microtrust li {
display: inline-flex;
align-items: center;
gap: 7px;
font-size: 13px;
color: var(--sf-text);
margin: 0;
}
body.single-product .sf-microtrust .sf-ico {
width: 16px;
height: 16px;
flex: 0 0 auto;
color: var(--sf-green);
}
/* Zahlarten-Grafik */
body.single-product .sf-payments {
display: block;
width: 100%;
max-width: 420px;
height: auto;
margin-top: 22px;
}
/* ---------- 12.7 Varianten-Pills (.sfv, Optik-Schicht über den Selects) ---------- */
body.single-product .sfv {
display: flex;
flex-direction: column;
gap: 16px;
margin: 22px 0 4px;
}
body.single-product .sfv-dim {
display: flex;
flex-direction: column;
gap: 9px;
}
body.single-product .sfv-dim-label {
font-size: 14.5px;
font-weight: 600;
color: var(--sf-text);
}
body.single-product .sfv-dim-label b {
color: var(--sf-ink);
font-weight: 700;
}
body.single-product .sfv-opts {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
body.single-product .sfv-btn {
appearance: none;
font-family: inherit;
font-size: 14.5px;
font-weight: 600;
line-height: 1.2;
padding: 11px 18px;
min-height: 44px;
border-radius: 999px;
border: 1.5px solid var(--sf-line-strong);
background: #fff;
color: var(--sf-ink);
cursor: pointer;
transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
body.single-product .sfv-btn:hover {
border-color: var(--sf-ink);
}
body.single-product .sfv-btn.is-active {
border-color: var(--sf-ink);
background: var(--sf-ink);
color: #fff;
box-shadow: var(--sf-shadow-sm);
}
body.single-product .sfv-btn.is-off {
opacity: 0.35;
text-decoration: line-through;
cursor: not-allowed;
}
/* Native Varianten-UI verstecken, sobald die Pills stehen — die Selects
bleiben im DOM voll funktionsfähig (variation.js), nur unsichtbar.
Der Reset-Link („Ryd") bleibt sichtbar. */
body.single-product form.sf-has-pills table.variations,
body.single-product form.sf-has-pills table.variations tbody,
body.single-product form.sf-has-pills table.variations tr,
body.single-product form.sf-has-pills table.variations td {
display: block;
margin: 0;
padding: 0;
border: none;
}
body.single-product form.sf-has-pills table.variations th.label {
display: none;
}
body.single-product form.sf-has-pills table.variations select {
position: absolute !important;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
clip-path: inset(50%);
white-space: nowrap;
}
body.single-product form.sf-has-pills .reset_variations {
display: inline-block;
margin-top: 8px;
font-size: 13px;
color: var(--sf-muted);
text-decoration: underline;
text-underline-offset: 2px;
}
/* ---------- 12.8 Tabs (künftige Produktbeschreibung) ---------- */
body.single-product .woocommerce-tabs ul.wc-tabs li a {
font-family: var(--sf-font-heading);
font-weight: 600;
color: var(--sf-text);
}
body.single-product .woocommerce-tabs ul.wc-tabs li.active a {
color: var(--sf-ink);
}
body.single-product .woocommerce-Tabs-panel {
color: var(--sf-text);
font-size: 15.5px;
line-height: 1.7;
}
/* ---------- 12.9 FAQ-Akkordeon ---------- */
body.single-product .sf-faq {
max-width: 820px;
margin: 64px auto 0;
padding: 0 24px;
}
body.single-product .sf-faq__title {
text-align: center;
font-family: var(--sf-font-heading);
font-size: clamp(26px, 3.4vw, 40px);
font-weight: 800;
color: var(--sf-ink);
margin-bottom: 34px;
}
body.single-product .sf-faq__list {
display: flex;
flex-direction: column;
gap: 12px;
}
body.single-product .sf-acc {
border: 1px solid var(--sf-line);
border-radius: var(--sf-radius-control);
overflow: hidden;
background: #fff;
transition: border-color 0.2s ease;
}
body.single-product .sf-acc.is-open {
border-color: var(--sf-line-strong);
box-shadow: var(--sf-shadow-sm);
}
body.single-product .sf-acc__head {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 20px 22px;
background: transparent;
border: none;
cursor: pointer;
text-align: left;
font-family: var(--sf-font-heading);
font-size: 16px;
font-weight: 600;
color: var(--sf-ink);
}
body.single-product .sf-acc__head:hover {
background: transparent;
color: var(--sf-ink);
}
body.single-product .sf-acc__chev {
width: 22px;
height: 22px;
flex: 0 0 auto;
color: var(--sf-muted);
transition: transform 0.25s ease;
}
body.single-product .sf-acc.is-open .sf-acc__chev {
transform: rotate(180deg);
}
body.single-product .sf-acc__body {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
}
body.single-product .sf-acc__body p {
padding: 0 22px 20px;
margin: 0;
color: var(--sf-text);
font-size: 15px;
}
/* ---------- 12.10 Trust-Bar unter dem Hero (full-bleed Creme-Streifen) ---------- */
body.single-product .sf-ptrust {
margin: 56px calc(50% - 50vw) 0;
background: var(--sf-cream);
border-top: 1px solid var(--sf-line);
border-bottom: 1px solid var(--sf-line);
}
body.single-product .sf-ptrust__grid {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
padding: 28px 24px;
}
body.single-product .sf-ptrust__item {
display: flex;
align-items: center;
gap: 14px;
min-width: 0;
}
body.single-product .sf-ptrust__item > div {
min-width: 0;
}
body.single-product .sf-ptrust__ico {
flex: 0 0 auto;
width: 46px;
height: 46px;
border-radius: 50%;
background: #fff;
border: 1px solid var(--sf-line-strong);
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--sf-ink);
}
body.single-product .sf-ptrust__ico svg {
width: 22px;
height: 22px;
}
body.single-product .sf-ptrust__item strong {
display: block;
font-size: 14.5px;
font-weight: 700;
color: var(--sf-ink);
}
body.single-product .sf-ptrust__item span {
font-size: 12.5px;
color: var(--sf-muted);
}
/* ---------- 12.11 Related-Produkte („Relaterede varer") im Karten-Look ---------- */
body.single-product section.related > h2 {
font-family: var(--sf-font-heading);
font-size: clamp(22px, 2.6vw, 30px);
font-weight: 800;
color: var(--sf-ink);
margin-bottom: 22px;
}
/* Karte wie im Shop-Archiv: weiß, dezenter Rahmen, Hover-Schatten */
body.single-product section.related ul.products li.product {
display: flex;
flex-direction: column;
background: #fff;
border: 1px solid #ececee;
border-radius: 14px;
padding: 14px 14px 20px;
transition: box-shadow 0.15s ease;
}
body.single-product section.related ul.products li.product:hover {
box-shadow: 0 8px 28px rgba(0, 0, 0, 0.09);
}
body.single-product section.related ul.products li.product figure {
margin: 0;
}
body.single-product section.related ul.products li.product .ct-media-container {
width: 100%;
aspect-ratio: 41 / 34;
border-radius: 10px;
}
body.single-product section.related ul.products li.product .ct-media-container img {
width: 100%;
height: 100%;
object-fit: contain;
}
/* Badge, Kategorie-Label und Karten-Button raus (cleane Karte wie Archiv) */
body.single-product section.related ul.products li.product .onsale,
body.single-product section.related ul.products li.product .entry-meta,
body.single-product section.related ul.products li.product .ct-woo-card-actions {
display: none !important;
}
body.single-product section.related ul.products li.product .woocommerce-loop-product__title {
font-size: 16px;
font-weight: 700;
line-height: 1.35;
color: var(--sf-ink);
margin-top: 4px;
}
body.single-product section.related ul.products li.product .woocommerce-loop-product__title a {
color: inherit;
}
body.single-product section.related ul.products li.product .price {
display: flex;
align-items: baseline;
gap: 8px;
flex-wrap: wrap;
font-size: 19px;
font-weight: 800;
line-height: 1.2;
color: var(--sf-ink);
margin-top: auto;
padding-top: 10px;
}
body.single-product section.related ul.products li.product .price ins {
text-decoration: none;
background: none;
order: 1;
}
body.single-product section.related ul.products li.product .price del {
text-decoration: none;
order: 2;
}
body.single-product section.related ul.products li.product .price del .woocommerce-Price-amount {
font-size: 13.5px;
font-weight: 500;
color: var(--sf-muted);
text-decoration: line-through;
}
/* ---------- 12.12 Mobile ---------- */
@media (max-width: 999px) {
body.single-product .product-entry-wrapper > .woocommerce-product-gallery {
position: static;
}
}
@media (max-width: 760px) {
body.single-product .sf-ptrust__grid {
grid-template-columns: 1fr 1fr;
gap: 22px 16px;
}
body.single-product .sf-faq {
margin-top: 44px;
}
/* Thumbnail-Grid mobil: Punkte statt Bilder (wie Funnel-Dots) */
body.single-product .flexy-pills[data-type="thumbs"] ol {
display: flex;
justify-content: center;
align-items: center;
gap: 8px;
}
body.single-product .flexy-pills[data-type="thumbs"] ol li {
width: 7px;
height: 7px;
border: none;
border-radius: 999px;
background: var(--sf-line-strong);
transition: width 0.25s ease, background-color 0.25s ease;
}
body.single-product .flexy-pills[data-type="thumbs"] ol li.active {
width: 22px;
background: var(--sf-ink);
}
body.single-product .flexy-pills[data-type="thumbs"] ol li img,
body.single-product .flexy-pills[data-type="thumbs"] ol li .ct-media-container,
body.single-product .sf-thumb-more {
display: none;
}
}
@media (max-width: 460px) {
body.single-product .sf-ptrust__grid {
grid-template-columns: 1fr;
}
body.single-product .entry-summary .price .woocommerce-Price-amount {
font-size: 30px;
}
}
/* ==========================================================================
13. CHECKOUT (.sfck) — One-Page-Checkout im Funnel-Look
Klassischer Shortcode-Checkout; Markup: woocommerce/checkout/*.php.
Payment-Bereich bleibt WooCommerce-Stock — hier NUR kosmetisches CSS auf
die Stock-Klassen (#payment, .wc_payment_method, .payment_box, #place_order).
========================================================================== */
/* ---------- 13.1 Reduzierter Header (Tunnel) — STRIKT checkout-scoped ------
Alles unter body.woocommerce-checkout: Navigation, Suche & Co. verschwinden,
nur das Logo (Rückweg zum Shop) bleibt. Das Warenkorb-Icon entfernt der
Blocksy-Filter blocksy:header:item-view-path:cart serverseitig
(inc/thankyou.php) — es rendert gar nicht erst. */
body.woocommerce-checkout header#header [data-id^="menu"],
body.woocommerce-checkout header#header [data-id^="search"],
body.woocommerce-checkout header#header [data-id^="button"],
body.woocommerce-checkout header#header [data-id^="account"],
body.woocommerce-checkout header#header .ct-header-account,
body.woocommerce-checkout header#header [data-id="mobile-menu-toggle"],
body.woocommerce-checkout header#header .ct-header-trigger {
display: none !important;
}
/* ---------- 13.2 Seitencontainer ---------- */
body.woocommerce-checkout .sfck,
body.woocommerce-checkout .woocommerce {
font-family: var(--sf-font-body);
color: var(--sf-ink);
}
/* Seitentitel ausblenden — die Sektionsüberschriften führen den Nutzer */
body.woocommerce-checkout .entry-header,
body.woocommerce-checkout .page-title,
body.woocommerce-checkout h1.entry-title {
display: none;
}
/* ---------- 13.3 Zwei-Spalten-Grid (wie Cart) ---------- */
.sfck-cols {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 28px;
/* KEIN align-items:start — die Spalten müssen sich strecken, sonst hat
die sticky Summary keinen Laufraum. */
margin-top: 4px;
}
@media (min-width: 1000px) {
/* Echtes 50/50 (Electrolager-Aufteilung) */
.sfck-cols {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 48px;
}
.sfck-side__inner {
position: sticky;
top: calc(24px + var(--admin-bar, 0px) + var(--header-sticky-height-animated, 0px));
}
}
/* Betaling-Sektion (linke Spalte, unter Levering / hinter der
Leveringsmetode-Karte) */
.sfck-payment {
margin-top: 30px;
}
/* ---------- 13.3b Leveringsmetode-Karte (ausgewählte Versandart) ----------
Sitzt zwischen Levering-Adresse und Betaling. Eine einzige, immer
ausgewählte Option (pro Zone nur Gratis-Versand): Shopify-Muster mit
Akzent-Rahmen + gefülltem Radio, Liefertermin fett, Track & Trace darunter,
Preis rechts. Liefertermin/Preis kommen serverseitig (inc/checkout.php). */
.sfck-ship {
margin-top: 30px;
}
.sfck-ship__option {
display: flex;
align-items: center;
gap: 12px;
padding: 14px 16px;
border: 1.5px solid var(--sf-accent);
border-radius: var(--sf-radius-control);
background: color-mix(in srgb, var(--sf-accent) 5%, #fff);
}
.sfck-ship__radio {
position: relative;
flex-shrink: 0;
width: 18px;
height: 18px;
border-radius: 50%;
border: 1.5px solid var(--sf-accent);
background: #fff;
}
.sfck-ship__radio::after {
content: "";
position: absolute;
inset: 3.5px;
border-radius: 50%;
background: var(--sf-accent);
}
.sfck-ship__body {
display: flex;
flex-direction: column;
gap: 2px;
flex: 1;
min-width: 0;
}
.sfck-ship__title {
font-family: var(--sf-font-body);
font-size: 13px; /* kleiner: passt auf eine Zeile */
font-weight: 600;
line-height: 1.3;
color: var(--sf-ink);
}
.sfck-ship__sub {
font-size: 12px;
line-height: 1.3;
color: var(--sf-muted);
}
/* Rechte Spalte der Karte: Fragtfirma-Logo oben, Preis darunter (rechtsbündig,
Shopify-Muster). Logo kommt aus sf_checkout_shipping_logo(). */
.sfck-ship__aside {
flex-shrink: 0;
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 5px;
}
.sfck-ship__logo {
display: inline-flex;
align-items: center;
}
.sfck-ship__logo-img {
display: block;
max-height: 13px; /* verkleinert (~über die Hälfte von zuvor 22px) */
width: auto;
}
/* Platzhalter, bis ein echtes Logo hinterlegt ist (Filter
sf_checkout_shipping_logo oder assets/img/shipping-carrier.svg). */
.sfck-ship__logo-ph {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 52px;
height: 22px;
padding: 0 8px;
border: 1px dashed var(--sf-muted);
border-radius: 6px;
font-family: var(--sf-font-body);
font-size: 11px;
font-weight: 600;
letter-spacing: .04em;
text-transform: uppercase;
color: var(--sf-muted);
background: #fff;
}
.sfck-ship__price {
font-family: var(--sf-font-body);
font-size: 14px;
font-weight: 700;
letter-spacing: .02em;
color: var(--sf-ink);
}
/* ---------- 13.4 Countdown-Pille „OBS! Varen er næsten udsolgt" ---------- */
/* Eigenständige Pille unter der Ordreoversigt-Leiste (normaler Abstand wie
andere Checkout-Elemente). Farbvarianten über Modifier-Klassen: --red
(Standard), --warm (Amber-Verlauf) und --dark (Anthrazit); Auswahl via
Filter sf_checkout_timer_variant in inc/checkout.php, alle aus --sf-Tokens
per color-mix abgeleitet.
EIN Text auf allen Viewports: das ist Flex-Container mit space-between
→ Satztext links (darf auf max. zwei Zeilen umbrechen, anonymes Flex-Item
mit min-width:0), Timer rechts vertikal zentriert (flex-shrink:0). Die
Pille wächst dabei in der Höhe mit; die absolut positionierte Linie sitzt
unabhängig davon am unteren Rand. Urgency: ablaufende 3px-Linie unten
(scaleX, nur transform) + Puls-Punkt; letzte Minute .is-critical → Rot. */
.sfck-timer {
position: relative;
overflow: hidden;
display: flex;
align-items: center;
gap: 10px;
margin: 0 0 18px;
padding: 12px 16px 14px;
border-radius: var(--sf-radius-control);
font-family: var(--sf-font-body); /* explizit — nie System-Font-Fallback */
font-size: 14px;
font-weight: 500;
line-height: 1.4;
}
/* Grid statt Flex: der Satztext (anonymes Item in der 1fr-Spur) nutzt die
VOLLE verfügbare Breite zum Umbrechen — bei space-between-Flex belegte er
nur seine „bevorzugte" Zeilenbreite und wäre früher (3-zeilig) umgebrochen.
Timer sitzt in der auto-Spur rechts, vertikal zentriert (align-items). */
.sfck-timer__text {
display: grid;
flex: 1;
grid-template-columns: 1fr auto;
align-items: center;
column-gap: 12px;
margin: 0;
min-width: 0; /* 1fr-Spur darf unter die Satz-Maximalbreite schrumpfen */
}
/* Live-Indikator: kleiner Punkt mit sanftem 2s-Puls. flex-start + kleiner
Versatz → sitzt an der ERSTEN Textzeile (nicht mittig zwischen zwei). */
.sfck-timer__dot {
flex: none;
align-self: flex-start;
margin-top: 6px;
width: 7px;
height: 7px;
border-radius: 50%;
animation: sfck-timer-pulse 2s ease-in-out infinite;
transition: background-color 0.6s ease;
}
@keyframes sfck-timer-pulse {
0%, 100% { transform: scale(1); opacity: 1; }
50% { transform: scale(0.7); opacity: 0.5; }
}
/* Timer: Shop-Schrift, semibold, etwas größer, Tabular-Ziffern.
flex-shrink:0 → schrumpft nie, bricht nie um. */
.sfck-timer__count {
flex: none;
font-family: var(--sf-font-body);
font-size: 15.5px;
font-weight: 600;
font-variant-numeric: tabular-nums;
transition: color 0.6s ease;
}
/* Sehr schmale Viewports (≤360px): der lange Satz würde bei 14px auf DREI
Zeilen umbrechen. Etwas kleinere Schrift + engeres Padding schaffen die
Breite, damit er sicher in ZWEI Zeilen passt (390px+ bleibt bei 14px). */
@media (max-width: 374.98px) {
.sfck-timer {
gap: 8px;
padding: 11px 12px 13px;
font-size: 13px;
}
.sfck-timer__text {
column-gap: 10px;
}
.sfck-timer__count {
font-size: 14px;
}
.sfck-timer__dot {
margin-top: 5px;
}
}
/* Ablaufende Linie am unteren Rand — nur transform (kein Layout-Thrashing),
die 1s-Linear-Transition glättet den Sekundentick. */
.sfck-timer__bar {
position: absolute;
left: 0;
bottom: 0;
height: 3px;
width: 100%;
transform-origin: left;
transition: transform 1s linear, background-color 0.6s ease;
}
/* --- Variante A „warm": satter Amber-Verlauf, dunkelbrauner Text --- */
.sfck-timer--warm {
background: linear-gradient(
105deg,
color-mix(in srgb, var(--sf-gold) 86%, #fff) 0%,
color-mix(in srgb, var(--sf-accent) 42%, var(--sf-gold)) 100%
);
color: color-mix(in srgb, #000 74%, var(--sf-gold));
}
.sfck-timer--warm .sfck-timer__count {
color: color-mix(in srgb, #000 84%, var(--sf-gold));
}
.sfck-timer--warm .sfck-timer__dot,
.sfck-timer--warm .sfck-timer__bar {
background: color-mix(in srgb, #000 66%, var(--sf-accent));
}
.sfck-timer--warm.is-critical .sfck-timer__count {
color: color-mix(in srgb, var(--sf-accent) 55%, #6b0f00);
}
.sfck-timer--warm.is-critical .sfck-timer__bar,
.sfck-timer--warm.is-critical .sfck-timer__dot {
background: color-mix(in srgb, var(--sf-accent) 55%, #6b0f00);
}
/* --- Variante C „red" (Standard, User-Wahl): sattes tiefes Rot aus
--sf-accent, weißer Text, weiße Ablauflinie. Letzte Minute vertieft
sich der Hintergrund (Linie/Timer bleiben weiß — kein Blinken). --- */
.sfck-timer--red {
background: linear-gradient(
105deg,
color-mix(in srgb, var(--sf-accent) 88%, #fff) 0%,
color-mix(in srgb, var(--sf-accent) 78%, #5c0c00) 100%
);
color: rgba(255, 255, 255, 0.94);
transition: background 0.6s ease;
}
.sfck-timer--red .sfck-timer__count {
color: #fff;
}
.sfck-timer--red .sfck-timer__dot,
.sfck-timer--red .sfck-timer__bar {
background: rgba(255, 255, 255, 0.85);
}
/* Dezente Spur unter der weißen Ablauflinie, damit der Reststand auf dem
roten Grund als Linie lesbar bleibt (Inset-Shadow statt Extra-Element) */
.sfck-timer--red {
box-shadow: inset 0 -3px 0 rgba(255, 255, 255, 0.22);
}
.sfck-timer--red.is-critical {
background: linear-gradient(
105deg,
color-mix(in srgb, var(--sf-accent) 72%, #5c0c00) 0%,
color-mix(in srgb, var(--sf-accent) 55%, #400800) 100%
);
}
/* --- Variante B „dark": Anthrazit, weißer Text, Amber-Akzente --- */
.sfck-timer--dark {
background: color-mix(in srgb, var(--sf-ink) 94%, var(--sf-gold));
color: rgba(255, 255, 255, 0.92);
}
.sfck-timer--dark .sfck-timer__count,
.sfck-timer--dark .sfck-timer__dot,
.sfck-timer--dark .sfck-timer__bar {
color: var(--sf-gold);
background-color: transparent;
}
.sfck-timer--dark .sfck-timer__dot,
.sfck-timer--dark .sfck-timer__bar {
background-color: var(--sf-gold);
}
.sfck-timer--dark.is-critical .sfck-timer__count {
color: var(--sf-accent);
}
.sfck-timer--dark.is-critical .sfck-timer__dot,
.sfck-timer--dark.is-critical .sfck-timer__bar {
background-color: var(--sf-accent);
}
@media (prefers-reduced-motion: reduce) {
.sfck-timer__dot {
animation: none;
}
.sfck-timer__bar {
transition: none;
}
}
.sfck-h2 {
margin: 0 0 14px;
font-family: var(--sf-font-heading);
font-size: 20px;
font-weight: 700;
color: var(--sf-ink);
}
.sfck-section + .sfck-section {
margin-top: 30px;
}
/* WCs Standard-Überschrift im Billing-Bereich neutralisieren */
.sfck .woocommerce-billing-fields > h3 {
display: none;
}
/* ---------- 13.5 Formularfelder: Floating-Labels (Shopify-Feldsprache) ------
Das native WC-