/* --- Promo bar + nav home --- */
body.brand--home .promo-bar {
  background: var(--yellow);
  color: var(--bodega-red);
  border-bottom-color: var(--bodega-green);
}

.nav-home {
  background: var(--yellow);
  color: var(--black);
  border-color: transparent !important;
}

.nav-home.is-active {
  outline: 2px solid var(--black);
  outline-offset: 2px;
}

body.brand--home .nav-links a { border-color: transparent; }

/* --- Brand: Home --- */

body.brand--home .offblack-section,
.offblack-section {
  background: var(--offblack);
  color: var(--white);
  border-top: 3px solid var(--black);
  border-bottom: 3px solid var(--black);
}

.offblack-section .section-copy,
.offblack-section .feature-copy p,
.offblack-section .drop-copy p { color: rgba(255,253,246,0.72); }

body.brand--home .yellow-section {
  background: var(--yellow);
  border-top: 4px solid var(--bodega-green);
  border-bottom: 4px solid var(--bodega-green);
}

.yellow-section .eyebrow { color: var(--bodega-green); }
.yellow-section h2,
.yellow-section h3 { color: var(--bodega-red); }
.yellow-section p,
.yellow-section .yellow-copy { color: var(--bodega-green); font-weight: 800; font-size: 20px; max-width: 560px; }
.yellow-section .btn { color: var(--bodega-green); border-color: var(--bodega-green); }
.yellow-section .btn-white { background: var(--white); }

body.brand--home .footer {
  background: var(--black);
  color: var(--white);
  border-top: 1px solid rgba(255,255,255,0.12);
}

body.brand--home .footer .nav-deep-city { border-color: rgba(255,255,255,0.45); }
body.brand--home .ig-handle { background: var(--yellow); }
body.brand--home .newsletter-section { background: var(--offblack); border-top: 3px solid var(--black); }

/* --- Brand: Deep City --- */
body.brand--deep-city .promo-bar {
  background: var(--white);
  color: var(--black);
  border-bottom-color: var(--mid-grey);
}

body.brand--deep-city .site-nav {
  background: var(--deepblack);
  border-bottom: 4px solid var(--mid-grey);
}

body.brand--deep-city .bag-link { color: var(--white); }

body.brand--deep-city .nav-logo {
  width: 76px;
  height: 76px;
  background: var(--black);
  border: 2px solid var(--black);
  justify-content: center;
  padding: 4px;
}

body.brand--deep-city .nav-logo img {
  width: 100%;
  height: auto;
  max-height: 100%;
  object-fit: contain;
}

body.brand--deep-city .nav-links a { border-color: transparent; }
body.brand--deep-city .footer-links a { border: 2px solid var(--black); }
body.brand--deep-city .nav-same-gang { background: var(--dark-grey); }
body.brand--deep-city .nav-soulsita { background: var(--white); color: var(--black); }
body.brand--deep-city .nav-mi-gente { background: var(--soft-grey); color: var(--black); }

body.brand--deep-city .gate-pattern {
  background-color: var(--soft-grey);
  background-image:
    repeating-linear-gradient(0deg, rgba(17,17,17,0.22) 0, rgba(17,17,17,0.22) 2px, transparent 2px, transparent 24px),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.28) 0, rgba(255,255,255,0.28) 1px, transparent 1px, transparent 48px);
}

body.brand--deep-city .filter-section { background: var(--soft-grey); }
body.brand--deep-city .notes-section { background: var(--soft-grey); }
body.brand--deep-city .notes-section h2 { font-size: clamp(50px, 8vw, 104px); }
body.brand--deep-city .product-grid { grid-template-columns: repeat(4, 1fr); }
body.brand--deep-city .product-photo img { filter: grayscale(1); }
body.brand--deep-city .ig-post { filter: grayscale(1); }
body.brand--deep-city .ig-handle { background: var(--black); color: var(--white); }
body.brand--deep-city .signup-form button,
body.brand--deep-city .clw-submit { background: var(--white); color: var(--black); border-color: var(--white); }
body.brand--deep-city .footer { background: var(--black); color: var(--white); }
body.brand--deep-city .footer-logo { width: 70px; height: 70px; border: 2px solid var(--white); }
body.brand--deep-city .footer-links a { border-color: rgba(255,255,255,0.5); }
body.brand--deep-city .meta-row span { border-color: rgba(255,253,246,0.86); background: transparent; color: var(--white); }

/* --- Brand: Same Gang --- */
body.brand--same-gang .promo-bar {
  background: var(--red);
  color: var(--white);
  border-bottom-color: var(--black);
}

