/* ============================================================
   NOXORA THEME — CORE
   Base reset, typography, header, responsive navigation.
   Tokens (--bg, --text, --muted, --accent, --border, --font-*)
   are injected inline by PHP from presets.php.
============================================================ */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth}
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  min-height:100vh;
}

/* ============================================================
   SITE WIDTH CONTROL
   Settings: normal / 3/4 width / full. Values are used by
   homepage shells, header, footer, single-post wide areas and
   landing/demo pages.
============================================================ */
body{
  --px-shell-1500:1500px;
  --px-shell-1440:1440px;
  --px-shell-1400:1400px;
  --px-shell-1360:1360px;
  --px-shell-1340:1340px;
  --px-shell-1320:1320px;
  --px-shell-1280:1280px;
  --px-shell-1200:1200px;
  --px-shell-1120:1120px;
  --px-shell-1100:1100px;
  --px-shell-1080:1080px;
  --px-shell-1000:1000px;
  --px-shell-980:980px;
  --px-shell-900:900px;
  --px-shell-860:860px;
  --px-shell-820:820px;
  --px-shell-780:780px;
  --px-shell-760:760px;
  --px-shell-720:720px;
  --px-shell-700:700px;
  --px-shell-680:680px;
  --px-shell-650:650px;
  --px-shell-640:640px;
  --px-shell-620:620px;
  --px-shell-600:600px;
}
body.px-width-full{
  --px-shell-1500:100%;
  --px-shell-1440:100%;
  --px-shell-1400:100%;
  --px-shell-1360:100%;
  --px-shell-1340:100%;
  --px-shell-1320:100%;
  --px-shell-1280:100%;
  --px-shell-1200:100%;
  --px-shell-1120:100%;
  --px-shell-1100:100%;
  --px-shell-1080:100%;
  --px-shell-1000:100%;
}
body.px-width-normal{
  --px-shell-1500:1180px;
  --px-shell-1440:1180px;
  --px-shell-1400:1120px;
  --px-shell-1360:1120px;
  --px-shell-1340:1120px;
  --px-shell-1320:1120px;
  --px-shell-1280:1080px;
  --px-shell-1200:1040px;
  --px-shell-1120:1000px;
  --px-shell-1100:1000px;
  --px-shell-1080:980px;
  --px-shell-1000:940px;
  --px-shell-980:900px;
  --px-shell-900:860px;
}
body.px-width-threequarter{
  --px-shell-1500:min(75vw,1680px);
  --px-shell-1440:min(75vw,1680px);
  --px-shell-1400:min(75vw,1680px);
  --px-shell-1360:min(75vw,1680px);
  --px-shell-1340:min(75vw,1680px);
  --px-shell-1320:min(75vw,1680px);
  --px-shell-1280:min(75vw,1680px);
  --px-shell-1200:min(75vw,1680px);
  --px-shell-1120:min(75vw,1680px);
  --px-shell-1100:min(75vw,1680px);
  --px-shell-1080:min(75vw,1680px);
  --px-shell-1000:min(75vw,1680px);
  --px-shell-980:min(75vw,980px);
  --px-shell-900:min(75vw,900px);
  --px-shell-860:min(75vw,860px);
  --px-shell-820:min(75vw,820px);
  --px-shell-780:min(75vw,780px);
  --px-shell-760:min(75vw,760px);
  --px-shell-720:min(75vw,720px);
  --px-shell-700:min(75vw,700px);
  --px-shell-680:min(75vw,680px);
  --px-shell-650:min(75vw,650px);
  --px-shell-640:min(75vw,640px);
  --px-shell-620:min(75vw,620px);
  --px-shell-600:min(75vw,600px);
}
@media(max-width:900px){
  body.px-width-threequarter{
    --px-shell-1500:100%;--px-shell-1440:100%;--px-shell-1400:100%;--px-shell-1360:100%;
    --px-shell-1340:100%;--px-shell-1320:100%;--px-shell-1280:100%;--px-shell-1200:100%;
    --px-shell-1120:100%;--px-shell-1100:100%;--px-shell-1080:100%;--px-shell-1000:100%;
    --px-shell-980:100%;--px-shell-900:100%;--px-shell-860:100%;--px-shell-820:100%;
    --px-shell-780:100%;--px-shell-760:100%;--px-shell-720:100%;--px-shell-700:100%;
    --px-shell-680:100%;--px-shell-650:100%;--px-shell-640:100%;--px-shell-620:100%;--px-shell-600:100%;
  }
}
img,svg{max-width:100%;height:auto;display:block}

/* Dropdown podmenu (Narzędzia) */
.px-nav-list .px-has-sub{position:relative}
.px-caret{margin-left:5px;transition:transform .18s;vertical-align:middle}
.px-subnav{
  position:absolute;top:100%;left:0;min-width:210px;margin:0;padding:8px;list-style:none;
  background:var(--bg);border:1px solid var(--border);border-radius:12px;
  box-shadow:0 18px 40px rgba(0,0,0,.28);
  display:flex;flex-direction:column;gap:2px;
  opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .16s,transform .16s,visibility .16s;z-index:200;
}
.px-nav-list .px-has-sub:hover > .px-subnav,
.px-nav-list .px-has-sub:focus-within > .px-subnav{opacity:1;visibility:visible;transform:translateY(0)}
.px-nav-list .px-has-sub:hover > a .px-caret{transform:rotate(180deg)}
.px-subnav .px-subitem{display:block}
.px-subnav .px-subitem a{display:block;padding:9px 12px;border-radius:8px;font-size:14px;white-space:nowrap;color:var(--text);text-transform:none;letter-spacing:0}
.px-subnav .px-subitem a:hover{background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--accent)}
/* W szufladzie mobilnej podmenu jest zawsze widoczne, wcięte */
.px-drawer-list .px-subnav{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;background:transparent;padding:4px 0 4px 14px;margin-top:4px;border-left:2px solid var(--border)}
.px-drawer-list .px-caret{display:none}

/* Parıldak graphic logo — swap variant by color mode.
   Light variant is inline display:none in HTML (cache-proof); these
   !important rules only un-hide it when light mode is active. */
.px-brand-logo{display:inline-flex;align-items:center}
.px-logo-img{height:34px;width:auto;display:block}
html[data-theme-mode="light"] .px-logo-img--for-dark,
body.px-mode-light .px-logo-img--for-dark{display:none!important}
html[data-theme-mode="light"] .px-logo-img--for-light,
body.px-mode-light .px-logo-img--for-light{display:block!important}
@media(max-width:600px){.px-logo-img{height:28px}}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
h1,h2,h3,h4,h5{font-family:var(--font-display);line-height:1.15;letter-spacing:-.02em}

