/*
Theme Name: BFB Industrial
Theme URI: https://battleforgedboats.au
Author: Battle Forged Boats
Description: Battle Forged Boats — gunmetal / raw alloy / ember industrial theme. Veteran-owned Australian plate ally boat builder. Rebuilt from the Battle Forged Lovable design.
Version: 1.0.0
Text Domain: bfb-industrial
Requires PHP: 7.4
*/

/* ==========================================================================
   DESIGN TOKENS — translated 1:1 from the Lovable design system
   Gunmetal / raw alloy / ember. Industrial, honest, no gloss.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Barlow:wght@400;500;600;700&family=Barlow+Condensed:wght@500;600&display=swap');

:root {
  --radius: 2px;

  /* Base: cold rolled steel */
  --background: oklch(0.17 0.008 250);
  --foreground: oklch(0.94 0.004 250);
  --surface: oklch(0.21 0.009 250);
  --surface-2: oklch(0.26 0.01 250);

  --card: oklch(0.21 0.009 250);

  /* Ember — arc-weld orange, used sparingly */
  --primary: oklch(0.68 0.185 48);
  --primary-foreground: oklch(0.16 0.01 50);
  --ember: oklch(0.68 0.185 48);

  --secondary: oklch(0.26 0.01 250);
  --muted: oklch(0.24 0.009 250);
  --muted-foreground: oklch(0.66 0.012 250);

  --border: oklch(0.32 0.011 250);
  --input: oklch(0.32 0.011 250);

  /* Raw brushed aluminium */
  --alloy: oklch(0.78 0.008 250);
  --steel: oklch(0.45 0.012 250);

  --gradient-hull: linear-gradient(180deg, oklch(0.17 0.008 250 / 0.15) 0%, oklch(0.17 0.008 250 / 0.7) 55%, oklch(0.17 0.008 250) 100%);
  --gradient-ember: linear-gradient(100deg, oklch(0.68 0.185 48), oklch(0.74 0.16 65));

  --font-display: "Bebas Neue", "Arial Narrow", sans-serif;
  --font-sans: "Barlow", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "Barlow Condensed", ui-monospace, monospace;
}

/* ==========================================================================
   BASE
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-font-smoothing: antialiased; }

body {
  background-color: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  margin: 0;
  line-height: 1.5;
}

img { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 0.92;
  text-transform: uppercase;
  margin: 0;
}

p { margin: 0; }

::selection { background: var(--ember); color: var(--primary-foreground); }

.container {
  max-width: 80rem; /* 7xl */
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}
@media (min-width: 768px) {
  .container { padding-left: 2rem; padding-right: 2rem; }
}

.container-narrow {
  max-width: 48rem; /* 3xl */
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}
@media (min-width: 768px) {
  .container-narrow { padding-left: 2rem; padding-right: 2rem; }
}

/* ==========================================================================
   UTILITY CLASSES — translated from @utility blocks in the source
   ========================================================================== */

.eyebrow {
  font-family: var(--font-mono);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.24em;
  font-size: 0.75rem;
  color: var(--ember);
  display: block;
}

.hull-fade { background-image: var(--gradient-hull); }

.hazard-rule {
  height: 6px;
  background-image: repeating-linear-gradient(-45deg, var(--ember) 0px, var(--ember) 8px, transparent 8px, transparent 16px);
  opacity: 0.55;
}

.plate-texture {
  background-color: var(--surface);
  background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,0.045) 1px, transparent 0);
  background-size: 22px 22px;
}

.stat-line { border-top: 1px solid var(--border); padding-top: 0.75rem; }

.link-underline { position: relative; }
.link-underline::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  height: 1px;
  width: 0;
  background: var(--ember);
  transition: width 0.25s ease;
}
.link-underline:hover::after { width: 100%; }

.btn {
  display: inline-block;
  padding: 0.875rem 1.75rem;
  font-family: var(--font-mono);
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  border: none;
  cursor: pointer;
  transition: opacity 0.2s, background-color 0.2s;
}
.btn-primary { background: var(--primary); color: var(--primary-foreground); }
.btn-primary:hover { opacity: 0.9; }
.btn-outline { border: 1px solid var(--border); color: var(--foreground); background: transparent; }
.btn-outline:hover { background: var(--surface-2); }
.btn-outline-alloy { border: 1px solid rgba(200,200,210,0.5); color: var(--foreground); background: transparent; }
.btn-outline-alloy:hover { background: rgba(255,255,255,0.1); }

