:root{
  --bg:#ffffff;
  --text:#0f172a;
  --muted:#64748b;
  --line:#e2e8f0;
  --card:#ffffff;
  --shadow: 0 10px 30px rgba(15,23,42,.10);
  --radius:16px;
  --radius2:22px;
  --max:1180px;
  --article:1100px; /* +~20% względem poprzedniego 920 */
  --green:#1f7a3f;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:"Poppins",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.65;
}

.wm-container{max-width:var(--max);margin:0 auto;padding:0 18px}
.wm-main{padding:22px 0 64px}

/* HEADER (logo center + belka menu) */
.wm-header{
  position:sticky; top:0; z-index:999;
  background:#fff;
  border-bottom:1px solid var(--line);
}

.wm-top{
  background:#fff;
}
.wm-top-inner{
  display:flex;
  justify-content:center;
  padding:14px 0 8px;
}
.wm-logo{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
}
.wm-logo img{
  height:44px;
  width:auto;
  display:block;
}

.wm-bar{
  background:rgba(255,255,255,.92);
  backdrop-filter: blur(10px);
  border-top:1px solid var(--line);
}
.wm-bar-inner{
  display:flex;
  align-items:center;
  gap:14px;
  padding:10px 0;
}

/* Mobile burger */
.wm-burger{
  display:none;
  border:1px solid var(--line);
  background:#fff;
  border-radius:12px;
  padding:10px;
}
.wm-burger span{
  display:block; width:18px; height:2px; background:var(--text);
  margin:4px 0;
}

