/* =====================================================================
   THEME: BARGAIN  ·  theme.css   (extends shared base.css)
   For shoppingdeals99.com. Inspired by DealNews (dark urgency header,
   deep category nav) and Krazy Coupon Lady (bright yellow accents,
   squircle category tiles, playful tone), synthesized into an editorial
   shopping-guides identity (no live pricing data — general tiers/ranges
   only, never fabricated specific prices).
   ===================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@600;700;800&family=Figtree:wght@400;500;600;700;800&display=swap');

:root{
  --font-sans:'Figtree',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --font-head:'Baloo 2',var(--font-sans);
  --radius:16px; --radius-sm:12px;

  --bg:#fafaf7; --surface:#ffffff; --ink:#161613; --ink-soft:#5c5b52; --ink-faint:#93917f; --line:#e9e7dc;
  --accent:#e2372b; --accent-2:#7C2B2B; --accent-ink:#ffffff;
  --pill:#f3e4e4; --pill-ink:#7C2B2B;
  --grad:linear-gradient(145deg,#a04545,#7C2B2B);
  --thumb:#f3e4e4;
  --footer-bg:#161613; --footer-ink:#c9c7b8; --footer-line:#2c2b26; --footer-faint:#8f8c7c;
}

/* ---- identity overrides on shared components ---- */
.top{background:var(--ink);border-bottom:0}
.brand{font-family:var(--font-head);font-weight:800;color:#fff}
.brand .dot{border-radius:9px;background:var(--accent-2)}
.nav a{color:#d8d6c8;font-weight:600}
.nav a:hover,.nav a.active{background:none;color:var(--accent-2)}
.h,.hero h1,.sec-head h2,.page-head h1,.article-head h1,.related h2,.legal h2,
.card h3,.hero-card h3,.feature .lead h3,.mini h4,.cat h3{font-family:var(--font-head);font-weight:700}
.eyebrow{background:var(--accent-2);color:#fff}
.btn{background:var(--accent-2);color:#fff;border-radius:999px;font-weight:800;box-shadow:none}
.card{border:1px solid var(--line);box-shadow:none}
.card:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(0,0,0,.08)}
footer .brand{color:#fff}

/* =====================================================================
   Bargain home/category components: squircle category tiles, ranked
   top-N list, BNPL spotlight panel — all price-tier language only,
   never a fabricated live price.
   ===================================================================== */
.b-hero{padding:34px 0}
.b-feature{display:block;background:var(--ink);color:#fff;border-radius:20px;overflow:hidden;box-shadow:0 20px 50px rgba(0,0,0,.18)}
.b-feature-grid{display:grid;grid-template-columns:1fr 1.1fr}
.b-feature .img{position:relative;background:var(--grad);min-height:240px;overflow:hidden}
.b-feature .img .ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.b-feature .star{position:absolute;top:18px;left:18px;background:var(--accent);color:#fff;width:64px;height:64px;
  border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;
  font-family:var(--font-head);font-weight:800;transform:rotate(-8deg);box-shadow:0 6px 16px rgba(226,55,43,.5)}
.b-feature .star b{font-size:1.15rem;line-height:1}
.b-feature .star span{font-size:.55rem}
.b-feature .body{padding:30px 34px}
.b-feature .tag{display:inline-flex;background:var(--accent-2);color:#fff;font-weight:800;font-size:.74rem;
  padding:.3rem .7rem;border-radius:999px;margin-bottom:14px}
.b-feature h2{font-family:var(--font-head);font-size:1.5rem;margin:0 0 10px;line-height:1.2}
.b-feature p{color:#c9c7b8;margin:0 0 16px;max-width:56ch}

.b-cats{padding:10px 0 30px}
.b-cat-row{display:grid;grid-template-columns:repeat(6,1fr);gap:16px}
.b-cat-tile{text-align:center}
.b-cat-tile .sq{aspect-ratio:1;border-radius:28% 28% 40% 40% / 32% 32% 36% 36%;overflow:hidden;position:relative;
  margin-bottom:10px;transition:.15s;border:2px solid transparent;box-shadow:0 6px 16px rgba(0,0,0,.08)}
.b-cat-tile .sq .ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.b-cat-tile .sq .badge{position:absolute;right:10px;bottom:10px;background:#fff;color:var(--ink);font-size:1.5rem;
  width:46px;height:46px;border-radius:50%;display:grid;place-items:center;box-shadow:0 4px 10px rgba(0,0,0,.25)}
.b-cat-tile:hover .sq{border-color:var(--accent-2);transform:translateY(-3px)}
.b-cat-tile span{font-size:.86rem;font-weight:700}

.ranked{display:flex;flex-direction:column;gap:0;border-top:1px solid var(--line)}
.rank{display:grid;grid-template-columns:56px 74px 1fr auto;gap:16px;align-items:center;padding:16px 4px;
  border-bottom:1px solid var(--line)}
.rank .n{font-family:var(--font-head);font-weight:800;font-size:1.6rem;color:var(--ink-faint)}
.rank .n.top3{color:var(--accent)}
.rank .thumb{aspect-ratio:1;border-radius:14px;overflow:hidden;position:relative;background:var(--thumb)}
.rank .thumb .ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.rank h3{margin:0 0 4px;font-size:1.02rem;font-weight:700;line-height:1.3}
.rank .cat{font-size:.76rem;color:var(--ink-faint);text-transform:uppercase;letter-spacing:.04em;font-weight:700}
.rank .tier{background:var(--pill);color:var(--pill-ink);font-weight:700;font-size:.76rem;padding:.35rem .7rem;
  border-radius:999px;white-space:nowrap}

.b-tag-off{position:absolute;top:10px;left:10px;background:var(--accent);color:#fff;font-family:var(--font-head);
  font-weight:800;font-size:.68rem;letter-spacing:.03em;padding:.3rem .6rem;border-radius:8px;z-index:1}

.bnpl{background:var(--ink);border-radius:20px;padding:30px 34px;color:#fff;display:grid;
  grid-template-columns:1.2fr 2fr;gap:30px;align-items:center}
.bnpl .side .tag{display:inline-block;background:var(--accent-2);color:#fff;font-weight:800;font-size:.76rem;
  padding:.3rem .7rem;border-radius:999px;margin-bottom:12px}
.bnpl .side h2{font-family:var(--font-head);font-size:1.5rem;margin:0 0 8px}
.bnpl .side p{color:#c9c7b8;margin:0;font-size:.92rem}
.bnpl .cards{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.bnpl .bcard{background:#232219;border:1px solid #34332a;border-radius:12px;padding:16px}
.bnpl .bcard .cat{color:var(--accent-2);font-size:.72rem;font-weight:700;text-transform:uppercase}
.bnpl .bcard h4{margin:.4rem 0 0;font-size:.94rem;font-weight:700;line-height:1.3;color:#fff}

/* scrollable top-10 carousel (reuses the generic per-vertical "bands"
   cards_html — thumb + h3 + meta — computed by build_home for every theme) */
.top10-scroll{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 4px 12px;
  margin:0 -4px;scrollbar-width:thin}
.top10-scroll::-webkit-scrollbar{height:8px}
.top10-scroll::-webkit-scrollbar-thumb{background:var(--line);border-radius:999px}
.top10-scroll .card{scroll-snap-align:start;flex:0 0 250px}
.card .b{padding:14px 16px}
.card .b h3{margin:.35rem 0 .4rem;font-size:1rem;line-height:1.32}
.card .m{font-size:.78rem;color:var(--ink-faint)}

/* per-vertical panels computed generically for every vertical; CSS shows
   only the one matching data-v so no build.py changes were needed */
.v-panel{display:none}
.v-panel[data-v="Top 10 Lists"]{display:block}
.bnpl-wrap{display:none}
.bnpl-wrap[data-v="Buy Now, Pay Later"]{display:block}
.bnpl-wrap .cards .entry{background:#232219;border:1px solid #34332a;border-radius:12px;padding:16px;display:block}
.bnpl-wrap .cards .entry .num,.bnpl-wrap .cards .entry p,.bnpl-wrap .cards .entry .meta{display:none}
.bnpl-wrap .cards .entry h3{color:#fff;font-size:.94rem;margin:0}
.bnpl-wrap .cards{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}

@media(max-width:960px){
  .b-feature-grid{grid-template-columns:1fr}.b-cat-row{grid-template-columns:repeat(3,1fr)}
  .bnpl{grid-template-columns:1fr}
}
@media(max-width:560px){.b-cat-row{grid-template-columns:repeat(2,1fr)}.bnpl .cards{grid-template-columns:1fr}.bnpl-wrap .cards{grid-template-columns:1fr}}