/* ========================================================================== Chowanki — sticky two-row header menu ========================================================================== */ :root{ --chowanki-teal:#09ab9c; --chowanki-teal-dark:#078a7d; --chowanki-ink:#2b2b2b; --chowanki-ink-soft:#5c5c5c; --chowanki-icon:#fef2b8; /* Mobile default — matches the shorter mobile top-bar height set below (78px) plus its 1px border, so body's padding-top (see below) always reserves the right amount of space under the fixed header. The 761px+ override replaces this with the desktop bar's own height. */ --chowanki-header-height:80px; } @media (min-width:761px){ :root{ /* Real rendered height of the two-row header at rest (not .is-stuck): .chowanki-header__top is 100px + .chowanki-header__bottom is 46px (both border-box, so those numbers are literal) = 146px, plus 8px so there's a small visible gap below the header rather than content sitting flush against it. The old 73px value here was stale — about half the header's actual height — so body's padding-top (below) reserved far too little space and the fixed header overlapped the top of every page's content by ~73px. That's a plain CSS/layout mismatch, not a per-browser quirk, so it shows in any browser that has this file's current version loaded — a tab that hasn't reloaded since an earlier, correctly-sized version of this file can still look fine until it's refreshed. */ --chowanki-header-height:150px; } } .chowanki-header *{box-sizing:border-box;} /* Site-wide: don't show the browser's focus ring after a mouse/touch click on a link or button (the "border around links when clicked" most browsers add), but keep it for keyboard (Tab) navigation — that's what :focus-visible detects, so this stays accessible instead of just removing outline:focus entirely. Lives here because chowanki-menu.css is loaded on every page. */ a:focus:not(:focus-visible), button:focus:not(:focus-visible){ outline:none; } /* Reserve space at the top of the page so the fixed header doesn't cover content — desktop only. On mobile this is turned back off in the max-width:760px block below (body{padding-top:0}), per request. */ body{ padding-top:var(--chowanki-header-height); } /* Front page only: a fixed value instead of the shared var, per request. */ body.home{ padding-top:105px; } /* WordPress core's own "skip to content" accessibility anchor — an empty it outputs right after , ahead of everything else on the page including .chowanki-header. */ #wp--skip-link--target{ margin-top:0; } /* Sticky footer: every block-theme template renders header/content/footer as direct children of core's own .wp-site-blocks wrapper (confirmed by reading wp-includes/class-wp-theme-json.php, same as the root-padding fix elsewhere in this file). Earlier this worked by giving .wp-site-blocks its own min-height of 100vh minus whatever body's padding-top happened to be on that page — which meant a separate override for every page that used a different padding-top (the front page's flat 105px, checkout's 0, mobile's extra 4px), and it was still off by however much WordPress's own admin toolbar adds when logged in, since that lives outside body entirely (`html{margin-top:32px}`, core's own CSS). Every one of those was another thing this rule had to know about by name. Simpler and correct regardless of any of that: make body itself the height:100%-of-the-page flex container (box-sizing:border-box, so body's own padding-top comes out of that 100% rather than adding to it — whatever that padding-top is on a given page, no separate cases needed), and let .wp-site-blocks just fill whatever's left of body via flex:1. .chowanki-footer{margin-top:auto} in chowanki-footer.css then pushes the footer to the bottom of THAT — i.e. the bottom edge of body itself — on any page short enough that content doesn't already fill it. .chowanki-header is position:fixed, so — like the rest of this flex layout — it's excluded from flex flow entirely and unaffected. */ html{ height:100%; } body{ min-height:100%; box-sizing:border-box; display:flex; flex-direction:column; } .wp-site-blocks{ display:flex; flex-direction:column; flex:1; } /* Checkout page only — WooCommerce adds this body class automatically. The order-received ("thank you") page is technically a sub-endpoint of Checkout, so WooCommerce puts .woocommerce-checkout on its body too — excluded here via :not() so that page keeps the normal padding-top like every other subpage. */ body.woocommerce-checkout:not(.woocommerce-order-received){ padding-top:0; } @media (max-width:760px){ /* Checkout & order-received ("thank you") pages, mobile only: a small left/right padding instead of the theme's full default gutter. Twenty Twenty-Five (the parent theme) wraps every page's content in a block using the "constrained" layout (see its templates/page.html), which WordPress core (useRootPaddingAwareAlignments, confirmed by reading wp-includes/class-wp-theme-json.php directly) renders with a `.has-global-padding` class and `padding-left/right: var(--wp--style--root--padding-left/right)`. Overriding that custom property alone isn't enough — `.has-global- padding` needs its own direct override too, since the class (and its padding) is applied per-block by core regardless of any var value. */ body.woocommerce-checkout, body.woocommerce-order-received{ --wp--style--root--padding-left:16px; --wp--style--root--padding-right:16px; } body.woocommerce-checkout .has-global-padding, body.woocommerce-order-received .has-global-padding{ padding-left:16px !important; padding-right:16px !important; } } /* Product search results page — smaller, centered heading. The breadcrumb, result count and sort dropdown are removed entirely in functions.php (chowanki_tweak_product_search_results() / chowanki_tweak_product_search_results_blocks()) rather than hidden here. ".search" is WordPress's own body class for any search results page. Two selectors because WooCommerce ships both a classic template (heading wrapped in ".woocommerce-products-header__title") and a "blockified" one (heading is a core Query Title block, ".wp-block-query-title") — this site is on the blockified one, but both are covered either way. */ .search .woocommerce-products-header__title, .search .wp-block-query-title{ font-size:18px; text-align:center; margin:20px auto 10px; /* The block itself carries an inline style="padding-top:var(--wp--preset--spacing--40)" (its own block-spacing setting), which beats a plain class rule regardless of stylesheet order — !important is required here to actually override it. */ padding-top:0 !important; } /* Product grid (the Product Collection block, ".wp-block-woocommerce-product- collection") on the search results page. It's not the first child inside its template's flow container, so core's own global style (".is-layout-flow > *:not(:first-child)") gives it a block-gap margin-top by default — !important to be safe against that, same reasoning as the heading's padding-top above. */ .search .wp-block-woocommerce-product-collection{ margin-top:0 !important; } /* "No products found" message on the search results page (e.g. /?s=gg&post_type=product). This comes from the product-search-results wp_template's own "woocommerce/product-collection-no-results" block — a plain, unclassed

with the Polish text baked directly into the template (not the chowanki_search_no_results_block() filter in functions.php, which only matches WooCommerce's original English wording and never fires here). Centered via the block's own wrapper class rather than the

itself so it stays centered regardless of which paragraph/markup WordPress renders inside it. */ .wp-block-woocommerce-product-collection-no-results{ text-align:center; } .chowanki-header{ font-family:'Manrope', sans-serif; position:fixed; top:0; left:0; right:0; width:100%; z-index:1000; background:#fff; margin:0; transition:box-shadow .25s ease; } .chowanki-header.is-stuck{ box-shadow:0 4px 16px rgba(0,0,0,.08); } /* ---- top row ---- */ .chowanki-header__top{ position:relative; background:var(--chowanki-teal); display:grid; grid-template-columns:1fr auto 1fr; align-items:center; height:100px; padding:0 clamp(16px,4vw,28px); transition:height .25s ease; } @media (min-width:761px){ .chowanki-header.is-stuck .chowanki-header__top{ height:56px; } } .chowanki-header__logo{ grid-column:2; display:flex; justify-content:center; } .chowanki-header__logo img{ height:clamp(44px,5.5vw,58px); width:auto; max-width:100%; display:block; transition:height .25s ease; } @media (min-width:761px){ .chowanki-header.is-stuck .chowanki-header__logo img{ height:28px; } } .chowanki-header__icons{ grid-column:3; display:flex; justify-content:flex-end; align-items:center; gap:clamp(10px,2vw,18px); } .chowanki-icon-btn{ background:none; border:none; cursor:pointer; padding:4px; color:var(--chowanki-icon); display:flex; align-items:center; position:relative; text-decoration:none; } .chowanki-icon-btn svg{ width:20px; height:20px; display:block; stroke:var(--chowanki-icon); } .chowanki-cart-badge{ position:absolute; top:-6px; right:-8px; background:var(--chowanki-icon); color:var(--chowanki-teal-dark); font-size:11px; font-weight:700; line-height:1; padding:3px 5px; border-radius:999px; min-width:16px; text-align:center; } .chowanki-cart-badge:empty{display:none;} /* ---- search takeover: a full-width white panel drops down from the very top of the viewport (above the header itself), with everything below it dimmed by .chowanki-search-backdrop. Both are position:fixed so they sit correctly regardless of scroll position or which header row is showing. ---- */ .chowanki-search-panel{ position:fixed; top:0; left:0; right:0; background:#fff; z-index:1100; transform:translateY(-100%); transition:transform .25s ease; box-shadow:0 12px 28px rgba(0,0,0,.14); } .chowanki-search-panel.open{ transform:translateY(0); } .chowanki-search-panel__row{ display:flex; align-items:center; max-width:1100px; margin:0 auto; padding:18px clamp(16px,4vw,40px); gap:16px; } .chowanki-search-panel__row--head{ justify-content:space-between; padding-bottom:10px; } .chowanki-search-panel__heading{ font-size:15px; font-weight:700; color:var(--chowanki-ink); } .chowanki-search-panel__close{ background:none; border:none; cursor:pointer; padding:4px; color:var(--chowanki-ink); display:flex; flex-shrink:0; } .chowanki-search-panel__close svg{ width:18px; height:18px; display:block; } .chowanki-search-panel__form{ border-top:1px solid #ececec; padding-top:16px; } .chowanki-search-panel__form input[type="search"]{ flex:1; min-width:0; border:none; outline:none; background:transparent; font-family:inherit; font-size:15px; color:var(--chowanki-ink); } .chowanki-search-panel__form input[type="search"]::placeholder{ color:#9c9c9c; } .chowanki-search-panel__form input[type="search"]::-webkit-search-cancel-button{ display:none; } .chowanki-search-panel__submit{ background:none; border:none; cursor:pointer; padding:4px; color:var(--chowanki-ink-soft); display:flex; flex-shrink:0; } .chowanki-search-panel__submit svg{ width:18px; height:18px; display:block; } .chowanki-search-panel__actions{ display:flex; align-items:center; gap:6px; flex-shrink:0; } .chowanki-search-panel__clear{ background:none; border:none; cursor:pointer; padding:4px; color:var(--chowanki-ink-soft); display:flex; } .chowanki-search-panel__clear[hidden]{ display:none; } .chowanki-search-panel__clear svg{ width:14px; height:14px; display:block; } /* ---- live search results: up to 4 matching products shown as a row right under the search input as the visitor types. ---- */ .chowanki-search-panel__results{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; max-width:1100px; margin:0 auto; padding:4px clamp(16px,4vw,40px) 22px; } .chowanki-search-panel__results[hidden]{ display:none; } .chowanki-search-result{ display:flex; align-items:center; gap:12px; text-decoration:none; color:inherit; min-width:0; } .chowanki-search-result__image{ width:56px; height:56px; flex-shrink:0; object-fit:cover; border-radius:8px; background:#f3f3f3; } .chowanki-search-result__info{ display:flex; flex-direction:column; gap:2px; min-width:0; } .chowanki-search-result__name{ font-size:13px; font-weight:600; color:var(--chowanki-ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .chowanki-search-result__price{ font-size:13px; color:var(--chowanki-ink-soft); } @media (max-width:900px){ .chowanki-search-panel__results{ grid-template-columns:repeat(2,1fr); } } @media (max-width:480px){ .chowanki-search-panel__results{ grid-template-columns:1fr; } } /* Dims the rest of the page while the search panel is open; clicking it closes the panel (see chowanki-menu.js). Sits below the panel but above everything else, including the header. */ .chowanki-search-backdrop{ position:fixed; inset:0; background:rgba(20,20,20,.55); opacity:0; visibility:hidden; transition:opacity .25s ease, visibility .25s ease; z-index:1050; } .chowanki-search-backdrop.open{ opacity:1; visibility:visible; } /* Prevents the dimmed page from scrolling behind the open search panel. */ body.chowanki-search-open{ overflow:hidden; } /* Dims the rest of the page while the mobile nav dropdown is open — same idea as .chowanki-search-backdrop above, but sitting at a lower z-index (999, just under .chowanki-header's 1000) instead of a higher one. It's also placed as a sibling *after* in the markup (see chowanki_render_header() in functions.php), not inside it: header is its own stacking context at z-index:1000, so anything inside it — including the open .chowanki-nav dropdown — automatically renders above this backdrop regardless of the backdrop's own z-index, keeping the header and its nav fully visible/undimmed while everything below them dims. Toggled by chowanki-menu.js alongside .chowanki-nav.open. */ .chowanki-nav-backdrop{ position:fixed; inset:0; background:rgba(20,20,20,.55); opacity:0; visibility:hidden; transition:opacity .25s ease, visibility .25s ease; z-index:999; } .chowanki-nav-backdrop.open{ opacity:1; visibility:visible; } /* Prevents the dimmed page from scrolling behind the open nav dropdown. */ body.chowanki-nav-open{ overflow:hidden; } /* ---- discount-code FAB (bottom-right, every page) ---- */ .chowanki-promo-fab{ position:fixed; right:20px; bottom:20px; z-index:1000; width:52px; height:52px; padding:0; border-radius:50%; background:#f47b34; border:none; box-shadow:0 4px 14px rgba(0,0,0,.15); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:transform .2s ease, box-shadow .2s ease, background-color .2s ease; } .chowanki-promo-fab:hover{ transform:scale(1.06); box-shadow:0 6px 18px rgba(0,0,0,.2); } .chowanki-promo-fab__icon{ font-size:22px; font-weight:800; color:#fef2b8; line-height:1; transition:color .2s ease; } /* Open state (aria-expanded is toggled by chowanki-menu.js alongside the bubble's hidden attribute) — swaps to the inverse of the resting colors, like a pressed/active toggle. */ .chowanki-promo-fab[aria-expanded="true"]{ background:#fef2b8; } .chowanki-promo-fab[aria-expanded="true"] .chowanki-promo-fab__icon{ color:#f47b34; } /* Speech-bubble popup with the discount text, anchored above the FAB. */ .chowanki-promo-bubble{ position:fixed; right:20px; bottom:82px; z-index:1000; width:260px; max-width:calc(100vw - 40px); background:#f47b34; color:#fef2b8; padding:14px 16px; border-radius:12px; box-shadow:0 4px 14px rgba(0,0,0,.15); font-size:13px; line-height:1.5; } .chowanki-promo-bubble[hidden]{ display:none; } .chowanki-promo-bubble__text{ margin:0; } .chowanki-promo-bubble__text strong{ font-weight:800; } .chowanki-promo-bubble::after{ content:""; position:absolute; right:20px; bottom:-8px; width:0; height:0; border-left:8px solid transparent; border-right:8px solid transparent; border-top:8px solid #f47b34; } @media (max-width:480px){ .chowanki-promo-fab{ right:12px; bottom:12px; } .chowanki-promo-bubble{ right:12px; bottom:74px; } } /* ---- bottom row / nav ---- */ .chowanki-header__bottom{ position:relative; background:#fff; border-bottom:1px solid #eee; transition:height .25s ease; } @media (min-width:761px){ .chowanki-header__bottom{ height:46px; } .chowanki-header.is-stuck .chowanki-header__bottom{ height:32px; } } .chowanki-nav{ display:flex; justify-content:center; align-items:center; gap:clamp(20px,4vw,44px); height:100%; padding:0 clamp(16px,4vw,28px); margin:0; list-style:none; flex-wrap:wrap; } .chowanki-nav > li{ position:relative; } .chowanki-nav > li > a, .chowanki-nav > li > button.chowanki-nav-toggle{ background:none; border:none; font-family:inherit; display:flex; align-items:center; gap:6px; font-size:15px; font-weight:600; color:var(--chowanki-ink); text-decoration:none; cursor:pointer; padding:6px 2px; line-height:1; transition:font-size .25s ease; } @media (min-width:761px){ .chowanki-header.is-stuck .chowanki-nav > li > a, .chowanki-header.is-stuck .chowanki-nav > li > button.chowanki-nav-toggle{ font-size:12px; } } .chowanki-nav > li > a:hover, .chowanki-nav > li > button.chowanki-nav-toggle:hover, .chowanki-nav > li.open > button.chowanki-nav-toggle{ color:var(--chowanki-teal-dark); } .chowanki-chevron{ width:10px; height:10px; display:block; flex-shrink:0; align-self:center; margin-top:3px; /* optical correction: SVG geometric center sits above the text's visual center */ transition:transform .2s ease; } .chowanki-nav > li.open .chowanki-chevron{ transform:rotate(180deg); } /* ---- dropdown ---- */ .chowanki-submenu{ position:absolute; top:100%; left:50%; transform:translateX(-50%) translateY(6px); background:#fff; border-radius:10px; box-shadow:0 12px 28px rgba(0,0,0,.12); padding:10px; min-width:220px; opacity:0; pointer-events:none; transition:opacity .18s ease, transform .18s ease; z-index:20; margin:0; list-style:none; } .chowanki-nav > li.open .chowanki-submenu{ opacity:1; pointer-events:auto; transform:translateX(-50%) translateY(10px); } .chowanki-submenu a{ display:block; padding:10px 14px; border-radius:6px; color:var(--chowanki-ink-soft); text-decoration:none; font-size:14px; font-weight:500; white-space:nowrap; } .chowanki-submenu a:hover{ background:#f1f8f7; color:var(--chowanki-teal-dark); } /* ---- mobile / responsive ---- */ .chowanki-burger{ display:none; } /* Wrapper around the burger button (see chowanki_render_header() in functions.php) — kept out of the desktop grid the same way the bare button used to be, by staying display:none until the mobile breakpoint below. */ .chowanki-header__burger-wrap{ display:none; } @media (max-width:900px){ .chowanki-nav{ gap:20px; } } @media (max-width:760px){ /* Updated per later request: a small visible gap below the header is wanted on every resolution, mobile included — this used to be 0 (fixed header intentionally overlapping content) but that's now reversed. --chowanki-header-height's mobile default (80px, set in :root above) already matches the mobile top bar's real height (78px + its 1px border — the nav row itself collapses to just that border on mobile, since .chowanki-nav is hidden here in favour of the burger dropdown), so this only needs a small amount added on top for the gap itself. */ body{ padding-top:calc(var(--chowanki-header-height) + 4px); } /* Front page, mobile only, per request: 40px instead of the flat 105px set above (body.home{padding-top:105px}). Same selector specificity as that rule, so being declared later in the file (here) is what makes this win on mobile — desktop keeps the 105px untouched. */ body.home{ padding-top:40px; } /* Reorder the top bar to hamburger / logo / search / cart, with the logo genuinely centered — not just "wherever it lands" — regardless of how wide the burger is versus the search+cart cluster. This reuses the same 3-column grid the desktop header already uses (1fr auto 1fr): both outer columns are forced to the same width, so the auto-sized middle column (the logo) always sits dead-center between them. Only which element sits in the first column changes for mobile — the burger's wrapper div takes it over from the now-hidden empty spacer. .chowanki-header__logo (grid-column:2) and .chowanki-header__icons (grid-column:3, already right-aligned via justify-content:flex-end) are inherited unchanged from the base desktop rules above; only the first column needs setting here. The burger keeps its own wrapper div (rather than sitting bare next to the logo link) so WordPress's wpautop can't merge two adjacent inline tags into a shared

— see the comment above chowanki_render_header()'s ob_start() in functions.php. */ .chowanki-header__top{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; height:78px; /* shorter/slimmer bar than the desktop 100px */ } .chowanki-header__top > div:first-child{ display:none; } .chowanki-header__burger-wrap{ display:flex; grid-column:1; justify-content:flex-start; } .chowanki-burger{ display:flex; } /* Bigger, easier-to-tap icons on mobile — burger, search and cart all share .chowanki-icon-btn, so bumping its svg size here covers all three at once. Overrides the desktop-authored 20px base. */ .chowanki-icon-btn svg{ width:26px; height:26px; } .chowanki-header__icons{ gap:clamp(14px,4vw,22px); } .chowanki-nav{ position:absolute; top:100%; left:0; right:0; background:#fff; flex-direction:column; align-items:stretch; gap:0; display:none; height:auto; padding:8px 16px 16px; max-height:calc(100vh - var(--chowanki-header-height)); overflow-y:auto; box-shadow:0 12px 20px rgba(0,0,0,.08); z-index:5; } .chowanki-nav.open{display:flex;} .chowanki-nav > li{width:100%;} .chowanki-nav > li > a, .chowanki-nav > li > button.chowanki-nav-toggle{ width:100%; justify-content:space-between; padding:12px 4px; border-bottom:1px solid #f0f0f0; } .chowanki-submenu{ position:static; transform:none; box-shadow:none; opacity:1; pointer-events:auto; max-height:0; overflow:hidden; padding:0; transition:max-height .2s ease; } .chowanki-nav > li.open .chowanki-submenu{ /* transform:none has to be repeated here (not just on the plain .chowanki-submenu rule above): the desktop dropdown's own ".chowanki-nav > li.open .chowanki-submenu" rule sets transform:translateX(-50%) translateY(10px), and that selector is more specific than the plain mobile reset, so it was winning back on mobile whenever a submenu was opened — shifting it left by half its own (220px-plus) width, off the edge of the screen. That's what showed as blank space where "Kolorowa łobuziara" etc. should have been. */ transform:none; max-height:220px; padding:6px 0 10px; } } @media (max-width:420px){ .chowanki-header__logo img{height:40px;} /* Kept at the same bigger mobile size set above (max-width:760px) — this used to shrink back down to 18px on small phones, undoing that increase right where it mattered most. */ .chowanki-icon-btn svg{width:24px; height:24px;} } /* ========================================================================== Bank transfer (BACS) details — order-received/thank-you page ========================================================================== */ /* WooCommerce's own markup (WC_Gateway_BACS::bank_details(), in includes/gateways/bacs/class-wc-gateway-bacs.php) for the "Our bank details" box: a plain