.border-bfb { border: 1px solid var(--border); }

/* ==========================================================================
   LAYOUT
   ========================================================================== */

.bfb-site { display: flex; min-height: 100vh; flex-direction: column; background: var(--background); }
.bfb-main { flex: 1; }

/* ==========================================================================
   NAV
   ========================================================================== */

.bfb-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid var(--border);
  background: color-mix(in oklab, var(--background) 85%, transparent);
  backdrop-filter: blur(8px);
}
.bfb-nav-inner {
  max-width: 80rem;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
}
@media (min-width: 768px) { .bfb-nav-inner { padding: 1rem 2rem; } }

.bfb-logo { display: flex; align-items: baseline; gap: 0.625rem; }
.bfb-logo-main { font-family: var(--font-display); font-size: 1.5rem; line-height: 1; letter-spacing: 0.02em; color: var(--foreground); text-transform: uppercase; }
.bfb-logo-sub { display: none; font-family: var(--font-mono); font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.28em; color: var(--ember); }
@media (min-width: 640px) { .bfb-logo-sub { display: block; } }

.bfb-nav-links { display: none; align-items: center; gap: 2rem; }
@media (min-width: 768px) { .bfb-nav-links { display: flex; } }
.bfb-nav-links a {
  font-family: var(--font-mono);
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--muted-foreground);
  transition: color 0.2s;
}
.bfb-nav-links a:hover, .bfb-nav-links a.current { color: var(--foreground); }
.bfb-nav-cta {
  background: var(--primary);
  color: var(--primary-foreground) !important;
  padding: 0.625rem 1.25rem;
}
.bfb-nav-cta:hover { opacity: 0.9; }

.bfb-nav-toggle { display: block; background: none; border: none; color: var(--foreground); cursor: pointer; }
@media (min-width: 768px) { .bfb-nav-toggle { display: none; } }

.bfb-nav-mobile { display: none; border-top: 1px solid var(--border); background: var(--surface); padding: 1rem 1.25rem; }
.bfb-nav-mobile.is-open { display: block; }
.bfb-nav-mobile a {
  display: block;
  border-bottom: 1px solid var(--border);
  padding: 0.875rem 0;
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--foreground);
  text-transform: uppercase;
}
.bfb-nav-mobile .bfb-nav-cta { margin-top: 1rem; text-align: center; border-bottom: none; }

/* ==========================================================================
   FOOTER
   ========================================================================== */

.bfb-footer { border-top: 1px solid var(--border); }
.bfb-footer-inner { max-width: 80rem; margin: 0 auto; padding: 3.5rem 1.25rem; }
@media (min-width: 768px) { .bfb-footer-inner { padding: 3.5rem 2rem; } }
.bfb-footer-top { display: flex; flex-direction: column; gap: 2.5rem; }
@media (min-width: 768px) { .bfb-footer-top { flex-direction: row; align-items: flex-start; justify-content: space-between; } }
.bfb-footer-brand { max-width: 24rem; }
.bfb-footer-brand p:first-child { font-family: var(--font-display); font-size: 1.875rem; color: var(--foreground); }
.bfb-footer-brand p.desc { margin-top: 1rem; font-size: 0.875rem; line-height: 1.6; color: var(--muted-foreground); }
.bfb-footer-brand p.tag { margin-top: 1.25rem; font-family: var(--font-mono); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.2em; color: var(--ember); }
.bfb-footer-links { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem 3rem; }
.bfb-footer-links a { font-size: 0.875rem; color: var(--muted-foreground); width: fit-content; }
.bfb-footer-links a:hover { color: var(--foreground); }
.bfb-footer-bottom {
  margin-top: 3rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  border-top: 1px solid var(--border);
  padding-top: 1.5rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--steel);
}
@media (min-width: 768px) { .bfb-footer-bottom { flex-direction: row; justify-content: space-between; } }

/* ==========================================================================
   HERO / SECTION PATTERNS (shared across pages)
   ========================================================================== */

.bfb-hero-image { position: relative; isolation: isolate; overflow: hidden; }
.bfb-hero-image--tall { aspect-ratio: 16/10; }
@media (min-width: 768px) { .bfb-hero-image--tall { aspect-ratio: 1988/900; } }
.bfb-hero-image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bfb-hero-fade { position: absolute; inset-inline: 0; bottom: 0; height: 33%; background: linear-gradient(to top, var(--background), transparent); }