body.brand--same-gang .site-nav {
  background: var(--red);
  border-bottom: 4px solid var(--black);
}

body.brand--same-gang .nav-logo { width: 150px; min-height: 48px; }
body.brand--same-gang .nav-links a { border: 2px solid var(--white); }
body.brand--same-gang .bag-link { color: var(--white); }
body.brand--same-gang .nav-same-gang { background: var(--white); color: var(--red); }
body.brand--same-gang .nav-soulsita { background: var(--red-dark); color: var(--white); }
body.brand--same-gang .nav-mi-gente { background: var(--white); color: var(--black); }

body.brand--same-gang .filter-section {
  background: var(--red);
  color: var(--white);
}

body.brand--same-gang .filter-pills a.active { background: var(--black); color: var(--white); }
body.brand--same-gang .gate-card h2 { color: var(--red); }
body.brand--same-gang .gate-list a:nth-child(even) { color: var(--red); }
body.brand--same-gang .shop-header h2,
body.brand--same-gang .section-title { color: var(--red); }
body.brand--same-gang .price { color: var(--red); }

body.brand--same-gang .red-section {
  background: var(--red);
  color: var(--white);
  border-top: 3px solid var(--black);
  border-bottom: 3px solid var(--black);
}

.red-section .section-copy { color: rgba(255,255,255,0.8); }
body.brand--same-gang .feature-grid { border-color: var(--black); background: var(--white); color: var(--black); }
body.brand--same-gang .feature-copy h3 { color: var(--red); }
body.brand--same-gang .feature-copy p { color: var(--muted); }
body.brand--same-gang .meta-row span { border-color: var(--black); color: var(--black); background: var(--white); }
body.brand--same-gang .notes-section h2 span { color: var(--red); }
body.brand--same-gang .note-item strong { color: var(--red); }
body.brand--same-gang .notes-list { background: var(--paper); }
body.brand--same-gang .instagram-top h2 { color: var(--red); }
body.brand--same-gang .ig-handle { background: var(--red); color: var(--white); }
body.brand--same-gang .newsletter-box h2 { color: var(--red); }
body.brand--same-gang .signup-form button,
body.brand--same-gang .clw-submit { background: var(--red); border-color: var(--red); color: var(--white); }
body.brand--same-gang .footer { background: var(--black); color: var(--white); }
body.brand--same-gang .footer-logo { background: var(--red); border: 2px solid var(--white); padding: 10px; }

/* --- Brand: Soulsita --- */
body.brand--soulsita .promo-bar {
  background: var(--white);
  color: var(--red);
  border-bottom-color: var(--green);
}

body.brand--soulsita .site-nav {
  background: var(--red);
  border-top: 2px solid var(--green);
  border-bottom: 4px solid var(--green);
}

body.brand--soulsita .nav-logo {
  border: none;
  padding: 8px 14px;
  width: 170px;
  background: transparent;
}

body.brand--soulsita .nav-logo img {
  max-height: 54px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}

body.brand--soulsita .nav-links a { border: 2px solid var(--green); }
body.brand--soulsita .footer-links a { border: 2px solid var(--green); }
body.brand--soulsita .bag-link { color: var(--white); }
body.brand--soulsita .eyebrow { color: var(--green); }
body.brand--soulsita .section-title { color: var(--red); }
body.brand--soulsita .section-title span { color: var(--green); }
body.brand--soulsita .hero h2 { color: var(--red); }

body.brand--soulsita .filter-section {
  background: var(--white);
  color: var(--green);
  border-color: var(--green);
}

body.brand--soulsita .filter-pills a {
  border-color: var(--green);
  color: var(--red);
}

body.brand--soulsita .filter-pills a.active {
  background: var(--red);
  border-color: var(--red);
  color: var(--white);
}

body.brand--soulsita .gate-pattern {
  background-color: var(--green-soft);
  border-color: var(--green);
}

body.brand--soulsita .gate-card { border-color: var(--green); }
body.brand--soulsita .gate-card h2 { color: var(--red); }
body.brand--soulsita .gate-list { border-color: var(--green); }
body.brand--soulsita .gate-list a {
  border-color: var(--green);
  color: var(--red);
}

