/* =========================================================
   DF / BNB CATEGORY — WORDPRESS-SAFE CSS (FULL)
   - Scoped to #df-bnb-shell (Category Shell)
   - Uses same palette + mix system as Home
   - Mirrors Home sticky bar look and auth buttons
   - Adds: banner logo, top category title, top category dropdown,
           category search + suggestions, filter + sort controls,
           page cards (title + pills, no blurb)
   ========================================================= */

/* =========================
   SAFE BASE (no global nukes)
   ========================= */
html, body{
  overflow-x: hidden;
}

/* Prevent unstyled category flash */
#df-bnb-shell[data-page="category"] {
  visibility: hidden;
}

/* When ANY shell is present, the theme's outer canvas must also match the shell bg.
   This is what removes that ugly white edge/frame.
   NOTE: --bg is defined on #df-bnb-shell, so html/body can't inherit it.
   We duplicate the DF palette value here as a fallback and let JS overwrite
   via data-active attribute on the shell. */
html:has(#df-bnb-shell[data-active="df"]),
body:has(#df-bnb-shell[data-active="df"]){
  margin: 0 !important;
  padding: 0 !important;
  background: #5b3f31 !important;
}
html:has(#df-bnb-shell[data-active="bnb"]),
body:has(#df-bnb-shell[data-active="bnb"]){
  margin: 0 !important;
  padding: 0 !important;
  background: #000000 !important;
}
/* Fallback before JS sets data-active */
html:has(#df-bnb-shell),
body:has(#df-bnb-shell){
  margin: 0 !important;
  padding: 0 !important;
  background: #5b3f31 !important;
}

body.dfbnb-category{
  margin: 0 !important;
  padding: 0 !important;
}

/* Optional: reduce theme container side padding ONLY when category shell is present */
body:has(#df-bnb-shell) #page,
body:has(#df-bnb-shell) #content,
body:has(#df-bnb-shell) .site-content,
body:has(#df-bnb-shell) .content-area,
body:has(#df-bnb-shell) .entry-content,
body:has(#df-bnb-shell) .wp-site-blocks{
  max-width: 100%;
}

/* Shell ready: CSS loaded, show the app */
#df-bnb-shell{ visibility: visible; }

/* =========================
   ROOT SHELL
   ========================= */
#df-bnb-shell,
#df-bnb-shell *,
#df-bnb-shell *::before,
#df-bnb-shell *::after{
  box-sizing: border-box;
}

/* =========================================================
   KILL THEME BACKGROUNDS (CATEGORY SHELL)
   ========================================================= */

body.dfbnb-category,
body.dfbnb-category .site-container,
body.dfbnb-category .site-inner,
body.dfbnb-category .content-sidebar-wrap,
body.dfbnb-category .content{
  background: transparent !important;
}

body.dfbnb-category .site-inner{
  padding: 0 !important;
  max-width: none !important;
}

body.dfbnb-category .content{
  padding: 0 !important;
}

#df-bnb-shell{
  /* ===== Brand palettes (static) ===== */
  --bnb-bg:#000000;
  --bnb-panel:#2b2b2b;
  --bnb-panel2:#242424;
  --bnb-accent:#d6863f;
  --bnb-text:#ffffff;
  --bnb-muted: rgba(230,217,180,0.72);
  --bnb-stroke: rgba(230,217,180,0.10);
  --bnb-stroke2: rgba(230,217,180,0.16);

  --df-bg:#5b3f31;
  --df-panel:#e6d9b4;
  --df-panel2:#e6ddc2;
  --df-accent:#205d58;
  --df-text:#1a120e;
  --df-muted: rgba(26,18,14,0.72);
  --df-stroke: rgba(26,18,14,0.16);
  --df-stroke2: rgba(26,18,14,0.22);


  /* ===== Live blend state ===== */
  --mixPct: 0%;
  --mix: 0;

  /* ===== Derived current theme via color-mix ===== */
  --bg: color-mix(in srgb, var(--bnb-bg) calc(100% - var(--mixPct)), var(--df-bg) var(--mixPct));
  --panel: color-mix(in srgb, var(--bnb-panel) calc(100% - var(--mixPct)), var(--df-panel) var(--mixPct));
  --panel2: color-mix(in srgb, var(--bnb-panel2) calc(100% - var(--mixPct)), var(--df-panel2) var(--mixPct));
  --accent: color-mix(in srgb, var(--bnb-accent) calc(100% - var(--mixPct)), var(--df-accent) var(--mixPct));
  --text: color-mix(in srgb, var(--bnb-text) calc(100% - var(--mixPct)), var(--df-text) var(--mixPct));
  --muted: color-mix(in srgb, var(--bnb-muted) calc(100% - var(--mixPct)), var(--df-muted) var(--mixPct));
  --stroke: color-mix(in srgb, var(--bnb-stroke) calc(100% - var(--mixPct)), var(--df-stroke) var(--mixPct));
  --stroke2: color-mix(in srgb, var(--bnb-stroke2) calc(100% - var(--mixPct)), var(--df-stroke2) var(--mixPct));

  /* ===== Extra derived helpers ===== */
  --white: color-mix(in srgb, #ffffff 92%, var(--text));
  --cream: color-mix(in srgb, rgba(230,217,180,0.92) calc(100% - var(--mixPct)), rgba(26,18,14,0.50) var(--mixPct));

  --max: 980px;
  --r: 18px;
  --r2: 14px;
  --font: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

  --shadow: 0 18px 48px rgba(0,0,0,0.55);
  --topBarH: 58px;

  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: geometricPrecision;
  transition: background 120ms linear;
  position: relative;
}

/* Global checkbox accent — no more browser-default blue anywhere */
#df-bnb-shell input[type="checkbox"]{
  accent-color: var(--accent);
}

/* Brand mix based on JS shell attribute */
#df-bnb-shell[data-active="df"]{ --mixPct: 100%; --mix: 1; }
#df-bnb-shell[data-active="bnb"]{ --mixPct: 0%; --mix: 0; }

/* Links */
#df-bnb-shell a,
#df-bnb-shell a:visited{
  color: var(--text);
  text-decoration: none;
}
#df-bnb-shell a:hover{ text-decoration: underline; }

/* =========================================================
   CATEGORY SHELL: HIDE THEME CHROME + KILL WHITE WRAPPERS
   Applies only when the shell exists on the page.
   ========================================================= */

/* Hide header/nav if present */
body:has(#df-bnb-shell) header.site-header,
body:has(#df-bnb-shell) .site-header,
body:has(#df-bnb-shell) nav.main-navigation,
body:has(#df-bnb-shell) .main-navigation,
body:has(#df-bnb-shell) #masthead,
body:has(#df-bnb-shell) .wp-block-navigation,
body:has(#df-bnb-shell) .wp-block-navigation__responsive-container{
  display: none !important;
}

/* Remove any reserved spacing the theme adds above content */
body:has(#df-bnb-shell) .site-content,
body:has(#df-bnb-shell) #content,
body:has(#df-bnb-shell) .wp-site-blocks,
body:has(#df-bnb-shell) .entry-content,
body:has(#df-bnb-shell) .entry,
body:has(#df-bnb-shell) .entry-content-wrap{
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* Kill wrapper backgrounds that cause white border.
   NOTE: body itself keeps its solid brand colour (set above) —
   only the theme wrappers INSIDE body go transparent. */
body:has(#df-bnb-shell) .site-container,
body:has(#df-bnb-shell) .site-inner,
body:has(#df-bnb-shell) .content-sidebar-wrap,
body:has(#df-bnb-shell) .content,
body:has(#df-bnb-shell) .site-content,
body:has(#df-bnb-shell) #page,
body:has(#df-bnb-shell) #content{
  background: transparent !important;
}

/* EXTRA HARD-KILL: borders/frames/shadows that look like a white outline */
body:has(#df-bnb-shell) #page,
body:has(#df-bnb-shell) .site-container,
body:has(#df-bnb-shell) .site-inner,
body:has(#df-bnb-shell) .content-sidebar-wrap,
body:has(#df-bnb-shell) .content,
body:has(#df-bnb-shell) .site-content,
body:has(#df-bnb-shell) #content,
body:has(#df-bnb-shell) .entry-content,
body:has(#df-bnb-shell) .wp-site-blocks{
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

/* Also remove any theme "card" background behind the post/page content */
body:has(#df-bnb-shell) .entry,
body:has(#df-bnb-shell) .entry-content-wrap,
body:has(#df-bnb-shell) .wp-block-group,
body:has(#df-bnb-shell) .wp-block-cover{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Force full-width layout so the shell isn't boxed */
body:has(#df-bnb-shell) .site-inner,
body:has(#df-bnb-shell) .content-sidebar-wrap,
body:has(#df-bnb-shell) .content,
body:has(#df-bnb-shell) .site-content,
body:has(#df-bnb-shell) #content{
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Hide sidebars */
body:has(#df-bnb-shell) .sidebar,
body:has(#df-bnb-shell) aside{
  display: none !important;
}

/* =========================
   CATEGORY APP WRAP
   ========================= */
#df-bnb-shell [data-dfbnb="categoryApp"]{
  width: 100%;
}

/* =========================================================
   CATEGORY: FORCE FULL-WIDTH LAYOUT (kill theme column/sidebar)
   ========================================================= */
body:has(#df-bnb-shell) .site-inner,
body:has(#df-bnb-shell) .content-sidebar-wrap,
body:has(#df-bnb-shell) .content,
body:has(#df-bnb-shell) #content,
body:has(#df-bnb-shell) .site-content{
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

body:has(#df-bnb-shell) .sidebar,
body:has(#df-bnb-shell) aside{
  display: none !important;
}

/* =========================================================
   CATEGORY: KILL THEME BACKGROUNDS (white border)
   Body keeps its brand colour; only child wrappers go transparent.
   ========================================================= */
body:has(#df-bnb-shell) .site-container,
body:has(#df-bnb-shell) .site-inner,
body:has(#df-bnb-shell) .content-sidebar-wrap,
body:has(#df-bnb-shell) .content{
  background: transparent !important;
}

/* =========================
   STICKY BAR (Home-matched)
   ========================= */
#dfbnbCatStickyBar{
  position: sticky;
  top: 0;
  z-index: 50;
  min-height: var(--topBarH);

  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 14px;

  background: color-mix(in srgb, rgba(0,0,0,0.72) calc(100% - var(--mixPct)), rgba(230,217,180,0.92) var(--mixPct));
  border-bottom: 1px solid var(--stroke2);
  backdrop-filter: blur(8px);
}

/* Admin bar: keep Category top bar flush to the top */
body.admin-bar #dfbnbCatStickyBar{ top: 0 !important; }
@media (max-width: 782px){
  body.admin-bar #dfbnbCatStickyBar{ top: 0 !important; }
}

#dfbnbCatStickyBar .dfbnb-cat-left{
  display:flex;
  align-items:center;
  gap:10px;
  flex: 0 0 auto;
}

#dfbnbCatStickyBar .dfbnb-cat-right{
  display:flex;
  align-items:center;
  gap:8px;
  flex: 0 0 auto;
}

#dfbnbCatStickyBar .dfbnb-auth-welcome{
  height: 38px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--stroke2);
  background: color-mix(in srgb, rgba(255,255,255,0.02) calc(100% - var(--mixPct)), rgba(26,18,14,0.04) var(--mixPct));
  color: var(--text);
  font-weight: 900;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  opacity: 0.95;
}

#dfbnbCatStickyBar .dfbnb-auth-icon{
  width: 40px;
  padding: 0;
}
#dfbnbCatStickyBar .dfbnb-auth-icon svg{
  display:block;
}

/* Auth buttons (Home-matched) */
#dfbnbCatStickyBar .dfbnb-auth-btn{
  height: 38px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--stroke2);
  background: color-mix(in srgb, rgba(255,255,255,0.03) calc(100% - var(--mixPct)), rgba(26,18,14,0.06) var(--mixPct));
  color: var(--text);
  font-weight: 900;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
}

#dfbnbCatStickyBar .dfbnb-auth-btn.primary{
  border-color: color-mix(in srgb, var(--accent) 55%, rgba(0,0,0,0.35));
  background: color-mix(in srgb, var(--accent) 18%, transparent);
}
#dfbnbCatStickyBar .dfbnb-auth-btn:hover{ text-decoration:none; }

/* Logged-in sticky bar UI */
#dfbnbCatStickyBar .dfbnb-userpill{
  height: 38px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--stroke2);
  background: color-mix(in srgb, rgba(255,255,255,0.02) calc(100% - var(--mixPct)), rgba(26,18,14,0.04) var(--mixPct));
  color: var(--text);
  font-weight: 900;
  font-size: 13px;
  display:inline-flex;
  align-items:center;
  gap:6px;
  white-space: nowrap;
  text-decoration:none;
  cursor:pointer;
}
#dfbnbCatStickyBar .dfbnb-userpill:hover{
  text-decoration:none;
  border-color: color-mix(in srgb, var(--accent) 55%, rgba(0,0,0,0.35));
}

#dfbnbCatStickyBar .dfbnb-ico-btn{
  width: 38px;
  padding: 0;
}

#dfbnbCatStickyBar .dfbnb-ico-btn svg{
  width: 18px;
  height: 18px;
  display:block;
}

/* =========================
   BANNER LOGO (click to Home)
   ========================= */
#dfbnbCatHeaderBanner{
  width: min(var(--max), calc(100% - 28px));
  margin: 14px auto 0;
  padding: 16px 14px;

  border-radius: var(--r);
  border: 1px solid var(--stroke);
  background: color-mix(in srgb, var(--panel) 88%, black 12%);
  box-shadow: 0 14px 34px rgba(0,0,0,0.45);

  display:flex;
  align-items:center;
  justify-content:center;
}

/* Guide shell override: banner should match content width */
#df-bnb-shell[data-page="guide"] #dfbnbCatHeaderBanner{
  width: 100%;
  margin: 0;
}

#dfbnbCatHomeLink{
  display:flex;
  align-items:center;
  justify-content:center;
  width: 100%;
  text-decoration:none;
}

#dfbnbCatBrandLogo{
  width: 150px;
  height: auto;
  display:block;
}

/* =========================
   TOP CATEGORY TITLE
   ========================= */
#dfbnbCatTopTitleWrap{
  width: 100%;
  margin: 0;
  padding: 0;
}

#dfbnbCatTopTitle{
  width:100%;
  padding: 16px 16px;
  border-radius: var(--r) var(--r) 0 0;
  border: 1px solid var(--stroke);
  border-bottom: 0;
  background: var(--panel);
  box-shadow: 0 14px 34px rgba(0,0,0,0.45);

  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  font-size: 18px;
  color: var(--text);

  overflow-wrap: anywhere;
  word-break: break-word;
}

/* =========================
   TOP CATEGORY DROPDOWN
   ========================= */
#dfbnbCatTopSelectWrap{
  width: min(var(--max), calc(100% - 28px));
  margin: 12px auto 0;
  padding: 0;
}

#dfbnbCatTopSelect{
  width: 100%;
  height: 54px;
  padding: 0 44px 0 16px;
    font-family: var(--font);
  -webkit-font-smoothing: antialiased;

  border-radius: var(--r);
  border: 1px solid var(--stroke);
  background: var(--cream);
  color: var(--text);
  outline: none;

  font-weight: 950;
  font-size: 15px;

  appearance: none;
  -webkit-appearance: none;
  cursor:pointer;

  box-shadow: 0 14px 34px rgba(0,0,0,0.35);
}

#dfbnbCatTopSelectWrap{
  position: relative;
}

#dfbnbCatTopSelectWrap::after{
  content: "▾";
  position: absolute;
  right: 28px;
  top: 50%;
  transform: translateY(-50%);
  font-weight: 950;
  color: var(--accent);
  pointer-events: none;
}

#dfbnbCatTopSelect:focus{
  border-color: color-mix(in srgb, rgba(214,134,63,0.95) calc(100% - var(--mixPct)), rgba(32,93,88,0.95) var(--mixPct));
}

/* =========================
   SEARCH THIS CATEGORY + SUGGESTIONS
   ========================= */
#dfbnbCatSearchWrap{
  width: 100%;
  margin: 0;
  padding: 0;
}

/* Search spacer removed — div is display:none. */

/* =========================
   TOP BAR (Title + Search as ONE card)
   ========================= */
#dfbnbCatTopBar.dfbnb-cat-topbar{
  width: min(var(--max), calc(100% - 28px));
  margin: 14px auto 0;
  border-radius: var(--r);
  border: 1px solid var(--stroke);
  background: var(--panel);
  box-shadow: 0 14px 34px rgba(0,0,0,0.45);
  overflow: hidden;
}

/* Remove the separate "card" framing from the inner blocks */
#dfbnbCatTopBar #dfbnbCatTopTitleWrap{
  width: 100%;
  margin: 0;
}

#dfbnbCatTopBar #dfbnbCatTopTitle{
  border: 0;
  border-bottom: 1px solid var(--stroke);
  border-radius: 0;
  box-shadow: none;
}

/* Search wrapper becomes just padding inside the same card */
#dfbnbCatTopBar #dfbnbCatSearchWrap{
  width: 100%;
  margin: 0;
}

#dfbnbCatTopBar #dfbnbCatSearchWrap .dfbnb-cat-searchbox{
  border: 0;
  border-top: 0;
  border-radius: 0;
  background: transparent;
  padding: 12px;
}

/* =========================
   TOP BAR: ONE CARD (TITLE + SEARCH)
   ========================= */
#dfbnbCatTopBar{
  width: min(var(--max), calc(100% - 28px));
  margin: 14px auto 0;

  border-radius: var(--r);
  border: 1px solid var(--stroke);
  background: rgba(230,217,180,0.92);
  box-shadow: 0 14px 34px rgba(0,0,0,0.35);

  overflow: hidden;
}

#dfbnbCatTopTitleWrap{
  width: 100%;
  margin: 0;
  padding: 0;
}

#dfbnbCatTopTitle{
  border: 0;
  background: transparent;
  box-shadow: none;
  padding: 16px 16px 10px;
  color: var(--accent);
}

/* Category blurb / intro note (optional, from guide_index.tsv) */
#dfbnbCatBlurb.dfbnb-cat-blurb{
  padding: 0 16px 14px;
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.45;
  color: var(--text, #3a3226);
  opacity: 0.85;
}

/* Featured page shortcuts in the intro card (browseOrder 1–9 in
   guide_index.tsv). Wraps onto its own line on narrow screens. */
#dfbnbCatQuickLinks.dfbnb-cat-quicklinks{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 0 16px 14px;
  margin: 0;
}

#dfbnbCatQuickLinks .dfbnb-cat-quicklinks-label{
  font-size: 0.88rem;
  color: var(--text, #3a3226);
  opacity: 0.75;
}

#dfbnbCatQuickLinks .dfbnb-cat-quicklink{
  display: inline-block;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--accent) 55%, rgba(0,0,0,0.35));
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  color: var(--accent);
  font-size: 0.88rem;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  transition: background 0.15s ease, transform 0.15s ease;
}

#dfbnbCatQuickLinks .dfbnb-cat-quicklink:hover,
#dfbnbCatQuickLinks .dfbnb-cat-quicklink:focus-visible{
  background: color-mix(in srgb, var(--accent) 32%, transparent);
  transform: translateY(-1px);
}

@media (prefers-reduced-motion: reduce){
  #dfbnbCatQuickLinks .dfbnb-cat-quicklink{ transition: none; }
  #dfbnbCatQuickLinks .dfbnb-cat-quicklink:hover{ transform: none; }
}

/* =========================
   FILTER + SORT CONTROLS
   ========================= */
/* =========================
   DESKTOP LAYOUT: LEFT FILTERS + RIGHT RESULTS
   ========================= */

/* Make a single “content band” width for both sidebar + results */
#dfbnbCatControls,
#dfbnbCatResults{
  width: 100%;
  margin: 0;
}

/* Turn the area into a two-column grid on desktop.
   This relies on both blocks being in normal document flow. */
#dfbnbCatControls{
  margin: 0;
  padding: 0;
  display:block;
}

/* Results sit to the right in a 2-col grid using a wrapper class we add below */
#dfbnbCatResults{
  margin: 0;
  padding: 0 0 24px;
}

/* New: main layout wrapper (CSS-only, no HTML changes).
   We apply it by styling the common parent when both elements exist. */
/* Two-column layout ONLY for the main content area (controls + results).
   Title + search stay above, full width. */
body:has(#df-bnb-shell) #df-bnb-shell [data-dfbnb="categoryApp"]{
  display:block;
}

/* Create a two-column grid for sidebar + results only */
/* =========================
   MAIN LAYOUT WRAPPER: LEFT FILTERS + RIGHT RESULTS
   ========================= */

#dfbnbCatMain{
  width: min(var(--max), calc(100% - 28px));
  margin: 12px auto 0;

  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 14px;
  align-items: start;
}

/* Category shell: footer must span both columns of the main grid */
#dfbnbCatMain > footer.footer{
  grid-column: 1 / -1;
}

@media (max-width: 1020px){
  #dfbnbCatMain{
    grid-template-columns: 300px 1fr;
  }
}

@media (max-width: 900px){
  #dfbnbCatMain{
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   MOBILE OVERFLOW CONTAINMENT
   Prevents any child (long titles, EDIDs, wide content) from
   pushing the page wider than the viewport on mobile.
   ========================================================= */
#dfbnbCatMain,
#dfbnbCatTopBar,
#dfbnbCatResults,
#dfbnbCatControls{
  overflow: hidden;
  max-width: 100%;
}

/* Cards themselves must clip long content */
#dfbnbCatResults a.card{
  overflow: hidden;
  max-width: 100%;
}

@media (max-width: 560px){
  /* Category top title: shrink on mobile so long names wrap cleanly */
  #dfbnbCatTopTitle{
    font-size: 15px;
    line-height: 1.25;
  }

  /* ── Flush-left / curved-right container layout ──
     Containers sit against the left screen edge (no gap, no radius)
     with a visible gap + rounded corner on the right side only. */
  #dfbnbCatMain{
    width: calc(100% - 10px);
    margin-left: 0;
    margin-right: 10px;
    border-radius: 0 var(--r) var(--r) 0;
  }

  #dfbnbCatTopBar{
    width: calc(100% - 10px);
    margin-left: 0;
    margin-right: 10px;
    border-radius: 0 var(--r) var(--r) 0;
  }

  #dfbnbCatHeaderBanner{
    width: calc(100% - 10px);
    margin-left: 0;
    margin-right: 10px;
    border-radius: 0 var(--r) var(--r) 0;
  }

  /* Search results page re-uses #dfbnbCatHeaderBanner for the logo
     chrome but has no content cards hugging the left edge, so the
     flush-left styling above reads as a bug (flat left corner, no
     left margin). Restore centered / fully-rounded layout on the
     search page only. Scoped via the body class applied in
     template-dfbnb-search.php so it never leaks back to category
     pages where flush-left is intentional. */
  body.dfbnb-search-page #dfbnbCatHeaderBanner{
    width: min(var(--max), calc(100% - 28px));
    margin-left: auto;
    margin-right: auto;
    border-radius: var(--r);
  }

  /* Cards + expanders inherit the flush-left style */
  #dfbnbCatResults a.card{
    border-radius: 0 var(--r) var(--r) 0;
  }

  #dfbnbCatControls details.dfbnb-expander{
    border-radius: 0 var(--r2) var(--r2) 0;
  }

  /* Empty-state message */
  #dfbnbCatResults .dfbnb-cat-empty{
    border-radius: 0 var(--r) var(--r) 0;
  }
}