.bfb-hero-content { position: relative; max-width: 80rem; margin: 0 auto; padding: 2rem 1.25rem 4rem; }
@media (min-width: 768px) { .bfb-hero-content { padding: 2.5rem 2rem 6rem; } }

.bfb-hero-content h1 {
  margin-top: 1.25rem;
  max-width: 56rem;
  font-size: clamp(2.8rem, 9vw, 7rem);
  line-height: 0.85;
  color: var(--foreground);
}
.bfb-hero-content h1 .ember { color: var(--ember); }
.bfb-hero-content .lede { margin-top: 1.5rem; max-width: 36rem; font-size: 1rem; line-height: 1.6; color: rgba(255,255,255,0.8); }
@media (min-width: 768px) { .bfb-hero-content .lede { font-size: 1.125rem; } }
.bfb-hero-actions { margin-top: 2.25rem; display: flex; flex-wrap: wrap; gap: 0.75rem; }

.bfb-page-hero { position: relative; isolation: isolate; overflow: hidden; border-bottom: 1px solid var(--border); }
.bfb-page-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.42; }
.bfb-page-hero-overlay { position: absolute; inset: 0; }
.bfb-page-hero-inner { position: relative; max-width: 80rem; margin: 0 auto; padding: 6rem 1.25rem 4rem; }
@media (min-width: 768px) { .bfb-page-hero-inner { padding: 8rem 2rem 5rem; } }
.bfb-page-hero-inner h1 { margin-top: 1rem; max-width: 48rem; font-size: clamp(3rem, 9vw, 7rem); line-height: 0.86; color: var(--foreground); }
.bfb-page-hero-inner .lede { margin-top: 1.5rem; max-width: 36rem; font-size: 1rem; line-height: 1.6; color: rgba(255,255,255,0.8); }
@media (min-width: 768px) { .bfb-page-hero-inner .lede { font-size: 1.125rem; } }
.bfb-page-hero--noimg .bfb-page-hero-inner { padding-top: 4rem; }

.bfb-section { max-width: 80rem; margin: 0 auto; padding: 5rem 1.25rem; }
@media (min-width: 768px) { .bfb-section { padding: 7rem 2rem; } }
.bfb-section--tight { padding-top: 4rem; padding-bottom: 4rem; }
.bfb-section-bordered { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }

.bfb-section h2 { margin-top: 1rem; font-size: clamp(2.4rem, 6vw, 4.5rem); color: var(--foreground); }
.bfb-section h2.big { font-size: clamp(2.5rem, 7vw, 5rem); }

/* MARKS strip (four-up feature grid on homepage) */
.bfb-marks { border-bottom: 1px solid var(--border); }
.bfb-marks-grid { max-width: 80rem; margin: 0 auto; display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--border); }
@media (min-width: 640px) { .bfb-marks-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .bfb-marks-grid { grid-template-columns: repeat(4, 1fr); } }
.bfb-marks-grid > div { background: var(--surface); padding: 2rem 1.5rem; }
.bfb-marks-grid h3 { font-family: var(--font-display); font-size: 1.5rem; font-weight: 400; text-transform: none; color: var(--foreground); }
.bfb-marks-grid p { margin-top: 0.5rem; font-size: 0.875rem; line-height: 1.6; color: var(--muted-foreground); }

/* Two-column layouts */
.bfb-cols { display: grid; gap: 3rem; }
@media (min-width: 1024px) { .bfb-cols-featured { grid-template-columns: 1.15fr 0.85fr; } }
@media (min-width: 1024px) { .bfb-cols-process { grid-template-columns: 0.9fr 1.1fr; } }
@media (min-width: 1024px) { .bfb-cols-purpose { grid-template-columns: 1fr 1fr; align-items: center; } }
@media (min-width: 1024px) { .bfb-cols-boats { grid-template-columns: 1.1fr 0.9fr; } }
@media (min-width: 1024px) { .bfb-cols-contact { grid-template-columns: 1.1fr 0.9fr; } }

.bfb-featured-img { width: 100%; border: 1px solid var(--border); object-fit: cover; }

