/* ==========================================================================
   Szymon Drukuje — design system „Szymon Lab” (część 1: podstawy i sekcje)
   Źródło: makieta/sklep-szymon-drukuje.html (wersja 6). Opis: 09 Design system.md
   Tokeny są też zmiennymi Breakdance (kolekcja „Szymon Lab”) i tam można je zmieniać:
   tamte wygrywają, bo poniższe stoją w :where(:root) (zerowa specyficzność).
   Telefon do 559 px, tablet 560–939 px, komputer od 940 px (sprawdzane na 375 / 768 / 1280).
   ========================================================================== */
:where(:root){
  --bg:#F1F2EE; --pan:#FFFFFF; --pan-2:#E6E8E3; --plate:#E8EAE5; --line:#D4D7D0; --line-2:#B7BBB3;
  --ink:#14161A; --ink-2:#565B62; --ink-3:#8A8F96;
  --dk:#101216; --dk-2:#181B20; --dk-3:#22262C; --dk-line:#2C3037; --dk-ink:#F2F3EF; --dk-ink-2:#A3A8B0;
  --akcja:#FF5B1F; --akcja-h:#FF7440;
  --ocean:#2457E6; --slonce:#F2B00A; --trawa:#17935A; --malina:#D92D6F;
  --ok:#0D7343; --ok-bg:#DDF4E7; --warn-bg:#FFF0C2; --err:#C4281A; --err-bg:#FFEDEA; --link:#1C4FD8;
  --r:8px; --r-s:6px; --r-l:12px;
}
/* Breakdance czyta kroje z własnych zmiennych: podpinamy je pod kroje design systemu. */
html:root{
  --bde-body-font-family:var(--f-b); --bde-heading-font-family:var(--f-d); --bde-body-font-size:16px;
  --f-d:"Archivo","Helvetica Neue",Arial,sans-serif;
  --f-b:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --f-m:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --sd-top:var(--wp-admin--admin-bar--height,0px);
}

/* ---------- baza ---------- */
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:450 16px/1.6 var(--f-b);-webkit-font-smoothing:antialiased;overflow-x:clip}
h1,h2,h3,h4,h5,h6{font-family:var(--f-d);font-weight:700;font-stretch:112%;line-height:1.06;letter-spacing:-.022em;margin:0;text-wrap:balance;color:inherit;overflow-wrap:break-word}
p,figure,dl,dd{margin:0}
a{color:inherit}
a:hover{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2.5px solid var(--ocean);outline-offset:3px;border-radius:4px}
.sd-sr,.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.sd-wrap{max-width:1220px;margin-inline:auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));width:100%}
@media(min-width:720px){.sd-wrap{padding-left:max(32px,env(safe-area-inset-left,0px));padding-right:max(32px,env(safe-area-inset-right,0px))}}
.sd-sec{padding-block:clamp(48px,7vw,96px)}
.sd-sec-0{padding-top:0}
.sd-h2{font-size:clamp(1.7rem,3.8vw,2.7rem)}
.sd-lead{font-size:clamp(1.02rem,1.4vw,1.14rem);color:var(--ink-2);max-width:58ch}
.sd-m{font:500 .72rem/1.35 var(--f-m);letter-spacing:.07em;text-transform:uppercase;color:var(--ink-2)}
.sd-sec-h{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:14px 28px;margin-bottom:clamp(22px,3vw,36px)}
.sd-sec-h>div{display:grid;gap:10px;min-width:0}
.sd-more{font:600 .78rem/1 var(--f-m);letter-spacing:.06em;text-transform:uppercase;text-decoration:none;padding:10px 0;border-bottom:1.5px solid var(--ink);white-space:nowrap;color:var(--ink)}
.sd-more:hover{color:var(--link);border-color:var(--link)}
.sd-ic{flex:none;display:block}
.sd-hint{font-size:.85rem;color:var(--ink-2);line-height:1.45}
.sd-err{font-size:.88rem;font-weight:650;color:var(--err);margin-top:6px}
.sd-err[hidden]{display:none}

