/* =================================================================
* Zula Kids — WooCommerce-specific styles.
* Inherits design tokens from zulakids.css.
* ================================================================= */
/* Hide Stripe Express Checkout / Payment Request iframes injected globally
* by Stripe.js library on non-checkout pages. The 123x72 dark "stripe"
* widget bottom-right was these iframes initializing as preview/probe.
* Stripe v10 leaves them visible at z-index:99999 even when payment_request=no.
* On the actual checkout page WC checkout block renders Stripe inputs INSIDE
* the form, not as body-level floating iframe — so we can safely hide global ones. */
body:not(.woocommerce-checkout):not(.woocommerce-cart) > iframe[src*="stripe.com"],
body:not(.woocommerce-checkout):not(.woocommerce-cart) > iframe[name*="__privateStripeMetricsController"],
body:not(.woocommerce-checkout):not(.woocommerce-cart) > iframe[src*="hcaptcha"] {
display: none !important;
}
/* -------------------------- Shop layout -------------------------- */
.zk-shop-main { padding: clamp(2rem, 4vw, 4rem) 0; }
.zk-is-shop .zk-shop-main,
.zk-is-product .zk-shop-main { min-height: 60vh; }
.zk-breadcrumbs {
font-size: .85rem; color: var(--zk-text-muted, #666);
margin-bottom: 1.5rem;
}
.zk-breadcrumbs a { color: var(--zk-accent, #C4956A); text-decoration: none; }
.zk-breadcrumbs a:hover { text-decoration: underline; }
.zk-crumb-sep { opacity: .5; }
/* -------------------------- Product grid ------------------------- */
.zk-product-grid,
.woocommerce ul.products,
ul.products {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
gap: clamp(1rem, 2vw, 2rem) !important;
list-style: none !important;
padding: 0 !important;
margin: 0 0 2rem !important;
}
.woocommerce ul.products::before,
.woocommerce ul.products::after,
ul.products::before,
ul.products::after { content: none !important; display: none !important; }
.woocommerce ul.products li.product,
ul.products li.product,
ul.products li {
list-style: none !important;
float: none !important;
width: auto !important;
margin: 0 !important;
clear: none !important;
}
@media (max-width: 900px) {
.zk-product-grid,
.woocommerce ul.products,
ul.products { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 520px) {
.zk-product-grid,
.woocommerce ul.products,
ul.products { grid-template-columns: 1fr !important; }
}
/* v1.8.2 — Matratzen category has only 4 products → force 4-col single row
(avoids 3+1 orphan in default 3-col grid). Tablet: 2×2, mobile: 1-col. */
body.tax-product_cat.term-matratzen .zk-product-grid,
body.tax-product_cat.term-matratzen ul.products {
grid-template-columns: repeat(4, 1fr) !important;
gap: 20px !important;
}
@media (max-width: 1100px) {
body.tax-product_cat.term-matratzen .zk-product-grid,
body.tax-product_cat.term-matratzen ul.products {
grid-template-columns: repeat(2, 1fr) !important;
gap: 24px !important;
}
}
@media (max-width: 520px) {
body.tax-product_cat.term-matratzen .zk-product-grid,
body.tax-product_cat.term-matratzen ul.products {
grid-template-columns: 1fr !important;
}
}
/* Archive header */
.zk-archive-header {
background: var(--zk-cream, #F5F0EB);
padding: clamp(2rem, 4vw, 3.5rem) var(--zk-space-6);
border-radius: var(--zk-radius-lg, 12px);
text-align: center;
margin-bottom: 2rem;
}
.zk-archive-header .zk-page-title,
.zk-archive-header h1 {
font-family: 'Playfair Display', Georgia, serif;
font-size: clamp(1.75rem, 3vw, 2.5rem);
margin: 0;
color: var(--zk-dark, #2C2420);
}
.zk-shop-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
flex-wrap: wrap;
margin-bottom: 1.5rem;
}
.zk-shop-toolbar .woocommerce-result-count { margin: 0; color: var(--zk-brown); font-size: .95rem; }
.zk-shop-toolbar .woocommerce-ordering select {
padding: .5rem 1rem;
border: 1px solid var(--zk-cream-dark, #EDE5DB);
border-radius: 6px;
background: #fff;
font-size: .9rem;
}
.zk-product-card {
background: #fff;
border: 1px solid rgba(43,43,43,.06);
border-radius: 12px;
overflow: hidden;
transition: transform .3s ease, box-shadow .3s ease;
display: flex; flex-direction: column;
height: 100%;
list-style: none;
}
.zk-product-grid { align-items: stretch; }
.zk-product-grid > li { height: 100%; }
.zk-product-card:hover {
transform: translateY(-4px);
box-shadow: 0 20px 40px rgba(43,43,43,.08);
}
.zk-product-card a.woocommerce-loop-product__link,
.zk-product-card a {
color: inherit; text-decoration: none; display: block;
}
/* v2.1.3 — legacy klasy .zk-product-thumb / .zk-product-card-media (jakiś content-product
override mógł je używać) — keep contain consistent. Real definition .zk-product-card-image
jest dalej (linia ~763) v2.1.3 unified. */
.zk-product-card .zk-product-thumb,
.zk-product-card .zk-product-card-media {
position: relative; aspect-ratio: 1 / 1; overflow: hidden;
background: linear-gradient(135deg, #faf6f0 0%, #f5ede3 100%);
display: block;
}
.zk-product-card .zk-product-thumb img,
.zk-product-card .zk-product-card-media img {
width: 100%; height: 100%; object-fit: contain; display: block;
padding: 12px;
transition: transform .6s cubic-bezier(.22,1,.36,1);
}
.zk-product-card:hover .zk-product-thumb img,
.zk-product-card:hover .zk-product-card-media img { transform: scale(1.03); }
.zk-product-card .zk-product-body,
.zk-product-card .zk-product-card-body {
padding: 1rem 1.2rem 1.25rem;
flex: 1 1 auto;
display: flex;
flex-direction: column;
gap: .5rem;
min-height: 0;
}
.zk-product-card .zk-product-card-title { min-height: 2.7em; }
.zk-product-card .zk-product-card-body .zk-btn,
.zk-product-card .zk-product-card-body .button,
.zk-product-card .zk-product-card-body .added_to_cart {
margin-top: auto !important;
width: 100%;
box-sizing: border-box;
text-align: center;
}
.zk-product-card .zk-product-card-title,
.zk-product-card .zk-product-card-title a,
.zk-product-card .zk-product-title {
font-family: 'Playfair Display', Georgia, serif;
font-size: 1.12rem; font-weight: 500; margin: 0; line-height: 1.3;
color: var(--zk-dark, #2C2420);
}
.zk-product-card .zk-product-card-price {
color: var(--zk-accent, #C4956A);
font-weight: 600;
font-size: 1.05rem;
}
.zk-product-card .zk-product-badge {
position: absolute; top: 10px; left: 10px;
background: var(--zk-dark, #2B2B2B); color: #fff;
padding: 4px 10px; font-size: .72rem;
letter-spacing: .05em; text-transform: uppercase;
border-radius: 4px; z-index: 2;
}
.zk-product-card .zk-product-badge--sale { background: var(--zk-red, #C44B4B); }
.zk-product-card .zk-product-badge--new { background: var(--zk-green, #5B8C5A); }
.zk-product-card .zk-product-price,
.zk-product-card .price {
color: var(--zk-accent, #C4956A);
font-weight: 600;
font-size: 1.05rem;
}
.zk-product-card .price del { color: #999; font-weight: 400; margin-right: .4rem; }
.onsale, .zk-badge-sale {
position: absolute; top: 10px; left: 10px;
background: #2B2B2B; color: #fff; padding: 4px 10px;
font-size: .72rem; letter-spacing: .05em; text-transform: uppercase;
border-radius: 4px; z-index: 2;
}
.zk-product-card .button,
.zk-product-card .added_to_cart {
margin-top: auto;
display: inline-block; padding: .6rem 1rem;
background: var(--zk-accent, #C4956A); color: #fff;
border-radius: 6px; font-size: .85rem; text-align: center;
transition: background .2s ease;
border: none; cursor: pointer;
}
.zk-product-card .button:hover { background: #B0825A; }
.zk-stock-low { color: #C4956A; font-weight: 600; font-size: .8rem; }
/* -------------------------- Single product ----------------------- */
.zk-single-product { padding: clamp(2rem, 4vw, 3.5rem) 0; }
.zk-single-product .woocommerce-breadcrumb,
.zk-single-product .zk-breadcrumbs {
grid-column: 1 / -1;
margin-bottom: 1rem;
font-size: var(--zk-text-sm);
color: var(--zk-brown);
}
.zk-single-product .woocommerce-notices-wrapper { grid-column: 1 / -1; }
.zk-single-product .zk-shop-main {
display: block;
}
/* Outer product wrapper — block flow; .zk-product-layout handles the 2-col grid inside. */
.zk-single-product div.product {
display: block;
float: none;
width: 100%;
}
.zk-single-product div.product::before,
.zk-single-product div.product::after { content: none; display: none; }
.zk-single-product div.product > * {
float: none;
clear: both;
}
.zk-single-product div.product .woocommerce-product-gallery {
float: none !important;
width: 100% !important;
margin: 0 !important;
opacity: 1 !important;
position: relative;
}
.zk-single-product div.product .summary {
float: none !important;
width: 100% !important;
margin: 0 !important;
}
.zk-single-product div.product div.images img {
width: 100%;
height: auto;
display: block;
border-radius: var(--zk-radius-lg, 12px);
}
.flex-viewport, .flex-control-nav, .woocommerce-product-gallery__trigger { border-radius: inherit; }
.woocommerce div.product .product_title {
font-family: 'Playfair Display', Georgia, serif;
font-size: clamp(1.7rem, 3vw, 2.4rem);
margin: 0 0 1rem;
}
.woocommerce div.product .price {
color: var(--zk-accent, #C4956A);
font-size: 1.6rem; font-weight: 600; margin-bottom: 1rem;
}
.woocommerce-product-details__short-description { color: #555; margin-bottom: 1.25rem; line-height: 1.65; }
.woocommerce div.product form.cart {
display: flex; gap: .75rem; align-items: center; flex-wrap: wrap;
margin: 1.5rem 0;
}
.woocommerce div.product form.cart .quantity,
.zk-qty {
display: inline-flex; align-items: center; border: 1px solid #ddd; border-radius: 6px; overflow: hidden;
}
.zk-qty-btn {
width: 36px; height: 42px; background: #fafafa; border: 0; font-size: 1.1rem; cursor: pointer; color: #333;
}
.zk-qty-btn:hover { background: #eee; }
.woocommerce .quantity input.qty,
.zk-qty input {
width: 52px; height: 42px; border: 0; text-align: center; font-size: 1rem;
}
.woocommerce div.product form.cart .button,
.woocommerce button.button.alt {
background: var(--zk-accent, #C4956A); color: #fff;
border: none; padding: .85rem 1.6rem; font-size: 1rem;
border-radius: 6px; cursor: pointer;
transition: background .2s ease;
}
.woocommerce div.product form.cart .button:hover,
.woocommerce button.button.alt:hover { background: #B0825A; }
.zk-inclusive-tax { font-size: .8rem; color: #777; margin-top: .5rem; }
.woocommerce-tabs {
grid-column: 1 / -1;
margin-top: 3rem;
border-top: 1px solid rgba(43,43,43,.08);
padding-top: 2rem;
}
.woocommerce-tabs ul.tabs {
list-style: none; padding: 0; margin: 0 0 1.5rem;
display: flex; gap: 2rem; border-bottom: 1px solid rgba(43,43,43,.08);
}
.woocommerce-tabs ul.tabs li { padding-bottom: .75rem; }
.woocommerce-tabs ul.tabs li a { color: #888; text-decoration: none; font-weight: 500; font-size: .95rem; letter-spacing: .02em; }
.woocommerce-tabs ul.tabs li.active { border-bottom: 2px solid var(--zk-accent, #C4956A); margin-bottom: -1px; }
.woocommerce-tabs ul.tabs li.active a { color: var(--zk-accent, #C4956A); }
.woocommerce-tabs .panel { padding: 1rem 0; line-height: 1.7; color: #444; }
.woocommerce-tabs .panel > h2:first-child { display: none; }
.woocommerce-tabs .panel a { color: var(--zk-accent, #C4956A); text-decoration: underline; }
.woocommerce-tabs .panel a:hover { color: var(--zk-accent-dark, #A67B52); }
/* Star ratings */
.woocommerce .star-rating {
font-family: 'star'; /* WC's star icon font */
color: var(--zk-accent, #C4956A);
}
.woocommerce p.stars a {
color: var(--zk-accent, #C4956A) !important;
}
.woocommerce p.stars a:hover ~ a,
.woocommerce p.stars:not(:hover) a.active ~ a { color: rgba(196,149,106,.3) !important; }
.woocommerce p.stars a::before,
.woocommerce p.stars a.active::before { color: var(--zk-accent, #C4956A); }
/* Review form + comments */
.woocommerce #reviews { margin-top: 1rem; }
.woocommerce #reviews h2,
.woocommerce #reviews h3 {
font-family: 'Playfair Display', Georgia, serif;
font-size: 1.5rem;
margin: 0 0 1rem;
color: var(--zk-dark, #2C2420);
}
.woocommerce #reviews .comment-reply-title {
font-family: 'Playfair Display', Georgia, serif;
font-size: 1.25rem;
color: var(--zk-dark, #2C2420);
}
.woocommerce #review_form label { display: block; margin: 1rem 0 .4rem; font-weight: 500; font-size: .95rem; color: var(--zk-brown-dark, #5C4F43); }
.woocommerce #review_form textarea {
width: 100%;
min-height: 120px;
padding: .75rem 1rem;
border: 1px solid #ddd;
border-radius: 6px;
font-family: inherit;
font-size: 1rem;
}
.woocommerce #review_form textarea:focus {
outline: none; border-color: var(--zk-accent, #C4956A);
box-shadow: 0 0 0 3px rgba(196,149,106,.12);
}
.woocommerce #review_form .form-submit input[type="submit"],
.woocommerce #review_form input#submit {
background: var(--zk-accent, #C4956A) !important;
color: #fff !important;
border: none;
padding: .75rem 1.5rem;
border-radius: 6px;
font-weight: 600;
cursor: pointer;
margin-top: 1rem;
}
.woocommerce .woocommerce-noreviews { color: var(--zk-brown); padding: .5rem 0; }
.woocommerce a.woocommerce-review-link { color: var(--zk-accent) !important; text-decoration: underline; }
.woocommerce .woocommerce-product-rating { display: flex; align-items: center; gap: .75rem; font-size: .9rem; }
/* Breadcrumb on product page */
.zk-single-product .woocommerce-breadcrumb a,
.zk-single-product .zk-breadcrumbs a { color: var(--zk-accent); text-decoration: none; }
.zk-single-product .woocommerce-breadcrumb a:hover { text-decoration: underline; }
.related.products, .upsells.products {
grid-column: 1 / -1;
margin-top: 3rem;
}
.related.products h2, .upsells.products h2 {
font-family: 'Playfair Display', Georgia, serif;
font-size: 1.6rem; margin-bottom: 1.5rem;
}
/* -------------------------- Cart / Checkout ---------------------- */
/* Hide WC default coupon toggle at top of checkout — coupon entry is in cart.
CSS-hide is belt-and-suspenders on top of remove_action in woocommerce.php. */
.woocommerce-checkout .woocommerce-form-coupon-toggle,
.woocommerce-checkout .checkout_coupon.woocommerce-form-coupon {
display: none !important;
}
.woocommerce-cart .shop_table,
.woocommerce-checkout .shop_table {
width: 100%;
border-collapse: collapse;
background: #fff;
border-radius: 12px;
overflow: hidden;
border: 1px solid rgba(43,43,43,.06);
}
.woocommerce-cart .shop_table th,
.woocommerce-checkout .shop_table th {
background: #fafafa;
font-weight: 600;
padding: 1rem;
text-align: left;
font-size: .88rem; letter-spacing: .02em; text-transform: uppercase; color: #555;
}
.woocommerce-cart .shop_table td,
.woocommerce-checkout .shop_table td {
padding: 1rem;
border-top: 1px solid rgba(43,43,43,.06);
}
.woocommerce-cart-form__cart-item img { width: 64px; height: auto; border-radius: 6px; }
.woocommerce a.remove { color: #999 !important; font-size: 1.2rem; }
.woocommerce a.remove:hover { color: #c0392b !important; background: transparent !important; }
.cart_totals, .woocommerce-checkout-review-order {
background: #fff; padding: 1.5rem; border-radius: 12px;
border: 1px solid rgba(43,43,43,.06);
}
.cart_totals h2, .woocommerce-checkout-review-order h3 {
font-family: 'Playfair Display', Georgia, serif;
font-size: 1.3rem; margin: 0 0 1rem;
}
.woocommerce form.checkout_coupon,
.woocommerce form.login,
.woocommerce form.register {
background: #fafafa; padding: 1.25rem; border-radius: 8px;
border: 1px solid rgba(43,43,43,.06);
margin-bottom: 1rem;
}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
width: 100%;
border: 1px solid #ddd;
padding: .7rem .9rem;
border-radius: 6px;
font-size: 1rem;
background: #fff;
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
outline: none; border-color: var(--zk-accent, #C4956A);
box-shadow: 0 0 0 3px rgba(196,149,106,.12);
}
.woocommerce .wc-proceed-to-checkout .checkout-button,
.woocommerce #place_order {
background: var(--zk-accent, #C4956A); color: #fff;
border: none; padding: 1rem 1.5rem;
font-size: 1.05rem; font-weight: 600;
border-radius: 8px; cursor: pointer; width: 100%;
transition: background .2s ease;
}
.woocommerce .wc-proceed-to-checkout .checkout-button:hover,
.woocommerce #place_order:hover { background: #B0825A; }
/* -------------------------- Account pages ------------------------ */
.woocommerce-account .woocommerce-MyAccount-navigation ul {
list-style: none; padding: 0; margin: 0;
background: #fff; border: 1px solid rgba(43,43,43,.06); border-radius: 12px; overflow: hidden;
}
.woocommerce-account .woocommerce-MyAccount-navigation li a {
display: block; padding: .85rem 1.1rem;
color: #333; text-decoration: none;
border-bottom: 1px solid rgba(43,43,43,.06);
}
.woocommerce-account .woocommerce-MyAccount-navigation li:last-child a { border-bottom: 0; }
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
background: var(--zk-accent, #C4956A); color: #fff;
}
/* -------------------------- Notices ------------------------------ */
/* WC default ma ikonkę info absolute-positioned, która bez padding-left nachodzi
* na pierwsze litery wiadomości. Plus zawsze zostawiamy miejsce na ikonkę. */
.woocommerce-message, .woocommerce-info, .woocommerce-error {
padding: 1rem 1.25rem 1rem 3rem; /* left padding for icon */
border-radius: 8px;
margin: 0 0 1.5rem; list-style: none;
font-size: .95rem;
position: relative;
}
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before {
left: 1rem !important;
top: 50% !important;
transform: translateY(-50%);
position: absolute;
}
.woocommerce-message { background: #f0f7f0; border-left: 4px solid #4a7c3d; color: #2d4f22; }
.woocommerce-info { background: #eef3f8; border-left: 4px solid #4a6fa5; color: #2d3f5f; }
.woocommerce-error { background: #fbecec; border-left: 4px solid #c0392b; color: #7b1f17; }
/* Cart page: gdy cart pusty, custom cart-empty.php już renderuje piękny full-screen
* "Ihr Warenkorb ist leer" z ikoną + 2 CTAs. Domyślny WC notice "Dein Warenkorb ist
* gegenwärtig leer" pod cart-empty.php to duplikat z brzydkim CSS — ukrywamy. */
.woocommerce-cart .woocommerce-notices-wrapper .woocommerce-info.cart-empty {
display: none !important;
}
/* -------------------------- Pagination --------------------------- */
.woocommerce nav.woocommerce-pagination,
nav.woocommerce-pagination {
margin: 56px auto 40px;
padding: 28px 0;
border-top: 1px solid #E8E0D6;
border-bottom: 1px solid #E8E0D6;
text-align: center;
}
.woocommerce nav.woocommerce-pagination ul,
nav.woocommerce-pagination ul.page-numbers {
display: inline-flex !important;
gap: 8px;
list-style: none;
padding: 0;
margin: 0 !important;
justify-content: center;
align-items: center;
border: none !important;
}
.woocommerce nav.woocommerce-pagination ul li,
nav.woocommerce-pagination ul li {
margin: 0 !important;
padding: 0 !important;
border: none !important;
float: none !important;
display: inline-flex !important;
overflow: visible !important;
}
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span,
nav.woocommerce-pagination ul li a,
nav.woocommerce-pagination ul li span {
display: inline-flex !important;
align-items: center;
justify-content: center;
min-width: 44px !important; height: 44px;
padding: 0 14px !important;
font-family: 'Playfair Display', Georgia, serif;
font-size: 16px !important; font-weight: 500 !important;
line-height: 1 !important;
color: #5C4F43 !important;
background: #fff !important;
border: 1px solid #E8E0D6 !important;
border-radius: 999px !important;
text-decoration: none;
transition: all .25s ease;
}
.woocommerce nav.woocommerce-pagination ul li a:hover,
.woocommerce nav.woocommerce-pagination ul li a:focus,
nav.woocommerce-pagination ul li a:hover {
color: var(--zk-accent, #C4956A) !important;
border-color: var(--zk-accent, #C4956A) !important;
background: #FBF7F2 !important;
transform: translateY(-1px);
box-shadow: 0 6px 18px rgba(196, 149, 106, .18);
}
.woocommerce nav.woocommerce-pagination ul li span.current,
nav.woocommerce-pagination ul li span.current {
background: var(--zk-accent, #C4956A) !important;
color: #fff !important;
border-color: var(--zk-accent, #C4956A) !important;
box-shadow: 0 4px 14px rgba(196, 149, 106, .32);
}
.woocommerce nav.woocommerce-pagination ul li .prev,
.woocommerce nav.woocommerce-pagination ul li .next,
nav.woocommerce-pagination ul li .prev,
nav.woocommerce-pagination ul li .next {
font-size: 20px !important;
font-family: 'Inter', -apple-system, sans-serif;
font-weight: 400 !important;
padding: 0 18px !important;
}
.woocommerce nav.woocommerce-pagination ul li .dots,
nav.woocommerce-pagination ul li .dots {
border: none !important; background: transparent !important;
color: #A89585 !important;
min-width: 24px !important; padding: 0 !important;
}
/* ============================================================
CATEGORY / ARCHIVE — 1:1 with shop-v2/kinderbetten.html + matratzen.html
============================================================ */
/* ---- Immersive category hero (v2.1.8 — FULL IMAGE visible, no crop) ----
* Klient (13.05.2026): "tutaj nie wyswietla sie cale zdjecie!!! masz uzyc
* zdjec tak aby na kazda szerokosc sie wyswietlal".
*
* Problem: `zk-hero` (1920×900 CROP=true) plus `object-fit: cover` on portrait
* product photos (1925×2560) cropped the bed to just the headboard area.
*
* Fix: switched PHP to `zk-gallery` (1200×1200 no-crop). CSS: `object-fit:
* contain` so the FULL image is visible at every viewport. Side bars get a
* blurred-image backdrop (sharper than flat color, fills the dark hero edges
* with the same color palette as the product). Overlay still ensures the
* white text + breadcrumb is readable over the image center. */
.zk-cat-hero {
position: relative;
width: 100%;
max-width: var(--zk-container, 1280px);
margin: 0 auto;
aspect-ratio: 16 / 9;
min-height: 340px;
display: flex; align-items: center; justify-content: center;
overflow: hidden;
background: #2C2420;
border-radius: 22px;
}
.zk-cat-hero-bg { position: absolute; inset: 0; overflow: hidden; }
/* Blurred backdrop layer (full-bleed cover, low opacity blur). Created as a
* ::before so we don't need to render the ![]()
twice — same src via CSS bg. */
.zk-cat-hero-bg::before {
content: '';
position: absolute; inset: -10%;
background: inherit;
background-image: var(--zk-cat-hero-bg, none);
background-size: cover;
background-position: center;
filter: blur(28px) brightness(.55) saturate(.85);
z-index: 0;
}
.zk-cat-hero-bg img {
position: relative; z-index: 1;
width: 100%; height: 100%;
object-fit: contain; /* FULL image, no crop */
object-position: center;
display: block;
}
@media (max-width: 1024px) {
.zk-cat-hero { aspect-ratio: 4 / 3; min-height: 320px; }
}
@media (max-width: 768px) {
.zk-cat-hero { aspect-ratio: 4 / 3; min-height: 300px; border-radius: 18px; }
}
@media (max-width: 480px) {
.zk-cat-hero { aspect-ratio: 3 / 4; min-height: 320px; border-radius: 14px; }
}
/* v2.1.8 — Overlay tylko POD TEKSTEM (radial gradient centered), nie na całym
* zdjęciu. Dzięki temu pełen produkt jest widoczny bez tłumienia kolorów,
* a tekst dalej czytelny. */
.zk-cat-hero-overlay {
position: absolute; inset: 0;
background: radial-gradient(ellipse 60% 50% at center, rgba(20,16,12,.55) 0%, rgba(20,16,12,.35) 40%, rgba(20,16,12,0) 70%);
pointer-events: none;
z-index: 2;
}
.zk-cat-hero-content {
position: relative; z-index: 3; text-align: center;
padding: 0 24px; max-width: 900px;
text-shadow: 0 2px 12px rgba(0,0,0,.55); /* v2.1.8 — readable over any image */
}
.zk-cat-hero-content .zk-breadcrumb,
.zk-cat-hero-content .woocommerce-breadcrumb {
display: flex; justify-content: center; flex-wrap: wrap; align-items: center; gap: 6px;
color: rgba(255,255,255,.8); margin-bottom: 20px; font-size: 13px;
}
.zk-cat-hero-content .zk-breadcrumb a,
.zk-cat-hero-content .woocommerce-breadcrumb a { color: rgba(255,255,255,.8); text-decoration: none; }
.zk-cat-hero-content .zk-breadcrumb a:hover,
.zk-cat-hero-content .woocommerce-breadcrumb a:hover { color: #fff; }
.zk-cat-hero-content .zk-breadcrumb svg { stroke: rgba(255,255,255,.6); }
.zk-cat-hero h1 {
font-family: 'Playfair Display', Georgia, serif;
font-size: clamp(36px, 5vw, 56px); color: #fff; font-weight: 600;
margin: 0 0 12px; letter-spacing: -.5px;
text-shadow: 0 2px 12px rgba(0,0,0,.15);
}
.zk-hero-line {
width: 60px; height: 2px; background: var(--zk-accent, #C4956A);
margin: 0 auto 18px;
}
.zk-hero-subtitle {
color: rgba(255,255,255,.92); font-size: 16px; line-height: 1.65;
margin: 0 auto 18px; max-width: 560px;
}
.zk-hero-count {
display: inline-flex; align-items: center; gap: 8px;
padding: 8px 16px; border-radius: 999px;
background: rgba(255,255,255,.15); backdrop-filter: blur(6px);
color: #fff; font-size: 13px; font-weight: 500;
}
.zk-hero-count svg { stroke: var(--zk-accent, #C4956A); }
/* ---- Trust strip ---- */
.zk-cat-trust {
background: #F5F0EB; padding: 22px 16px;
border-bottom: 1px solid #EDE5DB;
}
.zk-cat-trust-inner {
max-width: 1280px; margin: 0 auto;
display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
align-items: center;
}
.zk-cat-trust-item {
display: flex; align-items: center; justify-content: center; gap: 10px;
font-size: 13px; color: #5C4F43;
}
.zk-cat-trust-item svg { color: #8BAF7A; flex-shrink: 0; }
/* ---- Archive wrapper + filter toolbar ---- */
.zk-shop-archive { padding: 40px 0 64px; }
.zk-filter-toolbar {
display: flex; align-items: center; justify-content: space-between;
flex-wrap: wrap; gap: 14px;
padding: 16px 0 24px; margin: 0 0 28px;
border-bottom: 1px solid #EDE5DB;
}
.zk-filter-toolbar .zk-product-count,
.zk-filter-toolbar .woocommerce-result-count {
margin: 0 !important; color: #7A6B5D; font-size: 14px; font-weight: 500;
}
.zk-filter-toolbar .woocommerce-ordering,
.zk-filter-toolbar form.woocommerce-ordering {
margin: 0 !important; float: none !important;
}
.zk-filter-toolbar .orderby,
.zk-filter-toolbar .zk-sort-select {
padding: 9px 36px 9px 14px;
border: 1px solid #e5e0d8; border-radius: 10px; background: #fff;
font-size: 14px; color: #2a2a2a;
cursor: pointer;
-webkit-appearance: none; -moz-appearance: none; appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat; background-position: right 12px center;
}
.zk-filter-toolbar .orderby:focus,
.zk-filter-toolbar .zk-sort-select:focus {
outline: none; border-color: var(--zk-accent, #C4956A);
box-shadow: 0 0 0 2px rgba(196,149,106,.15);
}
/* ---- Product grid (replaces WC ul.products) ---- */
.zk-product-grid,
.zk-product-grid.products {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px;
list-style: none; padding: 0; margin: 0;
}
@media (max-width: 960px) { .zk-product-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .zk-product-grid { grid-template-columns: 1fr; } }
/* ---- Product card (loop) — v1.1.5 modernized ---- */
.zk-product-card {
background: #fff; border-radius: 22px; overflow: hidden;
box-shadow: 0 1px 3px rgba(42,36,32,.04), 0 8px 22px rgba(42,36,32,.03);
transition: transform .4s cubic-bezier(.22,1,.36,1), box-shadow .4s;
display: flex; flex-direction: column;
position: relative;
/* WC adds float:left via .products .product — reset. */
float: none !important; width: auto !important; margin: 0 !important;
border: 1px solid transparent;
}
.zk-product-card::after {
content: ''; position: absolute; inset: 0; border-radius: 22px; pointer-events: none;
box-shadow: 0 0 0 0 rgba(196,149,106,0); transition: box-shadow .4s;
}
.zk-product-card:hover {
transform: translateY(-8px);
box-shadow: 0 30px 60px rgba(42,36,32,.1), 0 6px 14px rgba(42,36,32,.05);
border-color: rgba(196,149,106,.18);
}
.zk-product-card:hover::after { box-shadow: 0 0 0 4px rgba(196,149,106,.06); }
/* v2.1.3 — UNIFIED .zk-product-card-image (poprzedni duplikat usunięty — był sprzeczny z v2.1.0 fix).
Aspect-ratio 1/1, light cream gradient bg, image fills slot z 12px padding, kein brightness filter
(klient: "czarne owalne" — pewnie wynik nadpisanego CSS z brightness + scale + duplikatu) */
.zk-product-card-image {
position: relative;
aspect-ratio: 1 / 1;
overflow: hidden;
background: linear-gradient(135deg, #faf6f0 0%, #f5ede3 100%);
padding: 12px;
border-radius: 12px 12px 0 0;
}
.zk-product-card-image > a {
display: block; width: 100%; height: 100%;
border-radius: inherit;
overflow: hidden;
}
.zk-product-card-image img {
width: 100%;
height: 100%;
object-fit: contain;
object-position: center;
transition: transform .6s cubic-bezier(.22,1,.36,1);
}
.zk-product-card:hover .zk-product-card-image img { transform: scale(1.03); }
@media (max-width: 600px) {
.zk-product-card-image { padding: 8px; }
}
/* Wishlist heart — premium glass morphism */
.zk-product-wishlist {
position: absolute; top: 14px; right: 14px; z-index: 3;
width: 40px; height: 40px; border-radius: 50%;
background: rgba(255,255,255,.82);
border: 1px solid rgba(255,255,255,.5);
cursor: pointer;
display: flex; align-items: center; justify-content: center;
color: #5a4f43; transition: all .3s cubic-bezier(.22,1,.36,1);
backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
box-shadow: 0 2px 10px rgba(42,36,32,.08);
opacity: 0; transform: translateY(-6px);
}
.zk-product-card:hover .zk-product-wishlist { opacity: 1; transform: translateY(0); }
.zk-product-wishlist:hover {
color: var(--zk-red, #C44B4B); transform: scale(1.1) translateY(0);
background: #fff; box-shadow: 0 8px 22px rgba(196,75,75,.2);
}
.zk-product-wishlist:active { transform: scale(.96); }
.zk-product-wishlist svg { width: 18px; height: 18px; }
/* Badge — glass pill on light image, or solid on dark hover */
.zk-product-badge {
position: absolute; top: 16px; left: 16px; z-index: 3;
padding: 6px 14px; border-radius: 999px;
background: rgba(255,255,255,.92);
color: #2a2a2a;
font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
box-shadow: 0 2px 8px rgba(42,36,32,.08);
transition: all .3s;
display: inline-flex; align-items: center; gap: 6px;
}
.zk-product-badge::before {
content: ''; width: 6px; height: 6px; border-radius: 50%;
background: var(--zk-accent, #C4956A);
}
.zk-product-badge--bestseller::before { background: var(--zk-accent, #C4956A); }
.zk-product-badge--beliebt::before { background: #8BAF7A; }
.zk-product-badge--natuerlich::before { background: #7A6B5D; }
.zk-product-badge--sale { background: var(--zk-red, #C44B4B); color: #fff; }
.zk-product-badge--sale::before { background: #fff; }
/* Hover overlay with "Ansehen" CTA — sleeker animation */
/* v2.1.3 — overlay TRANSPARENT (tylko button widoczny, kein dark gradient).
Klient feedback: "po najechaniu czarne owalne zasłania" — eliminacja gradient. */
.zk-product-card-overlay {
position: absolute; inset: 0; z-index: 2;
display: flex; align-items: flex-end; justify-content: center;
padding-bottom: 18px;
background: transparent;
opacity: 0; transition: opacity .25s;
pointer-events: none;
border-radius: 0;
}
.zk-product-card:hover .zk-product-card-overlay { opacity: 1; }
.zk-overlay-btn {
display: inline-flex; align-items: center; gap: 8px;
padding: 12px 28px;
background: rgba(255,255,255,.95); color: #2C2420;
border-radius: 999px; text-decoration: none;
font-weight: 600; font-size: 13px; letter-spacing: .04em;
transform: translateY(14px); transition: transform .35s .05s cubic-bezier(.22,1,.36,1), background .2s, color .2s;
pointer-events: auto;
backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
box-shadow: 0 8px 22px rgba(42,36,32,.2);
}
.zk-overlay-btn::after {
content: '→'; font-size: 16px; transition: transform .25s;
}
.zk-product-card:hover .zk-overlay-btn { transform: translateY(0); }
.zk-overlay-btn:hover { background: var(--zk-dark, #2C2420); color: #fff; }
.zk-overlay-btn:hover::after { transform: translateX(4px); }
/* Info block */
.zk-product-card-info { padding: 22px 24px 26px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.zk-product-collection {
display: inline-block; align-self: flex-start;
font-size: 10.5px; font-weight: 700; letter-spacing: .14em;
text-transform: uppercase; color: var(--zk-accent, #C4956A);
padding: 3px 10px; border-radius: 999px;
background: rgba(196,149,106,.08);
margin-bottom: 2px;
}
.zk-product-name {
font-family: 'Playfair Display', Georgia, serif;
font-size: 21px; font-weight: 600; margin: 0; line-height: 1.25;
letter-spacing: -.01em;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
overflow: hidden;
}
.zk-product-name a { color: var(--zk-dark, #2C2420); text-decoration: none; transition: color .2s; }
.zk-product-name a:hover { color: var(--zk-accent, #C4956A); }
.zk-product-desc {
color: var(--zk-brown, #7A6B5D); font-size: 13.5px; line-height: 1.55;
margin: 4px 0 6px;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
overflow: hidden;
}
.zk-product-price {
font-family: 'Playfair Display', serif; font-size: 22px; font-weight: 600; color: var(--zk-dark, #2C2420);
display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px;
margin-top: auto; padding-top: 4px;
}
.zk-product-price .woocommerce-Price-amount { font-family: inherit; color: var(--zk-dark, #2C2420); }
.zk-product-price > *:first-child { font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 500; color: #999; text-transform: lowercase; letter-spacing: .02em; }
.zk-product-price .vat { font-family: 'Inter', sans-serif; font-size: 11.5px; font-weight: 400; color: #999; }
.zk-product-shipping {
display: inline-flex; align-items: center; gap: 8px;
color: var(--zk-green, #5B8C5A); font-size: 12.5px; font-weight: 500;
padding: 2px 0;
}
.zk-product-shipping svg {
width: 14px; height: 14px; flex-shrink: 0;
padding: 2px; background: rgba(139,175,122,.15); border-radius: 50%;
box-sizing: content-box;
}
/* Filled CTA — invites clicking */
.zk-product-atc,
a.zk-product-atc {
margin-top: 14px;
display: inline-flex !important; align-items: center; justify-content: center;
width: 100%; gap: 8px;
padding: 14px 18px;
border: 1.5px solid var(--zk-accent, #C4956A) !important;
border-radius: 12px;
background: var(--zk-accent, #C4956A) !important;
color: #fff !important;
text-decoration: none !important;
font-family: 'Inter', sans-serif;
font-weight: 600; font-size: 14px; letter-spacing: .03em;
line-height: 1.2; text-align: center;
transition: all .3s cubic-bezier(.22,1,.36,1);
box-sizing: border-box;
position: relative; overflow: hidden;
box-shadow: 0 4px 14px rgba(196,149,106,.22);
}
.zk-product-atc::after {
content: '→'; font-size: 16px; transition: transform .25s;
}
.zk-product-atc:hover,
a.zk-product-atc:hover {
background: var(--zk-accent-dark, #A67B52) !important;
color: #fff !important;
border-color: var(--zk-accent-dark, #A67B52) !important;
transform: translateY(-2px);
box-shadow: 0 10px 26px rgba(166,123,82,.32);
}
.zk-product-atc:hover::after { transform: translateX(4px); }
.zk-product-atc:visited { color: #fff !important; }
.zk-product-atc:visited:hover { color: #fff !important; }
/* ---- USP banner (below product grid) ---- */
.zk-usp-banner { padding: 56px 0; background: #F5F0EB; }
.zk-usp-grid {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px;
max-width: 1180px; margin: 0 auto;
}
.zk-usp-item {
text-align: center; padding: 32px 24px;
background: #fff; border-radius: 16px;
transition: transform .3s, box-shadow .3s;
}
.zk-usp-item:hover { transform: translateY(-4px); box-shadow: 0 12px 30px rgba(42,36,32,.06); }
.zk-usp-icon {
width: 64px; height: 64px; border-radius: 50%;
background: var(--zk-cream, #F5F0EB);
display: flex; align-items: center; justify-content: center;
margin: 0 auto 18px;
}
.zk-usp-icon svg { width: 28px; height: 28px; color: var(--zk-accent, #C4956A); stroke-width: 1.8; fill: none; }
.zk-usp-item h3 {
font-family: 'Playfair Display', serif; font-size: 18px; font-weight: 600;
color: var(--zk-dark, #2C2420); margin: 0 0 10px;
}
.zk-usp-item p { color: var(--zk-brown, #7A6B5D); font-size: 14px; line-height: 1.6; margin: 0; }
@media (max-width: 768px) { .zk-usp-grid { grid-template-columns: 1fr; gap: 20px; } }
/* ---- SEO text block (widened + upgraded typography v1.8.2) ---- */
.zk-seo-text {
max-width: 1080px; margin: 72px auto 48px; padding: 0 8px;
color: var(--zk-brown-dark, #5C4F43); line-height: 1.8; font-size: 16.5px;
}
.zk-seo-text h2,
.zk-seo-text h3 {
font-family: 'Playfair Display', serif; color: var(--zk-dark, #2C2420);
margin: 0 0 22px; font-weight: 600; letter-spacing: -.01em; line-height: 1.25;
}
.zk-seo-text h2 { font-size: clamp(26px, 3vw, 36px); }
.zk-seo-text h3 { font-size: clamp(20px, 2.2vw, 24px); margin-top: 32px; }
.zk-seo-text p { margin: 0 0 18px; }
.zk-seo-text p:last-of-type { margin-bottom: 0; }
.zk-seo-text p + p { text-indent: 0; }
.zk-seo-text strong { color: var(--zk-dark, #2C2420); font-weight: 600; }
.zk-seo-text a { color: var(--zk-accent, #C4956A); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.zk-seo-text a:hover { color: var(--zk-accent-dark, #A67B52); }
/* ---- KINDERBETTEN: extra bottom sections (Collections, FAQ, Beratung) ---- */
.zk-eyebrow {
display: inline-block;
font-size: 12px; font-weight: 600; letter-spacing: .14em;
text-transform: uppercase; color: var(--zk-accent, #C4956A);
margin-bottom: 10px;
}
.zk-cat-collections { padding: 72px 0 56px; background: #fff; }
.zk-cat-collections-header { text-align: center; max-width: 680px; margin: 0 auto 40px; }
.zk-cat-collections-header h2 {
font-family: 'Playfair Display', Georgia, serif;
font-size: clamp(26px, 3vw, 34px); font-weight: 600;
color: var(--zk-dark, #2C2420); margin: 0 0 12px;
}
.zk-cat-collections-header p { color: var(--zk-brown, #7A6B5D); font-size: 16px; line-height: 1.7; margin: 0; }
.zk-cat-collections-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.zk-coll-card {
display: flex; flex-direction: column;
background: #fff; border-radius: 20px; overflow: hidden;
text-decoration: none; color: inherit;
border: 1px solid #EDE5DB;
transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s, border-color .35s;
}
.zk-coll-card:hover {
transform: translateY(-6px);
box-shadow: 0 24px 60px rgba(42,36,32,.12);
border-color: var(--zk-accent, #C4956A);
}
.zk-coll-card-img {
aspect-ratio: 4 / 3; overflow: hidden;
background: linear-gradient(135deg, #faf6f0 0%, #F5F0EB 100%);
}
/* v2.0.7 — contain (pełne zdjęcie kollekcji, kein crop) */
.zk-coll-card-img img {
width: 100%; height: 100%; object-fit: contain; display: block;
padding: 8px;
transition: transform .6s cubic-bezier(.2,.7,.2,1);
}
.zk-coll-card:hover .zk-coll-card-img img { transform: scale(1.04); }
.zk-coll-card-body { padding: 24px 26px 28px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.zk-coll-card-body h3 {
font-family: 'Playfair Display', Georgia, serif; font-size: 22px;
color: var(--zk-dark, #2C2420); font-weight: 600; margin: 0;
}
.zk-coll-card-body p { color: var(--zk-brown, #7A6B5D); font-size: 14.5px; line-height: 1.6; margin: 0; flex: 1; }
.zk-coll-card-cta {
display: inline-flex; align-items: center; gap: 6px;
color: var(--zk-accent, #C4956A); font-weight: 600; font-size: 14px;
margin-top: 10px; letter-spacing: .02em;
transition: gap .25s ease;
}
.zk-coll-card:hover .zk-coll-card-cta { gap: 10px; }
.zk-cat-faq { padding: 72px 0 56px; background: #FBF7F2; }
.zk-cat-faq-header { text-align: center; max-width: 620px; margin: 0 auto 36px; }
.zk-cat-faq-header h2 {
font-family: 'Playfair Display', Georgia, serif;
font-size: clamp(24px, 2.6vw, 30px); font-weight: 600;
color: var(--zk-dark, #2C2420); margin: 0;
}
.zk-cat-faq-list { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.zk-cat-faq-item {
background: #fff; border-radius: 14px; border: 1px solid #EDE5DB;
overflow: hidden; transition: border-color .25s, box-shadow .25s;
}
.zk-cat-faq-item[open] { border-color: var(--zk-accent, #C4956A); box-shadow: 0 10px 28px rgba(42,36,32,.06); }
.zk-cat-faq-item summary {
display: flex; align-items: center; justify-content: space-between;
padding: 20px 24px; cursor: pointer; list-style: none;
font-family: 'Playfair Display', Georgia, serif; font-size: 17px;
color: var(--zk-dark, #2C2420); font-weight: 500;
}
.zk-cat-faq-item summary::-webkit-details-marker { display: none; }
.zk-faq-chevron {
width: 20px; height: 20px; color: var(--zk-taupe, #A89585);
transition: transform .3s ease, color .25s;
flex-shrink: 0; margin-left: 16px;
}
.zk-cat-faq-item[open] .zk-faq-chevron { transform: rotate(180deg); color: var(--zk-accent, #C4956A); }
.zk-cat-faq-body {
padding: 0 24px 22px;
color: var(--zk-brown, #7A6B5D); line-height: 1.7; font-size: 15px;
}
.zk-cat-faq-body p { margin: 0; }
.zk-cat-beratung { padding: 64px 0 80px; background: #fff; }
.zk-cat-beratung-inner {
display: grid; grid-template-columns: 1.4fr 1fr; gap: 56px;
align-items: center;
padding: 48px 56px;
background: linear-gradient(135deg, #F5F0EB 0%, #EDE5DB 100%);
border-radius: 28px;
position: relative; overflow: hidden;
}
.zk-cat-beratung-inner::before {
content: ""; position: absolute; top: -80px; right: -80px;
width: 260px; height: 260px; border-radius: 50%;
background: radial-gradient(circle, rgba(196,149,106,.16), transparent 70%);
pointer-events: none;
}
.zk-cat-beratung-text h2 {
font-family: 'Playfair Display', Georgia, serif;
font-size: clamp(24px, 2.8vw, 32px); font-weight: 600;
color: var(--zk-dark, #2C2420); margin: 0 0 12px; letter-spacing: -.01em;
}
.zk-cat-beratung-text p {
color: var(--zk-brown, #7A6B5D); font-size: 16px; line-height: 1.7; margin: 0;
}
.zk-cat-beratung-actions { display: flex; flex-direction: column; gap: 12px; position: relative; }
.zk-cat-beratung-actions .zk-btn {
display: inline-flex; align-items: center; justify-content: center; gap: 10px;
padding: 15px 28px; border-radius: 999px;
font-family: 'Inter', -apple-system, sans-serif;
font-weight: 600; font-size: 15px; letter-spacing: .01em;
text-decoration: none; transition: all .3s ease;
white-space: nowrap;
}
.zk-cat-beratung-actions .zk-btn-primary {
background: var(--zk-accent, #C4956A); color: #fff;
box-shadow: 0 10px 24px rgba(196,149,106,.28);
}
.zk-cat-beratung-actions .zk-btn-primary:hover {
background: var(--zk-accent-dark, #A67B52);
transform: translateY(-2px);
box-shadow: 0 14px 30px rgba(196,149,106,.38);
}
.zk-cat-beratung-actions .zk-btn-outline {
background: #fff; color: var(--zk-dark, #2C2420);
border: 1.5px solid #D4C5B5;
}
.zk-cat-beratung-actions .zk-btn-outline:hover {
border-color: var(--zk-accent, #C4956A); color: var(--zk-accent, #C4956A);
transform: translateY(-2px);
}
@media (max-width: 900px) {
.zk-cat-collections-grid { grid-template-columns: 1fr; gap: 20px; }
.zk-cat-beratung-inner { grid-template-columns: 1fr; gap: 28px; padding: 36px 28px; text-align: center; }
.zk-cat-beratung-actions { align-items: stretch; }
}
/* ---- MATRATZEN-specific sections (v1.8.2 typography upgrade) ---- */
.zk-why-section { padding: 72px 0 64px; background: #fff; }
.zk-why-header {
text-align: center; max-width: 900px; margin: 0 auto 48px;
}
.zk-why-header h2 {
font-family: 'Playfair Display', serif;
font-size: clamp(28px, 3.6vw, 40px);
color: var(--zk-dark, #2C2420); font-weight: 600;
margin: 0 0 20px; letter-spacing: -.015em; line-height: 1.2;
}
.zk-why-header p {
color: var(--zk-brown-dark, #5C4F43); font-size: clamp(16px, 1.6vw, 18px);
line-height: 1.7; margin: 0; max-width: 720px; margin-left: auto; margin-right: auto;
}
.zk-why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.zk-why-card {
text-align: center; padding: 36px 28px;
background: var(--zk-cream, #F5F0EB); border-radius: 18px;
transition: transform .3s, box-shadow .3s;
}
.zk-why-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(42,36,32,.08); }
.zk-why-icon {
width: 56px; height: 56px; border-radius: 50%;
background: #fff; display: flex; align-items: center; justify-content: center;
margin: 0 auto 20px;
}
.zk-why-icon svg { width: 26px; height: 26px; color: var(--zk-green, #5B8C5A); stroke-width: 2; fill: none; }
.zk-why-card h3 {
font-family: 'Playfair Display', serif; font-size: 19px; font-weight: 600;
color: var(--zk-dark, #2C2420); margin: 0 0 12px;
}
.zk-why-card p { color: var(--zk-brown, #7A6B5D); font-size: 14px; line-height: 1.7; margin: 0; }
@media (max-width: 768px) { .zk-why-grid { grid-template-columns: 1fr; } }
/* Buying guide */
.zk-guide { padding: 64px 0; background: var(--zk-cream, #F5F0EB); }
.zk-guide-header { text-align: center; max-width: 700px; margin: 0 auto 44px; }
.zk-guide-header h2 {
font-family: 'Playfair Display', serif; font-size: clamp(26px, 3vw, 34px);
color: var(--zk-dark, #2C2420); font-weight: 600; margin: 0 0 12px;
}
.zk-guide-header p { color: var(--zk-brown, #7A6B5D); font-size: 15px; margin: 0; }
.zk-guide-steps {
list-style: none; padding: 0; margin: 0;
display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
}
.zk-guide-step {
background: #fff; padding: 28px 22px; border-radius: 16px;
text-align: center; transition: transform .3s, box-shadow .3s;
}
.zk-guide-step:hover { transform: translateY(-4px); box-shadow: 0 16px 34px rgba(42,36,32,.07); }
.zk-guide-step-num {
display: inline-flex; align-items: center; justify-content: center;
width: 44px; height: 44px; border-radius: 50%;
background: var(--zk-accent, #C4956A); color: #fff;
font-family: 'Playfair Display', serif; font-size: 16px; font-weight: 600;
margin-bottom: 14px;
}
.zk-guide-step h4 {
font-family: 'Playfair Display', serif; font-size: 17px; font-weight: 600;
color: var(--zk-dark, #2C2420); margin: 0 0 10px;
}
.zk-guide-step p { color: var(--zk-brown, #7A6B5D); font-size: 13.5px; line-height: 1.6; margin: 0; }
@media (max-width: 960px) { .zk-guide-steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .zk-guide-steps { grid-template-columns: 1fr; } }
/* Compare table */
.zk-compare-section { padding: 64px 0; background: #fff; }
.zk-compare-header { text-align: center; max-width: 720px; margin: 0 auto 40px; }
.zk-compare-header h2 {
font-family: 'Playfair Display', serif; font-size: clamp(26px, 3vw, 34px);
color: var(--zk-dark, #2C2420); font-weight: 600; margin: 0 0 12px;
}
.zk-compare-header p { color: var(--zk-brown, #7A6B5D); font-size: 15px; margin: 0; }
.zk-compare-table-wrap { overflow-x: auto; }
.zk-compare-table {
width: 100%; border-collapse: collapse;
max-width: 960px; margin: 0 auto;
background: #fff; border-radius: 16px; overflow: hidden;
box-shadow: 0 4px 24px rgba(42,36,32,.05);
}
.zk-compare-table thead th {
background: var(--zk-dark, #2C2420); color: #fff;
padding: 18px 20px; text-align: left;
font-family: 'Playfair Display', serif; font-weight: 600; font-size: 15px;
}
.zk-compare-table tbody td {
padding: 14px 20px; border-bottom: 1px solid #f0ece5;
color: var(--zk-dark, #2C2420); font-size: 14px;
}
.zk-compare-table tbody td:first-child { font-weight: 600; color: var(--zk-brown, #7A6B5D); background: #faf7f2; }
.zk-compare-table tbody tr:last-child td { border-bottom: 0; }
.zk-compare-check { color: var(--zk-green, #5B8C5A); font-weight: 700; }
.zk-compare-strong { color: var(--zk-accent-dark, #A67B52); font-weight: 700; }
@media (max-width: 768px) {
.zk-compare-table thead th,
.zk-compare-table tbody td { padding: 12px 14px; font-size: 13px; }
}
/* ============================================================
SINGLE PRODUCT — 1:1 with shop-v2/produkt-*.html
============================================================ */
.single-product .zk-single-product { padding: 1.5rem 0 4rem; }
.zk-product { max-width: 1280px; margin: 0 auto; }
/* Breadcrumb */
.single-product .zk-breadcrumb {
display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
color: #888; font-size: 14px; margin: 0 0 28px;
}
.single-product .zk-breadcrumb a { color: #666; text-decoration: none; }
.single-product .zk-breadcrumb a:hover { color: var(--zk-accent, #C4956A); }
.single-product .zk-crumb-sep { color: #ccc; }
/* ---- Layout (v1.3.0 — clean 2-col: sticky gallery left, config right) ---- */
.zk-product-layout {
display: grid;
grid-template-columns: 1.05fr 1fr;
column-gap: 64px;
row-gap: 40px;
margin: 0 0 72px;
align-items: start;
}
/* ---- Gallery override of WC default ---- */
.zk-product-layout .zk-gallery { min-width: 0; display: flex; flex-direction: column; gap: 20px; }
/* ---- Highlights box under gallery (v1.2.7 — balances tall right-column config) ---- */
.zk-product-highlights {
padding: 20px 24px;
background: var(--zk-cream, #F5F0EB);
border: 1px solid rgba(92, 79, 67, 0.08);
border-radius: 16px;
}
.zk-product-highlights-title {
margin: 0 0 14px;
font-family: var(--zk-font-heading, 'Playfair Display', Georgia, serif);
font-size: 17px;
font-weight: 600;
color: var(--zk-dark, #2C2420);
letter-spacing: -0.01em;
line-height: 1.25;
}
.zk-product-highlights-list {
list-style: none;
padding: 0;
margin: 0;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px 20px;
}
.zk-product-highlights-list li {
display: flex;
align-items: flex-start;
gap: 10px;
font-size: 13.5px;
line-height: 1.4;
color: var(--zk-brown-dark, #5C4F43);
}
.zk-product-highlights-list li svg {
flex-shrink: 0;
width: 18px;
height: 18px;
margin-top: 1px;
color: var(--zk-accent, #C4956A);
}
@media (max-width: 960px) {
.zk-product-layout .zk-gallery { gap: 16px; }
.zk-product-highlights { padding: 16px 18px; }
.zk-product-highlights-title { font-size: 16px; margin-bottom: 10px; }
.zk-product-highlights-list { grid-template-columns: 1fr; gap: 8px; }
.zk-product-highlights-list li { font-size: 13px; }
}
.zk-product-layout .woocommerce-product-gallery {
width: 100% !important; float: none !important; margin: 0 !important;
}
/* CLS: reserve aspect ratio before flexslider boots + images load */
.zk-product-layout .woocommerce-product-gallery .flex-viewport,
.zk-product-layout .woocommerce-product-gallery .woocommerce-product-gallery__wrapper {
aspect-ratio: 1 / 1;
background: var(--zk-cream, #F5F0EB);
border-radius: 20px;
overflow: hidden;
}
.zk-product-layout .woocommerce-product-gallery__image,
.zk-product-layout .woocommerce-product-gallery__image img {
aspect-ratio: 1 / 1;
width: 100%;
height: auto !important; /* v1.8.29: defeat FlexSlider inline height so Seite image swap doesn't jump layout */
object-fit: contain;
object-position: center;
background: var(--zk-cream, #F5F0EB);
}
/* v1.8.29 — force flex-viewport to honor aspect-ratio on desktop too (B02 gallery jump on Seite pick) */
.zk-product-layout .woocommerce-product-gallery .flex-viewport {
height: auto !important;
}
/* v1.9.96 — DO NOT force width:100% on .woocommerce-product-gallery__wrapper.
* FlexSlider sets its inline width to N×viewport (one slide per page, translateX
* to switch). Our previous override pinned it to 100% → all 4 slides stacked
* on top of each other inside the same 374px slot, blocking the slider entirely.
* Aspect-ratio stays only on .flex-viewport (the visible window), wrapper +
* slides are left to FlexSlider. */
/* v2.1.1 — mobile aspect ratio = 1/1 (klient daje kwadratowe zdjęcia studio,
* landscape 3/2 powodował cream bars po bokach → klient myślał że "ucięte") */
@media (max-width: 960px) {
.zk-product-layout .woocommerce-product-gallery .flex-viewport {
aspect-ratio: 1 / 1;
height: auto !important;
width: 100%;
}
.zk-product-layout .woocommerce-product-gallery__image,
.zk-product-layout .woocommerce-product-gallery__image img { aspect-ratio: 1 / 1; }
}
/* v2.1.1 — wszystkie breakpoints mobile = 1/1 (kwadrat, dopasowane do source) */
@media (max-width: 640px) {
.zk-product-layout .woocommerce-product-gallery .flex-viewport { aspect-ratio: 1 / 1; }
.zk-product-layout .woocommerce-product-gallery__image,
.zk-product-layout .woocommerce-product-gallery__image img { aspect-ratio: 1 / 1; }
}
@media (max-width: 480px) {
.zk-product-layout .woocommerce-product-gallery .flex-viewport { aspect-ratio: 1 / 1; }
.zk-product-layout .woocommerce-product-gallery__image,
.zk-product-layout .woocommerce-product-gallery__image img { aspect-ratio: 1 / 1; }
}
.zk-product-layout .woocommerce-product-gallery__image:first-child,
.zk-product-layout .woocommerce-product-gallery__image:first-child img {
border-radius: 20px;
}
/* v2.1.15 — Klient: "kazdy produkt ma tak ze na samym dole sa dodatkowe
* kwadraciki tylko to zle wyglada nie sa proporcjonalne". Było: 4 sztywne
* kolumny → przy 2 zdjęciach 2 puste kafelki. Teraz: flex-wrap z fixed
* szerokością 80px → thumbnails wrap naturally, no empty slots. */
.zk-product-layout .woocommerce-product-gallery .flex-control-thumbs {
display: flex !important; flex-wrap: wrap; justify-content: flex-start;
gap: 10px; margin: 14px 0 0 !important; padding: 0 !important; list-style: none;
}
.zk-product-layout .woocommerce-product-gallery .flex-control-thumbs li {
width: 80px !important; flex: 0 0 80px !important; margin: 0 !important; float: none !important;
}
.zk-product-layout .woocommerce-product-gallery .flex-control-thumbs li img {
width: 100%; height: 100%;
border-radius: 12px; aspect-ratio: 1/1; object-fit: contain;
background: linear-gradient(135deg, #faf6f0 0%, #f5ede3 100%);
padding: 4px;
cursor: pointer;
border: 2px solid transparent; transition: border-color .25s, transform .15s;
}
.zk-product-layout .woocommerce-product-gallery .flex-control-thumbs li img:hover { transform: translateY(-1px); }
@media (max-width: 768px) {
.zk-product-layout .woocommerce-product-gallery .flex-control-thumbs li { width: 64px !important; flex: 0 0 64px !important; }
}
.zk-product-layout .woocommerce-product-gallery .flex-control-thumbs li img.flex-active,
.zk-product-layout .woocommerce-product-gallery .flex-control-thumbs li img:hover {
border-color: var(--zk-accent, #C4956A);
}
/* ---- Left column: sticky so gallery stays visible while right column scrolls ---- */
@media (min-width: 1080px) {
.zk-product-layout > .zk-product-left,
.zk-product-layout > .zk-gallery {
position: sticky; top: 90px;
align-self: start;
}
}
/* ---- Right column (v1.3.0 — scrolling config column) ---- */
.zk-product-details {
min-width: 0;
padding: 0;
align-self: start;
}
.zk-product-details > * + * { margin-top: 18px; }
.zk-product-collection-label {
display: inline-flex; align-items: center; gap: 8px;
padding: 6px 14px 6px 12px; border-radius: 999px;
background: linear-gradient(135deg, rgba(196,149,106,.12) 0%, rgba(196,149,106,.04) 100%);
color: var(--zk-accent-dark, #A67B52);
font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
border: 1px solid rgba(196,149,106,.2);
}
.zk-product-collection-label::before {
content: ''; width: 6px; height: 6px; border-radius: 50%;
background: var(--zk-accent, #C4956A);
}
.zk-product-title {
font-family: 'Playfair Display', Georgia, serif;
font-size: clamp(30px, 4vw, 42px); font-weight: 600;
color: #1f1f1f; letter-spacing: -.015em; line-height: 1.12; margin: 0;
}
/* Rating */
.zk-product-rating {
display: inline-flex; align-items: center; gap: 10px;
padding: 6px 14px; border-radius: 999px;
background: rgba(228,183,86,.1);
color: #6a5a30; font-size: 13px; font-weight: 500;
}
.zk-product-rating-stars { display: flex; gap: 2px; }
.zk-product-rating-stars .zk-star { width: 15px; height: 15px; }
.zk-product-rating-stars .zk-star-on { fill: #E4B756; }
.zk-product-rating-stars .zk-star-off { fill: #E5E0D8; }
.zk-product-rating-link {
color: #8a7844; text-decoration: none;
border-bottom: 1px dashed rgba(138,120,68,.4);
padding-bottom: 1px;
}
.zk-product-rating-link:hover { color: #5a4f2a; border-bottom-color: currentColor; }
/* Price — hero treatment */
.zk-product-price-main {
font-family: 'Playfair Display', serif;
font-size: clamp(32px, 4.5vw, 40px);
color: #1f1f1f; font-weight: 600;
letter-spacing: -.015em;
line-height: 1;
display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px;
}
.zk-product-price-main .price { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 10px; }
.zk-product-price-main .price ins { text-decoration: none; }
.zk-product-price-main .woocommerce-Price-amount { font-family: 'Playfair Display', serif; font-weight: 600; color: #1f1f1f; }
.zk-product-price-main .woocommerce-price-suffix {
display: block; width: 100%; margin-top: 6px;
font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 400; color: #9a9a9a;
letter-spacing: .01em;
}
.zk-product-price-main del {
color: #c5c5c5; font-size: .65em; font-weight: 500;
margin-right: 4px;
text-decoration-thickness: 1.5px;
}
.zk-product-price-main del .woocommerce-Price-amount { color: #c5c5c5; }
/* Short description */
.zk-product-desc-text { color: #666; line-height: 1.75; font-size: 15px; }
.zk-product-desc-text p { margin: 0 0 12px; }
/* ---- Config area (WC variations_form + quantity + ATC) ---- */
.zk-product-config { margin-top: 12px; }
.zk-product-config .variations_form.cart { margin: 0; padding: 0; border: 0; }
.zk-product-config table.variations { display: block; border-collapse: collapse; }
.zk-product-config table.variations tbody,
.zk-product-config table.variations tr { display: block; }
.zk-product-config table.variations tr {
display: grid; grid-template-columns: 1fr; gap: 10px; margin: 0 0 22px;
}
.zk-product-config table.variations th,
.zk-product-config table.variations td { display: block; border: 0; padding: 0; text-align: left; }
.zk-product-config table.variations th.label label {
display: inline-flex; align-items: center; gap: 8px;
font-family: 'Inter', sans-serif;
font-size: 11px; font-weight: 700; color: var(--zk-brown, #7A6B5D);
text-transform: uppercase; letter-spacing: 1.4px;
margin: 0 0 10px;
}
.zk-product-config table.variations th.label label::before {
content: ""; display: inline-block;
width: 6px; height: 6px; border-radius: 50%;
background: var(--zk-accent, #C4956A);
}
.zk-product-config .reset_variations {
display: inline-block; margin-left: 14px;
color: #a89585; font-size: 12px; text-decoration: none;
font-weight: 500; letter-spacing: .02em;
border-bottom: 1px dashed #cfc4b8; padding-bottom: 1px;
transition: color .2s ease, border-color .2s ease;
}
.zk-product-config .reset_variations:hover {
color: var(--zk-accent-dark, #A67B52);
border-bottom-color: var(--zk-accent, #C4956A);
}
/* v1.1.7 — modernized Größe/Ausstattung pill-cards */
.zk-product-config .variable-items-wrapper {
display: flex !important; flex-wrap: wrap; gap: 10px;
margin: 0 !important; padding: 0 !important;
}
.zk-product-config .variable-items-wrapper .variable-item {
all: unset; box-sizing: border-box; position: relative;
display: inline-flex; align-items: center; justify-content: center;
padding: 14px 22px; min-width: 96px; min-height: 52px;
background: #fff !important;
border: 1.5px solid rgba(122,107,93,.22) !important;
border-radius: 14px;
font-family: 'Inter', sans-serif;
font-size: 14px !important; font-weight: 600;
color: var(--zk-dark, #2C2420);
letter-spacing: .01em; line-height: 1.2;
cursor: pointer; margin: 0 !important;
box-shadow: 0 1px 0 rgba(44,36,32,.04) !important;
transition: transform .18s ease, border-color .18s ease, background .18s ease, color .18s ease, box-shadow .18s ease;
}
.zk-product-config .variable-items-wrapper .variable-item:hover {
transform: translateY(-2px);
border-color: var(--zk-accent, #C4956A) !important;
background: #FBF7F2 !important;
color: var(--zk-dark, #2C2420);
box-shadow: 0 10px 24px -14px rgba(196,149,106,.5) !important;
}
.zk-product-config .variable-items-wrapper .variable-item.selected {
background: var(--zk-dark, #2C2420) !important;
border-color: var(--zk-dark, #2C2420) !important;
color: #fff !important;
box-shadow: 0 14px 28px -14px rgba(44,36,32,.55), inset 0 0 0 2px rgba(255,255,255,.06) !important;
transform: translateY(-1px);
}
.zk-product-config .variable-items-wrapper .variable-item.selected::after {
content: ""; position: absolute; top: 8px; right: 10px;
width: 6px; height: 6px; border-radius: 50%;
background: var(--zk-accent, #C4956A);
box-shadow: 0 0 0 2px rgba(196,149,106,.22);
}
.zk-product-config .variable-items-wrapper .variable-item.disabled,
.zk-product-config .variable-items-wrapper .variable-item[disabled] {
opacity: .45 !important; cursor: not-allowed !important;
transform: none !important; box-shadow: none !important;
}
/* Ausstattung — narrow pills scale up for labels like "Mit Bettkasten" */
.zk-product-config .variable-items-wrapper.button-variable-items-wrapper .variable-item {
min-width: 140px; padding: 14px 24px;
}
/* Color swatches (pa_farbe) — round circles */
.zk-product-config .variable-items-wrapper.color-variable-items-wrapper {
gap: 12px;
}
.zk-product-config .variable-items-wrapper.color-variable-items-wrapper .variable-item {
width: 44px !important; height: 44px !important; min-width: 0 !important; min-height: 0 !important;
padding: 0 !important; border-radius: 50% !important;
background: #fff !important;
border-width: 2px !important;
position: relative; overflow: hidden;
box-shadow: 0 2px 6px rgba(44,36,32,.1) !important;
}
.zk-product-config .variable-items-wrapper.color-variable-items-wrapper .variable-item:hover {
transform: translateY(-2px) scale(1.05);
}
.zk-product-config .variable-items-wrapper.color-variable-items-wrapper .variable-item.selected {
background: #fff !important;
border-color: #fff !important;
box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--zk-accent, #C4956A), 0 8px 20px -8px rgba(196,149,106,.5) !important;
transform: translateY(-1px);
}
.zk-product-config .variable-items-wrapper.color-variable-items-wrapper .variable-item.selected::after {
display: none;
}
.zk-product-config .variable-items-wrapper.color-variable-items-wrapper .variable-item-span {
border-radius: 50%;
}
/* Single variation / availability row */
.zk-product-config .single_variation_wrap { margin-top: 8px; }
.zk-product-config .woocommerce-variation { padding: 10px 0; color: #666; font-size: 14px; }
.zk-product-config .woocommerce-variation-price { font-family: 'Playfair Display', serif; font-size: 20px; color: #2a2a2a; font-weight: 600; margin: 0 0 8px; }
/* Quantity + add-to-cart row */
.zk-product-config .woocommerce-variation-add-to-cart,
.zk-product-config form.cart:not(.variations_form) {
display: flex !important; gap: 14px; align-items: stretch;
margin-top: 14px;
}
.zk-product-config .woocommerce-variation-add-to-cart .quantity,
.zk-product-config form.cart .quantity {
display: inline-flex; align-items: center;
border: 1.5px solid #e5e0d8; border-radius: 12px; overflow: hidden; background: #fff;
}
.zk-product-config .quantity input.qty {
width: 56px; height: 52px; border: 0; text-align: center;
font-weight: 600; font-size: 15px; background: transparent;
-moz-appearance: textfield;
}
.zk-product-config .quantity input.qty::-webkit-outer-spin-button,
.zk-product-config .quantity input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.zk-product-config button.single_add_to_cart_button {
flex: 1; min-height: 52px; padding: 0 28px;
background: #2a2a2a !important; color: #fff !important;
border: 0 !important; border-radius: 12px !important;
font-family: 'Inter', sans-serif !important; font-weight: 600; font-size: 15px;
letter-spacing: .02em; cursor: pointer; transition: all .25s ease;
display: inline-flex; align-items: center; justify-content: center; gap: 10px;
}
.zk-product-config button.single_add_to_cart_button:hover {
background: var(--zk-accent-dark, #A67B52) !important;
transform: translateY(-1px); box-shadow: 0 8px 20px rgba(166,123,82,.25);
}
.zk-product-config button.single_add_to_cart_button.disabled,
.zk-product-config button.single_add_to_cart_button:disabled {
background: #6b6158 !important;
color: rgba(255,255,255,.75) !important;
cursor: not-allowed;
transform: none !important;
box-shadow: none !important;
opacity: 1 !important;
}
.zk-product-config button.single_add_to_cart_button {
color: #fff !important;
}
/* Product meta (WC SKU/Category/Tags) — plain compact */
.zk-product-config .product_meta {
margin-top: 18px; padding-top: 18px; border-top: 1px solid #eee;
font-size: 13px; color: #888; line-height: 1.9;
}
.zk-product-config .product_meta > span { display: block; }
.zk-product-config .product_meta a { color: #666; text-decoration: none; }
.zk-product-config .product_meta a:hover { color: var(--zk-accent, #C4956A); text-decoration: underline; }
/* Hide WC's default tabs (we use accordion) */
.single-product .woocommerce-tabs { display: none !important; }
/* ---- Configurator (v1.1.8 — Seite/Kopfteilhöhe/Hauptmatratze/Aufbau/Schutzgitter) ---- */
.zk-product-config .zk-configurator { flex: 1 1 100%; order: -2; }
.zk-configurator {
margin: 22px 0 18px;
padding: 22px 22px 18px;
background: linear-gradient(180deg, #FDFBF8 0%, var(--zk-cream) 100%);
border: 1px solid rgba(196, 149, 106, 0.18);
border-radius: 18px;
box-shadow: 0 6px 22px rgba(44, 36, 32, 0.04);
}
.zk-configurator-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
padding-bottom: 14px;
margin-bottom: 14px;
border-bottom: 1px dashed rgba(122, 107, 93, 0.2);
}
.zk-configurator-eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
font: 700 11px/1 var(--zk-font-body);
letter-spacing: 1.4px;
text-transform: uppercase;
color: var(--zk-brown);
}
.zk-configurator-dot {
width: 7px; height: 7px; border-radius: 50%;
background: var(--zk-accent);
box-shadow: 0 0 0 3px rgba(196, 149, 106, 0.18);
}
.zk-configurator-surcharge {
font: 600 13px/1.3 var(--zk-font-body);
color: var(--zk-brown-dark);
background: rgba(196, 149, 106, 0.08);
padding: 6px 12px;
border-radius: 99px;
}
.zk-configurator-surcharge.has-surcharge {
background: var(--zk-accent);
color: #fff;
}
.zk-configurator-group {
padding: 12px 0;
border-bottom: 1px dashed rgba(122, 107, 93, 0.12);
}
.zk-configurator-group:last-of-type { border-bottom: 0; padding-bottom: 0; }
.zk-configurator-group-head { margin-bottom: 10px; }
.zk-configurator-label {
display: block;
font: 600 14px/1.2 var(--zk-font-body);
color: var(--zk-dark);
margin-bottom: 2px;
}
.zk-configurator-hint {
display: block;
font: 400 12px/1.45 var(--zk-font-body);
color: var(--zk-brown);
opacity: 0.85;
}
.zk-configurator-options {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.zk-configurator-pill {
position: relative;
min-height: 52px;
padding: 8px 16px;
border: 1.5px solid rgba(122, 107, 93, 0.22);
border-radius: 14px;
background: #fff;
color: var(--zk-brown-dark);
cursor: pointer;
transition: transform .18s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease, color .2s ease;
display: inline-flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
gap: 2px;
font: 600 14px/1.1 var(--zk-font-body);
flex: 1 1 auto;
text-align: left;
}
.zk-configurator-pill-label { display: block; }
.zk-configurator-pill-price {
display: block;
font: 500 12px/1 var(--zk-font-body);
color: var(--zk-accent-dark);
opacity: 0.9;
}
.zk-configurator-pill:hover {
transform: translateY(-2px);
background: var(--zk-cream);
border-color: var(--zk-accent);
box-shadow: 0 8px 20px rgba(196, 149, 106, 0.16);
}
.zk-configurator-pill.is-selected {
background: var(--zk-dark);
border-color: var(--zk-dark);
color: #fff;
box-shadow: 0 8px 22px rgba(44, 36, 32, 0.22);
}
.zk-configurator-pill.is-selected .zk-configurator-pill-price { color: var(--zk-accent); opacity: 1; }
.zk-configurator-pill.is-selected::after {
content: '';
position: absolute;
top: 8px; right: 8px;
width: 7px; height: 7px; border-radius: 50%;
background: var(--zk-accent);
box-shadow: 0 0 0 3px rgba(196, 149, 106, 0.35);
}
.zk-configurator-toggle {
display: flex;
align-items: center;
gap: 14px;
padding: 12px 14px;
border: 1.5px solid rgba(122, 107, 93, 0.22);
border-radius: 14px;
background: #fff;
cursor: pointer;
transition: background .2s ease, border-color .2s ease, box-shadow .2s ease;
user-select: none;
}
.zk-configurator-toggle:hover {
border-color: var(--zk-accent);
background: var(--zk-cream);
}
.zk-configurator-toggle input[type="checkbox"] { position: absolute; opacity: 0; pointer-events: none; }
.zk-configurator-toggle-track {
position: relative;
flex: 0 0 44px;
width: 44px; height: 26px;
background: rgba(122, 107, 93, 0.22);
border-radius: 99px;
transition: background .25s ease;
}
.zk-configurator-toggle-thumb {
position: absolute;
top: 3px; left: 3px;
width: 20px; height: 20px;
background: #fff;
border-radius: 50%;
box-shadow: 0 2px 4px rgba(0,0,0,0.18);
transition: transform .25s ease;
}
.zk-configurator-toggle input:checked ~ .zk-configurator-toggle-track {
background: var(--zk-accent);
}
.zk-configurator-toggle input:checked ~ .zk-configurator-toggle-track .zk-configurator-toggle-thumb {
transform: translateX(18px);
}
.zk-configurator-toggle-label {
font: 600 14px/1.2 var(--zk-font-body);
color: var(--zk-dark);
flex: 1;
display: inline-flex;
align-items: center;
gap: 10px;
}
.zk-configurator-toggle-price {
font: 500 13px/1 var(--zk-font-body);
color: var(--zk-accent-dark);
}
.zk-configurator-toggle input:checked ~ .zk-configurator-toggle-label {
color: var(--zk-brown-dark);
}
@media (max-width: 600px) {
.zk-configurator { padding: 16px; border-radius: 14px; }
.zk-configurator-pill { min-height: 48px; padding: 8px 12px; font-size: 13px; }
}
/* ---- Fabric picker (v1.1.7 — custom Stoffauswahl) ---- */
/* Hook renders picker inside the cart row flex container — break it out to full width at the top */
.zk-product-config .woocommerce-variation-add-to-cart,
.zk-product-config form.cart:not(.variations_form) { flex-wrap: wrap; }
.zk-product-config .zk-fabric-picker { flex: 1 1 100%; order: -1; }
.zk-fabric-picker {
margin: 22px 0 24px;
padding: 22px;
background: #fff;
border: 1.5px solid rgba(122,107,93,.18);
border-radius: 18px;
box-shadow: 0 2px 0 rgba(44,36,32,.03);
position: relative;
}
.zk-fabric-picker.is-selected {
border-color: rgba(196,149,106,.45);
box-shadow: 0 14px 34px -18px rgba(196,149,106,.35);
}
.zk-fabric-head {
display: flex; align-items: flex-start; justify-content: space-between; gap: 14px;
margin: 0 0 16px; padding-bottom: 14px;
border-bottom: 1px solid rgba(122,107,93,.12);
}
.zk-fabric-label { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.zk-fabric-eyebrow {
display: inline-flex; align-items: center; gap: 8px;
font-family: 'Inter', sans-serif;
font-size: 11px; font-weight: 700; color: var(--zk-brown, #7A6B5D);
text-transform: uppercase; letter-spacing: 1.4px;
}
.zk-fabric-dot {
width: 6px; height: 6px; border-radius: 50%;
background: var(--zk-accent, #C4956A);
}
.zk-fabric-selected-label {
font-family: 'Playfair Display', Georgia, serif;
font-size: 18px; font-weight: 500; color: var(--zk-dark, #2C2420);
line-height: 1.3;
}
.zk-fabric-selected-label.is-placeholder {
font-family: 'Inter', sans-serif;
font-size: 13px; font-style: italic; color: #a89585; font-weight: 400;
}
.zk-fabric-clear {
flex: 0 0 auto;
background: transparent; border: 0; cursor: pointer;
font-family: 'Inter', sans-serif;
font-size: 12px; color: #a89585; font-weight: 500; letter-spacing: .02em;
padding: 6px 0;
border-bottom: 1px dashed #cfc4b8;
transition: color .2s ease, border-color .2s ease;
opacity: 0; pointer-events: none;
}
.zk-fabric-picker.is-selected .zk-fabric-clear {
opacity: 1; pointer-events: auto;
}
.zk-fabric-clear:hover {
color: var(--zk-accent-dark, #A67B52);
border-bottom-color: var(--zk-accent, #C4956A);
}
.zk-fabric-tabs {
display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px;
}
.zk-fabric-tab {
all: unset; box-sizing: border-box; cursor: pointer;
display: inline-flex; align-items: center; gap: 8px;
padding: 10px 16px;
background: #fff;
border: 1.5px solid rgba(122,107,93,.22);
border-radius: 999px;
font-family: 'Inter', sans-serif;
font-size: 13px; font-weight: 600; color: var(--zk-dark, #2C2420);
letter-spacing: .01em;
transition: background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}
.zk-fabric-tab:hover { transform: translateY(-1px); border-color: var(--zk-accent, #C4956A); }
.zk-fabric-tab.is-active {
background: var(--zk-dark, #2C2420); border-color: var(--zk-dark, #2C2420); color: #fff;
}
.zk-fabric-tab-count {
font-size: 11px; font-weight: 500; opacity: .7;
padding: 2px 6px; background: rgba(122,107,93,.14); border-radius: 10px;
}
.zk-fabric-tab.is-active .zk-fabric-tab-count {
background: rgba(255,255,255,.14); opacity: 1;
}
.zk-fabric-pane[hidden] { display: none !important; }
.zk-fabric-pane-desc {
margin: 0 0 12px;
font-size: 13px; color: #786b60; font-style: italic;
line-height: 1.4;
}
.zk-fabric-grid {
display: grid; gap: 10px;
grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
max-height: 320px; overflow-y: auto; padding: 4px 6px 4px 0;
scrollbar-width: thin; scrollbar-color: rgba(122,107,93,.35) transparent;
}
.zk-fabric-grid::-webkit-scrollbar { width: 6px; }
.zk-fabric-grid::-webkit-scrollbar-track { background: transparent; }
.zk-fabric-grid::-webkit-scrollbar-thumb {
background: rgba(122,107,93,.3); border-radius: 3px;
}
.zk-fabric-grid::-webkit-scrollbar-thumb:hover { background: rgba(122,107,93,.5); }
.zk-fabric-swatch {
all: unset; box-sizing: border-box; cursor: pointer; position: relative;
display: flex; flex-direction: column; align-items: stretch;
aspect-ratio: 1 / 1;
border-radius: 10px; overflow: hidden;
border: 2px solid transparent;
transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
background: #f5f0eb;
}
.zk-fabric-swatch img {
width: 100%; height: 100%;
object-fit: cover; display: block;
border-radius: 8px;
transition: transform .3s ease;
}
.zk-fabric-swatch-code {
position: absolute; left: 0; right: 0; bottom: 0;
padding: 4px 6px;
background: linear-gradient(to top, rgba(44,36,32,.78), rgba(44,36,32,0));
color: #fff;
font-family: 'Inter', sans-serif;
font-size: 10px; font-weight: 600; letter-spacing: .04em;
text-align: center;
opacity: 0; transition: opacity .18s ease;
}
.zk-fabric-swatch:hover {
transform: translateY(-2px);
border-color: rgba(196,149,106,.55);
box-shadow: 0 10px 20px -10px rgba(44,36,32,.25);
}
.zk-fabric-swatch:hover .zk-fabric-swatch-code,
.zk-fabric-swatch.is-selected .zk-fabric-swatch-code {
opacity: 1;
}
.zk-fabric-swatch:hover img { transform: scale(1.08); }
.zk-fabric-swatch.is-selected {
border-color: var(--zk-accent, #C4956A);
box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--zk-accent, #C4956A),
0 12px 24px -10px rgba(196,149,106,.45);
transform: translateY(-1px);
}
@media (max-width: 640px) {
.zk-fabric-picker { padding: 16px; border-radius: 14px; }
.zk-fabric-grid { grid-template-columns: repeat(auto-fill, minmax(60px, 1fr)); max-height: 260px; }
.zk-fabric-selected-label { font-size: 16px; }
}
/* ---- Trust badges (v1.1.5 — card grid) ---- */
.zk-meta-items {
display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;
padding: 24px 0 0; margin-top: 28px;
border-top: 1px solid #eee;
}
.zk-meta-item {
display: flex; align-items: center; gap: 12px;
padding: 12px 14px;
font-size: 13px; color: #3a3a3a; font-weight: 500;
background: #fafaf7; border-radius: 10px;
border: 1px solid #f1ece4;
transition: transform .2s, box-shadow .2s, border-color .2s;
}
.zk-meta-item:hover {
transform: translateY(-1px); box-shadow: 0 6px 14px rgba(42,36,32,.05);
border-color: rgba(196,149,106,.3);
}
.zk-meta-item svg {
width: 20px; height: 20px; color: var(--zk-green, #8BAF7A); flex-shrink: 0;
padding: 4px; background: rgba(139,175,122,.12); border-radius: 8px;
box-sizing: content-box;
}
/* ---- Delivery box (v1.1.5 — richer) ---- */
.zk-delivery-box {
display: flex; align-items: center; gap: 16px;
padding: 20px 22px; border-radius: 16px;
background: linear-gradient(135deg, #F5F0EB 0%, #EDE5DB 100%);
color: #3a3a3a; margin-top: 20px;
border: 1px solid rgba(196,149,106,.15);
position: relative; overflow: hidden;
}
.zk-delivery-box::before {
content: ''; position: absolute; top: -30px; right: -30px;
width: 120px; height: 120px; border-radius: 50%;
background: radial-gradient(circle, rgba(196,149,106,.18) 0%, transparent 60%);
pointer-events: none;
}
.zk-delivery-box svg {
width: 32px; height: 32px; color: var(--zk-accent, #C4956A); flex-shrink: 0;
padding: 6px; background: rgba(255,255,255,.7); border-radius: 50%;
box-sizing: content-box; position: relative;
box-shadow: 0 2px 8px rgba(196,149,106,.15);
}
.zk-delivery-box p { margin: 0; font-size: 14px; line-height: 1.55; position: relative; }
.zk-delivery-box p strong { font-weight: 700; color: #2a2a2a; }
/* v1.8.29 — compact 2-item layout with separator + deeplink */
.zk-delivery-box { flex-wrap: wrap; }
.zk-delivery-box-item { display: inline-flex; align-items: center; gap: 10px; flex: 0 0 auto; position: relative; }
.zk-delivery-box-item + .zk-delivery-box-item::before {
content: ''; position: absolute; left: -14px; top: 50%; transform: translateY(-50%);
width: 1px; height: 26px; background: rgba(196,149,106,.3);
}
.zk-delivery-box-item svg {
width: 22px; height: 22px; padding: 5px; color: var(--zk-accent, #C4956A);
background: rgba(255,255,255,.7); border-radius: 50%;
box-sizing: content-box; flex-shrink: 0; box-shadow: 0 2px 8px rgba(196,149,106,.15);
}
.zk-delivery-box-item > div { display: flex; flex-direction: column; line-height: 1.15; }
.zk-delivery-box-item strong { font-weight: 700; color: #2a2a2a; font-size: 14px; }
.zk-delivery-box-item span { font-size: 11.5px; color: #7A6B5D; letter-spacing: .02em; }
.zk-delivery-box-link {
margin-left: auto; font-size: 13px; color: var(--zk-accent-dark, #A67B52);
text-decoration: none; font-weight: 600; letter-spacing: .01em;
transition: color .2s;
}
.zk-delivery-box-link:hover { color: var(--zk-dark, #2C2420); }
@media (max-width: 520px) {
.zk-delivery-box-link { margin-left: 0; margin-top: 6px; }
.zk-delivery-box-item + .zk-delivery-box-item::before { display: none; }
}
/* ---- Accordion (v1.1.5 — premium expanded layouts; v1.2.8 — inside left grid column) ---- */
.zk-accordion { margin: 0; border-top: 1px solid #ece7df; min-width: 0; }
.zk-product-layout > .zk-accordion { align-self: stretch; }
.zk-accordion-item { border-bottom: 1px solid #ece7df; transition: background .2s; }
.zk-accordion-item.zk-open { background: linear-gradient(180deg, rgba(245,240,235,.35) 0%, transparent 100%); }
.zk-accordion-header {
all: unset; box-sizing: border-box;
display: flex; align-items: center; justify-content: space-between;
width: 100%; padding: 26px 4px;
font-family: 'Playfair Display', serif; font-size: 22px; font-weight: 500; color: #2a2a2a;
cursor: pointer; transition: color .2s;
letter-spacing: -.005em;
}
.zk-accordion-header:hover { color: var(--zk-accent, #C4956A); }
.zk-accordion-header > span { position: relative; padding-left: 22px; }
.zk-accordion-header > span::before {
content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
width: 10px; height: 10px; border-radius: 50%;
background: var(--zk-accent, #C4956A); opacity: .22; transition: opacity .2s;
}
.zk-accordion-item.zk-open .zk-accordion-header > span::before { opacity: 1; }
.zk-accordion-chevron { width: 22px; height: 22px; color: #aaa; transition: transform .35s cubic-bezier(.22,1,.36,1); }
.zk-accordion-item.zk-open .zk-accordion-chevron { transform: rotate(180deg); color: var(--zk-accent, #C4956A); }
.zk-accordion-body {
overflow: hidden; max-height: 0;
transition: max-height .45s cubic-bezier(.4,0,.2,1);
}
.zk-accordion-item.zk-open .zk-accordion-body { max-height: 6000px; }
.zk-accordion-body-inner {
max-width: 920px; margin: 0 auto;
padding: 4px 4px 40px; color: #4d4d4d; line-height: 1.85; font-size: 15.5px;
}
.zk-accordion-body-inner h3 {
font-family: 'Playfair Display', serif; font-size: 26px; font-weight: 500;
margin: 0 0 18px; color: #2a2a2a; letter-spacing: -.01em;
}
.zk-accordion-body-inner h4 {
font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 700;
letter-spacing: .08em; text-transform: uppercase;
color: var(--zk-brown, #7A6B5D); margin: 28px 0 14px;
}
.zk-accordion-body-inner p { margin: 0 0 16px; }
.zk-accordion-body-inner p strong { color: #2a2a2a; font-weight: 600; }
.zk-accordion-body-inner ul:not(.zk-feature-list):not(.zk-step-list) {
margin: 0 0 18px; padding: 0; list-style: none;
}
.zk-accordion-body-inner ul:not(.zk-feature-list):not(.zk-step-list) li {
position: relative; padding: 6px 0 6px 26px; font-size: 15px; color: #555; line-height: 1.7;
}
.zk-accordion-body-inner ul:not(.zk-feature-list):not(.zk-step-list) li::before {
content: ''; position: absolute; left: 0; top: 15px;
width: 8px; height: 8px; border-radius: 50%;
background: var(--zk-accent, #C4956A); opacity: .55;
}
/* Feature list — check SVG (Beschreibung) — 2-col on wider screens */
.zk-feature-list { list-style: none; margin: 20px 0 8px; padding: 0; display: grid; gap: 12px 28px; }
@media (min-width: 720px) {
.zk-feature-list { grid-template-columns: 1fr 1fr; }
}
.zk-feature-list li {
display: flex; align-items: flex-start; gap: 12px;
color: #2a2a2a; font-size: 15px; line-height: 1.5;
padding: 12px 14px; background: #fafaf7;
border-radius: 10px; border: 1px solid #f1ece4;
transition: transform .2s, box-shadow .2s, border-color .2s;
}
.zk-feature-list li:hover {
transform: translateY(-1px); box-shadow: 0 6px 16px rgba(42,36,32,.05);
border-color: rgba(196,149,106,.35);
}
.zk-feature-list li::before {
content: ''; flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%;
background: #eaf2e4 url("data:image/svg+xml;utf8,") center/12px no-repeat;
margin-top: 2px;
}
.zk-feature-list li svg { display: none; }
/* Spec table — transformed into 2-col grid of cards */
.zk-spec-table {
width: 100%; border-collapse: collapse;
margin: 12px 0 8px;
display: grid; grid-template-columns: 1fr; gap: 10px;
}
@media (min-width: 640px) {
.zk-spec-table { grid-template-columns: 1fr 1fr; gap: 12px; }
}
.zk-spec-table tbody { display: contents; }
.zk-spec-table tr {
display: flex; flex-direction: column; gap: 4px;
padding: 16px 18px;
background: #fafaf7; border: 1px solid #f0ebe3; border-radius: 12px;
transition: transform .2s, box-shadow .2s, border-color .2s;
}
.zk-spec-table tr:hover {
transform: translateY(-1px); box-shadow: 0 8px 20px rgba(42,36,32,.05);
border-color: rgba(196,149,106,.35);
}
.zk-spec-table td {
padding: 0; font-size: 14px; border: 0; display: block; width: auto !important;
}
.zk-spec-table td:first-child {
color: #8a8177; font-size: 11px; font-weight: 700;
text-transform: uppercase; letter-spacing: .1em;
}
.zk-spec-table td:last-child {
color: #2a2a2a; font-weight: 600; font-size: 16px;
font-family: 'Playfair Display', serif;
}
/* Step list — numbered (for Lieferung, Pflege) */
.zk-step-list { counter-reset: zk-step; list-style: none; margin: 20px 0; padding: 0;
display: grid; gap: 14px;
}
.zk-step-list li {
counter-increment: zk-step;
position: relative; padding: 16px 18px 16px 64px;
background: #fafaf7; border: 1px solid #f0ebe3; border-radius: 12px;
font-size: 14.5px; color: #4a4a4a; line-height: 1.6;
}
.zk-step-list li::before {
content: counter(zk-step, decimal-leading-zero);
position: absolute; left: 18px; top: 50%; transform: translateY(-50%);
width: 36px; height: 36px; border-radius: 50%;
background: var(--zk-accent, #C4956A); color: #fff;
font-family: 'Playfair Display', serif; font-size: 15px; font-weight: 600;
display: flex; align-items: center; justify-content: center;
letter-spacing: 0;
}
.zk-step-list li strong { color: #2a2a2a; font-weight: 600; display: block; margin-bottom: 2px; }
/* Mobile — accordion padding tighter */
@media (max-width: 640px) {
.zk-accordion-body-inner { padding: 4px 0 32px; font-size: 15px; }
.zk-accordion-body-inner h3 { font-size: 22px; }
.zk-accordion-header { font-size: 18px; padding: 22px 4px; }
}
/* ---- Lifestyle gallery (product page, 4 images asymmetric grid) ---- */
.zk-lifestyle { margin: 0 0 40px; }
.zk-lifestyle h2 {
font-family: 'Playfair Display', serif; font-size: clamp(24px, 3vw, 32px);
text-align: center; color: var(--zk-dark, #2C2420); font-weight: 600;
margin: 0 0 12px;
}
.zk-lifestyle > p {
text-align: center; color: var(--zk-brown, #7A6B5D);
font-size: 15px; margin: 0 auto 40px; max-width: 500px;
}
/* v2.1.6 — Uniform grid (no asymmetric span) so 2/3/4 unique images all
render predictably. Was: pad to 4 by duplicating image[0] → showed same
bed 3x with the old asymmetric layout. Now: 1fr 1fr / 1fr 1fr (or auto
row when only 2 items). Square aspect-ratio keeps visual consistency
regardless of image count. */
.zk-lifestyle-grid {
display: grid; grid-template-columns: 1fr 1fr;
grid-template-rows: auto; gap: 16px;
}
.zk-lifestyle--count-1 .zk-lifestyle-grid { grid-template-columns: 1fr; max-width: 600px; margin: 0 auto; }
.zk-lifestyle--count-2 .zk-lifestyle-grid { grid-template-columns: 1fr 1fr; }
.zk-lifestyle--count-3 .zk-lifestyle-grid { grid-template-columns: 1fr 1fr 1fr; }
.zk-lifestyle--count-4 .zk-lifestyle-grid { grid-template-columns: 1fr 1fr; }
.zk-lifestyle-item {
border-radius: 14px; overflow: hidden;
background: linear-gradient(135deg, #faf6f0 0%, #f5ede3 100%);
aspect-ratio: 1 / 1;
}
/* v2.1.5 — contain + WIDTH 100% / HEIGHT 100% pasuje na grid rows */
.zk-lifestyle-item img {
width: 100%; height: 100%; object-fit: contain; display: block; padding: 6px;
transition: transform .6s cubic-bezier(.22,1,.36,1);
}
.zk-lifestyle-item:hover img { transform: scale(1.05); }
/* v2.1.5 — grid rows AUTO żeby kafelek mógł rosnąć do natural image ratio + aspect-ratio 1:1 (zgodnie z source 2560x2560).
Klient: "zawsze ma byc widac cale zdjecie" — kafelek dopasowuje się do image, nie obcina. */
@media (max-width: 960px) {
.zk-lifestyle-grid { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; }
.zk-lifestyle-item { aspect-ratio: 1 / 1; }
.zk-lifestyle-item:nth-child(n) { grid-column: auto; grid-row: auto; }
}
/* v2.1.20 — Klient (13.05.2026): "na mobile nie powinny byc obok siebie?".
* Wcześniej ≤600px stack do 1 kolumny — teraz **2 kolumny zawsze** dla
* count-2, count-3 i count-4 (krótsze sekcje, lepszy UX na mobile). */
@media (max-width: 600px) {
.zk-lifestyle-grid { grid-template-columns: 1fr 1fr; grid-template-rows: auto; gap: 10px; }
.zk-lifestyle--count-1 .zk-lifestyle-grid { grid-template-columns: 1fr; max-width: 100%; }
.zk-lifestyle-item { aspect-ratio: 1 / 1; }
.zk-lifestyle-item:nth-child(n) { grid-column: auto; grid-row: auto; }
}
@media (max-width: 380px) {
.zk-lifestyle-grid { gap: 8px; }
}
/* ---- Production process — 4 steps on product page ---- */
.zk-eigene-produktion {
background: #f9f7f4;
border-radius: 20px;
padding: 40px 40px;
margin: 0 auto 40px;
text-align: center;
max-width: 1200px;
width: 100%;
box-sizing: border-box;
}
.zk-eigene-produktion h2 {
font-family: 'Playfair Display', serif; font-size: clamp(24px, 3vw, 32px);
font-weight: 600; color: var(--zk-dark, #2C2420); margin: 0 0 12px;
}
.zk-eigene-produktion > p {
color: var(--zk-brown, #7A6B5D); font-size: 15px;
max-width: 560px; margin: 0 auto 48px;
}
.zk-eigene-steps {
display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px;
}
.zk-eigene-step { padding: 24px; }
.zk-eigene-step-icon {
width: 68px; height: 68px; border-radius: 50%;
background: #fff;
display: flex; align-items: center; justify-content: center;
margin: 0 auto 16px;
box-shadow: 0 4px 16px rgba(42,36,32,.06);
}
.zk-eigene-step-icon svg { width: 28px; height: 28px; color: var(--zk-dark, #2C2420); stroke-width: 2; fill: none; }
.zk-eigene-step-num {
display: block;
font-size: 11px; text-transform: uppercase; letter-spacing: .15em;
color: var(--zk-green, #5B8C5A); font-weight: 600; margin-bottom: 8px;
}
.zk-eigene-step h4 {
font-family: 'Playfair Display', serif;
font-size: 16px; font-weight: 600;
color: var(--zk-dark, #2C2420); margin: 0 0 8px;
}
.zk-eigene-step p {
font-size: 13px; color: var(--zk-brown, #7A6B5D); line-height: 1.6; margin: 0;
}
@media (max-width: 960px) { .zk-eigene-steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .zk-eigene-steps { grid-template-columns: 1fr; } .zk-eigene-produktion { padding: 40px 20px; } }
/* Related products above newsletter */
.single-product .related.products,
.single-product .up-sells.products { margin: 0 0 40px; }
.single-product .related.products > h2,
.single-product .up-sells.products > h2 {
font-family: 'Playfair Display', serif; font-size: clamp(22px, 3vw, 30px);
font-weight: 600; margin: 0 0 24px; color: #2a2a2a;
}
/* v1.8.1 — Ähnliche Produkte / Up-sells: square 1:1 cards (photos are square).
Scope ONLY to single-product page so shop archive keeps 4:5 editorial look. */
.single-product .related.products ul.products,
.single-product .up-sells.products ul.products {
grid-template-columns: repeat(3, 1fr) !important;
}
.single-product .related.products .zk-product-card-image,
.single-product .up-sells.products .zk-product-card-image {
aspect-ratio: 1 / 1;
}
/* Tighter typography for related cards (they're secondary content). */
.single-product .related.products .zk-product-card-info,
.single-product .up-sells.products .zk-product-card-info { padding: 16px 18px 20px; }
.single-product .related.products .zk-product-name,
.single-product .up-sells.products .zk-product-name { font-size: 17px; line-height: 1.3; }
.single-product .related.products .zk-product-desc,
.single-product .up-sells.products .zk-product-desc { -webkit-line-clamp: 2; font-size: 13px; }
@media (max-width: 900px) {
.single-product .related.products ul.products,
.single-product .up-sells.products ul.products {
grid-template-columns: repeat(2, 1fr) !important;
}
}
@media (max-width: 560px) {
.single-product .related.products ul.products,
.single-product .up-sells.products ul.products {
/* Mobile: horizontal carousel — scroll-snap for premium UX. */
display: grid !important;
grid-auto-flow: column !important;
grid-auto-columns: 78% !important;
grid-template-columns: none !important;
overflow-x: auto;
scroll-snap-type: x mandatory;
gap: 14px !important;
padding: 4px 20px 20px !important;
margin: 0 -20px !important;
scrollbar-width: thin;
}
.single-product .related.products ul.products > li.product,
.single-product .up-sells.products ul.products > li.product {
scroll-snap-align: start;
}
}
/* ---- Responsive ---- */
@media (max-width: 960px) {
.zk-product-layout {
grid-template-columns: 1fr;
column-gap: 0;
row-gap: 32px;
}
.zk-meta-items { grid-template-columns: 1fr 1fr; }
}
/* v2.1.19 — Klient: "wchodzi po za margines ekranu chowa sie prawa strona na
* mobilkach". Twarda blokada overflow w prawej kolumnie konfiguratora —
* konfiguracja, formularz, akordeon, pills nie mogą wystawać poza container. */
@media (max-width: 768px) {
.zk-product-layout,
.zk-product-details,
.zk-product-config,
.zk-product-config form.cart,
.zk-va-form,
.zk-va-accordion,
.zk-va-item,
.zk-va-body,
.zk-va-config-hint,
.zk-va-pills,
.zk-va-grid,
.zk-va-grid-3 {
max-width: 100%;
min-width: 0;
box-sizing: border-box;
}
.zk-product-config,
.zk-va-form,
.zk-va-accordion {
overflow-x: hidden;
}
/* Config hint — compress badge so 2/5 AUSGEWÄHLT mieści się w pill bez clip */
.zk-va-config-hint {
padding: 12px 14px;
gap: 4px 12px;
}
.zk-va-config-hint-label { font-size: 16px; }
.zk-va-config-hint-desc { font-size: 13.5px; }
.zk-va-config-hint-progress {
padding: 6px 10px;
font-size: 12px;
gap: 6px;
}
.zk-va-config-hint-progress-count { font-size: 14px; }
.zk-va-config-hint-progress-text { font-size: 10px; letter-spacing: .06em; }
/* Pills — wrap aggressively + smaller min-width */
.zk-va-pills { gap: 6px; }
.zk-va-pill { padding: 9px 12px; min-width: 56px; font-size: 13px; }
}
@media (max-width: 600px) {
.zk-product-title { font-size: 26px; }
.zk-product-price-main { font-size: 26px; }
.zk-product-config .woocommerce-variation-add-to-cart { flex-direction: column; }
.zk-product-config button.single_add_to_cart_button { width: 100%; }
}
/* ============================================================
CART · CHECKOUT · ACCOUNT — brand polish
============================================================ */
/* WC pages use from header.php — match header container width (1280px) */
.woocommerce-cart .zk-main,
.woocommerce-checkout .zk-main,
.woocommerce-account .zk-main { max-width: 1280px; margin: 0 auto; padding: 28px 0 72px; }
/* Hide the WordPress page-title banner on cart/checkout — progress bar + h3 headings
inside the form carry all the context needed. No redundant "Kasse" cream hero. */
.woocommerce-cart .zk-page-header,
.woocommerce-checkout .zk-page-header { display: none !important; }
/* WC input wrapper is display:inline by default which makes width:100% on the input
resolve to ~113px (natural size). Force block so width:100% fills the field column. */
.woocommerce-checkout .woocommerce-input-wrapper,
.woocommerce-cart .woocommerce-input-wrapper {
display: block !important;
width: 100% !important;
}
/* Also clear WC's float:left on form-row children inside our grid columns */
.zk-checkout-section .form-row {
float: none !important;
width: 100% !important;
clear: none !important;
}
.woocommerce-cart h1.entry-title,
.woocommerce-checkout h1.entry-title,
.woocommerce-account h1.entry-title {
font-family: 'Playfair Display', Georgia, serif; font-weight: 600;
font-size: clamp(28px, 4vw, 40px); color: var(--zk-dark, #2C2420);
margin: 8px 0 28px; letter-spacing: .01em;
}
.woocommerce-page .form-row input.input-text,
.woocommerce-page .form-row textarea,
.woocommerce-page .form-row select,
.woocommerce-page .woocommerce-form-row input.input-text,
.woocommerce-page .woocommerce-input-wrapper input.input-text {
width: 100%; box-sizing: border-box;
background: #fff; border: 1px solid #E0D8CD; border-radius: 8px;
padding: 12px 14px; font-size: 15px; color: var(--zk-dark, #2C2420);
font-family: inherit; transition: border-color .15s, box-shadow .15s;
}
.woocommerce-page .form-row input.input-text:focus,
.woocommerce-page .form-row textarea:focus,
.woocommerce-page .form-row select:focus,
.woocommerce-page .woocommerce-form-row input.input-text:focus {
border-color: var(--zk-accent, #C4956A); outline: none;
box-shadow: 0 0 0 3px rgba(196, 149, 106, 0.15);
}
.woocommerce-page .form-row label,
.woocommerce-page .woocommerce-form-row label {
display: block; font-size: 13px; font-weight: 500; color: var(--zk-brown, #7A6B5D);
margin-bottom: 6px; letter-spacing: .02em;
}
.woocommerce-page .required { color: var(--zk-red, #C44B4B); margin-left: 2px; }
.woocommerce-page .button,
.woocommerce-page button[type="submit"],
.woocommerce-page .woocommerce-button,
.woocommerce #place_order,
.woocommerce-cart .wc-proceed-to-checkout .checkout-button,
.woocommerce-account .woocommerce-Button {
background: var(--zk-accent, #C4956A) !important;
color: #fff !important;
border: 1px solid var(--zk-accent, #C4956A) !important;
border-radius: 8px !important;
padding: 12px 24px !important;
font-size: 15px !important;
font-weight: 500 !important;
font-family: inherit !important;
letter-spacing: .02em;
cursor: pointer;
transition: background .15s, border-color .15s;
text-shadow: none !important;
box-shadow: none !important;
}
.woocommerce-page .button:hover,
.woocommerce-page button[type="submit"]:hover,
.woocommerce #place_order:hover,
.woocommerce-cart .wc-proceed-to-checkout .checkout-button:hover {
background: var(--zk-accent-dark, #A67B52) !important;
border-color: var(--zk-accent-dark, #A67B52) !important;
}
.woocommerce-page .button.disabled,
.woocommerce-page .button:disabled { opacity: .55; cursor: not-allowed; }
.woocommerce-page .button.secondary,
.woocommerce-cart a.button.wc-backward {
background: transparent !important;
color: var(--zk-brown-dark, #5C4F43) !important;
border: 1px solid #D4C5B5 !important;
}
.woocommerce-page .button.secondary:hover,
.woocommerce-cart a.button.wc-backward:hover {
background: var(--zk-warm-beige, #E8E0D6) !important;
border-color: var(--zk-taupe, #A89585) !important;
}
.woocommerce-notices-wrapper .woocommerce-message,
.woocommerce-notices-wrapper .woocommerce-info,
.woocommerce-notices-wrapper .woocommerce-error {
background: #FAF7F2; border: 1px solid #EDE5DB; border-radius: 10px;
padding: 14px 18px; color: var(--zk-brown-dark, #5C4F43);
font-size: 14.5px; line-height: 1.55; margin: 0 0 18px;
list-style: none;
}
.woocommerce-notices-wrapper .woocommerce-message { border-left: 4px solid var(--zk-green, #5B8C5A); }
.woocommerce-notices-wrapper .woocommerce-info { border-left: 4px solid var(--zk-accent, #C4956A); }
.woocommerce-notices-wrapper .woocommerce-error { border-left: 4px solid var(--zk-red, #C44B4B); background: #FDF3F3; }
.woocommerce-notices-wrapper .woocommerce-message::before,
.woocommerce-notices-wrapper .woocommerce-info::before,
.woocommerce-notices-wrapper .woocommerce-error::before { display: none; }
.woocommerce-cart table.shop_table {
background: #fff; border: 1px solid #EDE5DB; border-radius: 12px;
border-collapse: separate; border-spacing: 0; overflow: hidden;
width: 100%; margin: 0 0 24px;
}
.woocommerce-cart table.shop_table thead th {
background: var(--zk-cream, #F5F0EB); color: var(--zk-brown-dark, #5C4F43);
padding: 14px 16px; font-size: 12px; font-weight: 600;
text-transform: uppercase; letter-spacing: .06em; border: 0;
}
.woocommerce-cart table.shop_table td {
padding: 18px 16px; vertical-align: middle;
border-top: 1px solid #EDE5DB !important; border-bottom: 0 !important;
font-size: 14.5px; color: var(--zk-dark, #2C2420);
}
.woocommerce-cart table.shop_table tr:first-child td { border-top: 0 !important; }
.woocommerce-cart .product-thumbnail a img { border-radius: 8px; max-width: 88px; height: auto; }
.woocommerce-cart .product-name a { color: var(--zk-dark, #2C2420); text-decoration: none; font-weight: 500; }
.woocommerce-cart .product-name a:hover { color: var(--zk-accent, #C4956A); }
.woocommerce-cart .product-name .variation,
.woocommerce-cart .product-name .wc-item-meta {
margin: 6px 0 0; font-size: 12.5px; color: var(--zk-brown, #7A6B5D); line-height: 1.55;
}
.woocommerce-cart .product-name .variation dt,
.woocommerce-cart .product-name .wc-item-meta-label { font-weight: 500; color: var(--zk-brown-dark, #5C4F43); }
.woocommerce-cart .product-price,
.woocommerce-cart .product-subtotal { font-weight: 500; }
.woocommerce-cart .quantity input.qty { width: 72px; text-align: center; padding: 8px 10px !important; }
.woocommerce-cart .product-remove a.remove {
color: var(--zk-red, #C44B4B); font-size: 18px; font-weight: 400;
text-decoration: none; background: transparent;
}
.woocommerce-cart .product-remove a.remove:hover { color: #9a3939; background: transparent; }
.woocommerce-cart .coupon { display: flex; gap: 8px; align-items: center; margin: 6px 0 0; }
.woocommerce-cart .coupon input[type="text"] { flex: 1 1 auto; max-width: 280px; }
.woocommerce-cart .actions button[name="update_cart"] {
background: transparent !important; color: var(--zk-brown-dark, #5C4F43) !important;
border-color: #D4C5B5 !important;
}
.woocommerce-cart .cart-collaterals { display: grid; gap: 20px; margin-top: 30px; }
@media (min-width: 960px) {
.woocommerce-cart .cart-collaterals { grid-template-columns: 1.3fr 1fr; align-items: start; }
}
.woocommerce-cart .cart_totals {
background: #FAF7F2; border: 1px solid #EDE5DB; border-radius: 12px;
padding: 24px 28px;
}
.woocommerce-cart .cart_totals h2 {
font-family: 'Playfair Display', Georgia, serif; font-weight: 600;
font-size: 22px; margin: 0 0 16px; color: var(--zk-dark, #2C2420);
}
.woocommerce-cart .cart_totals table { width: 100%; border: 0; background: transparent; }
.woocommerce-cart .cart_totals table th,
.woocommerce-cart .cart_totals table td {
padding: 10px 0; border: 0; border-bottom: 1px solid #EDE5DB !important;
font-size: 14.5px;
}
.woocommerce-cart .cart_totals .order-total th,
.woocommerce-cart .cart_totals .order-total td {
font-family: 'Playfair Display', Georgia, serif; font-size: 20px; font-weight: 600;
color: var(--zk-dark, #2C2420); padding-top: 16px; border-bottom: 0 !important;
}
.woocommerce-cart .wc-proceed-to-checkout { padding: 18px 0 0; }
.woocommerce-cart .wc-proceed-to-checkout .checkout-button { width: 100%; padding: 16px 24px !important; font-size: 16px !important; }
.zk-cart-empty { padding: 40px 16px; text-align: center; }
.zk-cart-empty h2 { font-family: 'Playfair Display', Georgia, serif; font-size: 26px; color: var(--zk-dark, #2C2420); margin: 0 0 10px; }
.zk-cart-empty p { color: var(--zk-brown, #7A6B5D); margin: 0 0 20px; }
.zk-cart-empty-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.woocommerce-checkout form.checkout { display: grid; gap: 32px; }
@media (min-width: 960px) {
.woocommerce-checkout form.checkout { grid-template-columns: 1.25fr 1fr; align-items: start; }
.woocommerce-checkout form.checkout #customer_details { grid-column: 1 / 2; }
.woocommerce-checkout form.checkout #order_review_heading,
.woocommerce-checkout form.checkout #order_review { grid-column: 2 / 3; }
/* position:sticky removed — handled at .zk-checkout-summary level */
}
.woocommerce-checkout h3 {
font-family: 'Playfair Display', Georgia, serif; font-weight: 600;
font-size: 20px; color: var(--zk-dark, #2C2420);
margin: 0 0 16px; padding-bottom: 10px; border-bottom: 1px solid #EDE5DB;
}
.woocommerce-checkout .col2-set .col-1,
.woocommerce-checkout .col2-set .col-2 {
background: #FAF7F2; border: 1px solid #EDE5DB; border-radius: 12px;
padding: 22px 26px; margin-bottom: 22px; width: 100%; float: none;
}
.woocommerce-checkout #order_review_heading {
font-family: 'Playfair Display', Georgia, serif; font-size: 22px;
margin: 0 0 12px; color: var(--zk-dark, #2C2420);
}
.woocommerce-checkout #order_review {
background: #fff; border: 1px solid #EDE5DB; border-radius: 12px;
padding: 24px 26px; box-shadow: 0 2px 10px rgba(92, 79, 67, 0.06);
}
.woocommerce-checkout #order_review table.shop_table { width: 100%; border: 0; background: transparent; }
.woocommerce-checkout #order_review table.shop_table th,
.woocommerce-checkout #order_review table.shop_table td {
padding: 10px 0; border: 0; border-bottom: 1px solid #EDE5DB !important;
font-size: 14.5px;
}
.woocommerce-checkout #order_review table.shop_table tfoot .order-total th,
.woocommerce-checkout #order_review table.shop_table tfoot .order-total td {
font-family: 'Playfair Display', Georgia, serif; font-size: 20px;
font-weight: 600; padding-top: 14px; color: var(--zk-dark, #2C2420);
border-bottom: 0 !important;
}
#payment { background: transparent !important; border: 0 !important; padding: 0 !important; }
#payment ul.payment_methods {
background: transparent; border: 1px solid #EDE5DB; border-radius: 10px;
padding: 10px 16px; margin: 0 0 18px; list-style: none;
}
#payment ul.payment_methods li { border-bottom: 1px solid #EDE5DB; padding: 12px 0; }
#payment ul.payment_methods li:last-child { border-bottom: 0; }
#payment ul.payment_methods li input[type="radio"] { margin-right: 10px; accent-color: var(--zk-accent, #C4956A); }
#payment ul.payment_methods li label { display: inline-block; font-weight: 500; color: var(--zk-dark, #2C2420); }
#payment div.payment_box {
background: #FAF7F2; border-radius: 8px; padding: 14px 16px; margin: 10px 0 0;
color: var(--zk-brown-dark, #5C4F43); font-size: 14px; line-height: 1.55;
}
#payment div.payment_box::before { display: none; }
.wc-gzd-checkbox-placeholder .woocommerce-form__label-for-checkbox,
#legal-checkboxes p.form-row {
display: flex; align-items: flex-start; gap: 10px;
background: #FAF7F2; border: 1px solid #EDE5DB; border-radius: 8px;
padding: 12px 14px; margin: 0 0 10px !important; font-size: 13.5px;
color: var(--zk-brown-dark, #5C4F43); line-height: 1.55;
}
.wc-gzd-checkbox-placeholder input[type="checkbox"],
#legal-checkboxes input[type="checkbox"] { accent-color: var(--zk-accent, #C4956A); margin-top: 2px; flex-shrink: 0; }
.wc-gzd-checkbox-placeholder a,
#legal-checkboxes a { color: var(--zk-accent, #C4956A); text-decoration: underline; }
.woocommerce-account .woocommerce-form-login,
.woocommerce-account .woocommerce-form-register,
.woocommerce-account .woocommerce-ResetPassword {
max-width: 480px; margin: 0 auto; background: #FAF7F2;
border: 1px solid #EDE5DB; border-radius: 12px;
padding: 32px 32px 28px;
}
.woocommerce-account .woocommerce-form-login h2,
.woocommerce-account .woocommerce-form-register h2 {
font-family: 'Playfair Display', Georgia, serif; font-size: 24px;
font-weight: 600; margin: 0 0 20px; color: var(--zk-dark, #2C2420);
}
.woocommerce-account .woocommerce-form-login__submit,
.woocommerce-account .woocommerce-form-register__submit { width: 100%; }
.woocommerce-account .lost_password { text-align: center; margin: 14px 0 0; font-size: 13.5px; }
.woocommerce-account .lost_password a { color: var(--zk-accent, #C4956A); text-decoration: underline; }
.woocommerce-account .u-columns,
.woocommerce-account .u-columns > .col-1,
.woocommerce-account .u-columns > .col-2 { float: none; width: 100%; max-width: 480px; margin: 24px auto 0; }
.woocommerce-account .woocommerce-MyAccount-navigation { float: none; width: 100%; margin: 0 0 28px; }
.woocommerce-account .woocommerce-MyAccount-navigation ul {
display: flex; flex-wrap: wrap; gap: 6px;
background: #FAF7F2; border: 1px solid #EDE5DB; border-radius: 12px;
padding: 10px; margin: 0; list-style: none;
}
.woocommerce-account .woocommerce-MyAccount-navigation li { margin: 0; }
.woocommerce-account .woocommerce-MyAccount-navigation li a {
display: block; padding: 10px 16px; border-radius: 8px;
font-size: 14px; color: var(--zk-brown-dark, #5C4F43);
text-decoration: none; font-weight: 500; transition: background .15s, color .15s;
}
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover { background: #E8E0D6; color: var(--zk-dark, #2C2420); }
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a { background: var(--zk-accent, #C4956A); color: #fff; }
.woocommerce-account .woocommerce-MyAccount-content {
float: none; width: 100%;
background: #fff; border: 1px solid #EDE5DB; border-radius: 12px;
padding: 28px 32px; box-shadow: 0 2px 10px rgba(92, 79, 67, 0.04);
}
.woocommerce-account .woocommerce-MyAccount-content h2,
.woocommerce-account .woocommerce-MyAccount-content h3 {
font-family: 'Playfair Display', Georgia, serif; font-weight: 600;
color: var(--zk-dark, #2C2420);
}
.woocommerce-account .woocommerce-MyAccount-content address {
background: #FAF7F2; border-radius: 10px; padding: 16px 18px;
color: var(--zk-brown-dark, #5C4F43); font-style: normal; line-height: 1.65;
}
.woocommerce-orders-table {
background: #fff; border: 1px solid #EDE5DB; border-radius: 10px;
border-collapse: separate; border-spacing: 0; width: 100%;
}
.woocommerce-orders-table thead th {
background: var(--zk-cream, #F5F0EB); color: var(--zk-brown-dark, #5C4F43);
padding: 12px 14px; font-size: 12px; text-transform: uppercase;
letter-spacing: .06em; font-weight: 600; border: 0;
}
.woocommerce-orders-table tbody td {
padding: 14px; border-top: 1px solid #EDE5DB !important; border-bottom: 0 !important;
font-size: 14px;
}
.woocommerce-orders-table tbody tr:first-child td { border-top: 0 !important; }
.woocommerce-orders-table .woocommerce-orders-table__cell-order-actions a.button {
padding: 6px 14px !important; font-size: 13px !important;
}
@media (max-width: 768px) {
.woocommerce-cart table.shop_table thead { display: none; }
.woocommerce-cart table.shop_table tr { display: block; border-bottom: 1px solid #EDE5DB; padding: 12px 0; }
.woocommerce-cart table.shop_table td { display: flex; justify-content: space-between; padding: 8px 12px; border: 0 !important; }
.woocommerce-cart table.shop_table td::before { content: attr(data-title); font-weight: 500; color: var(--zk-brown, #7A6B5D); margin-right: 12px; }
.woocommerce-cart table.shop_table td.product-thumbnail,
.woocommerce-cart table.shop_table td.product-remove { justify-content: flex-start; }
.woocommerce-cart table.shop_table td.product-thumbnail::before,
.woocommerce-cart table.shop_table td.product-remove::before { display: none; }
.woocommerce-checkout form.checkout { grid-template-columns: 1fr; }
.woocommerce-checkout form.checkout #order_review { position: static; }
}
/* ============================================================
ZK CUSTOM CART + CHECKOUT (zk-progress · zk-cart-* · zk-checkout-*)
Template files: woocommerce/cart/cart.php + woocommerce/checkout/form-checkout.php
============================================================ */
/* ---- Progress stepper (Warenkorb → Kasse → Bestätigung) ---- */
.zk-progress {
display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
gap: 14px; margin: 24px auto 28px;
padding: 14px 20px; background: #FAF7F2; border: 1px solid #EDE5DB;
border-radius: 999px;
}
.zk-progress-step {
display: inline-flex; align-items: center; gap: 8px;
font-size: 14px; font-weight: 500; color: var(--zk-taupe, #A89585);
letter-spacing: .01em; white-space: nowrap;
}
.zk-progress-step svg {
width: 18px; height: 18px; flex-shrink: 0;
padding: 6px; border-radius: 50%;
background: #fff; border: 1px solid #E0D8CD; color: var(--zk-taupe, #A89585);
box-sizing: content-box;
}
.zk-progress-step.active { color: var(--zk-dark, #2C2420); font-weight: 600; }
.zk-progress-step.active svg { background: var(--zk-accent, #C4956A); border-color: var(--zk-accent, #C4956A); color: #fff; }
.zk-progress-step.done { color: var(--zk-brown-dark, #5C4F43); font-weight: 500; }
.zk-progress-step.done svg { background: var(--zk-green, #5B8C5A); border-color: var(--zk-green, #5B8C5A); color: #fff; }
.zk-progress-step.done a { color: inherit; text-decoration: none; }
.zk-progress-step.done a:hover { color: var(--zk-accent, #C4956A); }
.zk-progress-line {
flex: 0 0 40px; height: 2px; background: #E0D8CD; border-radius: 999px;
}
.zk-progress-line.done { background: var(--zk-green, #5B8C5A); }
/* ---- Cart page header ---- */
.zk-cart-page-header {
background: var(--zk-cream, #F5F0EB); border-radius: 16px;
padding: 28px 32px; margin: 0 0 28px; text-align: center;
}
.zk-cart-page-header h1 {
font-family: 'Playfair Display', Georgia, serif; font-weight: 600;
font-size: clamp(26px, 3.2vw, 34px); color: var(--zk-dark, #2C2420);
margin: 0; letter-spacing: .01em;
}
/* ---- Cart layout (form grid) ---- */
.zk-cart-layout {
display: grid; gap: 32px; align-items: start;
}
@media (min-width: 900px) {
.zk-cart-layout { grid-template-columns: minmax(0, 1fr) 360px; }
}
/* ---- Left column: items ---- */
.zk-cart-items {
background: #fff; border: 1px solid #EDE5DB; border-radius: 12px;
padding: 6px 22px; box-shadow: 0 2px 10px rgba(92, 79, 67, 0.04);
}
.zk-cart-items-list > .zk-cart-item { display: grid; }
.zk-cart-item {
display: grid; align-items: center; gap: 18px;
grid-template-columns: 96px minmax(0, 1fr) 110px 120px 28px;
grid-template-areas: "img info qty price remove";
padding: 20px 0; border-bottom: 1px solid #EDE5DB;
}
.zk-cart-item:last-child { border-bottom: 0; }
.zk-cart-item-img { grid-area: img; }
.zk-cart-item-img a, .zk-cart-item-img { display: block; }
/* v2.1.4 — cart image contain (klient: image cropped w cart) */
.zk-cart-item-img img {
width: 96px; height: 96px; object-fit: contain;
border-radius: 10px; display: block;
background: linear-gradient(135deg, #faf6f0 0%, #f5ede3 100%);
padding: 4px;
box-sizing: border-box;
}
.zk-cart-item-info { grid-area: info; min-width: 0; }
.zk-cart-item-name a {
font-size: 15.5px; font-weight: 500; color: var(--zk-dark, #2C2420);
text-decoration: none; line-height: 1.4; display: inline-block;
}
.zk-cart-item-name a:hover { color: var(--zk-accent, #C4956A); }
.zk-cart-item-options { margin: 8px 0 0; }
.zk-cart-item-options dl.variation {
display: grid; grid-template-columns: 100px 1fr; gap: 3px 10px;
margin: 0; font-size: 13px; color: var(--zk-brown, #7A6B5D); line-height: 1.5;
}
.zk-cart-item-options dl.variation dt {
font-weight: 600; color: var(--zk-brown-dark, #5C4F43); margin: 0;
}
.zk-cart-item-options dl.variation dd { margin: 0; color: var(--zk-dark, #2C2420); }
.zk-cart-item-options dl.variation dd p { margin: 0; }
.zk-cart-item-price-mobile { display: none; font-weight: 600; color: var(--zk-dark, #2C2420); margin-top: 6px; }
.zk-cart-quantity { grid-area: qty; justify-self: center; }
.zk-cart-quantity .quantity { display: inline-flex; align-items: center; }
.zk-cart-quantity input.qty,
.zk-cart-quantity .quantity input.qty,
.woocommerce-cart .zk-cart-quantity input.qty {
width: 68px !important; height: 40px; text-align: center;
border: 1px solid #E0D8CD !important; border-radius: 8px !important; background: #fff !important;
font-size: 14px; color: var(--zk-dark, #2C2420);
font-family: inherit;
padding: 8px 10px !important;
appearance: textfield; -moz-appearance: textfield;
}
.zk-cart-quantity input.qty::-webkit-outer-spin-button,
.zk-cart-quantity input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.zk-cart-quantity input.qty:focus {
outline: none; border-color: var(--zk-accent, #C4956A);
box-shadow: 0 0 0 3px rgba(196, 149, 106, 0.15);
}
.zk-cart-item-price {
grid-area: price; text-align: right;
font-size: 15px; font-weight: 600; color: var(--zk-dark, #2C2420);
}
.zk-cart-item-remove {
grid-area: remove; justify-self: end;
width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center;
color: var(--zk-taupe, #A89585); font-size: 20px; line-height: 1; font-weight: 300;
background: transparent; border-radius: 50%;
text-decoration: none; transition: background .15s, color .15s;
}
.zk-cart-item-remove:hover { background: #FDF3F3; color: var(--zk-red, #C44B4B); }
/* Cart actions bar (Weiter einkaufen + Aktualisieren row / Coupon row) */
.zk-cart-actions-bar {
margin-top: 8px; padding-top: 18px; border-top: 1px solid #EDE5DB;
display: flex; flex-direction: column; gap: 12px;
}
.zk-cart-actions-top {
display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px;
}
.zk-cart-back-link {
display: inline-flex; align-items: center; gap: 8px;
padding: 10px 18px;
font-size: 14px; color: var(--zk-brown-dark, #5C4F43);
font-weight: 600;
text-decoration: none;
border: 1.5px solid var(--zk-warm-beige, #E8E0D6);
border-radius: 12px;
background: #fff;
transition: border-color .18s, background .18s, color .18s;
}
.zk-cart-back-link:hover {
border-color: var(--zk-accent, #C4956A);
color: var(--zk-accent-dark, #A67B52);
background: var(--zk-cream, #F5F0EB);
}
.zk-cart-back-link svg { flex-shrink: 0; }
.zk-coupon-row {
display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
max-width: 420px;
}
.zk-coupon-row input#coupon_code {
flex: 1 1 200px; min-width: 0; max-width: 260px; height: 42px;
padding: 0 14px; border: 1.5px solid #E0D8CD; border-radius: 8px;
background: #fff; font-size: 14px; color: var(--zk-dark, #2C2420);
font-family: inherit;
}
.zk-coupon-row input#coupon_code:focus {
outline: none; border-color: var(--zk-accent, #C4956A);
box-shadow: 0 0 0 3px rgba(196, 149, 106, 0.15);
}
.zk-coupon-row .zk-btn { flex: 0 0 auto; }
/* Shipping row inside summary (override for cart-shipping.php template) */
.zk-cart-summary-shipping-row {
align-items: flex-start;
}
.zk-cart-summary-shipping-row .zk-cart-summary-shipping-label {
font-weight: 500; color: var(--zk-brown-dark, #5C4F43);
flex: 0 0 auto;
}
.zk-cart-summary-shipping-row .zk-cart-summary-shipping-value {
text-align: right; flex: 1 1 auto; font-size: 14px;
color: var(--zk-dark, #2C2420);
}
.zk-cart-shipping-methods {
list-style: none; margin: 0; padding: 0;
display: flex; flex-direction: column; gap: 4px;
}
.zk-cart-shipping-methods li { line-height: 1.45; }
.zk-cart-shipping-methods label {
display: inline-flex; align-items: baseline; gap: 4px;
cursor: pointer; color: inherit;
}
.zk-cart-shipping-methods .amount,
.zk-cart-shipping-methods bdi {
font-weight: 600; color: var(--zk-green, #5B8C5A);
}
.zk-cart-shipping-destination {
display: block; margin: 4px 0 0;
font-size: 12px; color: var(--zk-brown, #7A6B5D);
}
.zk-cart-shipping-note {
display: block; font-style: italic; font-size: 13px;
color: var(--zk-brown, #7A6B5D);
}
.zk-cart-shipping-contents {
display: block; margin-top: 4px; color: var(--zk-taupe, #A89585);
}
button.zk-update-cart {
background: transparent !important; color: var(--zk-brown-dark, #5C4F43) !important;
border: 1.5px solid #D4C5B5 !important; white-space: nowrap;
}
button.zk-update-cart:hover {
background: var(--zk-warm-beige, #E8E0D6) !important;
border-color: var(--zk-taupe, #A89585) !important;
}
/* ---- Right column: summary card ---- */
.zk-cart-summary {
background: #FAF7F2; border: 1px solid #EDE5DB; border-radius: 12px;
padding: 24px 26px; align-self: start;
box-shadow: 0 2px 10px rgba(92, 79, 67, 0.05);
}
@media (min-width: 900px) {
.zk-cart-summary { position: sticky; top: 110px; }
}
.zk-cart-summary h3 {
font-family: 'Playfair Display', Georgia, serif; font-weight: 600;
font-size: 20px; margin: 0 0 18px; color: var(--zk-dark, #2C2420);
padding-bottom: 12px; border-bottom: 1px solid #EDE5DB;
}
.zk-cart-summary-row {
display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
padding: 10px 0; font-size: 14.5px; color: var(--zk-brown-dark, #5C4F43);
border-bottom: 1px solid rgba(237, 229, 219, 0.7);
}
.zk-cart-summary-row:last-of-type { border-bottom: 0; }
.zk-cart-summary-row > span:last-child { font-weight: 500; color: var(--zk-dark, #2C2420); }
.zk-cart-summary-shipping { color: var(--zk-green, #5B8C5A) !important; font-weight: 600 !important; }
.zk-cart-summary-total {
display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
padding: 16px 0 4px; margin-top: 8px; border-top: 2px solid #EDE5DB;
font-family: 'Playfair Display', Georgia, serif; font-size: 22px;
font-weight: 600; color: var(--zk-dark, #2C2420);
}
.zk-cart-summary-total .woocommerce-Price-amount { font-family: inherit; }
.zk-cart-summary-vat {
font-size: 12px; color: var(--zk-brown, #7A6B5D);
text-align: right; margin: 0 0 16px;
}
/* Proceed-to-checkout button (Zur Kasse) */
.zk-cart-summary .zk-btn--primary,
.zk-cart-summary a.zk-btn.zk-btn--primary.zk-btn--lg {
display: block; width: 100%; text-align: center;
padding: 14px 22px; font-size: 15px; font-weight: 600;
background: var(--zk-accent, #C4956A); color: #fff;
border: 1px solid var(--zk-accent, #C4956A); border-radius: 10px;
text-decoration: none; letter-spacing: .02em;
transition: background .15s, border-color .15s;
}
.zk-cart-summary .zk-btn--primary:hover {
background: var(--zk-accent-dark, #A67B52); border-color: var(--zk-accent-dark, #A67B52);
}
/* Hide WC's default "Weiter zur Kasse" button + wrapper — we use our custom "Zur Kasse" below */
.zk-cart-summary .wc-proceed-to-checkout,
.zk-cart-summary > a.checkout-button,
.zk-cart-summary a.button.checkout-button,
.zk-cart-summary a.wc-forward.checkout-button { display: none !important; }
/* Trust badges row under summary button */
.zk-summary-trust {
display: grid; gap: 10px; margin-top: 18px; padding-top: 16px;
border-top: 1px solid #EDE5DB;
}
.zk-summary-trust-item {
display: flex; align-items: center; gap: 10px;
font-size: 13px; color: var(--zk-brown-dark, #5C4F43);
}
.zk-summary-trust-item svg {
width: 18px; height: 18px; color: var(--zk-accent, #C4956A); flex-shrink: 0;
}
/* ---- Cart recommendations ---- */
.zk-cart-recommendations {
padding: 48px 0 40px;
border-top: 1px solid var(--zk-warm-beige, #E8E0D6);
margin-top: 32px;
}
.zk-cart-rec-title {
font-family: var(--zk-font-heading, 'Playfair Display', Georgia, serif);
font-size: 28px; font-weight: 500;
color: var(--zk-dark, #2C2420);
margin: 0 0 28px;
text-align: center;
}
.zk-cart-rec-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
}
@media (max-width: 900px) { .zk-cart-rec-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .zk-cart-rec-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } }
.zk-cart-rec-card {
display: flex; flex-direction: column;
text-decoration: none;
border-radius: 14px;
overflow: hidden;
background: #fff;
border: 1px solid var(--zk-warm-beige, #E8E0D6);
transition: box-shadow .2s, transform .18s;
}
.zk-cart-rec-card:hover {
box-shadow: 0 6px 20px rgba(92, 79, 67, 0.10);
transform: translateY(-2px);
}
.zk-cart-rec-img { aspect-ratio: 1/1; overflow: hidden; background: linear-gradient(135deg, #faf6f0 0%, var(--zk-cream, #F5F0EB) 100%); }
/* v2.0.9 — contain dla cart-recommendations cards */
.zk-cart-rec-img img { width: 100%; height: 100%; object-fit: contain; display: block; padding: 4px; transition: transform .3s ease; }
.zk-cart-rec-card:hover .zk-cart-rec-img img { transform: scale(1.04); }
.zk-cart-rec-info {
padding: 14px 16px 16px;
display: flex; flex-direction: column; gap: 6px;
}
.zk-cart-rec-name {
font-size: 14.5px; font-weight: 600;
color: var(--zk-dark, #2C2420);
line-height: 1.3;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.zk-cart-rec-price {
font-size: 15px; font-weight: 500;
color: var(--zk-accent-dark, #A67B52);
}
/* ---- Checkout layout (2-col form) ---- */
.zk-checkout-layout {
display: grid; gap: 24px; align-items: start;
}
@media (min-width: 900px) {
.zk-checkout-layout { grid-template-columns: minmax(0, 1fr) 400px; }
}
.zk-checkout-form { display: grid; gap: 14px; }
.zk-checkout-section {
background: #fff; border: 1px solid #EDE5DB; border-radius: 12px;
padding: 18px 22px; box-shadow: 0 2px 10px rgba(92, 79, 67, 0.04);
}
.zk-checkout-section h3,
.zk-checkout-section .woocommerce-billing-fields h3,
.zk-checkout-section .woocommerce-shipping-fields h3 {
font-family: 'Playfair Display', Georgia, serif; font-weight: 600;
font-size: 18px; color: var(--zk-dark, #2C2420);
margin: 0 0 12px; padding: 0 0 10px; border-bottom: 1px solid #EDE5DB;
}
.zk-checkout-section .form-row { margin: 0 0 8px; }
/* Two-col billing name fields (Vorname · Nachname) */
.zk-checkout-section .woocommerce-billing-fields__field-wrapper,
.zk-checkout-section .woocommerce-shipping-fields__field-wrapper,
.zk-checkout-section .woocommerce-additional-fields__field-wrapper {
display: grid; gap: 8px;
}
@media (min-width: 600px) {
.zk-checkout-section .woocommerce-billing-fields__field-wrapper,
.zk-checkout-section .woocommerce-shipping-fields__field-wrapper {
grid-template-columns: 1fr 1fr;
}
.zk-checkout-section .form-row-wide,
.zk-checkout-section .form-row-full { grid-column: 1 / -1; }
.zk-checkout-section .form-row-first { grid-column: 1 / 2; }
.zk-checkout-section .form-row-last { grid-column: 2 / 3; }
}
/* Checkout field inputs: bigger hit area, readable text */
.zk-checkout-section .form-row input.input-text,
.zk-checkout-section .form-row select,
.zk-checkout-section .form-row textarea {
padding: 14px 16px !important;
font-size: 15px !important;
min-height: 52px !important;
}
/* Country Select2 — match input height */
.zk-checkout-section .select2-container--default .select2-selection--single {
height: 52px !important;
}
.zk-checkout-section .select2-container--default .select2-selection--single .select2-selection__rendered {
line-height: 38px !important;
font-size: 15px !important;
}
/* Land/Region label — always block above the select widget */
#billing_country_field label,
#shipping_country_field label {
display: block !important;
margin-bottom: 6px !important;
font-size: 13px !important;
font-weight: 500 !important;
color: var(--zk-brown, #7A6B5D) !important;
}
/* Shipping "send to different address" checkbox */
.zk-checkout-section .woocommerce-shipping-fields h3#ship-to-different-address {
font-size: 15px; font-weight: 500; border: 0; padding: 0; margin: 0 0 10px;
font-family: inherit; color: var(--zk-brown-dark, #5C4F43);
}
.zk-checkout-section .woocommerce-shipping-fields h3#ship-to-different-address label { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
/* Right column: order summary card (reuses .zk-cart-summary base) */
.zk-checkout-summary {
background: #FAF7F2;
display: flex; flex-direction: column;
}
/* Reorder direct children of the summary column.
NOTE: GZD JS moves h3#order_review_heading INSIDE #order_review (adds class wc-gzd-heading-moved),
so there is no direct-child h3 of .zk-checkout-summary left after JS runs. */
.zk-checkout-summary > #order_review { order: 1; }
.zk-checkout-summary > .zk-summary-trust { order: 99; }
/* -----------------------------------------------------------------------
Reorder INSIDE #order_review (.woocommerce-checkout-review-order).
Actual GZD DOM order (confirmed from live HTML source):
1. h3#order_payment_heading "Zahlungsart auswählen"
2. #payment (payment methods)
3. h3#order_review_heading "Ihre Bestellung" ← GZD JS moves here from template
4. input[checkbox] (hidden WC terms checkbox)
5. .wc-gzd-checkbox-placeholder (AGB + empty placeholders)
6. table.shop_table (products + totals)
7. .wc-gzd-order-submit (submit button wrapper)
Desired visual order:
"Ihre Bestellung" → products table → AGB → payment heading → payment → submit
----------------------------------------------------------------------- */
.woocommerce-checkout-review-order {
display: flex !important;
flex-direction: column !important;
}
/* "Ihre Bestellung" heading (GZD moves h3#order_review_heading inside) */
.woocommerce-checkout-review-order > #order_review_heading { order: 0; }
/* hidden WC terms checkbox */
.woocommerce-checkout-review-order > input[type="checkbox"] { order: 0; }
/* products + totals table */
.woocommerce-checkout-review-order > table.shop_table { order: 1; }
/* "Zahlungsart auswählen" heading */
.woocommerce-checkout-review-order > #order_payment_heading { order: 2; }
/* payment methods */
.woocommerce-checkout-review-order > #payment { order: 3; }
/* AGB / legal checkboxes — AFTER payment, just before submit */
.woocommerce-checkout-review-order > .wc-gzd-checkbox-placeholder { order: 4; }
/* submit button wrapper */
.woocommerce-checkout-review-order > .wc-gzd-order-submit { order: 5; }
@media (min-width: 900px) {
.zk-checkout-summary {
position: sticky;
top: 20px;
/* No max-height / overflow-y — column is NOT a scroll panel.
Content flows naturally; page scrolls if content exceeds viewport. */
}
}
.zk-checkout-summary h3 {
font-family: 'Playfair Display', Georgia, serif; font-weight: 600;
font-size: 22px; margin: 0 0 18px; color: var(--zk-dark, #2C2420);
padding-bottom: 12px; border-bottom: 1px solid #EDE5DB;
}
/* Order review table inside checkout summary */
.zk-checkout-summary #order_review {
background: transparent !important; border: 0 !important;
padding: 0 !important; box-shadow: none !important; margin: 0 0 18px;
}
.zk-checkout-summary table.shop_table { background: transparent; border: 0; width: 100%; }
.zk-checkout-summary table.shop_table thead th {
padding: 0 0 10px; font-size: 11px; letter-spacing: .08em;
text-transform: uppercase; font-weight: 600; background: transparent;
color: var(--zk-brown, #7A6B5D); border-bottom: 1px solid #EDE5DB;
}
.zk-checkout-summary table.shop_table tbody .cart_item td {
padding: 14px 0; border: 0; border-bottom: 1px solid rgba(237, 229, 219, 0.6) !important;
vertical-align: top; font-size: 14px;
}
.zk-checkout-summary table.shop_table tbody .cart_item td.product-name {
width: 70%; color: var(--zk-dark, #2C2420); font-weight: 500; line-height: 1.45;
}
.zk-checkout-summary table.shop_table tbody .cart_item td.product-name .product-quantity {
color: var(--zk-brown, #7A6B5D); font-weight: 400; margin-left: 4px;
}
.zk-checkout-summary table.shop_table tbody .cart_item td.product-name .variation,
.zk-checkout-summary table.shop_table tbody .cart_item td.product-name .wc-item-meta {
display: grid; grid-template-columns: auto 1fr; gap: 2px 8px;
margin: 6px 0 0; padding: 0; list-style: none;
font-size: 12px; color: var(--zk-brown, #7A6B5D); line-height: 1.55;
}
.zk-checkout-summary table.shop_table tbody .cart_item td.product-name .variation dt,
.zk-checkout-summary table.shop_table tbody .cart_item td.product-name .wc-item-meta-label {
display: block !important; float: none !important; clear: none !important;
font-weight: 500 !important; color: var(--zk-brown-dark, #5C4F43) !important;
margin: 0 !important; padding: 0 !important; white-space: nowrap;
}
.zk-checkout-summary table.shop_table tbody .cart_item td.product-name .variation dd,
.zk-checkout-summary table.shop_table tbody .cart_item td.product-name .wc-item-meta-value {
display: block !important; float: none !important; clear: none !important;
margin: 0 !important; padding: 0 !important;
}
.zk-checkout-summary table.shop_table tbody .cart_item td.product-name .variation dd p {
display: block; margin: 0; padding: 0;
}
.zk-checkout-summary table.shop_table tbody .cart_item td.product-total {
text-align: right; white-space: nowrap;
font-weight: 600; color: var(--zk-dark, #2C2420);
}
.zk-checkout-summary table.shop_table tfoot th,
.zk-checkout-summary table.shop_table tfoot td {
padding: 10px 0; border: 0; font-size: 14px;
color: var(--zk-brown-dark, #5C4F43);
}
.zk-checkout-summary table.shop_table tfoot tr.cart-subtotal th { font-weight: 500; }
.zk-checkout-summary table.shop_table tfoot tr.cart-subtotal td { text-align: right; font-weight: 500; color: var(--zk-dark, #2C2420); }
.zk-checkout-summary table.shop_table tfoot tr.shipping th,
.zk-checkout-summary table.shop_table tfoot tr.shipping td { font-size: 14px; padding-top: 6px; }
.zk-checkout-summary table.shop_table tfoot tr.order-total th,
.zk-checkout-summary table.shop_table tfoot tr.order-total td {
font-family: 'Playfair Display', Georgia, serif; font-size: 20px;
font-weight: 600; color: var(--zk-dark, #2C2420);
padding-top: 14px; border-top: 2px solid #EDE5DB !important;
}
.zk-checkout-summary table.shop_table tfoot tr.order-total td { text-align: right; }
/* Place order button inside checkout summary */
.zk-checkout-summary #payment #place_order {
display: block; width: 100%; text-align: center;
padding: 16px 22px; font-size: 16px; font-weight: 600;
background: var(--zk-accent, #C4956A) !important; color: #fff !important;
border: 1px solid var(--zk-accent, #C4956A) !important; border-radius: 10px !important;
letter-spacing: .02em; margin-top: 8px;
}
.zk-checkout-summary #payment #place_order:hover {
background: var(--zk-accent-dark, #A67B52) !important;
border-color: var(--zk-accent-dark, #A67B52) !important;
}
/* Product image thumbnail inside order review (Germanized adds .product-thumbnail wrapper) */
.zk-checkout-summary table.shop_table tbody .cart_item td.product-name img,
.zk-checkout-summary table.shop_table tbody .cart_item td.product-thumbnail img {
width: 56px; height: 56px; object-fit: cover;
border-radius: 8px; margin-right: 10px; float: left;
}
.zk-checkout-summary table.shop_table tbody .cart_item td.product-thumbnail {
width: 66px; padding-right: 0 !important;
}
/* ---- Responsive: tablet/mobile stacking ---- */
@media (max-width: 899px) {
.zk-cart-item {
grid-template-columns: 72px minmax(0, 1fr) auto 28px;
grid-template-areas:
"img info info remove"
"img qty price .";
gap: 4px 12px;
align-items: start;
padding: 16px 0;
}
.zk-cart-item-img img { width: 72px; height: 72px; border-radius: 8px; }
.zk-cart-item-name a {
font-size: 14.5px !important; font-weight: 500; line-height: 1.35 !important;
}
.zk-cart-item-options { margin: 4px 0 0 !important; }
.zk-cart-item-options dl.variation {
grid-template-columns: auto 1fr; gap: 1px 6px !important;
font-size: 11.5px !important; line-height: 1.4 !important;
}
.zk-cart-item-options dl.variation dt { font-weight: 500 !important; }
.zk-cart-item-price-mobile { display: none; }
.zk-cart-quantity {
grid-area: qty; justify-self: start; align-self: center; margin-top: 6px;
}
.zk-cart-quantity input.qty,
.zk-cart-quantity .quantity input.qty,
.woocommerce-cart .zk-cart-quantity input.qty {
width: 56px !important; height: 36px !important;
padding: 6px 8px !important; font-size: 13px !important;
}
.zk-cart-item-price {
grid-area: price; text-align: right; align-self: center; margin-top: 6px;
font-size: 14.5px !important; font-weight: 600 !important; white-space: nowrap;
}
.zk-cart-item-remove {
grid-area: remove; align-self: start; justify-self: end;
width: 26px; height: 26px; font-size: 18px;
}
/* Cart items wrapper: tighter padding on tablet */
.zk-cart-items { padding: 4px 16px; }
.zk-cart-page-header { padding: 24px 20px; }
.zk-cart-items-list > .zk-cart-item:first-child { padding-top: 12px; }
}
@media (max-width: 480px) {
.zk-cart-item {
grid-template-columns: 64px minmax(0, 1fr) auto;
grid-template-areas:
"img info remove"
"img qty price";
gap: 4px 10px;
}
.zk-cart-item-img img { width: 64px; height: 64px; }
.zk-cart-item-name a { font-size: 14px !important; }
.zk-cart-item-options dl.variation { font-size: 11px !important; }
.zk-cart-item-price { font-size: 14px !important; }
.zk-cart-quantity input.qty { width: 52px !important; height: 34px !important; }
}
@media (max-width: 560px) {
.zk-progress { gap: 8px; padding: 12px 14px; }
.zk-progress-line { flex-basis: 20px; }
.zk-progress-step { font-size: 12.5px; }
.zk-progress-step svg { padding: 4px; width: 14px; height: 14px; }
.zk-cart-items { padding: 6px 14px; }
.zk-cart-page-header { padding: 20px 18px; }
.zk-cart-summary, .zk-checkout-section { padding: 18px 18px; }
}
/* =====================================================================
ZK A11Y + DE/EU COMPLIANCE POLISH (v1.2.2)
- Darker, WCAG-AA-visible borders on form fields (#B8A890, contrast 3:1 on #fff)
- Force border on