/* Spec definition list */
.bfb-spec dl, .bfb-spec { margin: 0; }
.bfb-spec-row { display: flex; align-items: baseline; justify-content: space-between; gap: 1.5rem; margin-bottom: 1rem; }
.bfb-spec-row dt { font-family: var(--font-mono); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.18em; color: var(--steel); margin: 0; }
.bfb-spec-row dd { text-align: right; font-family: var(--font-display); font-size: 1.25rem; color: var(--foreground); margin: 0; }
.bfb-spec-grid { display: grid; gap: 0 4rem; }
@media (min-width: 768px) { .bfb-spec-grid { grid-template-columns: repeat(2, 1fr); } }

/* Numbered process list */
.bfb-process-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; justify-content: center; }
.bfb-process-list li { border-top: 1px solid var(--border); padding: 2rem 0; }
.bfb-process-list li:last-child { border-bottom: 1px solid var(--border); }
.bfb-process-item { display: flex; gap: 1.5rem; }
.bfb-process-num { font-family: var(--font-display); font-size: 2.25rem; line-height: 1; color: var(--ember); }
.bfb-process-item h3 { font-size: 1.5rem; color: var(--foreground); text-transform: none; }
.bfb-process-item p { margin-top: 0.625rem; max-width: 28rem; font-size: 1rem; line-height: 1.6; color: var(--muted-foreground); }

/* Feature list with slash marker */
.bfb-feature-list { list-style: none; margin: 1.75rem 0 0; padding: 0; }
.bfb-feature-list li { display: flex; gap: 1rem; border-top: 1px solid var(--border); padding: 0.875rem 0; font-size: 0.875rem; color: rgba(255,255,255,0.85); }
.bfb-feature-list li:last-child { border-bottom: 1px solid var(--border); }
.bfb-feature-list .marker { font-family: var(--font-mono); color: var(--ember); }

/* Gallery grid */
.bfb-gallery { margin-top: 3rem; display: grid; gap: 1.25rem; }
@media (min-width: 768px) { .bfb-gallery { grid-template-columns: repeat(2, 1fr); } }
.bfb-gallery img { aspect-ratio: 4/3; width: 100%; border: 1px solid var(--border); object-fit: cover; }

/* Four-up use cases */
.bfb-uses-grid { margin-top: 3rem; display: grid; gap: 1px; background: var(--border); }
@media (min-width: 640px) { .bfb-uses-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .bfb-uses-grid { grid-template-columns: repeat(4, 1fr); } }
.bfb-uses-grid > div { background: var(--background); padding: 2rem 1.5rem; }
.bfb-uses-grid h3 { font-size: 1.5rem; color: var(--foreground); text-transform: none; }
.bfb-uses-grid p { margin-top: 0.75rem; font-size: 0.875rem; line-height: 1.6; color: var(--muted-foreground); }

/* CTA band */
.bfb-cta { border-top: 1px solid var(--border); background: var(--surface-2); }
.bfb-cta-inner { max-width: 80rem; margin: 0 auto; padding: 5rem 1.25rem; text-align: center; }
@media (min-width: 768px) { .bfb-cta-inner { padding: 6rem 2rem; } }
.bfb-cta-inner h2 { font-size: clamp(2.6rem, 8vw, 6rem); line-height: 0.88; color: var(--foreground); }
.bfb-cta-inner p { margin: 1.25rem auto 0; max-width: 36rem; font-size: 1rem; line-height: 1.6; color: var(--muted-foreground); }
.bfb-cta-inner .btn { margin-top: 2.25rem; }

/* ==========================================================================
   ARTICLE / LONG-FORM PAGES (purpose, plate-alloy)
   ========================================================================== */

