:root{
  --red:#73070B;
  --bright-red:#73070B;
  --black:#090a0d;
  --panel:#101116;
  --panel2:#15171d;
  --line:#2b2f37;
  --muted:#a9adb5;
}

*{
  box-sizing:border-box;
  border-radius:0 !important;
}

html,
body{
  margin:0;
  background:#0b0c10;
  color:#fff;
  font-family:Arial,Helvetica,sans-serif;
}

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

button,
input,
select{
  font:inherit;
}

.site-header{
  background:#090a0d;
  border-bottom:3px solid var(--red);
}

.header-inner{
  width:min(1380px,94vw);
  min-height:70px;
  margin:auto;
  display:flex;
  align-items:center;
  gap:28px;
}

.logo{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:24px;
  font-weight:900;
}

.logo-mark{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  background:var(--red);
  font-size:14px;
}

.logo-text{
  color:#fff;
}

nav{
  display:flex;
  align-items:center;
  gap:18px;
  flex-wrap:wrap;
  font-size:12px;
}

nav a{
  color:#fff;
}

nav a:hover,
nav a.active{
  color:var(--bright-red);
}

.producer-hero{
  width:100%;
  background:#090a0d;
  border-bottom:3px solid var(--red);
  overflow:hidden;
  line-height:0;
}

.producer-hero img{
  display:block;
  width:100%;
  height:auto;
  object-fit:contain;
}

.producer-wrap{
  width:min(1440px,95vw);
  margin:18px auto 70px;
}

.producer-toolbar{
  display:grid;
  grid-template-columns:minmax(260px,1.6fr) .65fr .65fr .8fr;
  gap:10px;
  margin-bottom:18px;
}

.producer-toolbar input,
.producer-toolbar select,
.table-controls input,
.table-controls select,
.producer-sidebar select{
  background:#101116;
  color:#fff;
  border:1px solid #30343d;
  padding:11px 12px;
  outline:none;
}

.producer-toolbar input:focus,
.table-controls input:focus{
  border-color:var(--red);
}

.producer-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) 280px;
  gap:18px;
  align-items:start;
}

.section-title{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:14px;
  margin-bottom:12px;
}

.section-title h2{
  margin:0;
  font-size:18px;
  text-transform:uppercase;
}

.section-title button{
  border:0;
  background:transparent;
  color:var(--bright-red);
  font-weight:800;
  cursor:pointer;
}

.featured-grid{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:10px;
}

.producer-card{
  background:#101116;
  border:1px solid #2a2e35;
  overflow:hidden;
}

.producer-card:hover{
  border-color:var(--red);
}

.producer-image{
  position:relative;
  aspect-ratio:1;
  background:#191b21 center / cover no-repeat;
}

.play-badge{
  position:absolute;
  right:10px;
  bottom:10px;
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  border:1px solid #fff;
  background:#0b0c10cc;
  color:#fff;
  font-size:12px;
}

.producer-card-body{
  padding:11px;
}

.producer-card-body h3{
  margin:0 0 5px;
  color:var(--bright-red);
  font-size:14px;
}

.producer-card-body p{
  margin:3px 0;
  color:#c4c7cd;
  font-size:10px;
}

.producer-stats{
  display:flex;
  gap:12px;
  margin-top:8px;
  color:#e0e2e6;
  font-size:10px;
}

.benefit-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:10px;
  margin:14px 0 26px;
}

.benefit-grid article{
  min-height:92px;
  padding:14px;
  background:#101116;
  border:1px solid #2a2e35;
  border-top:3px solid var(--red);
}

.benefit-grid strong{
  display:block;
  margin-bottom:6px;
  font-size:13px;
}

.benefit-grid p{
  margin:0;
  color:#aeb2ba;
  font-size:10px;
  line-height:1.45;
}

.all-title{
  margin-top:6px;
}

.table-controls{
  display:flex;
  gap:8px;
}

.table-controls input{
  min-width:240px;
}

.producer-table{
  border:1px solid #2a2e35;
}