/* =========================
   EXPANDERS (Category/Filter/Sort)
   ========================= */
#dfbnbCatControls details.dfbnb-expander{
  border-radius: var(--r2);
  border: 1px solid var(--stroke);
  background: var(--panel);
  padding: 10px 12px;
}

#dfbnbCatControls details.dfbnb-expander summary{
  list-style: none;
  cursor: pointer;
  user-select: none;

  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;

  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 12px;
  color: var(--accent);
}

#dfbnbCatControls details.dfbnb-expander summary::-webkit-details-marker{
  display:none;
}

#dfbnbCatControls details.dfbnb-expander summary::after{
  content: "▾";
  font-weight: 950;
  color: var(--accent);
  transform: rotate(0deg);
  transition: transform .12s ease;
}

#dfbnbCatControls details.dfbnb-expander[open] summary::after{
  transform: rotate(180deg);
}

#dfbnbCatControls .dfbnb-expander-body{
  margin-top: 10px;
}

#dfbnbCatTopSelect,
#dfbnbCatSubSelect,
#dfbnbCatSortSelect{
  width: 100%;
  height: 44px;
  padding: 0 12px;
  font-family: var(--font);

  border-radius: 14px;
  border: 1px solid var(--stroke2);
  background: var(--panel2);
  color: var(--text);
  outline: none;

  font-weight: 900;
  font-size: 14px;

  appearance: none;
  -webkit-appearance: none;
  cursor:pointer;
}