/* ---------- przyciski: zwykły, akcja (tylko zakup), ciemny, link ---------- */
.sd-btn{display:inline-flex;align-items:center;justify-content:center;gap:.6em;min-height:52px;padding:0 1.35em;border:1.5px solid var(--ink);border-radius:var(--r);background:var(--pan);color:var(--ink);font:700 1rem/1.15 var(--f-b);text-decoration:none;cursor:pointer;text-align:center;transition:transform .1s,background .12s,border-color .12s}
.sd-btn:hover{background:var(--pan-2);color:var(--ink)}
.sd-btn:active{transform:translateY(1.5px)}
.sd-btn-a{background:var(--akcja);border-color:var(--akcja);color:var(--ink);box-shadow:inset 0 -3px 0 rgba(20,22,26,.2)}
.sd-btn-a:hover{background:var(--akcja-h);border-color:var(--akcja-h);color:var(--ink)}
.sd-btn-a:active{box-shadow:inset 0 -1px 0 rgba(20,22,26,.2)}
.sd-btn-ink{background:var(--ink);color:#fff}
.sd-btn-ink:hover{background:#2A2E35;color:#fff}
.sd-btn-s{min-height:44px;padding:0 1em;font-size:.93rem}
.sd-btn-block{width:100%}
.sd-btn-plain{border:0;background:none;min-height:44px;padding:0 .2em;text-decoration:underline;text-underline-offset:4px;font-weight:650}
.sd-btn-plain:hover{background:none;color:var(--link)}
.sd-btn[disabled],.sd-btn.is-busy{opacity:.6;cursor:progress}
.sd-btn .sd-ic{transition:transform .15s}
.sd-btn:hover .sd-ic:last-child{transform:translateX(3px)}
.sd-dk .sd-btn:not(.sd-btn-a){background:transparent;color:var(--dk-ink);border-color:#575C65}
.sd-dk .sd-btn:not(.sd-btn-a):hover{background:var(--dk-3);color:var(--dk-ink)}

/* ---------- etykiety techniczne ---------- */
.sd-tag{display:inline-flex;align-items:center;gap:7px;padding:5px 9px 5px 8px;border:1px solid var(--line-2);border-radius:5px;background:var(--pan);color:var(--ink);font:600 .68rem/1 var(--f-m);letter-spacing:.07em;text-transform:uppercase;white-space:nowrap}
.sd-tag i{width:7px;height:7px;border-radius:50%;background:var(--ink-3);flex:none}
.sd-tag-g i{background:var(--trawa)} .sd-tag-y i{background:var(--slonce)} .sd-tag-b i{background:var(--ocean)} .sd-tag-r i{background:var(--malina)} .sd-tag-a i{background:var(--akcja)}
.sd-tag-live i{background:var(--akcja);box-shadow:0 0 0 0 rgba(255,91,31,.7);animation:sd-pulse 1.4s infinite}
@keyframes sd-pulse{70%{box-shadow:0 0 0 7px rgba(255,91,31,0)}100%{box-shadow:0 0 0 0 rgba(255,91,31,0)}}
.sd-dk .sd-tag{background:var(--dk-3);border-color:var(--dk-line);color:var(--dk-ink)}
.sd-todo{display:inline-flex;align-items:center;gap:6px;padding:4px 9px;border:1px dashed var(--ink-3);border-radius:5px;background:rgba(255,255,255,.6);color:var(--ink-2);font:500 .7rem/1.35 var(--f-m)}

/* ---------- pasek ogłoszeń ---------- */
.sd-ann{background:var(--pan-2);border-bottom:1px solid var(--line-2);font:600 .72rem/1.3 var(--f-m);letter-spacing:.05em;text-transform:uppercase;color:var(--ink)}
.sd-ann .sd-wrap{display:flex;justify-content:center;gap:8px 34px;flex-wrap:wrap;padding-block:9px;text-align:center}
.sd-ann span{display:inline-flex;gap:8px;align-items:center}
@media(max-width:759px){.sd-ann span+span{display:none}}

/* ---------- nagłówek ---------- */
.sd-hd{position:sticky;top:var(--sd-top);z-index:40;background:rgba(241,242,238,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line-2)}
.sd-hd-in{display:flex;align-items:center;gap:12px;min-height:66px}
.sd-logo{display:flex;align-items:center;text-decoration:none;color:var(--ink);min-width:0;flex:none}
.sd-logo:hover{color:var(--ink)}
.sd-logo svg,.sd-logo .bde-f-svg-icon2{display:block;height:30px;width:auto;aspect-ratio:1406/204}
.sd-nav{display:none;gap:2px;margin-inline:auto}
.sd-nav a{padding:9px 13px;border-radius:7px;text-decoration:none;font-weight:550;font-size:.94rem;white-space:nowrap;color:var(--ink)}
.sd-nav a:hover{background:var(--pan-2);color:var(--ink)}
.sd-nav a[aria-current="page"],.sd-nav a.is-active{background:var(--ink);color:#fff}
.sd-hd-r{display:flex;gap:8px;margin-left:auto}
.sd-ib{flex:none;width:44px;height:44px;display:grid;place-items:center;border:1px solid var(--line-2);border-radius:var(--r);background:var(--pan);color:var(--ink);cursor:pointer;position:relative;padding:0;text-decoration:none}
.sd-ib:hover{border-color:var(--ink);color:var(--ink)}
.sd-ib .sd-cnt{position:absolute;top:-7px;right:-7px;min-width:21px;height:21px;padding:0 5px;border-radius:6px;background:var(--akcja);color:var(--ink);font:700 .7rem/21px var(--f-m);text-align:center}
.sd-ib .sd-cnt[hidden]{display:none}
.sd-ib.sd-bump{animation:sd-bump .4s}
@keyframes sd-bump{35%{transform:translateY(-5px)}70%{transform:translateY(1px)}}
.sd-hd-p{position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--akcja);transform-origin:left;transform:scaleX(var(--p,0));pointer-events:none}
@media(max-width:479px){.sd-hd-in{gap:8px}.sd-ib{width:42px;height:42px}.sd-logo svg,.sd-logo .bde-f-svg-icon2{height:23px}.sd-hd-r{gap:6px}}
@media(max-width:349px){.sd-hd-r .sd-search-b{display:none}}
@media(min-width:1120px){.sd-nav{display:flex}.sd-hd-r{margin-left:0}.sd-menu-b{display:none}}

/* ---------- stół roboczy pod wydrukiem ---------- */
.sd-plate{position:relative;background-color:var(--plate);background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:20px 20px;background-position:center}
.sd-plate::after{content:"";position:absolute;inset:8px;pointer-events:none;--k:var(--ink-3);background:
  linear-gradient(var(--k),var(--k)) left top/11px 1.5px no-repeat,linear-gradient(var(--k),var(--k)) left top/1.5px 11px no-repeat,
  linear-gradient(var(--k),var(--k)) right top/11px 1.5px no-repeat,linear-gradient(var(--k),var(--k)) right top/1.5px 11px no-repeat,
  linear-gradient(var(--k),var(--k)) left bottom/11px 1.5px no-repeat,linear-gradient(var(--k),var(--k)) left bottom/1.5px 11px no-repeat,
  linear-gradient(var(--k),var(--k)) right bottom/11px 1.5px no-repeat,linear-gradient(var(--k),var(--k)) right bottom/1.5px 11px no-repeat}
.sd-plate.sd-rp::before{content:"";position:absolute;left:9%;right:9%;height:2px;z-index:2;background:var(--akcja);box-shadow:0 0 14px 1px var(--akcja);animation:sd-scan .55s cubic-bezier(.3,.7,.3,1) forwards;pointer-events:none}
.sd-plate.sd-rp .sd-art{animation:sd-rp .55s cubic-bezier(.3,.7,.3,1)}
@keyframes sd-scan{from{bottom:10%;opacity:1}85%{opacity:1}to{bottom:88%;opacity:0}}
@keyframes sd-rp{from{clip-path:inset(92% 0 0 0)}to{clip-path:inset(0 0 0 0)}}
.sd-plate .sd-art{transition:transform .2s ease-out}
.sd-plate.sd-tilt .sd-art{transform:perspective(700px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}
.sd-plate.sd-wait .sd-art{opacity:0}
.sd-photo{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;border-radius:6px}

/* ---------- ilustracje ---------- */
.sd-art{display:block;width:100%;height:auto;overflow:visible}
.sd-art.z{overflow:hidden;border-radius:6px}
.sd-art .ol{stroke:color-mix(in oklab,var(--c1) 48%,#14161A);stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round}
.sd-art .ly{fill:url(#sd-lay);pointer-events:none}
.sd-art .f1{fill:var(--c1)} .sd-art .f1d{fill:color-mix(in oklab,var(--c1) 70%,#000)} .sd-art .f1l{fill:color-mix(in oklab,var(--c1) 80%,#fff)}
.sd-art .f2{fill:var(--c2);stroke:color-mix(in oklab,var(--c2) 48%,#14161A)} .sd-art .f2d{fill:color-mix(in oklab,var(--c2) 70%,#000);stroke:color-mix(in oklab,var(--c2) 48%,#14161A)}
.sd-art .gh{fill:#fff;fill-opacity:.72;stroke:#6E737B;stroke-width:1.4;stroke-linejoin:round;stroke-linecap:round}
.sd-art .ghs{fill:#CDD1D6;stroke:none}
.sd-art .ghl{fill:none;stroke:#6E737B;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.sd-art .art-txt{fill:var(--c2);stroke:color-mix(in oklab,var(--c2) 45%,#14161A);stroke-width:1.4;paint-order:stroke;stroke-linejoin:round;font-family:var(--f-d);font-weight:700;letter-spacing:.03em}
.sd-art .dim path{stroke:var(--ink);stroke-width:1.2;fill:none;stroke-linecap:round} .sd-art .dim text{font:600 10px var(--f-m);fill:var(--ink)}

/* ---------- ciemna komora (hero, konfigurator, Lab pomysłów, stopka) ---------- */
.sd-dk{background:var(--dk);color:var(--dk-ink)}
.sd-dk h1,.sd-dk h2,.sd-dk h3{color:var(--dk-ink)}
.sd-dk .sd-lead,.sd-dk .sd-m{color:var(--dk-ink-2)}
.sd-hero{position:relative;overflow:hidden}
.sd-hero::before{content:"";position:absolute;inset:-24px;background-image:linear-gradient(var(--dk-line) 1px,transparent 1px),linear-gradient(90deg,var(--dk-line) 1px,transparent 1px);background-size:44px 44px;opacity:.6;-webkit-mask-image:radial-gradient(110% 95% at 72% 42%,#000 15%,transparent 76%);mask-image:radial-gradient(110% 95% at 72% 42%,#000 15%,transparent 76%);transform:translate(var(--gx,0px),var(--gy,0px));transition:transform .4s ease-out;pointer-events:none}
.sd-hero-in{position:relative;display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(30px,5vw,64px);align-items:center;padding-block:clamp(34px,5.5vw,76px)}
.sd-hero h1{font-size:clamp(2.1rem,9.2vw,3.9rem);line-height:1;color:var(--dk-ink)}
.sd-prt{display:inline-block;color:transparent;-webkit-background-clip:text;background-clip:text;background-image:repeating-linear-gradient(0deg,rgba(242,243,239,.28) 0 1.5px,#F2F3EF 1.5px 5px);animation:sd-rp .9s .1s cubic-bezier(.3,.6,.3,1) backwards;padding-bottom:.08em}
.sd-hero-t{display:grid;gap:22px;justify-items:start;min-width:0}
.sd-hero-cta{display:flex;flex-wrap:wrap;gap:12px}
.sd-hero-m{display:flex;flex-wrap:wrap;gap:8px 20px}
.sd-hero-m span{display:inline-flex;align-items:center;gap:7px}
@media(min-width:940px){.sd-hero-in{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}}
@media(max-width:520px){.sd-hero-cta .sd-btn{width:100%}.sd-hero-cta{width:100%}}
@media(max-width:939px){.sd-hero-in{gap:20px}.sd-hero-t{display:contents}.sd-hero-t>.sd-tag{order:1;justify-self:start}.sd-hero h1{order:2}.sd-hero-cta{order:3}.sd-rig-wrap{order:4;margin-top:6px}.sd-hero-t>.sd-lead{order:5}.sd-hero-m{order:6}}

/* ---------- drukarka 3D w hero ---------- */
.sd-rig-wrap{min-width:0;width:100%}
.sd-rig{position:relative;width:100%;max-width:540px;margin-inline:auto;background:var(--dk-2);border:1px solid var(--dk-line);border-radius:12px;padding:14px;box-shadow:0 40px 90px -40px #000;color:var(--dk-ink)}
.sd-rig-top{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.sd-rig-top .sd-m{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sd-rig-pct{font:700 1.3rem/1 var(--f-d);font-variant-numeric:tabular-nums}
.sd-rig-bar{height:3px;border-radius:2px;background:var(--dk-3);overflow:hidden;margin-bottom:12px}
.sd-rig-bar i{display:block;height:100%;transform-origin:left;transform:scaleX(var(--p,0));background:var(--akcja);transition:transform .25s linear}
.sd-rig-stage{position:relative;height:312px;border:1px solid var(--dk-line);border-radius:10px;overflow:hidden;background-color:#0A0C0F;background-image:linear-gradient(#16191E 1px,transparent 1px),linear-gradient(90deg,#16191E 1px,transparent 1px);background-size:20px 20px}
.sd-rz{position:absolute;top:10px;bottom:16px;left:4.5%;width:8px;border-radius:2px;background:repeating-linear-gradient(0deg,#3D424A 0 2px,#262A30 2px 6px)}
.sd-rz.r{left:auto;right:4.5%}
.sd-bed{position:absolute;left:9%;right:9%;bottom:8px;height:8px;border-radius:2px;background:linear-gradient(#D2AB52,#8C6C28)}
.sd-rig-obj{position:absolute;left:0;right:0;bottom:16px;height:230px;transition:opacity .45s}
.sd-rig-obj i{position:absolute;height:5px;border-radius:2.5px;visibility:hidden;background:linear-gradient(90deg,rgba(0,0,0,.34),rgba(0,0,0,0) 20%,rgba(255,255,255,.3) 40%,rgba(0,0,0,0) 62%,rgba(0,0,0,.34)),var(--c);box-shadow:inset 0 -1px 0 rgba(0,0,0,.24)}
.sd-rig-obj i.cur{filter:brightness(1.45) saturate(1.2)}
.sd-gan{position:absolute;left:4%;right:4%;bottom:16px;height:8px;border-radius:2px;background:linear-gradient(#DCDFE2,#9A9FA6);will-change:transform}
.sd-head{position:absolute;left:0;top:-18px;width:42px;height:42px;margin-left:-21px;border:1px solid #6E737B;border-radius:8px;background:linear-gradient(#F5F6F3,#C6CACF);will-change:transform}
.sd-head span{position:absolute;left:8px;top:7px;width:24px;height:24px;border-radius:50%;border:1.5px solid #6E737B;background:conic-gradient(#8A8F96 0 25%,#E4E7EA 0 50%,#8A8F96 0 75%,#E4E7EA 0);animation:sd-spin .45s linear infinite}
.sd-head i{position:absolute;left:50%;bottom:-13px;margin-left:-6px;border:6px solid transparent;border-top:13px solid #C68A3A;filter:drop-shadow(0 3px 6px rgba(255,91,31,.95))}
.sd-rig.done .sd-head span{animation-play-state:paused} .sd-rig.done .sd-head i{filter:none}
@keyframes sd-spin{to{transform:rotate(360deg)}}
.sd-rig-gc{display:flex;justify-content:space-between;gap:12px;margin-top:12px;padding:10px 12px;border:1px solid var(--dk-line);border-radius:8px;background:#0A0C0F;font:500 .66rem/1.2 var(--f-m);letter-spacing:.02em;color:#7FD6A4;white-space:nowrap;overflow:hidden}
.sd-rig-gc span:first-child{overflow:hidden;text-overflow:ellipsis;min-width:0}
.sd-rig-gc span:last-child{color:var(--dk-ink-2);flex:none;text-transform:uppercase;letter-spacing:.06em}
.sd-rig-read{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;margin-top:12px;border:1px solid var(--dk-line);border-radius:10px;overflow:hidden;background:var(--dk-line)}
.sd-rig-read div{background:var(--dk-2);padding:10px 10px 11px;min-width:0}
.sd-rig-read small{display:block;font:500 .6rem/1.2 var(--f-m);letter-spacing:.08em;text-transform:uppercase;color:var(--dk-ink-2);margin-bottom:5px}
.sd-rig-read b{font:600 .98rem/1 var(--f-m);font-variant-numeric:tabular-nums;white-space:nowrap}
.sd-ams{display:flex;gap:5px;align-items:center;height:16px}
.sd-ams i{width:13px;height:13px;border-radius:3px;background:var(--s);opacity:.38;transition:opacity .2s,transform .2s}
.sd-ams i.on{opacity:1;transform:scale(1.2);box-shadow:0 0 10px var(--s)}
.sd-rig-job{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:12px;padding:12px 14px;border:1px solid var(--dk-line);border-radius:10px;text-decoration:none;font-weight:650;font-size:.94rem;color:var(--dk-ink)}
.sd-rig-job:hover{background:var(--dk-3);border-color:#575C65;color:var(--dk-ink)}
.sd-rig-job span{min-width:0}
@media(max-width:420px){.sd-rig-read b{font-size:.84rem}.sd-rig-read div{padding-inline:8px}.sd-rig-stage{height:270px}}

/* ---------- przewijany pasek parametrów ---------- */
.sd-specs{background:var(--dk-2);border-top:1px solid var(--dk-line);overflow:hidden}
.sd-mq{display:flex;width:max-content;animation:sd-mq 48s linear infinite}
.sd-mq:hover{animation-play-state:paused}
.sd-mq ul{display:flex;flex:none;padding-block:15px;margin:0;padding-left:0;list-style:none}
.sd-mq li{display:flex;align-items:center;gap:10px;padding-right:46px;font:500 .7rem/1 var(--f-m);letter-spacing:.07em;text-transform:uppercase;white-space:nowrap;color:var(--dk-ink-2)}
.sd-mq li::before{content:"";width:6px;height:6px;border-radius:1.5px;background:#575C65}
.sd-mq b{color:var(--dk-ink);font-weight:600}
@keyframes sd-mq{to{transform:translateX(-50%)}}
.sd-stripe{height:1px;background:var(--dk-line)}

/* ---------- pasek zaufania ---------- */
.sd-trust{border-bottom:1px solid var(--line-2);background:var(--pan)}
.sd-trust ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 14px;padding-block:22px;margin:0;list-style:none;padding-left:0}
.sd-trust li{display:flex;gap:12px;align-items:center;min-width:0}
.sd-ti{width:40px;height:40px;border-radius:8px;border:1px solid var(--line-2);background:var(--bg);display:grid;place-items:center;flex:none}
.sd-trust b{display:block;font-size:.95rem;line-height:1.2} .sd-trust small{display:block;color:var(--ink-2);font-size:.82rem;line-height:1.3}
@media(min-width:900px){.sd-trust ul{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* ---------- kafle kategorii ---------- */
.sd-cats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.sd-cat{position:relative;display:flex;flex-direction:column;min-width:0;border:1px solid var(--line-2);border-radius:10px;background:var(--pan);text-decoration:none;overflow:hidden;transition:border-color .15s,transform .15s;color:var(--ink)}
.sd-cat:hover{border-color:var(--ink);transform:translateY(-3px);color:var(--ink)}
.sd-cat .sd-plate{padding:6% 14% 2%;border-bottom:1px solid var(--line-2)}
.sd-cat-b{display:grid;gap:5px;padding:14px 14px 16px}
.sd-cat h3{font-size:clamp(1rem,2vw,1.3rem)}
.sd-cat-b .sd-m{display:flex;justify-content:space-between;gap:8px;align-items:center}
@media(min-width:900px){.sd-cats{grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}.sd-cat-b{padding:18px}}

/* ---------- siatka i karta produktu ---------- */
.sd-grid,ul.products{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:0;padding:0;list-style:none}
@media(min-width:720px){.sd-grid,ul.products{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}}
@media(min-width:1040px){.sd-grid,ul.products{grid-template-columns:repeat(4,minmax(0,1fr))}}
ul.products::before,ul.products::after{display:none}
.sd-pc{display:flex;flex-direction:column;min-width:0;border:1px solid var(--line-2);border-radius:10px;background:var(--pan);overflow:hidden;transition:border-color .15s,transform .15s,box-shadow .15s;margin:0;padding:0}
.sd-pc:hover{border-color:var(--ink);transform:translateY(-3px);box-shadow:0 18px 30px -22px rgba(20,22,26,.5)}
.sd-pc-img{display:block;padding:11% 12% 3%;border-bottom:1px solid var(--line-2);color:var(--ink)}
.sd-pc-img .sd-tag{position:absolute;left:10px;top:10px;z-index:3}
.sd-pc-img .sd-photo{border-radius:4px}
.sd-pc-id{position:absolute;right:14px;top:14px;z-index:3;font-size:.62rem;color:var(--ink-3)}
@media(hover:hover){.sd-pc:hover .sd-pc-img::before,.sd-cat:hover .sd-plate::before{content:"";position:absolute;left:9%;right:9%;height:2px;z-index:2;background:var(--akcja);box-shadow:0 0 14px 1px var(--akcja);animation:sd-scan .55s cubic-bezier(.3,.7,.3,1) forwards;pointer-events:none}
  .sd-pc:hover .sd-pc-img .sd-art,.sd-cat:hover .sd-art{animation:sd-rp .55s cubic-bezier(.3,.7,.3,1)}}
.sd-pc-b{display:flex;flex-direction:column;gap:7px;padding:13px 12px 14px;flex:1}
.sd-pc-n{font:650 1rem/1.25 var(--f-b);letter-spacing:-.01em;text-decoration:none;color:var(--ink)}
.sd-pc-n:hover{text-decoration:underline;text-underline-offset:3px;color:var(--ink)}
.sd-pc-s{font-size:.84rem;line-height:1.35;color:var(--ink-2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;flex:1 0 auto;min-height:2.7em}
.sd-pc-job{font-size:.64rem;color:var(--ink-3)}
@media(max-width:559px){.sd-pc-job span{display:none}}
.sd-dots{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-top:2px}
.sd-dot{width:22px;height:22px;border-radius:6px;border:1px solid rgba(20,22,26,.35);background:var(--s);cursor:pointer;padding:0;position:relative}
.sd-dot::after{content:"";position:absolute;inset:-6px}
.sd-dot[aria-pressed="true"]{box-shadow:0 0 0 2px var(--pan),0 0 0 3.5px var(--ink)}
.sd-dot-more{font:500 .66rem var(--f-m);color:var(--ink-3)}
.sd-dot-more .d{display:none}
@media(min-width:560px){.sd-dot-more .d{display:inline}.sd-dot-more .m2{display:none}}
@media(max-width:559px){.sd-dots .sd-dot:nth-child(5){display:none}.sd-pc-id{display:none}}
.sd-pc-f{display:flex;align-items:center;justify-content:space-between;gap:8px;padding-top:6px}
.sd-price{font:700 1.4rem/1 var(--f-d);font-stretch:112%;letter-spacing:-.02em;white-space:nowrap;font-variant-numeric:tabular-nums;color:var(--ink)}
.sd-price del{font-size:.7em;color:var(--ink-3);font-weight:600;margin-right:4px}
.sd-price ins{text-decoration:none}
.sd-pc-add{flex:none}
.sd-pc-add span{display:none}
.sd-pc-add.sd-btn-s{padding:0;width:44px}
@media(min-width:560px){.sd-pc-b{padding:15px 16px 16px}.sd-pc-add span{display:inline}.sd-pc-add.sd-btn-s{width:auto;padding:0 .95em}.sd-pc-n{font-size:1.06rem}}

/* ---------- pasek „Pokaż w filamencie” ---------- */
.sd-fil{display:flex;align-items:center;gap:12px;margin-bottom:18px;min-width:0}
.sd-fil>.sd-m{flex:none}
.sd-fil-l{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding:3px;min-width:0}
.sd-fil-l::-webkit-scrollbar{display:none}
.sd-fil-b{flex:none;display:inline-flex;align-items:center;gap:8px;min-height:38px;padding:0 12px 0 8px;border:1px solid var(--line-2);border-radius:8px;background:var(--pan);color:var(--ink);font:600 .68rem var(--f-m);letter-spacing:.06em;text-transform:uppercase;cursor:pointer;transition:border-color .12s,background .12s}
.sd-fil-b i{width:18px;height:18px;border-radius:5px;background:var(--s);border:1px solid rgba(20,22,26,.3)}
.sd-fil-b:hover{border-color:var(--ink)}
.sd-fil-b[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.sd-fil-x{padding-left:12px}
@media(max-width:640px){.sd-fil{flex-direction:column;align-items:flex-start;gap:8px}.sd-fil-l{max-width:100%}}

/* ---------- pola formularzy, próbki kolorów, wybór ---------- */
.sd-lbl{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-weight:700;font-size:.93rem;margin-bottom:8px}
.sd-lbl span{font:500 .7rem var(--f-m);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.sd-inp{width:100%;min-height:52px;padding:0 14px;border:1.5px solid var(--line-2);border-radius:var(--r);background:var(--pan);font-size:1.02rem;font-weight:600;transition:border-color .12s;color:var(--ink)}
.sd-inp:hover,.sd-inp:focus{border-color:var(--ink)}
.sd-inp::placeholder{color:var(--ink-3);font-weight:500}
textarea.sd-inp{padding-block:13px;min-height:130px;resize:vertical;line-height:1.45}
.sd-inp[aria-invalid="true"]{border-color:var(--err);background:var(--err-bg)}
.sd-inp-big{font:700 1.3rem var(--f-d);letter-spacing:.05em;text-transform:uppercase}
.sd-sws{display:flex;flex-wrap:wrap;gap:9px}
.sd-sw{width:44px;height:44px;border-radius:9px;border:1px solid rgba(20,22,26,.35);background:var(--s);cursor:pointer;padding:0;position:relative;transition:transform .12s}
.sd-sw:hover{transform:translateY(-2px)}
.sd-sw[aria-checked="true"]{box-shadow:0 0 0 2.5px var(--pan),0 0 0 4.5px var(--ink)}
.sd-sw.rdy::after{content:"";position:absolute;right:-4px;top:-4px;width:12px;height:12px;border-radius:50%;background:var(--trawa);border:2px solid var(--pan)}
@media(max-width:480px){.sd-sws{display:grid;grid-template-columns:repeat(4,52px);gap:11px}.sd-sw{width:52px;height:52px}}
.sd-chk{display:flex;gap:12px;align-items:flex-start;cursor:pointer;font-size:.95rem;line-height:1.4}
.sd-chk input{appearance:none;-webkit-appearance:none;flex:none;width:24px;height:24px;border:1.5px solid var(--ink-2);border-radius:6px;background:var(--pan);cursor:pointer;margin:0;display:grid;place-items:center}
.sd-chk input:checked{background:var(--ink);border-color:var(--ink)}
.sd-chk input:checked::after{content:"";width:11px;height:6px;border:solid #fff;border-width:0 0 2.5px 2.5px;transform:rotate(-45deg) translateY(-1px)}
.sd-chk input[aria-invalid="true"]{border-color:var(--err);box-shadow:0 0 0 3px var(--err-bg)}
.sd-fld{min-width:0}
.sd-fld>label{display:block;font-weight:700;font-size:.92rem;margin-bottom:6px}
.sd-row2{display:grid;gap:14px}
@media(min-width:560px){.sd-row2{grid-template-columns:1fr 1fr}}
.sd-sel{min-height:44px;padding:0 36px 0 14px;border:1px solid var(--line-2);border-radius:8px;background:var(--pan) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2314161A' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 13px center;appearance:none;-webkit-appearance:none;font-weight:650;font-size:.92rem;cursor:pointer;color:var(--ink)}
.sd-bchips{display:flex;flex-wrap:wrap;gap:8px}
.sd-bchips label{cursor:pointer;position:relative}
.sd-bchips input{position:absolute;opacity:0;width:1px;height:1px}
.sd-bchips span{display:inline-block;padding:10px 14px;border:1px solid var(--line-2);border-radius:8px;background:var(--pan);font-weight:650;font-size:.92rem}
.sd-bchips input:checked+span{background:var(--ink);border-color:var(--ink);color:#fff}
.sd-bchips input:focus-visible+span{outline:2.5px solid var(--ocean);outline-offset:3px}
.sd-up{display:flex;gap:12px;align-items:center;padding:16px;border:1.5px dashed var(--line-2);border-radius:var(--r);background:var(--pan);cursor:pointer}
.sd-up input{max-width:100%;min-width:0}
.sd-note{padding:12px 14px;border-radius:var(--r);background:var(--pan-2);font-size:.9rem;line-height:1.45}

/* ---------- konfigurator breloka (ciemna komora) ---------- */
.sd-band{position:relative;overflow:hidden}
.sd-band::before{content:"";position:absolute;inset:0;background-image:linear-gradient(var(--dk-line) 1px,transparent 1px),linear-gradient(90deg,var(--dk-line) 1px,transparent 1px);background-size:44px 44px;opacity:.5;-webkit-mask-image:radial-gradient(90% 100% at 25% 50%,#000 10%,transparent 75%);mask-image:radial-gradient(90% 100% at 25% 50%,#000 10%,transparent 75%);pointer-events:none}
.sd-band>.sd-wrap{position:relative}
.sd-cfg{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(22px,4vw,56px);align-items:center}
.sd-cfg-prev{border:1px solid var(--dk-line);border-radius:12px;padding:8% 12%;color:var(--ink);overflow:hidden}
.sd-cfg-prev .sd-m{position:absolute;left:16px;top:14px;z-index:3;color:var(--ink-2)}
.sd-cfg-form{display:grid;gap:18px;min-width:0}
.sd-cfg-card{background:var(--pan);color:var(--ink);border-radius:10px;padding:clamp(16px,2.4vw,24px);display:grid;gap:18px}
.sd-cfg-card .sd-m{color:var(--ink-2)}
@media(min-width:900px){.sd-cfg{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr)}}
@media(max-width:899px){.sd-cfg-prev{position:sticky;top:calc(var(--sd-top) + 76px);z-index:3;padding:0 22%}.sd-cfg-prev .sd-art{margin-block:-17% -13%}.sd-cfg-prev .sd-m{display:none}}

/* ---------- jak to działa ---------- */
.sd-flow{display:grid;counter-reset:s;margin:0;padding:0;list-style:none}
.sd-flow li{counter-increment:s;padding:20px 0 24px;border-top:1.5px solid var(--ink);display:grid;gap:8px;align-content:start}
.sd-flow li::before{content:"0" counter(s);font:600 .74rem var(--f-m);letter-spacing:.08em;color:var(--ink-2)}
.sd-flow h3{font-size:1.35rem}
.sd-flow p{color:var(--ink-2);font-size:.97rem;max-width:40ch}
@media(min-width:820px){.sd-flow{grid-template-columns:repeat(3,minmax(0,1fr));gap:0 32px}.sd-flow.f4{grid-template-columns:repeat(4,minmax(0,1fr))}}
.sd-pic{display:flex;gap:6px;align-items:flex-end;height:40px;margin:2px 0 6px}
.sd-p1 i{width:24px;height:24px;border-radius:6px;background:var(--s);outline:2px solid transparent;outline-offset:2px;animation:sd-pick 3.6s infinite}
.sd-p1 i:nth-child(1){--s:var(--ink)} .sd-p1 i:nth-child(2){--s:var(--line-2);animation-delay:1.2s} .sd-p1 i:nth-child(3){--s:var(--akcja);animation-delay:2.4s}
@keyframes sd-pick{0%,30%{outline-color:var(--ink);transform:translateY(-5px)}34%,100%{outline-color:transparent;transform:none}}
.sd-p2{flex-direction:column-reverse;align-items:flex-start;gap:2px}
.sd-p2 i{height:6px;border-radius:3px;background:var(--ink);width:calc(40px + var(--i)*6px);transform-origin:left;animation:sd-lay 3.4s infinite;animation-delay:calc(var(--i)*.38s);opacity:0}
.sd-p2 i:last-child{background:var(--akcja)}
@keyframes sd-lay{0%{opacity:0;transform:scaleX(0)}10%,80%{opacity:1;transform:none}92%,100%{opacity:0;transform:none}}
.sd-p3{display:grid;grid-template-columns:repeat(4,15px);gap:3px;align-content:end}
.sd-p3 i{height:12px;border-radius:2px;background:var(--line-2)} .sd-p3 i.o{animation:sd-door 3s infinite}
@keyframes sd-door{0%,40%{background:var(--ink-3)}50%,100%{background:var(--akcja)}}

/* ---------- operator (Szymon) ---------- */
.sd-op{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(24px,5vw,64px);align-items:center}
.sd-ph{aspect-ratio:4/5;max-width:420px;width:100%;border:1px solid var(--line-2);border-radius:10px;display:grid;place-items:center;text-align:center;padding:24px;justify-self:center;overflow:hidden}
.sd-ph>div{display:grid;gap:10px;justify-items:center}
.sd-ph img{width:100%;height:100%;object-fit:cover}
.sd-ph.sd-plate::before{content:"";position:absolute;left:7%;right:7%;height:1.5px;background:var(--akcja);opacity:.75;animation:sd-scan2 4.5s ease-in-out infinite alternate}
@keyframes sd-scan2{from{top:9%}to{top:91%}}
.sd-op-t{display:grid;gap:18px;justify-items:start;min-width:0}
.sd-sheet{width:100%;border-top:1.5px solid var(--ink);margin:0}
.sd-sheet>div{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:12px;padding:12px 0;border-bottom:1px solid var(--line-2);align-items:baseline}
.sd-sheet dt{font:500 .7rem/1.3 var(--f-m);letter-spacing:.07em;text-transform:uppercase;color:var(--ink-2)}
.sd-sheet dd{font-weight:600;min-width:0;overflow-wrap:anywhere;margin:0}
@media(min-width:900px){.sd-op{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}}

/* ---------- Lab pomysłów ---------- */
.sd-idea{position:relative;overflow:hidden;background:var(--dk);color:var(--dk-ink);border-radius:12px;padding:clamp(24px,4.5vw,52px);display:grid;grid-template-columns:minmax(0,1fr);gap:22px;align-items:center}
.sd-idea::before{content:"";position:absolute;inset:0;background-image:linear-gradient(var(--dk-line) 1px,transparent 1px),linear-gradient(90deg,var(--dk-line) 1px,transparent 1px);background-size:32px 32px;opacity:.55;-webkit-mask-image:linear-gradient(100deg,transparent 30%,#000);mask-image:linear-gradient(100deg,transparent 30%,#000);pointer-events:none}
.sd-idea>*{position:relative}
.sd-idea-t{display:grid;gap:12px}
.sd-idea h2{font-size:clamp(1.6rem,3.4vw,2.5rem);color:var(--dk-ink)}
.sd-idea p{color:var(--dk-ink-2);max-width:54ch}
.sd-idea .sd-m{color:var(--dk-ink-2)}
.sd-idea .sd-tp{position:absolute;right:-40px;top:50%;width:min(420px,60%);height:auto;transform:translateY(-50%);opacity:.5;pointer-events:none}
.sd-idea .sd-tp rect{fill:none;stroke:var(--s);stroke-width:1.3;stroke-dasharray:100;stroke-dashoffset:100;animation:sd-draw 6s ease-in-out infinite alternate;animation-delay:var(--d)}
@keyframes sd-draw{to{stroke-dashoffset:0}}
@media(min-width:820px){.sd-idea{grid-template-columns:minmax(0,1fr) auto}}

/* ---------- stopka ---------- */
.sd-ft{background:var(--dk);color:#D9DBD6}
.sd-ft-in{padding-block:48px 28px;display:grid;gap:32px}
.sd-ft-g{display:grid;gap:28px 20px;grid-template-columns:repeat(2,minmax(0,1fr))}
.sd-ft-g>div:first-child{grid-column:1/-1}
.sd-ft h4{font:500 .7rem var(--f-m);letter-spacing:.08em;color:var(--dk-ink-2);margin-bottom:14px;text-transform:uppercase}
.sd-ft ul{margin:0;padding:0;list-style:none}
.sd-ft li{margin-bottom:9px;font-size:.94rem}
.sd-ft a{text-decoration:none;color:#D9DBD6}
.sd-ft a:hover{text-decoration:underline;text-underline-offset:3px;color:#fff}
.sd-ft .sd-logo{color:#fff;margin-bottom:14px}
.sd-ft p{font-size:.92rem;max-width:44ch;color:var(--dk-ink-2)}
.sd-ft-pay{display:flex;flex-wrap:wrap;gap:8px}
.sd-chip{display:inline-flex;align-items:center;padding:7px 11px;border-radius:5px;border:1px solid var(--dk-line);font:500 .68rem/1 var(--f-m);letter-spacing:.06em;text-transform:uppercase;color:var(--dk-ink-2)}
.sd-ft-b{border-top:1px solid var(--dk-line);padding-top:20px;display:flex;flex-wrap:wrap;gap:10px 24px;justify-content:space-between;font:500 .7rem var(--f-m);letter-spacing:.04em;color:var(--ink-3)}
.sd-ft-b a{color:inherit}
.sd-ft-b nav{display:flex;gap:8px 20px;flex-wrap:wrap}
.sd-ft .sd-todo{background:transparent;color:var(--dk-ink-2);border-color:#575C65}
.sd-ft-seller{margin-top:14px;font-size:.88rem;color:var(--dk-ink-2);line-height:1.5}
@media(min-width:820px){.sd-ft-g{grid-template-columns:1.4fr 1fr 1fr 1fr}.sd-ft-g>div:first-child{grid-column:auto}}

/* ---------- nagłówek strony, okruszki, filtry ---------- */
.sd-pg-h{padding-block:clamp(24px,4vw,48px) 6px;display:grid;gap:12px}
.sd-pg-h h1{font-size:clamp(1.9rem,5vw,3.3rem)}
@media(max-width:400px){.sd-pg-h h1{font-size:1.75rem}}
.sd-crumb{font:500 .68rem var(--f-m);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.sd-crumb a{text-underline-offset:3px;color:var(--ink-2)}
.sd-fbar{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap;padding-block:18px 22px}
.sd-chips{display:flex;gap:8px;overflow-x:auto;padding:4px 2px 8px;scrollbar-width:none;max-width:100%}
.sd-chips::-webkit-scrollbar{display:none}
.sd-fchip{flex:none;padding:10px 14px;border:1px solid var(--line-2);border-radius:8px;background:var(--pan);font-weight:650;font-size:.92rem;text-decoration:none;white-space:nowrap;color:var(--ink)}
.sd-fchip:hover{border-color:var(--ink);color:var(--ink)}
.sd-fchip[aria-current="page"]{background:var(--ink);border-color:var(--ink);color:#fff}
.sd-cnt-l{font:500 .7rem var(--f-m);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);white-space:nowrap}

/* ---------- ograniczony ruch: wszystkie animacje wyłączone ---------- */
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* ---------- połączenie z Breakdance ---------- */
/* Element „Shortcode” nie dokłada własnego pudełka: jego zawartość zachowuje się jak element rodzica (siatka, flex). */
.bde-shortcode{display:contents}
.sd-slot{display:contents}
ul.products li.sd-li{display:flex;margin:0;padding:0;list-style:none;min-width:0}
ul.products li.sd-li>.sd-pc{flex:1}
.sd-prow{min-width:0}
.sd-p2 i:nth-child(1){--i:0} .sd-p2 i:nth-child(2){--i:1} .sd-p2 i:nth-child(3){--i:2} .sd-p2 i:nth-child(4){--i:3} .sd-p2 i:nth-child(5){--i:4}
.sd-idea .sd-tp rect{--s:#575C65}
.sd-idea .sd-tp rect:nth-child(2){--d:.5s} .sd-idea .sd-tp rect:nth-child(3){--s:var(--akcja);--d:1s} .sd-idea .sd-tp rect:nth-child(4){--d:1.5s} .sd-idea .sd-tp rect:nth-child(5){--d:2s}
.sd-idea .sd-tp svg{width:100%;height:auto}
.sd-seller-b{display:block;line-height:1.5}
.sd-logo .bde-f-svg-icon2>svg,.sd-logo svg{height:100%;width:auto}
.sd-ft .sd-logo{height:30px;display:inline-flex}
@media(max-width:600px){html:root{--sd-top:0px}}
/* lista produktów: wyniki, sortowanie i paginacja WooCommerce pod naszą belką */
.sd-shop .woocommerce-result-count,.sd-shop .woocommerce-ordering{display:none}
.sd-shop .woocommerce-info{padding:18px;border-radius:var(--r);background:var(--pan);border:1px solid var(--line-2)}
.sd-shop-bar-r{display:flex;gap:12px;align-items:center}
.sd-shop-bar-r form{margin:0}
.sd-shop .woocommerce-notices-wrapper{margin-bottom:12px}
[hidden]{display:none!important}
.sd-crumb>*+*::before{content:"";display:inline-block;width:9px;height:9px;margin-right:6px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat}
.sd-crumb>*{display:inline-flex;align-items:center}
.sd-page-todo{margin-top:4px}