.table-head,
.producer-row{
  display:grid;
  grid-template-columns:1.45fr .8fr .8fr .55fr .55fr .7fr;
  align-items:center;
}

.table-head{
  background:#090a0d;
  color:#aeb2ba;
  text-transform:uppercase;
  font-size:9px;
  font-weight:800;
}

.table-head span{
  padding:11px;
}

.producer-row{
  min-height:76px;
  background:#101116;
  border-top:1px solid #2a2e35;
}

.producer-row:nth-child(even){
  background:#12141a;
}

.producer-row > *{
  padding:10px 11px;
}

.producer-person{
  display:flex;
  align-items:center;
  gap:10px;
}

.producer-avatar{
  width:50px;
  height:50px;
  background:#1b1d23 center / cover no-repeat;
}

.producer-name{
  color:var(--bright-red);
  font-size:12px;
  font-weight:800;
}

.producer-meta{
  margin-top:3px;
  color:#aeb2ba;
  font-size:9px;
}

.table-cell{
  color:#d4d6da;
  font-size:10px;
}

.view-profile{
  display:inline-block;
  background:#73070B;
  color:#fff;
  padding:9px 12px;
  font-size:10px;
  font-weight:800;
}

.producer-sidebar{
  display:grid;
  gap:14px;
}

.side-panel,
.join-panel{
  background:#101116;
  border:1px solid #2a2e35;
  padding:16px;
}

.side-panel h3,
.join-panel h3{
  margin:0 0 12px;
  text-transform:uppercase;
  font-size:14px;
}

.side-link{
  display:block;
  width:100%;
  padding:9px 10px;
  border:0;
  background:transparent;
  color:#fff;
  text-align:left;
  cursor:pointer;
}

.side-link:hover,
.side-link.active-filter{
  background:#73070B;
}

.genre-buttons{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
}

.genre-buttons button{
  padding:8px 11px;
  border:1px solid #2f333b;
  background:#17191f;
  color:#fff;
  font-size:10px;
  cursor:pointer;
}

.genre-buttons button.active{
  background:#73070B;
  border-color:#73070B;
}

.producer-sidebar select{
  width:100%;
}

.join-panel h3{
  color:var(--bright-red);
}

.join-panel p{
  color:#c0c3ca;
  font-size:11px;
  line-height:1.45;
}

.join-panel a{
  display:block;
  margin-top:12px;
  background:#73070B;
  padding:11px;
  color:#fff;
  text-align:center;
  font-weight:900;
}

footer{
  border-top:3px solid var(--red);
  background:#090a0d;
}

.footer-inner{
  width:min(1380px,94vw);
  margin:auto;
  padding:24px 0;
  display:flex;
  justify-content:space-between;
  gap:20px;
  font-size:12px;
}

.footer-inner span{
  display:block;
  margin-top:3px;
  color:#969aa4;
}

.footer-inner div:last-child{
  display:flex;
  gap:14px;
}

.empty{
  grid-column:1/-1;
  padding:28px;
  border:1px solid #2a2e35;
  background:#101116;
  color:#aeb2ba;
  text-align:center;
}

@media(max-width:1200px){
  .featured-grid{
    grid-template-columns:repeat(4,1fr);
  }
}

@media(max-width:960px){
  nav{
    display:none;
  }

  .producer-layout{
    grid-template-columns:1fr;
  }

  .producer-toolbar{
    grid-template-columns:1fr 1fr;
  }

  .producer-sidebar{
    grid-template-columns:repeat(2,1fr);
  }
}

@media(max-width:700px){
  .featured-grid{
    grid-template-columns:repeat(2,1fr);
  }

  .benefit-grid{
    grid-template-columns:1fr 1fr;
  }

  .table-head{
    display:none;
  }

  .producer-row{
    grid-template-columns:1fr 1fr;
  }

  .producer-toolbar{
    grid-template-columns:1fr;
  }

  .table-controls{
    display:grid;
  }

  .producer-sidebar{
    grid-template-columns:1fr;
  }
}

