/* Shared styles for the pool-driven category pages (electronics, beauty, shoes, …).
   Extracted from the hand-built category pages (e.g. kitchen.html) so the new
   pool-driven pages look native, plus the infinite-scroll feed styles. */
:root{ --red:#D52B1E; --amber:#F5A623; --ink:#1c1c1e; --soft:#f6f5f3; --line:#ececec; }
*{box-sizing:border-box} html,body{margin:0}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:var(--ink);line-height:1.6;background:linear-gradient(rgba(255,255,255,.42),rgba(255,255,255,.42)),url('/brand/background.jpg') center top/cover no-repeat fixed;background-color:#fff}
@media(max-width:768px){body{background-image:none;background-color:#f1efeb}}
a{color:var(--red)}
.wrap{max-width:1080px;margin:0 auto;padding:0 20px}
header{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.topbar{display:flex;align-items:center;gap:12px;padding:12px 0}
.topbar .brand{font-weight:800;font-size:20px;display:flex;align-items:center;gap:8px;color:inherit;text-decoration:none}
.topbar .tag{color:#777;font-size:13px;margin-left:auto}
.topbar .auth{display:flex;align-items:center;gap:8px;font-size:13px}
@media(max-width:560px){.topbar .tag{display:none}.topbar .auth{margin-left:auto}}
.topbar a{color:inherit;text-decoration:none}
.hero{padding:30px 0 6px}
.eyebrow{display:inline-block;background:var(--soft);border:1px solid var(--line);border-radius:999px;padding:5px 12px;font-size:12.5px;font-weight:700;color:#555;margin-bottom:12px}
h1{font-size:34px;letter-spacing:-.5px;margin:0 0 10px} h1 .dam{color:var(--red)}
.lede{font-size:17px;color:#333;margin:0 0 6px;max-width:790px}
.updated{display:inline-flex;align-items:center;gap:6px;margin:12px 0 0;font-size:13px;font-weight:700;color:var(--red);background:var(--soft);border:1px solid var(--line);border-radius:999px;padding:5px 12px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:22px;margin:24px 0 8px}
.card{border:1px solid #e0ded8;border-radius:16px;overflow:hidden;display:flex;flex-direction:column;background:#fff;box-shadow:0 3px 12px rgba(0,0,0,.06);transition:box-shadow .15s,transform .15s}
.card:hover{box-shadow:0 10px 28px rgba(0,0,0,.13);transform:translateY(-2px)}
.imgwrap{position:relative;background:#fff;height:265px;display:flex;align-items:center;justify-content:center}
.imgwrap .dd-low90,.imgwrap .low90{position:absolute;top:10px;right:10px;z-index:2;max-width:calc(100% - 20px);font-size:10.5px;line-height:1.15;font-weight:850;color:#fff;background:#176b3a;padding:5px 8px;border-radius:8px;box-shadow:0 2px 8px rgba(0,0,0,.22);letter-spacing:0;pointer-events:none;white-space:normal;text-align:right}
.imgwrap a{display:flex;width:100%;height:100%;align-items:center;justify-content:center}
.imgwrap img{width:100%;height:100%;object-fit:contain;padding:12px}
.body{padding:14px 15px 16px;display:flex;flex-direction:column;gap:8px;flex:1}
.title a{color:inherit;text-decoration:none}
.title a:hover{color:var(--red);text-decoration:underline}
.title{font-size:17.5px;font-weight:700;line-height:1.35}
.rating{font-size:15px;color:#666;display:flex;align-items:center;gap:5px;margin:-2px 0 0}
.rating .st{color:var(--amber);letter-spacing:1px}
.rating b{color:var(--ink);font-weight:700}
.rating a{color:inherit;text-decoration:none}
.rating a:hover{color:var(--red);text-decoration:underline}
.deal{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin:-2px 0 2px}
.deal .now{font-size:22px;font-weight:800;color:var(--ink)}
.deal .was{font-size:15.5px;color:#8a8a8a;text-decoration:line-through}
.deal .off{font-size:14px;font-weight:800;color:#fff;background:var(--red);padding:5px 13px;border-radius:999px;box-shadow:0 2px 7px rgba(213,43,30,.35);letter-spacing:.2px}

.blurb{font-size:15px;color:#4a4a4a;margin:0;flex:1;line-height:1.55}
.btn{display:block;text-align:center;background:var(--red);color:#fff;text-decoration:none;font-weight:800;font-size:16.5px;padding:14px;border-radius:12px;margin-top:4px}
.btn:hover{filter:brightness(.95)}
.disc{font-size:12.5px;color:#999;margin:26px 0 4px}
footer{border-top:1px solid var(--line);padding:24px 0;margin-top:30px;text-align:center;color:#999;font-size:13px}
footer a{color:#999;margin:0 8px}
.follow{display:inline-block;margin-top:6px;font-weight:700;color:var(--red)}
/* category nav */
.catnav{border-top:1px solid var(--line);margin-top:34px;background:linear-gradient(180deg,var(--soft),#fff)}
.catnav .in{max-width:1080px;margin:0 auto;padding:28px 20px 30px;display:flex;flex-direction:column;align-items:center;gap:15px;text-align:center}
.catnav .lbl{font-size:19px;font-weight:800;color:var(--ink);letter-spacing:-.3px}
.catnav .cats{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.catnav .cats a{background:#fff;border:1.5px solid var(--line);border-radius:999px;padding:8px 15px;font-weight:700;font-size:14px;color:var(--ink);text-decoration:none;box-shadow:0 2px 8px rgba(0,0,0,.05);transition:border-color .12s,color .12s,transform .12s}
.catnav .cats a:hover{border-color:var(--red);color:var(--red);transform:translateY(-1px)}
.catnav .cats a.on{border-color:var(--red);color:var(--red);background:#fff5f4}
.catnav .home{display:inline-flex;align-items:center;gap:8px;background:var(--red);color:#fff;text-decoration:none;border-radius:999px;padding:15px 34px;margin:14px 0 6px;font-weight:800;font-size:15.5px;box-shadow:0 6px 18px rgba(213,43,30,.28);transition:filter .12s,transform .12s}
.catnav .home:hover{filter:brightness(.96);transform:translateY(-1px)}
.browse-disc{max-width:760px;margin:20px auto 0;text-align:center;font-size:12.5px;color:#9a948c;line-height:1.5;padding:0 20px}
/* pool feed + infinite scroll */
.poolfeed-head{text-align:center;margin:34px 0 0}
.poolfeed-head h2{font-size:24px;font-weight:800;letter-spacing:-.3px;margin:0 0 4px}
.poolfeed-head h2 span{color:var(--red)}
.poolfeed-head p{font-size:14.5px;color:#666;margin:0 auto;max-width:620px}
.loadmore-wrap{display:flex;flex-direction:column;align-items:center;margin:20px 0 6px}
.loadmore-status{min-height:22px;color:#8a857e;font-size:14px;font-weight:700;padding:8px 0;text-align:center}
.loadmore-sentinel{width:1px;height:1px}
.feed-empty{text-align:center;color:#888;font-size:15px;padding:30px 0}