:root{
  --pe-bg:#fbfdff;
  --pe-surface:#ffffff;
  --pe-surface2:#f6f9ff;
  --pe-border:rgba(15,27,45,.10);
  --pe-text:#0f1b2d;
  --pe-muted:#5b6b85;
  --pe-accent:#3b82f6;
  --pe-accent2:#7c3aed;
  --pe-danger:#e11d48;
  --pe-good:#16a34a;
  --pe-radius:16px;
  --pe-shadow:0 14px 32px rgba(15,27,45,.08);
  --pe-max:1120px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:"Titillium Web", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:var(--pe-bg);
  color:var(--pe-text);
  line-height:1.7;
  overflow-x:hidden;
}
img{max-width:100%;height:auto}
a{color:var(--pe-accent);text-decoration:none}
a:hover{opacity:.92}
.screen-reader-text{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

.pe-main{padding:18px 0 44px}
.pe-container{width:min(var(--pe-max), calc(100% - 32px)); margin:0 auto}

.pe-card{
  background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,255,255,.92));
  border:1px solid var(--pe-border);
  border-radius:var(--pe-radius);
  box-shadow:var(--pe-shadow);
}
.pe-card--pad{padding:20px}
.pe-card--media{padding:14px}
@media (min-width: 920px){
  .pe-card--pad{padding:28px}
}

.pe-h1{font-size:clamp(1.6rem, 2.2vw, 2.2rem); line-height:1.2; margin:0 0 10px}
.pe-h2{font-size:clamp(1.2rem, 1.4vw, 1.45rem); margin:24px 0 12px}
.pe-muted{color:var(--pe-muted)}
.pe-dot{opacity:.65}

.pe-header{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(255,255,255,.94);
  backdrop-filter: blur(14px);
  border-bottom:1px solid var(--pe-border);
}
.pe-header__inner{
  width:min(var(--pe-max), calc(100% - 32px));
  margin:0 auto;
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 0;
}
.pe-brand{display:flex; align-items:center; gap:10px; min-width:180px}
.pe-brand__link{display:flex; align-items:center; gap:10px}
.pe-brand__logo .custom-logo-link{display:flex; align-items:center}
.pe-brand__mark{
  display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:12px;
  background:linear-gradient(135deg, rgba(106,168,255,.35), rgba(124,92,255,.25));
  border:1px solid rgba(255,255,255,.10);
}
.pe-brand__name{font-weight:700;letter-spacing:.3px;color:var(--pe-text)}
.custom-logo{max-height:48px;width:auto}
.custom-logo-link img{max-height:48px;height:48px;width:auto}
@media (min-width: 920px){
  .custom-logo-link img{max-height:54px;height:54px}
}

.pe-burger{
  margin-left:auto;
  display:inline-flex;
  width:44px;height:40px;
  border:1px solid var(--pe-border);
  border-radius:14px;
  background:rgba(255,255,255,.92);
  align-items:center;justify-content:center;
  gap:4px;
  cursor:pointer;
}
.pe-burger span{display:block;width:18px;height:2px;background:var(--pe-text);opacity:.85;border-radius:10px}
@media (min-width: 920px){
  .pe-burger{display:none}
  .pe-brand{min-width:240px}
}

.pe-header__nav{display:none}
@media (min-width: 920px){
  .pe-header__nav{display:block; margin-left:auto}
}

.pe-nav{display:flex;gap:14px;align-items:center;list-style:none;margin:0;padding:0}
.pe-nav a{
  display:inline-flex;align-items:center;
  padding:8px 10px;
  color:var(--pe-text);
  border-radius:12px;
  border:1px solid transparent;
}
.pe-nav a:hover{
  background:rgba(59,130,246,.08);
  border-color:var(--pe-border);
}

.pe-header__search{display:none}
@media (min-width: 920px){
  .pe-header__search{display:block; width:260px}
}

.pe-search{display:flex;align-items:center;gap:8px}
.pe-search__input{
  width:100%;
  background:rgba(255,255,255,.92);
  color:var(--pe-text);
  border:1px solid var(--pe-border);
  border-radius:14px;
  padding:10px 12px;
  outline:none;
}
.pe-search__input:focus{border-color:rgba(106,168,255,.55); box-shadow:0 0 0 4px rgba(106,168,255,.12)}
.pe-search__btn{
  width:42px;height:42px;
  border-radius:14px;
  border:1px solid var(--pe-border);
  background:rgba(255,255,255,.92);
  color:var(--pe-text);
  cursor:pointer;
}

.pe-mobile-nav{
  width:min(var(--pe-max), calc(100% - 32px));
  margin:0 auto 12px;
  padding:12px 0 16px;
}
.pe-nav-open .pe-mobile-nav{display:block}
.pe-mobile-nav .pe-nav{flex-direction:column; align-items:stretch}
.pe-mobile-nav .pe-nav a{justify-content:space-between}

