:root{
  --bg:#0b0c0c;
  --bg-2:#111313;
  --panel:#151717;
  --line:rgba(255,255,255,.12);
  --text:#f3efe9;
  --muted:#a9a49e;
  --paper:#e9e2d8;
  --ember:#c85b2d;
  --ember-hover:#e06a36;
  --max:1280px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  line-height:1.6;
}
a{color:inherit}
img{max-width:100%;height:auto;display:block}
.container-bbq{width:min(calc(100% - 2rem),var(--max));margin-inline:auto}
.site-header{
  background:rgba(10,11,11,.92);
  border-bottom:1px solid var(--line);
  backdrop-filter:blur(12px);
  position:sticky;top:0;z-index:20;
}
.navbar-brand{font-weight:900;letter-spacing:.12em;color:#fff}
.brand-mark{color:var(--ember);margin-right:.55rem}
.nav-link{color:#d9d5cf!important;font-size:.82rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase}
.nav-link:hover{color:#fff!important}
.hero{
  min-height:72vh;
  display:grid;align-items:center;
  position:relative;overflow:hidden;
  background:
    linear-gradient(90deg,rgba(8,9,9,.96) 0%,rgba(8,9,9,.76) 46%,rgba(8,9,9,.18) 100%),
    linear-gradient(180deg,rgba(0,0,0,0) 70%,var(--bg) 100%),
    url("../images/hero.jpg") center/cover no-repeat;
}
.hero::after{
  content:"";
  position:absolute;inset:0;
  background:radial-gradient(circle at 80% 70%,rgba(200,91,45,.16),transparent 30%);
  pointer-events:none;
}
.eyebrow{
  color:#c6c0b8;text-transform:uppercase;letter-spacing:.34em;
  font-weight:700;font-size:.72rem;
}
.display-bbq{
  font-family:Impact,Haettenschweiler,"Arial Narrow Bold",sans-serif;
  font-size:clamp(3.6rem,8vw,7.2rem);
  line-height:.86;letter-spacing:.015em;text-transform:uppercase;
  max-width:760px;margin:.8rem 0 1.4rem;
}
.hero-copy{max-width:570px;color:#d4d0ca;font-size:1.05rem}
.btn-ember{
  background:var(--ember);color:white;border:0;border-radius:0;
  padding:.95rem 1.25rem;font-weight:800;text-transform:uppercase;
  letter-spacing:.09em;font-size:.78rem;
}
.btn-ember:hover{background:var(--ember-hover);color:white}
.btn-outline-bbq{
  border:1px solid rgba(255,255,255,.52);color:white;border-radius:0;
  padding:.9rem 1.2rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.08em;font-size:.76rem;
}
.section{padding:5rem 0}
.section-dark{background:var(--bg-2)}
.section-title{
  font-family:Impact,Haettenschweiler,"Arial Narrow Bold",sans-serif;
  font-size:clamp(2.2rem,4vw,4rem);text-transform:uppercase;letter-spacing:.02em;
}
.section-copy{color:var(--muted);max-width:680px}
.category-card{
  min-height:430px;position:relative;overflow:hidden;border:1px solid var(--line);
  display:flex;align-items:flex-end;background:#111;
}
.category-card::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 25%,rgba(0,0,0,.9) 100%);
}
.category-card[data-bg="kol"]{background:url("../images/category-charcoal.webp") center/cover no-repeat,#111}
.category-card[data-bg="pellets"]{background:url("../images/category-pellets.webp") center/cover no-repeat,#111}
.category-card[data-bg="rubs"]{background:url("../images/category-rubs.webp") center/cover no-repeat,#111}
.category-card__body{position:relative;z-index:2;padding:1.7rem}
.category-card h2{
  font-family:Impact,Haettenschweiler,"Arial Narrow Bold",sans-serif;
  font-size:2.35rem;text-transform:uppercase;margin:0 0 .35rem
}
.category-card p{color:#ccc;margin-bottom:.8rem}
.text-link{
  color:#f07a40;text-transform:uppercase;font-weight:800;font-size:.75rem;letter-spacing:.08em;
  text-decoration:none
}
.feature-strip{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.feature{padding:1.5rem 0}
.feature strong{display:block;text-transform:uppercase;letter-spacing:.08em;font-size:.78rem}
.feature span{color:var(--muted);font-size:.9rem}
.brand-row{display:grid;grid-template-columns:repeat(4,1fr);gap:1.25rem}
.brand-pill{border:1px solid var(--line);padding:1.4rem;text-align:center;font-weight:800;color:#c9c4bd}
.category-hero{
  padding:5rem 0 3.5rem;
  background:
    linear-gradient(90deg,rgba(8,9,9,.96),rgba(8,9,9,.46)),
    url("../images/category-hero-charcoal.jpg") center/cover no-repeat,#101010;
  border-bottom:1px solid var(--line);
}
.page-title{
  font-family:Impact,Haettenschweiler,"Arial Narrow Bold",sans-serif;
  text-transform:uppercase;font-size:clamp(4rem,9vw,7rem);line-height:.9;
}
.breadcrumb{--bs-breadcrumb-divider:"/";font-size:.8rem}
.breadcrumb a{color:#aaa;text-decoration:none}
.breadcrumb-item.active{color:#eee}
.product-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
.product-card{border:1px solid var(--line);background:#101212;padding:1rem}
.product-card__image{
  aspect-ratio:4/5;background:#1b1d1d;
  display:grid;place-items:center;margin-bottom:1rem;overflow:hidden
}
.product-card__image img{width:100%;height:100%;object-fit:contain}
.product-brand{font-size:.68rem;color:#e8753f;letter-spacing:.1em;font-weight:800;text-transform:uppercase}
.product-card h2{font-size:1.05rem;margin:.25rem 0 .35rem}
.product-card p{color:var(--muted);font-size:.88rem}
.product-meta{font-size:.78rem;color:#bbb}
.product-detail{background:#e9e4dc;color:#171717;padding:3rem 0 5rem}
.product-detail .breadcrumb-item.active,.product-detail .breadcrumb a{color:#555}
.product-image-main{
  background:#d7d0c5;aspect-ratio:4/5;display:grid;place-items:center;padding:2rem
}
.product-image-main img{max-height:100%;object-fit:contain}
.product-detail h1{
  font-family:Impact,Haettenschweiler,"Arial Narrow Bold",sans-serif;
  text-transform:uppercase;font-size:clamp(2.6rem,5vw,4.8rem);line-height:.95
}
.checks{list-style:none;padding:0;margin:1.4rem 0}
.checks li{margin:.5rem 0;padding-left:1.5rem;position:relative}
.checks li::before{content:"✓";position:absolute;left:0;font-weight:900}
.product-facts{border-top:1px solid #aaa;margin-top:2rem;padding-top:1.4rem}
.product-facts dt{font-weight:800}
.product-facts dd{margin-bottom:.65rem}
.content-panel{background:#fff;padding:2rem;margin-top:2rem}
.site-footer{padding:3rem 0;background:#080909;border-top:1px solid var(--line)}
.site-footer a{color:#aaa;text-decoration:none}
.site-footer a:hover{color:#fff}
.footer-small{color:#777;font-size:.78rem}
.placeholder-note{
  position:fixed;right:1rem;bottom:1rem;z-index:50;background:#292929;color:#ddd;
  border:1px solid #555;padding:.6rem .8rem;font-size:.72rem;max-width:280px
}
@media(max-width:991px){
  .hero{min-height:640px;background-position:65% center}
  .brand-row{grid-template-columns:repeat(2,1fr)}
  .product-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:767px){
  .section{padding:3.5rem 0}
  .hero{min-height:620px;background:
    linear-gradient(90deg,rgba(8,9,9,.97),rgba(8,9,9,.68)),
    url("../images/hero.jpg") center/cover no-repeat,#111}
  .display-bbq{font-size:3.7rem}
  .category-card{min-height:330px}
  .product-grid{grid-template-columns:1fr}
}