body.brand--soulsita .gate-list a:nth-child(even) { color: var(--green); }
body.brand--soulsita .product-grid { border-color: var(--green); }
body.brand--soulsita .product-card { border-color: var(--green); }
body.brand--soulsita .product-card:nth-child(even) { background: var(--cream); }
body.brand--soulsita .product-photo { border-color: var(--green); }
body.brand--soulsita .product-title { color: var(--green); }
body.brand--soulsita .price { color: var(--red); }
body.brand--soulsita .product-meta span { border-color: var(--green); color: var(--red); }

body.brand--soulsita .feature-section {
  background: var(--white);
  border-top: 3px solid var(--green);
  border-bottom: 3px solid var(--green);
}

body.brand--soulsita .feature-grid { border-color: var(--green); }
body.brand--soulsita .feature-photo { border-color: var(--green); }
body.brand--soulsita .feature-copy h3 { color: var(--red); }
body.brand--soulsita .feature-copy h3 span { color: var(--green); }
body.brand--soulsita .meta-row span { border-color: var(--green); color: var(--red); }

body.brand--soulsita .notes-section {
  background: var(--red);
  color: var(--white);
  border-color: var(--green);
}

body.brand--soulsita .notes-section .eyebrow { color: var(--white); }
body.brand--soulsita .notes-section h2 span { color: var(--black); }
body.brand--soulsita .notes-list { border-color: var(--green); }
body.brand--soulsita .note-item { border-color: var(--green); }
body.brand--soulsita .note-item strong { color: var(--red); }
body.brand--soulsita .photo-shelf { border-color: var(--green); }
body.brand--soulsita .instagram-top h2 { color: var(--red); }
body.brand--soulsita .instagram-top h2 span { color: var(--green); }
body.brand--soulsita .ig-handle { background: var(--white); color: var(--red); border-color: var(--green); }
body.brand--soulsita .ig-grid { border-color: var(--green); }
body.brand--soulsita .ig-post { border-color: var(--green); }
body.brand--soulsita .newsletter-section { border-color: var(--green); }
body.brand--soulsita .newsletter-box { border-color: var(--green); }
body.brand--soulsita .newsletter-box h2 { color: var(--red); }
body.brand--soulsita .signup-form input,
body.brand--soulsita .clw-input { border-color: var(--green); }
body.brand--soulsita .signup-form button,
body.brand--soulsita .clw-submit { background: var(--red); border-color: var(--red); color: var(--white); }

body.brand--soulsita .footer {
  background: var(--white);
  color: var(--black);
  border-top: 4px solid var(--green);
}

body.brand--soulsita .footer-logo {
  border: 2px solid var(--green);
  padding: 8px 12px;
  width: 150px;
}

/* --- Brand: Mi Gente --- */
body.brand--mi-gente .promo-bar {
  background: var(--yellow);
  color: var(--black);
  border-bottom-color: var(--black);
}

body.brand--mi-gente .site-nav {
  background: var(--green);
  border-bottom: 4px solid var(--black);
}

body.brand--mi-gente .nav-logo {
  width: 150px;
  min-height: 54px;
  background: var(--red);
  color: var(--white);
  border: 2px solid var(--black);
  padding: 10px 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

body.brand--mi-gente .nav-logo-text {
  width: 100%;
  text-align: center;
  line-height: 0.85;
}

body.brand--mi-gente .nav-links a { border-color: transparent; }
body.brand--mi-gente .bag-link { color: var(--white); }
body.brand--mi-gente .nav-soulsita { background: var(--white); color: var(--red); }
body.brand--mi-gente .nav-mi-gente { background: var(--white); color: var(--green); }

body.brand--mi-gente .filter-section {
  background: var(--green);
  color: var(--white);
}

body.brand--mi-gente .filter-pills a.active { background: var(--red); color: var(--white); }
body.brand--mi-gente .gate-pattern { background-color: var(--green-soft); }
body.brand--mi-gente .gate-card h2 { color: var(--red); }
body.brand--mi-gente .gate-list a { color: var(--green); }
body.brand--mi-gente .gate-list a:nth-child(even) { color: var(--red); }
body.brand--mi-gente .shop-header h2 { color: var(--green); }
body.brand--mi-gente .shop-header h2 span,
body.brand--mi-gente .section-title span { color: var(--red); }
body.brand--mi-gente .price { color: var(--red); }

body.brand--mi-gente .green-section {
  background: var(--green);
  color: var(--white);
  border-top: 3px solid var(--black);
  border-bottom: 3px solid var(--black);
}

body.brand--mi-gente .green-section .section-title,
body.brand--mi-gente .green-section .eyebrow { color: var(--white); }
body.brand--mi-gente .green-section .section-copy { color: rgba(255,255,255,0.82); }
body.brand--mi-gente .feature-grid { border-color: var(--black); background: var(--white); color: var(--black); }
body.brand--mi-gente .feature-copy h3 { color: var(--red); }
body.brand--mi-gente .meta-row span { border-color: var(--black); background: var(--white); }

body.brand--mi-gente .notes-section {
  background: var(--red);
  color: var(--white);
}

body.brand--mi-gente .notes-section h2 span { color: var(--black); }
body.brand--mi-gente .notes-list { background: var(--white); color: var(--black); }
body.brand--mi-gente .note-item strong { color: var(--green); }
body.brand--mi-gente .instagram-top h2 { color: var(--green); }
body.brand--mi-gente .instagram-top h2 span { color: var(--red); }
body.brand--mi-gente .ig-handle { background: var(--green); color: var(--white); }
body.brand--mi-gente .newsletter-box h2 { color: var(--red); }
body.brand--mi-gente .signup-form button,
body.brand--mi-gente .clw-submit { background: var(--green); border-color: var(--green); color: var(--white); }
body.brand--mi-gente .footer-logo {
  width: 112px;
  background: var(--red);
  border: 2px solid var(--white);
  color: var(--white);
  padding: 10px;
}

body.brand--mi-gente .footer { background: var(--black); color: var(--white); }

/* Product grid default */
.product-grid { grid-template-columns: repeat(4, 1fr); }

/* Smash Balloon wrapper */
.ig-feed-plugin #sb_instagram {
  border-top: 2px solid var(--black);
  border-left: 2px solid var(--black);
}