.bfb-article { max-width: 48rem; margin: 0 auto; padding: 4rem 1.25rem; }
@media (min-width: 768px) { .bfb-article { padding: 6rem 2rem; } }
.bfb-article > p.lead { font-size: 1.25rem; line-height: 1.6; color: var(--foreground); }
@media (min-width: 768px) { .bfb-article > p.lead { font-size: 1.5rem; } }
.bfb-article p.body-text { margin-top: 2rem; font-size: 1rem; line-height: 1.6; color: var(--muted-foreground); }
.bfb-article h2 { margin-top: 4rem; font-size: clamp(2rem, 5vw, 3rem); color: var(--foreground); }
.bfb-article h3 { font-size: 1.5rem; color: var(--foreground); text-transform: none; }
.bfb-article img { margin: 3rem 0; width: 100%; border: 1px solid var(--border); object-fit: cover; }
.bfb-article blockquote {
  margin: 3rem 0;
  border-left: 2px solid var(--ember);
  padding-left: 1.5rem;
}
.bfb-article blockquote p { font-family: var(--font-display); font-size: 1.875rem; line-height: 1.05; color: var(--foreground); text-transform: none; }
@media (min-width: 768px) { .bfb-article blockquote p { font-size: 2.25rem; } }
.bfb-article .value-block { border-top: 1px solid var(--border); padding: 1.5rem 0; }
.bfb-article .value-block:last-child { border-bottom: 1px solid var(--border); }
.bfb-article .value-block h3 { text-transform: none; }
.bfb-article .value-block p { margin-top: 0.625rem; font-size: 1rem; line-height: 1.6; color: var(--muted-foreground); }
.bfb-article .callout-box { margin-top: 4rem; border: 1px solid var(--border); background: var(--surface); padding: 2rem; }
@media (min-width: 768px) { .bfb-article .callout-box { padding: 2.5rem; } }
.bfb-article .callout-box h2 { margin-top: 0; font-size: clamp(1.8rem, 4.5vw, 2.6rem); }
.bfb-article .callout-box p { margin-top: 1rem; font-size: 1rem; line-height: 1.6; color: var(--muted-foreground); }
.bfb-article .callout-box a.tel { color: var(--ember); }

/* Comparison table (plate alloy page) */
.bfb-compare-table { margin-top: 2rem; overflow-x: auto; border: 1px solid var(--border); }
.bfb-compare-table table { width: 100%; border-collapse: collapse; text-align: left; font-size: 0.875rem; }
.bfb-compare-table thead { background: var(--surface-2); }
.bfb-compare-table th { padding: 0.75rem 1rem; font-family: var(--font-mono); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.16em; color: var(--steel); }
.bfb-compare-table th.ember-col { color: var(--ember); }
.bfb-compare-table td { padding: 0.875rem 1rem; border-top: 1px solid var(--border); }
.bfb-compare-table td.label { font-family: var(--font-mono); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--steel); }
.bfb-compare-table td.plate { color: var(--foreground); }
.bfb-compare-table td.pressed { color: var(--muted-foreground); }

/* ==========================================================================
   CONTACT FORM
   ========================================================================== */

.bfb-form-label { font-family: var(--font-mono); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.18em; color: var(--steel); display: block; }
.bfb-form-field {
  margin-top: 0.5rem;
  width: 100%;
  border: 1px solid var(--input);
  background: var(--surface);
  padding: 0.75rem 1rem;
  font-size: 1rem;
  color: var(--foreground);
  font-family: var(--font-sans);
}
.bfb-form-field:focus { outline: none; border-color: var(--ember); }
.bfb-form-field::placeholder { color: var(--steel); }
.bfb-form-row { display: grid; gap: 1.5rem; }
@media (min-width: 640px) { .bfb-form-row { grid-template-columns: repeat(2, 1fr); } }
.bfb-form-group { margin-top: 1.5rem; }
.bfb-usecase-options { margin-top: 0.75rem; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.bfb-usecase-btn {
  border: 1px solid var(--border);
  padding: 0.625rem 1rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--muted-foreground);
  background: transparent;
  cursor: pointer;
}
.bfb-usecase-btn:hover { border-color: var(--ember); color: var(--foreground); }
.bfb-usecase-btn.is-active { border-color: var(--ember); background: var(--primary); color: var(--primary-foreground); }
.bfb-form-submit { margin-top: 2rem; width: 100%; }
@media (min-width: 640px) { .bfb-form-submit { width: auto; } }
.bfb-form-hint { margin-top: 0.75rem; font-size: 0.75rem; color: var(--steel); }

