/* Chow420 homepage visual system, July 2026
   Mature, restrained, high-trust retail UI: graphite neutrals, one green
   brand accent, and red reserved for real sale messaging. */

:root{
  --c420-ink:#111827;
  --c420-muted:#64748b;
  --c420-line:#e2e8f0;
  --c420-surface:#ffffff;
  --c420-canvas:#f7f8fa;
  --c420-green:#0f766e;
  --c420-green-strong:#065f46;
  --c420-green-soft:#ecfdf5;
  --c420-sale:#dc2626;
}

body{background:var(--c420-canvas)}
#main-content.main-content-div{background:var(--c420-canvas)!important}
.homepage{font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--c420-ink)}
.homepage .space100{height:58px!important}

/* Hero: a quiet dark product surface, not an animated rainbow billboard. */
#home-aimode-preview{
  border-radius:20px!important;
  margin:18px 0 28px!important;
  box-shadow:0 24px 55px -32px rgba(15,23,42,.72),0 8px 20px -14px rgba(15,23,42,.42)!important;
}
#home-aimode-preview::before{
  background:linear-gradient(135deg,#2b3d37 0%,#0f766e 38%,#29333d 100%)!important;
  background-size:100% 100%!important;
  animation:none!important;
  opacity:1!important;
}
#home-aimode-preview::after{
  background:radial-gradient(800px 320px at 0% 0%,rgba(15,118,110,.28),transparent 64%),linear-gradient(135deg,#0b1015 0%,#111820 58%,#0c1117 100%)!important;
}
#home-aimode-preview .home-aimode-preview__inner{border-radius:19px!important;padding:24px 26px 20px!important}
#home-aimode-preview .home-leaves{display:none!important}
#home-aimode-preview *,
#home-aimode-preview *::before,
#home-aimode-preview *::after{animation:none!important}
#home-aimode-preview .home-aimode-h1{font-size:clamp(28px,3vw,42px)!important;letter-spacing:-.035em!important;margin-bottom:12px!important}
#home-aimode-preview .home-aimode-h1 .pop-green{
  background:none!important;
  -webkit-background-clip:initial!important;
  background-clip:initial!important;
  color:#f8fafc!important;
  text-shadow:none!important;
}
#home-aimode-preview .ham-badges{gap:8px!important;margin-bottom:14px!important}
#home-aimode-preview .ham-badge-signup,
#home-aimode-preview .ham-badge-cashback{
  padding:6px 11px!important;
  border-radius:6px!important;
  box-shadow:none!important;
  letter-spacing:.055em!important;
  font-size:10.5px!important;
  font-weight:750!important;
  animation:none!important;
}
#home-aimode-preview .ham-badge-signup{
  background:rgba(255,255,255,.06)!important;
  border:1px solid rgba(255,255,255,.18)!important;
  color:#e2e8f0!important;
}
#home-aimode-preview .ham-badge-cashback{
  background:rgba(16,185,129,.12)!important;
  border:1px solid rgba(52,211,153,.3)!important;
  color:#a7f3d0!important;
}
#home-aimode-preview .ham-badge-signup::after,
#home-aimode-preview .ham-badge-cashback::after{display:none!important}
#home-aimode-preview .ham-badge-ai{
  background:rgba(16,185,129,.1)!important;border-color:rgba(52,211,153,.3)!important;
  color:#a7f3d0!important;border-radius:6px!important;
}
#home-aimode-preview .ham-badge-ai .dot{background:#34d399!important;box-shadow:none!important}
#home-aimode-preview .ham-offer{
  background:rgba(255,255,255,.04)!important;border-color:rgba(148,163,184,.2)!important;
  border-radius:8px!important;box-shadow:none!important;
}
#home-aimode-preview .ham-offer .num,
#home-aimode-preview .ham-offer.is-cashback .num,
#home-aimode-preview .ham-offer.is-signup .num{
  background:none!important;-webkit-background-clip:initial!important;background-clip:initial!important;
  color:#6ee7b7!important;text-shadow:none!important;
}
#home-aimode-preview .ham-offer.is-signup .ham-offer-tag{border-radius:5px!important}
#home-aimode-preview .home-aimode-btn-primary{
  background:#10b981!important;color:#07130f!important;border-radius:8px!important;box-shadow:none!important;
}
#home-aimode-preview .home-aimode-btn-primary::before,
#home-aimode-preview .btn-confetti{display:none!important}
#home-aimode-preview .home-aimode-btn-secondary{border-radius:8px!important}
#home-aimode-preview .home-aimode-prompt{
  color:#dbe7e3!important;background:rgba(255,255,255,.04)!important;
  border-color:rgba(148,163,184,.24)!important;border-radius:7px!important;
}
#home-aimode-preview .home-aimode-prompt::before{color:#6ee7b7!important}
#home-aimode-preview .home-aimode-prompt--sale{
  background:#b91c1c!important;border-color:#dc2626!important;color:#fff!important;box-shadow:none!important;
}
#home-aimode-preview .home-aimode-prompt--sale::after{display:none!important}
#home-aimode-preview .hh-teaser{gap:10px!important;margin-bottom:16px!important}
#home-aimode-preview .hh-teaser-card{
  background:rgba(15,23,42,.72)!important;
  border:1px solid rgba(148,163,184,.2)!important;
  box-shadow:none!important;
  border-radius:10px!important;
  transition:border-color .18s ease,background .18s ease!important;
}
#home-aimode-preview .hh-teaser-card:hover{transform:none!important;border-color:rgba(52,211,153,.5)!important;background:rgba(15,23,42,.9)!important}
#home-aimode-preview .hh-teaser-price{color:#6ee7b7!important}
#home-aimode-preview .hh-teaser-more{color:#94a3b8!important;font-style:normal!important}
#home-aimode-preview .hh-cta--trust{border-radius:7px!important;background:rgba(255,255,255,.04)!important;border-color:rgba(148,163,184,.2)!important}
#home-aimode-preview [class*="confetti"],
#home-aimode-preview .home-aimode-ticker .hat-pulse,
#home-aimode-preview .ham-badge-ai .dot{animation:none!important}

