/* Breadly v8 detail pages (Top lists + Stacks). Builds on breadly-landing.css + breadly-refinement.css;
   uses the same tokens: white page, #111 ink, warm neutrals, burnt-orange #b84720 actions. */
.breadly-detail main{min-height:60vh}
.breadly-detail .nav-links a[aria-current="page"]{background:var(--tint);color:var(--ink)}
.crumbs{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:13px;color:var(--muted);padding-top:22px}
.crumbs a{color:var(--muted)}.crumbs a:hover{color:var(--ink)}
.crumbs .ico{width:14px;height:14px;color:#b9b0a8}
.crumbs [aria-current]{color:var(--ink);font-weight:550}

/* hero */
.dh{padding:28px 0 8px}
.dh-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:56px;align-items:center}
.dh h1{font-size:clamp(34px,4.2vw,54px);line-height:1.08;font-weight:600;letter-spacing:-.035em;margin-top:14px;text-wrap:balance}
.dh-sub{font-size:18px;line-height:1.6;color:#555;margin-top:14px;max-width:44ch}
.dh-meta{display:flex;align-items:center;flex-wrap:wrap;gap:10px 12px;margin-top:22px}
.dh-chip{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;border:1px solid var(--line);border-radius:999px;font-size:13px;font-weight:600;color:var(--body);background:#fff}
.dh-chip .ico{width:14px;height:14px;color:#b84720}
.dh-meta .stackic{margin-left:6px}
.dh-cta{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-top:26px}
.dh-cta .btn{height:48px;padding:0 20px}
.dh-cta .fine{margin-left:8px;font-size:12.5px;color:var(--muted);line-height:1.45}
.btn[data-save].is-saved{background:#fff;color:#b84720;border:1px solid #e3c9bc}
.btn-peach[data-save].is-saved:hover{background:#fff7f3}
.btn[data-save].is-saved .ico{fill:currentColor}
.dh-note{display:flex;align-items:center;gap:7px;margin-top:18px;font-size:13px;color:var(--muted)}
.dh-note .ico{width:14px;height:14px;color:#b84720}
.dh-cover{height:340px;border-radius:16px;align-items:flex-end;padding:18px}
.dh-cover .num{font-size:12px}

/* stack hero */
.dh-stack .dh-copy .sx-badge{background:#b84720}
.dh-icons{display:flex;gap:10px;margin-top:22px}
.dh-icons .appic{width:56px;height:56px;border-radius:14px;font-size:22px}
.breadly-home .dh-icons .appic.product-logo{padding:6px}
.dh-tools{margin-top:12px;font-size:13.5px;color:var(--muted2);font-weight:550}
.dh-panel{border:1px solid var(--line);border-radius:16px;padding:22px;background:#fafafa}
.dh-panel .sx-sum{margin-top:0;grid-template-columns:repeat(3,minmax(0,1fr))}
.dh-panel .sum{background:#fff}
.dh-panel .sum.hot{background:#b84720;grid-column:auto}
.dh-panel .sum .v{font-size:24px}
.kt-row{display:flex;align-items:center;gap:10px;margin-top:16px;font-size:13px;font-weight:550;color:var(--muted)}
.kt-row .kb{flex:1;height:6px;border-radius:9px;background:var(--track);overflow:hidden}
.kt-row .kb i{display:block;height:100%;border-radius:9px;background:linear-gradient(90deg,#e7a283,#b84720)}
.kt-row b{color:#a5481e}
.dh-panel .perk{margin-top:16px;border-color:#e8cbbd}

/* filters + ranked picks */
.picks-sec{padding-top:40px!important}
.picks-head{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-bottom:16px;border-bottom:1px solid var(--line)}
.fchips{display:flex;gap:8px;flex-wrap:wrap}
.fchips .fchip{cursor:pointer}
.fchips .fchip span{font-size:11.5px;color:var(--muted2);font-weight:600;margin-left:2px}
.fchips .fchip.on span{color:#f3d9cd}
.picks-count{font-size:13px;color:var(--muted)}
.picks{list-style:none;margin:0;padding:0}
.pick{display:grid;grid-template-columns:40px 44px minmax(0,1fr) auto;gap:18px;align-items:start;padding:22px 4px;border-bottom:1px solid var(--line)}
.pk-rank{font-size:22px;font-weight:650;letter-spacing:-.03em;color:#b84720;font-variant-numeric:tabular-nums;line-height:44px;text-align:center}
.pick .appic{margin-top:0}
.appic.letter-tile{color:#fff;font-weight:750;box-shadow:inset 0 -3px 0 rgba(30,20,10,.12),inset 0 1px 0 rgba(255,255,255,.25)}
.pk-main h3{font-size:18px;font-weight:650;letter-spacing:-.02em;line-height:1.3}
.pk-what{font-size:14.5px;color:var(--body);margin-top:3px;line-height:1.55}
.pk-why{font-size:13.5px;color:var(--muted);margin-top:6px;line-height:1.55}
.pk-why b{color:var(--ink);font-weight:600}
.pk-trac{display:flex;align-items:flex-start;gap:6px;margin-top:9px;font-size:13px;font-weight:600;color:#a5481e;line-height:1.45}
.pk-trac .ico{width:14px;height:14px;margin-top:2px}
.pk-plat{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.pk-plat span{font-size:11.5px;font-weight:600;color:var(--body);background:#f5f5f5;border-radius:6px;padding:3px 8px}
.pk-act{display:flex;flex-direction:column;align-items:flex-end;gap:10px;padding-top:0;align-self:start}
.pick-try .btn{height:40px;min-height:40px;padding:0 18px;font-size:14.5px;border-radius:999px!important;white-space:nowrap}
.pk-act .pill-earn{background:#fbeee7;color:#a5481e}
.pk-note{font-size:12px;color:var(--muted2);font-weight:550}
.breadly-home .pk-try{height:40px;min-height:40px;padding:0 14px;font-size:14px;gap:7px}
.pk-try .ico{width:14px;height:14px}
.pick[hidden]{display:none}
.picks-empty{padding:28px 0;color:var(--muted)}
.rank-note{display:flex;gap:10px;align-items:flex-start;margin-top:22px;padding:14px 16px;border-radius:12px;background:#f7f7f7;font-size:13px;color:var(--muted);line-height:1.55}
.rank-note .ico{width:16px;height:16px;color:#b84720;margin-top:2px}
.rank-note b{color:var(--ink);font-weight:600}

/* strips */
.strip-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:24px}
.breadly-home .strip-head .h2{font-size:clamp(26px,3vw,34px);margin:10px 0 0;max-width:none}
.breadly-home .strip-head .lede{margin:10px 0 0}
.strip-head .link{font-size:14px;white-space:nowrap}
.dgrid{display:grid;gap:16px}
.dgrid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.dgrid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.dgrid .sc{display:flex!important}
.breadly-home .sec.strip{padding-top:64px}
.breadly-home .car-nav button{width:40px;height:40px;border-radius:50%;background:#fff;border:1px solid var(--line);display:grid;place-items:center}
.breadly-home .car-nav button:disabled{opacity:.35;cursor:default}

/* steps */
.steps4{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;counter-reset:s}
.st{display:flex;flex-direction:column;gap:12px}
.st-num{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--muted)}
.st-num span{width:30px;height:30px;border-radius:50%;background:#b84720;color:#fff;display:grid;place-items:center;font-size:12px;font-weight:700}
.st-num b{font-size:14px;color:var(--ink);font-weight:650}
.st-card{flex:1;display:flex;flex-direction:column;border:1px solid var(--line);border-radius:16px;padding:18px;background:#fff}
.st-top{display:grid;grid-template-columns:44px minmax(0,1fr);gap:12px;align-items:center}
.st-id .role{font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--muted2)}
.st-id h3{font-size:17px;font-weight:650;letter-spacing:-.02em;line-height:1.25}
.st-id .ds{font-size:13px;color:var(--muted)}
.st-price{grid-column:1/-1;display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:10px 12px;border-radius:10px;background:#fafafa;border:1px solid var(--line)}
.st-price .p{font-size:14px;font-weight:650}
.st-price .e{font-size:12.5px;font-weight:700;color:#a5481e}
.st-price .e.no{color:var(--muted2);font-weight:550}
.st-what{font-size:14px;line-height:1.55;color:var(--body);margin-top:12px}
.st-foot{margin-top:auto;padding-top:14px;display:flex;align-items:flex-end;justify-content:space-between;gap:10px}
.st-foot .pk-plat{margin-top:0}

/* perk + rewards */
.perk-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:16px;align-items:stretch}
.perk-box,.rw-box{border-radius:16px;padding:28px}
.perk-box{border:1.5px dashed #e3b8a3;background:#fff}
.rw-box{background:#f7f7f7}
.pb-ic{width:44px;height:44px;border-radius:12px;background:#fbeee7;color:#b84720;display:grid;place-items:center;margin-bottom:14px}
.pb-ic .ico{width:22px;height:22px}
.perk-box h2,.rw-box h2{font-size:24px;font-weight:600;letter-spacing:-.025em;margin-top:8px;line-height:1.25}
.perk-box>p,.rw-lede{font-size:15px;line-height:1.65;color:#555;margin-top:10px}
.pb-list{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:10px}
.pb-list li{display:flex;gap:9px;align-items:flex-start;font-size:14px;line-height:1.5;color:var(--body)}
.pb-list .ico{width:16px;height:16px;color:#b84720;margin-top:2px}
.rw-steps{list-style:none;margin:18px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.rw-steps li{background:#fff;border-radius:12px;padding:16px;display:flex;flex-direction:column;gap:10px}
.rw-n{width:26px;height:26px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;font-size:12px;font-weight:700;color:#b84720}
.rw-steps b{font-size:15px;font-weight:650}
.rw-steps p{font-size:13px;line-height:1.55;color:var(--muted);margin-top:4px}
.rw-cash{display:flex;align-items:center;gap:8px;margin-top:16px;font-size:13.5px;font-weight:550;color:var(--body)}
.rw-cash .ico{width:16px;height:16px;color:#b84720}
.rw-fine{font-size:12.5px;color:var(--muted);line-height:1.6;margin-top:10px}
.end-cta{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:16px;padding-top:24px;padding-bottom:4px}
.end-cta>div:first-child{display:flex;flex-direction:column;gap:4px}
.end-cta b{font-size:18px;font-weight:650;letter-spacing:-.02em}
.end-cta>div:first-child span{font-size:14px;color:var(--muted)}
.end-cta .dh-cta{margin-top:0}

/* index pages */
.breadly-home .idx-sec{padding-top:36px}
.breadly-home .idx-sec h1.h2{margin-top:14px}
.list-grid-all{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px 28px}
.breadly-detail .stacks-sec{background:#fff;border:0}
.breadly-detail .sgrid .sc{display:flex!important}
.breadly-detail .sx h3 a:hover{color:#b84720}

.dtoast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);z-index:80;background:#111;color:#fff;font-size:14px;font-weight:550;padding:12px 18px;border-radius:10px;max-width:calc(100% - 32px);box-shadow:0 10px 30px rgba(0,0,0,.18)}

@media(max-width:1100px){
  .steps4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dgrid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .perk-grid{grid-template-columns:1fr}
}
@media(max-width:980px){
  .dh-grid{grid-template-columns:1fr;gap:28px}
  .dh-cover{height:220px;order:-1}
  .dgrid-3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .list-grid-all{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rw-steps{grid-template-columns:1fr}
}
@media(max-width:640px){
  .crumbs{padding-top:16px;font-size:12px}
  .dh{padding-top:16px}
  .dh h1{font-size:34px}
  .dh-sub{font-size:16px}
  .dh-cover{height:180px}
  .dh-cta .btn{flex:1 1 auto}
  .dh-cta .fine{margin-left:0;width:100%}
  .dh-panel{padding:16px}
  .dh-panel .sx-sum{grid-template-columns:1fr 1fr}
  .dh-panel .sum.hot{grid-column:1/-1}
  .dh-icons .appic{width:48px;height:48px}
  .pick{grid-template-columns:28px 44px minmax(0,1fr);gap:12px;padding:18px 0}
  .pk-rank{font-size:18px;text-align:left}
  .pk-act{grid-column:1/-1;flex-direction:row;align-items:center;justify-content:flex-start;padding-top:0}
  .pick-try .btn{width:100%}
  .picks-head{align-items:flex-start;flex-direction:column}
  .fchips{flex-wrap:nowrap;overflow-x:auto;width:100%;padding-bottom:4px;scrollbar-width:none}
  .fchips .fchip{flex:none}
  .strip-head{flex-direction:column;align-items:flex-start}
  .steps4,.dgrid-3,.dgrid-4,.list-grid-all{grid-template-columns:1fr}
  .perk-box,.rw-box{padding:20px}
  .end-cta .dh-cta{width:100%}
}
.dh-cover .art{width:100%;height:100%}
@media(max-width:640px){.pk-act .pk-try{margin-left:auto}}