/* ---------------------------------------------------------------
   review.css — add-on for bluetti-review.html and product pages.
   Loaded AFTER style.css. Adds only what style.css doesn't have.
   Same tokens: --ink --muted --lime --line --pale
   --------------------------------------------------------------- */

/* "Read the full review" link inside a .product card. Sits between
   .specs and .retailer without disturbing the card's flex layout. */
.readmore{
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:13px;
  font-weight:700;
  color:#4d6b12;
  margin-top:16px;
}
.readmore span{font-size:15px}
.readmore:hover{color:#668a17;text-decoration:underline;text-underline-offset:3px}

/* Model name links inside comparison tables. */
.model-link{text-decoration:underline;text-underline-offset:4px}
.model-link:hover{color:#668a17}

/* ---------------------------------------------------------------
   PRODUCT PAGE COMPONENTS
   --------------------------------------------------------------- */

/* Breadcrumb above the product hero. */
.crumb{
  font-size:12px;
  color:var(--muted);
  padding:22px 0 0;
  display:flex;
  gap:9px;
  flex-wrap:wrap;
}
.crumb a{text-decoration:underline;text-underline-offset:3px}
.crumb a:hover{color:#668a17}
.crumb span{color:#9aa8a2}

/* Four-to-six spec tiles across. Wider sibling of style.css .specs,
   which is locked to two columns. */
.keyspecs{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(130px,1fr));
  background:var(--pale);
  border-radius:6px;
  padding:17px;
  margin:30px 0 0;
}
.keyspecs>div{padding:0 16px}
.keyspecs>div+div{border-left:1px solid var(--line)}
.keyspecs strong{font:700 24px 'Manrope',sans-serif;letter-spacing:-.8px}
.keyspecs small{font-size:12px;font-weight:500}
.keyspecs span{display:block;font-size:11px;color:var(--muted);margin-top:5px}

/* Pros and cons, two columns. */
.verdict{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:30px}
.verdict>div{border:1px solid var(--line);border-radius:10px;padding:24px}
.verdict h3{
  font:700 11px 'Manrope',sans-serif;
  letter-spacing:1.4px;
  text-transform:uppercase;
  margin:0 0 14px;
}
.verdict .good h3{color:#5c7a15}
.verdict .bad h3{color:#8a5326}
.verdict ul{margin:0;padding-left:18px;color:var(--muted);font-size:14px;line-height:1.7}
.verdict li+li{margin-top:8px}

/* Long-form body copy on a product page. */
.prose{max-width:720px}
.prose p{color:var(--muted);line-height:1.8;margin:0 0 18px}
.prose p strong{color:var(--ink)}
.prose h3{margin:34px 0 12px}

/* The buy box that closes a product page. */
.buybox{
  border:1px solid var(--line);
  border-radius:10px;
  padding:30px;
  margin-top:36px;
  display:flex;
  flex-wrap:wrap;
  gap:24px;
  align-items:center;
  justify-content:space-between;
}
.buybox div{flex:1;min-width:260px}
.buybox h3{margin:0 0 8px}
.buybox p{color:var(--muted);font-size:14px;margin:0;max-width:440px}
.buybox .retailer{margin-top:0;min-width:210px}

/* Related-model strip. */
.related{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.related a{
  border:1px solid var(--line);
  border-radius:6px;
  padding:11px 16px;
  font-size:14px;
  font-weight:600;
}
.related a:hover{background:var(--pale);border-color:#b8c5ba}

@media(max-width:760px){
  .verdict{grid-template-columns:1fr}
  .keyspecs>div{padding:10px 16px}
  .keyspecs>div+div{border-left:0;border-top:1px solid var(--line)}
  .buybox{padding:24px}
}

/* ---------------------------------------------------------------
   FAQ — light accordion. style.css only styles the dark
   .guide-list variant, which needs the ink background behind it.
   --------------------------------------------------------------- */
.faq{max-width:860px}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  list-style:none;
  display:flex;
  gap:17px;
  align-items:center;
  cursor:pointer;
  padding:21px 0;
  font-size:17px;
  font-weight:600;
}
.faq summary span{font-size:12px;color:var(--muted);font-weight:500}
.faq summary b{margin-left:auto;font-size:22px;font-weight:400;color:#7b982d}
.faq details[open] summary b{transform:rotate(45deg)}
.faq p{font-size:15px;color:var(--muted);margin:0 0 22px 33px;line-height:1.8}
.faq p+p{margin-top:-8px}

/* Scenario / reference tables that shouldn't force nowrap. */
.table-wrap table{white-space:normal}
.table-wrap td:last-child{text-align:left}
.table-wrap th[scope="row"]{white-space:nowrap}

/* Intro paragraph under a .section-head. */
.section-intro{max-width:760px;color:var(--muted);line-height:1.8;margin:0 0 6px}

/* ---------------------------------------------------------------
   CONVERSION COMPONENTS
   --------------------------------------------------------------- */

/* Full-width CTA band. Used above the fold and after the verdict. */
.cta-band{
  background:var(--pale);
  border:1px solid var(--line);
  border-radius:10px;
  padding:26px 30px;
  margin:30px 0 0;
  display:flex;
  flex-wrap:wrap;
  gap:20px;
  align-items:center;
  justify-content:space-between;
}
.cta-band.dark{background:var(--ink);border-color:var(--ink);color:#fff}
.cta-band p{margin:0;font-size:15px;color:var(--muted);max-width:520px;line-height:1.7}
.cta-band.dark p{color:#c4d1cd}
.cta-band strong{display:block;font:700 19px 'Manrope',sans-serif;letter-spacing:-.7px;color:var(--ink);margin-bottom:5px}
.cta-band.dark strong{color:#fff}
.cta-band .button{white-space:nowrap}

/* Inline affiliate link inside body copy. */
.inline-buy{
  font-weight:700;
  color:#4d6b12;
  text-decoration:underline;
  text-underline-offset:3px;
}
.inline-buy:hover{color:#668a17}

/* Sticky purchase bar. Hidden until the reader scrolls past the intro. */
.buy-sticky{
  position:fixed;
  left:0;right:0;bottom:0;
  z-index:40;
  background:#fff;
  border-top:1px solid var(--line);
  box-shadow:0 -6px 22px rgba(19,43,41,.09);
  padding:12px 20px;
  display:flex;
  align-items:center;
  gap:16px;
  justify-content:space-between;
  transform:translateY(110%);
  transition:transform .25s ease;
}
.buy-sticky.is-visible{transform:translateY(0)}
.buy-sticky-info{min-width:0}
.buy-sticky-info strong{
  display:block;
  font:700 15px 'Manrope',sans-serif;
  letter-spacing:-.5px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.buy-sticky-info span{font-size:12px;color:var(--muted)}
.buy-sticky .button{padding:12px 18px;font-size:13px;white-space:nowrap}

@media(max-width:760px){
  .cta-band{padding:22px;flex-direction:column;align-items:stretch}
  .cta-band .button{justify-content:center}
  .buy-sticky{padding:10px 14px;gap:10px}
  .buy-sticky-info span{display:none}
  /* Stop the bar covering the footer's last line. */
  body{padding-bottom:74px}
}
@media(prefers-reduced-motion:reduce){
  .buy-sticky{transition:none}
}

/* ===============================================================
   VISUAL LAYER — adds structure and data-viz to review pages.
   Stays inside the site's tokens and typefaces (Manrope / DM Sans).
   =============================================================== */

/* --- Sticky contents rail ------------------------------------- */
.article-grid{display:grid;grid-template-columns:186px minmax(0,1fr);gap:64px;align-items:start}
.contents{position:sticky;top:26px;align-self:start}
.contents .eyebrow{margin-bottom:14px}
.contents a{
  display:block;font-size:13.5px;font-weight:600;
  border-bottom:1px solid var(--line);padding:11px 0;
  color:var(--muted);transition:color .15s;
}
.contents a:hover,.contents a.is-active{color:var(--ink)}
.contents a.is-active{border-bottom-color:#9db964}

/* --- Hero spec panel (replaces a product photo) ---------------- */
.spec-panel{
  background:linear-gradient(160deg,#f5f8f2 0%,#eaf1e4 100%);
  border:1px solid var(--line);border-radius:16px;
  padding:34px;position:relative;overflow:hidden;
}
.spec-panel::after{
  content:"";position:absolute;right:-70px;top:-70px;
  width:230px;height:230px;border-radius:50%;
  background:radial-gradient(circle,rgba(213,252,85,.42),transparent 68%);
}
.spec-headline{position:relative;z-index:1}
.spec-headline b{
  display:block;font:700 66px/1 'Manrope',sans-serif;
  letter-spacing:-3.4px;
}
.spec-headline b i{font-style:normal;font-size:24px;letter-spacing:-.6px;margin-left:5px}
.spec-headline span{display:block;font-size:12px;letter-spacing:1.5px;font-weight:700;color:#5c7a15;margin-top:8px}
.spec-rows{position:relative;z-index:1;margin-top:26px;border-top:1px solid #cfdcc6}
.spec-rows div{display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-bottom:1px solid #cfdcc6;font-size:14px}
.spec-rows dt,.spec-rows span:first-child{color:var(--muted)}
.spec-rows strong{font-weight:700}

/* --- Capacity position bar ------------------------------------ */
.range-bar{margin-top:26px;position:relative;z-index:1}
.range-bar-track{height:9px;border-radius:5px;background:#d3e0c8;position:relative}
.range-bar-fill{height:9px;border-radius:5px;background:linear-gradient(90deg,#8fae4e,#5c7a15)}
.range-bar-marks{display:flex;justify-content:space-between;font-size:11px;color:var(--muted);margin-top:8px}

/* --- Horizontal runtime bars (replaces a plain table) --------- */
.bars{border:1px solid var(--line);border-radius:14px;padding:28px 30px;margin-top:28px}
.bars-row{display:grid;grid-template-columns:184px minmax(0,1fr) 74px;gap:20px;align-items:center;padding:10px 0}
.bars-row+.bars-row{border-top:1px solid #edf1ec}
.bars-label{font-size:14px;font-weight:600}
.bars-label small{display:block;font-weight:400;color:var(--muted);font-size:12px;margin-top:1px}
.bars-track{height:15px;background:var(--pale);border-radius:4px;overflow:hidden}
.bars-fill{height:15px;border-radius:4px;background:linear-gradient(90deg,#9cbb5c,#5c7a15)}
.bars-fill.warn{background:linear-gradient(90deg,#e0b070,#b1762c)}
.bars-val{text-align:right;font:700 15px 'Manrope',sans-serif;letter-spacing:-.5px}

/* --- Richer tables: dark head, zebra rows --------------------- */
.rich-table table{white-space:normal}
.rich-table thead th{
  background:var(--ink);color:#fff;
  font:700 11.5px 'Manrope',sans-serif;letter-spacing:1.1px;text-transform:uppercase;
  border-bottom:0;
}
.rich-table tbody tr:nth-child(even){background:var(--pale)}
.rich-table tbody th{font-weight:700;white-space:nowrap}
.rich-table td strong{color:#4d6b12}

/* --- Numbered section headers --------------------------------- */
.numbered{display:flex;align-items:center;gap:20px;margin-bottom:6px}
.numbered .num{
  font:500 21px 'Manrope',sans-serif;color:#81988b;
  border:1px solid var(--line);border-radius:10px;padding:8px 15px;flex:none;
}

/* --- Callout for warnings / corrections ----------------------- */
.callout{
  border-left:3px solid #b27c24;background:#fff7e6;
  padding:18px 22px;border-radius:0 8px 8px 0;margin-top:24px;
}
.callout.fix{border-left-color:#5c7a15;background:#f4f9ea}
.callout p{margin:0;font-size:14.5px;line-height:1.75;color:#4a5551}
.callout strong{color:var(--ink)}

@media(max-width:900px){
  .article-grid{grid-template-columns:1fr;gap:0}
  .contents{position:static;display:flex;flex-wrap:wrap;gap:10px;margin-bottom:26px}
  .contents .eyebrow{width:100%;margin:0}
  .contents a{border:1px solid var(--line);border-radius:20px;padding:6px 13px;font-size:12px}
  .spec-panel{padding:24px}
  .spec-headline b{font-size:52px;letter-spacing:-2.4px}
  .bars-row{grid-template-columns:118px minmax(0,1fr) 58px;gap:11px}
  .bars{padding:18px}
  .bars-val{font-size:13px}
}

/* Hero: prose beside the spec panel. */
.lede-grid{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(300px,.92fr);gap:56px;align-items:start;margin-top:26px}
@media(max-width:900px){.lede-grid{grid-template-columns:1fr;gap:30px}}

/* Article column inside .article-grid */
.article-body{min-width:0}
.article-body .section{padding:46px 0;border-bottom:1px solid var(--line)}
.article-body .section:first-child{padding-top:8px}
.article-body p,.article-body .section-intro{max-width:none}

/* ===============================================================
   BLOG
   =============================================================== */
.posts{display:grid;grid-template-columns:repeat(auto-fit,minmax(296px,1fr));gap:22px;margin-top:34px}
.post-card{
  border:1px solid var(--line);border-radius:14px;padding:28px;
  display:flex;flex-direction:column;transition:border-color .15s,transform .15s;
}
.post-card:hover{border-color:#b8c5ba;transform:translateY(-2px)}
.post-card .eyebrow{margin-bottom:14px}
.post-card h3{font-size:22px;letter-spacing:-1px;margin:0 0 11px;line-height:1.25}
.post-card p{font-size:14.5px;color:var(--muted);margin:0 0 20px;flex:1}
.post-meta{display:flex;justify-content:space-between;align-items:center;gap:14px;font-size:12px;color:var(--muted);border-top:1px solid var(--line);padding-top:15px}
.post-meta b{font-weight:700;color:#4d6b12;font-size:13px}

/* Article layout for a post */
.post-hero{max-width:820px}
.post-hero h1{font-size:clamp(36px,4.4vw,60px)}
.post-byline{display:flex;flex-wrap:wrap;gap:8px 22px;font-size:13px;color:var(--muted);margin-top:24px;padding-top:20px;border-top:1px solid var(--line)}
.post-byline strong{color:var(--ink);font-weight:600}
.post-body{max-width:820px}
.post-body h2{font-size:clamp(25px,2.6vw,33px);margin:46px 0 16px}
.post-body h3{font-size:20px;margin:34px 0 10px;letter-spacing:-.6px}
.post-body p{color:var(--muted);line-height:1.85;margin:0 0 18px}
.post-body p strong,.post-body li strong{color:var(--ink)}
.post-body ul,.post-body ol{color:var(--muted);line-height:1.85;padding-left:22px;margin:0 0 20px}
.post-body li{margin-bottom:9px}
.post-body .lead{font-size:18.5px;color:var(--ink);line-height:1.7}
.pullquote{
  border-left:3px solid var(--lime);padding:6px 0 6px 26px;margin:32px 0;
  font:600 21px/1.5 'Manrope',sans-serif;letter-spacing:-.6px;color:var(--ink);
}
.post-cta{
  background:var(--ink);color:#fff;border-radius:14px;padding:34px;
  display:flex;flex-wrap:wrap;gap:24px;align-items:center;justify-content:space-between;margin:44px 0;
}
.post-cta h3{margin:0 0 7px;font-size:22px;color:#fff}
.post-cta p{margin:0;color:#c4d1cd;font-size:14.5px;max-width:460px}
@media(max-width:760px){
  .post-cta{padding:26px}
  .pullquote{font-size:18px;padding-left:18px}
}