#dfbnbCatTopSelect:disabled,
#dfbnbCatSubSelect:disabled,
#dfbnbCatSortSelect:disabled{
  opacity: 1;
  cursor: not-allowed;
}

/* Make the opened dropdown list match the theme (best-effort, browser-dependent) */
#df-bnb-shell select option{
  background: var(--panel);
  color: var(--text);
}

/* Prevent the "white flash" look on some browsers */
#df-bnb-shell select:focus{
background: color-mix(in srgb, rgba(0,0,0,0.18) calc(100% - var(--mixPct)), rgba(26,18,14,0.08) var(--mixPct));
color: var(--text);
}

#dfbnbCatTopSelect:focus,
#dfbnbCatSubSelect:focus,
#dfbnbCatSortSelect:focus{
background: color-mix(in srgb, rgba(0,0,0,0.18) calc(100% - var(--mixPct)), rgba(26,18,14,0.08) var(--mixPct));
color: var(--text);
}

/* =========================
   SKELETONS (shared)
   ========================= */
#df-bnb-shell .dfbnb-skel{
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  border: 1px solid var(--stroke);
  background: color-mix(in srgb, var(--panel2) 85%, transparent);
}

#df-bnb-shell .dfbnb-skel::after{
  content:"";
  position:absolute;
  inset:0;
  transform: translateX(-60%);
  background: linear-gradient(
    90deg,
    transparent,
    color-mix(in srgb, var(--accent) 18%, transparent),
    transparent
  );
  animation: dfbnbShimmer 1.05s linear infinite;
  opacity: 0.9;
}