@media(max-width:480px){
  .featured-grid,
  .benefit-grid{
    grid-template-columns:1fr;
  }

  .producer-row{
    grid-template-columns:1fr;
  }
}


/* =========================================================
   PRODUCERS V3 — FULL HERO + ALL FOUR BENEFIT BOXES
   ========================================================= */

.producer-hero{
  display:block !important;
  width:100% !important;
  max-width:none !important;
  aspect-ratio:1536 / 445 !important;
  height:auto !important;
  margin:0 !important;
  padding:0 !important;
  overflow:hidden !important;
  line-height:0 !important;
  background:#090a0d !important;
  border-bottom:3px solid #73070B !important;
}

.producer-hero img{
  display:block !important;
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:center !important;
  margin:0 !important;
  padding:0 !important;
  max-width:none !important;
}

.benefit-grid{
  display:grid !important;
  grid-template-columns:repeat(4,1fr) !important;
  gap:10px !important;
  margin:14px 0 26px !important;
}

.benefit-grid article{
  display:flex !important;
  align-items:center !important;
  gap:14px !important;
  min-height:100px !important;
  padding:14px !important;
  background:#101116 !important;
  border:1px solid #2a2e35 !important;
  border-top:3px solid #73070B !important;
}

.benefit-icon{
  flex:0 0 50px !important;
  width:50px !important;
  height:50px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  color:#73070B !important;
}

.benefit-icon svg{
  width:46px !important;
  height:46px !important;
  fill:none !important;
  stroke:currentColor !important;
  stroke-width:2.4 !important;
  stroke-linecap:round !important;
  stroke-linejoin:round !important;
}

.benefit-copy{
  min-width:0 !important;
}

.benefit-copy strong{
  display:block !important;
  margin-bottom:6px !important;
  color:#fff !important;
  font-size:13px !important;
}

.benefit-copy p{
  margin:0 !important;
  color:#aeb2ba !important;
  font-size:10px !important;
  line-height:1.45 !important;
}

@media(max-width:700px){
  .benefit-grid{
    grid-template-columns:1fr 1fr !important;
  }
}

@media(max-width:480px){
  .benefit-grid{
    grid-template-columns:1fr !important;
  }
}


/* =========================================================
   PRODUCERS V6 — STRUCTURED 1536x445 HERO
   No flattened-image stretching. Fills full block naturally.
   ========================================================= */

.producer-hero{
  position:relative !important;
  width:100% !important;
  height:445px !important;
  aspect-ratio:auto !important;
  display:grid !important;
  grid-template-columns:28% 72% !important;
  overflow:hidden !important;
  margin:0 !important;
  padding:0 !important;
  background:#f4f4f2 !important;
  border-bottom:3px solid #73070B !important;
  line-height:normal !important;
}

.producer-hero-studio{
  height:100% !important;
  background-image:url('/producer-hero-studio.png') !important;
  background-size:cover !important;
  background-position:center !important;
  background-repeat:no-repeat !important;
}

.producer-hero-content{
  position:relative !important;
  min-width:0 !important;
  height:100% !important;
  display:grid !important;
  grid-template-columns:minmax(520px,1.25fr) minmax(260px,.62fr) minmax(190px,.44fr) !important;
  align-items:stretch !important;
  background:#f4f4f2 !important;
  overflow:hidden !important;
}

.producer-hero-copy{
  position:relative !important;
  z-index:3 !important;
  padding:34px 20px 28px 40px !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:center !important;
  color:#090a0d !important;
}

.producer-brandline{
  display:flex !important;
  align-items:baseline !important;
  gap:0 !important;
  font-family:Impact,'Arial Narrow',Arial,sans-serif !important;
  font-size:58px !important;
  line-height:.92 !important;
  font-weight:900 !important;
  letter-spacing:-2px !important;
}

.producer-brandline .hero-os{
  color:#73070B !important;
}

.producer-hero-copy h1{
  margin:4px 0 8px !important;
  color:#73070B !important;
  font-family:Impact,'Arial Narrow',Arial,sans-serif !important;
  font-size:106px !important;
  line-height:.88 !important;
  font-weight:900 !important;
  letter-spacing:-2px !important;
}