.px-skiplink{position:absolute;left:-9999px;top:0;padding:8px 16px;background:var(--accent);color:#fff;z-index:1000}
.px-skiplink:focus{left:8px;top:8px}

/* ============================================================
   HEADER
============================================================ */
.px-header{
  position:relative;top:0;z-index:100;
  background:color-mix(in srgb,var(--bg) 92%,transparent);
  backdrop-filter:saturate(160%) blur(10px);
  -webkit-backdrop-filter:saturate(160%) blur(10px);
  border-bottom:1px solid var(--border);
}
.px-header--sticky{position:sticky;transition:transform .28s ease}
.px-header--hidden{transform:translateY(-100%)}

/* Mode toggle icons: show one or the other based on current mode */
.px-mode-icon-dark,.px-mode-icon-light{display:none}
[data-theme-mode="light"] .px-mode-icon-dark,
.px-mode-light .px-mode-icon-dark{display:block}   /* currently light → show moon to go dark */
[data-theme-mode="dark"]  .px-mode-icon-light,
.px-mode-dark  .px-mode-icon-light{display:block}  /* currently dark → show sun to go light */
.px-header-inner{
  max-width:var(--px-shell-1400,1400px);margin:0 auto;
  padding:14px 28px;
  display:grid;
  grid-template-columns:auto auto 1fr auto;
  align-items:center;gap:24px;
}
.px-burger{display:none;width:40px;height:40px;border-radius:8px;flex-direction:column;gap:5px;align-items:center;justify-content:center}
.px-burger span{display:block;width:20px;height:2px;background:currentColor;transition:.2s}
.px-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.px-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.px-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.px-brand-text{
  font-family:var(--font-display);
  font-size:22px;font-weight:800;letter-spacing:-.02em;
  color:var(--text);
  text-transform:none;
  font-feature-settings:"kern";
  overflow-wrap:normal;
}
.px-logo-text{display:inline-block;line-height:1;white-space:nowrap}
.custom-logo-link{display:inline-flex;align-items:center}
.custom-logo-link img{max-height:40px;width:auto;object-fit:contain}

/* primary nav */
.px-nav{min-width:0;overflow:hidden}
.px-nav-list{display:flex;list-style:none;gap:4px;flex-wrap:nowrap}
.px-nav-item a{
  display:inline-block;
  padding:10px 14px;
  font-size:14px;font-weight:500;
  color:var(--muted);
  border-radius:6px;
  transition:all .15s;
  white-space:nowrap;
}
.px-nav-item a:hover{color:var(--text);background:color-mix(in srgb,var(--text) 6%,transparent)}
/* wyróżnione pozycje menu (kursy) - subtelnie: sam kolor akcentu, bez pudełka.
   Terminalowy minimalizm - dwa kolorowe słowa wystarczą, żeby przyciągnąć wzrok. */
.px-nav-item.px-nav-hot > a{color:#f5b942}
.px-nav-item.px-nav-hot > a:hover{color:#f5b942;background:color-mix(in srgb,#f5b942 12%,transparent)}
.px-nav-item.px-nav-hot2 > a{color:#a3e635}
.px-nav-item.px-nav-hot2 > a:hover{color:#a3e635;background:color-mix(in srgb,#a3e635 12%,transparent)}
.px-drawer-list .px-nav-hot > a{color:#f5b942}
.px-drawer-list .px-nav-hot2 > a{color:#a3e635}
/* Uppercase menu (opt-out via Settings) */
.px-menu-upper .px-nav-item a,
.px-menu-upper .px-nav-more-btn{text-transform:uppercase;letter-spacing:.08em;font-size:13px;font-weight:600}

/* overflow "More" dropdown */
.px-nav-more{position:relative}
.px-nav-more-btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:10px 14px;font-size:14px;font-weight:500;
  color:var(--muted);border-radius:6px;
}
.px-nav-more-btn:hover{color:var(--text);background:color-mix(in srgb,var(--text) 6%,transparent)}
.px-nav-more-btn[aria-expanded="true"] svg{transform:rotate(180deg)}
.px-nav-more-list{
  position:absolute;top:calc(100% + 8px);right:0;
  min-width:220px;max-height:70vh;overflow:auto;
  list-style:none;
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:10px;
  box-shadow:0 12px 32px rgba(0,0,0,.2);
  padding:6px;
  display:none;
}
.px-nav-more-btn[aria-expanded="true"] + .px-nav-more-list{display:block}
.px-nav-more-list .px-nav-item a{display:block;padding:10px 12px}

/* actions */
.px-actions{display:flex;gap:4px}
.px-actions button{
  width:38px;height:38px;border-radius:8px;
  display:grid;place-items:center;
  color:var(--muted);
  transition:all .15s;
}
.px-actions button:hover{color:var(--text);background:color-mix(in srgb,var(--text) 6%,transparent)}

/* ---------- HEADER CTA BUTTON (e.g. "SKLEPIK") ---------- */.px-header-cta{
  display:inline-flex;align-items:center;gap:8px;
  padding:9px 16px;
  background:var(--accent);color:#fff !important;
  font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  border-radius:6px;
  transition:transform .15s, filter .15s;
  white-space:nowrap;
  margin-left:6px;
}
.px-header-cta:hover{transform:translateY(-1px);filter:brightness(1.08)}
.px-header-cta .px-cta-icon{font-size:14px;line-height:1}

/* ============================================================
   HEADER LAYOUT VARIANTS
   .px-header--classic  (default) : brand left · nav right · actions far right
   .px-header--centered           : brand center · nav below · actions right
   .px-header--split              : nav left · brand center · actions right
   .px-header--minimal            : brand left · only actions (menu always in drawer)
============================================================ */

/* ---------- CLASSIC (default) ---------- */
/* Already the default: grid-template-columns: auto 1fr auto auto */

/* ---------- CENTERED (Noxora style — brand centered, nav wraps) ---------- */
.px-header--centered .px-header-inner{
  grid-template-columns:1fr auto 1fr;
  grid-template-areas:"left brand right";
  align-items:center;
}
.px-header--centered .px-burger{grid-area:left;justify-self:start}
.px-header--centered .px-brand{grid-area:brand;text-align:center;justify-self:center}
.px-header--centered .px-brand-text{font-size:26px}
.px-header--centered .px-nav{
  grid-column:1/-1;grid-row:2;
  order:10;
  border-top:1px solid var(--border);
  margin:12px -28px 0;
  padding:10px 28px 0;
}
.px-header--centered .px-nav-list{justify-content:center}
.px-header--centered .px-actions{grid-area:right;justify-self:end}

/* ---------- SPLIT (nav left · brand center · actions right) ---------- */
.px-header--split .px-header-inner{
  grid-template-columns:1fr auto 1fr;
  grid-template-areas:"nav brand actions";
}
.px-header--split .px-burger{grid-area:nav;justify-self:start}
.px-header--split .px-nav{grid-area:nav;min-width:0}
.px-header--split .px-nav-list{justify-content:flex-start}
.px-header--split .px-brand{grid-area:brand;text-align:center;justify-self:center}
.px-header--split .px-brand-text{font-size:24px;font-weight:900;letter-spacing:-.01em}
.px-header--split .px-actions{grid-area:actions;justify-self:end}

/* ---------- MINIMAL (brand + actions only — menu always in drawer) ---------- */
.px-header--minimal .px-header-inner{
  grid-template-columns:auto 1fr auto;
}
.px-header--minimal .px-nav{display:none !important}
.px-header--minimal .px-burger{display:flex}

/* ---------- WIDE (Noxora — real full-width header, logo far left, menu center, actions right) ---------- */
.px-header--wide .px-header-inner{
  max-width:none;
  width:100%;
  padding:14px 40px;
  grid-template-columns:auto 1fr auto;
}
.px-header--wide .px-nav{min-width:0;justify-self:center}
.px-header--wide .px-nav-list{justify-content:center;gap:2px}
.px-header--wide .px-nav-item a{padding:10px 18px;font-size:14px}
.px-header--wide .px-brand-text{font-size:20px;letter-spacing:-.02em;font-weight:800;text-transform:none}

/* ============================================================
   RESPONSIVE — UNIFIED MOBILE / TABLET LAYOUT
   All header variants collapse to: [burger] [brand center] [actions]
   with the CTA hidden (too cramped) and menu in the off-canvas drawer.
============================================================ */
@media (max-width:1180px){
  .px-header-inner{padding:12px 20px;gap:16px}
  .px-nav-item a{padding:10px 10px}
  .px-header-cta{padding:8px 12px;font-size:12px}
}

/* Menu zwija się do burgera aż do 1300px. 12 pozycji + terminalowe logo + CTA nie mieszczą
   się poziomo poniżej szerokości szkieletu (1300px) - poniżej zawsze czysty burger z pełną
   listą w szufladzie. Rozwiązanie systemowe: menu poziome tylko gdy jest na nie realne miejsce. */
@media (max-width:1300px){
  /* Force a uniform 3-column row regardless of variant.
     Using 1fr auto 1fr instead of auto 1fr auto guarantees the
     brand column is visually centered even when the hamburger
     and actions have different total widths. */
  .px-header .px-header-inner,
  .px-header--classic  .px-header-inner,
  .px-header--centered .px-header-inner,
  .px-header--split    .px-header-inner,
  .px-header--minimal  .px-header-inner,
  .px-header--wide     .px-header-inner{
    grid-template-columns:1fr auto 1fr !important;
    grid-template-areas:none !important;
    gap:12px;
    padding:12px 16px;
  }
  .px-burger{display:flex;grid-area:auto;grid-column:1;grid-row:1;justify-self:start}
  .px-brand{grid-area:auto;grid-column:2;grid-row:1;justify-self:center;text-align:center;min-width:0}
  .px-brand-text{font-size:18px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block;max-width:50vw}
  .custom-logo-link img{max-height:32px}
  .px-nav{display:none}
  .px-actions{grid-area:auto;grid-column:3;grid-row:1;justify-self:end;gap:2px}
  /* Hide CTA on narrow screens — it moves into the drawer */
  .px-header-cta{display:none}
}

@media (max-width:640px){
  .px-header .px-header-inner{padding:10px 14px;gap:8px}
  .px-actions button{width:34px;height:34px}
}

/* ============================================================
   OFF-CANVAS DRAWER (mobile + narrow tablet)
============================================================ */
.px-drawer{position:fixed;inset:0;z-index:200}
.px-drawer[hidden]{display:none}
.px-drawer-scrim{position:absolute;inset:0;background:rgba(0,0,0,.5);opacity:0;transition:opacity .25s}
.px-drawer-panel{
  position:absolute;top:0;left:0;height:100%;
  width:min(88vw,360px);
  background:var(--bg);
  border-right:1px solid var(--border);
  padding:64px 28px 40px;
  transform:translateX(-100%);
  transition:transform .3s cubic-bezier(.2,.8,.2,1);
  overflow-y:auto;
}
.px-drawer.is-open .px-drawer-scrim{opacity:1}
.px-drawer.is-open .px-drawer-panel{transform:translateX(0)}
.px-drawer-close{position:absolute;top:16px;right:16px;width:36px;height:36px;font-size:28px;line-height:1;border-radius:8px}
.px-drawer-close:hover{background:color-mix(in srgb,var(--text) 8%,transparent)}
.px-drawer-list{list-style:none}
.px-drawer-list .px-nav-item a{
  display:block;padding:14px 0;
  font-size:18px;font-weight:500;
  border-bottom:1px solid var(--border);
  color:var(--text);
}

/* ============================================================
   RESPONSIVE BREAKPOINTS
   Desktop : ≥1181px   — full nav visible, overflow collapses only if needed
   Tablet  :  901–1180 — priority+ with "More" dropdown, burger HIDDEN
   Narrow  :  769– 900 — burger + drawer (too narrow for priority+)
   Mobile  :  ≤768     — burger + drawer
============================================================ */
/* ============================================================
   MAIN / FOOTER
============================================================ */
.px-main{min-height:60vh}
.px-footer{margin-top:80px;border-top:1px solid var(--border);padding:48px 28px}
.px-footer-inner{max-width:var(--px-shell-1400,1400px);margin:0 auto;display:grid;gap:24px;text-align:center}
.px-footer-brand{font-family:var(--font-display);font-size:20px;font-weight:800}
.px-footer-list{list-style:none;display:flex;flex-wrap:wrap;gap:20px;justify-content:center}
.px-footer-list a{color:var(--muted);font-size:14px}
.px-footer-list a:hover{color:var(--text)}
.px-footer-credit{color:var(--muted);font-size:13px}
.px-footer-text{color:var(--muted);font-size:13px;margin-top:12px;max-width:var(--px-shell-640,640px);margin-inline:auto;line-height:1.6}
.px-footer-text a{color:var(--accent)}

/* ============================================================
   SHARED COMPONENTS
============================================================ */
.px-wrap{max-width:var(--px-shell-1400,1400px);margin:0 auto;padding:0 28px}
.px-wrap-sm{max-width:var(--px-shell-780,780px);margin:0 auto;padding:0 28px}

.px-thumb-placeholder{
  width:100%;aspect-ratio:4/3;
  background:
    linear-gradient(135deg,transparent 48%,var(--border) 48%,var(--border) 52%,transparent 52%),
    color-mix(in srgb,var(--text) 4%,var(--bg));
}
.px-thumb-placeholder::before{
  content:"";display:block;width:100%;height:100%;
}

.px-kicker{
  display:inline-block;
  font-family:var(--font-body);
  font-size:11px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent);
  margin-bottom:8px;
}
.px-meta-row{
  display:flex;gap:12px;align-items:center;
  font-size:12px;color:var(--muted);
  margin-top:10px;
}
.px-meta-row .px-dot{width:3px;height:3px;border-radius:50%;background:currentColor}

/* Premium badge */
.px-premium{
  display:inline-block;padding:3px 8px;
  font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  background:var(--accent);color:#fff;border-radius:3px;
}

/* Homepage card excerpt toggle — set from Settings. */
.px-home-no-excerpts .px-home-excerpt{display:none !important}

/* ============================================================
   SINGLE POST
============================================================ */
/* mniejszy odstęp menu->tytuł (px-main ma 28px z pw_polish, więc na single tniemy go) */
body.single .px-main{padding-top:6px}
.px-single{padding-top:6px}
.px-single .px-breadcrumbs{margin-bottom:14px}
.px-single-head{text-align:center;margin-bottom:32px;padding-top:0}
.px-single-title{font-size:clamp(34px,5.4vw,60px);font-weight:800;line-height:1.08;letter-spacing:-.02em;margin:6px 0 24px}
@media(max-width:768px){
  body.single .px-main{padding-top:2px}
  .px-single{padding-top:4px}
  .px-breadcrumbs{display:none}
  .px-single-head{margin-bottom:20px}
  .px-single-title{margin-top:2px}
}
.px-single-dek{font-size:20px;color:var(--muted);line-height:1.6;max-width:var(--px-shell-700,700px);margin:0 auto 8px}
.px-single-meta{display:flex;justify-content:center;gap:12px;align-items:center;font-size:13px;color:var(--muted);margin-top:32px}
.px-single-meta .px-author-link{color:var(--muted);transition:color .15s;border-bottom:1px solid transparent}
.px-single-meta .px-author-link:hover{color:var(--accent);border-bottom-color:var(--accent)}
.px-single-hero{max-width:var(--px-shell-1200,1200px);margin:0 auto 56px;padding:0 28px}
.px-single-hero img{width:100%;aspect-ratio:16/9;object-fit:cover;height:auto;border-radius:10px;display:block}
/* Zdjęcia ze źródła w treści: zawsze pełna szerokość 16:9 (bez podpisów) */
.px-single-body .pw-srcimg{margin:2em 0;width:100%}
.px-single-body .pw-srcimg img{width:100%;height:auto;border-radius:10px;display:block}
.px-single-body .pw-srcimg figcaption{display:none}
/* Wideo YouTube: responsywne, pełna szerokość 16:9 */
.px-single-body .pw-video{margin:2em 0;width:100%}
.pw-video-wrap{position:relative;width:100%;aspect-ratio:16/9;border-radius:10px;overflow:hidden;background:#000}
.pw-video-wrap iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
/* Tweety / TikToki wklejone ze źródła: wycentrowane, nie rozciągnięte na pełną szerokość (natywna szerokość widżetu) */
.px-single-body .pw-embed{margin:2em auto;width:100%;display:flex;justify-content:center}
/* akordeon FAQ w treści wpisu (details.pw-faq-q) - czysta forma, w kolumnie tekstu */
.px-single-body details.pw-faq-q{max-width:680px;border:1px solid var(--border);border-radius:12px;margin:0 0 12px;padding:2px 20px;background:color-mix(in srgb,var(--text) 3%,transparent)}
.px-single-body details.pw-faq-q>summary{font-family:var(--font-display);font-size:17px;font-weight:600;padding:16px 0;cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:14px;color:var(--text)}
.px-single-body details.pw-faq-q>summary::-webkit-details-marker{display:none}
.px-single-body details.pw-faq-q>summary::after{content:"+";font-family:var(--font-mono,monospace);color:var(--accent,#2dd4bf);font-size:22px;flex:0 0 auto;line-height:1}
.px-single-body details.pw-faq-q[open]>summary::after{content:"-"}
.px-single-body details.pw-faq-q>p{margin:0 0 16px;color:var(--muted);font-size:15.5px;line-height:1.65}
.px-single-body details.pw-faq-q>summary:hover{color:var(--accent,#2dd4bf)}
/* wideo YT (oEmbed) i osadzone ramki: pełna szerokość, proporcje 16:9 */
.px-single-body iframe[src*="youtube"],.px-single-body iframe[src*="youtu.be"]{width:100%;height:auto;aspect-ratio:16/9;display:block;border-radius:12px}
.px-single-body > p:has(> iframe){margin:2em 0}
/* prawdziwe kadry prasowe z widocznym podpisem-creditem */
.px-single-body figure.pw-fotofig{margin:2em 0;width:100%}
.px-single-body figure.pw-fotofig img{width:100%;height:auto;display:block;border-radius:12px}
.px-single-body figure.pw-fotofig figcaption{display:block;margin-top:8px;font-family:var(--font-mono,monospace);font-size:11.5px;letter-spacing:.04em;color:var(--muted)}
.px-single-body .pw-embed-tweet{max-width:550px}
.px-single-body .pw-embed-tiktok{max-width:605px}
.px-single-body .pw-embed blockquote{width:100%;margin:0}
.px-single-body{font-size:18px;line-height:1.78;padding:8px 0 16px}
.px-single-body > p,
.px-single-body > ul,
.px-single-body > ol,
.px-single-body > blockquote,
.px-single-body > figure,
.px-single-body > pre{margin:0 0 1.4em}
.px-single-body > p:first-child{margin-top:0}
.px-single-body h2{font-size:32px;font-weight:700;margin:2.4em 0 .6em;line-height:1.2;letter-spacing:-.01em}
.px-single-body h3{font-size:22px;font-weight:700;margin:2em 0 .5em;line-height:1.3}
.px-single-body h4{font-size:18px;font-weight:700;margin:1.8em 0 .4em}
.px-single-body a{color:var(--accent);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.px-single-body a:hover{text-decoration-thickness:2px}
.px-single-body blockquote{border-left:3px solid var(--accent);padding:8px 0 8px 28px;margin:1.8em 0;font-style:italic;color:color-mix(in srgb,var(--text) 88%,var(--muted));font-size:21px;line-height:1.55}
.px-single-body pre{background:color-mix(in srgb,var(--text) 6%,var(--bg));padding:22px;border-radius:8px;overflow-x:auto;font-size:14px;line-height:1.55}
.px-single-body code{font-family:ui-monospace,Menlo,Monaco,Consolas,monospace;font-size:.9em;background:color-mix(in srgb,var(--text) 6%,var(--bg));padding:2px 6px;border-radius:3px}
.px-single-body img{border-radius:6px;margin:1.6em 0}
.px-single-body figure{margin:2em 0}
.px-single-body figcaption{font-size:13px;color:var(--muted);text-align:center;margin-top:10px;font-style:italic}
.px-single-body ul,.px-single-body ol{padding-left:1.5em}
.px-single-body li{margin-bottom:.5em}
.px-single-body li > ul,.px-single-body li > ol{margin-top:.5em;margin-bottom:0}

/* Horizontal rule — used between sections and before sources list.
   Previously too thin and flush with surrounding text — now has proper
   breathing room and a more elegant centered mark. */
.px-single-body hr{
  border:0;
  margin:3em auto;
  text-align:center;
  max-width:120px;
  height:auto;
  position:relative;
}
.px-single-body hr::before{
  content:"· · ·";
  display:block;
  color:var(--muted);
  letter-spacing:.4em;
  font-size:14px;
  line-height:1;
}

/* Sources / references block — the h-heading after an <hr> is usually
   a "Źródła" / "Sources" label. Give it proper spacing and emphasize it. */
.px-single-body hr + h2,
.px-single-body hr + h3,
.px-single-body hr + h4,
.px-single-body hr + p > strong:only-child,
.px-single-body hr + p > b:only-child{
  margin-top:0;
  font-size:15px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:1.2em;
}
.px-single-body hr + ul,
.px-single-body hr + ol,
.px-single-body hr + p{margin-top:1em}

/* Tags pill row */
.px-tags{padding:20px 0;border-top:1px solid var(--border);margin-top:8px;display:flex;flex-wrap:wrap;gap:8px}

/* ============================================================
   SINGLE POST — WITH-SIDEBAR LAYOUT
============================================================ */
.px-single--with-sidebar .px-single-cols{
  max-width:var(--px-shell-1200,1200px);margin:0 auto;padding:0 28px;
  display:grid;grid-template-columns:minmax(0,1fr) 320px;
  gap:60px;
}
.px-single--with-sidebar .px-single-main{min-width:0}
.px-single--with-sidebar .px-single-main .px-single-body{
  /* the wrap-sm no longer wraps it, so reset padding */
  padding:0 0 16px;
}
/* Terminal: ToC jest już inline nad treścią - ukryj duplikat w sidebarze (najeżdżał na tablecie) */
.pw-design-terminal .px-single-aside .px-toc{display:none}
.px-single--with-sidebar .px-single-aside{
  min-width:0;
}
.px-single--with-sidebar .px-single-aside-inner{
  padding-top:8px;
}
.px-single--with-sidebar .px-single-aside .widget{
  margin-bottom:36px;
  padding-bottom:28px;
  border-bottom:1px solid var(--border);
}
.px-single--with-sidebar .px-single-aside .widget:last-child{
  border-bottom:0;
}
.px-single--with-sidebar .px-single-aside .widget-title{
  font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted);margin-bottom:14px;
}
.px-single--with-sidebar .px-single-aside .px-toc{
  margin:0 0 36px;
}
.px-single--with-sidebar .px-sidebar-fallback a{
  display:block;
}
.px-single--with-sidebar .px-single-aside ul{
  list-style:none;padding:0;margin:0;
}
.px-single--with-sidebar .px-single-aside li{
  padding:8px 0;border-bottom:1px solid color-mix(in srgb,var(--border) 60%,transparent);
  font-size:14px;line-height:1.45;
}
.px-single--with-sidebar .px-single-aside li:last-child{border-bottom:0}
.px-single--with-sidebar .px-single-aside a{color:var(--text);transition:color .15s}
.px-single--with-sidebar .px-single-aside a:hover{color:var(--accent)}
.px-single--with-sidebar .px-single-aside input[type=search],
.px-single--with-sidebar .px-single-aside input[type=text],
.px-single--with-sidebar .px-single-aside input[type=email]{
  width:100%;padding:10px 12px;font:inherit;
  background:transparent;border:1px solid var(--border);border-radius:6px;
  color:var(--text);
}

/* Sticky sidebar variant */
.px-single--sticky-sidebar .px-single-aside-inner{
  position:sticky;top:96px;
}

@media (max-width:1024px){
  .px-single--with-sidebar .px-single-cols{
    grid-template-columns:minmax(0,1fr);gap:40px;max-width:var(--px-shell-780,780px);
  }
  /* twardy bufor: zero przewijania w bok na mobile/tablecie */
  body{overflow-x:hidden}
  .px-single--sticky-sidebar .px-single-aside-inner{position:static}
  .px-single--with-sidebar .px-single-aside{
    padding-top:32px;border-top:1px solid var(--border);
  }
}
.px-tags a{font-size:13px;color:var(--muted);padding:6px 12px;border:1px solid var(--border);border-radius:20px;transition:all .15s}
.px-tags a:hover{color:var(--accent);border-color:var(--accent)}

/* ============================================================
   ARCHIVE / SEARCH
============================================================ */
.px-archive{padding:64px 0 40px}
.px-archive-head{text-align:center;margin-bottom:48px;padding-bottom:32px;border-bottom:1px solid var(--border)}
.px-archive-title{font-size:48px;font-weight:800;line-height:1.1;margin:10px 0 12px;letter-spacing:-.02em}
.px-archive-desc{color:var(--muted);max-width:var(--px-shell-600,600px);margin:0 auto}
.px-archive-grid{display:grid;gap:40px 32px}

/* Column count variants */
.px-archive--cols-2 .px-archive-grid{grid-template-columns:repeat(2,1fr)}
.px-archive--cols-3 .px-archive-grid{grid-template-columns:repeat(3,1fr)}
.px-archive--cols-4 .px-archive-grid{grid-template-columns:repeat(4,1fr);gap:32px 24px}

@media(max-width:1100px){
  .px-archive--cols-3 .px-archive-grid,
  .px-archive--cols-4 .px-archive-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:600px){
  .px-archive-grid{grid-template-columns:1fr !important}
}

/* List layout */
.px-archive-list{display:flex;flex-direction:column;gap:40px;max-width:880px;margin:0 auto}
.px-archive-row{
  display:grid;grid-template-columns:220px 1fr;gap:28px;align-items:flex-start;
  padding-bottom:40px;border-bottom:1px solid var(--border);
}
.px-archive-row:last-child{border-bottom:0}
.px-archive-row-thumb{
  aspect-ratio:4/3;overflow:hidden;border-radius:8px;
  background:color-mix(in srgb,var(--text) 4%,var(--bg));
  display:block;
}
.px-archive-row-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.px-archive-row:hover .px-archive-row-thumb img{transform:scale(1.04)}
.px-archive-row-body .px-kicker{margin-bottom:6px}
.px-archive-row-body h3{
  font-family:var(--font-display);
  font-size:24px;font-weight:700;line-height:1.25;margin-bottom:8px;
}
.px-archive-row-body h3 a{color:var(--text);transition:color .15s}
.px-archive-row-body h3 a:hover{color:var(--accent)}
.px-archive-row-body p{color:var(--muted);font-size:15px;line-height:1.55;margin-bottom:10px}
@media(max-width:640px){
  .px-archive-row{grid-template-columns:1fr;gap:14px;padding-bottom:28px}
}

.px-pagination{margin:64px 0 24px;text-align:center}
.px-pagination .page-numbers{display:inline-block;padding:10px 16px;margin:0 3px;font-size:14px;color:var(--muted);border:1px solid var(--border);border-radius:6px;transition:all .15s}
.px-pagination .page-numbers.current,.px-pagination .page-numbers:hover{color:var(--bg);background:var(--accent);border-color:var(--accent)}
.px-empty{text-align:center;color:var(--muted);padding:80px 28px;font-size:18px}

/* ============================================================
   SEARCH FORM
============================================================ */
.px-searchform{display:flex;max-width:480px;margin:0 auto;border:1px solid var(--border);border-radius:10px;overflow:hidden}
.px-searchform input{flex:1;padding:14px 18px;font-size:15px;background:transparent;border:0;color:var(--text);outline:none;font-family:inherit}
.px-searchform input::placeholder{color:var(--muted)}
.px-searchform-btn{padding:0 22px;background:var(--accent);color:#fff;font-weight:600;font-size:14px;border:0;cursor:pointer}

/* ============================================================
   COMMENTS
============================================================ */
.px-comments{padding:64px 0;border-top:1px solid var(--border)}
.px-comments-title{font-size:28px;font-weight:700;margin-bottom:32px}
.px-comment-list{list-style:none;padding:0}
.px-comment-list li{padding:20px 0;border-bottom:1px solid var(--border)}
.px-comment-list .comment-author{display:flex;gap:12px;align-items:center;margin-bottom:10px;font-size:14px;font-weight:600}
.px-comment-list .comment-author img{border-radius:50%}
.px-comment-list .comment-metadata{font-size:12px;color:var(--muted);margin-bottom:10px}
.px-comment-list .comment-metadata a{color:inherit}
.px-comment-list .reply{margin-top:10px}
.px-comment-list .reply a{font-size:13px;color:var(--accent)}
.px-comment-list .children{list-style:none;padding-left:24px;margin-top:16px;border-left:2px solid var(--border)}

#respond{margin-top:40px}
#respond h3{font-size:22px;font-weight:700;margin-bottom:16px}
#respond input[type=text],#respond input[type=email],#respond input[type=url],#respond textarea{
  width:100%;padding:12px 14px;background:transparent;border:1px solid var(--border);border-radius:8px;color:var(--text);font:inherit;margin-bottom:14px;
}
#respond input:focus,#respond textarea:focus{border-color:var(--accent);outline:0}
#respond .submit{padding:12px 28px;background:var(--accent);color:#fff;border:0;border-radius:8px;font-weight:600;cursor:pointer}

/* ============================================================
   READING PROGRESS BAR
============================================================ */
.px-progress{position:fixed;top:0;left:0;right:0;height:3px;background:transparent;z-index:150;pointer-events:none}
.px-progress span{display:block;height:100%;width:0;background:var(--accent);transition:width .12s linear}

/* ============================================================
   DROP CAP (opt-in via Settings)
============================================================ */
.px-single--dropcap .px-single-body > p:first-of-type::first-letter{
  font-family:var(--font-display);
  font-size:72px;float:left;
  line-height:.85;padding:8px 14px 0 0;
  color:var(--accent);font-weight:700;
}

/* Rounded image corners — on by default; [data-no-rounded] opts out */
html[data-rounded-images="0"] .px-single-body img,
html[data-rounded-images="0"] .px-card-img,
html[data-rounded-images="0"] .px-single-hero img{border-radius:0}

/* ============================================================
   BREADCRUMBS
============================================================ */
.px-breadcrumbs{margin-bottom:20px;font-size:12px;color:var(--muted)}
.px-breadcrumbs-list{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:6px;justify-content:center;align-items:center}
.px-breadcrumb{display:flex;align-items:center;gap:6px}
.px-breadcrumb a{color:var(--muted);transition:color .15s}
.px-breadcrumb a:hover{color:var(--accent)}
.px-breadcrumb.is-current span{color:var(--text);font-weight:500;max-width:440px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.px-breadcrumb-sep{opacity:.5}

/* ============================================================
   LAST UPDATED
============================================================ */
.px-updated{
  margin-top:14px;font-size:12px;color:var(--muted);
  display:inline-flex;gap:6px;padding:6px 12px;
  background:color-mix(in srgb,var(--accent) 10%,transparent);
  border:1px solid color-mix(in srgb,var(--accent) 20%,transparent);
  border-radius:20px;align-items:center;
}
.px-updated time{color:var(--text);font-weight:500}

/* ============================================================
   TABLE OF CONTENTS
============================================================ */
.px-toc{
  margin:0 0 40px;padding:20px 24px;
  background:color-mix(in srgb,var(--text) 3%,var(--bg));
  border:1px solid var(--border);border-radius:10px;
}
.px-toc-toggle{
  display:flex;width:100%;align-items:center;justify-content:space-between;
  font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted);cursor:pointer;
  padding:0;
}
.px-toc-toggle svg{transition:transform .2s}
.px-toc-toggle[aria-expanded="false"] svg{transform:rotate(-90deg)}
.px-toc-list{
  list-style:none;padding:0;margin:16px 0 0;
  display:flex;flex-direction:column;gap:6px;
  counter-reset:toc-counter;
}
.px-toc[data-collapsed] .px-toc-list{display:none}
.px-toc-item a{
  display:block;padding:6px 10px;font-size:14px;line-height:1.4;
  color:var(--muted);border-left:2px solid transparent;
  transition:all .15s;
}
.px-toc-item a:hover{color:var(--text);background:color-mix(in srgb,var(--text) 5%,transparent);border-left-color:var(--accent)}
.px-toc-item.is-active > a{color:var(--accent);border-left-color:var(--accent);font-weight:500}
.px-toc-item--3 a{padding-left:26px;font-size:13px}

/* Sticky TOC on desktop (centered layout only) */
@media (min-width:1200px){
  .px-single--centered .px-toc{
    position:sticky;top:96px;
    float:left;
    width:220px;
    margin-left:calc(-220px - 48px);
    margin-top:0;margin-bottom:0;
    padding:18px 20px;
    font-size:13px;
  }
}

/* ============================================================
   AUTHOR BIO CARD
============================================================ */
.px-author-bio{
  margin:20px 0 16px;
  padding:28px 32px;
  background:color-mix(in srgb,var(--text) 3%,var(--bg));
  border:1px solid var(--border);border-radius:14px;
}
.px-author-bio-inner{display:grid;grid-template-columns:96px 1fr;gap:24px;align-items:flex-start}
.px-author-bio-avatar img{border-radius:50%;width:96px;height:96px;display:block}
.px-author-bio-name{font-family:var(--font-display);font-size:22px;font-weight:700;margin:0 0 4px;letter-spacing:-.01em}
.px-author-bio-roles{font-size:10px;font-weight:700;letter-spacing:.2em;color:var(--accent);margin-bottom:10px}
.px-author-bio-text{color:var(--muted);font-size:15px;line-height:1.6;margin-bottom:16px}
.px-author-bio-actions{display:flex;flex-wrap:wrap;gap:8px}
.px-author-bio-btn{
  display:inline-block;padding:8px 16px;
  background:var(--accent);color:#fff;
  font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  border-radius:6px;transition:all .15s;
}
.px-author-bio-btn:hover{filter:brightness(1.1);transform:translateY(-1px)}
.px-author-bio-btn--ghost{
  background:transparent;color:var(--text);
  border:1px solid var(--border);
}
.px-author-bio-btn--ghost:hover{border-color:var(--accent);color:var(--accent)}
@media (max-width:640px){
  .px-author-bio{padding:24px;margin:48px 0 24px}
  .px-author-bio-inner{grid-template-columns:1fr;text-align:center}
  .px-author-bio-avatar{margin:0 auto}
  .px-author-bio-actions{justify-content:center}
}

/* ============================================================
   SHARE BUTTONS
============================================================ */
.px-share{
  display:flex;flex-wrap:wrap;gap:8px;align-items:center;
  margin:0 0 32px;padding:14px 0;
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
}
.px-share-label{
  font-size:10px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted);margin-right:8px;
}
.px-share-btn{
  width:34px;height:34px;display:grid;place-items:center;
  color:var(--muted);border:1px solid var(--border);border-radius:50%;
  background:transparent;cursor:pointer;
  transition:all .15s;
}
.px-share-btn:hover{color:var(--accent);border-color:var(--accent);transform:translateY(-1px)}
.px-share-btn[data-copied]{color:#10b981;border-color:#10b981}

/* Sticky share on desktop for centered layout */
@media (min-width:1200px){
  .px-single--centered .px-share{
    position:sticky;top:96px;
    float:left;
    width:48px;flex-direction:column;gap:6px;
    margin-left:calc(-48px - 48px);
    margin-top:0;margin-bottom:0;
    padding:0;
    background:transparent;border:0;
  }
  .px-single--centered .px-share-label{display:none}
}
.px-socials-footer{display:flex;gap:12px;justify-content:center;margin-top:18px}
.px-socials-footer a{
  width:36px;height:36px;display:grid;place-items:center;
  border:1px solid var(--border);border-radius:50%;
  color:var(--muted);transition:all .15s;
}
.px-socials-footer a:hover{color:var(--accent);border-color:var(--accent)}
.px-socials-footer svg{width:16px;height:16px}

/* ============================================================
   SEARCH OVERLAY
============================================================ */
.px-search-overlay{
  position:fixed;inset:0;z-index:300;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  padding-top:max(15vh,80px);
  opacity:0;pointer-events:none;
  transition:opacity .2s;
}
.px-search-overlay.is-open{opacity:1;pointer-events:auto}
.px-search-scrim{
  position:absolute;inset:0;
  background:color-mix(in srgb,var(--bg) 80%,rgba(0,0,0,.6));
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.px-search-form{
  position:relative;z-index:1;
  width:min(92vw,640px);
  display:flex;align-items:center;gap:12px;
  padding:18px 22px;
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:14px;
  box-shadow:0 20px 60px rgba(0,0,0,.3);
  transform:translateY(-10px);
  transition:transform .2s;
}
.px-search-overlay.is-open .px-search-form{transform:translateY(0)}
.px-search-icon{color:var(--muted);flex-shrink:0}
.px-search-input{
  flex:1;background:transparent;border:0;outline:0;
  font:inherit;font-size:18px;color:var(--text);
  padding:6px 0;min-width:0;
}
.px-search-input::placeholder{color:var(--muted)}
.px-search-esc{
  padding:4px 10px;border:1px solid var(--border);border-radius:4px;
  font-size:11px;font-weight:600;color:var(--muted);
  background:transparent;cursor:pointer;
  transition:all .15s;
}
.px-search-esc:hover{color:var(--text);border-color:var(--accent)}
@media (max-width:640px){
  .px-search-overlay{padding-top:60px}
  .px-search-form{padding:14px 16px;gap:8px}
  .px-search-input{font-size:16px}
}
.px-prev-next{
  display:grid;grid-template-columns:1fr 1fr;gap:16px;
  margin:48px 0 16px;padding:32px 0;
  border-top:1px solid var(--border);border-bottom:1px solid var(--border);
}
.px-prev-next-link{
  display:flex;flex-direction:column;gap:6px;
  padding:14px 18px;border-radius:10px;
  transition:all .15s;color:inherit;
}
.px-prev-next-link--next{text-align:right;align-items:flex-end}
.px-prev-next-link:hover{background:color-mix(in srgb,var(--text) 4%,transparent)}
.px-prev-next-label{
  font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent);
}
.px-prev-next-title{
  font-family:var(--font-display);
  font-size:18px;font-weight:600;line-height:1.3;color:var(--text);
}
.px-prev-next-link:hover .px-prev-next-title{color:var(--accent)}
@media(max-width:640px){.px-prev-next{grid-template-columns:1fr}}

/* ============================================================
   CITATION BOX (APA / BibTeX)
============================================================ */
.px-citation{
  margin:48px 0 24px;padding:24px;
  background:color-mix(in srgb,var(--text) 3%,var(--bg));
  border:1px solid var(--border);border-radius:10px;
}
.px-citation-title{
  font-family:var(--font-display);
  font-size:16px;font-weight:700;margin:0 0 14px;
}
.px-citation-tabs{display:flex;gap:4px;margin-bottom:14px}
.px-citation-tab{
  padding:6px 14px;border-radius:6px;
  background:transparent;color:var(--muted);
  font-size:12px;font-weight:600;letter-spacing:.04em;cursor:pointer;
  transition:all .15s;
}
.px-citation-tab.is-active{background:var(--accent);color:#fff}
.px-citation-panel{position:relative}
.px-citation-text{
  background:var(--bg);
  padding:14px 14px 14px 18px;border-radius:6px;border:1px solid var(--border);
  font-family:ui-monospace,Menlo,Monaco,Consolas,monospace;
  font-size:13px;line-height:1.55;color:var(--text);
  white-space:pre-wrap;word-break:break-word;overflow-x:auto;margin:0;
}
.px-citation-copy{
  position:absolute;top:10px;right:10px;
  padding:5px 12px;background:var(--bg);border:1px solid var(--border);
  color:var(--muted);font-size:11px;font-weight:600;letter-spacing:.04em;
  text-transform:uppercase;border-radius:4px;cursor:pointer;transition:all .15s;
}
.px-citation-copy:hover{color:var(--accent);border-color:var(--accent)}
.px-citation-copy[data-copied]{color:#10b981;border-color:#10b981}

/* ============================================================
   COMMENT CTA
============================================================ */
.px-comment-cta{
  margin:32px 0 16px;padding:20px 24px;
  background:color-mix(in srgb,var(--accent) 8%,transparent);
  border-left:3px solid var(--accent);border-radius:6px;
}
.px-comment-cta p{margin:0;font-size:15px;line-height:1.5;color:var(--text)}

/* ============================================================
   PRINT STYLESHEET
   Active whenever body does NOT have .px-no-print (can be added
   via Settings toggle by omitting this class in body_class).
============================================================ */
@media print{
  body:not(.px-no-print) .px-header,
  body:not(.px-no-print) .px-footer,
  body:not(.px-no-print) .px-drawer,
  body:not(.px-no-print) .px-progress,
  body:not(.px-no-print) .px-share,
  body:not(.px-no-print) .px-peek,
  body:not(.px-no-print) .px-toc,
  body:not(.px-no-print) .px-related,
  body:not(.px-no-print) .px-autoload,
  body:not(.px-no-print) .px-breadcrumbs,
  body:not(.px-no-print) .px-tags,
  body:not(.px-no-print) .px-author-bio-actions,
  body:not(.px-no-print) .px-prev-next,
  body:not(.px-no-print) .px-comment-cta,
  body:not(.px-no-print) .px-citation-copy,
  body:not(.px-no-print) .px-citation-tabs,
  body:not(.px-no-print) .px-single-aside,
  body:not(.px-no-print) #wpadminbar,
  body:not(.px-no-print) #comments,
  body:not(.px-no-print) #respond{
    display:none !important;
  }
  body:not(.px-no-print){background:#fff !important;color:#000 !important}
  body:not(.px-no-print) .px-single-title,
  body:not(.px-no-print) .px-single-body,
  body:not(.px-no-print) .px-single-meta,
  body:not(.px-no-print) .px-single-hero{color:#000 !important}
  body:not(.px-no-print) .px-single-body a{color:#000 !important;text-decoration:underline}
  body:not(.px-no-print) .px-single-body a::after{content:" (" attr(href) ")";font-size:.85em;color:#555}
  body:not(.px-no-print) .px-citation-panel[hidden]{display:none !important}
}

/* ============================================================
   PEEK BAR — sticky bottom "next article" panel
============================================================ */
.px-peek{
  position:fixed;
  left:50%;bottom:16px;transform:translateX(-50%) translateY(calc(100% + 24px));
  z-index:90;
  width:min(calc(100% - 32px),720px);
  background:color-mix(in srgb,var(--bg) 96%,transparent);
  backdrop-filter:saturate(160%) blur(14px);
  -webkit-backdrop-filter:saturate(160%) blur(14px);
  border:1px solid var(--border);
  border-radius:14px;
  box-shadow:0 12px 40px rgba(0,0,0,.22);
  transition:transform .35s cubic-bezier(.2,.8,.2,1), opacity .25s;
  opacity:0;
}
.px-peek.is-visible{
  transform:translateX(-50%) translateY(0);
  opacity:1;
}
.px-peek-inner{
  display:grid;grid-template-columns:1fr auto;
  align-items:center;gap:8px;
  padding:10px 14px 10px 10px;
}
.px-peek-link{
  display:grid;grid-template-columns:56px 1fr auto;gap:14px;
  align-items:center;color:inherit;min-width:0;
}
.px-peek-thumb{
  aspect-ratio:1/1;width:56px;overflow:hidden;border-radius:8px;
  background:color-mix(in srgb,var(--text) 6%,var(--bg));
}
.px-peek-thumb img{width:100%;height:100%;object-fit:cover}
.px-peek-body{min-width:0}
.px-peek-kicker{
  display:block;font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);margin-bottom:3px;
}
.px-peek-title{
  font-size:14px;font-weight:600;line-height:1.3;color:var(--text);
  overflow:hidden;text-overflow:ellipsis;display:-webkit-box;
  -webkit-line-clamp:1;-webkit-box-orient:vertical;
}
.px-peek-cta{
  padding:8px 16px;
  background:var(--accent);color:#fff;
  font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  border-radius:6px;white-space:nowrap;
  transition:transform .15s,filter .15s;
}
.px-peek-link:hover .px-peek-cta{transform:translateX(2px);filter:brightness(1.1)}
.px-peek-close{
  width:30px;height:30px;flex-shrink:0;
  display:grid;place-items:center;
  font-size:22px;line-height:1;color:var(--muted);
  border-radius:50%;transition:all .15s;
}
.px-peek-close:hover{color:var(--text);background:color-mix(in srgb,var(--text) 8%,transparent)}
@media(max-width:640px){
  .px-peek{left:8px;right:8px;bottom:8px;transform:translateY(calc(100% + 24px));width:auto}
  .px-peek.is-visible{transform:translateY(0)}
  .px-peek-link{grid-template-columns:48px 1fr auto;gap:10px}
  .px-peek-thumb{width:48px}
  .px-peek-cta{padding:7px 12px;font-size:11px}
  .px-peek-title{font-size:13px}
}

/* ============================================================
   RELATED POSTS (below single post)
============================================================ */
.px-related{padding:28px 0 16px;border-top:1px solid var(--border);margin-top:16px}
.px-related-title{
  font-family:var(--font-display);
  font-size:14px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted);
  margin-bottom:28px;padding-bottom:12px;
  border-bottom:1px solid var(--border);
}
.px-related-grid{display:grid;gap:32px}
.px-related--grid3 .px-related-grid{grid-template-columns:repeat(3,1fr)}
.px-related--grid6 .px-related-grid{grid-template-columns:repeat(3,1fr);gap:40px 32px}
.px-related--grid6 .px-related-card:nth-child(n+4){opacity:.95}
@media(max-width:900px){.px-related--grid3 .px-related-grid,.px-related--grid6 .px-related-grid{grid-template-columns:repeat(2,1fr);gap:24px}}
@media(max-width:600px){.px-related--grid3 .px-related-grid,.px-related--grid6 .px-related-grid{grid-template-columns:1fr}}
.px-related-card h3{font-size:20px;line-height:1.25}

/* ============================================================
   AUTO-LOAD NEXT ARTICLE
============================================================ */
.px-autoload{margin-top:64px}
.px-autoload-sentinel{height:1px;pointer-events:none}
.px-autoload-preview{
  padding:80px 0 120px;text-align:center;
  border-top:1px solid var(--border);
  background:linear-gradient(to bottom,transparent,color-mix(in srgb,var(--text) 3%,var(--bg)));
}
.px-autoload-next-title{
  font-family:var(--font-display);
  font-size:36px;font-weight:700;line-height:1.2;
  margin:10px 0 16px;
  max-width:var(--px-shell-780,780px);margin-inline:auto;padding:0 24px;
}
.px-autoload-hint{color:var(--muted);font-size:14px;margin-bottom:24px}
@media(max-width:640px){.px-autoload-next-title{font-size:24px}}

.px-autoload-spinner{display:flex;justify-content:center;gap:6px;margin:0 auto}
.px-autoload-spinner span{
  width:8px;height:8px;border-radius:50%;background:var(--accent);
  animation:px-bounce 1.2s infinite ease-in-out both;
}
.px-autoload-spinner span:nth-child(1){animation-delay:-.32s}
.px-autoload-spinner span:nth-child(2){animation-delay:-.16s}
@keyframes px-bounce{0%,80%,100%{transform:scale(.6);opacity:.4}40%{transform:scale(1);opacity:1}}

/* Each auto-loaded article gets a separator above it */
.px-single[data-px-loaded]{border-top:1px solid var(--border);padding-top:64px;margin-top:32px}

/* ============================================================
   SALES LANDING + LIVE DEMO PAGES
============================================================ */
.px-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:44px;padding:11px 18px;border:1px solid var(--border);
  border-radius:10px;font-size:14px;font-weight:800;letter-spacing:.02em;
  background:color-mix(in srgb,var(--text) 5%,var(--bg));color:var(--text);
  transition:transform .15s,border-color .15s,background .15s;
}
.px-btn:hover{transform:translateY(-1px);border-color:var(--accent)}
.px-btn--primary{background:var(--accent);border-color:var(--accent);color:#fff!important}.px-btn--ghost{background:transparent;border-color:color-mix(in srgb,var(--accent) 35%,var(--border));color:var(--accent)}
.px-sales,.px-demo-page{max-width:var(--px-shell-1400,1400px);margin:0 auto;padding:0 28px 24px}
.px-sales-hero,.px-demo-hero{
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(320px,.95fr);gap:56px;align-items:center;
  min-height:calc(100vh - 90px);padding:72px 0;border-bottom:1px solid var(--border);
}
.px-demo-hero{display:block;min-height:auto;text-align:center;max-width:var(--px-shell-1080,1080px);margin:0 auto 56px;padding:76px 0 64px}
.px-sales-eyebrow{display:inline-block;font-size:11px;font-weight:900;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);margin-bottom:14px}
.px-sales-hero h1,.px-demo-hero h1{font-size:clamp(42px,6vw,82px);line-height:.98;letter-spacing:-.055em;margin:0 0 24px;text-wrap:balance}
.px-demo-hero h1{font-size:clamp(34px,5vw,66px)}
.px-sales-hero p,.px-demo-hero p,.px-sales-section-head p,.px-sales-final p{font-size:18px;line-height:1.7;color:var(--muted);max-width:var(--px-shell-760,760px)}
.px-demo-hero p{margin-inline:auto}
.px-sales-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
.px-sales-stats{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px;color:var(--muted);font-size:13px}
.px-sales-stats span{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border:1px solid var(--border);border-radius:999px;background:color-mix(in srgb,var(--text) 3%,transparent)}
.px-sales-stats b{color:var(--text);font-size:18px;line-height:1}
.px-sales-hero-art{position:relative;min-height:520px}
.px-sales-window{background:color-mix(in srgb,var(--text) 6%,var(--bg));border:1px solid var(--border);border-radius:22px;box-shadow:0 24px 80px rgba(0,0,0,.25);overflow:hidden}
.px-sales-window--main{height:420px;padding:20px}
.px-sales-window--float{position:absolute;width:46%;height:190px;padding:14px}
.px-sales-window--a{right:0;top:20px;transform:rotate(2deg)}
.px-sales-window--b{left:4%;bottom:10px;transform:rotate(-2deg)}
.px-public-sketch{width:100%;height:100%;display:grid;gap:10px;color:var(--accent)}
.px-public-sketch i{display:block;min-height:18px;border-radius:8px;background:currentColor;opacity:.78}
.px-public-sketch--hero-side-grid{grid-template-columns:2fr 1fr;grid-template-rows:2fr repeat(2,1fr)}
.px-public-sketch--hero-side-grid i:first-child{grid-row:1/4}
.px-public-sketch--strip-feature{grid-template-columns:repeat(4,1fr);grid-template-rows:1fr 2.3fr 1.1fr}
.px-public-sketch--strip-feature i:nth-child(n+5):nth-child(-n+6){grid-column:span 2}
.px-public-sketch--single-column{grid-template-columns:1fr;grid-template-rows:2.4fr repeat(4,1fr)}
.px-public-sketch--dense{grid-template-columns:2fr 1fr 1fr;grid-template-rows:repeat(3,1fr)}
.px-public-sketch--dense i:first-child{grid-row:span 2;grid-column:span 2}
.px-public-sketch--minimal{grid-template-columns:1fr;align-content:center;padding:10% 18%}
.px-public-sketch--minimal i{height:12px}.px-public-sketch--minimal i:first-child{height:70px;opacity:.42}
.px-public-sketch--mosaic{grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(3,1fr)}
.px-public-sketch--mosaic i:first-child{grid-column:span 2;grid-row:span 2}.px-public-sketch--mosaic i:nth-child(2){grid-row:span 2}
.px-public-sketch--ticker{grid-template-columns:2fr 1fr;grid-template-rows:.45fr 2fr 1fr}.px-public-sketch--ticker i:first-child{grid-column:1/-1;background:var(--accent);opacity:1}
.px-public-sketch--editorial{grid-template-columns:1fr;grid-template-rows:.5fr 2fr .6fr .6fr .6fr;padding:7% 10%}
.px-public-sketch--grid{grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr)}
.px-public-sketch--columns{grid-template-columns:repeat(5,1fr);grid-template-rows:1fr 4fr}.px-public-sketch--columns i:first-child{grid-column:1/-1}
.px-public-sketch--spotlight{grid-template-columns:repeat(4,1fr);grid-template-rows:2.6fr 1fr}.px-public-sketch--spotlight i:first-child{grid-column:1/-1}
.px-public-sketch--split{grid-template-columns:1fr 1fr;grid-template-rows:2fr repeat(2,1fr)}
.px-public-sketch--lines{grid-template-columns:1fr;padding:8% 0}.px-public-sketch--lines i{height:14px}.px-public-sketch--lines i:nth-child(odd){width:74%}
.px-public-sketch--signal{grid-template-columns:2fr 1fr;grid-template-rows:.6fr repeat(4,1fr)}.px-public-sketch--signal i:first-child{grid-column:1/-1;background:var(--accent);opacity:1}
.px-public-sketch--feature-text{grid-template-columns:1.4fr 1fr;grid-template-rows:2.6fr repeat(2,1fr)}.px-public-sketch--feature-text i:first-child{grid-column:1/-1}
.px-public-sketch--zine{position:relative;display:block}.px-public-sketch--zine i{position:absolute}.px-public-sketch--zine i:nth-child(1){left:3%;top:6%;width:62%;height:48%;transform:rotate(-2deg)}.px-public-sketch--zine i:nth-child(2){right:4%;top:24%;width:42%;height:38%;transform:rotate(2deg)}.px-public-sketch--zine i:nth-child(3){left:18%;bottom:8%;width:50%;height:26%;transform:rotate(-1deg)}.px-public-sketch--zine i:nth-child(n+4){display:none}
.px-public-sketch--masonry{display:block;columns:3;column-gap:10px}.px-public-sketch--masonry i{break-inside:avoid;margin-bottom:10px;height:64px}.px-public-sketch--masonry i:nth-child(2n){height:104px}.px-public-sketch--masonry i:nth-child(3n){height:42px}
.px-public-sketch--lab{grid-template-columns:1.5fr 1fr;grid-template-rows:.45fr 2fr 1fr}.px-public-sketch--lab i:first-child{grid-column:1/-1}.px-public-sketch--lab i:nth-child(2){grid-row:span 2}.px-public-sketch--lab i:nth-child(n+5){display:none}
.px-public-sketch--timeline{grid-template-columns:28px 1fr;grid-template-rows:repeat(5,1fr)}.px-public-sketch--timeline i:first-child{grid-row:1/-1;width:3px;justify-self:center;opacity:.38}.px-public-sketch--timeline i:nth-child(n+7){display:none}
.px-public-sketch--cards{grid-template-columns:repeat(3,1fr);grid-template-rows:2.4fr 1fr 1fr}.px-public-sketch--cards i:first-child{grid-column:1/-1;transform:rotate(-1deg)}
.px-public-sketch--panorama{grid-template-columns:repeat(5,1fr);grid-template-rows:2.6fr .7fr 1fr}.px-public-sketch--panorama i:first-child{grid-column:1/-1}
.px-sales-section,.px-demo-section{padding:72px 0;border-bottom:1px solid var(--border)}
.px-sales-section-head{margin-bottom:28px}.px-sales-section-head h2,.px-sales-final h2{font-size:clamp(32px,4vw,56px);letter-spacing:-.04em;line-height:1.02;margin-bottom:14px;text-wrap:balance}
.px-sales-layout-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.px-sales-card a{display:block;height:100%;padding:18px;border:1px solid var(--border);border-radius:18px;background:color-mix(in srgb,var(--text) 3%,transparent);transition:transform .15s,border-color .15s,background .15s}
.px-sales-card a:hover{transform:translateY(-2px);border-color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,transparent)}
.px-sales-card .px-public-sketch{height:160px;margin-bottom:16px;padding:12px;border-radius:14px;background:color-mix(in srgb,var(--text) 5%,var(--bg));overflow:hidden}
.px-sales-card h3{font-size:22px;margin:0 0 6px}.px-sales-card p{font-size:14px;line-height:1.55;color:var(--muted);min-height:44px}.px-sales-card span{display:inline-block;margin-top:12px;color:var(--accent);font-size:13px;font-weight:800}
.px-sales-color-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}.px-sales-swatch-card{display:block;border:1px solid var(--border);border-radius:14px;padding:12px;background:color-mix(in srgb,var(--text) 3%,transparent);transition:border-color .15s,transform .15s}.px-sales-swatch-card:hover{border-color:var(--accent);transform:translateY(-1px)}
.px-sales-swatch{display:flex;height:54px;border-radius:10px;overflow:hidden;border:1px solid var(--border);margin-bottom:10px}.px-sales-swatch i{flex:1}.px-sales-swatch-card b{display:block;font-size:14px}.px-sales-swatch-card em{font-size:12px;color:var(--muted);font-style:normal}
.px-sales-font-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.px-sales-font-card{display:grid;grid-template-columns:70px 1fr;gap:14px;align-items:center;border:1px solid var(--border);border-radius:16px;padding:16px;background:color-mix(in srgb,var(--text) 3%,transparent);transition:border-color .15s,transform .15s}.px-sales-font-card:hover{border-color:var(--accent);transform:translateY(-1px)}.px-sales-font-card strong{display:grid;place-items:center;width:70px;height:70px;border-radius:14px;background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--accent);font-size:34px}.px-sales-font-card h3{font-size:18px;margin:0 0 4px}.px-sales-font-card p{font-size:13px;color:var(--muted);line-height:1.35}
.px-sales-width-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.px-sales-width-card{display:block;padding:20px;border:1px solid var(--border);border-radius:18px;background:color-mix(in srgb,var(--text) 3%,transparent);transition:border-color .15s,transform .15s}.px-sales-width-card:hover{border-color:var(--accent);transform:translateY(-1px)}.px-width-visual{display:block;height:120px;border-radius:14px;background:color-mix(in srgb,var(--text) 5%,var(--bg));position:relative;margin-bottom:16px;overflow:hidden}.px-width-visual::before{content:"";position:absolute;top:18px;bottom:18px;left:50%;transform:translateX(-50%);border-radius:8px;background:var(--accent);opacity:.72}.px-width-visual--normal::before{width:54%}.px-width-visual--threequarter::before{width:75%}.px-width-visual--full::before{width:100%;border-radius:0}.px-sales-width-card h3{font-size:20px;margin-bottom:6px}.px-sales-width-card p{font-size:14px;color:var(--muted);line-height:1.55}
.px-sales-feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.px-sales-feature{display:flex;gap:10px;align-items:flex-start;padding:16px;border:1px solid var(--border);border-radius:14px;background:color-mix(in srgb,var(--text) 3%,transparent);font-size:15px;line-height:1.45}.px-sales-feature span{color:var(--accent);font-weight:900}.px-sales-final{text-align:center;max-width:var(--px-shell-900,900px);margin:0 auto;padding:88px 0 32px}.px-sales-final p{margin-inline:auto}.px-sales-final .px-sales-actions{justify-content:center}
.px-demo-form{display:grid;grid-template-columns:repeat(5,1fr) auto;gap:10px;margin:32px auto 0;text-align:left;align-items:end}.px-demo-form label,.px-demo-bar label{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}.px-demo-form select,.px-demo-bar select{width:100%;margin-top:6px;background:var(--bg);color:var(--text);border:1px solid var(--border);border-radius:9px;padding:10px 34px 10px 10px;font:inherit;font-size:13px;text-transform:none;letter-spacing:0}.px-demo-subhead{font-size:22px;margin:42px 0 16px}.px-demo-article-link{margin-top:14px;text-align:center}
.px-demo-bar{position:fixed;left:18px;right:18px;bottom:18px;z-index:9999;display:grid;grid-template-columns:auto repeat(4,minmax(130px,1fr)) auto;gap:10px;align-items:end;padding:12px;border:1px solid color-mix(in srgb,var(--accent) 35%,var(--border));border-radius:16px;background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:saturate(160%) blur(14px);box-shadow:0 18px 70px rgba(0,0,0,.35)}.px-demo-bar--article{grid-template-columns:auto repeat(5,minmax(112px,1fr)) auto auto}.px-demo-bar strong{align-self:center;font-size:13px;white-space:nowrap}.px-demo-bar a{align-self:center;padding:10px 12px;border-radius:10px;background:color-mix(in srgb,var(--text) 6%,transparent);font-size:13px;font-weight:800;color:var(--muted);white-space:nowrap;text-align:center}.px-demo-bar a:hover{color:var(--text)}.px-demo-home-link{background:color-mix(in srgb,var(--accent) 12%,transparent)!important;color:var(--accent)!important}
@media(max-width:1100px){.px-sales-hero{grid-template-columns:1fr;min-height:auto}.px-sales-hero-art{min-height:420px}.px-sales-layout-grid,.px-sales-feature-grid{grid-template-columns:repeat(2,1fr)}.px-sales-color-grid{grid-template-columns:repeat(3,1fr)}.px-sales-font-grid{grid-template-columns:repeat(2,1fr)}.px-demo-form{grid-template-columns:repeat(2,1fr)}.px-demo-form .px-btn{grid-column:1/-1}.px-demo-bar{grid-template-columns:1fr 1fr}.px-demo-bar strong,.px-demo-bar a{grid-column:1/-1}}
@media(max-width:700px){.px-sales,.px-demo-page{padding-inline:16px}.px-sales-hero,.px-demo-hero{padding:44px 0}.px-sales-hero h1,.px-demo-hero h1{font-size:clamp(32px,10vw,44px)}.px-sales-hero p,.px-demo-hero p,.px-sales-section-head p,.px-sales-final p{font-size:16px}.px-sales-layout-grid,.px-sales-color-grid,.px-sales-font-grid,.px-sales-width-grid,.px-sales-feature-grid{grid-template-columns:1fr}.px-sales-window--float{display:none}.px-sales-hero-art{min-height:300px}.px-sales-window--main{height:300px}.px-demo-form{grid-template-columns:1fr}.px-demo-bar{left:10px;right:10px;bottom:10px;grid-template-columns:1fr;max-height:75vh;overflow:auto}.px-demo-bar strong{display:none}}
.px-demo-live-note{max-width:var(--px-shell-1400,1400px);margin:18px auto 0;padding:10px 28px;color:var(--muted);font-size:13px;display:flex;gap:12px;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border)}.px-demo-live-note--article{border-top:1px solid var(--border);border-bottom:1px solid var(--border);background:color-mix(in srgb,var(--text) 2%,transparent)}
.px-demo-live-note strong{color:var(--text)}.px-demo-live-note a{color:var(--accent);font-weight:800}
@media(max-width:700px){.px-demo-live-note{display:block;padding-inline:16px}.px-demo-live-note a{display:block;margin-top:6px}}