@keyframes dfbnbShimmer{
  0%{ transform: translateX(-60%); }
  100%{ transform: translateX(60%); }
}

#df-bnb-shell .dfbnb-skel-line{ height: 12px; border-radius: 999px; }
#df-bnb-shell .dfbnb-skel-line.lg{ height: 18px; }
#df-bnb-shell .dfbnb-skel-line.sm{ height: 10px; }
#df-bnb-shell .dfbnb-skel-gap{ height: 10px; }

/* =========================
   RESULTS + CARDS
   ========================= */
#dfbnbCatResults{
  max-width: none;
  margin: 0;
  padding: 0 0 24px;
}

#dfbnbCatResults .dfbnb-cat-empty{
  margin-top: 12px;
  padding: 16px;
    grid-column: 1 / -1;
  width: 100%;

  border-radius: var(--r);
  border: 1px solid var(--stroke);
  background: var(--panel);
  box-shadow: 0 14px 34px rgba(0,0,0,0.45);

  color: var(--muted);
  font-weight: 900;
  font-size: 14px;
}

/* Cards grid */
#dfbnbCatResults{
  display:grid;
grid-template-columns: 1fr;
  gap: 12px;
    max-width: 820px;
}

@media (max-width: 900px){
  #dfbnbCatResults{
    grid-template-columns: 1fr;
  }
}