.producer-tagline{
  margin:0 0 26px !important;
  color:#111 !important;
  font-size:24px !important;
  font-weight:900 !important;
  letter-spacing:.2px !important;
}

.producer-tagline strong{
  color:#73070B !important;
}

.producer-hero-benefits{
  display:grid !important;
  grid-template-columns:repeat(4,minmax(120px,1fr)) !important;
  gap:14px !important;
}

.hero-benefit{
  min-width:0 !important;
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
  color:#111 !important;
}

.hero-benefit-icon{
  flex:0 0 38px !important;
  width:38px !important;
  height:38px !important;
  display:grid !important;
  place-items:center !important;
  color:#73070B !important;
}

.hero-benefit-icon svg{
  width:36px !important;
  height:36px !important;
  fill:none !important;
  stroke:currentColor !important;
  stroke-width:2.4 !important;
  stroke-linecap:round !important;
  stroke-linejoin:round !important;
}

.hero-benefit strong{
  display:block !important;
  color:#111 !important;
  font-size:12px !important;
  line-height:1.1 !important;
}

.hero-benefit small{
  display:block !important;
  margin-top:3px !important;
  color:#333 !important;
  font-size:9px !important;
  line-height:1.15 !important;
}

.producer-hero-mark{
  position:relative !important;
  z-index:3 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:50px 8px !important;
}

.producer-hero-mark img{
  display:block !important;
  width:min(100%,310px) !important;
  height:auto !important;
  object-fit:contain !important;
}

