/* Client mockup 2026-08-29, completion layer. No commerce state or data changes. */ /* The retired fixed header reserves 104px and hides search on mobile. The client header is sticky/in-flow: remove that obsolete reservation, not content. */ body:has(.kluzko-header), body:has(.kluzo-checkout-header) { padding-top:0 !important; } body .kluzko-header { height:auto !important; min-height:0 !important; padding:20px 24px !important; } body .kluzko-header__inner { height:auto !important; min-height:0 !important; padding:0 !important; } body .kluzko-header__search-details { display:block !important; } body .kluzko-header__search { min-width:0 !important; min-height:0 !important; height:auto !important; padding:0 !important; } @media(max-width:768px) { body .kluzko-header { padding:16px !important; } } body .wp-site-blocks { padding-block: 0; } body .wp-site-blocks > * { margin-block-start: 0; } body .wp-block-template-part:has(.kluzko-header) { display: contents; } .kluzko-header { color:var(--ink); min-height:0; } .kluzko-header__inner { min-height:0; } .kluzko-header .kluzko-header__wordmark { flex-direction:row; gap:6px; color:var(--ink); } .kluzko-header .kluzko-header__wordmark span { color:var(--ink); font:600 18px/1.5 var(--font-body); letter-spacing:5px; } .kluzko-header .kluzko-header__actions { gap:24px; color:var(--ink); } .kluzko-header .kluzko-header__icon,.kluzko-header .kluzko-icon { color:var(--ink); } .kluzko-header .kluzko-header__icon { width:auto; height:auto; min-width:0; padding:0; border:0; gap:4px; font:400 13px/1.6 var(--font-body); text-decoration:none; } .kluzo-header-contact { font:400 13px/1.6 var(--font-body); color:var(--ink); text-decoration:none; } .kluzko-header__actions .kluzko-header__wishlist,.kluzko-header__actions .kluzko-header__account { display:none; } .kluzko-header .kluzko-header__nav-toggle { background:none; color:var(--ink); border:0; padding:0; min-height:0; font:400 13px/1.6 var(--font-body); letter-spacing:.3px; text-transform:none; } .kluzko-header .kluzko-header__nav { margin:0; padding:0; } .kluzko-header .kluzko-header__nav a { color:var(--ink); } /* Both states share one geometry: the designed header reveals the zero badge (see the [hidden] rule further down), and a revealed badge must sit inline after "Кошик" instead of falling back to the shared absolute pin, which printed it on top of the label. */ .kluzko-header .kluzko-count--cart { display:inline-flex; position:static; background:var(--ink); color:var(--white); border-radius:50%; width:18px; height:18px; align-items:center; justify-content:center; font:500 10px var(--font-body); margin-left:4px; } @media(min-width:769px) { .kluzko-header__actions .kluzko-icon { display:none; } } .kluzo-header-cart-content { display:contents; } /* Original inline word/space/badge baseline inside the unchanged native44px link. Summary is block-level so details does not add an anonymous inline strut. */ @media(min-width:769px) { body .kluzko-header__search-details > summary { display:flex; } body .kluzko-header__cart .kluzo-header-cart-content { display:block; line-height:1.6; } body .kluzko-header .kluzo-header-cart-content .kluzko-count--cart { font-weight:400; line-height:1.6; padding:0; } } .kluzo-client-home { padding:0; max-width:none; margin:0; background:var(--white); } .kluzo-home-hero { position:relative; height:85vh; min-height:600px; max-height:900px; overflow:hidden; background:var(--milk); } .kluzo-home-hero__photo { position:absolute; inset:0; background:#d4c4b8; } .kluzo-home-media__image { display:block; width:100%; height:100%; object-fit:cover; } /* The original hero specifies its focus at center 20%. These HOME-only * positions retain the approved portrait compositions when their responsive * full-bleed slots crop them; editor-selected attachments keep the same slot * geometry and may be replaced without an attachment-id dependency. */ .kluzo-home-hero__photo[data-kluzo-media-state="fallback"] .kluzo-home-media__image { object-position:center 20%; } .kluzo-home-editorial__photo[data-kluzo-media-state="fallback"] .kluzo-home-media__image { object-position:center top; } .kluzo-home-hero__content { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:24px; } .kluzo-home-hero__content h1 { margin:0 0 24px; color:white; font:400 clamp(28px,4.5vw,48px)/1.4 var(--font-display); letter-spacing:0; text-transform:none; } .kluzo-home-hero__cta { display:inline-block; padding:14px 36px; background:white; color:var(--ink); font:500 13px/1.6 var(--font-body); letter-spacing:.5px; text-transform:uppercase; text-decoration:none; } .kluzo-home-hero__cta:hover { background:var(--ink); color:white; } .kluzo-home-products { padding:80px 0; } .kluzo-home-products--milk { background:var(--milk); } .kluzo-section-heading { margin:0 0 48px; text-align:center; } .kluzo-section-heading p { margin:0 0 8px; font:400 11px/1.6 var(--font-body); letter-spacing:2px; color:var(--stone); text-transform:uppercase; } /* Original combined HTML line2038 supersedes its earlier36px cap with32px. */ .kluzo-section-heading h2 { margin:0; font:400 clamp(24px,3vw,32px)/1.6 var(--font-display); color:var(--ink); letter-spacing:0; text-transform:none; } /* Original HOME: 48px wrapper gap + the link's 16px top margin. */ .kluzo-section-link { display:table; margin:64px auto 0; font:500 13px/1.6 var(--font-body); color:var(--ink); text-transform:none; letter-spacing:.5px; text-decoration:none; border-bottom:1px solid currentColor; padding-bottom:2px; } .kluzo-home-products .kluzko-product-grid { margin:0; padding:0; } .kluzo-home-editorial { width:100%; aspect-ratio:21 / 9; min-height:400px; position:relative; background:#e8e4dc; } .kluzo-home-editorial__photo { position:absolute; inset:0; } .kluzo-home-instagram { padding:80px 0 0; } .kluzo-home-instagram__grid { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:4px; } .kluzo-home-instagram__slot { position:relative; aspect-ratio:1; background:var(--milk); display:grid; place-items:center; } .kluzo-home-instagram__slot { overflow:hidden; } .kluzo-home-instagram__slot > img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; } .kluzo-home-instagram__slot:focus-visible .kluzo-home-instagram__overlay { opacity:1; } /* Only the observed empty wpautop node; real caption/content stays visible. */ .kluzo-home-instagram__slot > p:empty { display:none; } .kluzo-home-instagram__slot span { color:var(--stone); font:400 12px var(--font-body); text-transform:uppercase; letter-spacing:1px; } /* Original IG hover changes the overlay only, never the milk underneath. */ .kluzo-home-instagram__slot:hover { background:var(--milk); } /* Original CSS 430-445: full-bleed rgba(26,26,26,.3) tint revealed on tile hover. */ .kluzo-home-instagram__overlay { position:absolute; inset:0; background:rgba(26,26,26,.3); opacity:0; transition:opacity .3s; display:flex; align-items:center; justify-content:center; } .kluzo-home-instagram__slot:hover .kluzo-home-instagram__overlay { opacity:1; } @media (prefers-reduced-motion: reduce) { .kluzo-home-instagram__overlay { transition:none; } } /* Original CSS 441-445: the revealed caption is white 12px with 1px tracking, * not the stone placeholder label under it. */ .kluzo-home-instagram__overlay span { color:#fff; font:400 12px/1.6 var(--font-body); letter-spacing:1px; text-transform:none; } /* The original draws no note under the grid, so a visible one is height we * added. The explanation stays in the accessibility tree — the grid's own * aria-label and the CTA's title say the same thing to every user. */ .kluzo-home-instagram__note { position:absolute; width:1px; height:1px; margin:-1px; padding:0; border:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; } /* Original CSS 446-451 / markup 2669: `.instagram-handle` block, 24px vertical * padding, 13px. The inert variant keeps the same box so the section geometry * does not depend on whether a channel is configured. */ .kluzo-home-instagram__handle { text-align:center; padding:24px 0; font:400 13px/1.6 var(--font-body); letter-spacing:.5px; } /* Original markup 2669 renders `.section-link` inside that box with its * border-bottom removed inline: inline-block, 16px top margin, 2px bottom * padding, 13px/500/.5px. */ .kluzo-home-instagram__cta { display:inline-block; margin-top:16px; padding-bottom:2px; color:var(--ink); text-decoration:none; font-weight:500; letter-spacing:.5px; } .kluzo-home-instagram__cta[aria-disabled="true"] { color:var(--ink); cursor:default; } .kluzo-brand-newsletter { padding:80px 24px; text-align:center; background:var(--white); } .kluzo-brand-newsletter .newsletter-inner { max-width:480px; margin:0 auto; } /* Original CSS 455-500: h3 is 24px Prata with margin-bottom 8 (--space-xs) and * no line-height of its own, so it inherits `body { line-height: 1.6 }` — * measured 24px/38.4px on the normalized original (author/original-lower-metrics.json). * The 1.2 figure carried in lower-findings.md is a misreading and is not used. */ .kluzo-brand-newsletter h3 { margin:0 0 8px; font:400 24px/1.6 var(--font-display); color:var(--ink); } .kluzo-brand-newsletter p { margin:0 0 24px; font:400 13px/1.6 var(--font-body); color:var(--stone); } .kluzo-brand-newsletter .newsletter-form { display:flex; border:1px solid var(--ink); text-align:left; } .kluzo-brand-newsletter .newsletter-form input { flex:1; min-width:0; width:0; border:0; margin:0; padding:14px 16px; background:transparent; color:var(--ink); font:400 14px var(--font-body); border-radius:0; } .kluzo-brand-newsletter .newsletter-form button { margin:0; padding:14px 28px; border:0; border-radius:0; background:var(--ink); color:white; font:500 12px/1.6 var(--font-body); letter-spacing:1px; text-transform:uppercase; opacity:1; } .kluzo-brand-newsletter .newsletter-note { font-size:11px; margin:12px 0 0; } /* HOME only — the shared shell above is the Brand page's and stays byte-stable. * The original declares no line-height on either control, so on HOME both keep * the form-control `normal` the UA gives them (measured: 46px input, 48px * form); the shared 1.6 made the button the tallest item and grew the row. */ .kluzo-brand-newsletter--home .newsletter-form button { line-height:normal; } /* HOME only: the original's newsletter band ends at the form, so the inactive * explanation may not add height there. It stays in the DOM and in the * accessibility tree, and the disabled controls point at it through * aria-describedby. The Brand page keeps its visible note. */ .kluzo-brand-newsletter--home .newsletter-note { position:absolute; width:1px; height:1px; margin:-1px; padding:0; border:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; } .kluzo-client-footer { padding:80px 24px 48px; color:var(--milk); background:var(--ink); } .kluzo-client-footer__inner { max-width:1280px; margin:auto; display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:48px; } .kluzo-client-footer__brand > a { display:block; color:var(--milk); text-decoration:none; font:600 32px/1.15 var(--font-body); } .kluzo-client-footer__brand > a span { display:block; letter-spacing:6px; } .kluzo-client-footer__brand > a span + span { letter-spacing:2px; } /* Original CSS 500-545: brand description 13px/1.6 with the 16px gap coming * from `.footer-brand h3 { margin-bottom: var(--space-sm) }`, column headings * margin-bottom 16, list items margin-bottom 10. */ .kluzo-client-footer__brand > a { margin-bottom:16px; } .kluzo-client-footer__brand p { max-width:280px; margin:0; color:var(--stone); font:400 13px/1.6 var(--font-body); } .kluzo-client-footer__column h2 { margin:0 0 16px; font:500 11px/1.6 var(--font-body); letter-spacing:2px; text-transform:uppercase; color:var(--milk); } .kluzo-client-footer__column ul { margin:0; padding:0; list-style:none; } /* Original li inherits the body's 16px line box; only its link is 13px. */ .kluzo-client-footer__column li { margin-bottom:10px; font:400 16px/1.6 var(--font-body); } .kluzo-client-footer__column a,.kluzo-client-footer__column span { color:var(--stone); font-size:13px; text-decoration:none; } .kluzo-client-footer__column a:hover { color:var(--white); } .kluzo-client-footer__bottom { max-width:1280px; margin:48px auto 0; padding-top:24px; border-top:1px solid rgba(255,255,255,.1); display:flex; justify-content:space-between; align-items:center; gap:24px; color:var(--stone); font:400 12px/1.6 var(--font-body); } /* wpautop wraps the shortcode's footer output and leaves one empty

between * the copyright and the socials, which then becomes a third flex item and the * large blank gap this row shows on mobile. Only the verified-empty paragraph is * removed from layout; any paragraph with real copy is untouched. */ .kluzo-client-footer__bottom > p:empty { display:none; } .kluzo-client-footer__socials { display:flex; flex-wrap:wrap; gap:16px; } .kluzo-client-footer__socials a,.kluzo-client-footer__socials span { color:var(--stone); text-decoration:none; font-size:13px; } .kluzo-checkout-header { padding:24px; border-bottom:1px solid var(--border); background:white; } .kluzo-checkout-header > div { max-width:1200px; margin:auto; display:flex; justify-content:space-between; align-items:center; gap:24px; } .kluzo-checkout-header a { color:var(--ink); text-decoration:none; font:400 12px/1.6 var(--font-body); } .kluzo-checkout-header a.kluzo-checkout-logo { font:600 18px/1.5 var(--font-body); letter-spacing:5px; } .kluzo-checkout-progress { list-style:none; display:flex; justify-content:center; flex-wrap:wrap; gap:20px; padding:28px 16px; margin:0; border-bottom:1px solid var(--border); font:400 11px/1.6 var(--font-body); letter-spacing:1px; color:var(--stone); } .kluzo-checkout-progress li { margin:0; } .kluzo-checkout-progress li[aria-current] { color:var(--ink); font-weight:600; } .kluzo-checkout-progress li + li::before { content:'—'; margin-right:20px; color:var(--border); } .kluzo-checkout-page { margin:0; padding:0; max-width:none; background:white; } .kluzo-checkout-page .wp-block-woocommerce-checkout { max-width:1280px; margin:0 auto; padding:0 24px; } .kluzo-checkout-page .wc-block-components-sidebar-layout { display:grid; grid-template-columns:minmax(0,1fr) 400px; gap:0; margin:0; } .kluzo-checkout-page .wc-block-components-main { width:auto; min-width:0; padding:48px 48px 48px 0; } .kluzo-checkout-page .wc-block-components-sidebar { width:auto; padding:40px 32px; margin:0; background:var(--milk); } .kluzo-checkout-page .wc-block-components-title { font:400 22px/1.5 var(--font-display); text-transform:none; letter-spacing:0; } .kluzo-checkout-page .wc-block-components-order-summary-item__image img { width:56px; height:74px; object-fit:cover; border-radius:0; } .kluzo-checkout-footer { padding:24px; text-align:center; font:400 11px/1.6 var(--font-body); color:var(--stone); border-top:1px solid var(--border); } .woocommerce-cart .wc-block-components-sidebar-layout { display:grid; grid-template-columns:minmax(0,1fr) 380px; gap:48px; } .woocommerce-cart .wc-block-components-main,.woocommerce-cart .wc-block-components-sidebar { width:auto; min-width:0; padding:0; margin:0; } .woocommerce-cart .wc-block-components-sidebar { background:var(--milk); padding:32px; align-self:start; } .woocommerce-cart .wc-block-cart-items__row .wc-block-cart-item__image { width:120px; } .woocommerce-cart .wc-block-cart-items__row .wc-block-cart-item__image img { width:120px; height:160px; object-fit:cover; border-radius:0; } .woocommerce-account .woocommerce-form-login { max-width:460px; margin:32px auto 80px; border:0; padding:0; border-radius:0; } .woocommerce-account .woocommerce-MyAccount-navigation { width:220px; } .woocommerce-account .woocommerce-MyAccount-content { width:calc(100% - 280px); } .kluzko-pdp__gallery-column { position:relative; } /* PDP — the approved source keeps a true half-and-half product grid: a 3:4 * native Woo gallery followed by five real thumbnail controls, never a second * gallery-derived editorial tile block. Woo's default 48% floats and the old * PDP layer's 4:5 crop narrowed the actual image and hid the native rail. */ body .kluzko-pdp__layout { grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:48px; margin-top:-30px; padding:0 24px 80px; } body main.kluzko-pdp > .page-header { padding-inline:24px; } body .kluzko-pdp .kluzko-breadcrumbs__item + .kluzko-breadcrumbs__item::before { content:'·'; } body .kluzko-pdp__gallery-col { position:sticky; top:90px; } body .kluzko-pdp__media-overlay { position:absolute; inset:0 0 auto; width:100%; height:auto; padding:16px; justify-content:flex-start; pointer-events:none; } body .kluzko-pdp__badge-slot .kluzko-badge { padding:5px 14px; font-size:10px; font-weight:400; line-height:1.6; letter-spacing:.5px; text-transform:uppercase; border:1px solid var(--ink); background:var(--white); color:var(--ink); border-radius:20px; } body .kluzko-pdp__gallery .woocommerce-product-gallery__wrapper { border:0 !important; border-radius:0 !important; } body .kluzko-pdp__gallery, body .kluzko-pdp__gallery .woocommerce-product-gallery { width:100% !important; max-width:none !important; float:none !important; margin:0 !important; } body .kluzko-pdp__gallery .flex-viewport { overflow:hidden !important; } body .kluzko-pdp__gallery .woocommerce-product-gallery__image, body .kluzko-pdp__gallery .woocommerce-product-gallery__image:first-child, body .kluzko-pdp__gallery .woocommerce-product-gallery__image.flex-active-slide { width:100% !important; aspect-ratio:3 / 4 !important; margin:0 !important; } /* Flexslider marks the active slide. The old first-child fallback must not * remain painted after Woo switches gallery media for a real variation. */ body .kluzko-pdp__gallery .woocommerce-product-gallery__image:first-child:not(.flex-active-slide) { display:none !important; } body .kluzko-pdp__gallery .woocommerce-product-gallery__image > a, body .kluzko-pdp__gallery .woocommerce-product-gallery__image > a img, body .kluzko-pdp__gallery .woocommerce-product-gallery__wrapper img { width:100% !important; height:auto !important; aspect-ratio:3 / 4 !important; object-fit:cover; } body .kluzko-pdp__gallery .flex-control-thumbs { display:grid !important; grid-template-columns:repeat(5,calc((100% - 32px) / 5)); grid-auto-flow:column; grid-auto-columns:calc((100% - 32px) / 5); overflow-x:auto; scrollbar-width:none; gap:8px; margin:16px 0 0 !important; padding:0; list-style:none; } body .kluzko-pdp .flex-control-thumbs li, body .kluzko-pdp .flex-control-thumbs li:nth-child(n + 5) { display:block !important; width:auto !important; flex:none !important; margin:0 !important; aspect-ratio:3 / 4; } body .kluzko-pdp .flex-control-thumbs li { border:2px solid transparent; } body .kluzko-pdp .flex-control-thumbs li:has(img.flex-active) { border-color:var(--ink); } body .kluzko-pdp .flex-control-thumbs::-webkit-scrollbar { display:none; } body .kluzko-pdp .flex-control-thumbs li img { opacity:1 !important; width:100% !important; height:100% !important; aspect-ratio:3 / 4; object-fit:cover; } body .kluzko-pdp__summary { display:block !important; width:100% !important; max-width:none !important; justify-self:start; padding-top:16px; } /* Original #page-product purchase summary; native fields/events are retained. */ body .kluzko-pdp__summary .kluzko-pdp__title { font-size:clamp(24px,2.5vw,32px) !important; line-height:1.3 !important; font-weight:400; margin:0 0 8px !important; } body .kluzko-pdp__summary .wp-block-woocommerce-product-price { margin:0 0 24px !important; } body .kluzko-pdp__summary .wc-block-components-product-price, body .kluzko-pdp__summary .woocommerce-Price-amount { color:var(--ink) !important; font-family:var(--font-body); font-size:20px !important; font-weight:500 !important; line-height:1.6; letter-spacing:0 !important; } body .kluzko-pdp__summary .kluzko-pdp__atc { width:100%; max-width:440px; margin:0 !important; } body .kluzko-pdp__summary form.cart { display:block; width:100%; margin:0 !important; } body .kluzko-pdp__summary form.cart .variations { width:100%; margin:0 !important; border:0; } body .kluzko-pdp__summary form.cart .variations tbody, body .kluzko-pdp__summary form.cart .variations tr { display:block; } body .kluzko-pdp__summary form.cart .variations tr { margin:0 0 24px; } body .kluzko-pdp__summary form.cart .variations th.label { font-size:12px; line-height:1.6 !important; display:block !important; position:static; width:auto; height:auto; clip-path:none; padding:0 0 8px; text-align:left; } body .kluzko-pdp__summary form.cart .variations th.label label, body .kluzko-pdp__summary .kluzko-sizes__label { font-size:12px; font-weight:500; line-height:1.6; letter-spacing:1px; text-transform:uppercase; color:var(--stone); } body .kluzko-pdp__summary .kluzko-selected-color { color:var(--ink); font-weight:400; letter-spacing:0; text-transform:none; } body .kluzko-pdp__summary form.cart .variations td.value { display:block; padding:0; } body .kluzko-pdp__summary form.cart .variations tr:has(.kluzko-sizes__head) th.label { display:none !important; } body .kluzko-pdp__summary .kluzko-swatches { margin:0; gap:10px; } body .kluzko-pdp__summary .kluzko-swatch { box-shadow:none !important; width:32px; height:32px; min-width:32px; padding:3px; border:2px solid transparent; border-radius:50%; } body .kluzko-pdp__summary .kluzko-swatch.is-selected, body .kluzko-pdp__summary .kluzko-swatch:hover { border-color:var(--ink); } body .kluzko-pdp__summary .kluzko-swatch__dot { width:100%; height:100%; border:1px solid var(--border); border-radius:50%; } body .kluzko-pdp__summary .reset_variations { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); } body .kluzko-pdp__summary .reset_variations:focus-visible { position:static; width:auto; height:auto; clip-path:none; } body .kluzko-pdp__summary .woocommerce-variation-add-to-cart { margin:0 !important; display:flex; flex-direction:column; align-items:stretch; gap:0; } body .kluzko-pdp__summary .kluzko-pdp__one-size { margin:0; } body .kluzko-pdp__summary .kluzko-sizes__head { margin:0 0 8px; } body .kluzko-pdp__summary .kluzko-sizes { gap:8px; margin:0; } body .kluzko-pdp__summary .kluzko-size { height:38px; border-radius:0 !important; min-width:52px; min-height:0; padding:10px 14px; font-size:13px; font-weight:400; line-height:16px; border:1px solid var(--border); } body .kluzko-pdp__summary .kluzko-size.is-selected { border-color:var(--ink); background:var(--ink); color:var(--white); } body .kluzko-pdp__summary .kluzko-pdp__size-guide { display:block; width:fit-content; margin:8px 0 24px; padding:0 0 1px; border:0; border-bottom:1px solid var(--stone); background:transparent; color:var(--stone); font-size:12px; font-weight:400; line-height:1.6; letter-spacing:0; text-transform:none; text-decoration:none; cursor:pointer; list-style:none; } body .kluzko-pdp__summary .kluzko-pdp__size-guide::-webkit-details-marker { display:none; } body .kluzko-pdp__summary .kluzko-pdp__size-guide:focus-visible { outline:2px solid var(--ink); outline-offset:4px; } body .kluzko-pdp__summary .kluzko-pdp__guide-disclosure { display:flow-root; width:100%; max-width:440px; } body .kluzko-pdp__summary .kluzko-pdp__guide-content { margin:0 0 24px; padding:16px; border:1px solid var(--border); color:var(--ink); font-size:13px; line-height:1.6; } body .kluzko-pdp__summary .kluzko-pdp__guide-content p { margin:0; } /* Quantity still submits natively as one; native cart owns quantity editing. */ .single-product main.kluzko-pdp .kluzko-pdp__summary .kluzko-pdp__atc form.cart .quantity { display:none !important; } body .kluzko-pdp__summary .single_add_to_cart_button { height:auto !important; min-height:0; width:100% !important; max-width:440px; margin:0 0 16px !important; padding:16px !important; border:0 !important; border-radius:0 !important; font-size:14px !important; font-weight:500; line-height:18px !important; letter-spacing:.5px; text-transform:uppercase; } body .kluzko-pdp__accordions { max-width:440px; margin:0 !important; border-top:1px solid var(--border); } body .kluzko-pdp__accordions .kluzko-acc { margin:0; border:0; border-bottom:1px solid var(--border); } body .kluzko-pdp__accordions .kluzko-acc__summary { display:flex; justify-content:space-between; align-items:center; list-style:none; padding:16px 0; font-size:13px; line-height:1.6; font-weight:500; letter-spacing:.5px; text-transform:uppercase; color:var(--ink); } body .kluzko-pdp__accordions .kluzko-acc__summary::-webkit-details-marker { display:none; } body .kluzko-pdp__accordions .kluzko-acc__summary::after { content:'+'; color:var(--stone); font-size:18px; line-height:1; font-weight:300; } body .kluzko-pdp__accordions .kluzko-acc[open] > .kluzko-acc__summary::after { content:'+'; transform:rotate(45deg); } body .kluzko-pdp__accordions .kluzko-acc__body { padding:0 0 24px; font-size:13px; line-height:1.8; color:var(--stone); } body .kluzko-pdp__accordions .kluzko-acc__body p { margin:0 0 8px; color:inherit; font:inherit; } body .kluzko-pdp__accordions .kluzko-acc__body p:last-child { margin-bottom:0; } body .kluzko-pdp__accordions .kluzko-acc__body table { width:100%; border-collapse:collapse; border:0; margin:0 0 12px; } body .kluzko-pdp__accordions .kluzko-acc__body td { padding:6px 0; border:0; font:inherit; color:inherit; vertical-align:top; } body .kluzko-pdp__accordions .kluzko-acc__body td:first-child { width:40%; color:var(--ink); padding-right:16px; } @media(max-width:768px) { .kluzko-header { padding:16px; } .kluzko-header__inner { grid-template-columns:auto minmax(0,1fr) auto; gap:12px; } .kluzko-header .kluzko-header__wordmark { justify-content:center; gap:4px; } .kluzko-header .kluzko-header__wordmark span { font-size:15px; letter-spacing:4px; } .kluzko-header .kluzko-header__actions { gap:16px; } .kluzo-header-contact,.kluzo-header-action-label,.kluzko-header__menu-label { display:none; } .kluzko-header .kluzko-header__menu { color:var(--ink); padding:0; width:28px; } .kluzko-header .kluzko-header__menu .kluzko-icon { width:28px; height:20px; } .kluzo-home-instagram__grid { grid-template-columns:repeat(3,minmax(0,1fr)); } .kluzo-client-footer__inner { grid-template-columns:repeat(2,minmax(0,1fr)); gap:48px; } .kluzo-client-footer__brand { grid-column:1/-1; } /* The original keeps this a single row (CSS 556-570). At 390px the row's own * content is wider than the viewport, so it wraps instead of stacking: every * label survives and nothing is clipped. Documented delta, not a waiver. */ .kluzo-client-footer__bottom { flex-wrap:wrap; row-gap:16px; } /* Shared Brand shell: the narrower button keeps the 390px row inside the * viewport. HOME overrides it back to the original 28px below. */ .kluzo-brand-newsletter .newsletter-form button { padding-inline:16px; } .kluzo-brand-newsletter--home .newsletter-form button { padding-inline:28px; } /* Mobile fit adaptation: keep the original button padding without forcing * the input's intrinsic width beyond the viewport. Not a visual waiver. */ body.home .kluzo-brand-newsletter--home .newsletter-form input { min-width:0; width:0; } .kluzo-checkout-header > div { gap:12px; } .kluzo-checkout-header a.kluzo-checkout-logo { font-size:14px; letter-spacing:3px; } .kluzo-checkout-header a:not(.kluzo-checkout-logo) { font-size:10px; max-width:130px; text-align:right; } .kluzo-checkout-page .wc-block-components-sidebar-layout,.woocommerce-cart .wc-block-components-sidebar-layout { display:flex; flex-direction:column; gap:24px; } .kluzo-checkout-page .wc-block-components-main { padding:24px 0; width:100%; } .kluzo-checkout-page .wc-block-components-sidebar { width:100%; padding:24px; } .woocommerce-cart .wc-block-cart-items__row .wc-block-cart-item__image { width:80px; } .woocommerce-cart .wc-block-cart-items__row .wc-block-cart-item__image img { width:80px; height:110px; } .woocommerce-account .woocommerce-MyAccount-navigation,.woocommerce-account .woocommerce-MyAccount-content { width:100%; } .kluzko-pdp__affordance--zoom { max-width:calc(100% - 32px); font-size:10px; } .kluzko-pdp__page-header .kluzko-breadcrumbs { position:relative; inset:auto; height:auto; margin:0; } } /* HOME/chrome: original-derived geometry. core/shortcode wpautop wrappers * around known inline controls must not become unintended layout items. */ body .kluzko-header__inner > p, body .kluzko-header__left > p, body .kluzko-header__actions > p, body .kluzko-catalog-menu__panel > p, body .kluzo-home-hero__content > p, /* The rendered container is `.kluzko-container` and the link class is * `.kluzo-section-link` (inc/client-layout.php) — the older selector pair * matched nothing, so the shortcode's wpautop paragraph stayed a real block * around the section CTA. */ body .kluzo-home-products .kluzko-container > p:has(> .kluzo-section-link) { display:contents; } body .kluzko-header { font-size:16px; line-height:1.6; } body .kluzko-header__inner { min-height:0; } body .kluzko-header__left, body .kluzko-header__actions, body .kluzko-header__search-details { min-height:0 !important; height:auto !important; } body .kluzko-header .kluzko-header__wordmark { position:static !important; inset:auto !important; transform:none !important; display:block !important; width:auto !important; height:auto !important; margin:0; justify-self:center; white-space:nowrap; font:600 18px/1.6 var(--font-body) !important; letter-spacing:5px; } body .kluzko-header__wordmark span { display:contents !important; font:inherit !important; letter-spacing:inherit !important; } body .kluzko-header__search-details > summary, body .kluzko-header__nav-toggle { min-height:0 !important; height:auto !important; } /* Keep the native 44px cart hit area inside the header's 20px padding, * without making its 13px/1.6 text line enlarge the wordmark-led row. */ @media (min-width:769px) { body .kluzko-header__cart { margin-block:calc((1.6em - 44px) / 2); } } body .kluzko-header__cart .kluzko-count--cart[hidden] { display:inline-flex !important; } body .kluzo-home-hero__content { line-height:1.6; } body .kluzo-home-hero h1 { line-height:1.2; } body .kluzo-home-products .kluzko-card { display:block !important; gap:0; border:0; border-radius:0; box-shadow:none; background:transparent; padding:0; } body .kluzo-home-products .kluzko-card__image-wrap { margin-bottom:16px; border-radius:0; border:0; } /* Original CSS 962-969 + HOME markup 2505-2683: a product whose photo has not * been delivered yet occupies the plain 3:4 slot in its band's own colour — * milk in the NEW band, #e8e4df in the bestseller band — with nothing drawn in * it. inc/product-card.php emits this only for HOME and only for a product that * really owns no image, so genuine product photography is never hidden. */ body .kluzo-home-products .kluzko-card__img--pending { display:block; width:100%; height:100%; background:var(--milk); } body .kluzo-home-products--milk .kluzko-card__img--pending { background:#e8e4df; } /* Original HOME 348-363: one 12px offset, 10px/16px regular type. The old * absolutely positioned slot plus the client's absolute badge doubled the * offset, while the retired badge's line-height:1 flattened the pill. */ body .kluzo-home-products .kluzko-card__badge-slot { position:static; } body .kluzo-home-products .kluzko-card__badge-slot > .kluzko-badge { top:12px; left:12px; padding:4px 12px; margin:0; font:400 10px/1.6 var(--font-body); letter-spacing:.5px; color:var(--ink); background:var(--white); border:1px solid var(--ink); border-radius:20px; } body .kluzo-home-products .kluzko-card__badge-slot > .kluzko-badge--sale { color:var(--signal); border-color:var(--signal); } /* The original photo has no gradient veil. Keep the native wishlist control; * dark ink makes it readable without the superseded white-icon scrim. */ body .kluzo-home-products .kluzko-card__scrim { display:none; } body .kluzo-home-products .kluzko-wishlist { color:var(--ink); } body .kluzo-home-products .kluzko-card__info { display:block !important; padding:0 2px !important; } body .kluzo-home-products .kluzko-card__title a { font:inherit !important; letter-spacing:inherit; color:var(--ink); } body .kluzo-home-products .kluzko-card__price { float:none !important; width:100% !important; justify-self:start !important; text-align:left !important; color:var(--ink) !important; letter-spacing:0; } body .kluzo-home-products .kluzko-card__price .amount { font:inherit; color:inherit !important; text-align:inherit; letter-spacing:inherit; } body .kluzo-home-products .kluzko-card__title { font:400 14px/1.6 var(--font-body) !important; margin:0 0 4px !important; letter-spacing:0; } body .kluzo-home-products .kluzko-card__price { font:500 14px/1.6 var(--font-body) !important; margin:0; } /* Original markup 2626 + CSS 1010-1015: the current price is printed first and * the old one follows it, struck through in stone at 400 with an 8px gap. * WooCommerce's own price html is then , so only the *presentation* * order is flipped here — no price value, tax or price-html logic is involved. * `:has(del)` keeps the flex container off the ordinary single/range price, * whose " – " separator is a bare text node and must keep its spaces. */ body .kluzo-home-products .kluzko-card__price:has(del) { display:flex; flex-wrap:wrap; align-items:baseline; } body .kluzo-home-products .kluzko-card__price ins { order:1; background:none; color:inherit; font-weight:500; text-decoration:none; } body .kluzo-home-products .kluzko-card__price del { order:2; margin-left:8px; color:var(--stone); font-weight:400; text-decoration:line-through; opacity:1; } /* Original CSS 1016-1025: `.product-colors { gap:6px; margin-top:8px }` over * 14px dots. The shared catalog rule reserves only 2px above the row. */ body .kluzo-home-products .kluzko-card__swatches { margin-top:8px; } /* Original HOME markup 2595-2652: bestseller cards omit the color row. * Keep native product data and the new-products/catalog/PDP colors unchanged. */ body .kluzo-client-home [data-client-section="bestsellers"] .kluzko-card__swatches { display:none; } /* Original CSS 983-991: the second photo is a full-bleed layer over the first * that cross-fades in on card hover. inc/product-card.php emits it only for a * product that really owns a second gallery attachment, so a card with one * photo keeps exactly one and never fakes the transition. */ body .kluzo-home-products .kluzko-card__image-wrap .kluzko-card__img--hover { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; opacity:0; transition:opacity .5s ease; } body .kluzo-home-products .kluzko-card:hover .kluzko-card__img--hover, body .kluzo-home-products .kluzko-card:focus-within .kluzko-card__img--hover { opacity:1; } @media (prefers-reduced-motion:reduce) { body .kluzo-home-products .kluzko-card__image-wrap .kluzko-card__img--hover { transition:none; } } body .kluzo-home-editorial { background:#d4c4b8; } /* Original CSS (mockup 610-641) is a grid: `.catalog-dropdown-inner` is * `3fr 2fr` with an 80px gap and `.catalog-categories` three equal columns with * a 48px gap, and `.catalog-featured` has no width of its own. The flex/`460px` * override that used to live here only reproduced that grid's 1440px result * (measured 691.19px / 460.80px), so it broke at every other width and pushed * the third link column out of the equal-column rhythm. The authoritative * declarations already sit in kluzo-client-2026-08-29.css:256-281 — this block * now only carries what the original states and that file does not. */ body .kluzko-catalog-menu__featured { margin:0; } body .kluzko-catalog-menu__featured-image { width:100%; aspect-ratio:4/5; background:#d4c4b8; } body .kluzko-catalog-menu__featured-caption { font-size:12px; font-style:normal; color:var(--stone); margin-top:8px; text-align:left; } body .kluzko-catalog-menu__pending { font-size:13px; color:var(--stone); } /* Original CSS (mockup lines 575-668): `.catalog-sale { color: var(--signal) }`. */ body .kluzko-catalog-menu__list a.is-sale { color:var(--signal); } /* The panel is only ever hidden by opacity/visibility now (JS no longer sets * [hidden] once this stylesheet is present), so the 0.3s entry the original * declares actually runs. Reduced motion drops straight to the end state. */ @media (prefers-reduced-motion: reduce) { body .kluzko-catalog-menu__panel, body .kluzko-catalog-menu__scrim { transition:none !important; } } /* The scrim is now a sibling of the header (inc/navigation.php), where the * original's `z-index: -1` would sink it behind the page. 99 puts it above page * content and below the header's own z-index:100 — so below the panel too. */ body .kluzko-catalog-menu__scrim { z-index:99; } /* HOME original presentation (mockup 315-392, 546-570, 610-678). * No extra wishlist heart in the designed HOME cards; named account/wishlist * footer entries and all non-HOME controls remain native and unchanged. * Reset the actual source of the dropdown link shift: UA list padding, not * the already-correct panel grid. The HOME header wrapper contains its scrim. */ body.home .kluzo-home-products .kluzko-card__wishlist-slot { display:none; } body.home .kluzko-catalog-menu__list { margin:0; padding:0; } body.home .kluzko-header > .kluzko-catalog-menu__scrim { z-index:-1; } /* Resolved original cascade, not its superseded first .placeholder rule: * mockup 1653-1660 sets 11px/.5px; body supplies unitless 1.6 line height. * Only decorative labels change — the separate hover caption stays intact. */ body.home .kluzo-home-instagram__slot > span { font-size:11px; line-height:1.6; letter-spacing:.5px; } body.home .kluzo-brand-newsletter--home { border-top:1px solid var(--border); } /* Retain disabled/inert semantics without fading the designed input pixels. */ body.home .kluzo-brand-newsletter--home .newsletter-form--inert input { opacity:1; } @media (max-width:768px) { /* Approved shared-footer supplement owns HOME wrapping too; no page-specific override. */ /* Both axes stay visible, as in the original: the newsletter's intrinsic * mobile overflow must remain reachable, not be cropped at the body/root. * No overflow-y:auto scroll ancestor: sticky remains intact. Exclude the * native lock class so menu/search/popup locks keep their authority. */ html:has(body.home):not(.kluzko-scroll-locked), body.home:not(.kluzko-scroll-locked) { overflow-x:visible; overflow-y:visible; } } /* Original draws no open-state on the Каталог item — it is an there. The * theme's trigger is a