/* Page card style (matches your screenshot vibe) */
#dfbnbCatResults a.card{
    contain: layout paint style;

  position: relative;

    content-visibility: auto;
  contain-intrinsic-size: 120px;

  display:block;
  padding: 16px;
  border-radius: var(--r);
  border: 1px solid var(--stroke);
  background: var(--panel);
  box-shadow: 0 14px 34px rgba(0,0,0,0.45);
  overflow:hidden;

  text-decoration:none;
  transition: transform .12s ease, border-color .12s ease, background .12s ease;
}

#dfbnbCatResults a.card:hover{
  transform: translateY(-1px);
  border-color: color-mix(in srgb, rgba(214,134,63,0.55) calc(100% - var(--mixPct)), rgba(32,93,88,0.55) var(--mixPct));
  background: color-mix(in srgb, rgba(214,134,63,0.08) calc(100% - var(--mixPct)), rgba(32,93,88,0.08) var(--mixPct));
  text-decoration:none;
}

#dfbnbCatResults a.card .title{
  font-weight: 950;
  font-size: 18px;
  color: var(--accent);
  line-height: 1.2;

  /* Wrap long titles instead of truncating with an ellipsis */
  white-space: normal;
  overflow: visible;
  overflow-wrap: break-word;
  word-break: break-word;
}