.pe-layout{
  display:grid;
  grid-template-columns: 1fr;
  gap:16px;
}
@media (min-width: 920px){
  .pe-layout{
    grid-template-columns: 260px minmax(0, 1fr) 320px;
    align-items:start;
    gap:18px;
  }
  .pe-layout--archive{
    grid-template-columns: 300px minmax(0, 1fr);
  }
}

.pe-aside{position:relative}
.pe-aside--toc{order:1}
.pe-article{order:2}
.pe-aside--right{order:3}
@media (max-width: 919px){
  .pe-aside--toc{display:none}
  .pe-aside--right{order:3}
}

.pe-toc{
  position:sticky;
  top:88px;
  padding:16px;
  border-radius:var(--pe-radius);
  border:1px solid var(--pe-border);
  background:rgba(255,255,255,.94);
}
.pe-toc__title{font-weight:700;margin-bottom:10px;color:var(--pe-text)}
.pe-toc-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.pe-toc-list li.is-sub{padding-left:12px;opacity:.92}
.pe-toc-list a{color:var(--pe-muted);font-size:.98rem}
.pe-toc-list a.is-active{color:var(--pe-accent)}

.pe-article__meta{display:flex;gap:8px;align-items:center;color:var(--pe-muted);font-size:.95rem;margin-top:6px}
.pe-article__header{margin-bottom:10px}

/* Featured image: show directly under title on mobile */
.pe-featured-mobile{display:none}
.pe-featured-mobile .pe-featured{width:100%}

.pe-featured{border-radius:14px;display:block}
.pe-offer-card{
  margin-top:14px;
  border-radius:22px;
  padding:16px;
  border:1px solid var(--pe-border);
  background:
    radial-gradient(800px 300px at 10% 10%, rgba(59,130,246,.18), transparent 55%),
    radial-gradient(700px 280px at 90% 0%, rgba(124,58,237,.14), transparent 55%),
    rgba(255,255,255,.94);
}
.pe-offer-card__top{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:10px;
}
.pe-offer-card__text{width:100%; text-align:center}
.pe-offer-card__title{font-weight:800; letter-spacing:.2px; text-align:center}
.pe-offer-card__subtitle{color:var(--pe-muted); font-size:.98rem; text-align:center}
.pe-offer-card__button{
  display:inline-flex;align-items:center;gap:10px;
  padding:12px 14px;
  border-radius:18px;
  border:1px solid rgba(22,163,74,.22);
  background:linear-gradient(135deg, rgba(22,163,74,.95), rgba(34,197,94,.92));
  color:#ffffff;
  font-weight:700;
  white-space:normal;
  justify-content:center;
  width:100%;
  box-shadow:0 14px 30px rgba(22,163,74,.18);
}
.pe-offer-card__button:hover{transform:translateY(-1px)}
.pe-offer-card__arrow{opacity:.8}
.pe-offer-card__bottom{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:12px}
.pe-pill{
  display:inline-flex;align-items:center;
  padding:7px 10px;
  border-radius:999px;
  border:1px solid rgba(15,27,45,.10);
  background:rgba(255,255,255,.70);
  font-size:.92rem;
}
.pe-pill--muted{color:var(--pe-muted)}
.pe-offer-card__note{color:var(--pe-muted); font-size:.92rem}

.pe-offer-mobile{display:none}
@media (max-width: 919px){
  .pe-featured-mobile{display:block;margin:10px 0 6px}
  .pe-offer-mobile{display:block;margin:14px 0 10px}
  /* Avoid pushing featured image to the bottom on mobile */
  .pe-aside--right .pe-card--media{display:none}
  .pe-aside--right .pe-offer-card{display:none}
}
@media (min-width: 920px){
  /* Make the sidebar stretch with the article so sticky can work reliably */
  .pe-aside--right{align-self:stretch; overflow:visible}
  .pe-aside--right .pe-offer-card{position:sticky;top:88px}
}

.pe-content{
  font-size:1.06rem;
  overflow-wrap:anywhere;
  word-break:break-word;
}
@media (max-width: 520px){
  .pe-content{font-size:1.12rem}
}

.pe-content p{margin:0 0 14px}
.pe-content h2{margin:26px 0 10px}
.pe-content h3{margin:20px 0 8px}
.pe-content ul, .pe-content ol{margin:0 0 14px 1.2rem}
.pe-content li{margin:6px 0}
.pe-content strong{font-weight:800}
.pe-content em{opacity:.98}
.pe-content a{border-bottom:1px dashed rgba(106,168,255,.35)}
.pe-content pre, .pe-content code{white-space:pre-wrap; word-break:break-word}
.pe-content a:hover{border-bottom-color:rgba(106,168,255,.75)}

