/* Man Cave Buyers Guide — design tokens + component classes
   Trimmed from the Lovable kit: Tailwind preflight and the unused
   shadcn/radix utility surface are deliberately excluded so this does
   not fight Astra or Elementor. */

:root{
  --ink:#16181D;
  --surface:#1F2228;
  --brass:#C8873A;
  --brass-lite:#E8B978;
  --paper:#F7F4EF;
  --card:#FFFFFF;
  --verdict:#2E6B4F;
  --muted:#6B6B6B;
  --rule:#E2DCD2;
  --mc-display:"Archivo Black",system-ui,sans-serif;
  --mc-body:"Archivo",system-ui,sans-serif;
  --mc-mono:"Roboto Mono",ui-monospace,monospace;
}

/* ---- Bands: map 1:1 onto an Elementor container ---- */
.band{width:100%}
.band-inner{max-width:1200px;margin-inline:auto;padding-inline:24px}

/* ---- Type ---- */
.font-display{font-family:var(--mc-display)}
.font-mono,.spec,.price{font-family:var(--mc-mono);font-variant-numeric:tabular-nums}
.eyebrow{font-family:var(--mc-mono);letter-spacing:.16em;text-transform:uppercase;font-size:12px}
.measure{max-width:68ch}

/* ---- Buttons ---- */
.btn-brass{background:var(--brass);color:var(--ink);letter-spacing:.06em;text-transform:uppercase;border-radius:2px;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:14px 24px;font-size:14px;font-weight:700;
  transition:background .16s}
.btn-brass:hover{background:var(--brass-lite);color:var(--ink)}
.btn-brass-outline{border:1px solid var(--brass);color:#8A5A1C;letter-spacing:.06em;text-transform:uppercase;border-radius:2px;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 20px;font-size:13px;font-weight:700;
  transition:background .16s,color .16s}
.btn-brass-outline:hover{background:var(--brass);color:var(--ink)}

/* ---- Cards ---- */
.lift{transition:transform .16s,box-shadow .16s,border-color .16s}
.lift:hover{transform:translateY(-4px);box-shadow:0 12px 28px -12px rgba(22,24,29,.28)}
.hover\:border-brass:hover{border-color:var(--brass)}

/* ---- Colour helpers ---- */
.bg-ink{background-color:var(--ink)}
.bg-surface{background-color:var(--surface)}
.bg-paper{background-color:var(--paper)}
.bg-brass{background-color:var(--brass)}
.bg-verdict{background-color:var(--verdict)}
.text-ink{color:var(--ink)}
.text-brass{color:var(--brass)}
.text-verdict{color:var(--verdict)}
.text-muted{color:var(--muted)}
.border-rule{border-color:var(--rule)}
.border-brass{border-color:var(--brass)}
.border-t-brass{border-top-color:var(--brass)}

/* ---- Comparison table: the signature component ---- */
.mc-table-wrap{overflow-x:auto}
.mc-table{width:100%;border-collapse:collapse;min-width:720px}
.mc-table th,.mc-table td{padding:14px 16px;text-align:left;border-bottom:1px solid var(--rule);font-size:15px}
.mc-table thead th{font-family:var(--mc-display);text-transform:uppercase;font-size:13px;letter-spacing:.02em;vertical-align:bottom}
.mc-table tbody tr:nth-child(odd){background:#FBF8F2}
.mc-table td:not(:first-child),.mc-table th:not(:first-child){font-family:var(--mc-mono);font-variant-numeric:tabular-nums}
.mc-table th:first-child,.mc-table td:first-child{position:sticky;left:0;background:var(--card);font-family:var(--mc-body);font-weight:600}
.mc-table tbody tr:nth-child(odd) td:first-child{background:#FBF8F2}
.mc-col-winner{border-top:4px solid var(--brass);background:#FBF6EE}

/* ---- Award ribbon ---- */
.mc-ribbon{display:inline-block;background:var(--brass);color:var(--ink);font-family:var(--mc-mono);font-size:11px;
  letter-spacing:.12em;text-transform:uppercase;padding:5px 10px;border-radius:2px}
.mc-ribbon--verdict{background:var(--verdict);color:#FFFFFF}

/* ---- Trust band numerals ---- */
.mc-stat{font-family:var(--mc-mono);font-size:44px;line-height:1;color:var(--brass);font-variant-numeric:tabular-nums}
.mc-stat-label{font-family:var(--mc-body);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#B8B2A8}

/* ---- Header (matches Lovable prototype) ---- */
.mc-header-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:64px}
.mc-wordmark{display:inline-flex;align-items:baseline;gap:8px;text-decoration:none;white-space:nowrap}
.mc-wm-main{font-family:var(--mc-display);font-size:20px;line-height:1;letter-spacing:-.02em;color:var(--brass)}
.mc-wm-sub{font-family:var(--mc-mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:rgba(232,185,120,.8)}
.mc-search{display:grid;place-items:center;width:36px;height:36px;border:1px solid rgba(255,255,255,.15);border-radius:2px;color:#EFEAE1;background:transparent;cursor:pointer;transition:border-color .16s,color .16s}
.mc-search:hover{border-color:var(--brass);color:var(--brass-lite)}
@media (max-width:640px){.mc-wm-sub{display:none}}

/* ---- Section head row ---- */
.mc-sec-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px;border-bottom:1px solid var(--rule);padding-bottom:24px}
.mc-sec-head h2{font-family:var(--mc-display);text-transform:uppercase;font-size:40px;line-height:1.05;letter-spacing:-.02em;margin:0;color:var(--ink)}
@media (max-width:640px){.mc-sec-head h2{font-size:28px}}

/* ---- Pick cards ---- */
.mc-picks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:40px}
.mc-pick{display:flex;flex-direction:column;border:1px solid var(--rule);background:var(--card)}
.mc-pick-media{position:relative}
.mc-pick-img{position:relative;aspect-ratio:4/3;display:flex;align-items:flex-end;justify-content:flex-start;overflow:hidden;padding:16px;background:linear-gradient(150deg,#EFEAE1 0%,#DED6C8 55%,#C9BFAE 100%)}
.mc-pick-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.mc-pick-name{position:relative;background:rgba(22,24,29,.85);padding:4px 8px;color:#EFEAE1}
.mc-pick-badge{position:absolute;top:16px;left:0;padding:8px 12px;color:#F7F4EF}
.mc-pick-badge--verdict{background:var(--verdict)}
.mc-pick-badge--brass{background:var(--brass);color:var(--ink)}
.mc-pick-badge--ink{background:var(--ink)}
.mc-pick-body{display:flex;flex:1;flex-direction:column;padding:24px}
.mc-pick-body h3{font-family:var(--mc-display);font-size:20px;text-transform:uppercase;line-height:1.15;margin:0;color:var(--ink)}
.mc-pick-desc{margin-top:12px;flex:1;font-size:15px;color:var(--muted);line-height:1.6}
.mc-pick-price{margin-top:20px;margin-bottom:0;font-family:var(--mc-mono);font-size:20px;color:var(--ink)}
.mc-pick .btn-brass-outline{margin-top:20px;align-self:flex-start;text-decoration:none}
@media (max-width:900px){.mc-picks{grid-template-columns:1fr}}

@media (max-width:768px){
  .band-inner{padding-inline:16px}
  .mc-stat{font-size:32px}
}