/* Stats row (replaces pills) */
#dfbnbCatResults a.card .meta{
  margin-top: 10px;
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

/* Updated + Views + Reviews */
#dfbnbCatResults a.card .stat{
  display:inline-flex;
  align-items:center;
  gap: 6px;

  padding: 6px 10px;
  border-radius: 999px;

  border: 1px solid color-mix(in srgb, rgba(255,255,255,0.10) calc(100% - var(--mixPct)), rgba(26,18,14,0.18) var(--mixPct));
  background: color-mix(in srgb, rgba(0,0,0,0.18) calc(100% - var(--mixPct)), rgba(26,18,14,0.08) var(--mixPct));
  color: var(--text);

  font-weight: 900;
  font-size: 12px;
  white-space: nowrap;
}

#dfbnbCatResults a.card .stat svg{
  width: 14px;
  height: 14px;
  display:block;
  flex: 0 0 auto;
  color: var(--muted);
}

/* Updated label can be slightly muted */
#dfbnbCatResults a.card .stat-updated .label{
  color: var(--muted);
}

/* Heart uses brand accent */
#dfbnbCatResults a.card .stat-reviews svg{
  color: var(--accent);
}

/* Pin icon, top-right, display-only */
#dfbnbCatResults a.card .pin{
  position:absolute;
  top: 10px;
  right: 10px;
  width: 18px;
  height: 18px;
  display:grid;
  place-items:center;
  pointer-events:none;
  opacity: 0.95;
  z-index: 2;
}

/* =========================
   CARD ACTION BUTTONS (Pin + Share)
   - Fixes the ugly blue focus box
   ========================= */
#dfbnbCatResults a.card .dfbnb-card-actions{
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

/* Button base */
#dfbnbCatResults a.card .dfbnb-card-btn{
  appearance: none;
  -webkit-appearance: none;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 34px;
  height: 34px;
  padding: 0;

  border-radius: 999px;
  border: 1px solid color-mix(in srgb, rgba(255,255,255,0.10) calc(100% - var(--mixPct)), rgba(26,18,14,0.18) var(--mixPct));
  background: color-mix(in srgb, rgba(0,0,0,0.18) calc(100% - var(--mixPct)), rgba(26,18,14,0.08) var(--mixPct));
  color: var(--text);

  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, transform 120ms ease, box-shadow 120ms ease;
}

/* Kill the default blue focus outline */
#dfbnbCatResults a.card .dfbnb-card-btn:focus{
  outline: none;
}

/* Replace with a theme-friendly focus ring (keyboard only) */
#dfbnbCatResults a.card .dfbnb-card-btn:focus-visible{
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent);
}

#dfbnbCatResults a.card .dfbnb-card-btn:hover{
  background: color-mix(in srgb, rgba(214,134,63,0.12) calc(100% - var(--mixPct)), rgba(32,93,88,0.12) var(--mixPct));
  transform: translateY(-1px);
}

#dfbnbCatResults a.card .dfbnb-card-btn svg{
  width: 16px;
  height: 16px;
  display: block;
  pointer-events: none;
}

/* Active pinned state */
#dfbnbCatResults a.card .dfbnb-card-btn--pin.is-on{
  border-color: color-mix(in srgb, var(--accent) 60%, rgba(0,0,0,0.35));
  background: color-mix(in srgb, var(--accent) 18%, transparent);
}

#dfbnbCatResults a.card .pin svg{
  width: 18px;
  height: 18px;
  display:block;
}

/* Pin icon, top-right, display-only
   Hide entirely unless pinned */
#dfbnbCatResults a.card .pin--off{
  display: none;
}

#dfbnbCatResults a.card .pin--on{
  display: block;
  color: var(--accent);
}

/* =========================
   RESPONSIVE: SMALL SCREENS
   ========================= */
@media (max-width: 560px){
  /* ── Fixed bar on tiny screens ──
     Single-row flex: brand-logo left | auth buttons right.
     Compact, no wrapping — icons shrink to fit. */
  #dfbnbCatStickyBar{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    flex-wrap: nowrap;
    padding: 8px 10px;
    gap: 8px;
    min-height: auto;
  }

  /* Push content below fixed bar — consistent gap with shell bg color */
  #dfbnbCatHeaderBanner{
    margin-top: 62px;
  }

  /* Guide shell: banner is INSIDE .dfbnb-wrap which already has
     padding-top: 80px (set in df-bnb-guide.css) to clear the fixed bar.
     No extra margin needed — the base rule (margin: 0) applies. */

  #dfbnbCatControls{
    grid-template-columns: 1fr;
  }

  /* Right side: single row, no wrapping, compact.
     flex-direction: row overrides style.css's column stacking
     so the bar stays one line tall and doesn't cover the banner. */
  #dfbnbCatStickyBar .dfbnb-cat-right{
    flex: 0 1 auto;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-end;
    gap: 6px;
  }

  /* Welcome pill: drop "Welcome!" on small screens, show just the username */
  #dfbnbCatStickyBar .dfbnb-userpill .dfbnb-welcome-label,
  #dfbnbCatStickyBar .dfbnb-auth-welcome .dfbnb-welcome-label{
    display: none;
  }
  #dfbnbCatStickyBar .dfbnb-userpill,
  #dfbnbCatStickyBar .dfbnb-auth-welcome{
    height: 34px;
    padding: 6px 10px;
    font-size: 12px;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Shrink auth + icon buttons */
  #dfbnbCatStickyBar .dfbnb-auth-btn{
    height: 34px;
    padding: 6px 10px;
    font-size: 12px;
  }

  #dfbnbCatStickyBar .dfbnb-ico-btn{
    width: 34px;
    height: 34px;
  }
  #dfbnbCatStickyBar .dfbnb-ico-btn svg{
    width: 16px;
    height: 16px;
  }

  /* Left side: shrink logo too */
  #dfbnbCatStickyBar .dfbnb-cat-left{
    gap: 6px;
  }
  #dfbnbCatStickyBar .dfbnb-cat-left .switch-logo,
  #dfbnbCatStickyBar .dfbnb-cat-left img{
    width: 34px;
    height: 34px;
  }

  /* ── Flush-left / curved-right for secondary containers ── */
  #df-bnb-shell .dfbnbPatchLog{
    border-radius: 0 var(--r) var(--r) 0;
  }

  #df-bnb-shell .returnTopBar{
    border-radius: 0 var(--r) var(--r) 0;
  }

  #df-bnb-shell .dfbnb-skel{
    border-radius: 0 14px 14px 0;
  }
}

