/* =====================================================================
   NK BASE – "Biała Ściana" tokens + shared components (from the accepted
   design system, docs: /var/www/nowy-sklep-projekt/prompt/). Loaded only
   when the skin is enabled (body.nk-skin).
   ===================================================================== */
/* ================= NK SHARED v1 — identical in all three artboards ================= */
body.nk-skin{--paper:#F7F4EF;--paper-2:#EFEAE2;--surface:#FFFFFF;
 --ink:#161513;--ink-2:#57524B;--ink-3:#736D64;--rule:#E4DED4;--control:#958C7E;
 --accent:#2E3BBF;--accent-hover:#222D96;--tint:#E8ECF2;--marker:#C4CFE2;
 --on-ink:#F7F4EF;--on-ink-2:#B8B1A6;
 --success:#1D6845;--success-tint:#E6F1EA;--danger:#B0281D;--danger-tint:#FBECE9;
 --st-clay:#C0573D;--st-mustard:#DDB04A;--st-sage:#8EAA8A;--st-sky:#A7BFDC;--st-blush:#EEC3B4;--st-moss:#3F5A3C;--st-kraft:#F3EEE3;--st-liner:#EDE8DE;
 --st-holo:conic-gradient(from 210deg,#E9D8E4,#D6E4F0,#DCEFE3,#F3ECD2,#E9D8E4);
 --r-pill:999px;--r-xl:28px;--r-lg:24px;--r-md:20px;--r-card:16px;--r-sm:12px;--r-xs:10px;--r-tag:6px;
 --sh-1:0 1px 2px rgba(22,21,19,.06),0 1px 1px rgba(22,21,19,.04);
 --sh-2:0 14px 34px -14px rgba(22,21,19,.22);
 --sh-up:0 -10px 28px -12px rgba(22,21,19,.22);
 --sh-sticker:drop-shadow(0 1px 1px rgba(22,21,19,.16)) drop-shadow(0 8px 14px rgba(22,21,19,.14));
 --sh-lift:drop-shadow(0 2px 2px rgba(22,21,19,.14)) drop-shadow(0 16px 24px rgba(22,21,19,.16));
 --f-display:'Poetsen One','Trebuchet MS',sans-serif;
 --f-ui:'Poppins','Helvetica Neue',sans-serif;
 --f-tag:'Sedgwick Ave Display','Poetsen One',cursive;
 --nk-wrap:1440px;--nk-gut:15px}
.nk{color-scheme:light;background:var(--paper);color:var(--ink-2);font:400 15px/24px var(--f-ui);font-synthesis:none;-webkit-font-smoothing:antialiased;text-align:left}
.nk *,.nk *::before,.nk *::after{box-sizing:border-box;margin:0;padding:0}
.nk p,.nk li,.nk span,.nk a,.nk label,.nk button{letter-spacing:inherit}
.nk h1,.nk h2,.nk .display{font-family:var(--f-display);font-weight:400;letter-spacing:-.01em;color:var(--ink)}
.nk h3,.nk h4{font:600 17px/24px var(--f-ui);color:var(--ink)}
.nk a{color:inherit;text-decoration:none}
.nk button,.nk input,.nk textarea,.nk select{font:inherit;color:inherit;background:none;border:0}
.nk ul,.nk ol{list-style:none}
.nk svg{display:block;overflow:visible}
.nk :focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.nk .on-ink :focus-visible{outline-color:var(--on-ink)}
.nk .ph{text-decoration:underline dotted 1px;text-underline-offset:3px}
.nk .num{font-variant-numeric:tabular-nums}
.nk .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* text roles */
.nk .eyebrow{font:600 12px/16px var(--f-ui);letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.nk .on-ink .eyebrow{color:var(--on-ink-2)}
.nk .micro{font:600 11px/16px var(--f-ui);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.nk .lead{font:400 17px/28px var(--f-ui);color:var(--ink-2)}
.nk .small{font:400 13px/20px var(--f-ui)}
.nk .hint{font:400 12px/18px var(--f-ui);color:var(--ink-3)}
.nk .label{display:block;font:600 13px/20px var(--f-ui);color:var(--ink);margin-bottom:8px}
/* buttons */
.nk .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:48px;padding:0 24px;border-radius:var(--r-pill);background:var(--ink);color:#fff;font:600 14px/20px var(--f-ui);letter-spacing:.01em;white-space:nowrap;cursor:pointer}
.nk .btn--arrow{padding:0 6px 0 22px;gap:14px}
.nk .btn__dot{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--accent);color:#fff}
.nk .btn__dot svg{width:16px;height:16px}
.nk .btn--lg{height:56px;font-size:15px}.nk .btn--lg .btn__dot{width:44px;height:44px}
.nk .btn--block{display:flex;width:100%;justify-content:space-between}
.nk .btn--ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
.nk .btn--paper{background:var(--paper);color:var(--ink)}
.nk .btn[disabled]{background:var(--paper-2);color:var(--ink-3);cursor:not-allowed}
.nk .btn[disabled] .btn__dot{background:var(--rule);color:var(--ink-3)}
.nk .pill-banner{display:inline-flex;align-items:center;gap:10px;height:34px;padding:0 5px 0 16px;border-radius:var(--r-pill);background:#fff;color:var(--ink);font:600 12px/16px var(--f-ui);white-space:nowrap}
.nk .pill-banner .btn__dot{width:24px;height:24px}.nk .pill-banner .btn__dot svg{width:12px;height:12px}
.nk .link{display:inline-flex;align-items:center;gap:6px;color:var(--accent);font:600 14px/20px var(--f-ui)}
.nk .link svg{width:16px;height:16px}
.nk .on-ink .link{color:var(--on-ink);text-decoration:underline;text-underline-offset:3px}
.nk .icon-btn{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 1px var(--rule);color:var(--ink)}
.nk .icon-btn svg{width:20px;height:20px}
/* chips + segmented */
.nk .chip{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 14px 0 12px;border-radius:var(--r-pill);background:#fff;box-shadow:inset 0 0 0 1.5px var(--control);color:var(--ink);font:500 13px/20px var(--f-ui);white-space:nowrap}
.nk .chip[aria-checked="true"],.nk .chip[aria-pressed="true"]{box-shadow:inset 0 0 0 2px var(--ink);font-weight:600}
.nk .chip--solid[aria-checked="true"]{background:var(--ink);color:#fff}
.nk .chip .ck{margin-left:auto;width:14px;height:14px}
.nk .swatch{flex:none;width:16px;height:16px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(22,21,19,.28)}
.nk .seg{display:inline-flex;gap:4px;padding:4px;border-radius:var(--r-pill);background:#fff;box-shadow:inset 0 0 0 1.5px var(--control)}
.nk .seg--block{display:flex}.nk .seg--block>*{flex:1}
.nk .seg>button{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 18px;border-radius:var(--r-pill);color:var(--ink-2);font:600 13px/20px var(--f-ui);white-space:nowrap}
.nk .seg>button[aria-checked="true"]{background:var(--ink);color:#fff}
.nk .seg>button svg{width:18px;height:18px}
/* fields */
.nk .field{display:flex;align-items:center;gap:8px;height:48px;padding:0 14px;border-radius:var(--r-sm);background:#fff;box-shadow:inset 0 0 0 1.5px var(--control)}
.nk .field input,.nk .field textarea{flex:1;min-width:0;outline:0;font:500 15px/20px var(--f-ui);color:var(--ink)}
.nk .field ::placeholder{color:var(--ink-3);font-weight:400}
.nk .field__in{font:600 11px/16px var(--f-ui);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.nk .field__unit{font:500 13px/20px var(--f-ui);color:var(--ink-3)}
.nk .field.is-focus{box-shadow:inset 0 0 0 1.5px var(--accent),0 0 0 4px var(--tint)}
.nk .field.is-error{box-shadow:inset 0 0 0 1.5px var(--danger)}
.nk .field-error{display:flex;gap:6px;align-items:center;margin-top:6px;font:500 13px/20px var(--f-ui);color:var(--danger)}
.nk .field--area{height:auto;min-height:76px;align-items:flex-start;padding:12px 14px}
.nk .field--area textarea{resize:none;height:52px}
.nk .stepbtn{display:grid;place-items:center;width:48px;height:48px;border-radius:var(--r-sm);background:var(--paper-2);color:var(--ink)}
.nk input.cb{appearance:none;-webkit-appearance:none;flex:none;width:20px;height:20px;margin-top:2px;border-radius:var(--r-tag);background:#fff;box-shadow:inset 0 0 0 1.5px var(--control)}
.nk input.cb:checked{box-shadow:none;background:var(--ink)}
/* checkbox tick, canvas-safe: <span class="cbx"><input type="checkbox" class="cb" id="…" checked="checked"><svg class="cbx__ck" viewBox="0 0 20 20" aria-hidden="true" focusable="false"><path d="M5 10.5l3.2 3.2L15 7" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg></span> */
.nk .cbx{position:relative;flex:none;display:inline-grid;width:20px;height:20px;margin-top:2px}
.nk .cbx .cb{margin-top:0}
.nk .cbx__ck{position:absolute;left:0;top:0;width:20px;height:20px;pointer-events:none;display:none}
.nk .cb:checked+.cbx__ck{display:block}
.nk .check-box{display:flex;gap:12px;padding:14px 16px;border-radius:var(--r-sm);background:var(--paper);box-shadow:inset 0 0 0 1px var(--rule);cursor:pointer}
.nk .drop{position:relative;display:flex;align-items:center;gap:12px;height:104px;padding:0 16px;border-radius:var(--r-sm);background:var(--paper);border:1.5px dashed var(--control)}
.nk .drop--empty{flex-direction:column;justify-content:center;gap:4px;text-align:center}
.nk .drop.is-over{border-color:var(--accent);background:var(--tint)}
.nk .drop__scissors{position:absolute;top:-10px;left:14px;width:20px;height:20px;padding:2px;background:#fff;color:var(--ink-3)}
/* cards */
.nk .card{background:#fff;border-radius:var(--r-md);box-shadow:inset 0 0 0 1px var(--rule),var(--sh-1);padding:24px}
.nk .card__head{display:flex;align-items:center;gap:10px;height:26px}
.nk .stepnum{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--ink);color:#fff;font:700 13px/1 var(--f-ui)}
/* tier table */
.nk .tiers{display:flex;flex-direction:column}
.nk .tiers__head,.nk .tier{display:grid;grid-template-columns:24px 1.25fr 1fr 1fr 56px;align-items:center;column-gap:8px;padding:0 12px}
.nk .tiers__head{height:32px;box-shadow:inset 0 -1px 0 var(--rule)}
.nk .tiers__head>*{font:600 11px/16px var(--f-ui);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.nk .tier{position:relative;height:46px;width:100%;text-align:left;border-radius:var(--r-xs);font:500 14px/20px var(--f-ui);font-variant-numeric:tabular-nums;color:var(--ink);cursor:pointer}
.nk .tier+.tier::before{content:"";position:absolute;left:12px;right:12px;top:0;height:1px;background:var(--rule)}
.nk .tier[aria-checked="true"]{background:var(--ink);color:var(--on-ink)}
.nk .tier[aria-checked="true"]::before,.nk .tier[aria-checked="true"]+.tier::before{display:none}
.nk .tier .r{width:18px;height:18px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--control)}
.nk .tier[aria-checked="true"] .r{box-shadow:inset 0 0 0 1.5px #fff;background:radial-gradient(circle,#fff 0 4px,transparent 4.5px)}
.nk .t-r{text-align:right}.nk .t-off{color:var(--ink-2);font-weight:600}
.nk .tier[aria-checked="true"] .t-qty{font-weight:600}.nk .tier[aria-checked="true"] .t-gross{font-weight:700}
.nk .tier[aria-checked="true"] .t-off{color:var(--on-ink)}
.nk .hit{display:inline-flex;align-items:center;gap:4px;height:22px;padding:0 8px;margin-left:6px;border-radius:var(--r-pill);background:var(--tint);color:var(--accent);font:600 11px/22px var(--f-ui);vertical-align:middle}
.nk .hit svg{width:12px;height:12px}
/* size cards */
.nk .size{position:relative;display:flex;flex-direction:column;align-items:center;border-radius:14px;background-color:#fff;background-image:radial-gradient(rgba(22,21,19,.08) 1px,transparent 1.5px);background-size:8px 8px;box-shadow:inset 0 0 0 1.5px var(--control);cursor:pointer}
.nk .size[aria-checked="true"]{box-shadow:inset 0 0 0 2px var(--ink)}
.nk .size__ck{position:absolute;top:-6px;right:-6px;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--ink);color:#fff;box-shadow:0 0 0 2px #fff}
.nk .size__ck svg{width:12px;height:12px}
/* badges & pills */
.nk .badge-sale{position:absolute;top:10px;left:10px;display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:var(--accent);color:#fff;font:700 12px/1 var(--f-ui);box-shadow:0 0 0 3px #fff;transform:rotate(-8deg);filter:var(--sh-sticker)}
.nk .badge-new{display:inline-flex;align-items:center;height:22px;padding:0 10px 0 14px;background:var(--ink);color:#fff;font:600 11px/22px var(--f-ui);letter-spacing:.06em;text-transform:uppercase;clip-path:polygon(8px 0,100% 0,100% 100%,8px 100%,0 50%)}
.nk .badge-count{position:absolute;top:-6px;right:-8px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--accent);color:#fff;font:700 10px/18px var(--f-ui);text-align:center}
.nk .pill-sample{display:inline-flex;align-items:center;height:26px;padding:0 12px;border-radius:var(--r-pill);box-shadow:inset 0 0 0 1px var(--ink-3);border:0;color:var(--ink-2);font:500 12px/16px var(--f-ui);background-image:none;outline:1px dashed var(--ink-3);outline-offset:-1px}
.nk .pill-ok{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 12px;border-radius:var(--r-pill);background:var(--success-tint);color:var(--success);font:600 13px/20px var(--f-ui)}
.nk .tag-example{display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:var(--r-tag);outline:1px dashed var(--ink-3);outline-offset:-1px;color:var(--ink-2);font:600 11px/16px var(--f-ui);letter-spacing:.08em;text-transform:uppercase}
.nk .textchip{display:inline-flex;align-items:center;height:28px;padding:0 10px;border-radius:var(--r-tag);box-shadow:inset 0 0 0 1px var(--control);color:var(--ink-2);font:600 11px/16px var(--f-ui)}
.nk .hangtag{display:inline-flex;align-items:stretch;height:28px;border-radius:var(--r-tag);box-shadow:inset 0 0 0 1.5px var(--ink);font:600 11px/16px var(--f-ui);letter-spacing:.12em;text-transform:uppercase;color:var(--ink)}
.nk .hangtag>span{display:flex;align-items:center;padding:0 10px}
.nk .hangtag>span:first-child::before{content:"";width:6px;height:6px;margin-right:8px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--ink)}
.nk .hangtag>span+span{box-shadow:inset 1.5px 0 0 var(--ink)}
/* tabs */
.nk .tabs{display:flex;justify-content:center;gap:36px;box-shadow:inset 0 -1px 0 var(--rule)}
.nk .tabs [role="tab"]{position:relative;height:44px;font:600 15px/20px var(--f-ui);color:var(--ink-2)}
.nk .tabs [aria-selected="true"]{color:var(--ink)}
.nk .tabs [aria-selected="true"]::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:2px;background:var(--ink)}
/* product card */
.nk .pcard{position:relative;display:flex;flex-direction:column;padding:12px;border-radius:var(--r-card);background:#fff;box-shadow:inset 0 0 0 1px var(--rule)}
.nk .pcard__well{position:relative;display:grid;place-items:center;aspect-ratio:1;border-radius:var(--r-sm);background:var(--paper-2)}
.nk .pcard__fav{position:absolute;top:10px;right:10px}
.nk .pcard__body{display:flex;flex-direction:column;gap:6px;padding:14px 6px 6px}
.nk .pcard__title{font:500 15px/22px var(--f-ui);color:var(--ink);min-height:44px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.nk .pcard__price{display:flex;align-items:baseline;gap:8px;font:600 17px/24px var(--f-ui);color:var(--ink);font-variant-numeric:tabular-nums}
.nk .pcard__old{font:400 13px/20px var(--f-ui);color:var(--ink-3);text-decoration:line-through}
.nk .pcard__omni{font:400 11px/16px var(--f-ui);color:var(--ink-3)}
.nk .pcard__add{position:absolute;right:12px;bottom:12px;background:var(--ink);color:#fff;box-shadow:none}
/* motifs */
.nk .stk{filter:var(--sh-sticker)}
.nk .mk{position:relative;display:inline-block;white-space:nowrap}
.nk .mk-u{position:absolute;left:-2%;bottom:-.16em;width:104%;height:.34em;color:var(--accent);pointer-events:none}
.nk .hl{position:relative;z-index:0;display:inline-block;padding:0 .2em;margin:0 -.04em;color:var(--ink);white-space:nowrap}
.nk .hl::before{content:"";position:absolute;z-index:-1;inset:.14em -.02em .02em;background:var(--marker);border-radius:4px 10px 6px 12px/10px 5px 12px 6px;transform:rotate(-.8deg)}
.nk .hl .drips{position:absolute;left:14%;top:calc(100% - 6px);width:120px;height:30px;pointer-events:none}
.nk .tag{position:absolute;font:400 44px/1 var(--f-tag);color:var(--ink);transform:rotate(-7deg);opacity:.92;white-space:nowrap;pointer-events:none}
.nk .mist{position:absolute;pointer-events:none}
.nk .mist::before{content:"";position:absolute;inset:0;background:radial-gradient(closest-side,rgba(46,59,191,.18),rgba(46,59,191,.07) 55%,transparent 78%);filter:blur(6px)}
.nk .mist__specks{position:absolute;inset:8%;opacity:.5;-webkit-mask-image:radial-gradient(closest-side,#000 25%,transparent 78%);mask-image:radial-gradient(closest-side,#000 25%,transparent 78%)}
.nk .grain{position:relative;background-color:var(--paper-2)}
/* grain, canvas-safe: first child of .grain = <svg class="grain__svg" aria-hidden="true" focusable="false"><filter id="PREFIX-grain"><feTurbulence type="fractalNoise" baseFrequency=".8" numOctaves="2" stitchTiles="stitch"></feTurbulence><feColorMatrix values="0 0 0 0 .09 0 0 0 0 .08 0 0 0 0 .07 0 0 0 .07 0"></feColorMatrix></filter><rect width="100%" height="100%" filter="url(#PREFIX-grain)"></rect></svg> */
.nk .grain__svg{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:0}
.nk .tape-band{position:absolute;display:flex;align-items:center;gap:28px;height:56px;padding:0 40px;white-space:nowrap;transform:rotate(-1deg);background:#fff repeating-linear-gradient(90deg,rgba(22,21,19,.025) 0 2px,transparent 2px 7px);box-shadow:0 10px 22px -12px rgba(22,21,19,.28),0 1px 0 rgba(22,21,19,.06)}
.nk .tape-band li{display:flex;align-items:center;gap:28px;font:700 14px/20px var(--f-ui);letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
/* ---------- layout helpers ---------- */
.nk .nk-wrap,.nk-wrap{width:100%;max-width:var(--nk-wrap);margin:0 auto;padding:0 var(--nk-gut)}
@media (max-width:767px){body.nk-skin{--nk-gut:16px}}
.nk .nk-i,.nk-i{flex:none;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.nk .nk-i15{stroke-width:1.5}
.nk .nk-if,.nk-if{flex:none;fill:currentColor;stroke:none}
.nk .nk-poet{font-family:var(--f-display);font-weight:400}
.nk .nk-defs,.nk-defs{position:absolute;width:0;height:0;overflow:hidden;pointer-events:none}
.nk .nk-art{position:absolute;pointer-events:none}
.nk .nk-reg{position:absolute;width:16px;height:16px;pointer-events:none}
.nk .h2,.nk h2{font:400 40px/46px var(--f-display);letter-spacing:-.01em;color:var(--ink)}
@media (max-width:767px){.nk .h2,.nk h2{font-size:28px;line-height:32px}}
.nk .stk{transition:transform .25s ease,filter .25s ease}
.sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.nk-skip{position:absolute;left:-9999px;top:8px;z-index:10000;padding:10px 16px;border-radius:999px;background:#161513;color:#fff;font:600 14px/20px 'Poppins',sans-serif}
.nk-skip:focus{left:8px;color:#fff}
.nk .tag{font-synthesis:none}
@media (prefers-reduced-motion:reduce){.nk *{transition:none!important;animation:none!important}}
/* Digic resets we don't want inside .nk */
.nk h1,.nk h2,.nk h3,.nk h4{text-transform:none;margin:0}
.nk a:hover{color:inherit}
.nk .link:hover{color:var(--accent-hover)}
.nk .btn:hover{color:#fff;background:#000}
.nk .btn--paper:hover{background:#fff;color:var(--ink)}
.nk .btn--ghost:hover{background:var(--ink);color:#fff}
.nk .icon-btn:hover{box-shadow:inset 0 0 0 1.5px var(--ink)}
.nk input[type=search]::-webkit-search-cancel-button{-webkit-appearance:none}
.nk button{cursor:pointer}
.nk ul,.nk ol{margin:0;padding:0}