/* wm.css — system „Claret & Paper” z makiety MARKETINGU (WM_strona_glowna.html, WM_marketplace.html, wm-ui.css; makieta: ~/Desktop/DLA_PIOTRA/2026-09-10_winemarkets_3_projekty/). WM-01 (POBOCZNE_5, 2026-09-10). DLACZEGO WSZYSTKO SIEDZI POD .wm-page, A NIE W :root/body: makieta byla samodzielna strona, wiec stylowala `body`, `h1,h2` i `*` globalnie. Ten plik jedzie w tym samym dist/ co 1600 stron zbudowanych na site.css — globalne `body{font-family}` przemalowaloby kazda z nich. Dlatego warstwa strony wchodzi tylko tam, gdzie strona sama o nia poprosi znacznikiem {{WM}} (build.py stawia wtedy ). Klasy generyczne makiety (.top, .sec, .pin, .spread, .claim, .branches, footer) dostaly prefiks wm- w czesci II — .card/.btn/.wrap/.hero/.lead z site.css nie moga sie z nimi zderzyc. Tokeny --font-display/--font-ui przemianowane na --wm-display/--wm-ui. */ /* ============ I. wm-ui.css z makiety (1:1, poza zakresowaniem opisanym wyzej) ============ */ /* winemarkets — wspólne komponenty makiet (menu kategorii, karty, kartoteka, cennik, rejestracja, pasek chatbota). Kolory biorą się z tokenów strony: --wm-accent --wm-accent-ink --wm-bg --wm-bg2 --wm-card --wm-ink --wm-muted --wm-line --wm-radius */ /* ===== SYSTEM „CLARET & PAPER” (werdykt 2026-09-10 21:3x) — JEDEN plik tokenów, dwie WARSTWY ===== :root = warstwa CONTENT (jasna): katalog, filtry, karty, cennik, modale, Find Client/Supplier .shell = warstwa SHELL (ciemna): nagłówek, hero ze zdjęciem, pasek kategorii tytułowy, stopka, pasek czatu Żadna podstrona nie deklaruje własnego :root. Zero złota, zero różu — jeden pigment wina w dwóch jasnościach. */ :root{ --wm-bg:#F7F2EE;--wm-bg2:#EFE7E2;--wm-card:#FFFFFF;--wm-ink:#1A1216;--wm-muted:#6F6169;--wm-line:#E4D8D6; --wm-accent:#6E1E3C;--wm-accent-hover:#57172F;--wm-accent-ink:#FFFFFF;--wm-accent-wash:#F6ECEF; --wm-stone:#EFE7D9;--wm-stone-ink:#6B5B3E;--wm-stone-line:#D6C7A8;--wm-verified:#0B7A4B;--wm-focus:#C24E76; --wm-radius:12px;--wm-shadow:0 1px 2px rgba(15,17,21,.05),0 8px 24px rgba(15,17,21,.06);--wm-green:var(--wm-verified); --wm-display:"Bodoni Moda","Noto Serif Georgian",Georgia,serif;--wm-ui:"Instrument Sans","Noto Sans Georgian",system-ui,sans-serif; --wm-scrim:linear-gradient(180deg,rgba(21,14,18,.85) 0%,rgba(21,14,18,.88) 45%,rgba(21,14,18,.96) 100%); } .shell{ --wm-bg:#150E12;--wm-bg2:#1F151B;--wm-card:#271A21;--wm-ink:#F7EFF2;--wm-muted:#C3AAB4;--wm-line:#3E2C35; --wm-accent:#C24E76;--wm-accent-hover:#A73C61;--wm-accent-ink:#FFFFFF;--wm-accent-wash:rgba(194,78,118,.14); --wm-stone:#E5D8BE;--wm-stone-ink:#E5D8BE;--wm-stone-line:rgba(229,216,190,.45);--wm-verified:#3DBD82; --wm-shadow:0 1px 2px rgba(0,0,0,.4),0 12px 34px rgba(0,0,0,.45); background:var(--wm-bg);color:var(--wm-ink); } html[lang=ka]{--wm-display:"Noto Serif Georgian",serif;--wm-ui:"Noto Sans Georgian",sans-serif} .wm-page{font-family:var(--wm-ui);color:var(--wm-ink);background:var(--wm-bg)} .wm-page h1,.wm-page h2{font-family:var(--wm-display);font-weight:700;letter-spacing:-.015em;line-height:1.05} .wm-page h1 i,.wm-page h2 i{font-style:italic;font-weight:600} .wm-page h3,.wm-page h4,.wm-page h5{font-family:var(--wm-ui);font-weight:700;letter-spacing:-.01em} .wm-page .num{font-variant-numeric:tabular-nums} .wm-page *{box-sizing:border-box} .wm-page :focus-visible{outline:3px solid var(--wm-focus);outline-offset:2px} /* ---------- LOGO lockup: SVG (glob + wordmark) + osobny tagline HTML ---------- */ .wm-lockup{display:inline-flex;flex-direction:column;gap:2px;text-decoration:none;color:inherit} .wm-lockup svg{display:block;height:44px;width:auto} .wm-lockup .wine{fill:var(--wm-accent)}.wm-lockup .markets,.wm-lockup .glass{fill:var(--wm-ink)}.wm-lockup .glass-s{stroke:var(--wm-ink)} .wm-lockup .tag{font:500 clamp(11px,.9vw,13px)/1 var(--wm-ui);letter-spacing:.04em;color:var(--wm-muted);padding-left:2px} .wm-lockup .tag b{color:var(--wm-ink);font-weight:700} .wm-lockup.big svg{height:72px} #wineClip .wave{transform-box:fill-box;transform:translate(0px,-8px)} @media (prefers-reduced-motion:no-preference){.wm-lockup.play #wineClip .wave{animation:wm-rise 1.85s cubic-bezier(.22,.61,.33,1) .15s both}} @keyframes wm-rise{0%,14%{transform:translate(0px,96px)}50%{transform:translate(-12px,44px)}82%{transform:translate(9px,2px)}92%{transform:translate(-6px,-15px)}100%{transform:translate(0px,-8px)}} @media(max-width:700px){.wm-lockup svg{height:30px}.wm-lockup .tag{display:none}} .wm-wrap{max-width:1240px;margin:0 auto;padding:0 clamp(16px,3vw,40px)} .wm-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:11px 22px;border-radius:999px;font-weight:700;font-size:15px;border:1.5px solid transparent;cursor:pointer;text-decoration:none;line-height:1;transition:.15s;font-family:var(--wm-ui)} .wm-btn.primary{background:var(--wm-accent);color:var(--wm-accent-ink)}.wm-btn.primary:hover{background:var(--wm-accent-hover)} .wm-btn.ghost{background:transparent;color:var(--wm-accent);border-color:var(--wm-accent)}.wm-btn.ghost:hover{background:var(--wm-accent-wash)} .wm-btn.light{background:#fff;color:#1A1216}.wm-btn.light:hover{background:#F7F2EE} .wm-btn.sm{padding:9px 14px;font-size:13px} .wm-eyebrow{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--wm-muted);font-weight:600} .wm-badge{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:4px 8px;border-radius:6px;background:var(--wm-bg2);color:var(--wm-ink)} .wm-badge.gold{background:var(--wm-stone);color:var(--wm-stone-ink);border:1px solid var(--wm-stone-line)} .wm-badge.green{background:#DCF3E7;color:#0B5F3B} /* ---------- KATEGORIE (górny pasek + rozwijane podkategorie) ---------- */ .wm-catnav{position:relative;border-top:1px solid var(--wm-line);border-bottom:1px solid var(--wm-line);background:var(--wm-card)} .wm-catnav ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:2px;overflow:visible} .wm-catnav li{position:relative} .wm-catnav li>button{background:none;border:0;font:inherit;font-size:13.5px;font-weight:600;color:var(--wm-ink);padding:13px 12px;cursor:pointer;display:flex;gap:6px;align-items:center;white-space:nowrap;border-bottom:2px solid transparent} .wm-catnav li>button small{color:var(--wm-muted);font-weight:500} .wm-catnav li:hover>button,.wm-catnav li.open>button{border-bottom-color:var(--wm-accent);color:var(--wm-accent)} .wm-catnav li:nth-last-child(-n+3) .wm-sub{left:auto;right:0} .wm-sub{display:none;position:absolute;left:0;top:100%;z-index:120;min-width:340px;background:var(--wm-card);border:1px solid var(--wm-line);border-radius:0 0 var(--wm-radius) var(--wm-radius);box-shadow:var(--wm-shadow);padding:10px} .wm-catnav li:hover .wm-sub,.wm-catnav li.open .wm-sub{display:block} .wm-sub a{display:flex;justify-content:space-between;gap:16px;padding:8px 10px;border-radius:8px;color:var(--wm-ink);text-decoration:none;font-size:13.5px} .wm-sub a:hover{background:var(--wm-bg2);color:var(--wm-accent)} .wm-sub a small{color:var(--wm-muted)} .wm-sub .all{margin-top:6px;border-top:1px solid var(--wm-line);padding-top:8px;font-weight:600} /* ---------- MARKETPLACE: filtry z lewej + siatka ---------- */ .wm-market{display:grid;grid-template-columns:250px 1fr;gap:28px;align-items:start} .wm-filters{position:sticky;top:16px;background:var(--wm-card);border:1px solid var(--wm-line);border-radius:var(--wm-radius);padding:18px} .wm-filters h4{margin:0 0 10px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--wm-muted)} .wm-filters .grp{padding:12px 0;border-top:1px solid var(--wm-line)}.wm-filters .grp:first-of-type{border-top:0;padding-top:0} .wm-filters label{display:flex;align-items:center;gap:8px;font-size:13.5px;padding:4px 0;cursor:pointer;color:var(--wm-ink)} .wm-filters label span.n{margin-left:auto;color:var(--wm-muted);font-size:12px} .wm-filters input[type=checkbox]{accent-color:var(--wm-accent)} .wm-filters .search{width:100%;padding:10px 12px;border:1px solid var(--wm-line);border-radius:8px;font:inherit;font-size:13.5px;background:var(--wm-bg);color:var(--wm-ink)} .wm-market-head{display:flex;align-items:end;justify-content:space-between;gap:16px;margin-bottom:14px;flex-wrap:wrap} .wm-market-head h3{margin:0;font-size:22px} .wm-market-head .meta{color:var(--wm-muted);font-size:13.5px} .wm-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:16px} .wm-tabs button{font:inherit;font-size:13px;font-weight:600;padding:8px 14px;border-radius:999px;border:1px solid var(--wm-line);background:var(--wm-card);color:var(--wm-ink);cursor:pointer} .wm-tabs button.on{background:var(--wm-ink);color:var(--wm-bg);border-color:var(--wm-ink)} .wm-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px} .wm-grid.cols3{grid-template-columns:repeat(3,1fr)} .wm-card{background:var(--wm-card);border:1px solid var(--wm-line);border-radius:var(--wm-radius);overflow:hidden;cursor:pointer;transition:.15s;display:flex;flex-direction:column;position:relative} .wm-card:hover{transform:translateY(-2px);box-shadow:var(--wm-shadow);border-color:var(--wm-accent)} .wm-card .ph{aspect-ratio:16/10;background-size:cover;background-position:center;position:relative} .wm-card .ph .flag{position:absolute;left:10px;top:10px;background:rgba(255,255,255,.92);border-radius:6px;padding:3px 7px;font-size:12px;font-weight:700;color:#17121A} .wm-card .ph .spon{position:absolute;right:10px;top:10px} .wm-card .logo{width:44px;height:44px;border-radius:10px;background:var(--wm-card);border:1px solid var(--wm-line);display:grid;place-items:center;font-weight:800;font-size:14px;color:var(--wm-accent);margin:-22px 0 0 14px;position:relative;box-shadow:var(--wm-shadow)} .wm-card .body{padding:10px 14px 14px;display:flex;flex-direction:column;gap:4px;flex:1} .wm-card .name{font-weight:700;font-size:15px;color:var(--wm-ink)} .wm-card .sub{font-size:12.5px;color:var(--wm-muted);line-height:1.35} .wm-card .contact{display:flex;flex-direction:column;gap:3px;font-size:14px;color:var(--wm-ink);margin-top:8px;padding-top:8px;border-top:1px solid var(--wm-line)} .wm-card .name{font-size:17px} .wm-card .sub{font-size:13px} .wm-more{display:flex;justify-content:center;padding:28px 0 8px} .wm-more button{font:600 15px/1 var(--wm-ui);color:var(--wm-accent);background:transparent;border:0;cursor:pointer;display:inline-flex;align-items:center;gap:8px;padding:14px 28px;border-radius:8px;letter-spacing:.01em} .wm-more button:hover{color:var(--wm-accent-hover);text-decoration:underline;text-underline-offset:4px} .wm-more button svg{transition:transform .2s}.wm-more button:hover svg{transform:translateY(2px)} .blank{display:inline-block;border-bottom:3px dashed var(--wm-accent);color:var(--wm-accent);cursor:help} .wm-mkt{display:inline-flex;gap:2px;background:rgba(127,127,127,.15);border-radius:999px;padding:3px} .wm-mkt button{font:inherit;font-size:12.5px;font-weight:700;padding:6px 10px;border-radius:999px;border:0;background:transparent;color:inherit;cursor:pointer;opacity:.75;white-space:nowrap} .wm-mkt button.on{background:var(--wm-card);color:var(--wm-ink);opacity:1;box-shadow:var(--wm-shadow)} .wm-mktline{margin:14px auto 0;font-size:13px;color:var(--wm-muted);display:flex;gap:8px;align-items:center;justify-content:center;flex-wrap:wrap} .wm-mktline .wm-mkt.inline{background:var(--wm-bg2)} .wm-card .foot{margin-top:auto;padding-top:8px;display:flex;justify-content:space-between;align-items:center;font-size:12px;color:var(--wm-muted)} .wm-card .foot b{color:var(--wm-green)} .wm-card.sponsor{grid-column:1/-1;border:1px solid var(--wm-stone-line);background:var(--wm-card);display:grid;grid-template-columns:38% 1fr} .wm-card.sponsor .ph{aspect-ratio:auto;min-height:200px;grid-row:1/3} .wm-card.sponsor .logo{margin:18px 0 0 18px;grid-column:2} .wm-card.sponsor .body{grid-column:2;padding:8px 22px 18px} .wm-card.sponsor .name{font-size:22px} .wm-card.sponsor .sub{font-size:14px} .wm-loadmore{margin-top:22px;text-align:center;padding:26px;border:1px dashed var(--wm-line);border-radius:var(--wm-radius);background:var(--wm-bg2)} .wm-loadmore p{margin:0 0 12px;color:var(--wm-muted);font-size:14px} .wm-loadmore .fade{height:70px;margin:-90px 0 8px;background:linear-gradient(180deg,transparent,var(--wm-bg2));position:relative;pointer-events:none} /* ---------- KARTOTEKA FIRMY (szuflada) ---------- */ .wm-drawer{position:fixed;inset:0;z-index:100;display:none} .wm-drawer.open{display:block} .wm-drawer .bg{position:absolute;inset:0;background:rgba(20,10,16,.55);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)} .wm-drawer .panel{position:absolute;right:0;top:0;bottom:0;width:min(760px,96vw);background:var(--wm-card);color:var(--wm-ink);overflow:auto;box-shadow:-20px 0 60px rgba(0,0,0,.3);animation:wmIn .25s ease-out} @keyframes wmIn{from{transform:translateX(40px);opacity:0}to{transform:none;opacity:1}} .wm-drawer .hero{height:260px;background-size:cover;background-position:center;position:relative} .wm-drawer .hero .close{position:absolute;right:16px;top:16px;background:rgba(255,255,255,.9);border:0;width:36px;height:36px;border-radius:50%;font-size:18px;cursor:pointer} .wm-drawer .head{display:flex;gap:18px;align-items:flex-end;padding:0 32px;margin-top:-40px;position:relative} .wm-drawer .biglogo{width:88px;height:88px;border-radius:18px;background:#fff;border:1px solid var(--wm-line);display:grid;place-items:center;font-weight:800;font-size:26px;color:var(--wm-accent);box-shadow:var(--wm-shadow)} .wm-drawer h2{margin:0 0 4px;font-size:28px} .wm-drawer .head .sub{color:var(--wm-muted);font-size:14px;padding-bottom:8px} .wm-drawer .cols{display:grid;grid-template-columns:1.4fr 1fr;gap:28px;padding:24px 32px 40px} .wm-drawer h5{margin:18px 0 8px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--wm-muted)} .wm-drawer p{line-height:1.55;margin:0} .wm-drawer .gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:8px} .wm-drawer .gallery div{aspect-ratio:4/3;border-radius:8px;background-size:cover;background-position:center} .wm-drawer .prod{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;border:1px solid var(--wm-line);border-radius:8px;margin-bottom:6px;font-size:14px} .wm-drawer .prod a{color:var(--wm-accent);text-decoration:none;font-weight:600;font-size:13px} .wm-drawer .kv{border:1px solid var(--wm-line);border-radius:var(--wm-radius);padding:16px;background:var(--wm-bg)} .wm-drawer .kv div{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid var(--wm-line);font-size:14px} .wm-drawer .kv div:last-child{border-bottom:0} .wm-drawer .kv span{color:var(--wm-muted)} .wm-drawer .kv a{color:var(--wm-accent);font-weight:600;text-decoration:none} .wm-drawer .lock{filter:blur(4px);user-select:none} .wm-drawer .sample{position:absolute;left:16px;top:16px;background:rgba(0,0,0,.55);color:#fff;font-size:11px;padding:4px 8px;border-radius:6px;letter-spacing:.08em;text-transform:uppercase} /* ---------- MODAL (cennik / rejestracja) ---------- */ .wm-modal{position:fixed;inset:0;z-index:110;display:none;align-items:center;justify-content:center;padding:20px} .wm-modal.open{display:flex} .wm-modal .bg{position:absolute;inset:0;background:rgba(20,10,16,.6);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)} .wm-modal .box{position:relative;width:min(980px,100%);max-height:92vh;overflow:auto;background:var(--wm-card);color:var(--wm-ink);border-radius:20px;box-shadow:0 30px 80px rgba(0,0,0,.4);animation:wmPop .2s ease-out} @keyframes wmPop{from{transform:scale(.97);opacity:0}to{transform:none;opacity:1}} .wm-modal .close{position:absolute;right:16px;top:14px;background:var(--wm-bg2);border:0;width:36px;height:36px;border-radius:50%;font-size:18px;cursor:pointer;color:var(--wm-ink)} .wm-modal .mhead{padding:30px 36px 0;text-align:center} .wm-modal .mhead h3{margin:0 0 6px;font-size:26px} .wm-modal .mhead p{margin:0;color:var(--wm-muted)} .wm-seg{display:inline-flex;background:var(--wm-bg2);border-radius:999px;padding:4px;margin:18px auto 0} .wm-seg button{font:inherit;font-weight:600;font-size:14px;padding:9px 18px;border-radius:999px;border:0;background:transparent;color:var(--wm-muted);cursor:pointer} .wm-seg button.on{background:var(--wm-card);color:var(--wm-ink);box-shadow:var(--wm-shadow)} .wm-plans{display:grid;grid-template-columns:1fr 1fr;gap:18px;padding:24px 36px 36px} .wm-plan{border:1.5px solid var(--wm-line);border-radius:16px;padding:24px;position:relative;display:flex;flex-direction:column;gap:12px;background:var(--wm-card)} .wm-plan.hi{border-color:var(--wm-accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--wm-accent) 12%,transparent)} .wm-plan .pill{position:absolute;top:-12px;left:20px;background:var(--wm-accent);color:var(--wm-accent-ink);font-size:11px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;padding:5px 10px;border-radius:999px} .wm-plan h4{margin:0;font-size:18px} .wm-plan .price{font-size:40px;font-weight:800;letter-spacing:-.02em;line-height:1} .wm-plan .price small{font-size:14px;font-weight:500;color:var(--wm-muted);letter-spacing:0} .wm-plan .save{color:var(--wm-green);font-weight:600;font-size:13px} .wm-plan ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px;font-size:14px;line-height:1.4} .wm-plan ul li{padding-left:24px;position:relative} .wm-plan ul li::before{content:'✓';position:absolute;left:0;color:var(--wm-green);font-weight:700} .wm-plan .wm-btn{margin-top:auto;justify-content:center} .wm-plan .note{font-size:12px;color:var(--wm-muted)} .wm-modal .fine{padding:0 36px 28px;font-size:12.5px;color:var(--wm-muted);text-align:center} .wm-form{padding:24px 36px 36px;display:grid;grid-template-columns:1fr 1fr;gap:14px} .wm-form label{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:600} .wm-form input,.wm-form select{font:inherit;padding:11px 12px;border:1px solid var(--wm-line);border-radius:8px;background:var(--wm-bg);color:var(--wm-ink)} .wm-form .full{grid-column:1/-1} .wm-form .roles{display:grid;grid-template-columns:repeat(3,1fr);gap:8px} .wm-form .roles div{border:1.5px solid var(--wm-line);border-radius:10px;padding:12px;font-weight:600;font-size:13px;cursor:pointer;text-align:center} .wm-form .roles div.on{border-color:var(--wm-accent);background:color-mix(in srgb,var(--wm-accent) 8%,transparent)} /* ---------- PARTNERZY TYGODNIA ---------- */ .wm-partners{display:grid;grid-template-columns:repeat(6,1fr);gap:12px} .wm-partner{border:1px solid var(--wm-line);border-radius:12px;padding:14px;background:var(--wm-card);text-align:center;font-size:13px} .wm-partner .lg{width:48px;height:48px;border-radius:12px;margin:0 auto 8px;display:grid;place-items:center;font-weight:800;background:var(--wm-bg2);color:var(--wm-accent)} .wm-partner b{display:block;font-size:14px} .wm-partner span{color:var(--wm-muted)} /* ---------- PASEK CHATBOTA (dół, środek) ---------- */ .wm-chat{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:60;width:min(640px,92vw)} .wm-chat .fab{display:none} .wm-chat .bar{display:flex;align-items:center;gap:10px;background:#150E12;color:#F7EFF2;border-radius:999px;padding:8px 8px 8px 16px;box-shadow:0 12px 40px rgba(0,0,0,.35);border:1px solid #3E2C35} .wm-chat .dot{width:10px;height:10px;border-radius:50%;background:#3DBD82;box-shadow:0 0 0 4px rgba(61,189,130,.2)} .wm-chat input{flex:1;background:transparent;border:0;color:#fff;font:inherit;font-size:14px;outline:0} .wm-chat input::placeholder{color:rgba(255,255,255,.55)} .wm-chat .go{background:#fff;color:#1B1216;border:0;border-radius:999px;padding:9px 14px;font-weight:700;cursor:pointer;font:inherit} .wm-chat .hint{text-align:center;font-size:11px;color:rgba(255,255,255,.55);margin-top:6px} @media(max-width:980px){.wm-market{grid-template-columns:1fr}.wm-filters{position:static}.wm-grid,.wm-grid.cols3{grid-template-columns:repeat(2,1fr)}.wm-plans{grid-template-columns:1fr}.wm-drawer .cols{grid-template-columns:1fr}.wm-partners{grid-template-columns:repeat(3,1fr)}.wm-form{grid-template-columns:1fr}.wm-catnav li>button{padding:10px 9px;font-size:13px;white-space:normal;text-align:left;max-width:100%}} @media(max-width:700px){.wm-chat{left:auto;right:14px;bottom:14px;transform:none;width:auto}.wm-chat .bar,.wm-chat .hint{display:none}.wm-chat .fab{display:flex;align-items:center;gap:8px;background:#1B1216;color:#fff;border:1px solid rgba(255,255,255,.15);border-radius:999px;padding:12px 16px;font-weight:700;font-size:14px;box-shadow:0 12px 40px rgba(0,0,0,.35);cursor:pointer;font-family:inherit}.wm-chat.open .bar{display:flex}.wm-chat.open{left:14px;right:14px;width:auto}.wm-chat.open .fab{display:none}.wm-card.sponsor{grid-template-columns:1fr}.wm-card.sponsor .ph{grid-row:auto;min-height:160px}.wm-card.sponsor .logo{grid-column:1;margin:-22px 0 0 14px}.wm-card.sponsor .body{grid-column:1}} @media(max-width:600px){.wm-grid,.wm-grid.cols3{grid-template-columns:1fr}.wm-card.sponsor{grid-column:1/-1}.wm-drawer .hero{height:200px}.wm-drawer .head{flex-direction:column;align-items:flex-start;gap:8px;margin-top:0;padding:0 20px}.wm-drawer .biglogo{width:64px;height:64px;font-size:20px;margin-top:-32px}.wm-drawer h2{font-size:24px}.wm-drawer .cols{padding:16px 20px 90px}.wm-drawer .sample{font-size:10px;right:70px}} /* ============ II. warstwa stron (inline