/* =========================
   FOOTER SOCIALS (Shell: Category + Guide)
   ========================= */
#df-bnb-shell .footerSocials{
  display:flex;
  justify-content:center;
  gap: 10px;
}

#df-bnb-shell .social-btn{
  width:34px;
  height:34px;
  border-radius:999px;
  border:1px solid color-mix(in srgb, rgba(255,255,255,0.10) calc(100% - var(--mixPct)), rgba(26,18,14,0.18) var(--mixPct));
  background: color-mix(in srgb, #ffffff 30%, var(--panel));
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition: background 120ms ease, border-color 120ms ease, transform 120ms ease;
}

#df-bnb-shell .social-btn:hover{
  transform: translateY(-1px);
  border-color: var(--accent);
}

#df-bnb-shell .social-btn svg{
  width:16px;
  height:16px;
  fill: var(--text);
}

/* =========================
   PATCH LOG (Shell: Category)
   ========================= */
#df-bnb-shell .dfbnbPatchLog{
  margin-top: 16px;
  border-radius: var(--r);
  border: 1px solid color-mix(in srgb, rgba(255,255,255,0.10) calc(100% - var(--mixPct)), rgba(26,18,14,0.18) var(--mixPct));
  background: color-mix(in srgb, rgba(0,0,0,0.12) calc(100% - var(--mixPct)), rgba(26,18,14,0.06) var(--mixPct));
  padding: 14px 16px;
}

#df-bnb-shell .dfbnbPatchLogHead{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap: 12px;
  margin-bottom: 10px;
}

#df-bnb-shell .dfbnbPatchLogTitle{
  font-weight: 950;
  letter-spacing: 0.02em;
}

#df-bnb-shell .dfbnbPatchLogRight{
  font-size: 12px;
  opacity: 0.85;
  font-weight: 800;
}

#df-bnb-shell .dfbnbPatchLogEntry{
  padding: 10px 0;
  border-top: 1px solid color-mix(in srgb, rgba(255,255,255,0.08) calc(100% - var(--mixPct)), rgba(26,18,14,0.14) var(--mixPct));
}

#df-bnb-shell .dfbnbPatchLogEntry:first-child{
  border-top: none;
  padding-top: 0;
}

#df-bnb-shell .dfbnbPatchLogMeta{
  font-size: 12px;
  opacity: 0.75;
  margin-bottom: 6px;
}

#df-bnb-shell .dfbnbPatchLogCurrent{
  font-size: 12px;
  opacity: 0.9;
  margin-bottom: 8px;
}

#df-bnb-shell .dfbnbPatchLogRow{
  margin: 2px 0;
}

/* =========================
   RETURN TO TOP BAR (Shell: Category + Guide)
   ========================= */
#df-bnb-shell .returnTopBar{
  margin-top: 16px;
  border-radius: var(--r);
  border: 1px solid color-mix(in srgb, rgba(255,255,255,0.10) calc(100% - var(--mixPct)), rgba(26,18,14,0.18) var(--mixPct));
  background: var(--panel);
  padding: 12px 16px;
  display:flex;
  justify-content:center;
  align-items:center;
}

#df-bnb-shell .returnTopBtn{
  height: 34px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, rgba(255,255,255,0.10) calc(100% - var(--mixPct)), rgba(26,18,14,0.18) var(--mixPct));
  background: color-mix(in srgb, #ffffff 30%, var(--panel));
  color: var(--text);
  font-weight: 950;
  font-size: 13px;
  cursor: pointer;
}

#df-bnb-shell .returnTopBtn:hover{
  transform: translateY(-1px);
  border-color: var(--accent);
}

/* =========================
   FOOTER (Shell: Category + Guide)
   ========================= */
#df-bnb-shell .footer{
  margin-top: 16px;
  border-radius: var(--r);
  border: 1px solid color-mix(in srgb, rgba(255,255,255,0.10) calc(100% - var(--mixPct)), rgba(26,18,14,0.18) var(--mixPct));
  background: var(--panel);
  padding: 14px 16px;
  display:grid;
  grid-template-columns: 1fr auto 1fr;
  align-items:center;
  gap: 12px;
}

#df-bnb-shell .footer .copy{
  color: var(--muted);
  font-size: 12px;
}

#df-bnb-shell .footer .copy.right{ text-align:right; }

#df-bnb-shell .footerSocials{
  display:flex;
  justify-content:center;
  gap: 10px;
}