.producer-hero-dots{
  position:relative !important;
  height:100% !important;
  background:
    linear-gradient(130deg,transparent 0 16%,#090a0d 16% 29%,#73070B 29% 34%,transparent 34%),
    url('/producer-hero-dots.png') center/cover no-repeat !important;
}

@media(max-width:1150px){
  .producer-hero{
    height:400px !important;
    grid-template-columns:25% 75% !important;
  }
  .producer-hero-content{
    grid-template-columns:minmax(430px,1.4fr) minmax(220px,.65fr) 150px !important;
  }
  .producer-brandline{font-size:48px !important}
  .producer-hero-copy h1{font-size:82px !important}
  .producer-tagline{font-size:19px !important}
  .producer-hero-benefits{grid-template-columns:1fr 1fr !important}
}

@media(max-width:800px){
  .producer-hero{
    height:auto !important;
    min-height:445px !important;
    grid-template-columns:1fr !important;
  }
  .producer-hero-studio{
    display:none !important;
  }
  .producer-hero-content{
    grid-template-columns:1fr !important;
  }
  .producer-hero-copy{
    padding:32px 24px !important;
  }
  .producer-hero-mark,
  .producer-hero-dots{
    display:none !important;
  }
  .producer-brandline{font-size:42px !important}
  .producer-hero-copy h1{font-size:72px !important}
}

/* PRODUCERS V7 — proportional full-height banner */
.producer-hero{
  width:100% !important;
  height:445px !important;
  min-height:445px !important;
  margin:0 !important;
  padding:0 !important;
  overflow:hidden !important;
  background:#080a0d !important;
  border-bottom:3px solid #73070B !important;
  display:block !important;
}
.producer-hero-image{
  display:block !important;
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:center center !important;
  margin:0 !important;
  padding:0 !important;
}
@media(max-width:800px){
 .producer-hero{height:auto !important;min-height:0 !important}
 .producer-hero-image{height:auto !important;object-fit:contain !important}
}

/* PRODUCERS V8 — selected banner + light marketplace background */
html, body {
  background: #ececeb !important;
}
body {
  color: #111 !important;
}
.producer-hero {
  width: 100% !important;
  height: 445px !important;
  min-height: 445px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: #08090c !important;
  border-bottom: 3px solid #73070B !important;
}
.producer-hero-image {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  background: #08090c !important;
}
.producers-page,
.producers-main,
.producer-directory,
main {
  background: #ececeb !important;
}
.producers-page h1, .producers-page h2, .producers-page h3,
.producers-main h1, .producers-main h2, .producers-main h3,
.producer-directory h1, .producer-directory h2, .producer-directory h3,
main > h1, main > h2, main > h3 {
  color: #111 !important;
}
/* Keep interactive/filter/card areas in OSBeats dark treatment */
.producer-card,
.feature-box,
.benefit-card,
.sidebar-panel,
.filter-panel,
.browse-panel,
.join-panel,
.producer-table,
.producer-table-wrap,
.producer-controls input,
.producer-controls select,
.producers-toolbar input,
.producers-toolbar select {
  background: #101116 !important;
  color: #fff !important;
}
.producer-card *, .feature-box *, .benefit-card *,
.sidebar-panel *, .filter-panel *, .browse-panel *, .join-panel *,
.producer-table *, .producer-table-wrap * {
  color: inherit;
}
@media (max-width: 800px) {
  .producer-hero { height: auto !important; min-height: 0 !important; }
  .producer-hero-image { height: auto !important; object-fit: contain !important; }
}

/* PRODUCERS V9 — FRESH BANNER, NATURAL FULL-HEIGHT PROPORTIONS */
.producer-hero {
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 0 !important;
  overflow: hidden !important;
  background: #08090c !important;
  border-bottom: 3px solid #73070B !important;
}
.producer-hero-image {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-width: none !important;
  object-fit: initial !important;
  object-position: initial !important;
  margin: 0 !important;
  padding: 0 !important;
}


/* =========================================================
   PRODUCERS SIDEBAR — APPROVED RED/BLACK UI THEME
   Matches the site-wide red-to-black active tab / CTA treatment.
   ========================================================= */

/* Sort dropdown */
.producers-sidebar select,
.producer-sidebar select,
.sidebar-filter select{
  background:#111318 !important;
  color:#fff !important;
  border:1px solid #2f343d !important;
}

.producers-sidebar select:focus,
.producer-sidebar select:focus,
.sidebar-filter select:focus{
  border-color:#73070B !important;
  outline:none !important;
}

/* Browse active item */
.producers-sidebar .browse a.active,
.producer-sidebar .browse a.active,
.producers-sidebar .browse-list a.active,
.producer-sidebar .browse-list a.active,
.producers-sidebar .sidebar-link.active,
.producer-sidebar .sidebar-link.active{
  background:linear-gradient(105deg,#69060A 0%,#78070B 32%,#450408 65%,#100F12 100%) !important;
  background-color:#73070B !important;
  border-color:#73070B !important;
  color:#fff !important;
}

/* Genre active filter */
.producers-sidebar .genre-filter button.active,
.producer-sidebar .genre-filter button.active,
.producers-sidebar .filter-chip.active,
.producer-sidebar .filter-chip.active,
.producers-sidebar .genre-buttons .active,
.producer-sidebar .genre-buttons .active{
  background:linear-gradient(105deg,#69060A 0%,#78070B 32%,#450408 65%,#100F12 100%) !important;
  background-color:#73070B !important;
  border-color:#73070B !important;
  color:#fff !important;
}

/* Inactive filter buttons */
.producers-sidebar .genre-filter button,
.producer-sidebar .genre-filter button,
.producers-sidebar .filter-chip,
.producer-sidebar .filter-chip,
.producers-sidebar .genre-buttons button,
.producer-sidebar .genre-buttons button{
  background:#111318 !important;
  color:#fff !important;
  border-color:#343943 !important;
}

/* Location select block */
.producers-sidebar .location-filter select,
.producer-sidebar .location-filter select{
  background:#111318 !important;
  color:#fff !important;
  border-color:#343943 !important;
}

/* Producer CTA panel */
.producers-sidebar .producer-cta,
.producer-sidebar .producer-cta,
.producers-sidebar .sidebar-cta,
.producer-sidebar .sidebar-cta{
  background:#111318 !important;
  border:1px solid #2f343d !important;
}

.producers-sidebar .producer-cta h3,
.producer-sidebar .producer-cta h3,
.producers-sidebar .sidebar-cta h3,
.producer-sidebar .sidebar-cta h3{
  color:#73070B !important;
}

.producers-sidebar .producer-cta a,
.producer-sidebar .producer-cta a,
.producers-sidebar .sidebar-cta a,
.producer-sidebar .sidebar-cta a,
.producers-sidebar .join-now,
.producer-sidebar .join-now{
  background:linear-gradient(105deg,#69060A 0%,#78070B 32%,#450408 65%,#100F12 100%) !important;
  background-color:#73070B !important;
  border-color:#73070B !important;
  color:#fff !important;
}

.producers-sidebar .producer-cta a:hover,
.producer-sidebar .producer-cta a:hover,
.producers-sidebar .sidebar-cta a:hover,
.producer-sidebar .sidebar-cta a:hover,
.producers-sidebar .join-now:hover,
.producer-sidebar .join-now:hover{
  background:linear-gradient(105deg,#7B080D 0%,#920A10 34%,#520509 67%,#100F12 100%) !important;
  border-color:#920A10 !important;
}

/* Generic fallback for the actual Producers page sidebar structure */
.sidebar .browse-menu .active,
.sidebar .genre-filter .active,
.sidebar .filter-chip.active{
  background:linear-gradient(105deg,#69060A 0%,#78070B 32%,#450408 65%,#100F12 100%) !important;
  background-color:#73070B !important;
  color:#fff !important;
  border-color:#73070B !important;
}

.sidebar .join-button,
.sidebar .join-now{
  background:linear-gradient(105deg,#69060A 0%,#78070B 32%,#450408 65%,#100F12 100%) !important;
  border-color:#73070B !important;
  color:#fff !important;
}


/* =========================================================
   PRODUCERS DIRECTORY — FILTER + VERIFIED CONSISTENCY PASS
   ========================================================= */

/* Typeable location filters, matching the Artists directory behavior. */
.producer-toolbar input#locationFilter,
.producer-sidebar input#locationFilterSide{
  width:100% !important;
  height:46px !important;
  box-sizing:border-box !important;
  background:#101116 !important;
  color:#fff !important;
  border:1px solid #333740 !important;
  padding:0 14px !important;
  font-family:inherit !important;
  font-size:15px !important;
  outline:none !important;
}

.producer-toolbar input#locationFilter:focus,
.producer-sidebar input#locationFilterSide:focus{
  border-color:#73070B !important;
}

.producer-toolbar input#locationFilter::placeholder,
.producer-sidebar input#locationFilterSide::placeholder{
  color:#fff !important;
  opacity:1 !important;
}

/* Use the same real verification treatment as the Artists directory. */
.producer-verified-badge{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:15px !important;
  height:15px !important;
  margin-left:4px !important;
  border-radius:50% !important;
  background:linear-gradient(105deg,#69060A 0%,#78070B 45%,#450408 75%,#100F12 100%) !important;
  border:1px solid #73070B !important;
  color:#fff !important;
  font-size:9px !important;
  font-weight:900 !important;
  line-height:1 !important;
  vertical-align:middle !important;
}

.producer-card-body h3,
.producer-name{
  display:flex !important;
  align-items:center !important;
  gap:4px !important;
}

/* Keep active sidebar/filter states on the approved red-black mix. */
.producer-sidebar .side-link.active-filter,
.producer-sidebar .genre-buttons button.active{
  background:linear-gradient(105deg,#69060A 0%,#78070B 32%,#450408 65%,#100F12 100%) !important;
  background-color:#73070B !important;
  color:#fff !important;
  border-color:#73070B !important;
}

.producer-sidebar .join-panel a,
.producer-table .view-profile{
  background:linear-gradient(105deg,#69060A 0%,#78070B 32%,#450408 65%,#100F12 100%) !important;
  background-color:#73070B !important;
  color:#fff !important;
  border-color:#73070B !important;
}