/* Consistent section hierarchy. */
.homepage .ct10-head,.homepage .hpr-head,.homepage .tp-reviews__head{align-items:center}
.homepage .ct10-title,.homepage .hpr-title,.homepage .bp-title,.homepage .tp-reviews__title{
  color:var(--c420-ink)!important;
  font-weight:750!important;
  letter-spacing:-.025em!important;
}
.homepage .ct10-title .ct10-grad,
.homepage .benefit-pills-head .bp-title .bp-grad{
  background:none!important;
  -webkit-background-clip:initial!important;
  -webkit-text-fill-color:var(--c420-green)!important;
  color:var(--c420-green)!important;
}
.homepage .ct10-sub,.homepage .hpr-subtitle,.homepage .bp-sub{color:var(--c420-muted)!important;font-weight:450!important;letter-spacing:0!important}
.homepage .ct10-viewall,.homepage .hpr-viewall,.homepage .tp-reviews__link{color:var(--c420-green)!important;font-weight:650!important}
.homepage .ct10-viewall{border-color:#cbd5e1!important;border-radius:7px!important;background:#fff!important}
.homepage .ct10-viewall:hover{border-color:var(--c420-green)!important;background:var(--c420-green-soft)!important}

/* Bundle offer: neutral merchandising frame; red is only the sale signal. */
.bs-feed{margin:22px auto 12px!important}
.bs-feed__box{
  background:#fff!important;
  border:1px solid #dbe2ea!important;
  border-left:3px solid var(--c420-sale)!important;
  border-radius:14px!important;
  box-shadow:0 10px 30px -24px rgba(15,23,42,.5)!important;
  padding:16px 16px 10px!important;
}
.bs-feed__title{font-size:20px!important;color:var(--c420-ink)!important;letter-spacing:-.02em!important}
.bs-feed__off,.bs-card__badge{
  background:var(--c420-sale)!important;
  color:#fff!important;
  animation:none!important;
  box-shadow:none!important;
  border-radius:5px!important;
}
.bs-feed__timer{color:#475569!important;background:#f8fafc!important;border-color:#e2e8f0!important;border-radius:7px!important;font-weight:650!important}
.bs-feed__timer b{color:var(--c420-ink)!important}
.bs-card{border-color:#e2e8f0!important;border-radius:10px!important;box-shadow:none!important}
.bs-card:hover{transform:none!important;border-color:#cbd5e1!important;box-shadow:0 10px 24px -20px rgba(15,23,42,.55)!important}
.bs-card__price{color:var(--c420-sale)!important}
.bs-card__btn{background:var(--c420-ink)!important;border-color:var(--c420-ink)!important;border-radius:7px!important;box-shadow:none!important}
.bs-card__btn:hover,.bs-card__btn:focus{background:#273244!important;border-color:#273244!important}

/* Product rows and cards. */
.homepage .hpr-section{padding:0!important}
.homepage .hpr-card,.homepage .ct10-card,.homepage .tp-card{
  border-color:var(--c420-line)!important;
  border-radius:11px!important;
  box-shadow:none!important;
}
.homepage .hpr-card:hover,.homepage .ct10-item:hover .ct10-card{
  transform:translateY(-2px)!important;
  border-color:#cbd5e1!important;
  box-shadow:0 14px 28px -22px rgba(15,23,42,.55)!important;
}
.homepage .hpr-imgwrap{background:#f8fafc!important}
.homepage .hpr-badge,.homepage .ct10-off{background:var(--c420-sale)!important;color:#fff!important;border-radius:5px!important;box-shadow:none!important}
.homepage .hpr-stars{color:var(--c420-green)!important;background:var(--c420-green-soft)!important}
.homepage .hpr-price-now{color:var(--c420-sale)!important}
.homepage .hpr-price-reg{color:var(--c420-ink)!important}
.homepage .hpr-add,.homepage .hpr-add--overlay{
  color:var(--c420-green-strong)!important;
  background:#fff!important;
  border-color:#b7d9ce!important;
  border-radius:7px!important;
  box-shadow:none!important;
}
.homepage .hpr-add:hover,.homepage .hpr-add--overlay:hover{background:var(--c420-green-strong)!important;border-color:var(--c420-green-strong)!important;color:#fff!important;transform:none!important}

/* Editorial ranking treatment, quieter than the oversized black numerals. */
.homepage .chow-top10{margin:40px 0!important}
.homepage .chow-top10--products .ct10-rank{font-size:232px!important;margin-right:-42px!important;color:#f8fafc!important}
.homepage .chow-top10--brands .ct10-rank{font-size:166px!important;margin-right:-34px!important;color:#f8fafc!important}
.homepage .ct10-rank::before{color:#f8fafc!important;-webkit-text-stroke:2px #cbd5e1!important}
.homepage .ct10-price{color:var(--c420-green-strong)!important}
.homepage .ct10-star{color:var(--c420-green)!important}
.homepage .ct10-mono{background:#1f2937!important;text-shadow:none!important}

/* Benefits: monochrome line icons and one accent. */
.homepage .benefit-pills-head{margin:42px 0 18px!important}
.homepage .benefit-pills-head .bp-ai-badge{
  color:var(--c420-green-strong)!important;
  background:var(--c420-green-soft)!important;
  border-color:#b7d9ce!important;
  border-radius:5px!important;
  font-size:9.5px!important;
}
.homepage .benefit-pills-head .bp-ai-badge::after{display:none!important}
.homepage .benefit-pills{gap:12px!important;margin-bottom:40px!important}
.homepage .benefit-pill{
  --bp-accent:var(--c420-green)!important;
  --bp-rgb:15,118,110!important;
  padding:17px 16px!important;
  border-radius:12px!important;
  background:#fff!important;
  border-color:var(--c420-line)!important;
  box-shadow:none!important;
}
.homepage .benefit-pill::before,.homepage .benefit-pill::after,.homepage .benefit-pill .bp-hairline{display:none!important}
.homepage .benefit-pill:hover{transform:translateY(-2px)!important;border-color:#9fcbbd!important;box-shadow:0 14px 28px -24px rgba(15,23,42,.55)!important}
.homepage .benefit-pill .bp-emoji{
  width:42px!important;height:42px!important;border-radius:9px!important;font-size:17px!important;
  color:var(--c420-green)!important;background:var(--c420-green-soft)!important;border-color:#cce9df!important;box-shadow:none!important;
}
.homepage .benefit-pill:hover .bp-emoji{transform:none!important;box-shadow:none!important}
.homepage .benefit-pill .bp-label{color:var(--c420-ink)!important;font-weight:700!important}
.homepage .benefit-pill:hover .bp-label{color:var(--c420-green-strong)!important}
.homepage .benefit-pill .bp-arrow{color:var(--c420-green)!important;background:transparent!important;border:0!important}
.homepage .benefit-pill:hover .bp-arrow{color:var(--c420-green-strong)!important;background:transparent!important;box-shadow:none!important}

/* Category navigation: simple monochrome utility tiles. */
.homepage .home-cat-tiles{gap:10px!important;margin:22px 0 40px!important}
.homepage .hct-tile{
  padding:15px 8px!important;border-radius:10px!important;background:#fff!important;border-color:var(--c420-line)!important;box-shadow:none!important;
}
.homepage .hct-tile:hover{transform:translateY(-2px)!important;border-color:#9fcbbd!important;box-shadow:0 12px 24px -22px rgba(15,23,42,.55)!important}
.homepage .hct-emoji{font-size:19px!important;color:var(--c420-green)!important;filter:none!important}
.homepage .hct-tile:hover .hct-emoji{transform:none!important}
.homepage .hct-label{color:#334155!important;font-weight:650!important}
.homepage .hct-tile:hover .hct-label{color:var(--c420-green-strong)!important}
.homepage .hct-tile--sale .hct-emoji,.homepage .hct-tile--sale:hover .hct-label{color:var(--c420-sale)!important}

/* Trust and informational panels. */
.homepage .tp-reviews{margin-top:38px!important}
.homepage .tp-card{padding:16px!important;background:#fff!important}
.homepage .tp-card__text{color:#334155!important}
.home-seo-panel{border-radius:14px!important;box-shadow:0 18px 38px -28px rgba(15,23,42,.7)!important}
.home-seo-panel::before{background:#334155!important;animation:none!important;opacity:1!important}
.home-seo-panel::after{background:linear-gradient(145deg,#111827,#17212b)!important}

@media (max-width:767px){
  .homepage .space100{height:42px!important}
  #home-aimode-preview{border-radius:16px!important;margin:12px 0 22px!important}
  #home-aimode-preview .home-aimode-preview__inner{border-radius:15px!important;padding:18px 16px 16px!important}
  #home-aimode-preview .home-aimode-h1{font-size:25px!important}
  #home-aimode-preview .ham-badge-signup,#home-aimode-preview .ham-badge-cashback{font-size:9.5px!important;padding:5px 8px!important}
  .bs-feed{padding:0!important}
  .bs-feed__box{border-radius:11px!important;padding:13px 10px 7px!important}
  .bs-feed__title{font-size:17px!important}
  .bs-feed__timer{font-size:11px!important;padding:5px 8px!important}
  .homepage .chow-top10--products .ct10-rank{font-size:210px!important;margin-right:-38px!important}
  .homepage .chow-top10--brands .ct10-rank{font-size:132px!important;margin-right:-25px!important}
  .homepage .benefit-pills{grid-template-columns:1fr!important}
  .homepage .benefit-pill{padding:14px!important}
  .homepage .home-cat-tiles{padding-bottom:8px!important}
}
