/* ==========================================================================
   Single Buying Guide — template-specific styles (mockup 06).
   Global components (comp table, aff-block, award, pros/cons, faq, byline,
   breadcrumb, disclosure) live in main.css — only guide-specific CSS here.
   ========================================================================== */

.guide-main{padding-bottom:56px;}
.guide-wrap{max-width:920px;}
.guide-main .breadcrumb{padding:16px 0;}
.guide-main h2{font-size:25px; margin-bottom:14px;}
.guide-main p{margin-bottom:12px; font-size:15.5px;}

/* ----- Hero / methodology ----- */
.guide-head h1{font-size:33px; margin:10px 0 12px;}
.guide-head .lead{font-size:16px; color:var(--bark-soft); margin-bottom:14px;}
.guide-head .meta-line{font-size:12.5px; color:var(--bark-soft); display:flex; gap:16px; margin-bottom:20px; flex-wrap:wrap;}
.how-tested{background:var(--forest-light); border-radius:var(--r-md); padding:16px 20px; font-size:14px; margin-bottom:6px;}
.how-tested strong{color:var(--forest-deep);}
.how-tested p{font-size:14px; display:inline; margin:0;}
.how-tested p + p{display:block; margin-top:8px;}
.guide-head .byline{padding:10px 0 4px;}

/* ----- Disclosure placement (component itself is global) ----- */
.guide-main .disclosure-banner{max-width:none;}
.guide-disclosure-top{margin:14px 0 32px;}

/* ----- Quick Picks award bar ----- */
.picks-bar{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:40px;}
.pick-card{background:var(--paper); border-radius:var(--r-md); padding:16px; text-align:center; box-shadow:var(--shadow-soft); transition:transform .15s ease, box-shadow .15s ease;}
.pick-card:hover{transform:translateY(-3px); box-shadow:var(--shadow-hover);}
.pick-card .award-icon{width:34px; height:34px; margin:0 auto 8px; background:var(--forest-deep); border-radius:50%; display:flex; align-items:center; justify-content:center;}
.pick-card .award-icon svg{width:16px; height:16px; stroke:var(--white);}
.pick-card .award-label{font-size:10.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--gold-deep); font-weight:800; margin-bottom:4px;}
.pick-card .pname{font-size:13px; font-weight:700; color:var(--forest-deep); margin-bottom:4px;}
.pick-card .pprice{font-size:12.5px; color:var(--bark-soft);}

/* "Price last checked" companion line (rule: never a price without it) */
.pchecked{display:block; font-size:10.5px; color:var(--bark-soft); font-weight:400;}

/* ----- At a Glance table (base table styles are global) ----- */
.guide-main .comp-wrap{margin-bottom:48px;}
.guide-main table.comp td .btn-sm{white-space:nowrap;}
.guide-main .screen-reader-text{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(1px,1px,1px,1px); word-wrap:normal;}

/* ----- Full Reviews ----- */
.review-anchor{scroll-margin-top:90px; margin-bottom:30px;}
.review-anchor .award{margin-bottom:12px;}
.review-anchor .aff-block{margin-bottom:0;}
.rev-verdict{background:var(--paper); border:1px solid var(--border); border-top:none; border-radius:0 0 var(--r-md) var(--r-md); border-left:3px solid var(--gold); padding:14px 18px; font-size:14.5px; color:var(--bark); margin:0 12px;}

/* ----- Buying Advice (native editor body) ----- */
.advice-block{margin:8px 0 8px;}
.advice-block h2{margin-top:20px;}
.advice-block h3{font-size:17px; margin:20px 0 8px;}
.advice-block p{font-size:14.5px;}
.advice-block ul, .advice-block ol{margin:0 0 12px 20px; font-size:14.5px;}
.advice-block ul{list-style:disc;}

/* ----- FAQ / Related / bottom ----- */
.guide-faq{margin-top:40px;}
.related-guides{margin-top:48px;}
.guide-bottom{margin-top:44px; display:flex; flex-direction:column; gap:14px;}

/* ----- Responsive ----- */
@media(max-width:760px){
  .picks-bar{grid-template-columns:1fr 1fr;}
  .guide-head h1{font-size:28px;}
}
@media(max-width:420px){
  .picks-bar{grid-template-columns:1fr;}
}