.pe-content blockquote{
  margin:18px 0;
  padding:14px 16px 14px 16px;
  border-left:4px solid rgba(59,130,246,.45);
  border-radius:14px;
  background:rgba(255,255,255,.75);
  color:var(--pe-text);
}
.pe-content blockquote p{margin:0}
.pe-content blockquote::before{
  content:"Lääketieteellinen huomio";
  display:block;
  font-weight:800;
  color:var(--pe-muted);
  font-size:.86rem;
  letter-spacing:.3px;
  margin-bottom:8px;
}

.pe-btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:12px 16px;
  border-radius:16px;
  border:1px solid rgba(106,168,255,.38);
  background:rgba(106,168,255,.16);
  color:var(--pe-text);
  font-weight:800;
}
.pe-btn:hover{transform:translateY(-1px)}

.pe-cta-btn{
  display:flex;
  width:fit-content;
  max-width:100%;
  margin:16px auto;
  align-items:center;
  justify-content:center;
  padding:12px 16px;
  border-radius:16px;
  border:1px solid rgba(22,163,74,.22);
  background:linear-gradient(135deg, rgba(22,163,74,.95), rgba(34,197,94,.92));
  color:#ffffff;
  font-weight:800;
  white-space:normal;
  text-align:center;
  box-shadow:0 14px 30px rgba(22,163,74,.18);
}
.pe-cta-btn:hover{transform:translateY(-1px); opacity:.98}

.pe-post-list{display:flex;flex-direction:column;gap:16px;margin-top:16px}
.pe-post-item{display:grid;grid-template-columns: 110px 1fr;gap:14px}
.pe-post-item__thumb img{border-radius:14px;border:1px solid var(--pe-border)}
.pe-thumb-fallback{
  display:flex;align-items:center;justify-content:center;
  width:110px;height:80px;
  border-radius:14px;
  border:1px solid var(--pe-border);
  background:rgba(255,255,255,.03);
  color:var(--pe-muted);
}
.pe-post-item__title{font-weight:800;color:var(--pe-text)}
.pe-post-item__meta{color:var(--pe-muted);font-size:.92rem;margin-top:4px}
.pe-post-item__excerpt{color:var(--pe-muted);margin-top:6px}
@media (max-width: 520px){
  .pe-post-item{grid-template-columns: 92px 1fr}
  .pe-thumb-fallback{width:92px;height:74px}
}

.pe-pagination{margin-top:18px}
.pe-pagination .page-numbers{display:inline-flex;gap:8px;align-items:center}
.pe-pagination a.page-numbers, .pe-pagination span.page-numbers{
  padding:8px 12px;border-radius:12px;border:1px solid var(--pe-border);
  background:rgba(255,255,255,.94); color:var(--pe-text)
}
.pe-pagination span.current{background:rgba(106,168,255,.18);border-color:rgba(106,168,255,.35)}

.pe-home-cats{margin-top:22px}
.pe-cat-grid{
  display:grid;gap:14px;
  grid-template-columns:1fr;
}
@media (min-width: 720px){
  .pe-cat-grid{grid-template-columns: repeat(3, 1fr)}
}
@media (min-width: 1040px){
  .pe-cat-grid{grid-template-columns: repeat(5, 1fr)}
}
.pe-cat-card{
  display:flex;flex-direction:column;gap:6px;
  padding:14px 14px 16px;
  border-radius:18px;
  border:1px solid var(--pe-border);
  background:
    radial-gradient(500px 160px at 20% 0%, rgba(106,168,255,.18), transparent 55%),
    rgba(255,255,255,.02);
  color:var(--pe-text);
}
.pe-cat-card__icon{
  width:36px;height:36px;border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.04);
  display:flex;align-items:center;justify-content:center;
  color:var(--pe-accent);
}
.pe-cat-card__title{font-weight:800}
.pe-cat-card__meta{color:var(--pe-muted);font-size:.92rem}

