/* =========================================================
   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. */
html:has(#df-bnb-shell),
body:has(#df-bnb-shell){
  margin: 0 !important;
  padding: 0 !important;
  background: var(--bg) !important;
}

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

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: 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 + LAYOUT (single consolidated block)
   Previously duplicated across 4 separate locations.
   ========================================================= */

body:has(#df-bnb-shell),
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;
}

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;
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

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;
}

/* Hide theme header/nav */
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;
}

body:has(#df-bnb-shell) .site-content,
body:has(#df-bnb-shell) #content{
  padding-top: 0 !important;
  margin-top: 0 !important;
}

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

/* Genesis Block Theme specific overrides */
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;
}

/* =========================================================
   BRAND VARIABLES + COLOR MIX ENGINE
   ========================================================= */
#df-bnb-shell{
  --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);

  --mixPct: 0%;
  --mix: 0;

  --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));

  --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;
}

#df-bnb-shell[data-active="df"]{ --mixPct: 100%; --mix: 1; }
#df-bnb-shell[data-active="bnb"]{ --mixPct: 0%; --mix: 0; }

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

/* =========================
   CATEGORY APP WRAP
   ========================= */
#df-bnb-shell [data-dfbnb="categoryApp"],
body:has(#df-bnb-shell) #df-bnb-shell [data-dfbnb="categoryApp"]{
  width: 100%;
  display:block;
}

/* =========================
   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);
}

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; }

#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; }

#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;
}

#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;
}

#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 BAR: ONE CARD (TITLE + SEARCH)
   Consolidated from two competing blocks.
   Background now uses brand-mix var (was hardcoded rgba(230,217,180,0.92)
   which always rendered DF cream even on BNB pages).
   ========================= */
#dfbnbCatTopBar{
  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;
}

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

/* Title — consolidated from three separate definitions */
#dfbnbCatTopTitle{
  width: 100%;
  padding: 16px 16px 10px;
  border: 0;
  background: transparent;
  box-shadow: none;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  font-size: 18px;
  color: var(--accent);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

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

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

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

/* =========================
   FILTER + SORT CONTROLS
   ========================= */
#dfbnbCatControls,
#dfbnbCatResults{
  width: 100%;
  margin: 0;
}

#dfbnbCatControls{ padding: 0; display:block; }
#dfbnbCatResults{ padding: 0 0 24px; }

/* =========================
   MAIN LAYOUT: 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;
}

#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; } }

/* =========================
   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; }

#df-bnb-shell select option{ background: var(--panel); color: var(--text); }

#df-bnb-shell select:focus,
#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{
  display:grid;
  grid-template-columns: 1fr;
  gap: 12px;
  max-width: 820px;
  padding: 0 0 24px;
}

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

#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;
}

#dfbnbCatResults a.card{
  contain: layout paint style;
  position: relative;
  content-visibility: auto;
  contain-intrinsic-size: 120px;
  display:block;
  min-width: 0;
  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 — break-word + anywhere for max compat */
  white-space: normal;
  overflow: visible;
  overflow-wrap: anywhere;
  word-break: break-word;
  min-width: 0;
  max-width: 100%;
}

#dfbnbCatResults a.card .meta{
  margin-top: 10px;
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

#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);
}

#dfbnbCatResults a.card .stat-updated .label{ color: var(--muted); }
#dfbnbCatResults a.card .stat-reviews svg{ color: var(--accent); }

#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;
}

#dfbnbCatResults a.card .pin svg{ width: 18px; height: 18px; display:block; }
#dfbnbCatResults a.card .pin--off{ display: none; }
#dfbnbCatResults a.card .pin--on{ display: block; color: var(--accent); }

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

#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;
}

#dfbnbCatResults a.card .dfbnb-card-btn:focus{ outline: none; }

#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; }

#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);
}

/* =========================
   FOOTER SOCIALS + SOCIAL BUTTONS
   (Single definition — was duplicated twice)
   ========================= */
#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
   ========================= */
#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
   (Single definition — was duplicated twice)
   ========================= */
#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
   ========================= */
#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; }

/* =========================
   RESPONSIVE: SMALL SCREENS
   ========================= */
@media (max-width: 560px){
  #dfbnbCatStickyBar{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
  }

  /* FIX: was `margin: 0 auto` which wiped margin-top, hiding the banner
     behind the fixed bar on mobile. Split into separate properties.
     Flush-left layout: no left margin, gap + curve on right. */
  #dfbnbCatHeaderBanner{
    margin-top: calc(var(--topBarH) + 14px);
    margin-left: 0;
    margin-right: 10px;
    max-width: 1120px;
    border-radius: 0 var(--r) var(--r) 0;
  }

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

  /* Auth buttons side-by-side on mobile (row, not stacked column) */
  #dfbnbCatStickyBar .dfbnb-cat-right{
    flex: 0 1 auto;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-end;
    gap: 6px;
  }

  #dfbnbCatStickyBar .dfbnb-auth-btn{ height: 34px; padding: 6px 10px; font-size: 12px; }
  #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; }
}

/* =========================
   CLOUDFLARE TURNSTILE
   Scoped to shell — was previously global, affecting login page
   and any other page with a Turnstile widget outside the shell.
   ========================= */
#df-bnb-shell .cf-turnstile,
#df-bnb-shell .turnstile-container,
#df-bnb-shell [class*="turnstile"]{
  display: flex;
  justify-content: center;
  width: 100%;
}

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

#df-bnb-shell .cf-turnstile iframe,
#df-bnb-shell .turnstile-container iframe{
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* =========================
   ACCESSIBILITY
   ========================= */
@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;
}