/* HERO */

.article-hero {
    padding: 56px 0 20px;
}

.article-title {
    font-size: 32px;
    margin: 0 0 4px;
}

.article-subtitle {
    color: #4B5563;
    margin: 0;
    max-width: 760px;
}

/* LAYOUT */

.article-layout {
    padding: 24px 0 40px;
}

.layout {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 0.8fr);
    gap: 32px;
}

/* MAIN ARTICLE */

.article-main {
    background: #fff;
    border: 1px solid #E5E7EB;
    border-radius: 18px;
    padding: 20px 22px 30px;
}

.article-main h2 {
    margin-top: 30px;
    font-size: 24px;
}

.article-main p {
    font-size: 15px;
    color: #111827;
}

.article-main ul {
    padding-left: 20px;
}

.article-main details {
    margin-bottom: 10px;
}

/* RECOMMENDATIONS */

.rec-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-top: 16px;
}

.rec-card {
    background: #ffffff;
    border: 1px solid #E5E7EB;
    border-radius: 16px;
    padding: 14px;
}

.rec-img {
    height: 120px;
    border-radius: 12px;
    margin-bottom: 10px;
    background: linear-gradient(135deg, #e5e7eb, #ffffff);
}

.img-tempur {
    background: linear-gradient(135deg, #dbeafe, #ffffff);
}

.img-askona {
    background: linear-gradient(135deg, #fde68a, #ffffff);
}

/* SIDEBAR */

.sidebar {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.toc, .side-card {
    background: #fff;
    border: 1px solid #E5E7EB;
    border-radius: 16px;
    padding: 14px 16px;
}

.toc h3 {
    margin: 0 0 8px;
    font-size: 16px;
}

.toc ul {
    padding-left: 18px;
}

.side-card h4 {
    margin: 0 0 6px;
    font-size: 15px;
    color: #111827;
}

@media (max-width: 900px) {
    .layout {
        grid-template-columns:1fr;
    }
}
/*NEW style*/
:root{
      --bg:#ffffff; --text:#111827; --muted:#6b7280; --line:#e5e7eb;
      --card:#f9fafb; --link:#2563eb; --linkHover:#1d4ed8;
      --radius:14px;
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0; background:var(--bg); color:var(--text);
      font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
      line-height:1.6;
    }
    a{color:var(--link); text-decoration:none}
    a:hover{color:var(--linkHover); text-decoration:underline}
    .container{max-width:920px; margin:0 auto; padding:16px}
    header{padding:12px 0 4px}
    .meta{color:var(--muted); font-size:.95rem}
    h1{font-size:1.65rem; line-height:1.2; margin:0 0 10px}
    h2{font-size:1.25rem; margin:28px 0 10px}
    h3{font-size:1.08rem; margin:20px 0 10px}
    p{margin:10px 0}
    .lead{font-size:1.02rem}
    .card{
      background:var(--card);
      border:1px solid var(--line);
      border-radius:var(--radius);
      padding:14px;
      margin:14px 0;
    }
    .toc{
      background:#fff;
      border:1px solid var(--line);
      border-radius:var(--radius);
      padding:14px;
      margin:16px 0 8px;
    }
    .toc ul{margin:10px 0 0; padding-left:18px}
    .toc li{margin:6px 0}
    ul{padding-left:18px}
    li{margin:6px 0}
    .badge{
      display:inline-block;
      font-size:.85rem;
      padding:2px 10px;
      border:1px solid var(--line);
      border-radius:999px;
      background:#fff;
      color:var(--muted);
      margin-right:6px;
      vertical-align:middle;
    }
    blockquote{
      margin:12px 0;
      padding:12px 14px;
      border-left:4px solid var(--line);
      background:#fff;
      border-radius:10px;
    }
    /* Tables: responsive wrapper */
    .table-wrap{
      overflow-x:auto;
      -webkit-overflow-scrolling:touch;
      border:1px solid var(--line);
      border-radius:12px;
      background:#fff;
      margin:10px 0 14px;
    }
    table{
      width:100%;
      border-collapse:collapse;
      min-width:520px;
    }
    th,td{
      padding:10px 12px;
      border-bottom:1px solid var(--line);
      text-align:left;
      vertical-align:top;
      font-size:.98rem;
    }
    th{background:#f3f4f6; font-weight:650}
    tr:last-child td{border-bottom:none}
    .note{
      font-size:.95rem;
      color:var(--muted);
      margin-top:8px;
    }
    .hr{height:1px; background:var(--line); margin:18px 0}
    .faq details{
      border:1px solid var(--line);
      border-radius:12px;
      padding:10px 12px;
      background:#fff;
      margin:10px 0;
    }
    .faq summary{cursor:pointer; font-weight:650}
    .faq summary::-webkit-details-marker{display:none}
    .faq summary:after{
      content:"▾";
      float:right;
      color:var(--muted);
    }
    .faq details[open] summary:after{content:"▴"}
    .backtop{display:inline-block; margin-top:8px; font-size:.95rem}
    /* Desktop enhancements */
    @media (min-width: 768px){
      h1{font-size:2rem}
      h2{font-size:1.45rem}
      h3{font-size:1.15rem}
      .container{padding:22px}
      .card{padding:16px}
    }
    /* Anchor offset for sticky headers (if any in your layout) */
    .anchor{scroll-margin-top:14px}