/* NAV (piguły) */
.wm-nav{flex:1; min-width:0;}
.wm-menu{
  list-style:none;
  margin:0; padding:0;
  display:flex; gap:10px;
  flex-wrap:nowrap;
  overflow:auto;
  scrollbar-width:none;
}
.wm-menu::-webkit-scrollbar{display:none}
.wm-menu a{
  display:inline-flex;
  align-items:center;
  padding:8px 14px;
  border:1px solid var(--line);
  border-radius:999px;
  text-decoration:none;
  color:var(--text);
  font-weight:700;
  background:#fff;
  white-space:nowrap;
}
.wm-menu a:hover{border-color:#cbd5e1; box-shadow:0 6px 18px rgba(15,23,42,.08)}

/* Search */
.wm-actions{display:flex; align-items:center; gap:10px}
.wm-search{
  display:flex; align-items:center;
  border:1px solid var(--line);
  border-radius:999px;
  overflow:hidden;
  background:#fff;
}
.wm-search input{
  border:0; outline:0;
  padding:10px 12px;
  width:220px; max-width:36vw;
  font:inherit;
}
.wm-search button{
  border:0;
  background:#fff;
  padding:0 12px;
  cursor:pointer;
  color:var(--muted);
  font-size:16px;
}

/* Home head */
.wm-home-head{margin:6px 0 16px}
.wm-h1{margin:0;font-size:30px;line-height:1.15}

/* Listing ala Wykop */
.wm-listing{display:flex;flex-direction:column;gap:14px}
.wm-row{
  display:flex;
  gap:14px;
  padding:14px;
  border:1px solid var(--line);
  border-radius:var(--radius2);
  background:var(--card);
  box-shadow: 0 10px 24px rgba(15,23,42,.06);
}
.wm-row-thumb{
  width:160px; min-width:160px;
  height:120px;
  border-radius:14px;
  overflow:hidden;
  display:block;
  background:#f1f5f9;
}
.wm-row-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.wm-row-ph{display:block;width:100%;height:100%}
.wm-row-body{min-width:0}
.wm-row-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:12px}
.wm-tag{
  display:inline-flex;
  padding:3px 9px;
  border-radius:999px;
  background:#eaf7ef;
  color:var(--green);
  font-weight:800;
}
.wm-muted{color:var(--muted)}
.wm-dot{color:#94a3b8}
.wm-row-title{margin:8px 0 6px;font-size:18px;line-height:1.25}
.wm-row-title a{color:var(--text);text-decoration:none}
.wm-row-title a:hover{text-decoration:underline}
.wm-row-excerpt{margin:0;color:var(--muted);max-width:900px}

/* Pagination */
.wm-pagination{margin-top:18px}
.wm-pagination .page-numbers{
  display:inline-flex;
  padding:8px 12px;
  border:1px solid var(--line);
  border-radius:12px;
  text-decoration:none;
  color:var(--text);
  background:#fff;
  margin-right:8px;
}
.wm-pagination .current{
  border-color:#b7e0c5;
  background:#eaf7ef;
  color:var(--green);
  font-weight:800;
}

/* Single – spójny “sheet” jak karta */
.wm-article-wide{max-width:var(--article);margin:0 auto}
.wm-sheet{
  border:1px solid var(--line);
  border-radius:var(--radius2);
  background:#fff;
  box-shadow: 0 10px 24px rgba(15,23,42,.06);
  padding:18px;
}

.wm-breadcrumbs{
  font-size:12px;
  color:var(--muted);
  margin:0 0 10px;
  display:flex; align-items:center; flex-wrap:wrap; gap:8px;
}
.wm-breadcrumbs a{color:var(--muted);text-decoration:none}
.wm-breadcrumbs a:hover{text-decoration:underline}
.wm-bc-sep{color:#cbd5e1}

.wm-pill{
  display:inline-flex;
  padding:6px 12px;
  border-radius:999px;
  background:#eef2ff;
  color:#1d4ed8;
  font-weight:800;
  font-size:12px;
  margin-bottom:10px;
}
.wm-article-title{margin:0;font-size:34px;line-height:1.15}
.wm-article-lead{margin:10px 0 14px;color:var(--muted);max-width:920px}

.wm-article-meta{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; flex-wrap:wrap;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:12px 0;
  margin-bottom:14px;
}
.wm-meta-left{display:flex;gap:10px;flex-wrap:wrap;color:var(--muted);font-size:12px}
.wm-sep{color:#cbd5e1}

.wm-like{
  display:inline-flex; align-items:center; gap:8px;
  border:1px solid var(--line);
  background:#fff;
  border-radius:999px;
  padding:8px 12px;
  cursor:pointer;
  font-weight:800;
}
.wm-like.is-liked{background:#eaf7ef;border-color:#b7e0c5;color:var(--green)}
.wm-like:disabled{opacity:.7;cursor:not-allowed}
.wm-like-count{min-width:18px;text-align:center;color:var(--muted)}

.wm-cover{margin:0 0 14px}
.wm-cover img{
  width:100%;
  height:auto;
  border-radius:var(--radius2);
  box-shadow: var(--shadow);
  display:block;
}

.wm-content{font-size:16px}
.wm-content h2{margin:26px 0 10px}
.wm-content p{margin:0 0 14px}
.wm-content a{color:#0f766e}

.wm-more{margin-top:18px}
.wm-h2{margin:0 0 12px;font-size:22px}
.wm-more-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:14px;
}

/* Cards (Przeczytaj więcej) */
.wm-card{
  border:1px solid var(--line);
  border-radius:var(--radius2);
  overflow:hidden;
  background:#fff;
  box-shadow:0 10px 24px rgba(15,23,42,.06);
}
.wm-card-thumb img{width:100%;height:auto;display:block}
.wm-card-body{padding:12px 12px 14px}
.wm-card-meta{display:flex;gap:10px;align-items:center;flex-wrap:wrap;font-size:12px}
.wm-card-title{margin:8px 0 6px;font-size:16px;line-height:1.25}
.wm-card-title a{color:var(--text);text-decoration:none}
.wm-card-title a:hover{text-decoration:underline}
.wm-card-excerpt{margin:0;color:var(--muted)}

.wm-footer{border-top:1px solid var(--line);padding:22px 0;color:var(--muted)}
.wm-footer-inner{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}

/* Responsive */
@media (max-width: 980px){
  .wm-search input{width:160px}
  .wm-article-title{font-size:28px}
}
@media (max-width: 760px){
  .wm-burger{display:inline-flex}
  .wm-nav{display:none}
  .wm-nav.is-open{display:block}
  .wm-menu{padding:10px 0}

  .wm-row{flex-direction:column}
  .wm-row-thumb{width:100%;min-width:0;height:200px}
  .wm-more-grid{grid-template-columns:1fr}
  .wm-sheet{padding:14px}
}
/* FORCE FULL WIDTH ROOT (gasi dziedziczone ograniczenia z innych styli) */
html, body { width: 100%; max-width: 100%; overflow-x: hidden; }
#page, #content, #primary, main { width: 100%; max-width: 100%; }

/* jeśli gdzieś jest centrowanie flexem */
body { display: block !important; }

/* === SINGLE: bez żadnej ramki/karty, pełna szerokość layoutu jak na home === */
.wm-sheet{ 
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  padding:0 !important;
  background:transparent !important;
}

.wm-article-wide{
  max-width: none !important;
  margin: 0 !important;
}

/* Single wrapper */
.wm-single{
  width:100%;
}
.wm-single-inner{
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 18px;
}

/* Cover, content – spójnie z home (bez „karty”) */
.wm-cover img{
  border-radius: var(--radius2);
  box-shadow: var(--shadow);
}

/* Drobne: żeby breadcrumb/pill nie wyglądały jak w ramce */
.wm-breadcrumbs{ margin: 8px 0 10px; }

/* Gdyby gdzieś globalnie ograniczało root */
html, body, #page, #content, #primary, main { max-width: 100% !important; }
body{ display:block !important; }