.pe-footer{
  border-top:1px solid var(--pe-border);
  padding:26px 0 16px;
  background:rgba(255,255,255,.94);
}
.pe-footer__inner{
  width:min(var(--pe-max), calc(100% - 32px));
  margin:0 auto;
  display:grid;
  grid-template-columns:1fr;
  gap:18px;
}
@media (min-width: 920px){
  .pe-footer__inner{
    grid-template-columns: 1.2fr 1.8fr;
    align-items:start;
  }
}
.pe-footer__brand{display:flex;gap:12px;align-items:flex-start}
.pe-footer__logo{
  width:42px;height:42px;border-radius:16px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.10);
  display:flex;align-items:center;justify-content:center;
  color:var(--pe-accent);
}
.pe-footer__logo--img{
  width:auto;
  height:auto;
  background:transparent;
  border:none;
  padding:0;
}
.pe-footer__logo--img .custom-logo-link{display:flex;align-items:center}
.pe-footer__logo--img .custom-logo-link img{height:44px;max-height:44px;width:auto}
.pe-footer__name{font-weight:900}
.pe-footer__tag{color:var(--pe-muted);font-size:.95rem}
.pe-footer__cols{display:grid;grid-template-columns:1fr;gap:16px}
@media (min-width: 720px){.pe-footer__cols{grid-template-columns:1fr 1fr}}
.pe-footer__title{font-weight:900;margin-bottom:8px}
.pe-footer__menu{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.pe-footer__menu a{color:var(--pe-muted)}
.pe-footer__menu a:hover{color:var(--pe-text)}
.pe-footer__bottom{
  width:min(var(--pe-max), calc(100% - 32px));
  margin:14px auto 0;
  padding-top:14px;
  border-top:1px solid var(--pe-border);
  color:var(--pe-muted);
  font-size:.92rem;
}

.pe-cats{position:sticky;top:88px}
.pe-cats__title{font-weight:900;margin-bottom:10px}
.pe-cats__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.pe-cats__list a{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 10px;
  border-radius:14px;
  border:1px solid transparent;
  color:var(--pe-muted);
}
.pe-cats__list li.is-active a{
  background:rgba(106,168,255,.16);
  border-color:rgba(106,168,255,.28);
  color:var(--pe-text);
}
.pe-cats__list a:hover{
  background:rgba(255,255,255,.03);
  border-color:var(--pe-border);
  color:var(--pe-text);
}
.pe-cats__arrow{opacity:.6}

.pe-product-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:14px;
  margin-top:16px;
}
@media (min-width: 720px){
  .pe-product-grid{grid-template-columns:repeat(2, 1fr)}
}
@media (min-width: 1040px){
  .pe-product-grid{grid-template-columns:repeat(3, 1fr)}
}
.pe-product-card{
  display:block;
  border-radius:18px;
  border:1px solid var(--pe-border);
  background:rgba(255,255,255,.94);
  padding:12px;
  color:var(--pe-text);
}
.pe-product-card__media{
  border-radius:14px;
  border:1px solid var(--pe-border);
  background:rgba(255,255,255,.94);
  aspect-ratio: 16 / 11;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
.pe-product-card__media img{width:100%;height:100%;object-fit:contain}
.pe-product-card__title{margin-top:10px;font-weight:900}
.pe-product-card__tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.pe-tag{
  display:inline-flex;align-items:center;
  padding:6px 9px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.04);
  color:var(--pe-muted);
  font-size:.86rem;
}

.pe-accordion{display:flex;flex-direction:column;gap:10px;margin-top:12px}
.pe-accordion__item{
  border-radius:16px;
  border:1px solid var(--pe-border);
  background:rgba(255,255,255,.94);
  overflow:hidden;
}
.pe-accordion__summary{
  list-style:none;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px 14px;
  cursor:pointer;
  font-weight:900;
}
.pe-accordion__summary::-webkit-details-marker{display:none}
.pe-accordion__icon{opacity:.7}
.pe-accordion__content{padding:0 14px 14px}

.pe-bmi{margin-top:18px}
.pe-bmi__grid{display:grid;gap:14px;grid-template-columns:1fr}
@media(min-width:920px){.pe-bmi__grid{grid-template-columns: 1.2fr .8fr}}
.pe-bmi__panel, .pe-bmi__result{
  border-radius:18px;border:1px solid var(--pe-border);
  background:rgba(255,255,255,.94);padding:16px;
}
.pe-bmi__title{font-weight:900;font-size:1.1rem}
.pe-form{display:grid;gap:10px;margin-top:10px}
.pe-form label span{display:block;color:var(--pe-muted);font-size:.92rem;margin-bottom:4px}
.pe-form input{
  width:100%;
  background:rgba(255,255,255,.92);
  color:var(--pe-text);
  border:1px solid var(--pe-border);
  border-radius:14px;
  padding:10px 12px;
  outline:none;
}
.pe-form input:focus{border-color:rgba(106,168,255,.55); box-shadow:0 0 0 4px rgba(106,168,255,.12)}
.pe-bmi__value{font-size:2.2rem;font-weight:900;margin-top:8px}
.pe-bmi__label{color:var(--pe-muted);margin-top:4px}
.pe-bmi__ranges{margin-top:14px;display:grid;gap:8px}
.pe-range{display:flex;justify-content:space-between;color:var(--pe-muted);border-bottom:1px dashed rgba(255,255,255,.08);padding-bottom:6px}

.pe-404{text-align:center}
.pe-404__icon{color:var(--pe-accent);display:flex;justify-content:center;margin-bottom:10px}
.pe-404__actions{margin-top:14px;display:flex;gap:12px;justify-content:center;align-items:center;flex-wrap:wrap}
