/* =====================================================================
   NK LOOK „STREET” (owner 01.10.2026) — modern blue / black / white /
   light grey, street-sketch doodles (crowns, stars, bolts, splatters) and
   vivid, GLOSSY sticker examples (we print on gloss paper).
   A layer over „Biała Ściana”: every rule needs body.nk-look-street
   (inc/nk-look.php). Without the class the site is the original look.
   Doodles: ../img/street/*.svg · gloss gradients: #nk-gl-* (nk-look.php).
   ===================================================================== */

/* ---------------------------------------------------------- 1. tokens */
body.nk-skin.nk-look-street{
 --paper:#FFFFFF;--paper-2:#F1F3F6;--surface:#FFFFFF;
 --ink:#0E0F12;--ink-2:#3D424A;--ink-3:#69707B;--rule:#E2E5EA;--control:#8E95A0;
 --accent:#1F5FCC;--accent-hover:#164AA6;--tint:#E8F0FD;--marker:#BCD3F6;
 --on-ink:#FFFFFF;--on-ink-2:#A8AFBA;
 --success:#1D6845;--success-tint:#E6F1EA;--danger:#C62828;--danger-tint:#FDECEC;
 --st-clay:#2F6BE0;--st-mustard:#4FA3F2;--st-sage:#E2E5EA;--st-sky:#CADFFA;--st-blush:#F1F3F6;--st-moss:#13306A;--st-kraft:#F4F5F7;--st-liner:#ECEFF3;
 --st-holo:conic-gradient(from 210deg,#DCE7F8,#FFFFFF,#C7D8F3,#EEF3FB,#DCE7F8);
 --st-blue:#2F6BE0;--st-blue-hi:#5A95F0;
 --sh-1:0 1px 2px rgba(14,15,18,.07),0 1px 1px rgba(14,15,18,.05);
 --sh-2:0 16px 36px -14px rgba(14,15,18,.26);
 --sh-up:0 -10px 28px -12px rgba(14,15,18,.24);
 /* gloss paper: a crisper, deeper shadow than the matte original */
 --sh-sticker:drop-shadow(0 1px 1px rgba(14,15,18,.26)) drop-shadow(0 9px 12px rgba(14,15,18,.2));
 --sh-lift:drop-shadow(0 2px 2px rgba(14,15,18,.22)) drop-shadow(0 18px 24px rgba(14,15,18,.22));
 /* Archivo ExtraBold SemiCondensed (one face, 800 / 87.5 %): modern grotesk, ~5 % narrower than Poetsen One,
    so every heading keeps its size and line breaks. */
 --f-display:'Archivo','Arial Narrow','Helvetica Neue',sans-serif;
 --f-tag:'Sedgwick Ave Display','Archivo',cursive}

/* -------------------------------------------------------- 2. type */
body.nk-look-street .nk h1,body.nk-look-street .nk h2,body.nk-look-street .nk .display,body.nk-look-street .nk .h2{letter-spacing:-.02em}
/* texts printed ON the sticker examples stay in the rounded sticker face */
body.nk-look-street .nk .nk-poet{font-family:'Poetsen One','Trebuchet MS',sans-serif}
body.nk-look-street .nk .eyebrow{color:var(--accent)}

/* marker word („Twoja”, …): blue letters with a hard black shadow — like brush graffiti */
body.nk-look-street .nk .mk{color:var(--accent);text-shadow:.055em .055em 0 var(--ink)}
body.nk-look-street .nk .mk-u{color:var(--ink)}
/* highlight block („w minutę”): white letters on a blue brush block, blue drips */
body.nk-look-street .nk .hl{color:#fff}
body.nk-look-street .nk .hl::before{background:var(--accent);border-radius:3px 9px 4px 11px/9px 4px 11px 4px;transform:rotate(-1.4deg)}
body.nk-look-street .nk .hl .drips g{fill:var(--accent)}
/* graffiti tags („wlepka”, „wlepione”) */
body.nk-look-street .nk .tag{color:var(--accent);opacity:1;text-shadow:2px 2px 0 var(--ink)}

/* ----------------------------------------------------- 3. components */
body.nk-look-street .nk .btn:hover{background:var(--accent);color:#fff}
body.nk-look-street .nk .btn--arrow:hover .btn__dot{background:#fff;color:var(--accent)}
body.nk-look-street .nk .btn--paper:hover{background:#fff;color:var(--ink)}
body.nk-look-street .nk .btn--ghost:hover{background:var(--ink);color:#fff}
body.nk-look-street .nk .stepnum{background:var(--accent)}
body.nk-look-street .nk .hit{background:var(--accent);color:#fff}
body.nk-look-street .nk .badge-sale{background:var(--accent)}
body.nk-look-street .nk .card{border-radius:16px}
body.nk-look-street .nk .size{background-image:radial-gradient(rgba(14,15,18,.09) 1px,transparent 1.5px)}
body.nk-look-street .nk .hangtag>span:first-child::before{background:var(--accent);box-shadow:none}
body.nk-look-street .nk .tabs [aria-selected="true"]::after{background:var(--accent);height:3px}
body.nk-look-street .nk .pill-banner .btn__dot{background:var(--accent)}

/* spray mist behind sticker clusters → blue + grey splatter */
body.nk-look-street .nk .mist::before{background:url(../img/street/splat-grey.svg) 50% 50%/86% no-repeat,url(../img/street/splat-blue.svg) 72% 28%/46% no-repeat;filter:none}
body.nk-look-street .nk .mist__specks{opacity:.3}

/* ------------------------------------------------------ 4. header */
body.nk-skin.nk-look-street .nk-hd__plate{background:var(--ink);color:#fff;letter-spacing:-.02em}
body.nk-skin.nk-look-street .nk-hd__flap{background:linear-gradient(135deg,#4A4F59 0,#23262C 50%,transparent 50%)}
body.nk-skin.nk-look-street .nk-hd__logo:hover{color:#fff}
body.nk-skin.nk-look-street .nk-hd__star{color:var(--accent);width:12px;height:12px}
body.nk-skin.nk-look-street .nk-hd__main{box-shadow:inset 0 -1px 0 var(--rule)}

/* -------------------------------------------------------- 5. hero */
/* doodles around each slide's sticker cluster (stage coordinates 520 × 460, placed in the free spots of that slide):
   a crown on the top sticker, stars, a bolt, a smiley, emphasis lines */
body.nk-look-street .nk-hero__stage::before{content:"";position:absolute;left:0;top:0;width:520px;height:460px;pointer-events:none;background-repeat:no-repeat}
body.nk-look-street .nk-hero__slide:nth-of-type(1) .nk-hero__stage::before{background-image:url(../img/street/crown.svg),url(../img/street/sparks.svg),url(../img/street/star-blue.svg),url(../img/street/star-ink.svg),url(../img/street/bolt.svg),url(../img/street/smiley.svg);
 background-position:235px 32px,172px 40px,40px 150px,482px 192px,300px 402px,26px 36px;background-size:70px auto,36px auto,36px auto,22px auto,24px auto,34px auto}
body.nk-look-street .nk-hero__slide:nth-of-type(2) .nk-hero__stage::before{background-image:url(../img/street/crown-blue.svg),url(../img/street/star-blue.svg),url(../img/street/smiley.svg),url(../img/street/bolt-ink.svg),url(../img/street/sparks.svg);
 background-position:371px -4px,58px 300px,112px 384px,490px 300px,18px 226px;background-size:64px auto,40px auto,34px auto,22px auto,34px auto}
body.nk-look-street .nk-hero__slide:nth-of-type(3) .nk-hero__stage::before{background-image:url(../img/street/crown.svg),url(../img/street/star-blue.svg),url(../img/street/star-ink.svg),url(../img/street/sparks.svg),url(../img/street/bolt.svg),url(../img/street/smiley.svg);
 background-position:310px -4px,470px 120px,60px 90px,82px 300px,40px 384px,470px 240px;background-size:64px auto,36px auto,22px auto,36px auto,24px auto,34px auto}
body.nk-look-street .nk-hero__slider{background:var(--paper-2)}
body.nk-look-street .nk-hero__dot[aria-current="true"]{background:var(--accent)}
/* side banners: a star doodle in the corner */
body.nk-look-street .nk-hero__bn::before{content:"";position:absolute;right:14px;top:12px;z-index:2;width:22px;height:22px;background:url(../img/street/star-blue.svg) center/contain no-repeat;pointer-events:none}
body.nk-look-street .nk-hero__bn--ink::before{background-image:url(../img/street/star-line.svg)}
body.nk-look-street .nk-hero__bn--ink{background:var(--ink)}
body.nk-look-street .nk-hero__go{background:var(--accent)}

/* --------------------------------------------------------- 6. tape */
body.nk-look-street .nk-tape__band{background:var(--ink);box-shadow:0 14px 26px -14px rgba(14,15,18,.5)}
body.nk-look-street .nk-tape__list li{color:#fff}
body.nk-look-street .nk-tape__star{color:var(--st-blue-hi)}
body.nk-look-street .nk-tape__pause{background:#fff}

/* ------------------------------------------------ 7. section doodles */
body.nk-look-street :is(.nk-rod__h2,.nk-mat__h2,.nk-wz__h2,.nk-jak__h2,.nk-sc__h2,.nk-op__h2,.nk-faq__h2)::after{content:"";display:inline-block;width:.86em;height:.86em;margin-left:.24em;vertical-align:-.04em;background:center/contain no-repeat;transform:rotate(8deg);pointer-events:none}
body.nk-look-street .nk-rod__h2::after{background-image:url(../img/street/star-blue.svg)}
body.nk-look-street .nk-mat__h2::after{background-image:url(../img/street/bolt.svg);width:.6em}
body.nk-look-street .nk-wz__h2::after{background-image:url(../img/street/crown-blue.svg);width:1em;height:.76em;transform:rotate(-10deg)}
body.nk-look-street .nk-jak__h2::after{background-image:url(../img/street/sparks-r.svg)}
body.nk-look-street .nk-sc__h2::after{background-image:url(../img/street/smiley.svg);transform:rotate(-8deg)}
body.nk-look-street .nk-op__h2::after{background-image:url(../img/street/star-ink.svg)}
body.nk-look-street .nk-faq__h2::after{background-image:url(../img/street/bolt-ink.svg);width:.6em}
/* the wall of stickers: cool grey with a light dot grid instead of warm paper grain */
body.nk-look-street .nk .grain{background-color:var(--paper-2);background-image:url(../img/street/dots.svg);background-size:24px 24px}
body.nk-look-street .nk .grain__svg{opacity:.5}

/* -------------------------------------------- 8. homepage sections */
/* materials: the three sample stickers in the new colours (glossy sheen already in the base rule) */
body.nk-look-street .nk-home .nk-mat__c--shape{--c:#121318}
body.nk-look-street .nk-home .nk-mat__c--size{--c:var(--st-mustard)}
body.nk-look-street .nk-home .nk-mat__c--qty{--c:var(--st-blue)}
body.nk-look-street .nk-home .nk-op__stars{color:var(--accent)}
body.nk-look-street .nk-home .nk-op__qm{color:var(--accent)}
body.nk-look-street .nk-home .nk-kr__sw--holo{background:linear-gradient(115deg,transparent 38%,rgba(255,255,255,.85) 48%,transparent 58%),var(--st-holo)}

/* -------------------------------------------------------- 9. footer */
body.nk-look-street .nk-ft__word{-webkit-text-stroke:1.25px rgba(31,95,204,.34)}
body.nk-look-street .nk-ft__pill{position:relative}
body.nk-look-street .nk-ft__pill::after{content:"";position:absolute;right:30px;top:-18px;width:44px;height:34px;background:url(../img/street/crown-blue.svg) center/contain no-repeat;transform:rotate(12deg);pointer-events:none}
@media (max-width:767px){
	body.nk-look-street .nk-ft__pill::after{right:18px;top:-22px;width:36px;height:28px}
	body.nk-look-street .nk-hero__bn::before{width:18px;height:18px}
}

/* ------------------------------------------- 10. creator / funnel */
body.nk-look-street .wlk .wlk-tile[aria-checked="true"] .wlk-tile__ic{background:var(--accent);color:#fff}

/* ==================================================================
   11. Colours drawn inside SVG (presentation attributes): sticker examples,
   reg marks, cut lines, previews. CSS beats presentation attributes.
   ================================================================== */
/* 11a. plain remap (everywhere) */
body.nk-look-street [fill="#C0573D" i]{fill:#2F6BE0}
body.nk-look-street [fill="#DDB04A" i]{fill:#4FA3F2}
body.nk-look-street [fill="#8EAA8A" i]{fill:#E2E5EA}
body.nk-look-street [fill="#A7BFDC" i]{fill:#CADFFA}
body.nk-look-street [fill="#EEC3B4" i]{fill:#F1F3F6}
body.nk-look-street [fill="#3F5A3C" i]{fill:#13306A}
body.nk-look-street [fill="#161513" i]{fill:#0E0F12}
body.nk-look-street [fill="#F7F4EF" i]{fill:#FFFFFF}
body.nk-look-street [fill="#2E3BBF" i]{fill:#1F5FCC}
body.nk-look-street [fill="#736D64" i]{fill:#69707B}
body.nk-look-street [fill="#B8B1A6" i]{fill:#A8AFBA}
body.nk-look-street [fill="#57524B" i]{fill:#3D424A}
body.nk-look-street [fill="#E4DED4" i]{fill:#E2E5EA}
body.nk-look-street [fill="#EFEAE2" i]{fill:#EEF1F5}
body.nk-look-street [fill="#F3EEE3" i]{fill:#F4F5F7}
body.nk-look-street [fill="#EDE8DE" i]{fill:#ECEFF3}
body.nk-look-street [fill="#C4CFE2" i]{fill:#BCD3F6}
body.nk-look-street [fill="#958C7E" i]{fill:#8E95A0}
body.nk-look-street [stroke="#C0573D" i]{stroke:#2F6BE0}
body.nk-look-street [stroke="#DDB04A" i]{stroke:#4FA3F2}
body.nk-look-street [stroke="#8EAA8A" i]{stroke:#C6CBD3}
body.nk-look-street [stroke="#A7BFDC" i]{stroke:#9CC4F7}
body.nk-look-street [stroke="#3F5A3C" i]{stroke:#13306A}
body.nk-look-street [stroke="#161513" i]{stroke:#0E0F12}
body.nk-look-street [stroke="#F7F4EF" i]{stroke:#FFFFFF}
body.nk-look-street [stroke="#2E3BBF" i]{stroke:#1F5FCC}
body.nk-look-street [stroke="#736D64" i]{stroke:#69707B}
body.nk-look-street [stroke="#B8B1A6" i]{stroke:#A8AFBA}
body.nk-look-street [stroke="#E4DED4" i]{stroke:#E2E5EA}
body.nk-look-street [stroke="#C4CFE2" i]{stroke:#BCD3F6}
body.nk-look-street [stop-color="#EFEAE2" i]{stop-color:#F3F5F8}
body.nk-look-street [stop-color="#E4DED4" i]{stop-color:#D9DEE5}
body.nk-look-street [stop-color="#E9D8E4" i]{stop-color:#DCE7F8}
body.nk-look-street [stop-color="#D6E4F0" i]{stop-color:#FFFFFF}
body.nk-look-street [stop-color="#DCEFE3" i]{stop-color:#C7D8F3}
body.nk-look-street [stop-color="#F3ECD2" i]{stop-color:#EEF3FB}
body.nk-look-street [flood-color="#161513" i]{flood-color:#0E0F12}

/* 11b. GLOSS — the coloured face of every sticker example (.stk) gets a glossy gradient: a light corner,
   one crisp sheen streak and a deeper corner. Texts on the stickers stay flat. */
body.nk-look-street .stk :is(circle,ellipse,rect,path,polygon,use)[fill="#C0573D" i]{fill:url(#nk-gl-blue)}
body.nk-look-street .stk :is(circle,ellipse,rect,path,polygon,use)[fill="#DDB04A" i]{fill:url(#nk-gl-sky)}
body.nk-look-street .stk :is(circle,ellipse,rect,path,polygon,use)[fill="#8EAA8A" i]{fill:url(#nk-gl-silver)}
body.nk-look-street .stk :is(circle,ellipse,rect,path,polygon,use)[fill="#A7BFDC" i]{fill:url(#nk-gl-ice)}
body.nk-look-street .stk :is(circle,ellipse,rect,path,polygon,use)[fill="#EEC3B4" i]{fill:url(#nk-gl-silver)}
body.nk-look-street .stk :is(circle,ellipse,rect,path,polygon,use)[fill="#3F5A3C" i]{fill:url(#nk-gl-navy)}
body.nk-look-street .stk :is(circle,ellipse,rect,path,polygon,use)[fill="#161513" i]{fill:url(#nk-gl-black)}
body.nk-look-street .stk :is(circle,ellipse,rect,use)[fill="#2E3BBF" i]{fill:url(#nk-gl-blue)}
/* white faces (no die-cut contour stroke): a faint sheen of gloss paper */
body.nk-look-street .stk :is(circle,ellipse,rect,path,polygon,use):is([fill="#fff" i],[fill="#ffffff" i]):not([stroke]){fill:url(#nk-gl-white)}

@media (prefers-reduced-motion:reduce){
	body.nk-look-street .nk .stk{transition:none}
}