/* MySupplements — article + ranking components. Loaded only on guide pages. */

.article-head{padding-block:clamp(28px,4vw,48px) 8px}
.article-head .h1{margin-top:12px}
.article-body{padding-bottom:clamp(24px,4vw,40px)}
.article-body p{font-size:17.5px;line-height:1.72;color:var(--ink-2)}
.article-body p+p{margin-top:16px}
.article-body .lead{color:var(--ink);font-weight:500}
.article-body b,.article-body strong{color:var(--ink);font-weight:700}

.breadcrumb{font-size:13px;color:var(--ink-3);display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.breadcrumb a{color:var(--ink-3)}
.breadcrumb a:hover{color:var(--teal-800)}

/* ---------- criteria ---------- */
.crits{display:grid;gap:14px;margin-top:24px}
.crit{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:22px;box-shadow:var(--shadow-sm)}
.crit-n{display:block;font-size:13px;font-weight:800;letter-spacing:.06em;color:var(--teal-700);margin-bottom:6px}
.crit h3{font-size:17.5px;margin-bottom:8px}
.crit p{font-size:15px;color:var(--ink-2);line-height:1.55}

/* ---------- ranking ---------- */
.ranks{display:grid;gap:18px;margin-top:24px}
.rank{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:22px;box-shadow:var(--shadow-sm)}
.rank-win{border:1.5px solid var(--teal-700);box-shadow:var(--shadow-lg);padding-top:30px;background:linear-gradient(180deg,var(--teal-50),var(--surface) 55%)}
.rank-best{position:absolute;top:-13px;left:22px;display:inline-flex;align-items:center;gap:6px;background:var(--teal-700);color:#fff;font-size:12.5px;font-weight:800;border-radius:999px;padding:7px 15px;box-shadow:0 8px 18px -8px rgba(14,124,123,.7)}
.rank-head{display:flex;align-items:center;gap:13px}
.rank-pos{flex:0 0 auto;width:40px;height:40px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:20px;background:var(--surface-2);border:1px solid var(--line-2);color:var(--ink-2)}
.rank-pos.gold{background:#fbf3de;border-color:#dcbb63;color:#8a6714}
.rank-pos.silver{background:#eef1f3;border-color:#b6c2c9;color:#5c6b75}
.rank-pos.bronze{background:#f7ece3;border-color:#cfa079;color:#8a5a30}
.rank-head h3{flex:1;min-width:0;font-family:var(--font-display);font-size:clamp(19px,2.6vw,25px);line-height:1.2}
.scorebox{flex:0 0 auto;display:flex;align-items:baseline;gap:1px}
.scnum{font-weight:800;font-size:28px;letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--ink)}
.rank-win .scnum{color:var(--teal-700)}
.scden{font-weight:700;font-size:14px;color:var(--ink-3)}
.scorebar{height:7px;border-radius:999px;background:var(--surface-2);border:1px solid var(--line);overflow:hidden;margin:14px 0 18px}
.scorebar span{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--teal-700),var(--teal-600));transform-origin:left center}

.rank-lead{display:flex;gap:16px;align-items:flex-start}
.rank-lead p{font-size:15.5px;color:var(--ink-2);line-height:1.55}
.rank-thumb{flex:0 0 auto;width:82px;height:82px;border-radius:var(--r-md);background:#fff;border:1px solid var(--line);padding:6px;display:flex;align-items:center;justify-content:center}
.rank-thumb img{width:100%;height:100%;object-fit:contain}

.rank-grid{display:grid;gap:22px;margin-top:18px}
.rank-media{border-radius:var(--r-md);overflow:hidden;border:1px solid var(--line);background:var(--surface-2);aspect-ratio:1;display:block}
.rank-media img{width:100%;height:100%;object-fit:cover}
.rank-body>p{font-size:16px;color:var(--ink-2);line-height:1.6}

.procon{display:grid;gap:16px;margin-top:18px}
.pc-t{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;margin-bottom:11px}
.pc-pro .pc-t{color:var(--pro)}
.pc-con .pc-t{color:var(--con)}
.ben{list-style:none;display:grid;gap:10px;margin:0;padding:0}
.ben li{display:flex;gap:10px;align-items:flex-start;font-size:15px;line-height:1.45;color:var(--ink-2)}
.ben svg{flex:0 0 auto;width:17px;height:17px;margin-top:2px}
.ck{color:var(--pro)}
.xx{color:var(--con)}

/* ---------- offer ---------- */
.offer{display:grid;gap:24px;align-items:center;background:var(--surface-2);border:1px solid var(--line-2);border-radius:var(--r-xl);padding:26px}
.offer-media{display:flex;flex-direction:column;align-items:center;gap:18px;min-width:0}
.offer-prod{position:relative;width:100%;max-width:300px}
.offer-prod img{width:100%;border-radius:var(--r-md);border:1px solid var(--line);background:#fff}
.offer-badge{position:absolute;top:-12px;right:-6px;width:78px;height:78px;border-radius:999px;background:var(--teal-700);color:#fff;font-weight:800;font-size:12.5px;line-height:1.1;text-align:center;display:flex;align-items:center;justify-content:center;padding:8px;transform:rotate(8deg);box-shadow:0 8px 18px -8px rgba(14,124,123,.7)}
.offer-gifts{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 12px}
.gift{display:flex;flex-direction:column;align-items:center;text-align:center;line-height:1.2;font-size:12.5px;color:var(--ink-2);max-width:110px}
.gift b{color:var(--teal-800);font-size:11.5px;font-weight:800;margin-bottom:3px}
.plus{color:var(--ink-3);font-weight:800}
.offer-body{min-width:0;text-align:center}
.offer-h{font-family:var(--font-display);line-height:1.12;margin-bottom:12px}
.offer-h span{display:block;font-size:clamp(24px,4vw,36px);font-weight:700}
.offer-h .l2{color:var(--teal-700)}
.offer-body>p{font-size:15.5px;color:var(--ink-2);max-width:46ch;margin:0 auto 20px}
.offer-micro{font-size:12.5px;color:var(--ink-3);margin-top:14px}

/* ---------- guarantee / verdict ---------- */
.panel{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-lg);padding:30px 26px;text-align:center}
.seal{font-family:var(--font-display);font-weight:700;font-size:54px;line-height:.95;color:var(--teal-700)}
.seal small{display:block;font-family:var(--font-sans);font-size:13px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ink);margin-top:8px}
.panel p{font-size:15.5px;color:var(--ink-2);max-width:48ch;margin:14px auto 0}

.verdict{background:linear-gradient(180deg,var(--teal-50),var(--surface));border:1.5px solid var(--teal-700);border-radius:var(--r-lg);padding:34px 26px;text-align:center;display:flex;flex-direction:column;align-items:center}
.verdict h2{font-family:var(--font-display);font-size:clamp(22px,3.4vw,30px);line-height:1.16;margin:10px 0 12px}
.verdict p{font-size:15.5px;color:var(--ink-2);max-width:52ch;margin-bottom:22px}
.reassure{display:flex;flex-wrap:wrap;gap:8px 18px;justify-content:center;margin-top:16px;font-size:13px;color:var(--ink-3)}
.reassure span{display:inline-flex;align-items:center;gap:6px}

/* ---------- reviews ---------- */
.revhead{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:20px}
.stars{color:var(--star);font-size:16px;letter-spacing:2px}
.revhead .score{font-size:14px;color:var(--ink-2)}
.revhead .score b{color:var(--ink)}
.reviews{display:grid;gap:14px}
.review{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:18px;box-shadow:var(--shadow-sm)}
.review-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}
.review-top .s{color:var(--star);font-size:13px;letter-spacing:1.5px}
.review-top .vf{font-size:11px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.04em}
.review h4{font-size:15.5px;margin-bottom:6px}
.review p{font-size:14.5px;color:var(--ink-2);line-height:1.5}
.review .who{margin-top:11px;font-size:13px;color:var(--ink-3)}

/* ---------- sticky CTA ---------- */
.sticky-cta{position:fixed;left:0;right:0;bottom:0;z-index:70;background:rgba(255,255,255,.95);backdrop-filter:blur(12px);border-top:1px solid var(--line-2);padding:10px var(--pad);padding-bottom:calc(10px + env(safe-area-inset-bottom));transform:translateY(130%);transition:transform 320ms cubic-bezier(.22,.61,.36,1);box-shadow:0 -8px 26px -18px rgba(21,32,41,.5)}
.sticky-cta.is-shown{transform:translateY(0)}
.sticky-in{max-width:var(--wrap);margin-inline:auto;display:flex;align-items:center;gap:14px}
.sticky-info{flex:1;min-width:0}
.sticky-info b{display:block;font-size:14px;line-height:1.2}
.sticky-info span{font-size:12px;color:var(--ink-3)}
.sticky-cta .btn{padding:12px 18px;font-size:15px;white-space:nowrap;box-shadow:none}
body:has(.sticky-cta){padding-bottom:74px}

@media (min-width:600px){
  .crits{grid-template-columns:repeat(2,minmax(0,1fr))}
  .procon{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px}
  .reviews{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rank-thumb{width:108px;height:108px}
}
@media (min-width:760px){
  .offer{grid-template-columns:.85fr 1fr;gap:34px;padding:32px}
  .offer-body{text-align:left}
  .offer-body>p{margin-inline:0}
}
@media (min-width:880px){
  .rank-win .rank-grid{grid-template-columns:.75fr 1fr;align-items:start}
}