/*
Theme Name: ToolBuyerHub
Theme URI: https://toolbuyerhub.com
Description: Memphis Pop buying-guide theme for ToolBuyerHub - DIY & home improvement tools.
Author: ToolBuyerHub
Version: 1.0.0
*/
/* ToolBuyerHub - Memphis Pop design system (shared across all pages) */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Outfit:wght@500;600;700;800;900&display=swap');
:root{
  --cream:#fff5e9; --paper:#ffffff; --ink:#231f20; --sub:#5b5550; --soft:#8a847e;
  --orange:#ff5c00; --yellow:#ffd23f; --cyan:#06b6d4; --purple:#7c3aed; --green:#16a34a; --pink:#db2777; --blue:#2563eb;
  --line:#e7ddcd; --shadow:5px 5px 0 var(--ink); --shadow-sm:3px 3px 0 var(--ink); --r:18px;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Inter',sans-serif;background:var(--cream);color:var(--ink);line-height:1.6;-webkit-font-smoothing:antialiased}
a{text-decoration:none;color:inherit}
img{max-width:100%}
.wrap{max-width:1140px;margin:0 auto;padding:0 24px}
.narrow{max-width:820px}
h1,h2,h3,h4{font-family:'Outfit',sans-serif;line-height:1.1;letter-spacing:-.5px}

/* ---- header ---- */
.disc-bar{background:var(--ink);color:var(--yellow);font-size:12.5px;font-weight:600;padding:6px 14px;letter-spacing:.2px}
.disc-in{max-width:1300px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:12px}
.disc-in>span{opacity:.92}
.gpref{display:inline-flex;align-items:center;gap:7px;background:#fff;color:var(--ink);border:2px solid #000;border-radius:8px;padding:5px 11px;font-size:12px;font-weight:700;white-space:nowrap;line-height:1;text-decoration:none}
.gpref:hover{background:var(--yellow)}
.gpref svg{flex-shrink:0}
@media(max-width:760px){.disc-in{justify-content:center}.disc-in>span{display:none}}
.head{position:sticky;top:0;z-index:30;background:var(--cream);border-bottom:3px solid var(--ink)}
.head .in{display:flex;align-items:center;justify-content:space-between;padding:14px 24px;max-width:1140px;margin:0 auto}
.logo{font-family:'Outfit';font-weight:900;font-size:23px;letter-spacing:-1px}
.logo b{color:var(--orange)}
.nav{display:flex;gap:2px;font-size:13.5px;font-weight:600;flex-wrap:nowrap;align-items:center}
.nav a{padding:4px 2px;border-bottom:2px solid transparent}
.nav a:hover,.nav a.on{color:var(--orange);border-color:var(--orange)}
.head .cta-mini{background:var(--ink);color:var(--yellow);font-weight:700;font-size:13px;padding:9px 16px;border-radius:10px;white-space:nowrap}
.burger{display:none}
/* mega menu */
.nav{gap:2px}
.navitem{position:relative}
.navitem>a{display:block;padding:10px 10px;border-bottom:2px solid transparent;white-space:nowrap}
.navitem:hover>a{color:var(--orange)}
.navitem.has>a:after{content:"\25BE";font-size:9px;margin-left:4px;opacity:.5}
.mega{position:absolute;top:100%;left:0;background:var(--paper);border:3px solid var(--ink);border-radius:14px;box-shadow:var(--shadow);padding:12px;min-width:230px;display:none;z-index:50}
.navitem:hover .mega{display:block}
.mega .mh{font-size:10.5px;text-transform:uppercase;letter-spacing:.5px;color:var(--soft);font-weight:800;padding:2px 8px 6px}
.mega a{display:block;padding:7px 9px;font-size:13px;font-weight:500;border-radius:8px;border:0}
.mega a:hover{background:var(--yellow);color:var(--ink)}
.mega .allcat{margin-top:6px;border-top:2px solid var(--line);padding-top:6px;font-weight:800;color:var(--orange)}
/* simple top nav (Amazon-style top + side) */
.topnav{display:flex;gap:3px;flex-wrap:nowrap;align-items:center;font-size:12.5px;font-weight:600}
.topnav a{padding:7px 9px;border-radius:8px;white-space:nowrap}
.topnav a:hover{background:var(--yellow)}
/* left sidebar shell (compact) */
.shell{display:grid;grid-template-columns:200px 1fr;max-width:1300px;margin:0 auto;align-items:start}
.rail{border-right:3px solid var(--ink);padding:16px 11px;position:sticky;top:60px;height:calc(100vh - 60px);overflow:auto;background:var(--cream)}
.rail h5{font-family:'Outfit';font-weight:800;font-size:10px;text-transform:uppercase;letter-spacing:1px;color:var(--soft);padding:0 7px 7px}
.rail a{display:flex;align-items:center;gap:9px;font-size:12.5px;font-weight:600;padding:7px 9px;border-radius:9px;border:2px solid transparent;margin-bottom:1px}
.rail a:hover{background:var(--paper);border-color:var(--ink)}
.rail a i{width:10px;height:10px;border-radius:3px;flex-shrink:0}
.rail .rail-cta{display:block;text-align:center;margin-top:8px;background:var(--ink);color:var(--yellow);font-family:'Outfit';font-weight:800;font-size:12px;padding:10px;border-radius:10px;border:0}
.rail .rail-cta:hover{background:var(--orange);color:#fff;border:0}
.main{padding:22px 28px;min-width:0}
.main > .wrap{max-width:none;padding:0;margin:0}
.main > .wrap.narrow{max-width:820px;margin:0 auto}
.main .hero{padding:30px 0 22px}.main .hero h1{font-size:38px}
.main .sec{padding:30px 0}.main .sec-h h2{font-size:27px}
/* rich footer */
.foot .cols{grid-template-columns:1.3fr 1fr 1fr 1fr}
@media(max-width:980px){
 .shell{grid-template-columns:1fr} .rail{display:none} .main{padding:18px}
 .topnav{display:none} .foot .cols{grid-template-columns:1fr 1fr}
}

/* ---- decorative memphis shapes ---- */
.shape{position:absolute;z-index:0;pointer-events:none}
.s-dot{width:84px;height:84px;border-radius:50%;background:var(--yellow)}
.s-ring{width:70px;height:70px;border-radius:50%;border:9px solid var(--cyan);background:transparent}
.s-tri{width:0;height:0;border-left:28px solid transparent;border-right:28px solid transparent;border-bottom:48px solid var(--orange)}
.s-sq{width:54px;height:54px;background:var(--purple);transform:rotate(18deg);border-radius:8px}
.zig{display:block;height:12px;width:100%;background:repeating-linear-gradient(135deg,var(--ink) 0 8px,transparent 8px 16px);opacity:.12}

/* ---- buttons / pills / stickers ---- */
.btn{display:inline-block;font-family:'Outfit';font-weight:800;font-size:15px;padding:14px 26px;border-radius:14px;background:var(--orange);color:#fff;box-shadow:var(--shadow);border:2.5px solid var(--ink);transition:.1s}
.btn:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--ink)}
.btn.alt{background:var(--cyan)} .btn.dark{background:var(--ink);color:var(--yellow)} .btn.ghost{background:var(--paper);color:var(--ink)}
.btn.sm{font-size:13px;padding:9px 16px;border-radius:10px;box-shadow:var(--shadow-sm)}
.pill{display:inline-block;background:var(--ink);color:var(--yellow);font-weight:700;font-size:12px;letter-spacing:.5px;padding:6px 13px;border-radius:30px}
.pill.c{background:var(--cyan);color:#fff}.pill.o{background:var(--orange);color:#fff}.pill.g{background:var(--green);color:#fff}.pill.p{background:var(--purple);color:#fff}
.kick{display:inline-block;background:var(--ink);color:var(--yellow);font-family:'Outfit';font-weight:700;font-size:12px;letter-spacing:1px;padding:6px 14px;border-radius:30px;margin-bottom:16px}
.sticker{position:absolute;background:var(--orange);color:#fff;border:3px solid var(--ink);font-family:'Outfit';font-weight:800;font-size:13px;text-align:center;padding:10px 14px;border-radius:12px;box-shadow:var(--shadow);transform:rotate(7deg)}

/* ---- cards ---- */
.card{background:var(--paper);border:3px solid var(--ink);border-radius:var(--r);padding:20px}
.card.pop{box-shadow:var(--shadow)}
.crumb{font-size:13px;color:var(--soft);font-weight:600;padding:18px 0 0}
.crumb a:hover{color:var(--orange)} .crumb span{color:var(--ink)}

/* ---- hero ---- */
.hero{position:relative;padding:56px 0 34px;overflow:hidden}
.hero h1{font-weight:900;font-size:60px;letter-spacing:-2px;max-width:880px;position:relative;z-index:2}
.hero h1 em{font-style:normal;color:var(--orange);position:relative}
.hero h1 em:after{content:"";position:absolute;left:-2px;right:-2px;bottom:5px;height:12px;background:var(--yellow);z-index:-1}
.hero .sub{font-size:19px;color:var(--sub);max-width:580px;margin:20px 0 26px;position:relative;z-index:2}
.hero .btns{display:flex;gap:14px;flex-wrap:wrap;position:relative;z-index:2}

/* ---- section headers ---- */
.sec{padding:40px 0;position:relative}
.sec-h{margin-bottom:22px}
.sec-h h2{font-weight:900;font-size:32px}
.sec-h p{color:var(--sub);margin-top:6px;font-size:15px}
.ey{font-family:'Outfit';font-weight:800;font-size:13px;letter-spacing:1px;text-transform:uppercase;color:var(--orange)}

/* ---- category grid ---- */
.catgrid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.catcard{background:var(--paper);border:3px solid var(--ink);border-radius:18px;padding:16px;text-align:center;border-bottom-width:7px;transition:.1s}
.catcard .e{font-size:30px}
.catcard h3{font-weight:800;font-size:15px;margin:6px 0 3px}
.catcard p{font-size:11.5px;color:var(--soft)}
.catcard:hover{transform:translateY(-4px);border-bottom-width:11px}

/* ---- buyer paths (from A3) ---- */
.paths{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.path{background:var(--paper);border:3px solid var(--ink);border-radius:18px;padding:18px;border-top-width:7px}
.path h4{font-weight:800;font-size:17px;margin-bottom:8px}
.path a{display:block;font-size:13.5px;color:var(--sub);padding:5px 0;font-weight:500}
.path a:hover{color:var(--orange)}

/* ---- comparison / quick-pick table ---- */
.tablewrap{background:var(--paper);border:3px solid var(--ink);border-radius:18px;overflow:hidden;box-shadow:var(--shadow)}
.tablewrap .t-h{background:var(--purple);color:#fff;font-family:'Outfit';font-weight:800;font-size:19px;padding:14px 18px;border-bottom:3px solid var(--ink)}
table.cmp{width:100%;border-collapse:collapse}
table.cmp th{font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--soft);text-align:left;padding:11px 14px;border-bottom:2px solid var(--ink);background:var(--cream)}
table.cmp td{padding:13px 14px;font-size:13.5px;border-bottom:1px solid var(--line)}
table.cmp tr.win{background:#fff7ec}
table.cmp tr.win td:first-child{box-shadow:inset 4px 0 0 var(--orange)}
.rt{display:inline-flex;align-items:center;gap:3px;font-weight:700}
table.cmp .go{background:var(--green);color:#fff;font-family:'Outfit';font-weight:800;font-size:11px;padding:6px 11px;border-radius:8px;border:2px solid var(--ink)}

/* ---- product pick card (money page) ---- */
.pick{background:var(--paper);border:3px solid var(--ink);border-radius:var(--r);padding:22px;margin-bottom:18px;position:relative;box-shadow:var(--shadow)}
.pick .rank{position:absolute;top:-14px;left:18px;background:var(--ink);color:var(--yellow);font-family:'Outfit';font-weight:800;font-size:13px;padding:5px 12px;border-radius:30px}
.pick .ph{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap;margin-bottom:8px}
.pick h3{font-size:23px;font-weight:800}
.pick .badge{background:var(--orange);color:#fff;font-family:'Outfit';font-weight:800;font-size:12px;padding:5px 11px;border-radius:8px;border:2px solid var(--ink);white-space:nowrap}
.pick .stars{display:flex;align-items:center;gap:3px;font-weight:700;font-size:14px;margin-bottom:12px}
.specrow{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:14px 0}
.specrow .d{background:var(--cream);border:2px solid var(--ink);border-radius:11px;padding:9px 11px}
.specrow .d span{display:block;font-size:10.5px;text-transform:uppercase;letter-spacing:.5px;color:var(--soft);font-weight:700}
.specrow .d b{font-size:14px}
.pc{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:14px 0}
.pc .col{border:2px solid var(--ink);border-radius:12px;padding:12px 14px}
.pc .pros{background:#eafaf0}.pc .cons{background:#fdeeee}
.pc h5{font-family:'Outfit';font-size:14px;margin-bottom:6px}
.pc ul{list-style:none;font-size:13px}.pc li{padding:3px 0 3px 18px;position:relative}
.pc .pros li:before{content:"\2713";position:absolute;left:0;color:var(--green);font-weight:800}
.pc .cons li:before{content:"\2715";position:absolute;left:0;color:var(--pink);font-weight:800}
.pick .body p{color:var(--sub);font-size:14.5px;margin:8px 0}
.expert{background:var(--cream);border:2px dashed var(--ink);border-radius:12px;padding:12px 14px;margin:12px 0;font-size:14px}
.expert b{font-family:'Outfit';color:var(--orange)}
/* centered CTA inside product pick cards */
.pick > a.btn{display:block;width:max-content;max-width:100%;margin:14px auto 2px;text-align:center}

/* ---- Quick Pick featured card (top of money pages) ---- */
.quickpick{background:var(--yellow);border:3px solid var(--ink);border-radius:var(--r);box-shadow:var(--shadow);padding:24px;margin:20px 0;position:relative}
.quickpick .qp-tag{position:absolute;top:-15px;left:22px;background:var(--orange);color:#fff;border:2.5px solid var(--ink);font-family:'Outfit';font-weight:800;font-size:12px;letter-spacing:.5px;padding:6px 14px;border-radius:30px}
.qp-grid{display:grid;grid-template-columns:210px 1fr;gap:24px;align-items:center}
.qp-img{background:var(--paper);border:3px solid var(--ink);border-radius:14px;height:180px;display:flex;align-items:center;justify-content:center;font-size:70px;overflow:hidden}
.qp-img img{max-width:100%;max-height:164px;object-fit:contain}
.pick-thumb{float:right;width:120px;height:120px;object-fit:contain;margin:2px 0 10px 16px;background:#fff;border:2px solid var(--ink);border-radius:10px;padding:6px}
@media(max-width:600px){.pick-thumb{width:86px;height:86px}}
.qp-info h3{font-size:28px;font-weight:900;margin-bottom:4px}
.qp-info .stars{display:flex;align-items:center;gap:4px;font-weight:700;font-size:15px;margin-bottom:8px}
.qp-info > p{font-size:15px;color:#4a443e;margin-bottom:12px}
.qp-cta{text-align:center;margin-top:14px}
@media(max-width:760px){.qp-grid{grid-template-columns:1fr}.qp-img{height:140px}}

/* ---- callouts / verdict / quick answer ---- */
.callout{border:3px solid var(--ink);border-radius:var(--r);padding:20px;margin:18px 0;box-shadow:var(--shadow)}
.callout.q{background:var(--yellow)}
.callout.v{background:var(--cyan);color:#04222a}
.callout h4{font-family:'Outfit';font-weight:800;font-size:17px;margin-bottom:6px}
.whytrust{background:var(--paper);border:3px solid var(--ink);border-radius:var(--r);padding:20px;margin:18px 0}
.whytrust h3{font-size:18px;margin-bottom:10px}
.whytrust ul{list-style:none;columns:2;font-size:14px}
.whytrust li{padding:4px 0 4px 22px;position:relative;break-inside:avoid}
.whytrust li:before{content:"\1F527";position:absolute;left:0}
.whytrust .upd{margin-top:8px;font-size:12.5px;color:var(--soft);font-weight:600}

/* ---- article prose ---- */
.prose{font-size:16px;color:#33302c}
.prose h2{font-size:27px;font-weight:900;margin:30px 0 12px}
.prose h3{font-size:20px;font-weight:800;margin:22px 0 8px}
.prose p{margin:12px 0}
.prose ul,.prose ol{margin:12px 0 12px 22px}
.prose li{margin:5px 0}
.prose a{color:var(--orange);font-weight:600;border-bottom:2px solid var(--yellow)}
.toc{background:var(--paper);border:3px solid var(--ink);border-radius:14px;padding:16px 18px;margin:18px 0}
.toc h4{font-family:'Outfit';font-size:14px;text-transform:uppercase;letter-spacing:1px;margin-bottom:8px}
.toc a{display:block;font-size:14px;color:var(--sub);padding:4px 0;font-weight:500}
.toc a:hover{color:var(--orange)}

/* ---- FAQ ---- */
.faq{display:grid;gap:12px}
.qcard{background:var(--paper);border:3px solid var(--ink);border-radius:14px;padding:16px 18px}
.qcard h4{font-family:'Outfit';font-size:16px;margin-bottom:5px}
.qcard p{font-size:14px;color:var(--sub)}

/* ---- review header / verdict box ---- */
.revhead{display:grid;grid-template-columns:1.3fr .7fr;gap:22px;align-items:center;margin:18px 0}
.scorebox{background:var(--ink);color:#fff;border-radius:var(--r);padding:22px;text-align:center}
.scorebox .num{font-family:'Outfit';font-weight:900;font-size:54px;color:var(--yellow);line-height:1}
.scorebox .of{font-size:13px;color:#cfc6b8}
.scorebox a{margin-top:14px}

/* ---- vs / comparison header ---- */
.vshead{display:grid;grid-template-columns:1fr auto 1fr;gap:16px;align-items:center;margin:20px 0}
.vscard{background:var(--paper);border:3px solid var(--ink);border-radius:var(--r);padding:20px;text-align:center;box-shadow:var(--shadow)}
.vscard.w{background:var(--yellow)}
.vscard h3{font-size:22px;margin:8px 0}
.vs-or{font-family:'Outfit';font-weight:900;font-size:30px;background:var(--orange);color:#fff;width:58px;height:58px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:3px solid var(--ink)}

/* ---- related ---- */
.related{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:14px}
.related a{background:var(--paper);border:2px solid var(--ink);border-radius:12px;padding:13px 15px;font-weight:600;font-size:14px}
.related a:hover{background:var(--yellow)}

/* ---- subcategory chips (category hub -> sub-hubs) ---- */
.subchips{display:flex;flex-wrap:wrap;gap:9px}
.subchips a{background:var(--paper);border:2.5px solid var(--ink);border-radius:30px;padding:9px 16px;font-weight:700;font-size:13.5px;font-family:'Outfit'}
.subchips a:hover{background:var(--yellow);transform:translateY(-2px)}

/* ---- ftc disclosure note ---- */
.ftc-note{font-size:12.5px;color:var(--soft);background:var(--cream);border-left:4px solid var(--yellow);padding:8px 12px;border-radius:6px;margin:14px 0 0}
.ftc-note a{color:var(--orange);font-weight:600}

/* ---- youtube card ---- */
.ytcard{margin:26px 0}
.ytcard a{display:flex;align-items:center;gap:16px;background:var(--paper);border:3px solid var(--ink);border-radius:16px;box-shadow:var(--shadow);padding:15px 18px}
.ytcard a:hover{background:#fff5f5}
.yt-play{flex-shrink:0;width:54px;height:54px;border-radius:13px;background:#ff0000;color:#fff;display:flex;align-items:center;justify-content:center;font-size:20px;border:2px solid var(--ink)}
.yt-t b{font-family:'Outfit';font-size:17px;display:block;line-height:1.2}
.yt-t span{font-size:13px;color:var(--sub)}
.yt-go{margin-left:auto;font-family:'Outfit';font-weight:800;color:#ff0000;white-space:nowrap}
@media(max-width:600px){.yt-go{display:none}}

/* ---- footer ---- */
.foot{background:var(--ink);color:#d8d2c6;margin-top:40px;padding:40px 0 24px}
.foot .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:24px}
.foot h5{font-family:'Outfit';color:#fff;font-size:14px;margin-bottom:10px}
.foot a{display:block;font-size:13px;color:#b8b1a4;padding:3px 0}
.foot a:hover{color:var(--yellow)}
.foot .logo{color:#fff}.foot .logo b{color:var(--orange)}
.foot-pref{border-top:1px solid #3a3633;margin-top:24px;padding-top:18px;display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.foot-pref>span{font-size:13px;color:#b8b1a4}
.foot .bot{margin-top:16px;padding-top:14px;font-size:12.5px;color:#8f897e;text-align:center}
@media(max-width:600px){.foot-pref{justify-content:center;text-align:center}}

@media(max-width:900px){
 .catgrid{grid-template-columns:repeat(2,1fr)} .paths{grid-template-columns:1fr 1fr}
 .hero h1{font-size:38px} .revhead,.vshead{grid-template-columns:1fr} .vs-or{margin:0 auto}
 .specrow{grid-template-columns:1fr 1fr} .pc,.whytrust ul,.related{grid-template-columns:1fr} .whytrust ul{columns:1}
 .foot .cols{grid-template-columns:1fr 1fr} .nav{display:none} .burger{display:block;font-size:24px}
}