/* Battlefield Bagel Co — Conversion-first, Light + Gold UI */

:root{
  --bg:#FFFCF6;
  --card:#FFFFFF;
  --ink:#1F2937;
  --muted:#6B7280;
  --gold-a:#F7E3A1;
  --gold-b:#E7C566;
  --gold-ink:#3A2A00;
  --accent:#0F766E;
  --ring:rgba(17,24,39,.06);
  --shadow:0 12px 28px rgba(0,0,0,.06);
}

*{ box-sizing:border-box; min-width:0 }
html,body{ margin:0; padding:0; width:100%; overflow-x:hidden; background:var(--bg) }
body{
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:var(--ink); line-height:1.6;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
body.bb-lock{ overflow:hidden; touch-action:none }

img{ max-width:100%; height:auto; display:block }
a{ color:var(--ink); text-underline-offset:3px; text-decoration-thickness:1px }
.container{ max-width:1200px; margin:0 auto; padding:0 20px }
.section{ padding:56px 0 }
.section-sm{ padding:36px 0 }
.h1{ font-size:clamp(28px,4.2vw,48px); line-height:1.15; margin:0 0 10px }
.h2{ font-size:clamp(22px,3vw,32px); margin:0 0 8px }
.lead{ color:var(--muted); margin:0 0 18px }

/* Cards */
.card{
  background:var(--card);
  border:1px solid #EFE7D6;
  border-radius:18px;
  box-shadow:var(--shadow);
}

/* Brand bar */
.brandbar{
  background:linear-gradient(180deg, rgba(247,227,161,.65), rgba(247,227,161,.15));
  border-bottom:1px solid #F2E6C9;
}
.brandbar .brand{ display:flex; align-items:center; justify-content:center; padding:18px 0 }
.brandbar img{ height:96px; max-width:100% }
@media (max-width:640px){ .brandbar img{ height:72px } }

/* Top bar */
.topbar{
  position:sticky; top:0; z-index:60;
  background:rgba(255,252,246,.92);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border-bottom:1px solid #F2E6C9;
}
.topbar .row{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 0 }
.hamburger{
  display:inline-flex; align-items:center; justify-content:center;
  width:42px; height:42px; border-radius:10px; border:1px solid #E8DDBE; background:#fff; cursor:pointer;
}
.hamburger svg{ width:22px; height:22px }
.nav-row{ display:none; gap:18px; align-items:center }
.nav-row a{ text-decoration:none; font-weight:700; padding:6px 2px; border-radius:6px }
.nav-row a:hover{ background:#fff; box-shadow:0 1px 0 rgba(0,0,0,.05) }
@media (min-width:980px){ .hamburger{ display:none } .nav-row{ display:flex } }
.btn{
  border:0; border-radius:12px; padding:11px 16px; cursor:pointer; font-weight:600;
  background:#fff; border:1px solid #E8DDBE; color:var(--ink);
}
.btn-primary{ background:var(--ink); color:#fff; border-color:var(--ink) }
#cart-count{ background:var(--ink); color:#fff; padding:2px 9px; border-radius:999px; font-size:.8rem }

/* Drawer (mobile menu) */
#nav-overlay{ position:fixed; inset:0; background:rgba(0,0,0,.25); opacity:0; pointer-events:none; transition:opacity .2s; z-index:70 }
#nav-overlay.show{ opacity:1; pointer-events:auto }
#nav-drawer{
  position:fixed; top:0; left:-86vw; width:86vw; max-width:420px; height:100vh; z-index:80;
  background:#fff; border-right:1px solid #E8DDBE; box-shadow:16px 0 40px rgba(0,0,0,.15);
  transition:left .25s; display:flex; flex-direction:column;
}
#nav-drawer.show{ left:0 }
.nav-drawer-head{ display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border-bottom:1px solid #F0E7CF }
.nav-drawer-body{ padding:10px 16px; overflow:auto; flex:1 }
.nav-drawer-links{ display:flex; flex-direction:column; gap:6px; margin:10px 0 20px }
.nav-link{ display:flex; align-items:center; gap:12px; padding:12px; border-radius:12px; text-decoration:none; color:var(--ink); border:1px solid transparent }
.nav-link:hover{ background:#FFFAEE; border-color:#E8DDBE }

/* Background accents */
.bagel-bg{
  position:absolute; inset:0; pointer-events:none; z-index:-1;
  background:
    radial-gradient(700px 260px at 20% 10%, rgba(247,227,161,.45), transparent 70%),
    radial-gradient(900px 460px at 80% 0%, rgba(231,197,102,.22), transparent 60%),
    radial-gradient(700px 260px at 60% 90%, rgba(231,197,102,.16), transparent 70%);
}

/* Hero grid */
.hero{ position:relative; padding:32px 0 10px }
.hero-grid{ display:grid; gap:28px; grid-template-columns:1.05fr .95fr; align-items:start }
@media (max-width: 960px){ .hero-grid{ grid-template-columns: 1fr } }
.hero-card{ padding:18px; overflow:hidden }
.badge{
  display:inline-block; border-radius:999px; font-weight:700; font-size:.8rem; padding:4px 10px;
  background: linear-gradient(90deg,var(--gold-a),var(--gold-b)); color:var(--gold-ink);
  border:1px solid #EBDCA8;
}

/* Conversion belt */
.belt{ list-style:none; padding:0; margin:12px 0; display:flex; gap:8px; flex-wrap:wrap }
.belt-step{ display:flex; align-items:center; gap:8px; background:#fff; border:1px solid #E8DDBE; padding:8px 12px; border-radius:12px; font-weight:600 }
.belt-step span{ display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:999px; background:var(--ink); color:#fff; font-size:.85rem }
.belt-step.active{ box-shadow:0 2px 0 rgba(0,0,0,.05) }

/* Chooser */
.chooser{ margin-top:12px; padding:14px }
.chooser-row{ display:grid; grid-template-columns: 140px 1fr; gap:12px; align-items:center; margin:8px 0 }
@media (max-width:540px){ .chooser-row{ grid-template-columns: 1fr } }
.input{ width:100%; border:1px solid #E8DDBE; background:#fff; border-radius:10px; padding:10px 12px; font:inherit }
.trust{ display:flex; gap:10px; flex-wrap:wrap; margin-top:6px }
.trust-pill{ background:#fff; border:1px solid #E8DDBE; padding:6px 10px; border-radius:999px; font-weight:600; font-size:.92rem }

/* Grids */
.grid{ display:grid; gap:16px; grid-template-columns: repeat(3, minmax(0,1fr)); }
@media (max-width: 980px){ .grid{ grid-template-columns: repeat(2, minmax(0,1fr)) } }
@media (max-width: 640px){ .grid{ grid-template-columns: 1fr } }

/* Quick packs */
.quickpacks{ padding:16px }
.qp-head{ display:flex; align-items:center; gap:10px; margin-bottom:8px; flex-wrap:wrap }
.qp-row{ display:flex; gap:10px; flex-wrap:wrap }
.pack{ font-weight:700 }

/* Products */
.product-card{ padding:16px }
.pc-head{ display:flex; align-items:center; gap:10px; margin-bottom:6px }
.pc-badge{ background:var(--accent); color:#fff; font-size:.75rem; padding:3px 8px; border-radius:999px }
.pc-desc{ color:#565; margin:6px 0 10px }
.pc-foot{ display:flex; justify-content:space-between; align-items:center; margin-top:10px; gap:10px; flex-wrap:wrap }
.pc-price{ font-weight:700 }

/* Placeholder tile */
.placeholder{
  aspect-ratio: 4/3;
  border-radius:14px; border:1px solid #EBDCA8;
  background: radial-gradient(120% 100% at 20% 10%, #FFF7DD, #FFEFC3);
  display:flex; align-items:center; justify-content:center;
  font-weight:700; color:var(--gold-ink);
  margin-bottom:10px;
}

/* Cart mini */
.cart{ padding:14px }
.cart-empty{ color:var(--muted) }
.cart-row{
  display:grid; grid-template-columns:1fr auto auto auto; gap:8px; align-items:center;
  padding:8px 0; border-bottom:1px dashed #F0E7CF
}
.cart-row:last-child{ border-bottom:0 }
.cart-title{ font-weight:600; word-break:break-word }
.cart-qty{ color:var(--muted) }
.cart-sub{ font-weight:700 }
.cart-remove{ background:transparent; border:0; color:#b00; cursor:pointer; font-size:18px }
.cart-total{ display:flex; justify-content:space-between; padding-top:10px; font-size:1.05rem }

/* Cart drawer */
.cart-overlay{ position:fixed; inset:0; background:rgba(0,0,0,.25); opacity:0; pointer-events:none; transition:opacity .2s; z-index:70 }
.cart-overlay.show{ opacity:1; pointer-events:auto }
.cart-panel{
  position:fixed; top:0; right:-420px; width:380px; max-width:92vw; height:100vh;
  background:#fff; box-shadow:-16px 0 40px rgba(0,0,0,.15); transition:right .25s; z-index:80; display:flex; flex-direction:column; border-left:1px solid #E8DDBE;
}
.cart-panel.show{ right:0 }
.cart-panel-header{ display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border-bottom:1px solid #F0E7CF }
.cart-panel-body{ padding:14px 16px; overflow:auto; flex:1 }
.cart-panel-footer{ padding:12px 16px; border-top:1px solid #F0E7CF; display:flex; gap:10px; flex-direction:column }
.qty{ display:inline-flex; align-items:center; gap:8px; border:1px solid #E8DDBE; border-radius:10px; padding:4px 8px }
.qty button{ background:transparent; border:0; cursor:pointer; font-size:14px; padding:2px 6px }

/* Poll */
#poll .choice{ display:flex; align-items:center; justify-content:space-between; gap:14px; padding:12px 0; border-bottom:1px dashed #F0E7CF }
#poll .choice:last-child{ border-bottom:0 }
#poll h4{ margin:0 0 4px }
#poll .bar{ background:#FFF3D8; height:8px; border-radius:99px; overflow:hidden; }
#poll .bar b{ display:block; height:100%; width:0; background:linear-gradient(90deg,var(--gold-a),var(--gold-b)); transition:width .7s ease; }
#poll .meta{ color:#6B7280; font-size:.9rem; margin-top:6px }
.vote-btn{ border:1px solid #E8DDBE; background:#fff; border-radius:10px; padding:8px 12px; cursor:pointer; font-weight:600 }
.vote-btn[disabled]{ opacity:.55; cursor:not-allowed }

/* Suggest form */
.suggest{ margin-top:14px; display:grid; gap:10px }
.textarea{ min-height:90px; resize:vertical }

/* Blog + Impact */
.blog-card{ padding:16px }
.blog-meta{ color:var(--muted); font-size:.9rem; margin-top:6px }
.impact{ display:grid; gap:16px; grid-template-columns:1fr 1fr; }
@media (max-width:900px){ .impact{ grid-template-columns:1fr } }
.impact .tile{ padding:16px }

/* Toast */
.bb-toast{ position:fixed; left:50%; bottom:22px; transform:translateX(-50%) translateY(20px); background:#111827; color:#fff; padding:10px 14px; border-radius:10px; opacity:0; pointer-events:none; transition: all .25s ease; z-index:90 }
.bb-toast.show{ opacity:1; transform:translateX(-50%) translateY(0) }