#df-bnb-shell .social-btn{
  width:34px;
  height:34px;
  border-radius:999px;
  border:1px solid color-mix(in srgb, rgba(255,255,255,0.10) calc(100% - var(--mixPct)), rgba(26,18,14,0.18) var(--mixPct));
  background: color-mix(in srgb, #ffffff 30%, var(--panel));
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition: background 120ms ease, border-color 120ms ease, transform 120ms ease;
}

#df-bnb-shell .social-btn:hover{
  transform: translateY(-1px);
  border-color: var(--accent);
}

#df-bnb-shell .social-btn svg{
  width:16px;
  height:16px;
  fill: var(--text);
}

/* Footer mobile: stack vertically so copyright text doesn't get squeezed */
@media (max-width: 600px){
  #df-bnb-shell .footer{
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    gap: 6px;
    padding: 12px 14px;
    background: var(--panel);
  }
  #df-bnb-shell .footer .copy{
    white-space: nowrap;
  }
  #df-bnb-shell .footer .copy.right{
    text-align: center;
  }
  #df-bnb-shell .footerSocials{
    order: -1;
  }
}

/* =========================
   RETURN TO TOP BAR (Category Shell)
   ========================= */
#df-bnb-shell .returnTopBar{
  margin-top: 16px;
  border-radius: var(--r);
  border: 1px solid color-mix(in srgb, rgba(255,255,255,0.10) calc(100% - var(--mixPct)), rgba(26,18,14,0.18) var(--mixPct));
  background: var(--panel);
  padding: 12px 16px;
  display:flex;
  justify-content:center;
  align-items:center;
}

#df-bnb-shell .returnTopBtn{
  height: 34px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, rgba(255,255,255,0.10) calc(100% - var(--mixPct)), rgba(26,18,14,0.18) var(--mixPct));
  background: color-mix(in srgb, #ffffff 30%, var(--panel));
  color: var(--text);
  font-weight: 950;
  font-size: 13px;
  cursor: pointer;
}

#df-bnb-shell .returnTopBtn:hover{
  transform: translateY(-1px);
  border-color: var(--accent);
}

/* =========================================================
   CATEGORY ONLY: hide the theme header/menu so only the DF/BNB shell shows
   (Genesis Block Theme)
   ========================================================= */
body:has(#df-bnb-shell).wp-theme-genesis-block-theme header.site-header,
body:has(#df-bnb-shell).wp-theme-genesis-block-theme .site-header,
body:has(#df-bnb-shell).wp-theme-genesis-block-theme nav.main-navigation,
body:has(#df-bnb-shell).wp-theme-genesis-block-theme .main-navigation,
body:has(#df-bnb-shell).wp-theme-genesis-block-theme #masthead,
body:has(#df-bnb-shell).wp-theme-genesis-block-theme .wp-block-navigation,
body:has(#df-bnb-shell).wp-theme-genesis-block-theme .wp-block-navigation__responsive-container{
  display: none !important;
}

/* CATEGORY ONLY: hide the theme footer/meta (January / Uncategorized / StudioPress etc) */
body:has(#df-bnb-shell).wp-theme-genesis-block-theme footer.site-footer,
body:has(#df-bnb-shell).wp-theme-genesis-block-theme .site-footer,
body:has(#df-bnb-shell).wp-theme-genesis-block-theme #colophon,
body:has(#df-bnb-shell).wp-theme-genesis-block-theme .site-info,
body:has(#df-bnb-shell).wp-theme-genesis-block-theme .footer-widgets,
body:has(#df-bnb-shell).wp-theme-genesis-block-theme .wp-block-post-date,
body:has(#df-bnb-shell).wp-theme-genesis-block-theme .wp-block-post-terms,
body:has(#df-bnb-shell).wp-theme-genesis-block-theme .wp-block-post-author,
body:has(#df-bnb-shell).wp-theme-genesis-block-theme .wp-block-archives,
body:has(#df-bnb-shell).wp-theme-genesis-block-theme .wp-block-categories{
  display: none !important;
}

/* If the theme still reserves spacing at the top */
body:has(#df-bnb-shell).wp-theme-genesis-block-theme .site-content,
body:has(#df-bnb-shell).wp-theme-genesis-block-theme #content{
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* Theme background leak (white border) — body keeps brand colour */
body:has(#df-bnb-shell) .site-container,
body:has(#df-bnb-shell) .site-inner,
body:has(#df-bnb-shell) .content-sidebar-wrap,
body:has(#df-bnb-shell) .content{
  background: transparent !important;
}

@media (prefers-reduced-motion: reduce){
  #df-bnb-shell *{
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
}

/* Reveal category shell once CSS is applied */
#df-bnb-shell[data-page="category"] {
  visibility: visible;
}

/* Cloudflare Turnstile: hard-center the widget */
.cf-turnstile,
.turnstile-container,
#cf-turnstile,
#turnstile,
[class*="turnstile"]{
  display: flex;
  justify-content: center;
  width: 100%;
}

.cf-turnstile > div,
.turnstile-container > div,
#cf-turnstile > div,
#turnstile > div{
  margin-left: auto;
  margin-right: auto;
}

/* Some themes render it as an iframe directly */
.cf-turnstile iframe,
.turnstile-container iframe,
#cf-turnstile iframe,
#turnstile iframe{
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* =========================================================
   GLOBAL MOBILE OVERFLOW FIX
   Prevents long unspaced strings (EDIDs, FormIDs, conditions,
   URLs) from blowing out of boxes on mobile.
   Cascades to ALL pages (category + guide + every module).
   ========================================================= */
#df-bnb-shell{
  overflow-wrap: break-word;
  word-break: break-word;
}


/* =========================================================
   KEYWORD HIGHLIGHT
   - Shared by the home-page predictive dropdown and the
     server-side /search/ results page (snippets come back
     pre-wrapped in <mark class="bnb-hl">).
   ========================================================= */
mark.bnb-hl {
  background: rgba(214, 134, 63, 0.35);
  color: #fff;
  padding: 0 2px;
  border-radius: 3px;
}