.bfb-contact-aside .box { border: 1px solid var(--border); background: var(--surface); padding: 2rem; }
.bfb-contact-aside .box.plain { background: transparent; margin-top: 1.5rem; }
.bfb-contact-aside .direct-email { margin-top: 0.75rem; display: block; font-family: var(--font-display); font-size: 1.875rem; color: var(--foreground); }
.bfb-contact-aside .direct-email:hover { color: var(--ember); }
.bfb-contact-aside p.note { margin-top: 1.5rem; font-size: 0.875rem; line-height: 1.6; color: var(--muted-foreground); }
.bfb-next-steps { list-style: none; margin: 1.25rem 0 0; padding: 0; }
.bfb-next-steps li { display: flex; gap: 1rem; border-top: 1px solid var(--border); padding: 1rem 0; }
.bfb-next-steps li:last-child { border-bottom: 1px solid var(--border); }
.bfb-next-steps .num { font-family: var(--font-display); font-size: 1.5rem; line-height: 1; color: var(--ember); }
.bfb-next-steps span.desc { font-size: 0.875rem; line-height: 1.6; color: var(--muted-foreground); }

/* ==========================================================================
   WOOCOMMERCE — Ship's Store styled to match
   ========================================================================== */

.bfb-store-hero { border-bottom: 1px solid var(--border); }
.bfb-store-hero-inner { max-width: 80rem; margin: 0 auto; padding: 5rem 1.25rem 7rem; }
@media (min-width: 768px) { .bfb-store-hero-inner { padding: 5rem 2rem 7rem; } }
.bfb-store-hero-inner h1 { margin-top: 1.25rem; max-width: 48rem; font-size: clamp(2.5rem, 6vw, 4.5rem); line-height: 0.95; color: var(--foreground); }
.bfb-store-hero-inner .lede { margin-top: 1.5rem; max-width: 36rem; font-size: 1rem; line-height: 1.6; color: var(--muted-foreground); }

.bfb-store-toolbar {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  border-bottom: 1px solid var(--border);
  padding-bottom: 1.5rem;
}
@media (min-width: 768px) { .bfb-store-toolbar { flex-direction: row; align-items: center; justify-content: space-between; } }
.bfb-store-toolbar input[type="search"] {
  width: 100%;
  max-width: 24rem;
  border: 1px solid var(--border);
  background: var(--surface);
  padding: 0.75rem 1rem;
  font-family: var(--font-mono);
  font-size: 0.875rem;
  color: var(--foreground);
}
.bfb-store-toolbar input[type="search"]:focus { outline: none; border-color: var(--ember); }
.bfb-store-count { font-family: var(--font-mono); font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.22em; color: var(--muted-foreground); }

.bfb-store-cats { display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 1.5rem 0; }
.bfb-store-cats a {
  border: 1px solid var(--border);
  padding: 0.5rem 1rem;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--muted-foreground);
}
.bfb-store-cats a:hover { color: var(--foreground); }
.bfb-store-cats a.is-active { border-color: var(--ember); background: var(--ember); color: var(--primary-foreground); }

/* Product grid — overrides WooCommerce default archive grid */
ul.products {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 1px !important;
  background: var(--border);
  list-style: none;
  margin: 2rem 0 0 !important;
  padding: 0 !important;
}
@media (min-width: 768px) { ul.products { grid-template-columns: repeat(3, 1fr) !important; } }
@media (min-width: 1024px) { ul.products { grid-template-columns: repeat(4, 1fr) !important; } }

ul.products li.product {
  background: var(--surface);
  border: 1px solid var(--border);
  transition: border-color 0.2s;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none;
}
ul.products li.product:hover { border-color: color-mix(in oklab, var(--ember) 60%, var(--border)); }

ul.products li.product a { display: flex; flex-direction: column; height: 100%; }
ul.products li.product img {
  aspect-ratio: 1/1;
  width: 100%;
  object-fit: contain;
  background: var(--background);
  padding: 1rem;
}
ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 0.875rem;
  line-height: 1.4;
  color: var(--foreground);
  text-transform: none;
  padding: 1rem 1rem 0;
  margin: 0;
}
ul.products li.product .price {
  margin-top: auto;
  padding: 0.5rem 1rem 1rem;
  font-family: var(--font-display);
  font-size: 1.25rem;
  color: var(--foreground);
}
ul.products li.product .price ins { text-decoration: none; }
ul.products li.product .price del { color: var(--steel); opacity: 0.7; }
ul.products li.product .button { display: none; } /* keep grid clean, "add to cart" lives on single product */

.woocommerce-pagination { margin-top: 3rem; text-align: center; }
.woocommerce-pagination .page-numbers { font-family: var(--font-mono); font-size: 0.8rem; }