/* --- Mobile overrides (must win over components.css) --- */
@media (max-width: 950px) {
  .hero-grid,
  .gate-grid,
  .category-header,
  .shop-header,
  .feature-grid,
  .drop-grid,
  .notes-grid,
  .yellow-grid,
  .newsletter-box,
  .contact-grid {
    grid-template-columns: 1fr !important;
  }

  .nav-inner {
    grid-template-columns: 1fr auto auto;
    justify-items: start;
  }

  .nav-toggle { display: inline-flex; }

  .nav-panel {
    position: fixed;
    top: 0;
    right: 0;
    width: min(360px, 100%);
    height: 100vh;
    background: var(--white);
    border-left: 3px solid var(--black);
    padding: 88px 24px 32px;
    transform: translateX(100%);
    transition: transform 0.24s ease;
    z-index: calc(var(--nav-z) + 1);
    overflow-y: auto;
  }

  body.brand--same-gang .nav-panel,
  body.brand--mi-gente .nav-panel.is-open { background: var(--white); }

  .nav-panel.is-open { transform: translateX(0); }

  .nav-panel .nav-links,
  .nav-panel .nav-links-wrap .nav-links {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }

  .nav-panel .nav-links a {
    width: 100%;
    justify-content: center;
  }

  .bag-link { display: none; }

  .category-grid,
  .product-grid { grid-template-columns: repeat(2, 1fr) !important; }

  .ig-grid { grid-template-columns: repeat(3, 1fr) !important; }

  .feature-photo,
  .drop-photo {
    border-right: none !important;
    border-bottom: 2px solid rgba(255,253,246,0.9);
  }

  body.brand--soulsita .feature-photo { border-bottom-color: var(--green); }

  .footer-inner { grid-template-columns: 1fr; }
  .footer-links { justify-content: flex-start; }
}

@media (max-width: 640px) {
  .promo-bar { padding: 7px 12px; }
  .section { padding: 72px 18px; }
  .nav-inner { padding: 16px 18px; }
  .nav-logo { width: 150px; }

  .nav-links,
  .footer-links {
    gap: 8px;
    font-size: 10px;
  }

  .nav-links a,
  .footer-links a,
  .btn,
  .nav-toggle {
    min-height: 44px;
  }

  .nav-links a,
  .footer-links a { padding: 0 11px; }

  .hero-grid {
    padding: 72px 18px 84px;
    gap: 42px;
  }

  .hero h2 { font-size: 62px; }
  .hero-photo { min-height: 420px; }

  .category-grid,
  .product-grid,
  .ig-grid,
  .signup-form,
  .clw-signup-form,
  .yellow-mini-boxes {
    grid-template-columns: 1fr !important;
  }

  .gate-card,
  .feature-copy,
  .drop-copy,
  .newsletter-box { padding: 32px; }

  .note-item { grid-template-columns: 1fr; gap: 10px; }
  .instagram-top { flex-direction: column; align-items: flex-start; }

  .btn { width: 100%; }
}