/*
Theme Name: Ale Piernik — pracownia
Template: generatepress
Version: 0.2.0
Text Domain: piernik-child
Description: Lokalna prezentacja pracowni Ale Piernik, oparta na blokach WordPress.
*/
/* Order: base, page frame, header, desktop rail, content blocks, page sections (home, /o-nas/ and
   /urodziny/, contact, legal, shop on a phone), footer, phone call bar.
   Each section keeps its own media queries (max-width ones wide to narrow), one source per selector and width
   (pairs like .x and .piernik-content .x are deliberate: the second outranks GeneratePress, the first
   also serves the block editor). */
/* Josefin Sans and Raleway (OFL, variable weight): Google Fonts latin and latin-ext subsets, served locally. */
@font-face{font-family:'Piernik Josefin';src:url('assets/fonts/JosefinSans-latin-ext.woff2?v=e9dfe6f6') format('woff2');font-style:normal;font-weight:100 700;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Piernik Josefin';src:url('assets/fonts/JosefinSans-latin.woff2?v=21efe155') format('woff2');font-style:normal;font-weight:100 700;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Piernik Raleway';src:url('assets/fonts/Raleway-latin-ext.woff2?v=2d603982') format('woff2');font-style:normal;font-weight:100 900;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Piernik Raleway';src:url('assets/fonts/Raleway-latin.woff2?v=b1bef1f0') format('woff2');font-style:normal;font-weight:100 900;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* Palette of variant A: the red of the old site on white. Contrast (WCAG 2.1): text on bg 12.6:1,
   muted on bg 5.7:1 and on surface 5.1:1, primary on bg 5.1:1 and on surface 4.6:1, white on
   primary 5.1:1, white on primary-dark 7.2:1, primary on a photo tile label (white .96) 4.6:1 or more, logo (the circle's red) on bg 5.2:1. Raleway carries the text, Josefin the headings,
   buttons, menu and labels; lining figures everywhere (Raleway defaults to old-style ones). */
:root{--piernik-sans:'Piernik Raleway',Arial,sans-serif;--piernik-heading:'Piernik Josefin',Arial,sans-serif;--piernik-bg:#fff;--piernik-surface:#f4f2f0;--piernik-text:#333;--piernik-muted:#666;--piernik-primary:#c93a27;--piernik-primary-dark:#a5281b;--piernik-logo:#d51c2d;--piernik-border:#e6e0dc;--piernik-width:1180px}

/* Base: elements, links, headings, skip link. */
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:72px}
body{margin:0;background:var(--piernik-bg);color:var(--piernik-text);font-family:var(--piernik-sans);font-size:17px;line-height:1.7;font-variant-numeric:lining-nums}
a{color:var(--piernik-primary);text-underline-offset:.22em}
a:hover{color:var(--piernik-text)}
a:focus-visible,button:focus-visible{outline:3px solid var(--piernik-primary);outline-offset:5px}
img{max-width:100%;height:auto;display:block}
.wp-block-image a:focus-visible{display:block}
/* Headings as in the mockup: Josefin Sans 300, capitals, open tracking; h3 stays in lower case. */
h1,h2,h3{font-family:var(--piernik-heading);font-weight:300;color:var(--piernik-text);letter-spacing:.06em;text-transform:uppercase;line-height:1.2;margin:0 0 24px}
h1{font-size:clamp(28px,2.8vw,38px)}
h2{font-size:clamp(22px,2.2vw,28px)}
h3{font-size:20px;font-weight:400;letter-spacing:.02em;text-transform:none}
p{margin:0 0 24px}
.screen-reader-text{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.screen-reader-text:focus{position:fixed;top:8px;left:8px;z-index:1000;width:auto;height:auto;clip:auto;padding:12px;background:white}
/* On a phone the fixed call bar (below) covers the page foot: body and scroll targets keep clear of it. */
/* Room for the fixed call bar only when it is switched on (option piernik_mobile_call, off by default; Bogumił, 4.11.2026). */
@media(max-width:700px){html:has(body.piernik-call-bar){scroll-padding-bottom:calc(88px + env(safe-area-inset-bottom,0px))}body{font-size:16px}body.piernik-call-bar{padding-bottom:calc(78px + env(safe-area-inset-bottom,0px))}h1{font-size:28px;margin-bottom:20px}h2{font-size:24px}p{margin-bottom:20px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* Page frame: content width and the vertical rhythm of top-level blocks. */
.piernik-wrap,.piernik-content{width:min(var(--piernik-width),calc(100% - 80px));margin-inline:auto}
.piernik-content{padding-block:64px}
/* The last block's own margin would add to the 64 px above the footer. */
.piernik-content>:last-child{margin-bottom:0!important}
.piernik-content>.wp-block-group{margin-bottom:80px}
.piernik-content>.wp-block-group:last-child{margin-bottom:0}
.piernik-content .wp-block-columns{gap:56px}
.piernik-content .wp-block-columns:last-child{margin-bottom:0}
.piernik-content .wp-block-column{min-width:0}
@media(max-width:900px){.piernik-wrap,.piernik-content{width:calc(100% - 48px)}.piernik-content{padding-top:48px}.piernik-content .wp-block-columns{gap:30px}}
/* Phone: the home tiles start right under the logo, as in mock-up D. */
@media(max-width:700px){.piernik-wrap,.piernik-content{width:calc(100% - 40px)}.piernik-content{padding-block:24px 40px}.home .piernik-content{padding-top:12px}.piernik-content>.wp-block-group{margin-bottom:48px}.piernik-content .wp-block-columns{flex-direction:column;gap:26px}}

/* Header D (docs/wdrozenie-wariantu-a.md). One .piernik-header, two layouts. Below 1000 px: the
   full logo in the page (title between lines in Josefin, the red circle under it), cart and
   "Menu" top right; it scrolls away with the page. The logo size follows the kind of page
   (body.piernik-size-full|mid|bar from functions.php); "bar" pages (cart, checkout, account)
   have no big logo and the bar stands from the start. From 1000 px the header is the left rail. */
.piernik-header{position:relative;background:var(--piernik-bg)}
.piernik-header .piernik-wrap{display:flex;flex-direction:column;align-items:center;padding:52px 0 10px}
.piernik-header .piernik-title{display:inline-block;max-width:none;margin:0;padding:6px 4px 4px;border-top:1px solid #333;border-bottom:1px solid #333;font:300 22px/1.25 'Piernik Josefin',Arial,sans-serif;letter-spacing:.06em;text-transform:uppercase;text-align:center;text-decoration:none;color:#333}
.piernik-header .piernik-logo{display:block;width:160px;margin:18px auto 4px}
.piernik-header .piernik-header-note{margin:6px 16px 18px;text-align:center;font-size:14px;line-height:1.4;color:var(--piernik-primary)}
@media(min-width:1000px){.piernik-header .piernik-header-note{display:none}}
.piernik-header .piernik-logo img{width:100%;height:auto;border-radius:50%;transform-origin:50% 100%}
.piernik-header .piernik-tools{position:absolute;top:4px;right:6px;z-index:5}
.piernik-header .piernik-nav ul{list-style:none;margin:0;padding:0}
.piernik-header .piernik-nav a{display:block;font:400 17px/1.4 'Piernik Josefin',Arial,sans-serif;color:#333;text-decoration:none}
.piernik-header .piernik-nav a:hover,.piernik-header .piernik-nav .current-menu-item>a{color:var(--piernik-primary)}
.piernik-rail-box,.piernik-rail-foot{display:none}
/* Cart icon (only with something in the cart) and the "Menu" button, in the header and the bar. */
.piernik-tools{display:flex;align-items:center}
.piernik-cart{position:relative;display:grid;place-items:center;width:44px;height:44px;color:#222;text-decoration:none}
.piernik-cart:hover{color:var(--piernik-primary)}
.piernik-cart svg{display:block;width:24px;height:24px}
.piernik-cart-count{position:absolute;top:3px;right:0;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--piernik-primary);color:#fff;font:600 11px/18px var(--piernik-sans);font-variant-numeric:lining-nums;text-align:center}
.piernik-cart-slot:empty{display:none}
.piernik-menu-toggle,.piernik-menu-toggle:hover,.piernik-menu-toggle:focus{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;width:44px;height:44px;margin:0;padding:7px 0 0;border:0;border-radius:0;background:transparent;color:#222;font:inherit;line-height:1;cursor:pointer}
.piernik-menu-icon,.piernik-menu-icon::before,.piernik-menu-icon::after{display:block;width:22px;height:2px;background:currentColor}
.piernik-menu-icon{position:relative}
.piernik-menu-icon::before,.piernik-menu-icon::after{content:"";position:absolute;left:0}
.piernik-menu-icon::before{top:-7px}
.piernik-menu-icon::after{top:7px}
.piernik-menu-label{font:400 10px/1 'Piernik Josefin',Arial,sans-serif;letter-spacing:.1em;text-transform:uppercase}
@media(max-width:999px){
.piernik-size-mid .piernik-header .piernik-title{font-size:17px}
.piernik-size-mid .piernik-header .piernik-logo{width:100px;margin-top:14px}
/* The menu panel hangs under the "Menu" button: in the header, or under the bar once it is in. */
.piernik-header .piernik-nav{display:none;position:absolute;top:52px;right:8px;z-index:75;min-width:200px;padding:8px 0;background:#fff;border:1px solid #e6e0dc;box-shadow:0 8px 24px rgba(0,0,0,.12)}
.piernik-header .piernik-nav.is-open{display:block;box-shadow:0 8px 24px rgba(0,0,0,.12),0 0 0 100vmax rgba(0,0,0,.25)}
.piernik-header .piernik-nav a{padding:12px 20px}
.piernik-scrolled .piernik-header .piernik-nav,.piernik-size-bar .piernik-header .piernik-nav{position:fixed;top:56px}
.admin-bar.piernik-scrolled .piernik-header .piernik-nav,.admin-bar.piernik-size-bar .piernik-header .piernik-nav{top:88px}
/* Cart pages: no big logo; the header keeps only the menu panel, the bar has its place reserved. */
body[class*="piernik-size-bar"]{padding-top:56px}
.piernik-size-bar .piernik-header .piernik-wrap{padding:0}
.piernik-size-bar .piernik-header .piernik-title,.piernik-size-bar .piernik-header .piernik-logo,.piernik-size-bar .piernik-header .piernik-tools{display:none}
/* Without JavaScript the menu is a plain list of links under the logo. */
.no-js .piernik-menu-toggle{display:none}
.no-js .piernik-header .piernik-nav{display:block;position:static;min-width:0;margin-top:6px;padding:0;background:none;border:0;box-shadow:none}
.no-js .piernik-header .piernik-nav ul{display:flex;flex-wrap:wrap;justify-content:center;gap:0 18px}
.no-js .piernik-header .piernik-nav a{min-height:44px;padding:10px 4px}
}
@media(max-width:782px){.admin-bar.piernik-scrolled .piernik-header .piernik-nav,.admin-bar.piernik-size-bar .piernik-header .piernik-nav{top:102px}}

/* Desktop rail (Bogumił, 14.10.2026, option B; header D from 27.10.2026): from 1000 px the header
   is a left column that scrolls with the page (no fixed panel with its own scroll), at least a
   screen tall: title between lines, the circle, the menu, a box that shows the workshop or the
   cart, phone and social at the foot. */
@media(min-width:1000px){
body[class*="piernik-size-"]{padding-left:248px}
/* The footer spans the whole width, under the rail too (symmetric band, Bogumił 2.11.2026);
   the content is at least a screen tall, so the footer never runs into the rail. */
.piernik-footer{margin-left:-248px}
/* Żywilla's lace along the rail edge, in light linen grey instead of the red she never makes
   ("jasnoszara, imitująca biały", 3.11.2026; tone chosen blind by Opus 4.6); the footer covers it. */
body[class*="piernik-size-"]{position:relative}
body[class*="piernik-size-"]::after{content:"";position:absolute;left:248px;top:0;bottom:0;width:34px;background:url("assets/ornament/krawedz.svg?v=1f8b27aa") repeat-y left top/34px 625px;pointer-events:none}
.piernik-footer{position:relative;z-index:1}
.piernik-content{min-height:100vh}
.piernik-header{position:absolute;left:0;top:0;width:248px;min-height:100vh;display:flex;z-index:60}
.admin-bar .piernik-header{top:32px}
.piernik-header .piernik-wrap{width:100%;min-height:100%;align-items:stretch;margin:0;padding:30px 24px 22px}
.piernik-header .piernik-title{display:block;width:100%}
.piernik-header .piernik-logo{width:150px;margin:24px auto 22px}
.piernik-header .piernik-tools{display:none}
.piernik-header .piernik-nav a{min-height:44px;padding:10px 4px}
.piernik-rail-box:empty{display:none}
.piernik-rail-box{display:block;margin-top:20px;font-size:14px;line-height:1.55}
.piernik-rail-box p{margin:0 0 14px}
.piernik-rail-label{font:400 14px/1.4 var(--piernik-heading)!important;letter-spacing:.12em;text-transform:uppercase;color:var(--piernik-primary);margin-bottom:8px!important}
.piernik-rail-cart{list-style:none;margin:0 0 10px;padding:0}
.piernik-rail-cart li{display:flex;gap:10px;align-items:center;margin-bottom:8px}
.piernik-rail-cart img{width:46px;height:46px;object-fit:cover}
.piernik-rail-total{font-weight:600}
.piernik-rail-button{display:block;text-align:center;background:var(--piernik-primary);color:#fff;padding:11px 10px 9px;font:400 14px/1.4 var(--piernik-heading);letter-spacing:.06em;text-transform:uppercase;text-decoration:none}
.piernik-rail-button:hover{background:var(--piernik-primary-dark);color:#fff}
.piernik-rail-foot{display:block;margin:auto 0 0;padding-top:18px;font-size:13px;line-height:1.65}
.piernik-rail-foot p{margin:0}
.piernik-rail-foot .piernik-rail-social{display:flex;gap:12px;margin-bottom:16px}
.piernik-rail-foot a{color:var(--piernik-primary)}
}
/* Social buttons in the services' usual look: Instagram gradient, Facebook blue, white glyph. */
.piernik-rail-foot .piernik-social,.piernik-footer .piernik-social{display:grid;place-items:center;width:44px;height:44px;border-radius:11px;color:#fff;background:#0866ff;padding:0;text-decoration:none}
.piernik-rail-foot .piernik-social--instagram,.piernik-footer .piernik-social--instagram{background:radial-gradient(circle at 30% 107%,#fdf497 0%,#fdf497 5%,#fd5949 45%,#d6249f 60%,#285aeb 90%)}
.piernik-social svg{width:28px;height:28px;fill:currentColor}
.piernik-social:focus-visible{outline:2px solid var(--piernik-primary);outline-offset:3px}
@media (hover:hover) and (prefers-reduced-motion:no-preference){.piernik-social{transition:transform .3s}.piernik-social:hover{transform:scale(1.1) rotate(4deg)}}
/* Footer: full colour where there is no rail; from 1000 px a repeat of the rail, so a plain white glyph. */
.piernik-footer .piernik-footer-social{display:flex;justify-content:center;gap:14px;margin:10px 0 8px}
.piernik-footer .piernik-social:focus-visible{outline:2px solid #fff;outline-offset:3px}
@media(min-width:1000px){.piernik-footer .piernik-social,.piernik-footer .piernik-social--instagram{width:36px;height:36px;background:none}.piernik-footer .piernik-social svg{width:26px;height:26px}}

/* Bar: 56 px, fixed, slides in from the top once the header has scrolled away (assets/scrollbar.js
   sets body.piernik-scrolled). Phone: small circle, title, cart and "Menu" at the same spot as on
   the logo. From 1000 px the menu stands in line instead of the button. */
.piernik-scrollbar{display:flex;position:fixed;left:0;right:0;top:0;height:56px;z-index:70;align-items:center;gap:10px;padding:0 6px 0 12px;background:var(--piernik-bg);border-bottom:1px solid #e6e0dc;box-shadow:0 2px 10px rgba(0,0,0,.06);transform:translateY(-110%);visibility:hidden;transition:transform .25s ease,visibility 0s .25s}
.piernik-scrolled .piernik-scrollbar{transform:none;visibility:visible;transition:transform .25s ease}
.admin-bar .piernik-scrollbar{top:32px}
.piernik-scrollbar-logo{display:block;flex:none;width:36px}
.piernik-scrollbar-logo img{width:36px;height:36px;border-radius:50%}
.piernik-scrollbar-title{min-width:0;overflow:hidden;padding:3px 2px 1px;border-top:1px solid #333;border-bottom:1px solid #333;font:300 14px/1.25 'Piernik Josefin',Arial,sans-serif;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;text-overflow:ellipsis;text-decoration:none;color:#333}
.piernik-scrollbar-nav{display:none}
.piernik-scrollbar .piernik-tools{margin-left:auto}
@media(max-width:999px){.piernik-size-bar .piernik-scrollbar{transform:none;visibility:visible;transition:none}}
@media(max-width:782px){.admin-bar .piernik-scrollbar{top:46px}}
/* Up to 600 px WordPress lets the admin bar scroll away with the page: the bar then sits at the very top. */
@media(max-width:600px){.admin-bar.piernik-scrolled .piernik-scrollbar{top:0}.admin-bar.piernik-scrolled .piernik-header .piernik-nav{top:56px}}
@media(max-width:360px){.piernik-scrollbar-title{font-size:12px;letter-spacing:.05em}}
@media(min-width:1000px){
.piernik-scrollbar{gap:28px;padding:0 40px}
.piernik-scrollbar-nav{display:block}
.piernik-scrollbar-nav ul{display:flex;gap:26px;list-style:none;margin:0;padding:0}
.piernik-scrollbar-nav a{font:400 16px/1.4 'Piernik Josefin',Arial,sans-serif;text-decoration:none;color:#333}
.piernik-scrollbar-nav a:hover,.piernik-scrollbar-nav .current-menu-item>a{color:var(--piernik-primary)}
.piernik-scrollbar .piernik-menu-toggle{display:none}
}
@media(prefers-reduced-motion:reduce){.piernik-scrollbar,.piernik-scrolled .piernik-scrollbar{transition:none}}

/* Content blocks shared by the pages: buttons (project colours kept above GeneratePress block
   defaults), lead, section intro. */
.wp-block-buttons{gap:20px;margin-block:30px 0}
.wp-block-button__link{background:var(--piernik-primary);color:#fff;border:1px solid var(--piernik-primary);border-radius:0;padding:15px 24px 13px;font:400 15px/1.5 var(--piernik-heading);letter-spacing:.06em;text-transform:uppercase;text-decoration:none}
.wp-block-button__link:hover{background:var(--piernik-primary-dark);border-color:var(--piernik-primary-dark);color:#fff}
.piernik-content .wp-block-button .wp-block-button__link{background-color:var(--piernik-primary);color:#fff}
.piernik-content .wp-block-button .wp-block-button__link:hover{background-color:var(--piernik-primary-dark);color:#fff}
.piernik-lead{font-size:19px;line-height:1.65;max-width:37em;color:var(--piernik-muted)}
.piernik-section-intro{max-width:670px;margin-bottom:36px}
.piernik-section-intro p{color:var(--piernik-muted)}
@media(max-width:700px){.wp-block-buttons{margin-top:24px}.wp-block-button__link{padding:12px 22px}.piernik-call-bar .wp-block-button__link{scroll-margin-bottom:calc(88px + env(safe-area-inset-bottom,0px))}.piernik-content .wp-block-button__link{min-height:44px}.piernik-lead{font-size:17px;line-height:1.65}.piernik-section-intro{margin-bottom:26px}}

/* Home tiles (variant A, mock-up D; docs/wdrozenie-wariantu-a.md, E4). Each tile is a core block
   (group, or cover for a photo) with one paragraph link; the link's ::after stretches over the
   whole tile, so the tile has one link name and one focus ring. Grid: 2 columns on a phone (tiles
   span both, social tiles one each), 4 from 701 px, 6 from 1000 px (three tiles in a row, the two
   social tiles share the last third). The grid sits on the group's __inner-container, which a
   classic theme adds on the front end and in the editor alike. */
.piernik-tiles>.wp-block-group__inner-container{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.piernik-content .piernik-tiles{margin-bottom:56px}
.piernik-tile.wp-block-group,.piernik-tile.wp-block-cover{position:relative;isolation:isolate;grid-column:span 2;display:grid;place-items:center;min-height:150px;margin:0;padding:8px;overflow:hidden;background:var(--piernik-primary);color:#fff}
.piernik-tile>.wp-block-group__inner-container,.piernik-tile .wp-block-cover__inner-container{position:static;width:auto;max-width:none;margin:0;padding:0}
.piernik-tile .wp-block-cover__image-background,.piernik-tile .wp-block-cover__background{z-index:-1}
.piernik-tile--mandala.wp-block-group{background:#fff url("assets/mandala.webp?v=735822c6") center/cover no-repeat}
.piernik-tile--crop-top.wp-block-group{background-position:0 0}
.piernik-tile--crop-bottom.wp-block-group{background-position:50% 100%}
.piernik-nowrap{white-space:nowrap}
/* The old site's film on /o-nas/, spaced like the award box above it. */
.piernik-content .piernik-film{margin:0 0 78px!important}
@media(max-width:700px){.piernik-content .piernik-film{margin-bottom:50px!important}}
/* Film cover: the video's own thumbnail with a YouTube-style play button in the middle, where
   visitors expect it (Bogumił, 2.11.2026); YouTube's player replaces it on click. */
.piernik-film .wp-block-embed__wrapper:has(.piernik-film-cover)::before{content:none}
.piernik-film-cover{position:relative;aspect-ratio:16/9;background:var(--piernik-surface)}
.piernik-film-cover iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.piernik-film-play{display:block;position:relative;width:100%;height:100%;padding:0;border:0;background:none;cursor:pointer}
.piernik-film-play img{display:block;width:100%;height:100%;object-fit:cover;margin:0}
.piernik-film-icon{position:absolute;left:50%;top:50%;width:68px;height:48px;margin:-24px 0 0 -34px;border-radius:14px;background:#f00;transition:transform .2s ease}
.piernik-film-icon::after{content:"";position:absolute;left:27px;top:14px;border-style:solid;border-width:10px 0 10px 17px;border-color:transparent transparent transparent #fff}
.piernik-film-play:hover .piernik-film-icon,.piernik-film-play:focus-visible .piernik-film-icon{transform:scale(1.08)}
.piernik-film-play:focus-visible{outline:2px solid var(--piernik-primary);outline-offset:3px}
@media(prefers-reduced-motion:reduce){.piernik-film-icon{transition:none}}
.piernik-tile-label{margin:0;text-align:center;font:400 clamp(20px,6vw,30px)/1.2 var(--piernik-sans);letter-spacing:.02em;text-transform:uppercase}
.piernik-tile-label a{display:inline-block;padding:14px 26px;border:4px solid #fff;color:#fff;text-decoration:none}
.piernik-tile-label a::after{content:"";position:absolute;inset:0;z-index:1}
.piernik-tile-label a:focus-visible{outline:0}
/* The ring sits inside the tile (dark, then white), visible on red, mandala and photo alike. */
.piernik-tile-label a:focus-visible::after{outline:3px solid var(--piernik-text);outline-offset:-3px;box-shadow:inset 0 0 0 6px #fff}
.piernik-tile--mandala .piernik-tile-label a{background:var(--piernik-primary);border-width:3px;box-shadow:0 0 0 4px var(--piernik-primary)}
.piernik-tile--dark .piernik-tile-label a{background:#111;box-shadow:0 0 0 4px #111}
.piernik-tile--photo .piernik-tile-label{font-size:clamp(16px,4.6vw,22px)}
.piernik-tile--photo .piernik-tile-label a{background:rgba(255,255,255,.96);border-color:var(--piernik-primary);color:var(--piernik-primary)}
/* Stara strona: etykieta kafla na hover odwraca kolory i "wyskakuje" (Elementor bounce-in:
   scale(1.2), 0.5s, cubic-bezier(.47,2.02,.31,-.36)). Nowe etykiety są względem kafla szersze niż stare, więc skala zależy od zapasu: od 1200 px 1.1 dla kafli czerwonych i z mandalą, 1.05 dla zdjęć, czarny (Zamów online!, 8 px zapasu) bez skoku; poniżej 1200 px kafle są za wąskie i zostaje samo odwrócenie kolorów. Kolory płynnie 0.3s, skok tylko z myszą. */
.piernik-tile-label a{transition:background-color .3s ease,color .3s ease,border-color .3s ease,box-shadow .3s ease}
/* Odwrócenie: hover, fokus z klawiatury i dotknięcie (:active). */
/* .piernik-tiles podnosi specyficzność ponad .piernik-tile--mandala/--dark .piernik-tile-label a.
   Kafel ze zdjęciem: na starej stronie tylko skok, bez zmiany kolorów (już jest biały z czerwoną ramką). */
.piernik-tiles .piernik-tile:not(.piernik-tile--photo) .piernik-tile-label a:is(:hover,:focus-visible,:active){background:#fff;color:var(--piernik-primary);border-color:currentColor}
.piernik-tiles .piernik-tile--dark .piernik-tile-label a:is(:hover,:focus-visible,:active){color:#111}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .piernik-tile{--piernik-tile-pop:1}
  .piernik-tile-label a{transition-property:background-color,color,border-color,box-shadow,transform;transition-duration:.3s,.3s,.3s,.3s,.5s}
  .piernik-tile-label a:hover{transform:scale(var(--piernik-tile-pop));transition-timing-function:ease,ease,ease,ease,cubic-bezier(.47,2.02,.31,-.36)}
  /* transform robi z linku blok zawierający, więc ::after (link na cały kafel) skurczyłby się do
     etykiety; na czas hovera rozciągamy go poza etykietę, a overflow:hidden kafla przycina go do kafla. */
  .piernik-tile-label a:hover::after{inset:-100vmax}
  @media (min-width:1200px){.piernik-tile{--piernik-tile-pop:1.1}.piernik-tile--photo{--piernik-tile-pop:1.05}.piernik-tile--dark{--piernik-tile-pop:1}}
}
/* Menu w lewym pasie (od 1000 px): pozycja odsuwa się o .3em, .5s ease-in-out (Verbosa: #access a:hover span{padding-left:.3em}). */
@media (min-width:1000px){
  .piernik-header .piernik-nav a{transition:color .3s ease,padding-left .5s ease-in-out}
  .piernik-header .piernik-nav a:hover{padding-left:.3em}
}
@media (prefers-reduced-motion:reduce){.piernik-header .piernik-nav a{transition:color .3s}.piernik-header .piernik-nav a:hover{padding-left:0}}
/* Przyciski treści: wypełnione -> obrys (stara strona, przycisk globalny 1868: tło przezroczyste, tekst czerwony). */
.wp-block-button__link,.piernik-shop-teaser .piernik-shop-teaser__button{transition:background-color .3s,color .3s,border-color .3s}
.piernik-content .wp-block-button .wp-block-button__link:is(:hover,:active),.piernik-shop-teaser .piernik-shop-teaser__button:is(:hover,:active){background:#fff;color:var(--piernik-primary);border-color:var(--piernik-primary)}
/* Przy 1000-1199 px kafel ma ok. 220 px; 30 px etykiety wypychało "Warsztaty urodzinowe" poza kafel. */
@media (min-width:1000px) and (max-width:1199px){.piernik-tile-label{font-size:24px}.piernik-tile--photo .piernik-tile-label{font-size:19px}}
/* „Pierniki reklamowe” (the old name, longer than „dla firm”) needs a smaller label there too. */
@media (min-width:1000px) and (max-width:1099px){.piernik-tile--red .piernik-tile-label{font-size:20px}}
/* Editor: the group layout centres each child with auto margins and caps its width, which
   shrinks a grid item. */
.editor-styles-wrapper .piernik-tiles>.wp-block-group__inner-container>*{width:auto;max-width:none;margin:0!important}
.editor-styles-wrapper .piernik-tile>.wp-block-group__inner-container,.editor-styles-wrapper .piernik-tile .wp-block-cover__inner-container{width:100%}
.editor-styles-wrapper .piernik-tile .piernik-tile-label{max-width:none;margin:0!important}
@media(min-width:701px){.piernik-tiles>.wp-block-group__inner-container{grid-template-columns:repeat(4,minmax(0,1fr))}.piernik-tile.wp-block-group,.piernik-tile.wp-block-cover{min-height:200px}}
@media(min-width:1000px){.piernik-tiles>.wp-block-group__inner-container{grid-template-columns:repeat(6,minmax(0,1fr));gap:16px}.piernik-tile.wp-block-group,.piernik-tile.wp-block-cover{min-height:215px}}
@media(max-width:700px){.piernik-content .piernik-tiles{margin-bottom:40px}}

/* Home shop strip, variant A (Bogumił, 14.10.2026): two rows of four on wide screens, the last card
   leads to the whole shop; up to 860px a sideways list with scroll-snap that bleeds to the page gutter
   (24px tablet, 20px phone) so the next card's edge shows. The button sits at the card foot. */
.piernik-shop-teaser{margin-bottom:80px}
.piernik-shop-teaser__note{margin:0 0 22px;color:var(--piernik-muted)}
.piernik-shop-teaser__list{list-style:none;margin:28px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:40px 24px}
.piernik-shop-teaser__item{display:flex;flex-direction:column;min-width:0}
.piernik-shop-teaser__link{display:block;text-decoration:none;color:var(--piernik-text)}
.piernik-shop-teaser__link:hover{color:var(--piernik-primary)}
.piernik-shop-teaser__item img{width:100%;aspect-ratio:1;object-fit:cover;margin:0 0 14px;background:var(--piernik-surface)}
.piernik-shop-teaser__name{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;min-height:2.6em;font:400 17px/1.3 var(--piernik-heading);letter-spacing:.02em}
.piernik-shop-teaser__price{display:block;margin:6px 0 14px;font-size:16px;font-weight:600;color:var(--piernik-primary)}
.piernik-shop-teaser__button{display:flex;align-items:center;justify-content:center;min-height:44px;margin-top:auto;padding:10px 14px 8px;border:2px solid var(--piernik-primary);color:var(--piernik-primary);font:400 14px/1.4 var(--piernik-heading);letter-spacing:.06em;text-transform:uppercase;text-decoration:none;text-align:center}
.piernik-shop-teaser .piernik-shop-teaser__button{background:var(--piernik-primary);color:#fff}
.piernik-shop-teaser .piernik-shop-teaser__button:hover{background:var(--piernik-primary-dark);border-color:var(--piernik-primary-dark)}
.piernik-shop-teaser .added_to_cart{display:none}
.piernik-shop-teaser__button.loading{opacity:.6;pointer-events:none}
.piernik-shop-teaser__button.added{background:var(--piernik-primary);color:#fff}
.piernik-shop-teaser__item--all{background:var(--piernik-surface)}
.piernik-shop-teaser__all{display:block;text-decoration:none}
.piernik-shop-teaser__mosaic{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:6px;margin-bottom:8px}
.piernik-shop-teaser__item .piernik-shop-teaser__mosaic img{margin:0}
.piernik-shop-teaser__all-label{display:block;padding:0 18px 22px;font:400 19px/1.3 var(--piernik-heading);letter-spacing:.06em;text-transform:uppercase;color:var(--piernik-primary)}
.piernik-shop-teaser__all:hover .piernik-shop-teaser__all-label{color:var(--piernik-primary-dark)}
/* Phone and tablet: the goods stand in a grid under the tiles, not a sideways strip (Bogumił,
   3.11.2026: „w kolumnie pod kaflami”, „to ma się kupować”): every price and button in view
   while scrolling down, two columns on a phone like the shop, four from 601 px. */
@media(max-width:860px){.piernik-shop-teaser .piernik-shop-teaser__list{gap:28px 14px}.piernik-shop-teaser__item img{margin-bottom:10px}}
@media(max-width:600px){.piernik-shop-teaser{margin-bottom:32px}.piernik-shop-teaser .piernik-shop-teaser__list{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:22px}.piernik-shop-teaser__name{font-size:16px}.piernik-shop-teaser__price{margin:4px 0 10px;font-size:15px}.piernik-shop-teaser__button{padding-inline:6px}.piernik-shop-teaser__all-label{padding:0 12px 16px;font-size:16px}}
/* "Zobacz też" under a product: one sideways strip at every width, the next card peeking at the
   edge, "Zobacz wszystkie" last (Bogumił, 3.11.2026: „może lepiej dać jakiś scroll”); on a
   computer arrows from assets/product-gallery.js, a trackpad scrolls it natively. */
.piernik-shop-teaser--related{position:relative;grid-column:1/-1;clear:both;margin:16px 0 40px;padding-top:28px;border-top:1px solid var(--piernik-border)}
.piernik-shop-teaser--related>h2{margin:0 0 18px;font-size:22px}
.piernik-shop-teaser.piernik-shop-teaser--related .piernik-shop-teaser__list{display:flex;gap:24px;margin:0;padding:0 0 6px;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none;scroll-behavior:smooth}
.piernik-shop-teaser--related .piernik-shop-teaser__list::-webkit-scrollbar{display:none}
.piernik-shop-teaser--related .piernik-shop-teaser__item{flex:0 0 calc((100% - 4*24px)/4.4);scroll-snap-align:start}
.piernik-strip-nav{position:absolute;z-index:2;width:44px;height:44px;border:0;border-radius:50%;padding:0;background:rgba(255,255,255,.92);box-shadow:0 1px 4px rgba(0,0,0,.2);cursor:pointer;transition:opacity .2s}
.piernik-strip-nav::before{content:"";position:absolute;top:50%;left:50%;width:11px;height:11px;margin:-6px 0 0 -8px;border:solid var(--piernik-text);border-width:2px 2px 0 0;transform:rotate(45deg)}
.piernik-strip-nav--prev{left:-8px}.piernik-strip-nav--prev::before{margin-left:-3px;transform:rotate(-135deg)}
.piernik-strip-nav--next{right:-8px}
.piernik-strip-nav[disabled]{opacity:0;pointer-events:none}
/* Tile photos (assets/tile-photos.js): several photos of one piece on its tile, swiped on a
   phone with dots below, on a computer the second photo on hover and arrows over the photo. */
.piernik-tile-photos{position:relative;display:block;aspect-ratio:1;margin:0 0 10px;background:var(--piernik-surface);overflow:hidden}
.piernik-shop-teaser__item .piernik-tile-photos{margin-bottom:14px}
.piernik-tile-photos__track{display:flex;height:100%;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none}
.piernik-tile-photos__track::-webkit-scrollbar{display:none}
.piernik-tile-photos .piernik-tile-photos__track img,.woocommerce ul.products li.product a .piernik-tile-photos__track img{flex:0 0 100%;width:100%;height:100%;margin:0;aspect-ratio:auto;object-fit:cover;scroll-snap-align:start}
.piernik-tile-photos__dots{position:absolute;left:0;right:0;bottom:8px;display:flex;justify-content:center;gap:6px;pointer-events:none}
.piernik-tile-photos__dots i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.8);box-shadow:0 0 0 1px rgba(0,0,0,.18)}
.piernik-tile-photos__dots i.on{background:var(--piernik-primary);box-shadow:none}
.piernik-tile--photos{position:relative;container-type:inline-size}
.piernik-tile-nav{position:absolute;top:calc(50cqw - 18px);z-index:2;width:36px;height:36px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.92);box-shadow:0 1px 4px rgba(0,0,0,.2);cursor:pointer;opacity:0;transition:opacity .2s}
.piernik-tile-nav::before{content:"";position:absolute;top:50%;left:50%;width:9px;height:9px;margin:-5px 0 0 -7px;border:solid var(--piernik-text);border-width:2px 2px 0 0;transform:rotate(45deg)}
.piernik-tile-nav--prev{left:8px}.piernik-tile-nav--prev::before{margin-left:-3px;transform:rotate(-135deg)}
.piernik-tile-nav--next{right:8px}
.piernik-tile--photos:hover .piernik-tile-nav:not([disabled]){opacity:1}
.piernik-tile-nav[disabled]{pointer-events:none}
@media(hover:none){.piernik-shop-teaser--related .piernik-tile-photos__track{overflow:hidden}.piernik-shop-teaser--related .piernik-tile-photos__dots{display:none}}
@media(hover:none){.piernik-strip-nav{display:none}}
@media(max-width:860px){.piernik-shop-teaser--related .piernik-shop-teaser__item{flex-basis:calc((100% - 2*14px)/2.7)}.piernik-shop-teaser.piernik-shop-teaser--related .piernik-shop-teaser__list{gap:14px}}
@media(max-width:600px){.piernik-shop-teaser.piernik-shop-teaser--related .piernik-shop-teaser__list{margin-inline:-20px;padding-inline:20px;scroll-padding-inline:20px}.piernik-shop-teaser--related .piernik-shop-teaser__item{flex-basis:40vw}}


/* /pierniki-reklamowe/: one core gallery in the old page's two series, photos uncropped in balanced
   rows: assets/gallery-rows.js sets each figure's width and height so every row fills the line at one
   height (Bogumił, 2.11.2026). The image marked piernik-series-start opens the second series; the
   script adds --piernik-series-gap above its first row. Without the script: rows of photos at their natural proportions.
   Core sizes gallery items with :not(#individual-image). */
.wp-block-gallery.has-nested-images:is(.piernik-business-gallery,.piernik-rows-gallery){display:flex;flex-wrap:wrap;gap:12px;margin-block:0;--piernik-series-gap:36px}
.wp-block-gallery.has-nested-images:is(.piernik-business-gallery,.piernik-rows-gallery) figure.wp-block-image:not(#individual-image){flex:1 1 140px;width:auto;max-width:none;margin:0}
.wp-block-gallery.has-nested-images:is(.piernik-business-gallery,.piernik-rows-gallery) figure.wp-block-image:not(#individual-image) img{display:block;width:100%;height:100%;object-fit:cover}
@media(min-width:701px){.wp-block-gallery.has-nested-images:is(.piernik-business-gallery,.piernik-rows-gallery){gap:18px;--piernik-row:200px}.wp-block-gallery.has-nested-images:is(.piernik-business-gallery,.piernik-rows-gallery){--piernik-series-gap:46px}}
@media(min-width:1000px){.wp-block-gallery.has-nested-images:is(.piernik-business-gallery,.piernik-rows-gallery){gap:20px;--piernik-row:230px}}

/* /galeria/ and its pick on /o-nas/ ([piernik_works], functions.php): the same balanced rows.
   The list of groups is a row of plain links; each group a heading over its rows, no captions. */
.piernik-works-nav ul{list-style:none;margin:0 0 8px;padding:0;display:flex;flex-wrap:wrap;gap:8px 22px}
.piernik-works-nav a{color:var(--piernik-primary);text-decoration:underline;text-underline-offset:3px}
.piernik-works-group{scroll-margin-top:24px}
.piernik-works-group h2{margin:48px 0 18px}
.piernik-works-pick{margin-bottom:28px}
@media(max-width:700px){.piernik-desktop-only{display:none!important}.piernik-works-group h2{margin:34px 0 14px}}

/* Closing invitation of /galeria/. */
.piernik-invitation{border-top:1px solid var(--piernik-border);padding-top:52px;margin-bottom:0!important;max-width:820px}
@media(max-width:700px){.piernik-invitation{padding-top:32px}}

/* Photo sets 2×2: legacy banner frames and standalone illustrations. The block editor must show
   the same crop, while retaining the original attachment. */
.piernik-content .piernik-photo-mosaic{margin:0}
.piernik-photo-mosaic>.wp-block-group__inner-container{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.piernik-photo-mosaic:has(>.wp-block-image){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.piernik-photo-mosaic .piernik-banner-frame{min-width:0;width:100%}
.piernik-content .piernik-banner-frame{position:relative;overflow:hidden;aspect-ratio:400/433;margin:0!important}
.piernik-content .piernik-banner-frame img{display:block;width:410.2564%;max-width:none;height:auto;margin:0}
.editor-styles-wrapper .piernik-banner-frame{overflow:hidden;aspect-ratio:400/433;margin:0!important}
.editor-styles-wrapper .piernik-banner-frame img{width:410.2564%!important;max-width:none!important;height:auto!important}
/* Legacy banner collages have ~4 px white gutters at x≈394–396, 799–801, 1204–1206 (panels 393/400/400/392 px),
   so equal 400 px slices showed white seams. Each frame shows a centred 390×422 window (still 400:433) of its panel. */
.piernik-frame-1 img{transform:translate(-.0625%,-1.1547%)}
.piernik-frame-2 img{transform:translate(-25.1875%,-1.1547%)}
.piernik-frame-3 img{transform:translate(-50.5%,-1.1547%)}
.piernik-frame-4 img{transform:translate(-75.5625%,-1.1547%)}
/* Standalone illustrations share the legacy frames' proportions in frontend and editor. */
.piernik-illustration-frame{position:relative;overflow:hidden;aspect-ratio:400/433;margin:0!important;min-width:0;width:100%}
.piernik-content .piernik-illustration-frame img,.editor-styles-wrapper .piernik-illustration-frame img{display:block;width:100%;height:auto;aspect-ratio:400/433;max-width:100%;object-fit:cover;object-position:center}
@media(max-width:900px){.piernik-photo-mosaic>.wp-block-group__inner-container{gap:10px}}
/* Optional phone helpers for banner sets (hide a frame, add a full-width photo); no page uses them now, every set stays 2×2. */
.piernik-content .piernik-mobile-only{display:none}
.editor-styles-wrapper .piernik-mobile-only{grid-column:1/-1;margin:0}
@media(max-width:700px){.piernik-content .piernik-mobile-hide{display:none}.piernik-content .piernik-mobile-first{order:-1}.piernik-content .piernik-mobile-only{display:block;grid-column:1/-1;width:calc(100% + 40px);max-width:none;margin:0 -20px}.piernik-content .piernik-mobile-only img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}}

/* /o-nas/ and /urodziny/ in the old site's order: four-photo strip (2×2 on a phone), Żywilla's
   text in the site's readable type (on /o-nas/ the award as a muted label line, film, gallery),
   her button centred.
   /o-nas/#prace (link target from home and old gallery URLs): air above the heading. */
#prace{scroll-margin-top:24px}
.piernik-content .piernik-photo-strip{margin:0 0 40px!important}
@media(min-width:701px){.piernik-photo-strip .piernik-photo-mosaic>.wp-block-group__inner-container,.piernik-photo-strip .piernik-photo-mosaic:has(>.wp-block-image){grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}}
.piernik-content .piernik-page-text{max-width:760px;margin:0 0 56px!important}
/* Żywilla's first sentence as the lead of her text, in the logo circle's red (5.2:1 on white), and her
   company name in the heading face (Bogumił, 3.11.2026); the lead stays close to the rest of its paragraph. */
.piernik-content .piernik-page-text .piernik-lead-in{font-size:30px;line-height:1.4;font-weight:500;color:var(--piernik-logo);text-wrap:balance;margin:0 0 22px}
/* With the lead the page title steps back, so the eye first meets her sentence (Bogumił, 3.11.2026). */
.piernik-content h1.wp-block-heading:has(~ .piernik-page-text .piernik-lead-in){font-size:18px;letter-spacing:.2em;margin-bottom:18px}
/* The paragraph about the scent of baking with fresh, undecorated gingerbread beside it; on a phone the photo comes first. */
.piernik-content .piernik-scent>.wp-block-group__inner-container,.piernik-content .piernik-scent:has(>p){display:grid;grid-template-columns:minmax(0,1fr) 40%;gap:28px;align-items:start;margin:0 0 20px}
.piernik-content .piernik-scent p{margin:0}
.piernik-content .piernik-scent .piernik-scent-photo{margin:0;border:1px solid var(--piernik-border)}
.piernik-content .piernik-scent .piernik-scent-photo img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.piernik-content .piernik-page-text strong{font-family:var(--piernik-heading);font-weight:600;letter-spacing:.03em;line-height:1;color:var(--piernik-logo)}
/* The award as a quote: a soft surface and a thin line of the logo's red on the left (Bogumił, 3.11.2026). */
.piernik-content .piernik-page-text .piernik-award-line{font-size:15px;color:var(--piernik-muted);margin:28px 0 0;padding:14px 18px;background:var(--piernik-surface);border-left:3px solid var(--piernik-logo)}
/* The awarded pieces under their lines (Bogumił, 10.11.2026): the two cottages side by side, 3:4,
   also on a phone; the manor house the column's width. Never wider than the file. */
.piernik-content .piernik-page-text .piernik-award-photo{margin:12px 0 0;border:1px solid var(--piernik-border)}
.piernik-content .piernik-page-text .piernik-award-photo img{display:block;width:100%;height:auto}
.piernik-content .piernik-page-text .piernik-award-pair>.wp-block-group__inner-container,.piernik-content .piernik-page-text .piernik-award-pair:has(>figure){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:12px 0 0}
.piernik-content .piernik-page-text .piernik-award-pair .piernik-award-photo{margin:0}
.piernik-content .piernik-page-text .piernik-award-pair .piernik-award-photo img{aspect-ratio:3/4;object-fit:cover;max-width:635px}
.piernik-content .piernik-page-text .piernik-award-pair+.piernik-award-line,.piernik-content .piernik-page-text .piernik-award-line+.piernik-award-line{margin-top:20px}
.piernik-content .piernik-page-cta{margin:56px 0 0!important}
.piernik-page-cta .wp-block-buttons{justify-content:center}
.piernik-page-intro{max-width:800px;margin-bottom:56px!important}
@media(max-width:700px){.piernik-content .piernik-page-text .piernik-lead-in{font-size:23px;line-height:1.4}.piernik-content h1.wp-block-heading:has(~ .piernik-page-text .piernik-lead-in){font-size:16px;margin-bottom:14px}.piernik-content .piernik-scent>.wp-block-group__inner-container,.piernik-content .piernik-scent:has(>p){grid-template-columns:1fr;gap:16px}.piernik-content .piernik-scent .piernik-scent-photo{order:-1}.piernik-content .piernik-photo-strip{margin-bottom:28px!important}.piernik-content .piernik-page-text{margin-bottom:40px!important}.piernik-content .piernik-page-cta{margin-top:40px!important}.piernik-page-intro{margin-bottom:36px!important}}

/* Contact page: two cards with the iced badges, a brief, the studio, a map preview that loads Google Maps on tap. */
.piernik-contact-page>.wp-block-group__inner-container>*{margin-top:0}
.piernik-content .piernik-contact-hero{align-items:flex-start!important;gap:64px;margin-bottom:72px}
.piernik-contact-hero>.wp-block-column:first-child{flex-basis:48%!important}
.piernik-contact-hero>.wp-block-column:last-child{flex-basis:52%!important}
.piernik-contact-hero .wp-block-image{margin:0}
.piernik-contact-hero .wp-block-image img{width:100%;aspect-ratio:1;object-fit:cover}
.piernik-contact-cards{display:grid;gap:14px;margin-top:34px;max-width:440px}
.piernik-content .piernik-contact-details{margin-top:36px}
.piernik-contact-details h2{margin-bottom:10px}
.piernik-contact-details p{margin:0 0 14px}
.piernik-contact-details a{display:inline-block;min-height:44px;padding-block:8px}
.piernik-contact-card{display:flex;align-items:center;gap:18px;min-height:76px;padding:14px 20px;border:1px solid var(--piernik-border);background:#fff;color:var(--piernik-text);text-decoration:none;transition:border-color .15s,background .15s}
.piernik-contact-card:hover,.piernik-contact-card:focus-visible{border-color:var(--piernik-primary);background:var(--piernik-bg);color:var(--piernik-text)}
.piernik-contact-card .piernik-icon{width:46px;height:46px}
.piernik-contact-card .piernik-icon svg{width:24px;height:24px}
.piernik-contact-card-label{display:block;font:400 13px/1.5 var(--piernik-heading);letter-spacing:.1em;text-transform:uppercase;color:var(--piernik-muted)}
.piernik-contact-card-value{display:block;font:400 22px/1.3 var(--piernik-heading);letter-spacing:.02em;color:var(--piernik-primary);overflow-wrap:anywhere}
.piernik-contact-map{position:relative}
.piernik-map-load{display:block;position:relative;width:100%;height:420px;padding:0;border:1px solid var(--piernik-border);background:var(--piernik-surface);cursor:pointer;overflow:hidden}
.piernik-map-load img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .4s}
.piernik-map-load:hover img{transform:scale(1.015)}
.piernik-map-cta{position:absolute;left:50%;bottom:28px;transform:translateX(-50%);padding:13px 24px 11px;background:var(--piernik-primary);color:#fff;font:400 15px/1.5 var(--piernik-heading);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;box-shadow:0 6px 18px rgba(0,0,0,.18)}
.piernik-map-load:hover .piernik-map-cta{background:var(--piernik-primary-dark)}
.piernik-contact-map iframe{display:block;width:100%;height:420px;border:0;background:var(--piernik-surface)}
.piernik-map-credit{position:absolute;right:1px;bottom:1px;margin:0;padding:2px 6px;background:rgba(255,255,255,.8);font-size:12px;line-height:1.4;color:var(--piernik-text)}
.piernik-map-credit a{display:inline;min-height:0;padding:0;color:inherit}
@media(prefers-reduced-motion:reduce){.piernik-map-load img{transition:none}.piernik-map-load:hover img{transform:none}}
@media(max-width:900px){.piernik-content .piernik-contact-hero{gap:36px}}
@media(max-width:781px){.piernik-content .piernik-contact-hero{margin-bottom:48px}}
@media(max-width:700px){.piernik-contact-cards{margin-top:26px}.piernik-contact-card-value{font-size:20px}
.piernik-map-load,.piernik-contact-map iframe{height:auto;aspect-ratio:1}.piernik-contact-map iframe{aspect-ratio:4/5}
body:has(.piernik-contact-page){padding-bottom:0}body:has(.piernik-contact-page) .piernik-mobile-call{display:none}}
@media(max-width:360px){.piernik-contact-card{gap:14px;padding:12px 14px}.piernik-contact-card-value{font-size:18px;overflow-wrap:normal}}

/* Legal pages (content/strony/*.md): readable measure and a visible draft marker
   that must disappear before the shop starts. */
.piernik-draft-note{padding:12px 16px;border:1px dashed var(--piernik-primary);background:var(--piernik-surface);font-size:15px}
.piernik-legal{max-width:720px;margin-inline:auto}
.piernik-legal h1{margin:0 0 20px}
.piernik-legal h2{margin:36px 0 12px;font-size:20px}
.piernik-legal .wp-block-list li+li{margin-top:6px}

/* Shop on a phone (Bogumił, 14.10.2026, option C): breadcrumbs hidden (four menu items),
   the product name and price above the fold. The rest of the shop look lives in shop.css. */
@media(max-width:700px){
.woocommerce-breadcrumb{display:none}
.woocommerce .site-main,.woocommerce-page .site-main{margin-top:0}
.woocommerce .inside-article,.woocommerce-page .inside-article{padding-top:16px}
.single-product .entry-content{margin-top:0}
.single-product .woocommerce-product-gallery__image img{aspect-ratio:4/5;object-fit:cover}
.single-product .woocommerce-product-gallery{margin-bottom:16px}
.single-product .product_title{margin-bottom:8px}
}

/* Footer: the red band of variant A, centred, one line per kind of link; seller data last.
   The contact page shares .piernik-icon (its cards), defined here. */
.piernik-footer{padding:36px 0 40px;background:var(--piernik-primary);color:#fff;text-align:center;font-size:15px}
.piernik-footer p{margin:0 0 6px}
.piernik-footer a{color:#fff;text-decoration:underline;text-underline-offset:.2em;display:inline-block;padding-block:12px}
.piernik-footer a:focus-visible{outline:2px solid #fff;outline-offset:2px}
.piernik-footer .piernik-footer-name{font:300 22px/1.3 var(--piernik-heading);letter-spacing:.08em;text-transform:uppercase;margin-bottom:8px}
.piernik-footer .piernik-footer-links{display:flex;flex-wrap:wrap;justify-content:center;column-gap:22px;margin:0}
@media(max-width:700px){.piernik-footer .piernik-footer-name span{display:block}.piernik-footer .piernik-footer-name .piernik-footer-sep{display:none}}
/* Under the phone call bar the red band runs to the bottom edge instead of the body's reserved white strip. */
@media(max-width:700px){body.piernik-call-bar:not(.woocommerce-page):not(:has(.piernik-contact-page)) .piernik-footer{margin-bottom:calc(-78px - env(safe-area-inset-bottom,0px));padding-bottom:calc(40px + 78px + env(safe-area-inset-bottom,0px))}}
.piernik-icon{display:grid;place-items:center;flex:none;width:34px;height:34px;border:2px solid #fff;border-radius:45% 54% 48% 52% / 50% 44% 56% 46%;background:var(--piernik-primary);box-shadow:0 0 0 1px var(--piernik-primary)}
.piernik-icon svg{display:block;width:20px;height:20px;fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.piernik-icon .piernik-icon-dot{fill:#fff;stroke:none}

/* Phone call bar, fixed at the bottom up to 700 px (hidden on the contact page and in the shop). */
.piernik-mobile-call{display:none}
@media(max-width:700px){.piernik-mobile-call{display:block;position:fixed;bottom:0;left:0;right:0;z-index:30;padding:10px 20px calc(10px + env(safe-area-inset-bottom,0px));background:var(--piernik-bg);border-top:1px solid var(--piernik-border)}.piernik-mobile-call a{display:flex;justify-content:center;align-items:center;gap:16px;min-height:44px;padding:13px 12px 11px;background:var(--piernik-primary);color:#fff;text-decoration:none;font:400 15px/1.5 var(--piernik-heading);letter-spacing:.06em;text-transform:uppercase}.piernik-mobile-call a:hover{background:var(--piernik-primary-dark)}.piernik-mobile-call span{font-weight:400;font-size:13px}}