/* Single product page */
.single-product .bfb-section { padding-top: 4rem; }
.woocommerce div.product .woocommerce-product-gallery__image { border: 1px solid var(--border); }
.woocommerce div.product .product_title { font-family: var(--font-display); font-size: clamp(2rem, 5vw, 3rem); color: var(--foreground); text-transform: uppercase; }
.woocommerce div.product p.price { font-family: var(--font-display); font-size: 2rem; color: var(--ember); }
.woocommerce div.product .woocommerce-product-details__short-description { color: var(--muted-foreground); line-height: 1.6; margin-top: 1rem; }
.woocommerce div.product form.cart .button {
  background: var(--primary);
  color: var(--primary-foreground);
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  padding: 0.875rem 1.75rem;
  border: none;
}
.woocommerce div.product form.cart .quantity input { background: var(--surface); border: 1px solid var(--input); color: var(--foreground); }
.woocommerce-tabs { margin-top: 3rem; border-top: 1px solid var(--border); }
.woocommerce-tabs ul.tabs { border-bottom: 1px solid var(--border); }
.woocommerce-tabs ul.tabs li a { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.8rem; color: var(--muted-foreground); }
.woocommerce-tabs ul.tabs li.active a { color: var(--ember); }
.woocommerce-tabs .panel { color: var(--muted-foreground); line-height: 1.6; padding-top: 1.5rem; }

/* Cart / checkout — keep functional, styled to match */
.woocommerce-cart table.cart, .woocommerce-checkout table.shop_table {
  border: 1px solid var(--border);
  color: var(--foreground);
}
.woocommerce-cart table.cart th, .woocommerce-checkout table.shop_table th {
  background: var(--surface-2);
  font-family: var(--font-mono);
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  color: var(--steel);
}
.woocommerce-cart table.cart td, .woocommerce-checkout table.shop_table td { border-top: 1px solid var(--border); }
.woocommerce #payment, .woocommerce-checkout #payment { background: var(--surface); border: 1px solid var(--border); }
.woocommerce input[type="text"], .woocommerce input[type="email"], .woocommerce input[type="tel"],
.woocommerce input[type="number"], .woocommerce textarea, .woocommerce select {
  background: var(--surface);
  border: 1px solid var(--input);
  color: var(--foreground);
}
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button {
  background: var(--primary);
  color: var(--primary-foreground);
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  border: none;
  border-radius: 0;
}
.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover { opacity: 0.9; }

.bfb-store-cta { margin-top: 4rem; border: 1px solid var(--border); padding: 2.5rem 2rem; text-align: center; }
.bfb-store-cta h2 { font-size: clamp(1.8rem, 5vw, 2.75rem); color: var(--foreground); }
.bfb-store-cta p { margin: 1rem auto 0; max-width: 32rem; font-size: 0.875rem; line-height: 1.6; color: var(--muted-foreground); }
.bfb-store-cta .btn { margin-top: 1.5rem; }

/* ==========================================================================
   STORE CATEGORY TILES — image tabs on the shop / category pages
   ========================================================================== */
.bfb-store-cats{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:12px;margin:0 0 32px}
.bfb-cat-tile{display:flex;flex-direction:column;align-items:center;gap:8px;padding:10px 8px 12px;
  background:var(--surface);border:1px solid var(--surface-2);border-radius:var(--radius);
  text-decoration:none;color:var(--foreground);transition:border-color .15s ease,transform .15s ease}
.bfb-cat-tile:hover{border-color:var(--primary);transform:translateY(-2px)}
.bfb-cat-tile.is-active{border-color:var(--primary);background:var(--surface-2)}
.bfb-cat-thumb{display:flex;align-items:center;justify-content:center;width:100%;aspect-ratio:1;
  background:#fff;border-radius:var(--radius);overflow:hidden}
.bfb-cat-thumb img{width:100%;height:100%;object-fit:contain;display:block}
.bfb-cat-thumb-all{background:var(--surface-2);color:var(--primary);
  font-family:"Bebas Neue",sans-serif;font-size:28px;letter-spacing:.06em}
.bfb-cat-name{font-family:"Barlow Condensed",sans-serif;font-size:13px;font-weight:600;line-height:1.2;
  text-align:center;text-transform:uppercase;letter-spacing:.04em}
@media(max-width:600px){
  .bfb-store-cats{grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:8px}
  .bfb-cat-name{font-size:11px}}