/* Page-specific head <style> for /brands (the brand-guidelines Resources
   landing). Loaded IN ADDITION to ss-inline-brand.css (shared microsite chrome
   + illustration/photography see-all + owl-nav rules). The rules below are the
   ones from the live page head <style> that ss-inline-brand.css does NOT already
   cover — the active-state background for the per-section category filter tabs
   that only this page renders (Logo / Templates / Virtual Background). The
   .illustration-tab-link.active rule is already in ss-inline-brand.css.

   The generic head blocks on live (WhatsApp form / select2 / anti-flicker / GTM)
   are intentionally skipped. The Brand Guideline / Style Guide tab rules
   (.brand-guideline-menu.c-active, .heading-links, .div-block-262) belong to the
   out-of-scope in-page tabs and are omitted. */

.templates-tab-link.active,
.virtual-background-tab-link.active,
.resources-logo-tab-link.active {
  background-color: #fff;
}

/* Sticky header backdrop (rebuild-only). The live tab bar (.tabs-menu-7) is
   transparent and sticky; on the live page the header reads as a full-viewport
   white bar with a soft bottom shadow that content scrolls under. Because our
   .tabs-menu-7 lives inside the max-width:1100 .side-by-side wrapper, giving it
   a background directly would paint a 1100-wide "card" with visible left/right
   shadow edges. Instead paint a full-viewport-width white strip behind the bar
   via a ::before that breaks out of the container, keeping the sticky logo/tabs
   (z-index 12/10) above it. Scoped to .brand-guideline-page so it never leaks. */
.brand-guideline-page .tabs-menu-7 {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}
.brand-guideline-page .tabs-menu-7::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  background-color: #fff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  z-index: -1;
}